diff --git a/frontend/app/bills/[id]/page.tsx b/frontend/app/bills/[id]/page.tsx
index c8423dc..af374a0 100644
--- a/frontend/app/bills/[id]/page.tsx
+++ b/frontend/app/bills/[id]/page.tsx
@@ -78,8 +78,8 @@ export default function BillDetailPage({ params }: { params: Promise<{ id: strin
       </div>
 
       {/* Content grid */}
-      <div className="grid grid-cols-3 gap-6">
-        <div className="col-span-2 space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
+        <div className="md:col-span-2 space-y-6">
           <AIBriefCard brief={bill.latest_brief} />
           <ActionTimeline actions={bill.actions} />
         </div>
diff --git a/frontend/app/members/page.tsx b/frontend/app/members/page.tsx
index dec4d19..858ee1d 100644
--- a/frontend/app/members/page.tsx
+++ b/frontend/app/members/page.tsx
@@ -56,7 +56,7 @@ export default function MembersPage() {
       ) : (
         <>
           <div className="text-sm text-muted-foreground">{data?.total ?? 0} members</div>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             {data?.items?.map((member) => (
               <div key={member.bioguide_id} className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-3">
                 <div className="flex-1 min-w-0">
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index cf34377..698179a 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -40,8 +40,8 @@ export default function DashboardPage() {
       {isLoading ? (
         <div className="text-center py-20 text-muted-foreground">Loading dashboard...</div>
       ) : (
-        <div className="grid grid-cols-3 gap-8">
-          <div className="col-span-2 space-y-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8">
+          <div className="md:col-span-2 space-y-4">
             <h2 className="font-semibold flex items-center gap-2">
               <BookOpen className="w-4 h-4" />
               Your Feed
diff --git a/frontend/app/settings/page.tsx b/frontend/app/settings/page.tsx
index 325a424..6a4fda4 100644
--- a/frontend/app/settings/page.tsx
+++ b/frontend/app/settings/page.tsx
@@ -119,7 +119,7 @@ export default function SettingsPage() {
         </h2>
         {stats ? (
           <>
-            <div className="grid grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
               <div className="bg-muted/50 rounded-lg p-3 text-center">
                 <FileText className="w-4 h-4 mx-auto mb-1 text-muted-foreground" />
                 <div className="text-xl font-bold">{stats.total_bills.toLocaleString()}</div>
diff --git a/frontend/app/topics/page.tsx b/frontend/app/topics/page.tsx
index 84c0457..305d702 100644
--- a/frontend/app/topics/page.tsx
+++ b/frontend/app/topics/page.tsx
@@ -37,7 +37,7 @@ export default function TopicsPage() {
         </p>
       </div>
 
-      <div className="grid grid-cols-2 gap-3">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
         {TOPICS.map(({ tag, label, desc }) => (
           <div key={tag} className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-3">
             <div>
diff --git a/frontend/components/shared/AuthGuard.tsx b/frontend/components/shared/AuthGuard.tsx
index 52f1444..181dfd2 100644
--- a/frontend/components/shared/AuthGuard.tsx
+++ b/frontend/components/shared/AuthGuard.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { useAuthStore } from "@/stores/authStore";
 import { Sidebar } from "./Sidebar";
+import { MobileHeader } from "./MobileHeader";
 
 const PUBLIC_PATHS = ["/login", "/register"];
 
@@ -13,6 +14,7 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
   const token = useAuthStore((s) => s.token);
   // Zustand persist hydrates asynchronously — wait for it before rendering
   const [hydrated, setHydrated] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   useEffect(() => {
     setHydrated(true);
@@ -38,12 +40,30 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
   // Authenticated: render the full app shell
   return (
     <div className="flex h-screen bg-background">
-      <Sidebar />
-      <main className="flex-1 overflow-auto">
-        <div className="container mx-auto px-6 py-6 max-w-7xl">
-          {children}
+      {/* Desktop sidebar — hidden on mobile */}
+      <div className="hidden md:flex">
+        <Sidebar />
+      </div>
+
+      {/* Mobile slide-in drawer */}
+      {drawerOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div className="absolute inset-0 bg-black/50" onClick={() => setDrawerOpen(false)} />
+          <div className="absolute left-0 top-0 bottom-0">
+            <Sidebar onClose={() => setDrawerOpen(false)} />
+          </div>
         </div>
-      </main>
+      )}
+
+      {/* Content column */}
+      <div className="flex-1 flex flex-col min-h-0">
+        <MobileHeader onMenuClick={() => setDrawerOpen(true)} />
+        <main className="flex-1 overflow-auto">
+          <div className="container mx-auto px-4 md:px-6 py-6 max-w-7xl">
+            {children}
+          </div>
+        </main>
+      </div>
     </div>
   );
 }
diff --git a/frontend/components/shared/MobileHeader.tsx b/frontend/components/shared/MobileHeader.tsx
new file mode 100644
index 0000000..d3f9f2e
--- /dev/null
+++ b/frontend/components/shared/MobileHeader.tsx
@@ -0,0 +1,16 @@
+"use client";
+import { Menu, Landmark } from "lucide-react";
+
+export function MobileHeader({ onMenuClick }: { onMenuClick: () => void }) {
+  return (
+    <header className="md:hidden flex items-center justify-between px-4 py-3 border-b border-border bg-card shrink-0">
+      <button onClick={onMenuClick} className="p-2 rounded-md hover:bg-accent transition-colors" aria-label="Open menu">
+        <Menu className="w-5 h-5" />
+      </button>
+      <div className="flex items-center gap-2">
+        <Landmark className="w-5 h-5 text-primary" />
+        <span className="font-semibold text-sm">PocketVeto</span>
+      </div>
+    </header>
+  );
+}
diff --git a/frontend/components/shared/Sidebar.tsx b/frontend/components/shared/Sidebar.tsx
index f56ff5f..f3f92ed 100644
--- a/frontend/components/shared/Sidebar.tsx
+++ b/frontend/components/shared/Sidebar.tsx
@@ -11,6 +11,7 @@ import {
   Settings,
   Landmark,
   LogOut,
+  X,
 } from "lucide-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { cn } from "@/lib/utils";
@@ -26,7 +27,7 @@ const NAV = [
   { href: "/settings", label: "Admin", icon: Settings, adminOnly: true },
 ];
 
-export function Sidebar() {
+export function Sidebar({ onClose }: { onClose?: () => void }) {
   const pathname = usePathname();
   const router = useRouter();
   const qc = useQueryClient();
@@ -43,7 +44,12 @@ export function Sidebar() {
     <aside className="w-56 shrink-0 border-r border-border bg-card flex flex-col">
       <div className="p-4 border-b border-border flex items-center gap-2">
         <Landmark className="w-5 h-5 text-primary" />
-        <span className="font-semibold text-sm">PocketVeto</span>
+        <span className="font-semibold text-sm flex-1">PocketVeto</span>
+        {onClose && (
+          <button onClick={onClose} className="p-1 rounded-md hover:bg-accent transition-colors" aria-label="Close menu">
+            <X className="w-4 h-4" />
+          </button>
+        )}
       </div>
 
       <nav className="flex-1 p-3 space-y-1">
@@ -53,6 +59,7 @@ export function Sidebar() {
             <Link
               key={href}
               href={href}
+              onClick={onClose}
               className={cn(
                 "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
                 active