diff --git a/src/App.tsx b/src/App.tsx
index 813e006..2c4451a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { BrowserRouter, useLocation } from 'react-router-dom'
 console.log('[APP_ROUTER] ✅ React Router imported')
 
 import { AppHeader } from '@/components/organisms'
+import { NavigationMenu } from '@/components/organisms/NavigationMenu'
 console.log('[APP_ROUTER] ✅ Header components imported')
 
 import { LoadingFallback } from '@/components/molecules'
@@ -33,6 +34,9 @@ console.log('[APP_ROUTER] ✅ Component registry imported')
 import { RouterProvider } from '@/router'
 console.log('[APP_ROUTER] ✅ Router provider imported')
 
+import { SidebarProvider, SidebarInset, Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'
+console.log('[APP_ROUTER] ✅ Sidebar provider imported')
+
 const { GlobalSearch, KeyboardShortcutsDialog, PreviewDialog } = DialogRegistry
 const { PWAInstallPrompt, PWAUpdatePrompt, PWAStatusBar } = PWARegistry
 console.log('[APP_ROUTER] ✅ Dialog and PWA components registered')
@@ -186,87 +190,99 @@ function AppLayout() {
   console.log('[APP_ROUTER] 🎨 Rendering AppLayout UI')
   
   return (
-    <div className="h-screen flex flex-col bg-background">
+    <SidebarProvider defaultOpen={true}>
       <Suspense fallback={<div className="h-1 bg-primary animate-pulse" />}>
         <PWAStatusBar />
       </Suspense>
       <Suspense fallback={null}>
         <PWAUpdatePrompt />
       </Suspense>
-      <AppHeader
+      
+      <NavigationMenu
         activeTab={currentPage}
         onTabChange={navigateToPage}
         featureToggles={featureToggles}
         errorCount={errorCount}
-        lastSaved={lastSaved}
-        currentProject={getCurrentProject()}
-        onProjectLoad={handleProjectLoad}
-        onSearch={() => {
-          console.log('[APP_ROUTER] 🔍 Search opened')
-          setSearchOpen(true)
-        }}
-        onShowShortcuts={() => {
-          console.log('[APP_ROUTER] ⌨️ Shortcuts dialog opened')
-          setShortcutsOpen(true)
-        }}
-        onGenerateAI={() => {
-          console.log('[APP_ROUTER] 🤖 AI generation requested')
-          toast.info('AI generation coming soon')
-        }}
-        onExport={() => {
-          console.log('[APP_ROUTER] 📤 Export requested')
-          toast.info('Export coming soon')
-        }}
-        onPreview={() => {
-          console.log('[APP_ROUTER] 👁️ Preview opened')
-          setPreviewOpen(true)
-        }}
-        onShowErrors={() => {
-          console.log('[APP_ROUTER] ⚠️ Navigating to errors page')
-          navigateToPage('errors')
-        }}
       />
-      <div className="flex-1 overflow-hidden">
-        <RouterProvider 
-          featureToggles={featureToggles}
-          stateContext={{
-            files,
-            models,
-            components,
-            componentTrees,
-            workflows,
-            lambdas,
-            theme,
-            playwrightTests,
-            storybookStories,
-            unitTests,
-            flaskConfig,
-            nextjsConfig,
-            npmSettings,
-            featureToggles,
-            activeFileId,
-          }}
-          actionContext={{
-            handleFileChange,
-            setActiveFileId,
-            handleFileClose,
-            handleFileAdd,
-            setModels,
-            setComponents,
-            setComponentTrees,
-            setWorkflows,
-            setLambdas,
-            setTheme,
-            setPlaywrightTests,
-            setStorybookStories,
-            setUnitTests,
-            setFlaskConfig,
-            setNextjsConfig,
-            setNpmSettings,
-            setFeatureToggles,
-          }}
-        />
-      </div>
+      
+      <SidebarInset>
+        <div className="h-screen flex flex-col bg-background">
+          <AppHeader
+            activeTab={currentPage}
+            onTabChange={navigateToPage}
+            featureToggles={featureToggles}
+            errorCount={errorCount}
+            lastSaved={lastSaved}
+            currentProject={getCurrentProject()}
+            onProjectLoad={handleProjectLoad}
+            onSearch={() => {
+              console.log('[APP_ROUTER] 🔍 Search opened')
+              setSearchOpen(true)
+            }}
+            onShowShortcuts={() => {
+              console.log('[APP_ROUTER] ⌨️ Shortcuts dialog opened')
+              setShortcutsOpen(true)
+            }}
+            onGenerateAI={() => {
+              console.log('[APP_ROUTER] 🤖 AI generation requested')
+              toast.info('AI generation coming soon')
+            }}
+            onExport={() => {
+              console.log('[APP_ROUTER] 📤 Export requested')
+              toast.info('Export coming soon')
+            }}
+            onPreview={() => {
+              console.log('[APP_ROUTER] 👁️ Preview opened')
+              setPreviewOpen(true)
+            }}
+            onShowErrors={() => {
+              console.log('[APP_ROUTER] ⚠️ Navigating to errors page')
+              navigateToPage('errors')
+            }}
+          />
+          <div className="flex-1 overflow-hidden">
+            <RouterProvider 
+              featureToggles={featureToggles}
+              stateContext={{
+                files,
+                models,
+                components,
+                componentTrees,
+                workflows,
+                lambdas,
+                theme,
+                playwrightTests,
+                storybookStories,
+                unitTests,
+                flaskConfig,
+                nextjsConfig,
+                npmSettings,
+                featureToggles,
+                activeFileId,
+              }}
+              actionContext={{
+                handleFileChange,
+                setActiveFileId,
+                handleFileClose,
+                handleFileAdd,
+                setModels,
+                setComponents,
+                setComponentTrees,
+                setWorkflows,
+                setLambdas,
+                setTheme,
+                setPlaywrightTests,
+                setStorybookStories,
+                setUnitTests,
+                setFlaskConfig,
+                setNextjsConfig,
+                setNpmSettings,
+                setFeatureToggles,
+              }}
+            />
+          </div>
+        </div>
+      </SidebarInset>
 
       <Suspense fallback={null}>
         <GlobalSearch
@@ -302,7 +318,7 @@ function AppLayout() {
       <Suspense fallback={null}>
         <PWAInstallPrompt />
       </Suspense>
-    </div>
+    </SidebarProvider>
   )
 }
 
diff --git a/src/components/organisms/AppHeader.tsx b/src/components/organisms/AppHeader.tsx
index 5155465..5e36bb1 100644
--- a/src/components/organisms/AppHeader.tsx
+++ b/src/components/organisms/AppHeader.tsx
@@ -1,5 +1,5 @@
 import { AppBranding, Breadcrumb, SaveIndicator } from '@/components/molecules'
-import { NavigationMenu } from '@/components/organisms/NavigationMenu'
+import { SidebarTrigger } from '@/components/ui/sidebar'
 import { ToolbarActions } from '@/components/organisms/ToolbarActions'
 import { ProjectManager } from '@/components/ProjectManager'
 import { FeatureToggles, Project } from '@/types/project'
@@ -42,12 +42,7 @@ export function AppHeader({
         <div className="px-4 sm:px-6 py-3 sm:py-4">
           <Flex justify="between" align="center" gap="sm">
             <Flex align="center" gap="sm" className="flex-1 min-w-0">
-              <NavigationMenu
-                activeTab={activeTab}
-                onTabChange={onTabChange}
-                featureToggles={featureToggles}
-                errorCount={errorCount}
-              />
+              <SidebarTrigger />
               <AppBranding />
               <SaveIndicator lastSaved={lastSaved} />
             </Flex>
diff --git a/src/components/organisms/NavigationMenu.tsx b/src/components/organisms/NavigationMenu.tsx
index 7e0c4cd..9189025 100644
--- a/src/components/organisms/NavigationMenu.tsx
+++ b/src/components/organisms/NavigationMenu.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import { Button } from '@/components/ui/button'
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'
-import { List, CaretDoubleDown, CaretDoubleUp } from '@phosphor-icons/react'
+import { CaretDoubleDown, CaretDoubleUp } from '@phosphor-icons/react'
 import { NavigationItem, NavigationGroupHeader } from '@/components/molecules'
 import { navigationGroups, NavigationItemData } from '@/lib/navigation-config'
 import { FeatureToggles } from '@/types/project'
@@ -22,7 +22,6 @@ export function NavigationMenu({
   featureToggles,
   errorCount = 0,
 }: NavigationMenuProps) {
-  const [open, setOpen] = useState(false)
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
     new Set(['overview', 'development', 'automation', 'design', 'backend', 'testing', 'tools'])
   )
@@ -31,7 +30,6 @@ export function NavigationMenu({
 
   const handleItemClick = (value: string) => {
     onTabChange(value)
-    setOpen(false)
   }
   
   const handleItemHover = (value: string) => {
@@ -84,16 +82,9 @@ export function NavigationMenu({
   }
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button variant="outline" size="icon" className="shrink-0">
-          <List size={20} weight="bold" />
-        </Button>
-      </SheetTrigger>
-      <SheetContent side="left" className="w-80">
-        <SheetHeader>
-          <SheetTitle>Navigation</SheetTitle>
-        </SheetHeader>
+    <Sidebar side="left" collapsible="offcanvas">
+      <SidebarHeader className="px-4 py-4 border-b">
+        <h2 className="text-lg font-semibold">Navigation</h2>
         <div className="flex gap-2 mt-4">
           <Button
             variant="outline"
@@ -114,8 +105,10 @@ export function NavigationMenu({
             Collapse All
           </Button>
         </div>
-        <ScrollArea className="h-[calc(100vh-12rem)] mt-4">
-          <div className="space-y-2">
+      </SidebarHeader>
+      <SidebarContent>
+        <ScrollArea className="h-full px-4">
+          <div className="space-y-2 py-4">
             {navigationGroups.map((group) => {
               const visibleItemsCount = getVisibleItemsCount(group.id)
               if (visibleItemsCount === 0) return null
@@ -161,7 +154,7 @@ export function NavigationMenu({
             })}
           </div>
         </ScrollArea>
-      </SheetContent>
-    </Sheet>
+      </SidebarContent>
+    </Sidebar>
   )
 }