diff --git a/app/(dashboard)/clients/[clientId]/page.tsx b/app/(dashboard)/clients/[clientId]/page.tsx
index 59eab72..d2fb7c5 100644
--- a/app/(dashboard)/clients/[clientId]/page.tsx
+++ b/app/(dashboard)/clients/[clientId]/page.tsx
@@ -59,7 +59,7 @@ export default async function ClientDetailPage({
   };
 
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       {/* Back */}
       <Link
         href="/clients"
diff --git a/app/(dashboard)/clients/page.tsx b/app/(dashboard)/clients/page.tsx
index 1735171..11f0011 100644
--- a/app/(dashboard)/clients/page.tsx
+++ b/app/(dashboard)/clients/page.tsx
@@ -26,7 +26,7 @@ export default async function ClientsPage() {
   const clients = await getClients();
 
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 2b17342..59e8cec 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -161,7 +161,7 @@ export default async function DashboardPage() {
   } = await getDashboardData(session.user.id, session.user.role);
 
   return (
-    <div className="p-8 space-y-6 max-w-[1600px] mx-auto">
+    <div className="p-4 md:p-8 space-y-6 max-w-[1600px] mx-auto">
       <div className="mb-4">
         <h1 className="text-3xl font-bold text-white">Dashboard</h1>
         <p className="text-zinc-400 mt-1">
diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index a4aab3f..deed769 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -2,6 +2,7 @@ import { auth } from "@/auth";
 import { redirect } from "next/navigation";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { Header } from "@/components/layout/Header";
+import { MobileNavProvider } from "@/components/layout/MobileNav";
 
 export default async function DashboardLayout({
   children,
@@ -12,18 +13,20 @@ export default async function DashboardLayout({
   if (!session?.user) redirect("/login");
 
   return (
-    <div className="flex h-screen bg-zinc-950 overflow-hidden print:block print:h-auto print:overflow-visible">
-      <div className="print:hidden">
-        <Sidebar />
-      </div>
-      <div className="flex-1 flex flex-col overflow-hidden print:block print:overflow-visible">
+    <MobileNavProvider>
+      <div className="flex h-screen bg-zinc-950 overflow-hidden print:block print:h-auto print:overflow-visible">
         <div className="print:hidden">
-          <Header />
+          <Sidebar />
+        </div>
+        <div className="flex-1 flex flex-col overflow-hidden print:block print:overflow-visible">
+          <div className="print:hidden">
+            <Header />
+          </div>
+          <main className="flex-1 overflow-auto print:overflow-visible">
+            {children}
+          </main>
         </div>
-        <main className="flex-1 overflow-auto print:overflow-visible">
-          {children}
-        </main>
       </div>
-    </div>
+    </MobileNavProvider>
   );
 }
diff --git a/app/(dashboard)/pipeline/PipelineQueueClient.tsx b/app/(dashboard)/pipeline/PipelineQueueClient.tsx
index af71b92..fef1e75 100644
--- a/app/(dashboard)/pipeline/PipelineQueueClient.tsx
+++ b/app/(dashboard)/pipeline/PipelineQueueClient.tsx
@@ -150,7 +150,7 @@ export function PipelineQueueClient({ projects, initialStatus = "all" }: Props)
   const lastRow = pagination ? Math.min(pagination.page * PAGE_SIZE, pagination.total) : 0;
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div>
           <h1 className="text-2xl font-semibold text-white">Render Queue</h1>
diff --git a/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx b/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx
index 11a97fb..4cf8e71 100644
--- a/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx
+++ b/app/(dashboard)/pipeline/deliveries/DeliveriesClient.tsx
@@ -140,7 +140,7 @@ export function DeliveriesClient({ canBuild }: { canBuild: boolean }) {
   const shown = episode ? episodes.filter((e) => e.episode === episode) : episodes;
 
   return (
-    <div className="p-6 space-y-6 max-w-6xl">
+    <div className="p-4 md:p-6 space-y-6 max-w-6xl">
       <div className="flex items-center gap-3">
         <Link href="/pipeline">
           <Button variant="ghost" size="icon-sm">
diff --git a/app/(dashboard)/pipeline/exports/[exportId]/ExportDetailClient.tsx b/app/(dashboard)/pipeline/exports/[exportId]/ExportDetailClient.tsx
index ba54937..4507beb 100644
--- a/app/(dashboard)/pipeline/exports/[exportId]/ExportDetailClient.tsx
+++ b/app/(dashboard)/pipeline/exports/[exportId]/ExportDetailClient.tsx
@@ -155,10 +155,10 @@ export function ExportDetailClient({ exportId }: { exportId: string }) {
     }
   }
 
-  if (isLoading) return <div className="p-6 text-zinc-500">Loading…</div>;
+  if (isLoading) return <div className="p-4 md:p-6 text-zinc-500">Loading…</div>;
   if (error || !data) {
     return (
-      <div className="p-6 text-red-400">
+      <div className="p-4 md:p-6 text-red-400">
         {(error as Error)?.message ?? "Export not found"}
       </div>
     );
@@ -180,7 +180,7 @@ export function ExportDetailClient({ exportId }: { exportId: string }) {
   ];
 
   return (
-    <div className="p-6 space-y-6 max-w-5xl">
+    <div className="p-4 md:p-6 space-y-6 max-w-5xl">
       <div className="flex items-center justify-between gap-4 flex-wrap">
         <div className="flex items-center gap-3">
           <Link href="/pipeline">
diff --git a/app/(dashboard)/pipeline/machines/MachinesClient.tsx b/app/(dashboard)/pipeline/machines/MachinesClient.tsx
index 8a61e86..10d2341 100644
--- a/app/(dashboard)/pipeline/machines/MachinesClient.tsx
+++ b/app/(dashboard)/pipeline/machines/MachinesClient.tsx
@@ -76,7 +76,7 @@ export function MachinesClient() {
   const machines = data?.machines ?? [];
 
   return (
-    <div className="p-6 space-y-6">
+    <div className="p-4 md:p-6 space-y-6">
       <div className="flex items-center gap-3">
         <Link href="/pipeline">
           <Button variant="ghost" size="icon-sm">
diff --git a/app/(dashboard)/projects/[id]/kanban/page.tsx b/app/(dashboard)/projects/[id]/kanban/page.tsx
index e8cad07..ac344cc 100644
--- a/app/(dashboard)/projects/[id]/kanban/page.tsx
+++ b/app/(dashboard)/projects/[id]/kanban/page.tsx
@@ -69,7 +69,7 @@ export default async function KanbanPage({
   ]);
 
   return (
-    <div className="p-6 space-y-6 max-w-[1800px] mx-auto">
+    <div className="p-4 md:p-6 space-y-6 max-w-[1800px] mx-auto">
       {/* Breadcrumb */}
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <Link href="/projects" className="hover:text-foreground transition-colors">
diff --git a/app/(dashboard)/projects/[id]/page.tsx b/app/(dashboard)/projects/[id]/page.tsx
index b110ca6..22ccb76 100644
--- a/app/(dashboard)/projects/[id]/page.tsx
+++ b/app/(dashboard)/projects/[id]/page.tsx
@@ -123,7 +123,7 @@ export default async function ProjectPage({ params }: { params: Promise<{ id: st
   const doneTasks = project.tasks.filter((t) => t.status === "DONE").length;
 
   return (
-    <div className="p-8 space-y-6 max-w-[1600px] mx-auto">
+    <div className="p-4 md:p-8 space-y-6 max-w-[1600px] mx-auto">
       {/* Breadcrumb */}
       <div className="flex items-center gap-2 text-sm text-zinc-500">
         <Link href="/projects" className="hover:text-white transition-colors">
diff --git a/app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx b/app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx
index 1f54b54..0e049c2 100644
--- a/app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx
+++ b/app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx
@@ -230,7 +230,7 @@ export default function ShotDetailPage() {
   const { Icon: StatusIcon } = statusCfg;
 
   return (
-    <div className="p-6 space-y-6 max-w-[1400px] mx-auto">
+    <div className="p-4 md:p-6 space-y-6 max-w-[1400px] mx-auto">
       {/* Breadcrumb */}
       <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <Link href="/projects" className="hover:text-foreground transition-colors">
@@ -245,7 +245,9 @@ export default function ShotDetailPage() {
       </div>
 
       {/* Header */}
-      <div className="flex items-start  gap-6">
+      {/* Phones: back button, then a full-width thumbnail, then the details
+          below it. From md: one row, as on desktop. */}
+      <div className="flex flex-wrap md:flex-nowrap items-start gap-4 md:gap-6">
         {/* Thumbnail – cinema scope 2.39:1 */}
         <Button variant="ghost" size="icon" asChild className="-ml-2 h-8 w-8">
               <Link href={`/projects/${params.id}`}>
@@ -253,7 +255,7 @@ export default function ShotDetailPage() {
               </Link>
             </Button>
         {shotThumbnail(shot) && (
-          <div className="relative flex-shrink-0 w-72 aspect-[2.39] rounded-lg overflow-hidden border border-border">
+          <div className="relative flex-shrink-0 w-full md:w-72 aspect-[2.39] rounded-lg overflow-hidden border border-border">
             
             <Image
               src={shotThumbnail(shot)!}
@@ -263,10 +265,10 @@ export default function ShotDetailPage() {
             />
           </div>
         )}
-        <div className="space-y-2">
-          <div className="flex items-center gap-3">
-            
-            <h1 className="text-2xl font-bold font-mono">{shot.shotCode}</h1>
+        <div className="space-y-2 min-w-0 w-full md:w-auto md:min-w-min">
+          <div className="flex flex-wrap items-center gap-3">
+
+            <h1 className="text-2xl font-bold font-mono break-all md:break-normal">{shot.shotCode}</h1>
 
             {/* Shot version badge — click to edit for managers */}
             {canManage ? (
@@ -424,7 +426,7 @@ export default function ShotDetailPage() {
         )}
 
         {canManage && (
-          <div className="ml-auto shrink-0 flex items-center gap-2">
+          <div className="ml-auto shrink-0 flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto">
             {/* Internal approval action */}
             {canInternallyApprove && shot.shotApprovalStatus === "PENDING" && (
               <Button
@@ -510,7 +512,8 @@ export default function ShotDetailPage() {
 
       {/* Tabs */}
       <div>
-        <div className="flex border-b border-border mb-5">
+        {/* Phones: five tabs are wider than the screen, so the bar scrolls sideways. */}
+        <div className="flex border-b border-border mb-5 overflow-x-auto overflow-y-hidden md:overflow-visible [&>button]:shrink-0 [&>button]:whitespace-nowrap">
           <button
             onClick={() => setActiveTab("tasks")}
             className={cn(
diff --git a/app/(dashboard)/projects/page.tsx b/app/(dashboard)/projects/page.tsx
index 04744b6..0d32595 100644
--- a/app/(dashboard)/projects/page.tsx
+++ b/app/(dashboard)/projects/page.tsx
@@ -48,7 +48,7 @@ export default function ProjectsPage() {
   useScrollMemory("projects", pageRef, !isLoading);
 
   return (
-    <div ref={pageRef} className="p-8 space-y-6 max-w-[1600px] mx-auto">
+    <div ref={pageRef} className="p-4 md:p-8 space-y-6 max-w-[1600px] mx-auto">
       <div className="flex items-center justify-between gap-4 mb-8">
         <div>
           <h1 className="text-3xl font-bold text-white">Projects</h1>
diff --git a/app/(dashboard)/settings/migration/page.tsx b/app/(dashboard)/settings/migration/page.tsx
index 9e65120..292ed95 100644
--- a/app/(dashboard)/settings/migration/page.tsx
+++ b/app/(dashboard)/settings/migration/page.tsx
@@ -186,7 +186,7 @@ export default function MigrationPage() {
 
   if (fetchError) {
     return (
-      <div className="p-6 max-w-2xl">
+      <div className="p-4 md:p-6 max-w-2xl">
         <div className="flex items-center gap-2 text-sm text-red-400 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2">
           <AlertCircle className="h-4 w-4 shrink-0" />
           {fetchError}
@@ -200,7 +200,7 @@ export default function MigrationPage() {
 
   if (!hetznerConfigured) {
     return (
-      <div className="p-6 max-w-2xl">
+      <div className="p-4 md:p-6 max-w-2xl">
         <div className="flex items-center gap-2 text-sm text-amber-400 rounded-md border border-amber-500/20 bg-amber-500/10 px-3 py-2">
           <AlertCircle className="h-4 w-4 shrink-0" />
           Hetzner object storage is not configured. Set{" "}
@@ -217,7 +217,7 @@ export default function MigrationPage() {
   const allFilteredSelected = filtered.length > 0 && filtered.every((f) => selected.has(f.key));
 
   return (
-    <div className="p-6 space-y-4 max-w-5xl">
+    <div className="p-4 md:p-6 space-y-4 max-w-5xl">
       {/* Header */}
       <div className="flex items-start justify-between gap-4">
         <div>
diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
index 8408e1d..4937e78 100644
--- a/app/(dashboard)/settings/page.tsx
+++ b/app/(dashboard)/settings/page.tsx
@@ -19,7 +19,7 @@ export default async function SettingsPage() {
   const hetznerConfig = isAdmin ? await getHetznerConfig() : null;
 
   return (
-    <div className="p-6 space-y-6 max-w-2xl mx-auto">
+    <div className="p-4 md:p-6 space-y-6 max-w-2xl mx-auto">
       <h1 className="text-2xl font-bold">Account Settings</h1>
 
       <Card>
diff --git a/app/(dashboard)/settings/storage-test/page.tsx b/app/(dashboard)/settings/storage-test/page.tsx
index 49682e5..99394f4 100644
--- a/app/(dashboard)/settings/storage-test/page.tsx
+++ b/app/(dashboard)/settings/storage-test/page.tsx
@@ -72,7 +72,7 @@ export default function StorageTestPage() {
   };
 
   return (
-    <div className="p-6 max-w-3xl space-y-6">
+    <div className="p-4 md:p-6 max-w-3xl space-y-6">
       <div>
         <h1 className="text-xl font-semibold">Object Storage Playback Test</h1>
         <p className="text-sm text-muted-foreground mt-1">
diff --git a/app/(dashboard)/shot-status/ShotStatusClient.tsx b/app/(dashboard)/shot-status/ShotStatusClient.tsx
index eead873..2c7d82f 100644
--- a/app/(dashboard)/shot-status/ShotStatusClient.tsx
+++ b/app/(dashboard)/shot-status/ShotStatusClient.tsx
@@ -1124,7 +1124,7 @@ export function ShotStatusClient({
   const selectionCount = selectedIds.size;
 
   return (
-    <div ref={pageRef} className="p-8 space-y-6 max-w-[1600px] mx-auto">
+    <div ref={pageRef} className="p-4 md:p-8 space-y-6 max-w-[1600px] mx-auto">
       {/* Header */}
       <div>
         <h1 className="text-3xl font-bold text-white">Shot Status</h1>
diff --git a/app/(dashboard)/tasks/TasksPageClient.tsx b/app/(dashboard)/tasks/TasksPageClient.tsx
index 7aed323..2878240 100644
--- a/app/(dashboard)/tasks/TasksPageClient.tsx
+++ b/app/(dashboard)/tasks/TasksPageClient.tsx
@@ -110,7 +110,7 @@ export function TasksPageClient({
   };
 
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
diff --git a/app/(dashboard)/users/page.tsx b/app/(dashboard)/users/page.tsx
index 9b9e665..28f5c13 100644
--- a/app/(dashboard)/users/page.tsx
+++ b/app/(dashboard)/users/page.tsx
@@ -32,7 +32,7 @@ export default async function UsersPage() {
   }));
 
   return (
-    <div className="p-6 max-w-5xl mx-auto space-y-6">
+    <div className="p-4 md:p-6 max-w-5xl mx-auto space-y-6">
       <div className="flex items-center gap-3">
         <div className="w-10 h-10 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-center justify-center shrink-0">
           <Users className="h-5 w-5 text-amber-400" />
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 8200686..8f13472 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -12,8 +12,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { NotificationBell } from "@/components/notifications/NotificationBell";
 import { getInitials } from "@/lib/utils";
-import { LogOut, User, Settings } from "lucide-react";
+import { LogOut, User, Settings, Menu } from "lucide-react";
 import Link from "next/link";
+import { useMobileNav } from "@/components/layout/MobileNav";
 
 interface HeaderProps {
   title?: string;
@@ -23,11 +24,21 @@ interface HeaderProps {
 export function Header({ title, breadcrumbs }: HeaderProps) {
   const { data: session } = useSession();
   const user = session?.user;
+  const { setOpen: setMobileNavOpen } = useMobileNav();
 
   return (
-    <header className="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-950 px-6">
+    <header className="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-950 px-4 md:px-6">
       {/* Left: Title / Breadcrumbs */}
       <div className="flex items-center gap-2 min-w-0">
+        {/* Phones only: the sidebar is hidden below md and opens as a drawer. */}
+        <button
+          type="button"
+          onClick={() => setMobileNavOpen(true)}
+          className="md:hidden -ml-2 rounded-md p-2 text-zinc-400 hover:bg-zinc-800 hover:text-white"
+          aria-label="Open menu"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
         {breadcrumbs ? (
           <nav className="flex items-center gap-1.5 text-sm">
             {breadcrumbs.map((crumb, i) => (
diff --git a/components/layout/MobileNav.tsx b/components/layout/MobileNav.tsx
new file mode 100644
index 0000000..0a5f2db
--- /dev/null
+++ b/components/layout/MobileNav.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+
+/**
+ * Open/closed state of the phone-width navigation drawer, shared between the
+ * Header (which has the menu button) and the Sidebar (which is the drawer).
+ * At md and up the sidebar is always visible and this state is unused.
+ */
+const MobileNavContext = createContext<{ open: boolean; setOpen: (open: boolean) => void }>({
+  open: false,
+  setOpen: () => {},
+});
+
+export function MobileNavProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return <MobileNavContext.Provider value={{ open, setOpen }}>{children}</MobileNavContext.Provider>;
+}
+
+export const useMobileNav = () => useContext(MobileNavContext);
diff --git a/components/layout/Sidebar.tsx b/components/layout/Sidebar.tsx
index fe8ce51..0609433 100644
--- a/components/layout/Sidebar.tsx
+++ b/components/layout/Sidebar.tsx
@@ -22,10 +22,12 @@ import {
   Clapperboard,
   LayoutGrid,
   Server,
+  X,
 } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSession } from 'next-auth/react';
 import { Button } from '@/components/ui/button';
+import { useMobileNav } from '@/components/layout/MobileNav';
 
 const navItems = [
   { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
@@ -54,17 +56,76 @@ const montserrat = Montserrat({
 
 export function Sidebar() {
   const pathname = usePathname();
-  const { data: session } = useSession();
   const [collapsed, setCollapsed] = useState(false);
+  const { open: mobileOpen, setOpen: setMobileOpen } = useMobileNav();
+
+  // Picking a page closes the phone drawer; so does Escape.
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname, setMobileOpen]);
+  useEffect(() => {
+    if (!mobileOpen) return;
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && setMobileOpen(false);
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [mobileOpen, setMobileOpen]);
+
+  return (
+    <>
+      {/* md and up: the sidebar exactly as before. */}
+      <aside
+        className={cn(
+          'hidden md:flex flex-col border-r border-zinc-800 bg-zinc-900 transition-all duration-200',
+          collapsed ? 'w-16' : 'w-60',
+        )}
+      >
+        <SidebarContent collapsed={collapsed} />
+        {/* Collapse toggle */}
+        <div className="border-t border-zinc-800 p-2">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="w-full"
+            onClick={() => setCollapsed(!collapsed)}
+            title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          >
+            {collapsed ? (
+              <ChevronRight className="h-4 w-4" />
+            ) : (
+              <ChevronLeft className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      </aside>
+
+      {/* Phones: the same navigation as a drawer, opened from the header. */}
+      {mobileOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div className="absolute inset-0 bg-black/60" onClick={() => setMobileOpen(false)} />
+          <aside className="absolute inset-y-0 left-0 flex w-64 max-w-[80vw] flex-col overflow-y-auto border-r border-zinc-800 bg-zinc-900">
+            <button
+              type="button"
+              onClick={() => setMobileOpen(false)}
+              className="absolute right-2 top-2 rounded-md p-2 text-zinc-400 hover:bg-zinc-800 hover:text-white"
+              aria-label="Close menu"
+            >
+              <X className="h-4 w-4" />
+            </button>
+            <SidebarContent collapsed={false} />
+          </aside>
+        </div>
+      )}
+    </>
+  );
+}
+
+function SidebarContent({ collapsed }: { collapsed: boolean }) {
+  const pathname = usePathname();
+  const { data: session } = useSession();
   const isAdmin = ['ADMIN', 'PRODUCER'].includes(session?.user?.role ?? '');
 
   return (
-    <aside
-      className={cn(
-        'flex flex-col border-r border-zinc-800 bg-zinc-900 transition-all duration-200',
-        collapsed ? 'w-16' : 'w-60',
-      )}
-    >
+    <>
       {/* Logo */}
       <div
         className={cn(
@@ -119,23 +180,6 @@ export function Sidebar() {
           );
         })}
       </nav>
-
-      {/* Collapse toggle */}
-      <div className="border-t border-zinc-800 p-2">
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          className="w-full"
-          onClick={() => setCollapsed(!collapsed)}
-          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-        >
-          {collapsed ? (
-            <ChevronRight className="h-4 w-4" />
-          ) : (
-            <ChevronLeft className="h-4 w-4" />
-          )}
-        </Button>
-      </div>
-    </aside>
+    </>
   );
 }