diff --git a/apps/web/client/src/app/project/[id]/_components/canvas/index.tsx b/apps/web/client/src/app/project/[id]/_components/canvas/index.tsx
index fa90d54f0b..23539ec1b0 100644
--- a/apps/web/client/src/app/project/[id]/_components/canvas/index.tsx
+++ b/apps/web/client/src/app/project/[id]/_components/canvas/index.tsx
@@ -2,7 +2,18 @@
 
 import { useEditorEngine } from '@/components/store/editor';
 import { EditorAttributes } from '@onlook/constants';
-import { EditorMode } from '@onlook/models';
+import { EditorMode, LeftPanelTabValue } from '@onlook/models';
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+} from '@onlook/ui/context-menu';
+import { Icons } from '@onlook/ui/icons';
 import { throttle } from 'lodash';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -23,7 +34,11 @@ const MAX_Y = 10000;
 const MIN_X = -5000;
 const MIN_Y = -5000;
 
-export const Canvas = observer(() => {
+interface CanvasProps {
+    onSidebarClick?: (tab: LeftPanelTabValue) => void;
+}
+
+export const Canvas = observer(({ onSidebarClick }: CanvasProps) => {
     const editorEngine = useEditorEngine();
     const containerRef = useRef<HTMLDivElement>(null);
     const scale = editorEngine.canvas.scale;
@@ -272,41 +287,127 @@ export const Canvas = observer(() => {
 
     return (
         <HotkeysArea>
-            <div
-                ref={containerRef}
-                className="overflow-hidden bg-background-onlook flex flex-grow relative"
-                onMouseDown={handleCanvasMouseDown}
-                onMouseMove={handleCanvasMouseMove}
-                onMouseUp={handleCanvasMouseUp}
-                onMouseLeave={(e) => {
-                    // Only terminate drag if no mouse button is pressed
-                    // Note: The global mouseup listener will handle the actual cleanup
-                    // This is just an additional safety check for when mouse leaves without buttons pressed
-                    if (e.buttons === 0 && isDragSelecting) {
-                        setIsDragSelecting(false);
-                        setFramesInSelection(new Set());
-                        editorEngine.state.isDragSelecting = false;
-                    }
-                }}
-            >
-                <div id={EditorAttributes.CANVAS_CONTAINER_ID} style={transformStyle}>
-                    <Frames framesInDragSelection={framesInSelection} />
-                </div>
-                <RecenterCanvasButton />
-                <DragSelectOverlay
-                    startX={dragSelectStart.x}
-                    startY={dragSelectStart.y}
-                    endX={dragSelectEnd.x}
-                    endY={dragSelectEnd.y}
-                    isSelecting={isDragSelecting}
-                />
-                <Overlay />
-                <PanOverlay
-                    clampPosition={(position: { x: number; y: number }) =>
-                        clampPosition(position, scale)
-                    }
-                />
-            </div>
+            <ContextMenu>
+                <ContextMenuTrigger asChild>
+                    <div
+                        ref={containerRef}
+                        className="overflow-hidden bg-background-onlook flex flex-grow relative"
+                        onMouseDown={handleCanvasMouseDown}
+                        onMouseMove={handleCanvasMouseMove}
+                        onMouseUp={handleCanvasMouseUp}
+                        onMouseLeave={(e) => {
+                            // Only terminate drag if no mouse button is pressed
+                            // Note: The global mouseup listener will handle the actual cleanup
+                            // This is just an additional safety check for when mouse leaves without buttons pressed
+                            if (e.buttons === 0 && isDragSelecting) {
+                                setIsDragSelecting(false);
+                                setFramesInSelection(new Set());
+                                editorEngine.state.isDragSelecting = false;
+                            }
+                        }}
+                    >
+                        <div id={EditorAttributes.CANVAS_CONTAINER_ID} style={transformStyle}>
+                            <Frames framesInDragSelection={framesInSelection} />
+                        </div>
+                        <RecenterCanvasButton />
+                        <DragSelectOverlay
+                            startX={dragSelectStart.x}
+                            startY={dragSelectStart.y}
+                            endX={dragSelectEnd.x}
+                            endY={dragSelectEnd.y}
+                            isSelecting={isDragSelecting}
+                        />
+                        <Overlay />
+                        <PanOverlay
+                            clampPosition={(position: { x: number; y: number }) =>
+                                clampPosition(position, scale)
+                            }
+                        />
+                    </div>
+                </ContextMenuTrigger>
+                <ContextMenuContent className="w-64 bg-background/95 backdrop-blur-lg">
+                    <ContextMenuItem
+                        onClick={() => {
+                            // Add Element action
+                        }}
+                    >
+                        <Icons.Plus className="mr-2 h-4 w-4" />
+                        Add Element
+                    </ContextMenuItem>
+                    <ContextMenuItem
+                        onClick={() => {
+                            // Add Component action
+                        }}
+                    >
+                        <Icons.ComponentInstance className="mr-2 h-4 w-4" />
+                        Add Component
+                    </ContextMenuItem>
+                    <ContextMenuSeparator />
+                    <ContextMenuSub>
+                        <ContextMenuSubTrigger>
+                            <Icons.ViewGrid className="mr-2 h-4 w-4" />
+                            Panels
+                        </ContextMenuSubTrigger>
+                        <ContextMenuSubContent>
+                            <ContextMenuItem
+                                onClick={() => {
+                                    onSidebarClick?.(LeftPanelTabValue.LAYERS);
+                                }}
+                            >
+                                Layers
+                            </ContextMenuItem>
+                            <ContextMenuItem
+                                onClick={() => {
+                                    onSidebarClick?.(LeftPanelTabValue.BRAND);
+                                }}
+                            >
+                                Brand
+                            </ContextMenuItem>
+                            <ContextMenuItem
+                                onClick={() => {
+                                    onSidebarClick?.(LeftPanelTabValue.PAGES);
+                                }}
+                            >
+                                Pages
+                            </ContextMenuItem>
+                            <ContextMenuItem
+                                onClick={() => {
+                                    onSidebarClick?.(LeftPanelTabValue.IMAGES);
+                                }}
+                            >
+                                Images
+                            </ContextMenuItem>
+                        </ContextMenuSubContent>
+                    </ContextMenuSub>
+                    <ContextMenuSeparator />
+                    <ContextMenuItem
+                        onClick={() => {
+                            onSidebarClick?.(LeftPanelTabValue.BRANCHES);
+                        }}
+                    >
+                        Branches
+                    </ContextMenuItem>
+                    <ContextMenuSeparator />
+                    <ContextMenuItem
+                        onClick={() => {
+                            editorEngine.copy.copy();
+                        }}
+                    >
+                        <Icons.Clipboard className="mr-2 h-4 w-4" />
+                        Copy
+                        <span className="ml-auto text-xs text-muted-foreground">⌘ C</span>
+                    </ContextMenuItem>
+                    <ContextMenuItem
+                        onClick={() => {
+                            editorEngine.copy.paste();
+                        }}
+                    >
+                        <Icons.ClipboardCopy className="mr-2 h-4 w-4" />
+                        Paste
+                        <span className="ml-auto text-xs text-muted-foreground">⌘ V</span>
+                    </ContextMenuItem>
+                </ContextMenuContent>
+            </ContextMenu>
         </HotkeysArea>
     );
 });
diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/design-panel/index.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/design-panel/index.tsx
index 2ca8c8973c..f43b63d196 100644
--- a/apps/web/client/src/app/project/[id]/_components/left-panel/design-panel/index.tsx
+++ b/apps/web/client/src/app/project/[id]/_components/left-panel/design-panel/index.tsx
@@ -1,6 +1,7 @@
 import { useEditorEngine } from '@/components/store/editor';
 import { transKeys } from '@/i18n/keys';
 import { LeftPanelTabValue } from '@onlook/models';
+import { Button } from '@onlook/ui/button';
 import { Icons } from '@onlook/ui/icons';
 import { cn } from '@onlook/ui/utils';
 import { observer } from 'mobx-react-lite';
@@ -47,11 +48,16 @@ const tabs: {
         },
     ];
 
-export const DesignPanel = observer(() => {
+interface DesignPanelProps {
+    onClose?: () => void;
+    activeSection?: string | null;
+}
+
+export const DesignPanel = observer(({ onClose, activeSection }: DesignPanelProps) => {
     const editorEngine = useEditorEngine();
     const t = useTranslations();
     const isLocked = editorEngine.state.leftPanelLocked;
-    const selectedTab = editorEngine.state.leftPanelTab;
+    const selectedTab = (activeSection as LeftPanelTabValue) || editorEngine.state.leftPanelTab;
 
     const handleMouseEnter = (tab: LeftPanelTabValue) => {
         if (isLocked) {
@@ -102,8 +108,8 @@ export const DesignPanel = observer(() => {
             className="flex h-full overflow-auto"
             onMouseLeave={handleMouseLeave}
         >
-            {/* Left sidebar with tabs */}
-            <div className="w-20 flex flex-col items-center py-0.5 gap-2 bg-background-onlook/60 backdrop-blur-xl">
+            {/* Left sidebar with tabs - HIDDEN */}
+            {/* <div className="w-20 flex flex-col items-center py-0.5 gap-2 bg-background-onlook/60 backdrop-blur-xl">
                 {tabs.map((tab) => (
                     <button
                         key={tab.value}
@@ -127,18 +133,47 @@ export const DesignPanel = observer(() => {
                     <ZoomControls />
                     <HelpButton />
                 </div>
-            </div>
+            </div> */}
 
             {/* Content panel */}
-            {editorEngine.state.leftPanelTab && (
+            {selectedTab && (
                 <>
                     <div className="flex-1 w-[280px] bg-background/95 rounded-xl">
-                        <div className="border backdrop-blur-xl h-full shadow overflow-auto p-0 rounded-xl">
-                            {selectedTab === LeftPanelTabValue.LAYERS && <LayersTab />}
-                            {selectedTab === LeftPanelTabValue.BRAND && <BrandTab />}
-                            {selectedTab === LeftPanelTabValue.PAGES && <PagesTab />}
-                            {selectedTab === LeftPanelTabValue.IMAGES && <ImagesTab />}
-                            {selectedTab === LeftPanelTabValue.BRANCHES && <BranchesTab />}
+                        <div className="border backdrop-blur-xl h-full shadow overflow-auto p-0 rounded-xl flex flex-col">
+                            {/* Panel header with close button */}
+                            <div className="flex items-center justify-between p-3 border-b border-border/50">
+                                <div className="flex items-center gap-2">
+                                    {selectedTab === LeftPanelTabValue.LAYERS && <Icons.Layers className="w-4 h-4" />}
+                                    {selectedTab === LeftPanelTabValue.BRAND && <Icons.Brand className="w-4 h-4" />}
+                                    {selectedTab === LeftPanelTabValue.PAGES && <Icons.File className="w-4 h-4" />}
+                                    {selectedTab === LeftPanelTabValue.IMAGES && <Icons.Image className="w-4 h-4" />}
+                                    {selectedTab === LeftPanelTabValue.BRANCHES && <Icons.Branch className="w-4 h-4" />}
+                                    <span className="text-sm font-medium">
+                                        {selectedTab === LeftPanelTabValue.LAYERS && t(transKeys.editor.panels.layers.tabs.layers)}
+                                        {selectedTab === LeftPanelTabValue.BRAND && t(transKeys.editor.panels.layers.tabs.brand)}
+                                        {selectedTab === LeftPanelTabValue.PAGES && t(transKeys.editor.panels.layers.tabs.pages)}
+                                        {selectedTab === LeftPanelTabValue.IMAGES && t(transKeys.editor.panels.layers.tabs.images)}
+                                        {selectedTab === LeftPanelTabValue.BRANCHES && t(transKeys.editor.panels.layers.tabs.branches)}
+                                    </span>
+                                </div>
+                                {onClose && (
+                                    <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        className="h-6 w-6"
+                                        onClick={onClose}
+                                    >
+                                        <Icons.CrossS className="h-4 w-4" />
+                                    </Button>
+                                )}
+                            </div>
+                            <div className="flex-1 overflow-auto">
+                                {selectedTab === LeftPanelTabValue.LAYERS && <LayersTab />}
+                                {selectedTab === LeftPanelTabValue.BRAND && <BrandTab />}
+                                {selectedTab === LeftPanelTabValue.PAGES && <PagesTab />}
+                                {selectedTab === LeftPanelTabValue.IMAGES && <ImagesTab />}
+                                {selectedTab === LeftPanelTabValue.BRANCHES && <BranchesTab />}
+                            </div>
                         </div>
                     </div>
 
diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/index.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/index.tsx
index dc8fc0e5b6..98435074ac 100644
--- a/apps/web/client/src/app/project/[id]/_components/left-panel/index.tsx
+++ b/apps/web/client/src/app/project/[id]/_components/left-panel/index.tsx
@@ -5,11 +5,16 @@ import { observer } from "mobx-react-lite";
 import { CodePanel } from "./code-panel";
 import { DesignPanel } from "./design-panel";
 
-export const LeftPanel = observer(() => {
+interface LeftPanelProps {
+    onClose?: () => void;
+    activeSection?: string | null;
+}
+
+export const LeftPanel = observer(({ onClose, activeSection }: LeftPanelProps) => {
     const editorEngine = useEditorEngine();
     return <>
         <div className={cn('size-full', editorEngine.state.editorMode !== EditorMode.DESIGN && editorEngine.state.editorMode !== EditorMode.PAN && 'hidden')}>
-            <DesignPanel />
+            <DesignPanel onClose={onClose} activeSection={activeSection} />
         </div>
         <div className={cn('size-full', editorEngine.state.editorMode !== EditorMode.CODE && 'hidden')}>
             <CodePanel />
diff --git a/apps/web/client/src/app/project/[id]/_components/main.tsx b/apps/web/client/src/app/project/[id]/_components/main.tsx
index 4109496d6f..f00d7b5650 100644
--- a/apps/web/client/src/app/project/[id]/_components/main.tsx
+++ b/apps/web/client/src/app/project/[id]/_components/main.tsx
@@ -4,14 +4,14 @@ import { useEditorEngine } from '@/components/store/editor';
 import { SubscriptionModal } from '@/components/ui/pricing-modal';
 import { SettingsModalWithProjects } from '@/components/ui/settings-modal/with-project';
 import { EditorAttributes } from '@onlook/constants';
-import { EditorMode } from '@onlook/models';
+import { EditorMode, LeftPanelTabValue } from '@onlook/models';
 import { Button } from '@onlook/ui/button';
 import { Icons } from '@onlook/ui/icons';
 import { TooltipProvider } from '@onlook/ui/tooltip';
 import { cn } from '@onlook/ui/utils';
 import { observer } from 'mobx-react-lite';
 import { useRouter } from 'next/navigation';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { usePanelMeasurements } from '../_hooks/use-panel-measure';
 import { useStartProject } from '../_hooks/use-start-project';
 import { BottomBar } from './bottom-bar';
@@ -31,6 +31,19 @@ export const Main = observer(() => {
         leftPanelRef,
         rightPanelRef,
     );
+    const [activeSection, setActiveSection] = useState<string | null>(null);
+
+    const handleSidebarClick = (tab: LeftPanelTabValue) => {
+        editorEngine.state.leftPanelTab = tab;
+        editorEngine.state.leftPanelLocked = true;
+        setActiveSection(tab);
+    };
+
+    const handleClosePanel = () => {
+        editorEngine.state.leftPanelTab = null;
+        editorEngine.state.leftPanelLocked = false;
+        setActiveSection(null);
+    };
 
     useEffect(() => {
         function handleGlobalWheel(event: WheelEvent) {
@@ -82,7 +95,7 @@ export const Main = observer(() => {
     return (
         <TooltipProvider>
             <div className="h-screen w-screen flex flex-row select-none relative overflow-hidden">
-                <Canvas />
+                <Canvas onSidebarClick={handleSidebarClick} />
 
                 <div className="absolute top-0 w-full">
                     <TopBar />
@@ -91,9 +104,9 @@ export const Main = observer(() => {
                 {/* Left Panel */}
                 <div
                     ref={leftPanelRef}
-                    className="absolute top-10 left-0 h-[calc(100%-40px)] z-50"
+                    className="absolute top-10 left-2 h-[calc(100%-40px)] z-50"
                 >
-                    <LeftPanel />
+                    <LeftPanel onClose={handleClosePanel} activeSection={activeSection} />
                 </div>
                 {/* EditorBar anchored between panels */}
                 <div