diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 14dc5af..26db92b 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -58,7 +58,7 @@ export default function Editor() {
       <div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
         <EditorHeader />
         <div className="flex-1 min-h-0 min-w-0">
-          <ResizablePanelGroup direction="vertical" className="h-full w-full gap-2">
+          <ResizablePanelGroup direction="vertical" className="h-full w-full gap-1">
             <ResizablePanel
               defaultSize={mainContent}
               minSize={30}
@@ -69,7 +69,7 @@ export default function Editor() {
               {/* Main content area */}
               <ResizablePanelGroup
                 direction="horizontal"
-                className="h-full w-full gap-2 px-2"
+                className="h-full w-full gap-1 px-2"
               >
                 {/* Tools Panel */}
                 <ResizablePanel
diff --git a/apps/web/src/components/ui/resizable.tsx b/apps/web/src/components/ui/resizable.tsx
index 7f9ea66..8f3cb2e 100644
--- a/apps/web/src/components/ui/resizable.tsx
+++ b/apps/web/src/components/ui/resizable.tsx
@@ -29,12 +29,11 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      "hidden",
+      "relative w-0 bg-transparent cursor-col-resize data-[panel-group-direction=vertical]:h-0 data-[panel-group-direction=vertical]:cursor-row-resize",
       className
     )}
     {...props}
-  >
-  </ResizablePrimitive.PanelResizeHandle>
+  />
 );
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };