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..f70ff96b0f 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,10 +1,13 @@
-import { useEditorEngine } from '@/components/store/editor';
-import { transKeys } from '@/i18n/keys';
+import { observer } from 'mobx-react-lite';
+import { useTranslations } from 'next-intl';
+
 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';
-import { useTranslations } from 'next-intl';
+
+import { useEditorEngine } from '@/components/store/editor';
+import { transKeys } from '@/i18n/keys';
 import { BranchesTab } from './branches-tab';
 import { BrandTab } from './brand-tab';
 import { HelpButton } from './help-button';
@@ -16,38 +19,41 @@ import { ZoomControls } from './zoom-controls';
 const tabs: {
     value: LeftPanelTabValue;
     icon: React.ReactNode;
-    label: any,
-    disabled?: boolean
-}[] =
-    [
-        {
-            value: LeftPanelTabValue.LAYERS,
-            icon: <Icons.Layers className="w-5 h-5" />,
-            label: transKeys.editor.panels.layers.tabs.layers,
-        },
-        {
-            value: LeftPanelTabValue.BRAND,
-            icon: <Icons.Brand className="w-5 h-5" />,
-            label: transKeys.editor.panels.layers.tabs.brand,
-        },
-        {
-            value: LeftPanelTabValue.PAGES,
-            icon: <Icons.File className="w-5 h-5" />,
-            label: transKeys.editor.panels.layers.tabs.pages,
-        },
-        {
-            value: LeftPanelTabValue.IMAGES,
-            icon: <Icons.Image className="w-5 h-5" />,
-            label: transKeys.editor.panels.layers.tabs.images,
-        },
-        {
-            value: LeftPanelTabValue.BRANCHES,
-            icon: <Icons.Branch className="w-5 h-5" />,
-            label: transKeys.editor.panels.layers.tabs.branches,
-        },
-    ];
+    label: any;
+    disabled?: boolean;
+}[] = [
+    {
+        value: LeftPanelTabValue.LAYERS,
+        icon: <Icons.Layers className="h-5 w-5" />,
+        label: transKeys.editor.panels.layers.tabs.layers,
+    },
+    {
+        value: LeftPanelTabValue.BRAND,
+        icon: <Icons.Brand className="h-5 w-5" />,
+        label: transKeys.editor.panels.layers.tabs.brand,
+    },
+    {
+        value: LeftPanelTabValue.PAGES,
+        icon: <Icons.File className="h-5 w-5" />,
+        label: transKeys.editor.panels.layers.tabs.pages,
+    },
+    {
+        value: LeftPanelTabValue.IMAGES,
+        icon: <Icons.Image className="h-5 w-5" />,
+        label: transKeys.editor.panels.layers.tabs.images,
+    },
+    {
+        value: LeftPanelTabValue.BRANCHES,
+        icon: <Icons.Branch className="h-5 w-5" />,
+        label: transKeys.editor.panels.layers.tabs.branches,
+    },
+];
+
+interface DesignPanelProps {
+    onClose?: () => void;
+}
 
