diff --git a/src/resources/views/layouts/knowledge-base.blade.php b/src/resources/views/layouts/knowledge-base.blade.php
index 65031eb..a244ed9 100644
--- a/src/resources/views/layouts/knowledge-base.blade.php
+++ b/src/resources/views/layouts/knowledge-base.blade.php
@@ -27,7 +27,30 @@
         @livewireStyles
         @stack('styles')
     </head>
-    <body class="font-sans antialiased" x-data="{ mobileMenuOpen: false }">
+    <body class="font-sans antialiased" x-data="{ 
+        mobileMenuOpen: false,
+        sidebarWidth: localStorage.getItem('kb_sidebar_width') || 320,
+        isResizing: false,
+        startResize(e) {
+            if (window.innerWidth < 1024) return; // lg breakpoint
+            this.isResizing = true;
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+        },
+        resize(e) {
+            if (!this.isResizing) return;
+            const newWidth = Math.max(200, Math.min(600, e.clientX));
+            this.sidebarWidth = newWidth;
+            localStorage.setItem('kb_sidebar_width', newWidth);
+        },
+        stopResize() {
+            if (this.isResizing) {
+                this.isResizing = false;
+                document.body.style.cursor = '';
+                document.body.style.userSelect = '';
+            }
+        }
+    }" @mousemove.window="resize($event)" @mouseup.window="stopResize()">
         <div class="min-h-screen bg-gray-50">
             <!-- Header -->
             <header class="bg-white border-b border-gray-200 sticky top-0 z-20">
@@ -176,8 +199,20 @@ class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 ring-1 ring
             <!-- Main Content -->
             <div class="flex h-[calc(100vh-4rem)]">
                 <!-- Sidebar - Desktop -->
-                <aside class="hidden lg:block w-64 bg-white border-r border-gray-200 overflow-y-auto">
+                <aside 
+                    class="hidden lg:block bg-white border-r border-gray-200 overflow-y-auto relative"
+                    :style="'width: ' + sidebarWidth + 'px'"
+                >
                     @livewire('sidebar-tree')
+                    
+                    <!-- Resize Handle -->
+                    <div 
+                        @mousedown="startResize($event)"
+                        class="absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-indigo-500 transition-colors group"
+                        title="ドラッグして幅を変更"
+                    >
+                        <div class="absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-1.5 h-12 bg-gray-300 rounded-full group-hover:bg-indigo-500 transition-colors"></div>
+                    </div>
                 </aside>
 
                 <!-- Sidebar - Mobile Overlay -->
