diff --git a/web/app/(app)/layout.tsx b/web/app/(app)/layout.tsx
index 5716a50..be7a8f8 100644
--- a/web/app/(app)/layout.tsx
+++ b/web/app/(app)/layout.tsx
@@ -1,6 +1,5 @@
 import { AuthProvider } from "@/components/AuthProvider";
-import { LicenseBanner } from "@/components/LicenseBanner";
-import { Sidebar } from "@/components/Sidebar";
+import { AppShell } from "@/components/AppShell";
 
 export default function AppLayout({
   children,
@@ -9,13 +8,7 @@ export default function AppLayout({
 }) {
   return (
     <AuthProvider>
-      <div className="flex h-screen overflow-hidden">
-        <Sidebar />
-        <main className="flex-1 overflow-y-auto">
-          <LicenseBanner />
-          {children}
-        </main>
-      </div>
+      <AppShell>{children}</AppShell>
     </AuthProvider>
   );
 }
diff --git a/web/components/AppShell.tsx b/web/components/AppShell.tsx
new file mode 100644
index 0000000..5eaac67
--- /dev/null
+++ b/web/components/AppShell.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+import { LicenseBanner } from "@/components/LicenseBanner";
+import { Logo } from "@/components/Logo";
+import { Sidebar, SidebarDrawer } from "@/components/Sidebar";
+import { useAuth } from "@/components/AuthProvider";
+
+function MenuIcon() {
+    return (
+        <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+        </svg>
+    );
+}
+
+/**
+ * Owns the responsive chrome so app/(app)/layout.tsx can stay a server
+ * component. Above lg this is the layout it always was; below lg the sidebar
+ * becomes an offcanvas behind the top bar's hamburger.
+ */
+export function AppShell({ children }: { children: React.ReactNode }) {
+    const [open, setOpen] = useState(false);
+    const pathname = usePathname();
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const { instance } = useAuth();
+
+    // A drawer that survives navigation would cover the page you just asked for.
+    useEffect(() => {
+        setOpen(false);
+    }, [pathname]);
+
+    function close() {
+        setOpen(false);
+        buttonRef.current?.focus();
+    }
+
+    return (
+        <div className="flex h-screen overflow-hidden">
+            <Sidebar />
+            <SidebarDrawer open={open} onClose={close} />
+
+            <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
+                <header className="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-surface px-3 lg:hidden">
+                    <button
+                        ref={buttonRef}
+                        type="button"
+                        onClick={() => setOpen(true)}
+                        aria-label="Open navigation"
+                        aria-expanded={open}
+                        aria-controls="app-sidebar-drawer"
+                        className="-ml-1 rounded p-2 text-text-secondary transition-colors hover:bg-surface-2 hover:text-text-primary"
+                    >
+                        <MenuIcon />
+                    </button>
+                    <Logo className="h-7 w-7 shrink-0 text-logo" />
+                    <div className="min-w-0">
+                        <span className="block text-sm font-extrabold leading-tight tracking-[-0.035em] text-text-primary">Vantage</span>
+                        {instance && (
+                            <span className="block truncate font-mono text-[0.62rem] uppercase tracking-[0.1em] text-text-secondary">{instance.name}</span>
+                        )}
+                    </div>
+                </header>
+
+                <main className="flex min-w-0 flex-1 flex-col">
+                    <LicenseBanner />
+                    {children}
+                </main>
+            </div>
+        </div>
+    );
+}
diff --git a/web/components/Sidebar.tsx b/web/components/Sidebar.tsx
index 6ab5408..215eefc 100644
--- a/web/components/Sidebar.tsx
+++ b/web/components/Sidebar.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useEffect, useRef } from "react";
 import { clsx } from "clsx";
 import { useAuth } from "@/components/AuthProvider";
 import { auth } from "@/lib/api";
@@ -132,7 +133,8 @@ const navItems: NavItem[] = [
     { href: "/settings", label: "Settings", icon: <SettingsIcon />, adminOnly: true },
 ];
 
-export function Sidebar() {
+/** Shared by the permanent aside and the offcanvas drawer — one copy of the nav. */
+export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
     const pathname = usePathname();
     const { user, instance, isAdmin } = useAuth();
 
@@ -152,8 +154,8 @@ export function Sidebar() {
     }
 
     return (
-        <aside className="flex h-screen w-60 flex-col border-r border-border bg-surface">
-            <div className="flex h-16 items-center gap-3 border-b border-border px-5">
+        <>
+            <div className="flex h-16 shrink-0 items-center gap-3 border-b border-border px-5">
                 <Logo className="h-8 w-8 text-logo" />
                 <div className="min-w-0">
                     <span className="block text-base font-extrabold leading-tight tracking-[-0.035em] text-text-primary">Vantage</span>
@@ -171,6 +173,7 @@ export function Sidebar() {
                             <li key={item.href}>
                                 <Link
                                     href={item.href}
+                                    onClick={onNavigate}
                                     // The active marker is an accent bar, the same device
                                     // site/ uses to mark the chosen plan. A filled pill
                                     // reads as a button you can press again.
@@ -190,7 +193,7 @@ export function Sidebar() {
                 </ul>
             </nav>
 
-            <div className="border-t border-border px-4 py-3">
+            <div className="shrink-0 border-t border-border px-4 py-3">
                 {user && (
                     <div className="mb-3">
                         <p className="truncate text-sm font-medium text-text-primary">{user.name || user.email}</p>
@@ -209,6 +212,74 @@ export function Sidebar() {
                     )}
                 </div>
             </div>
+        </>
+    );
+}
+
+/** The permanent sidebar. Below lg the drawer takes over. */
+export function Sidebar() {
+    return (
+        <aside className="hidden h-screen w-60 shrink-0 flex-col border-r border-border bg-surface lg:flex">
+            <SidebarContent />
         </aside>
     );
 }
+
+/**
+ * The offcanvas below lg. Always mounted so the slide runs in both directions;
+ * closed it is inert (invisible + pointer-events-none) rather than unmounted.
+ */
+export function SidebarDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
+    const panelRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!open) return;
+
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === "Escape") onClose();
+        };
+        window.addEventListener("keydown", onKey);
+
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+
+        panelRef.current?.focus();
+
+        return () => {
+            window.removeEventListener("keydown", onKey);
+            document.body.style.overflow = previousOverflow;
+        };
+    }, [open, onClose]);
+
+    return (
+        <div
+            className={clsx(
+                "fixed inset-0 z-50 lg:hidden",
+                open ? "visible" : "invisible pointer-events-none",
+            )}
+        >
+            <div
+                aria-hidden="true"
+                onClick={onClose}
+                className={clsx(
+                    "absolute inset-0 bg-black/60 transition-opacity duration-200",
+                    open ? "opacity-100" : "opacity-0",
+                )}
+            />
+            <div
+                ref={panelRef}
+                id="app-sidebar-drawer"
+                role="dialog"
+                aria-modal="true"
+                aria-label="Navigation"
+                tabIndex={-1}
+                className={clsx(
+                    "absolute inset-y-0 left-0 flex w-72 max-w-[85%] flex-col border-r border-border bg-surface outline-none transition-transform duration-200 ease-out",
+                    open ? "translate-x-0" : "-translate-x-full",
+                )}
+            >
+                <SidebarContent onNavigate={onClose} />
+            </div>
+        </div>
+    );
+}