-export const DesignPanel = observer(() => {
+export const DesignPanel = observer(({ onClose }: DesignPanelProps) => {
     const editorEngine = useEditorEngine();
     const t = useTranslations();
     const isLocked = editorEngine.state.leftPanelLocked;
@@ -98,21 +104,19 @@ export const DesignPanel = observer(() => {
     };
 
     return (
-        <div
-            className="flex h-full overflow-auto"
-            onMouseLeave={handleMouseLeave}
-        >
+        <div 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">
+            <div className="bg-background-onlook/60 flex w-20 flex-col items-center gap-2 py-0.5 backdrop-blur-xl">
                 {tabs.map((tab) => (
                     <button
                         key={tab.value}
                         className={cn(
-                            'w-16 h-16 rounded-xl flex flex-col items-center justify-center gap-1.5 p-2',
+                            'flex h-16 w-16 flex-col items-center justify-center gap-1.5 rounded-xl p-2',
                             selectedTab === tab.value && isLocked
-                                ? 'bg-accent text-foreground border-[0.5px] border-foreground/20 '
+                                ? 'bg-accent text-foreground border-foreground/20 border-[0.5px]'
                                 : 'text-muted-foreground hover:text-foreground hover:bg-accent/50',
-                            tab.disabled && 'opacity-50 cursor-not-allowed hover:bg-transparent hover:text-muted-foreground',
+                            tab.disabled &&
+                                'hover:text-muted-foreground cursor-not-allowed opacity-50 hover:bg-transparent',
                         )}
                         disabled={tab.disabled}
                         onClick={() => !tab.disabled && handleClick(tab.value)}
@@ -123,7 +127,7 @@ export const DesignPanel = observer(() => {
                     </button>
                 ))}
 
-                <div className="mt-auto flex flex-col gap-0 items-center mb-4">
+                <div className="mt-auto mb-4 flex flex-col items-center gap-0">
                     <ZoomControls />
                     <HelpButton />
                 </div>
@@ -132,8 +136,18 @@ export const DesignPanel = observer(() => {
             {/* Content panel */}
             {editorEngine.state.leftPanelTab && (
                 <>
-                    <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">
+                    <div className="bg-background/95 w-[280px] flex-1 rounded-xl">
+                        <div className="relative h-full overflow-auto rounded-xl border p-0 shadow backdrop-blur-xl">
+                            {onClose && (
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="absolute top-2 right-2 z-10 h-6 w-6"
+                                    onClick={onClose}
+                                >
+                                    <Icons.CrossS className="h-4 w-4" />
+                                </Button>
+                            )}
                             {selectedTab === LeftPanelTabValue.LAYERS && <LayersTab />}
                             {selectedTab === LeftPanelTabValue.BRAND && <BrandTab />}
                             {selectedTab === LeftPanelTabValue.PAGES && <PagesTab />}
@@ -143,7 +157,7 @@ export const DesignPanel = observer(() => {
                     </div>
 
                     {/* Invisible padding area that maintains hover state */}
-                    {!isLocked && <div className="w-24 h-full" />}
+                    {!isLocked && <div className="h-full w-24" />}
                 </>
             )}
         </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..3390764c0c 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
@@ -1,18 +1,38 @@
-import { useEditorEngine } from "@/components/store/editor";
-import { EditorMode } from "@onlook/models";
-import { cn } from "@onlook/ui/utils";
-import { observer } from "mobx-react-lite";
-import { CodePanel } from "./code-panel";
-import { DesignPanel } from "./design-panel";
+import { observer } from 'mobx-react-lite';
 
-export const LeftPanel = observer(() => {
+import { EditorMode } from '@onlook/models';
+import { cn } from '@onlook/ui/utils';
+
+import { useEditorEngine } from '@/components/store/editor';
+import { CodePanel } from './code-panel';
+import { DesignPanel } from './design-panel';
+
+interface LeftPanelProps {
+    onClose?: () => void;
+}
+
+export const LeftPanel = observer(({ onClose }: LeftPanelProps) => {
     const editorEngine = useEditorEngine();
-    return <>
-        <div className={cn('size-full', editorEngine.state.editorMode !== EditorMode.DESIGN && editorEngine.state.editorMode !== EditorMode.PAN && 'hidden')}>
-            <DesignPanel />
-        </div>
-        <div className={cn('size-full', editorEngine.state.editorMode !== EditorMode.CODE && 'hidden')}>
-            <CodePanel />
-        </div>
-    </>;
-});
\ No newline at end of file
+    return (
+        <>
+            <div
+                className={cn(
+                    'size-full',
+                    editorEngine.state.editorMode !== EditorMode.DESIGN &&
+                        editorEngine.state.editorMode !== EditorMode.PAN &&
+                        'hidden',
+                )}
+            >
+                <DesignPanel onClose={onClose} />
+            </div>
+            <div
+                className={cn(
+                    'size-full',
+                    editorEngine.state.editorMode !== EditorMode.CODE && 'hidden',
+                )}
+            >
+                <CodePanel />
+            </div>
+        </>
+    );
+});
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..ff0547682f 100644
--- a/apps/web/client/src/app/project/[id]/_components/main.tsx
+++ b/apps/web/client/src/app/project/[id]/_components/main.tsx
@@ -1,17 +1,29 @@
 'use client';
 
-import { useEditorEngine } from '@/components/store/editor';
-import { SubscriptionModal } from '@/components/ui/pricing-modal';
-import { SettingsModalWithProjects } from '@/components/ui/settings-modal/with-project';
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { observer } from 'mobx-react-lite';
+
 import { EditorAttributes } from '@onlook/constants';
-import { EditorMode } from '@onlook/models';
+import { EditorMode, LeftPanelTabValue } from '@onlook/models';
 import { Button } from '@onlook/ui/button';
+import {
+    ContextMenu,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+} from '@onlook/ui/context-menu';
 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 { useEditorEngine } from '@/components/store/editor';
+import { SubscriptionModal } from '@/components/ui/pricing-modal';
+import { SettingsModalWithProjects } from '@/components/ui/settings-modal/with-project';
 import { usePanelMeasurements } from '../_hooks/use-panel-measure';
 import { useStartProject } from '../_hooks/use-start-project';
 import { BottomBar } from './bottom-bar';
@@ -32,15 +44,23 @@ export const Main = observer(() => {
         rightPanelRef,
     );
 
+    const handleSidebarClick = (tab: LeftPanelTabValue) => {
+        editorEngine.state.leftPanelTab = tab;
+        editorEngine.state.leftPanelLocked = true;
+    };
+
+    const handleClosePanel = () => {
+        editorEngine.state.leftPanelTab = null;
+        editorEngine.state.leftPanelLocked = false;
+    };
+
     useEffect(() => {
         function handleGlobalWheel(event: WheelEvent) {
             if (!(event.ctrlKey || event.metaKey)) {
                 return;
             }
 
-            const canvasContainer = document.getElementById(
-                EditorAttributes.CANVAS_CONTAINER_ID,
-            );
+            const canvasContainer = document.getElementById(EditorAttributes.CANVAS_CONTAINER_ID);
             if (canvasContainer?.contains(event.target as Node | null)) {
                 return;
             }
@@ -56,14 +76,16 @@ export const Main = observer(() => {
 
     if (error) {
         return (
-            <div className="h-screen w-screen flex items-center justify-center gap-2 flex-col">
+            <div className="flex h-screen w-screen flex-col items-center justify-center gap-2">
                 <div className="flex flex-row items-center justify-center gap-2">
-                    <Icons.ExclamationTriangle className="h-6 w-6 text-foreground-primary" />
+                    <Icons.ExclamationTriangle className="text-foreground-primary h-6 w-6" />
                     <div className="text-xl">Error starting project: {error}</div>
                 </div>
-                <Button onClick={() => {
-                    router.push('/');
-                }}>
+                <Button
+                    onClick={() => {
+                        router.push('/');
+                    }}
+                >
                     Go to home
                 </Button>
             </div>
@@ -72,8 +94,8 @@ export const Main = observer(() => {
 
     if (!isProjectReady) {
         return (
-            <div className="h-screen w-screen flex items-center justify-center gap-2">
-                <Icons.LoadingSpinner className="h-6 w-6 animate-spin text-foreground-primary" />
+            <div className="flex h-screen w-screen items-center justify-center gap-2">
+                <Icons.LoadingSpinner className="text-foreground-primary h-6 w-6 animate-spin" />
                 <div className="text-xl">Loading project...</div>
             </div>
         );
@@ -81,19 +103,78 @@ export const Main = observer(() => {
 
     return (
         <TooltipProvider>
-            <div className="h-screen w-screen flex flex-row select-none relative overflow-hidden">
-                <Canvas />
+            <div className="relative flex h-screen w-screen flex-row overflow-hidden select-none">
+                <ContextMenu>
+                    <ContextMenuTrigger asChild>
+                        <div className="flex-1">
+                            <Canvas />
+                        </div>
+                    </ContextMenuTrigger>
+                    <ContextMenuContent className="bg-background/95 w-64 backdrop-blur-lg">
+                        <ContextMenuItem disabled>
+                            <Icons.Plus className="mr-2 h-4 w-4" />
+                            <span>Add Element</span>
+                        </ContextMenuItem>
+                        <ContextMenuItem disabled>
+                            <Icons.ComponentInstance className="mr-2 h-4 w-4" />
+                            <span>Add Component</span>
+                        </ContextMenuItem>
+                        <ContextMenuSeparator />
+                        <ContextMenuSub>
+                            <ContextMenuSubTrigger>
+                                <Icons.ViewGrid className="mr-2 h-4 w-4" />
+                                <span>Panels</span>
+                            </ContextMenuSubTrigger>
+                            <ContextMenuSubContent className="w-48">
+                                <ContextMenuItem
+                                    onClick={() => handleSidebarClick(LeftPanelTabValue.LAYERS)}
+                                >
+                                    <span>Layers</span>
+                                </ContextMenuItem>
+                                <ContextMenuItem
+                                    onClick={() => handleSidebarClick(LeftPanelTabValue.BRAND)}
+                                >
+                                    <span>Brand</span>
+                                </ContextMenuItem>
+                                <ContextMenuItem
+                                    onClick={() => handleSidebarClick(LeftPanelTabValue.PAGES)}
+                                >
+                                    <span>Pages</span>
+                                </ContextMenuItem>
+                                <ContextMenuItem
+                                    onClick={() => handleSidebarClick(LeftPanelTabValue.IMAGES)}
+                                >
+                                    <span>Images</span>
+                                </ContextMenuItem>
+                                <ContextMenuSeparator />
+                                <ContextMenuItem
+                                    onClick={() => handleSidebarClick(LeftPanelTabValue.BRANCHES)}
+                                >
+                                    <span>Branches</span>
+                                </ContextMenuItem>
+                            </ContextMenuSubContent>
+                        </ContextMenuSub>
+                        <ContextMenuSeparator />
+                        <ContextMenuItem onClick={() => void editorEngine.copy.copy()}>
+                            <Icons.Clipboard className="mr-2 h-4 w-4" />
+                            <span>Copy</span>
+                            <span className="text-muted-foreground ml-auto text-xs">⌘ C</span>
+                        </ContextMenuItem>
+                        <ContextMenuItem onClick={() => void editorEngine.copy.paste()}>
+                            <Icons.ClipboardCopy className="mr-2 h-4 w-4" />
+                            <span>Paste</span>
+                            <span className="text-muted-foreground ml-auto text-xs">⌘ V</span>
+                        </ContextMenuItem>
+                    </ContextMenuContent>
+                </ContextMenu>
 
                 <div className="absolute top-0 w-full">
                     <TopBar />
                 </div>
 
                 {/* Left Panel */}
-                <div
-                    ref={leftPanelRef}
-                    className="absolute top-10 left-0 h-[calc(100%-40px)] z-50"
-                >
-                    <LeftPanel />
+                <div ref={leftPanelRef} className="absolute top-10 left-2 z-50 h-[calc(100%-40px)]">
+                    <LeftPanel onClose={handleClosePanel} />
                 </div>
                 {/* EditorBar anchored between panels */}
                 <div
@@ -118,8 +199,8 @@ export const Main = observer(() => {
                 <div
                     ref={rightPanelRef}
                     className={cn(
-                        "absolute top-10 right-0 h-[calc(100%-40px)] z-50",
-                        editorEngine.state.editorMode === EditorMode.PREVIEW && 'hidden'
+                        'absolute top-10 right-0 z-50 h-[calc(100%-40px)]',
+                        editorEngine.state.editorMode === EditorMode.PREVIEW && 'hidden',
                     )}
                 >
                     <RightPanel />
@@ -129,6 +210,6 @@ export const Main = observer(() => {
             </div>
             <SettingsModalWithProjects />
             <SubscriptionModal />
-        </TooltipProvider >
+        </TooltipProvider>
     );
 });