diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index b6326ab..c42f178 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -12,6 +12,7 @@ import { PortProvider } from '@/providers/port-provider';
 import { PermissionsProvider } from '@/providers/permissions-provider';
 import { Sidebar } from '@/components/layout/sidebar';
 import { Topbar } from '@/components/layout/topbar';
+import { MobileLayout } from '@/components/layout/mobile/mobile-layout';
 
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   const session = await auth.api.getSession({ headers: await headers() });
@@ -37,7 +38,8 @@ export default async function DashboardLayout({ children }: { children: React.Re
       <PortProvider ports={ports} defaultPortId={ports[0]?.id ?? null}>
         <PermissionsProvider>
           <SocketProvider>
-            <div className="flex h-screen overflow-hidden bg-background">
+            {/* Desktop shell — hidden by CSS on mobile */}
+            <div data-shell="desktop" className="flex h-screen overflow-hidden bg-background">
               <Sidebar
                 portRoles={portRoles}
                 isSuperAdmin={profile?.isSuperAdmin ?? false}
@@ -57,6 +59,9 @@ export default async function DashboardLayout({ children }: { children: React.Re
                 <main className="flex-1 overflow-y-auto bg-background p-6">{children}</main>
               </div>
             </div>
+
+            {/* Mobile shell — hidden by CSS on desktop */}
+            <MobileLayout>{children}</MobileLayout>
           </SocketProvider>
         </PermissionsProvider>
       </PortProvider>
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index a73a739..d7fe065 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -22,19 +22,16 @@ import {
   Home,
   ChevronLeft,
   ChevronRight,
-  Menu,
   ChevronDown,
   ChevronUp,
 } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 import { useUIStore } from '@/stores/ui-store';
-import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import type { UserPortRole } from '@/lib/db/schema/users';
 import type { Role } from '@/lib/db/schema/users';
@@ -360,50 +357,23 @@ export function Sidebar({ portRoles, isSuperAdmin = false, user }: SidebarProps)
     portRoles.some((pr) => pr.residentialAccess || pr.role?.permissions?.residential_clients?.view);
 
   return (
-    <>
-      {/* Desktop sidebar */}
-      <aside
-        className={cn(
-          'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
-          sidebarCollapsed ? 'w-sidebar-collapsed' : 'w-sidebar',
-        )}
-        style={{ backgroundColor: '#1e2844' }}
-      >
-        <SidebarContent
-          collapsed={sidebarCollapsed}
-          portSlug={currentPortSlug ?? undefined}
-          portRoles={portRoles}
-          hasAdminAccess={hasAdminAccess}
-          hasMarinaAccess={hasMarinaAccess}
-          hasResidentialAccess={hasResidentialAccess}
-          user={user}
-          onToggleCollapse={toggleSidebar}
-        />
-      </aside>
-
-      {/* Mobile drawer */}
-      <Sheet>
-        <SheetTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="md:hidden fixed top-3 left-3 z-50 text-white bg-[#1e2844] hover:bg-[#171f35]"
-          >
-            <Menu className="w-5 h-5" />
-            <span className="sr-only">Open navigation</span>
-          </Button>
-        </SheetTrigger>
-        <SheetContent side="left" className="p-0 w-sidebar border-r-0">
-          <SidebarContent
-            collapsed={false}
-            portSlug={currentPortSlug ?? undefined}
-            portRoles={portRoles}
-            hasAdminAccess={hasAdminAccess}
-            hasMarinaAccess={hasMarinaAccess}
-            hasResidentialAccess={hasResidentialAccess}
-          />
-        </SheetContent>
-      </Sheet>
-    </>
+    <aside
+      className={cn(
+        'relative hidden md:flex flex-col h-screen border-r border-[#474e66] transition-all duration-200 ease-in-out shrink-0',
+        sidebarCollapsed ? 'w-sidebar-collapsed' : 'w-sidebar',
+      )}
+      style={{ backgroundColor: '#1e2844' }}
+    >
+      <SidebarContent
+        collapsed={sidebarCollapsed}
+        portSlug={currentPortSlug ?? undefined}
+        portRoles={portRoles}
+        hasAdminAccess={hasAdminAccess}
+        hasMarinaAccess={hasMarinaAccess}
+        hasResidentialAccess={hasResidentialAccess}
+        user={user}
+        onToggleCollapse={toggleSidebar}
+      />
+    </aside>
   );
 }