diff --git a/src/components/file-system/Sidebar/Sidebar.tsx b/src/components/file-system/Sidebar/Sidebar.tsx
index a8ba7d1..45cf34d 100644
--- a/src/components/file-system/Sidebar/Sidebar.tsx
+++ b/src/components/file-system/Sidebar/Sidebar.tsx
@@ -4,7 +4,7 @@ import type { FileItem } from '@/lib/api'
 import type { TOCItem } from '@/lib/utils'
 import { useWallpaper } from '@/stores'
 import { ContextMenu } from '@/components/common/ContextMenu'
-import React, { useState } from 'react'
+import React, { useState, forwardRef, useRef, useEffect } from 'react'
 import { useFileSystemContext } from '@/contexts/FileSystemContext'
 import { DragContextProvider } from '@/contexts/DragContext'
 import { useDropTarget } from '@/hooks/domain/useDragDrop'
@@ -47,7 +47,7 @@ const renderTOCItem = (item: TOCItem, onTOCItemClick: (id: string) => void) => {
   )
 }
 
-const SidebarContent = ({
+const SidebarContent = forwardRef<HTMLDivElement, SidebarProps>(({
   isOpen,
   width,
   refreshKey,
@@ -60,9 +60,20 @@ const SidebarContent = ({
   tocItems,
   onTOCItemClick,
   onTOCClose,
-}: SidebarProps) => {
+}, ref) => {
   const { opacity } = useWallpaper()
   const { openCreateDirectoryDialog, openCreateFileDialog, openRenameDialog, openDeleteDialog } = useFileSystemContext()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(containerRef.current)
+      } else {
+        ref.current = containerRef.current
+      }
+    }
+  }, [ref])
 
   const [contextMenuOpen, setContextMenuOpen] = useState(false)
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
@@ -132,7 +143,9 @@ const SidebarContent = ({
 
   return (
     <div
+      ref={containerRef}
       className={`
+          sidebar-container
           backdrop-blur-sm border-r border-gray-200 dark:border-gray-700/60 transition-none flex flex-col shrink-0 relative z-20
           ${isOpen ? '' : 'hidden'}
         `}
@@ -221,14 +234,14 @@ const SidebarContent = ({
       />
     </div>
   )
-}
+})
 
-export const Sidebar = (props: SidebarProps) => {
+export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>((props, ref) => {
   const { moveItem } = useFileSystemContext()
 
   return (
     <DragContextProvider moveItem={moveItem}>
-      <SidebarContent {...props} />
+      <SidebarContent {...props} ref={ref} />
     </DragContextProvider>
   )
-}
+})
diff --git a/src/hooks/ui/useSidebarResize.ts b/src/hooks/ui/useSidebarResize.ts
index cae74c2..c5b35d9 100644
--- a/src/hooks/ui/useSidebarResize.ts
+++ b/src/hooks/ui/useSidebarResize.ts
@@ -3,13 +3,16 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 export const useSidebarResize = (initialWidth: number = 250) => {
   const [sidebarWidth, setSidebarWidth] = useState(initialWidth)
   const [isResizing, setIsResizing] = useState(false)
-  const offsetX = useRef(0)
+  const sidebarLeft = useRef(0)
 
   const startResizing = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
-    const rect = (e.target as HTMLElement).getBoundingClientRect()
-    offsetX.current = e.clientX - rect.left
-    setIsResizing(true)
+    const sidebar = (e.target as HTMLElement).closest('.sidebar-container') as HTMLElement
+    if (sidebar) {
+      const rect = sidebar.getBoundingClientRect()
+      sidebarLeft.current = rect.left
+      setIsResizing(true)
+    }
   }, [])
 
   useEffect(() => {
@@ -17,7 +20,7 @@ export const useSidebarResize = (initialWidth: number = 250) => {
 
     const stopResizing = () => setIsResizing(false)
     const resize = (e: MouseEvent) => {
-      const newWidth = e.clientX - offsetX.current
+      const newWidth = e.clientX - sidebarLeft.current
       if (newWidth > 150 && newWidth < 600) {
         setSidebarWidth(newWidth)
       }
@@ -33,4 +36,3 @@ export const useSidebarResize = (initialWidth: number = 250) => {
 
   return { sidebarWidth, startResizing }
 }
-