diff --git a/frontend/src/app/console/page.tsx b/frontend/src/app/console/page.tsx
new file mode 100644
index 0000000..eb89f32
--- /dev/null
+++ b/frontend/src/app/console/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next"
+import { Header } from "@/components/header"
+import { EmergencyDashboard } from "@/components/emergency-dashboard"
+
+export const metadata: Metadata = {
+  title: "Dispatcher console · FirstWave",
+}
+
+export default function ConsolePage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <main>
+        <EmergencyDashboard />
+      </main>
+    </div>
+  )
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index a799056..8895191 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,155 +1,371 @@
 @import "tailwindcss";
 
-@custom-variant dark (&:is(.dark *));
+/* FirstWave is dark only (see design.md §1). `dark:` utilities stay usable but
+   always apply, so shadcn components that ship with them keep working. */
+@custom-variant dark (&:where(:root, :root *));
 
 @theme inline {
+  /* Surfaces & text */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-emerald-400: oklch(0.765 0.177 163.223);
-  --color-emerald-500: oklch(0.696 0.17 162.48);
-  --color-emerald-600: oklch(0.596 0.145 163.225);
-  --color-emerald-900: oklch(0.359 0.078 165.612);
-  --color-emerald-950: oklch(0.262 0.051 166.109);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-card-raised: var(--card-raised);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
   --color-input: var(--input);
   --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
+  --color-border-strong: var(--border-strong);
   --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-foreground: var(--subtle-foreground);
+  --color-ring: var(--ring);
+
+  /* Accent */
   --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-soft: var(--primary-soft);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  /* Status */
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-danger: var(--danger);
+  --color-destructive: var(--destructive);
+
+  /* Priority scale (P1–P4) */
+  --color-p1: var(--p1);
+  --color-p2: var(--p2);
+  --color-p3: var(--p3);
+  --color-p4: var(--p4);
+
+  /* Resource types */
+  --color-resource-medical: var(--resource-medical);
+  --color-resource-fire: var(--resource-fire);
+  --color-resource-police: var(--resource-police);
+  --color-resource-pharmacy: var(--resource-pharmacy);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Type */
+  --font-sans: var(--font-bricolage), ui-sans-serif, system-ui, sans-serif;
+  --font-display: var(--font-bricolage), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+
+  /* Radius: inputs/tiles 10px, cards 14px, buttons/chips pill */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
+  --radius-tile: 0.625rem;
+  --radius-card: 0.875rem;
+
+  --shadow-elevated: 0 20px 60px rgb(0 0 0 / 0.45);
+
+  --animate-pulse-dot: pulse-dot 1.6s ease-in-out infinite;
+  --animate-wave-ring: wave-ring 2.4s ease-out infinite;
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.12 0.01 240);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.16 0.01 240);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.16 0.01 240);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.696 0.17 162.48);
-  --primary-foreground: oklch(0.12 0.01 240);
-  --secondary: oklch(0.22 0.01 240);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.22 0.01 240);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.696 0.17 162.48);
-  --accent-foreground: oklch(0.12 0.01 240);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 12%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.696 0.17 162.48);
-  --chart-1: oklch(0.696 0.17 162.48);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.16 0.01 240);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.696 0.17 162.48);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.22 0.01 240);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 12%);
-  --sidebar-ring: oklch(0.696 0.17 162.48);
+  color-scheme: dark;
+
+  --radius: 0.625rem; /* 10px */
+
+  --background: #070b12;
+  --foreground: #e8ecf4;
+  --card: #0c1220;
+  --card-foreground: var(--foreground);
+  --card-raised: #111a2b;
+  --popover: var(--card-raised);
+  --popover-foreground: var(--foreground);
+  --input: #060a11;
+  --border: #1a2335;
+  --border-strong: #26324a;
+  --muted: var(--card-raised);
+  --muted-foreground: #8b95a8;
+  --subtle-foreground: #5f6b80;
+
+  --primary: #38d4f2;
+  --primary-foreground: #06121a;
+  --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
+  --ring: var(--primary);
+  --secondary: var(--card-raised);
+  --secondary-foreground: var(--foreground);
+  --accent: var(--card-raised);
+  --accent-foreground: var(--foreground);
+
+  --success: #5ee6c8;
+  --warning: #f5a94a;
+  --danger: #f2708a;
+  --destructive: var(--danger);
+
+  --p1: #f2708a;
+  --p2: #f5a94a;
+  --p3: #a7a9ff;
+  --p4: #8b95a8;
+
+  --resource-medical: #38d4f2;
+  --resource-fire: #ff7a45;
+  --resource-police: #a7a9ff;
+  --resource-pharmacy: #8b95a8;
+
+  --chart-1: var(--primary);
+  --chart-2: var(--success);
+  --chart-3: var(--warning);
+  --chart-4: var(--p3);
+  --chart-5: var(--danger);
+}
+
+/* Accent options (Settings → Appearance). Only the primary changes. */
+:root[data-accent="indigo"] {
+  --primary: #8b8cf8;
+}
+:root[data-accent="amber"] {
+  --primary: #f5a94a;
+}
+:root[data-accent="mint"] {
+  --primary: #5ee6c8;
 }
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans antialiased;
+    font-size: 15px;
+    line-height: 1.55;
+  }
+  h1,
+  h2,
+  h3 {
+    @apply font-display text-foreground;
+    font-weight: 700;
+  }
+  :focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+  ::selection {
+    background: var(--primary-soft);
+    color: var(--foreground);
   }
 }
 
-/* Leaflet custom marker styles */
+@layer components {
+  /* 11px mono uppercase, primary color. "AI EMERGENCY DISPATCH ASSISTANT" */
+  .eyebrow {
+    @apply font-mono text-primary uppercase;
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.18em;
+  }
+  /* 11px sans uppercase, muted. "LOCATION", "RATIONALE" */
+  .field-label {
+    @apply text-muted-foreground uppercase;
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+  }
+}
+
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.8);
+  }
+}
+
+@keyframes wave-ring {
+  0% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(2.4);
+  }
+}
+
+/* Decorative motion (pulsing dots, wave rings) stops under the OS setting or
+   Settings → "Reduce motion" (data-reduce-motion on <html>). Spinners keep going. */
+@media (prefers-reduced-motion: reduce) {
+  .animate-pulse-dot,
+  .animate-wave-ring,
+  .animate-ping,
+  .animate-pulse {
+    animation: none !important;
+  }
+}
+:root[data-reduce-motion] :is(.animate-pulse-dot, .animate-wave-ring, .animate-ping, .animate-pulse) {
+  animation: none !important;
+}
+
+/* Leaflet */
 .custom-marker,
 .user-marker {
   background: transparent !important;
   border: none !important;
 }
 
+.leaflet-container {
+  font-family: inherit;
+  background: var(--input);
+}
+
 .leaflet-popup-content-wrapper {
-  background: var(--card);
+  background: var(--card-raised);
   color: var(--foreground);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  box-shadow: 0 20px 60px rgb(0 0 0 / 0.45);
 }
 
 .leaflet-popup-tip {
-  background: var(--card);
+  background: var(--card-raised);
 }
 
 .leaflet-popup-close-button {
   color: var(--muted-foreground) !important;
 }
 
-.leaflet-container {
-  font-family: inherit;
+.leaflet-bar a {
+  background: var(--card) !important;
+  color: var(--foreground) !important;
+  border-color: var(--border) !important;
+}
+
+.leaflet-control-attribution {
+  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
+  color: var(--subtle-foreground) !important;
+}
+
+.leaflet-control-attribution a {
+  color: var(--muted-foreground) !important;
+}
+
+/* ==========================================================================
+   Console map: Leaflet overrides (design.md §5)
+   Added by the console restyle. Markers, incident rings, zoom control and
+   popup content. Uses existing tokens only.
+   ========================================================================== */
+/* Dark basemap: invert the standard OSM tiles so the map doesn't glare. */
+.fw-map .leaflet-tile-pane {
+  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.35);
+}
+
+.fw-marker {
+  background: transparent !important;
+  border: none !important;
+}
+
+.fw-marker__dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 9999px;
+  border: 2px solid var(--card);
+  box-shadow: 0 2px 6px rgb(0 0 0 / 0.5);
+}
+
+.fw-incident {
+  position: relative;
+  display: block;
+  width: 44px;
+  height: 44px;
+}
+
+.fw-incident__ring,
+.fw-incident__dot {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  border-radius: 9999px;
+}
+
+.fw-incident__ring {
+  width: 30px;
+  height: 30px;
+  border: 1.5px solid color-mix(in srgb, var(--fw-incident) 70%, transparent);
+}
+
+.fw-incident__ring--outer {
+  width: 44px;
+  height: 44px;
+  border-color: color-mix(in srgb, var(--fw-incident) 40%, transparent);
+  transform-origin: center;
+}
+
+/* The shared wave-ring keyframes scale to 2.4x, too big for a map pin.
+   Keeps the .animate-wave-ring class so the reduce-motion rules above apply. */
+.fw-incident__ring--outer.animate-wave-ring {
+  animation-name: fw-incident-ring;
+}
+
+@keyframes fw-incident-ring {
+  0% {
+    opacity: 0.9;
+    transform: scale(0.7);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.35);
+  }
+}
+
+.fw-incident__dot {
+  width: 14px;
+  height: 14px;
+  background: var(--fw-incident);
+  border: 2px solid var(--card);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fw-incident) 60%, transparent);
+}
+
+.leaflet-container .leaflet-bar {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: none;
+}
+
+.leaflet-container .leaflet-bar a {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.leaflet-container .leaflet-bar a:hover {
+  background: var(--card-raised) !important;
+}
+
+.leaflet-container .leaflet-bar a.leaflet-disabled {
+  color: var(--subtle-foreground) !important;
+}
+
+.leaflet-popup-content {
+  margin: 10px 14px;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.leaflet-control-attribution {
+  font-size: 10px;
 }
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 6f63757..029d40b 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,11 +1,11 @@
 import type React from "react"
 import type { Metadata, Viewport } from "next"
-import { Inter, Geist_Mono } from "next/font/google"
+import { Bricolage_Grotesque, Geist_Mono } from "next/font/google"
 import { Analytics } from "@vercel/analytics/next"
 import "./globals.css"
 
-const inter = Inter({ subsets: ["latin"] })
-const _geistMono = Geist_Mono({ subsets: ["latin"] })
+const bricolage = Bricolage_Grotesque({ subsets: ["latin"], variable: "--font-bricolage" })
+const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" })
 
 export const metadata: Metadata = {
   title: "FirstWave",
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 }
 
 export const viewport: Viewport = {
-  themeColor: "#0f172a",
+  themeColor: "#070b12",
   width: "device-width",
   initialScale: 1,
 }
@@ -25,8 +25,8 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className="dark">
-      <body className={`font-sans antialiased`}>
+    <html lang="en" className={`${bricolage.variable} ${geistMono.variable}`}>
+      <body>
         {children}
         <Analytics />
       </body>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 94235f5..68c873d 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,11 +1,19 @@
-import { Header } from "@/components/header"
-import { EmergencyDashboard } from "@/components/emergency-dashboard"
+import { Hero } from "@/components/landing/hero"
+import { LandingNav } from "@/components/landing/landing-nav"
+import { CtaBand, LandingFooter, MapSection, PipelineSection, PrioritySection } from "@/components/landing/sections"
 
-export default function Home() {
+export default function LandingPage() {
   return (
-    <main className="min-h-screen bg-background">
-      <Header />
-      <EmergencyDashboard />
-    </main>
+    <div className="min-h-screen overflow-x-clip bg-background">
+      <LandingNav />
+      <main>
+        <Hero />
+        <PipelineSection />
+        <PrioritySection />
+        <MapSection />
+        <CtaBand />
+      </main>
+      <LandingFooter />
+    </div>
   )
 }
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
new file mode 100644
index 0000000..06087bf
--- /dev/null
+++ b/frontend/src/app/settings/page.tsx
@@ -0,0 +1,20 @@
+import type { Metadata } from "next"
+import { SettingsHeader } from "@/components/settings/settings-header"
+import { SettingsForm } from "@/components/settings/settings-form"
+
+export const metadata: Metadata = {
+  title: "Settings · FirstWave",
+}
+
+export default function SettingsPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <SettingsHeader />
+      <main className="mx-auto max-w-[960px] px-4 pb-24 pt-10 sm:px-6">
+        <h1 className="text-[28px] leading-tight tracking-[-0.01em]">Settings</h1>
+        <p className="mt-2 text-sm text-muted-foreground">Tune how FirstWave listens, speaks and looks.</p>
+        <SettingsForm />
+      </main>
+    </div>
+  )
+}
diff --git a/frontend/src/components/agent-pipeline.tsx b/frontend/src/components/agent-pipeline.tsx
new file mode 100644
index 0000000..84d71c4
--- /dev/null
+++ b/frontend/src/components/agent-pipeline.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Check, Circle, Loader2 } from "lucide-react"
+import { Card, CardAction, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+// Mirrors the backend LangGraph agents (same ids/names as agent-panel.tsx).
+// design.md §4.2 wants these in src/lib/agents.ts; kept local until that file exists.
+const AGENTS = [
+  { id: "extraction", name: "Extraction Agent" },
+  { id: "triage", name: "Triage Agent" },
+  { id: "next_question", name: "Question Agent" },
+  { id: "dispatch_planner", name: "Dispatch Planner" },
+  { id: "resource_locator", name: "Resource Locator" },
+  { id: "safety_guardrail", name: "Safety Guardrail" },
+] as const
+
+type RowStatus = "waiting" | "running" | "complete"
+
+const STATUS_LABEL: Record<RowStatus, string> = {
+  waiting: "Waiting",
+  running: "Running",
+  complete: "Complete",
+}
+
+interface AgentPipelineProps {
+  /** Agent id of the most recent SSE event, or null. */
+  currentAgent: string | null
+  isProcessing: boolean
+  /** True once a run has produced a dispatch recommendation (all agents ran). */
+  hasCompletedRun: boolean
+}
+
+/**
+ * Visual pipeline card. Row state is derived from the dashboard's existing
+ * `currentAgent` / `isProcessing` values: each SSE event marks its agent (and the
+ * ones before it) complete and the next one running.
+ */
+export function AgentPipeline({ currentAgent, isProcessing, hasCompletedRun }: AgentPipelineProps) {
+  const currentIndex = currentAgent ? AGENTS.findIndex((a) => a.id === currentAgent) : -1
+  // wait_for_info: the graph stopped after the question agent to ask for more details.
+  const pausedAfter = currentAgent === "wait_for_info" ? AGENTS.findIndex((a) => a.id === "next_question") : null
+
+  const statusFor = (index: number): RowStatus => {
+    if (isProcessing && pausedAfter !== null) {
+      return index <= pausedAfter ? "complete" : "waiting"
+    }
+    if (isProcessing) {
+      if (index <= currentIndex) return "complete"
+      if (index === currentIndex + 1) return "running"
+      return "waiting"
+    }
+    return hasCompletedRun ? "complete" : "waiting"
+  }
+
+  const statuses = AGENTS.map((_, i) => statusFor(i))
+  const doneCount = statuses.filter((s) => s === "complete").length
+
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>Agent pipeline</CardTitle>
+        <CardAction className="font-mono text-xs">
+          {doneCount}/{AGENTS.length}
+        </CardAction>
+      </CardHeader>
+      <ol className="flex-1 divide-y divide-border px-5 py-2" aria-label="Agent pipeline status">
+        {AGENTS.map((agent, i) => {
+          const status = statuses[i]
+          return (
+            <li key={agent.id} className="flex min-h-[46px] items-center gap-3">
+              <span className="flex size-5 shrink-0 items-center justify-center" aria-hidden>
+                {status === "complete" ? (
+                  <span className="flex size-5 items-center justify-center rounded-full bg-success/15 text-success">
+                    <Check className="size-3" strokeWidth={3} />
+                  </span>
+                ) : status === "running" ? (
+                  <Loader2 className="size-4 animate-spin text-primary" />
+                ) : (
+                  <Circle className="size-4 text-subtle-foreground" />
+                )}
+              </span>
+              <span className={cn("flex-1 text-sm", status === "waiting" ? "text-muted-foreground" : "text-foreground")}>
+                {agent.name}
+              </span>
+              <span
+                className={cn(
+                  "text-xs",
+                  status === "running" ? "text-primary" : "text-muted-foreground"
+                )}
+              >
+                {STATUS_LABEL[status]}
+              </span>
+            </li>
+          )
+        })}
+      </ol>
+    </Card>
+  )
+}
diff --git a/frontend/src/components/ai-summary.tsx b/frontend/src/components/ai-summary.tsx
index ba5da80..bc873fc 100644
--- a/frontend/src/components/ai-summary.tsx
+++ b/frontend/src/components/ai-summary.tsx
@@ -1,6 +1,8 @@
 "use client"
 
-import {MapPin, AlertTriangle, Gauge, FileText, HelpCircle, Loader2} from "lucide-react"
+import type { ReactNode } from "react"
+import { Loader2 } from "lucide-react"
+import { Card, CardAction, CardContent, CardHeader, CardTitle, CardTile } from "@/components/ui/card"
 
 export type SummaryData = {
   location: string | null
@@ -15,135 +17,111 @@ interface AISummaryProps {
   data: SummaryData
 }
 
-function SummaryField({
-  icon: Icon,
-  label,
-  value,
-  isLoading
-}: {
-  icon: React.ElementType
-  label: string
-  value: string | null
-  isLoading?: boolean
-}) {
+function Analyzing() {
   return (
-    <div className="flex items-start gap-3">
-      <div className="w-8 h-8 rounded-lg bg-secondary flex items-center justify-center flex-shrink-0">
-        <Icon className="w-4 h-4 text-muted-foreground" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <p className="text-xs text-muted-foreground uppercase tracking-wider mb-0.5">{label}</p>
-        {isLoading ? (
-          <div className="flex items-center gap-2">
-            <Loader2 className="w-3 h-3 animate-spin text-primary" />
-            <span className="text-sm text-muted-foreground">Analyzing...</span>
-          </div>
-        ) : value ? (
-          <p className="text-sm text-foreground font-medium">{value}</p>
-        ) : (
-          <p className="text-sm text-amber-500">?</p>
-        )}
-      </div>
-    </div>
+    <span className="flex items-center gap-2 text-sm text-muted-foreground">
+      <Loader2 className="size-3 animate-spin text-primary" aria-hidden />
+      Analyzing…
+    </span>
+  )
+}
+
+function SummaryTile({ label, value, isLoading }: { label: string; value: string | null; isLoading?: boolean }) {
+  return (
+    <CardTile className="min-w-0 px-3.5 py-3">
+      <p className="field-label mb-1">{label}</p>
+      {isLoading ? (
+        <Analyzing />
+      ) : value ? (
+        <p className="text-sm font-semibold text-foreground">{value}</p>
+      ) : (
+        <p className="text-sm text-muted-foreground">Unknown</p>
+      )}
+    </CardTile>
   )
 }
 
-function ListField({
-  icon: Icon,
-  label,
+function SummarySection({
+  title,
   items,
+  isProcessing,
   emptyText,
-  isLoading
+  children,
 }: {
-  icon: React.ElementType
-  label: string
+  title: string
   items: string[]
+  isProcessing: boolean
   emptyText: string
-  isLoading?: boolean
+  children: ReactNode
 }) {
+  let body = children
+  if (isProcessing && items.length === 0) body = <Analyzing />
+  else if (items.length === 0) body = <p className="text-sm text-muted-foreground">{emptyText}</p>
+
   return (
-    <div className="flex items-start gap-3">
-      <div className="w-8 h-8 rounded-lg bg-secondary flex items-center justify-center flex-shrink-0">
-        <Icon className="w-4 h-4 text-muted-foreground" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <p className="text-xs text-muted-foreground uppercase tracking-wider mb-1">{label}</p>
-        {isLoading ? (
-          <div className="flex items-center gap-2">
-            <Loader2 className="w-3 h-3 animate-spin text-primary" />
-            <span className="text-sm text-muted-foreground">Analyzing...</span>
-          </div>
-        ) : items.length > 0 ? (
-          <ul className="space-y-1">
-            {items.map((item) => (
-              <li key={item} className="text-sm text-foreground flex items-start gap-2">
-                <span className="text-muted-foreground">•</span>
-                <span>{item}</span>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p className="text-sm text-muted-foreground">{emptyText}</p>
-        )}
-      </div>
-    </div>
+    <section className="space-y-2">
+      <h4 className="field-label font-sans">{title}</h4>
+      {body}
+    </section>
   )
 }
 
-export function AISummary({data}: AISummaryProps) {
-  const {location, incident, priority, keyFacts, missingInfo, isProcessing} = data
+export function AISummary({ data }: AISummaryProps) {
+  const { location, incident, keyFacts, missingInfo, isProcessing } = data
+  const hasData = Boolean(location || incident || keyFacts.length || missingInfo.length)
 
   return (
-    <div className="rounded-xl border border-border bg-card h-full flex flex-col">
-      {/* Header */}
-      <div className="px-4 py-3 border-b border-border flex-shrink-0">
-        <h3 className="font-semibold text-foreground text-sm">Incident Summary</h3>
-        <p className="text-xs text-muted-foreground">Analysis</p>
-      </div>
-
-      {/* Summary Content */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-5">
-        <SummaryField
-          icon={MapPin}
-          label="Location"
-          value={location}
-          isLoading={isProcessing && !location}
-        />
-
-        <SummaryField
-          icon={AlertTriangle}
-          label="Incident"
-          value={incident}
-          isLoading={isProcessing && !incident}
-        />
-
-        <SummaryField
-          icon={Gauge}
-          label="Priority"
-          value={priority}
-          isLoading={isProcessing && !priority}
-        />
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>AI summary</CardTitle>
+        {isProcessing && (
+          <CardAction>
+            <Loader2 className="size-3.5 animate-spin text-primary" aria-hidden />
+            Updating
+          </CardAction>
+        )}
+      </CardHeader>
 
-        <div className="border-t border-border pt-4">
-          <ListField
-            icon={FileText}
-            label="Key Facts"
-            items={keyFacts}
-            emptyText="No facts extracted yet"
-            isLoading={isProcessing && keyFacts.length === 0}
-          />
+      <CardContent className="min-h-0 space-y-5 overflow-y-auto">
+        <div className="grid grid-cols-2 gap-2.5">
+          <SummaryTile label="Location" value={location} isLoading={isProcessing && !location} />
+          <SummaryTile label="Incident" value={incident} isLoading={isProcessing && !incident} />
         </div>
 
-        <div className="border-t border-border pt-4">
-          <ListField
-            icon={HelpCircle}
-            label="Missing Info"
-            items={missingInfo}
-            emptyText="All information collected"
-            isLoading={isProcessing && missingInfo.length === 0}
-          />
-        </div>
-      </div>
-    </div>
+        <SummarySection
+          title="Key facts"
+          items={keyFacts}
+          isProcessing={isProcessing}
+          emptyText={hasData ? "No key facts yet" : "Waiting for the caller…"}
+        >
+          <ul className="space-y-1.5">
+            {keyFacts.map((item) => (
+              <li key={item} className="flex items-start gap-2.5 text-sm text-foreground">
+                <span className="mt-[0.55em] size-1 shrink-0 rounded-full bg-primary" aria-hidden />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </SummarySection>
+
+        <SummarySection
+          title="Still missing"
+          items={missingInfo}
+          isProcessing={isProcessing}
+          emptyText={hasData ? "All information collected" : "—"}
+        >
+          <ul className="flex flex-wrap gap-1.5">
+            {missingInfo.map((item) => (
+              <li
+                key={item}
+                className="rounded-full border border-warning/50 px-3 py-1 text-[13px] text-warning"
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
+        </SummarySection>
+      </CardContent>
+    </Card>
   )
 }
diff --git a/frontend/src/components/chat-panel.tsx b/frontend/src/components/chat-panel.tsx
index ab25b50..8ea73c3 100644
--- a/frontend/src/components/chat-panel.tsx
+++ b/frontend/src/components/chat-panel.tsx
@@ -1,10 +1,10 @@
 "use client"
 
 import {useEffect, useRef, useState, useCallback} from "react"
-import {Mic, MicOff, Send, User, Bot, Keyboard, MessageSquare, AlertCircle, Volume2, VolumeX} from "lucide-react"
+import {Mic, MicOff, ArrowRight, AlertCircle, Volume2, VolumeX} from "lucide-react"
 import {Button} from "@/components/ui/button"
-import {Textarea} from "@/components/ui/textarea"
-import {Switch} from "@/components/ui/switch"
+import {Card, CardAction, CardHeader, CardTitle} from "@/components/ui/card"
+import {Input} from "@/components/ui/input"
 import {cn} from "@/lib/utils"
 
 export type ChatMessage = {
@@ -53,12 +53,10 @@ export function ChatPanel({
   isSpeaking = false,
 }: ChatPanelProps) {
   const [speechSupported, setSpeechSupported] = useState(true)
-  const [useTextInput, setUseTextInput] = useState(false)
   const [textInput, setTextInput] = useState("")
   const [speechError, setSpeechError] = useState<string | null>(null)
   const recognitionRef = useRef<SpeechRecognition | null>(null)
-  const messagesEndRef = useRef<HTMLDivElement>(null)
-  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const logRef = useRef<HTMLDivElement>(null)
 
   // Use ref to track accumulated transcript to avoid stale closure issues
   const accumulatedTranscriptRef = useRef("")
@@ -190,7 +188,9 @@ export function ChatPanel({
 
   // Scroll to bottom when messages change
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({behavior: "smooth"})
+    // Scroll the transcript itself (scrollIntoView would also scroll the page)
+    const log = logRef.current
+    if (log) log.scrollTo({top: log.scrollHeight, behavior: "smooth"})
   }, [messages])
 
   const handleMicClick = useCallback(() => {
@@ -248,105 +248,61 @@ export function ChatPanel({
     }
   }, [handleTextSubmit])
 
-  const toggleInputMode = useCallback(() => {
-    // Stop listening if switching to text mode
-    if (!useTextInput && isListening) {
-      intentionalStopRef.current = true
-
-      // Clean shutdown of recognition
-      if (recognitionRef.current) {
-        recognitionRef.current.onresult = null
-        recognitionRef.current.onerror = null
-        recognitionRef.current.onend = null
-        try {
-          recognitionRef.current.stop()
-        } catch {
-          // Ignore errors
-        }
-        recognitionRef.current = null
-      }
-
-      onStopListening()
-      onTranscriptChange("")
-      accumulatedTranscriptRef.current = ""
-    }
-    setSpeechError(null)
-    setUseTextInput(!useTextInput)
-  }, [useTextInput, isListening, onStopListening, onTranscriptChange])
-
   const dismissError = useCallback(() => {
     setSpeechError(null)
   }, [])
 
+  const isEmpty = messages.length === 0 && !currentTranscript
+
   return (
-    <div className="rounded-xl border border-border bg-card h-full flex flex-col">
-      {/* Header */}
-      <div className="px-4 py-3 border-b border-border flex-shrink-0">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="font-semibold text-foreground text-sm">Caller ↔ AI Dispatcher</h3>
-            <p className="text-xs text-muted-foreground">
-              {useTextInput ? "Text input mode" : "Voice input mode"}
-            </p>
-          </div>
-          <div className="flex items-center gap-3">
-            {/* TTS Toggle */}
-            {onTtsToggle && (
-              <div className="flex items-center gap-1.5">
-                {ttsEnabled ? (
-                  <Volume2 className="w-3.5 h-3.5 text-primary" />
-                ) : (
-                  <VolumeX className="w-3.5 h-3.5 text-muted-foreground" />
-                )}
-                <Switch
-                  checked={ttsEnabled}
-                  onCheckedChange={onTtsToggle}
-                  className="scale-75"
-                />
-              </div>
-            )}
-            {/* Status indicators */}
-            {isSpeaking && (
-              <div className="flex items-center gap-1.5">
-                <Volume2 className="w-3.5 h-3.5 text-primary animate-pulse" />
-                <span className="text-xs text-primary font-medium">Speaking</span>
-              </div>
-            )}
-            {isListening && (
-              <div className="flex items-center gap-1.5">
-                <span className="w-2 h-2 rounded-full bg-rose-500 animate-pulse" />
-                <span className="text-xs text-rose-500 font-medium">Recording</span>
-              </div>
-            )}
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>Live transcript</CardTitle>
+        <CardAction className="gap-3">
+          {isSpeaking && (
+            <span className="flex items-center gap-1.5 text-primary">
+              <Volume2 className="size-3.5" aria-hidden />
+              Speaking
+            </span>
+          )}
+          {isListening && (
+            <span className="flex items-center gap-2" role="status">
+              <span className="size-2 rounded-full bg-danger animate-pulse-dot" aria-hidden />
+              Listening
+            </span>
+          )}
+          {/* Spoken replies toggle. Lives here until Settings → Voice is wired up. */}
+          {onTtsToggle && (
             <Button
               variant="ghost"
-              size="sm"
-              onClick={toggleInputMode}
-              className="text-muted-foreground hover:text-foreground"
-              title={useTextInput ? "Switch to voice" : "Switch to text"}
+              size="icon-sm"
+              onClick={() => onTtsToggle(!ttsEnabled)}
+              aria-pressed={ttsEnabled}
+              aria-label={ttsEnabled ? "Turn off spoken replies" : "Turn on spoken replies"}
+              title={ttsEnabled ? "Spoken replies on" : "Spoken replies off"}
+              className={cn(ttsEnabled && "text-primary hover:text-primary")}
             >
-              {useTextInput ? (
-                <MessageSquare className="w-4 h-4" />
-              ) : (
-                <Keyboard className="w-4 h-4" />
-              )}
+              {ttsEnabled ? <Volume2 /> : <VolumeX />}
             </Button>
-          </div>
-        </div>
-      </div>
+          )}
+        </CardAction>
+      </CardHeader>
 
       {/* Speech Error Banner */}
       {speechError && (
-        <div className="px-4 py-2 bg-destructive/10 border-b border-destructive/20 flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2 text-destructive">
-            <AlertCircle className="w-4 h-4 flex-shrink-0" />
+        <div
+          role="alert"
+          className="flex items-center justify-between gap-2 border-b border-danger/25 bg-danger/10 px-5 py-2"
+        >
+          <div className="flex items-center gap-2 text-danger">
+            <AlertCircle className="size-4 shrink-0" aria-hidden />
             <p className="text-xs">{speechError}</p>
           </div>
           <Button
             variant="ghost"
             size="sm"
             onClick={dismissError}
-            className="h-6 px-2 text-destructive hover:text-destructive hover:bg-destructive/10"
+            className="h-6 px-2 text-danger hover:text-danger"
           >
             Dismiss
           </Button>
@@ -354,124 +310,93 @@ export function ChatPanel({
       )}
 
       {/* Chat Messages */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-3 min-h-0">
-        {messages.length === 0 && !currentTranscript && (
-          <div className="h-full flex flex-col items-center justify-center text-center py-8">
-            <div className="w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center mb-3">
-              <Mic className="w-6 h-6 text-muted-foreground/50" />
-            </div>
-            <p className="text-sm text-muted-foreground">Chat bubbles appear here</p>
-            <p className="text-xs text-muted-foreground/70 mt-1">Click start to begin recording</p>
+      <div
+        className="min-h-0 flex-1 space-y-3 overflow-y-auto p-5"
+        ref={logRef}
+        role="log"
+        aria-live="polite"
+        aria-label="Call transcript"
+      >
+        {isEmpty && (
+          <div className="flex h-full flex-col items-center justify-center py-8 text-center">
+            <p className="text-sm text-muted-foreground">Waiting for the caller…</p>
+            <p className="mt-1 text-xs text-muted-foreground">Type the caller&apos;s words or press the mic to listen.</p>
           </div>
         )}
 
         {messages.map((message) => (
           <div
             key={message.id}
-            className={cn(
-              "flex gap-2",
-              message.role === "caller" ? "justify-end" : "justify-start"
-            )}
+            className={cn("flex", message.role === "caller" ? "justify-start" : "justify-end")}
           >
-            {message.role === "ai" && (
-              <div className="w-7 h-7 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
-                <Bot className="w-4 h-4 text-primary" />
-              </div>
-            )}
             <div
               className={cn(
-                "max-w-[80%] rounded-xl px-3 py-2 text-sm",
+                "max-w-[85%] rounded-xl px-3.5 py-2.5 text-sm leading-relaxed",
                 message.role === "caller"
-                  ? "bg-primary text-primary-foreground"
-                  : "bg-secondary text-foreground"
+                  ? "bg-card-raised text-foreground"
+                  : "border border-primary/35 bg-primary-soft text-foreground"
               )}
             >
+              <span className="sr-only">{message.role === "caller" ? "Caller: " : "FirstWave: "}</span>
               {message.content}
             </div>
-            {message.role === "caller" && (
-              <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
-                <User className="w-4 h-4 text-muted-foreground" />
-              </div>
-            )}
           </div>
         ))}
 
         {/* Current transcript being recorded */}
         {currentTranscript && (
-          <div className="flex gap-2 justify-end">
-            <div className="max-w-[80%] rounded-xl px-3 py-2 text-sm bg-primary/70 text-primary-foreground animate-pulse">
+          <div className="flex justify-start" aria-live="off">
+            <div className="max-w-[85%] rounded-xl border border-dashed border-border-strong bg-card-raised/60 px-3.5 py-2.5 text-sm leading-relaxed text-muted-foreground">
+              <span className="sr-only">Caller (live): </span>
               {currentTranscript}
-              <span className="inline-block w-1.5 h-4 bg-primary-foreground/70 ml-1 animate-pulse" />
-            </div>
-            <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
-              <User className="w-4 h-4 text-muted-foreground" />
+              <span className="ml-1 inline-block h-4 w-1 translate-y-0.5 bg-muted-foreground/70 animate-pulse" aria-hidden />
             </div>
           </div>
         )}
 
-        <div ref={messagesEndRef} />
       </div>
 
       {/* Input Area */}
-      <div className="p-4 border-t border-border flex-shrink-0">
-        {useTextInput ? (
-          /* Text Input Mode */
-          <div className="flex gap-2">
-            <Textarea
-              ref={textareaRef}
-              value={textInput}
-              onChange={(e) => setTextInput(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Type your message here... (Enter to send)"
-              disabled={disabled}
-              className="min-h-[44px] max-h-[120px] resize-none bg-secondary/50"
-              rows={1}
-            />
-            <Button
-              onClick={handleTextSubmit}
-              disabled={disabled || !textInput.trim()}
-              size="icon"
-              className="flex-shrink-0 h-[44px] w-[44px]"
-              aria-label="Send message"
-            >
-              <Send className="w-5 h-5" />
-            </Button>
-          </div>
-        ) : (
-          /* Voice Input Mode */
-          <>
-            <div className="flex items-center justify-center">
-              <Button
-                onClick={handleMicClick}
-                disabled={disabled || !speechSupported}
-                size="lg"
-                variant={isListening ? "destructive" : "default"}
-                className={cn(
-                  "gap-2 px-6 transition-all",
-                  isListening && "animate-pulse"
-                )}
-              >
-                {isListening ? (
-                  <>
-                    <MicOff className="w-5 h-5" />
-                    Stop Listening
-                  </>
-                ) : (
-                  <>
-                    <Mic className="w-5 h-5" />
-                    Start Listening
-                  </>
-                )}
-              </Button>
-            </div>
-            {!speechSupported && (
-              <p className="text-xs text-center text-muted-foreground mt-2">
-                Speech recognition not supported in this browser
-              </p>
+      <div className="shrink-0 border-t border-border p-4">
+        <div className="flex items-center gap-2">
+          <Input
+            value={textInput}
+            onChange={(e) => setTextInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type or speak the caller's reply"
+            disabled={disabled}
+            aria-label="Caller's reply"
+          />
+          <Button
+            onClick={handleMicClick}
+            disabled={disabled || !speechSupported}
+            variant="outline"
+            size="icon"
+            aria-pressed={isListening}
+            aria-label={isListening ? "Stop listening and send" : "Start listening"}
+            title={speechSupported ? undefined : "Speech recognition not supported in this browser"}
+            className={cn(
+              "shrink-0",
+              isListening && "border-danger/50 bg-danger/15 text-danger hover:bg-danger/20"
             )}
-          </>
+          >
+            {isListening ? <MicOff /> : <Mic />}
+          </Button>
+          <Button
+            onClick={handleTextSubmit}
+            disabled={disabled || !textInput.trim()}
+            size="icon"
+            className="shrink-0"
+            aria-label="Send message"
+          >
+            <ArrowRight />
+          </Button>
+        </div>
+        {!speechSupported && (
+          <p className="mt-2 text-xs text-muted-foreground">Speech recognition isn&apos;t supported in this browser.</p>
         )}
       </div>
-    </div>
+    </Card>
   )
 }
+
diff --git a/frontend/src/components/dispatch-panel.tsx b/frontend/src/components/dispatch-panel.tsx
index 91c015e..79f4c67 100644
--- a/frontend/src/components/dispatch-panel.tsx
+++ b/frontend/src/components/dispatch-panel.tsx
@@ -1,7 +1,8 @@
 "use client"
 
-import { Ambulance, Flame, Shield, AlertTriangle, Check, X, Settings2, MessageCircleQuestion } from "lucide-react"
+import { Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
+import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle, CardTile } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 
 export type DispatchRecommendation = {
@@ -19,36 +20,37 @@ interface DispatchPanelProps {
   recommendation: DispatchRecommendation
   onApprove: () => void
   onCancel: () => void
-  onOverride?: () => void
   isProcessing: boolean
   hasStartedConversation?: boolean
 }
 
-function ResourceCount({
-  icon: Icon,
-  label,
-  count,
-  color
-}: {
-  icon: React.ElementType
-  label: string
-  count: number
-  color: string
-}) {
-  const isNeeded = count > 0
+// Priority scale (design.md §2.1): text color, card fill @ 8–10%, border @ 30%.
+const PRIORITY_STYLES: Record<string, { text: string; card: string; description: string }> = {
+  P1: { text: "text-p1", card: "bg-p1/10 border-p1/30", description: "Life-threatening, immediate response" },
+  P2: { text: "text-p2", card: "bg-p2/10 border-p2/30", description: "Urgent, serious but stable" },
+  P3: { text: "text-p3", card: "bg-p3/10 border-p3/30", description: "Needs a response, not time-critical" },
+  P4: { text: "text-p4", card: "bg-p4/10 border-p4/30", description: "Low priority, can wait" },
+}
+
+const STATUS_BADGE = {
+  pending: { label: "Awaiting approval", className: "bg-warning/12 text-warning" },
+  approved: { label: "Dispatched", className: "bg-success/12 text-success" },
+  cancelled: { label: "Cancelled", className: "bg-card-raised text-muted-foreground" },
+} as const
+
+function UnitTile({ label, count }: { label: string; count: number }) {
   return (
-    <div className="flex items-center justify-between py-2">
-      <div className="flex items-center gap-2">
-        <Icon className={cn("w-4 h-4", color)} />
-        <span className="text-sm text-foreground">{label}</span>
-      </div>
-      <span className={cn(
-        "text-sm font-semibold",
-        isNeeded ? color : "text-muted-foreground"
-      )}>
-        {isNeeded ? "Yes" : "No"}
+    <CardTile className="flex flex-col items-center justify-center gap-0.5 py-3">
+      <span
+        className={cn(
+          "font-display text-2xl font-bold leading-none tabular-nums",
+          count > 0 ? "text-foreground" : "text-subtle-foreground"
+        )}
+      >
+        {count}
       </span>
-    </div>
+      <span className="text-xs text-muted-foreground">{label}</span>
+    </CardTile>
   )
 }
 
@@ -56,184 +58,101 @@ export function DispatchPanel({
   recommendation,
   onApprove,
   onCancel,
-  onOverride,
   isProcessing,
   hasStartedConversation = false,
 }: DispatchPanelProps) {
-  const { ems, fire, police, priority, status, specialUnits, needsMoreInfo, rationale } = recommendation
-
-  const priorityColors: Record<string, string> = {
-    P1: "text-rose-500 bg-rose-500/20",
-    P2: "text-orange-500 bg-orange-500/20",
-    P3: "text-amber-500 bg-amber-500/20",
-    P4: "text-emerald-500 bg-emerald-500/20",
-  }
-
-  const priorityDescriptions: Record<string, string> = {
-    P1: "Life-threatening, immediate response",
-    P2: "Urgent, serious but stable",
-    P3: "Non-urgent, needs response",
-    P4: "Low priority, can wait",
-  }
-
-  const statusConfig = {
-    pending: { label: "Pending", color: "text-amber-500", bg: "bg-amber-500/20" },
-    approved: { label: "Approved", color: "text-emerald-500", bg: "bg-emerald-500/20" },
-    cancelled: { label: "Cancelled", color: "text-muted-foreground", bg: "bg-muted" },
-  }
-
-  const currentStatus = statusConfig[status]
+  const { ems, fire, police, priority, status, specialUnits, rationale } = recommendation
+  const priorityStyle = priority ? PRIORITY_STYLES[priority] : undefined
+  const hasRecommendation = Boolean(priority)
+  const badge = status === "pending" && !hasRecommendation ? null : STATUS_BADGE[status]
+  const actionsDisabled = isProcessing || status !== "pending" || !priority
 
   return (
-    <div className="rounded-xl border border-border bg-card h-full flex flex-col">
-      {/* Header */}
-      <div className="px-4 py-3 border-b border-border flex-shrink-0">
-        <div className="flex items-center justify-between">
-          <div>
-            <div className="flex items-center gap-2">
-              <h3 className="font-semibold text-foreground text-sm">Dispatch</h3>
-              <span className={cn(
-                "text-xs px-2 py-0.5 rounded-full font-medium",
-                currentStatus.bg,
-                currentStatus.color
-              )}>
-                {currentStatus.label}
-              </span>
-            </div>
-            <p className="text-xs text-muted-foreground">Resource recommendation</p>
-          </div>
-          {onOverride && (
-            <Button variant="ghost" size="icon" className="w-8 h-8" onClick={onOverride} aria-label="Override dispatch recommendation">
-              <Settings2 className="w-4 h-4" />
-            </Button>
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>Dispatch</CardTitle>
+        <CardAction>
+          {badge && (
+            <span className={cn("rounded-md px-2 py-1 text-xs font-semibold", badge.className)}>{badge.label}</span>
           )}
-        </div>
-      </div>
-
-      {/* Recommendations */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-4">
-        {/* Priority Badge */}
-        {priority && (
-          <div className="flex flex-col items-center justify-center gap-1">
-            <div className={cn(
-              "px-4 py-2 rounded-lg text-center",
-              priorityColors[priority] || "text-muted-foreground bg-muted"
-            )}>
-              <p className="text-xs uppercase tracking-wider opacity-80">Priority</p>
-              <p className="text-2xl font-bold">{priority}</p>
-            </div>
-            <p className="text-xs text-muted-foreground text-center">
-              {priorityDescriptions[priority] || "Unknown priority level"}
-            </p>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent
+        className="flex min-h-0 flex-col gap-4 overflow-y-auto"
+        aria-live={priority === "P1" ? "assertive" : "polite"}
+      >
+        {/* Priority card */}
+        {priority ? (
+          <div
+            className={cn(
+              "flex items-center gap-4 rounded-tile border px-4 py-3.5",
+              priorityStyle?.card ?? "border-border bg-card-raised"
+            )}
+          >
+            <span
+              className={cn(
+                "font-display text-[34px] font-bold leading-none",
+                priorityStyle?.text ?? "text-foreground"
+              )}
+            >
+              {priority}
+            </span>
+            <span className="text-sm text-foreground">
+              {priorityStyle?.description ?? "Unknown priority level"}
+            </span>
           </div>
-        )}
-
-        {/* Rationale - Human-readable recommendation */}
-        {rationale && (
-          <div className="rounded-lg border border-primary/30 bg-primary/5 p-3">
-            <p className="text-sm text-foreground leading-relaxed">{rationale}</p>
+        ) : (
+          <div className="flex min-h-[66px] items-center gap-3 rounded-tile border border-dashed border-border-strong px-4 py-3.5 text-sm text-muted-foreground">
+            {isProcessing ? (
+              <>
+                <Loader2 className="size-4 animate-spin text-primary" aria-hidden />
+                Analyzing the call…
+              </>
+            ) : hasStartedConversation ? (
+              "More details needed before a recommendation. Ask the caller the questions in the transcript."
+            ) : (
+              "No recommendation yet"
+            )}
           </div>
         )}
 
-        {/* Resource Counts */}
-        <div className="rounded-lg border border-border bg-secondary/30 p-3">
-          <p className="text-xs text-muted-foreground uppercase tracking-wider mb-2">Recommended</p>
-          <div className="divide-y divide-border">
-            <ResourceCount
-              icon={Ambulance}
-              label="EMS"
-              count={ems}
-              color="text-rose-500"
-            />
-            <ResourceCount
-              icon={Flame}
-              label="Fire"
-              count={fire}
-              color="text-orange-500"
-            />
-            <ResourceCount
-              icon={Shield}
-              label="Police"
-              count={police}
-              color="text-sky-500"
-            />
-          </div>
+        {/* Unit counts */}
+        <div className="grid grid-cols-3 gap-2.5">
+          <UnitTile label="EMS" count={ems} />
+          <UnitTile label="Fire" count={fire} />
+          <UnitTile label="Police" count={police} />
         </div>
 
-        {/* Special Units */}
         {specialUnits && specialUnits.length > 0 && (
-          <div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-3">
-            <div className="flex items-center gap-2 mb-2">
-              <AlertTriangle className="w-4 h-4 text-amber-500" />
-              <p className="text-xs text-amber-500 uppercase tracking-wider font-medium">Special Units</p>
-            </div>
-            <ul className="space-y-1">
+          <div className="space-y-2">
+            <p className="field-label">Special units</p>
+            <div className="flex flex-wrap gap-1.5">
               {specialUnits.map((unit) => (
-                <li key={unit} className="text-sm text-foreground flex items-center gap-2">
-                  <span className="text-amber-500">•</span>
+                <span key={unit} className="rounded-full bg-card-raised px-2.5 py-1 text-xs text-foreground">
                   {unit}
-                </li>
+                </span>
               ))}
-            </ul>
-          </div>
-        )}
-
-        {/* Empty State - Waiting for more info */}
-        {!isProcessing && ems === 0 && fire === 0 && police === 0 && !priority && hasStartedConversation && (
-          <div className="flex flex-col items-center justify-center py-8 text-center">
-            <div className="w-12 h-12 rounded-full bg-sky-500/20 flex items-center justify-center mb-3">
-              <MessageCircleQuestion className="w-6 h-6 text-sky-500" />
             </div>
-            <p className="text-sm font-medium text-foreground">Gathering Information</p>
-            <p className="text-xs text-muted-foreground mt-1 max-w-[200px]">
-              More details needed before dispatch recommendation
-            </p>
-            <p className="text-xs text-sky-500 mt-2">
-              Answer the questions in the chat
-            </p>
           </div>
         )}
 
-        {/* Empty State - Not started */}
-        {!isProcessing && ems === 0 && fire === 0 && police === 0 && !priority && !hasStartedConversation && (
-          <div className="flex flex-col items-center justify-center py-8 text-center">
-            <AlertTriangle className="w-8 h-8 text-muted-foreground/50 mb-2" />
-            <p className="text-sm text-muted-foreground">No recommendation yet</p>
-            <p className="text-xs text-muted-foreground/70 mt-1">Start recording to analyze</p>
-          </div>
-        )}
-
-        {/* Processing State */}
-        {isProcessing && (
-          <div className="flex flex-col items-center justify-center py-4 text-center">
-            <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mb-2" />
-            <p className="text-sm text-muted-foreground">Analyzing...</p>
+        {rationale && (
+          <div className="space-y-1.5">
+            <p className="field-label">Rationale</p>
+            <p className="text-sm leading-relaxed text-foreground">{rationale}</p>
           </div>
         )}
-      </div>
-
-      {/* Action Buttons */}
-      <div className="p-4 border-t border-border flex-shrink-0">
-        <div className="flex gap-2">
-          <Button
-            onClick={onApprove}
-            disabled={isProcessing || status !== "pending" || !priority}
-            className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white"
-          >
-            <Check className="w-4 h-4 mr-2" />
-            APPROVE
-          </Button>
-          <Button
-            onClick={onCancel}
-            disabled={isProcessing || status !== "pending" || !priority}
-            variant="outline"
-            className="flex-1 border-destructive/50 text-destructive hover:bg-destructive/10"
-          >
-            <X className="w-4 h-4 mr-2" />
-            CANCEL
-          </Button>
-        </div>
-      </div>
-    </div>
+      </CardContent>
+
+      <CardFooter className="border-t-0 pt-0">
+        <Button onClick={onApprove} disabled={actionsDisabled} className="flex-1">
+          Approve dispatch
+        </Button>
+        <Button onClick={onCancel} disabled={actionsDisabled} variant="outline" className="flex-1">
+          Cancel
+        </Button>
+      </CardFooter>
+    </Card>
   )
 }
diff --git a/frontend/src/components/emergency-dashboard.tsx b/frontend/src/components/emergency-dashboard.tsx
index 53416a2..bf8eef7 100644
--- a/frontend/src/components/emergency-dashboard.tsx
+++ b/frontend/src/components/emergency-dashboard.tsx
@@ -1,10 +1,13 @@
 "use client"
 
-import { useState, useRef, useCallback } from "react"
+import { useState, useRef, useCallback, useEffect } from "react"
+import { Plus } from "lucide-react"
+import { Button } from "@/components/ui/button"
 import { ChatPanel, type ChatMessage } from "./chat-panel"
 import { AISummary, type SummaryData } from "./ai-summary"
 import { DispatchPanel, type DispatchRecommendation } from "./dispatch-panel"
 import { NearbyResources } from "./nearby-resources"
+import { AgentPipeline } from "./agent-pipeline"
 import { ErrorBoundary } from "./error-boundary"
 
 const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000"
@@ -657,12 +660,33 @@ function EmergencyDashboardContent() {
     dispatchRef.current = initialDispatch
   }
 
+  const callStartedAt = messages[0]?.timestamp ?? null
+
   return (
-    <div className="container mx-auto px-4 py-6 space-y-6">
-      {/* Main 3-Column Layout */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 min-h-[500px]">
-        {/* LEFT: Caller ↔ AI Chat + Mic */}
-        <div className="lg:col-span-1">
+    <div className="space-y-4 px-4 py-6 sm:px-6 lg:py-8">
+      {/* Title row */}
+      <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 pb-2">
+        <h1 className="text-[28px] leading-tight tracking-[-0.01em]">Active call</h1>
+        <div className="flex items-center gap-4">
+          <p className="font-mono text-xs uppercase tracking-[0.12em] text-muted-foreground" aria-live="off">
+            {callStartedAt ? (
+              <>
+                {summaryData.incident || "Incoming call"} · <CallTimer startedAt={callStartedAt} /> elapsed
+              </>
+            ) : (
+              "No active call"
+            )}
+          </p>
+          <Button onClick={handleReset} disabled={messages.length === 0}>
+            <Plus aria-hidden />
+            New call
+          </Button>
+        </div>
+      </div>
+
+      {/* Row 1: transcript, summary, dispatch. Below lg: transcript, dispatch, summary. */}
+      <div className="grid grid-cols-1 gap-4 lg:h-[560px] lg:grid-cols-3">
+        <div className="order-1 h-[520px] min-h-0 lg:h-auto">
           <ErrorBoundary onReset={handleReset}>
             <ChatPanel
               isListening={isListening}
@@ -680,21 +704,18 @@ function EmergencyDashboardContent() {
           </ErrorBoundary>
         </div>
 
-        {/* CENTER: AI Summary */}
-        <div className="lg:col-span-1">
+        <div className="order-3 min-h-0 lg:order-2">
           <ErrorBoundary onReset={handleReset}>
             <AISummary data={summaryData} />
           </ErrorBoundary>
         </div>
 
-        {/* RIGHT: Dispatch (Pending) + Override */}
-        <div className="lg:col-span-1">
+        <div className="order-2 min-h-0 lg:order-3">
           <ErrorBoundary onReset={handleReset}>
             <DispatchPanel
               recommendation={dispatch}
               onApprove={handleApprove}
               onCancel={handleCancel}
-              onOverride={handleReset}
               isProcessing={isProcessing}
               hasStartedConversation={messages.length > 0}
             />
@@ -702,14 +723,44 @@ function EmergencyDashboardContent() {
         </div>
       </div>
 
-      {/* Nearby Resources Section */}
-      <ErrorBoundary onReset={handleReset}>
-        <NearbyResources />
-      </ErrorBoundary>
+      {/* Row 2: nearby resources + agent pipeline */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <div className="min-w-0 lg:col-span-2">
+          <ErrorBoundary onReset={handleReset}>
+            <NearbyResources priority={dispatch.priority} />
+          </ErrorBoundary>
+        </div>
+        <ErrorBoundary onReset={handleReset}>
+          <AgentPipeline
+            currentAgent={currentAgent}
+            isProcessing={isProcessing}
+            hasCompletedRun={messages.length > 0 && dispatch.priority !== null}
+          />
+        </ErrorBoundary>
+      </div>
     </div>
   )
 }
 
+/** Live mm:ss since the first message of the call. */
+function CallTimer({ startedAt }: { startedAt: Date }) {
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000)
+    return () => clearInterval(id)
+  }, [])
+
+  const seconds = Math.max(0, Math.floor((now - startedAt.getTime()) / 1000))
+  const mm = String(Math.floor(seconds / 60)).padStart(2, "0")
+  const ss = String(seconds % 60).padStart(2, "0")
+  return (
+    <time dateTime={`PT${seconds}S`} className="tabular-nums">
+      {mm}:{ss}
+    </time>
+  )
+}
+
 export function EmergencyDashboard() {
   return (
     <ErrorBoundary>
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
index efd8582..287ca3e 100644
--- a/frontend/src/components/header.tsx
+++ b/frontend/src/components/header.tsx
@@ -1,7 +1,10 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { Activity } from "lucide-react"
+import Link from "next/link"
+import { Radio, SlidersHorizontal } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000"
 const HEALTH_POLL_MS = 15000
@@ -25,37 +28,36 @@ export function Header() {
   }, [])
 
   return (
-    <header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
-      <div className="container mx-auto px-4 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
-              <Activity className="w-6 h-6 text-primary" />
-            </div>
-            <div>
-              <h1 className="text-xl font-bold text-foreground tracking-tight">
-                First<span className="text-emerald-500">Wave</span>
-              </h1>
-              <p className="text-xs text-muted-foreground">Emergency Response System</p>
-            </div>
+    <header className="sticky top-0 z-50 border-b border-border bg-card shadow-elevated">
+      <div className="flex h-16 items-center justify-between gap-4 px-4 sm:px-6">
+        <Link href="/" className="flex min-w-0 items-center gap-3 rounded-tile" aria-label="FirstWave home">
+          <Radio className="size-7 shrink-0 text-primary" strokeWidth={2.25} aria-hidden />
+          <div className="min-w-0">
+            <p className="font-display text-lg font-bold leading-tight tracking-tight text-foreground">FirstWave</p>
+            <p className="truncate text-xs leading-tight text-muted-foreground">Emergency Response System</p>
           </div>
+        </Link>
 
-          <div className="flex items-center gap-2 px-4 py-1.5 rounded-full bg-secondary text-sm font-semibold text-foreground">
-            <span className="relative flex w-2 h-2">
-              <span
-                className={`absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping ${
-                  online ? "bg-emerald-500" : "bg-red-500"
-                }`}
-              />
-              <span
-                className={`relative inline-flex w-2 h-2 rounded-full ${online ? "bg-emerald-500" : "bg-red-500"}`}
-              />
-            </span>
-            <span>
+        <div className="flex shrink-0 items-center gap-3">
+          <div
+            role="status"
+            className="flex h-10 items-center gap-2 rounded-full bg-card-raised px-4 text-[13px] font-semibold"
+          >
+            <span
+              className={cn("size-2 rounded-full animate-pulse-dot", online ? "bg-success" : "bg-danger")}
+              aria-hidden
+            />
+            <span className="text-muted-foreground">
               System:{" "}
-              <span className={online ? "text-emerald-500" : "text-red-500"}>{online ? "Online" : "Offline"}</span>
+              <span className={online ? "text-success" : "text-danger"}>{online ? "Online" : "Offline"}</span>
             </span>
           </div>
+
+          <Button asChild variant="outline" size="icon" aria-label="Settings">
+            <Link href="/settings">
+              <SlidersHorizontal />
+            </Link>
+          </Button>
         </div>
       </div>
     </header>
diff --git a/frontend/src/components/landing/hero.tsx b/frontend/src/components/landing/hero.tsx
new file mode 100644
index 0000000..28da3e6
--- /dev/null
+++ b/frontend/src/components/landing/hero.tsx
@@ -0,0 +1,115 @@
+import Link from "next/link"
+
+import { Button } from "@/components/ui/button"
+import { CONSOLE_HREF, DEMO_URL } from "./links"
+
+/** Thin concentric cyan rings behind the hero, top-right (~15% opacity). */
+function HeroRings() {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 900 900"
+      fill="none"
+      className="pointer-events-none absolute top-[-420px] left-[calc(50%+40px)] size-[900px] text-primary opacity-15 lg:top-[-330px] lg:left-[calc(50%-50px)]"
+    >
+      {[130, 230, 330, 430].map((r, i) => (
+        <circle key={r} cx="450" cy="450" r={r} stroke="currentColor" strokeWidth={i === 0 ? 2 : 1.25} />
+      ))}
+    </svg>
+  )
+}
+
+function FactChip({ label, value }: { label: string; value: string }) {
+  return (
+    <li className="rounded-full bg-card-raised px-3 py-1.5 text-[13px] leading-tight">
+      <span className="text-muted-foreground">{label}</span> <span className="text-foreground">{value}</span>
+    </li>
+  )
+}
+
+function SampleCallCard() {
+  return (
+    <figure
+      aria-label="Sample call: FirstWave structures a caller's report into a P1 recommendation"
+      className="relative rounded-card border border-border bg-card p-5 shadow-elevated sm:p-6"
+    >
+      <div className="flex items-center justify-between gap-3">
+        <p className="flex items-center gap-2.5 font-mono text-[12px] font-medium tracking-[0.12em] text-foreground">
+          <span aria-hidden="true" className="size-2 animate-pulse-dot rounded-full bg-danger" />
+          INCOMING CALL · 00:42
+        </p>
+        <span className="text-[12px] text-muted-foreground">Sample call</span>
+      </div>
+
+      <div className="mt-5 space-y-4">
+        <div className="max-w-[92%] rounded-[12px] bg-card-raised px-4 py-3 sm:max-w-[85%]">
+          <p className="font-mono text-[11px] tracking-[0.08em] text-muted-foreground">CALLER</p>
+          <p className="mt-1 text-[15px] leading-snug text-foreground">
+            There was a crash. My dad is not waking up. We&apos;re on Market near Fifth.
+          </p>
+        </div>
+        <div className="ml-auto w-fit max-w-[92%] rounded-[12px] border border-primary/35 bg-primary-soft px-4 py-3 sm:max-w-[85%]">
+          <p className="font-mono text-[11px] tracking-[0.08em] text-primary">FIRSTWAVE</p>
+          <p className="mt-1 text-[15px] leading-snug text-foreground">Stay with me. Is he breathing right now?</p>
+        </div>
+      </div>
+
+      <hr className="my-5 border-border" />
+
+      <ul className="flex flex-wrap gap-2" aria-label="Extracted facts">
+        <FactChip label="Location" value="Market St & 5th" />
+        <FactChip label="Injury" value="Unresponsive adult" />
+        <FactChip label="Still missing" value="Breathing, hazards" />
+      </ul>
+
+      <div className="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-tile border border-p1/30 bg-p1/8 px-4 py-3">
+        <span className="font-display text-[32px] font-bold leading-none tracking-[-0.02em] text-p1">P1</span>
+        <p className="text-[14px] leading-snug text-foreground">
+          Life-threatening.
+          <br />
+          Recommend EMS now.
+        </p>
+        <p className="text-[13px] text-muted-foreground sm:ml-auto">Awaiting dispatcher approval</p>
+      </div>
+    </figure>
+  )
+}
+
+export function Hero() {
+  return (
+    <section aria-labelledby="hero-title" className="relative">
+      <HeroRings />
+      <div className="relative mx-auto grid max-w-[1120px] items-center gap-14 px-4 pt-12 pb-20 sm:px-6 sm:pt-16 lg:grid-cols-[1.1fr_1fr] lg:gap-12 lg:pb-28">
+        <div>
+          <p className="eyebrow">AI Emergency Dispatch Assistant</p>
+          <h1
+            id="hero-title"
+            className="mt-6 text-[44px] leading-[1.02] tracking-[-0.03em] sm:text-[56px] sm:leading-none lg:text-[64px]"
+          >
+            The first wave of help starts with the first second of the call.
+          </h1>
+          <p className="mt-7 max-w-[34rem] text-[17px] leading-[1.55] text-muted-foreground sm:text-[18px]">
+            FirstWave talks to the caller, structures what it hears, and hands the dispatcher a triaged, mapped
+            recommendation. A human approves every dispatch.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Button asChild size="lg">
+              <Link href={CONSOLE_HREF}>Open the dispatcher console</Link>
+            </Button>
+            <Button asChild size="lg" variant="outline">
+              <a href={DEMO_URL} target="_blank" rel="noopener noreferrer">
+                Watch the demo
+              </a>
+            </Button>
+          </div>
+          <p className="mt-8 max-w-[38rem] text-[13px] leading-relaxed text-muted-foreground">
+            Over 240 million emergency calls are made in the US each year (NENA). Key details get missed when callers
+            panic.
+          </p>
+        </div>
+
+        <SampleCallCard />
+      </div>
+    </section>
+  )
+}
diff --git a/frontend/src/components/landing/landing-nav.tsx b/frontend/src/components/landing/landing-nav.tsx
new file mode 100644
index 0000000..da705b2
--- /dev/null
+++ b/frontend/src/components/landing/landing-nav.tsx
@@ -0,0 +1,62 @@
+import Link from "next/link"
+
+import { Button } from "@/components/ui/button"
+import { CONSOLE_HREF, SETTINGS_HREF } from "./links"
+
+/** `((•))` mark. Decorative: the wordmark next to it carries the name. */
+export function WaveLogo({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 32 24" fill="none" aria-hidden="true" className={className}>
+      <circle cx="16" cy="12" r="2.6" fill="currentColor" />
+      <path d="M10.5 6.5a7.8 7.8 0 0 0 0 11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <path d="M21.5 6.5a7.8 7.8 0 0 1 0 11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <path d="M6 2.5a13.5 13.5 0 0 0 0 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <path d="M26 2.5a13.5 13.5 0 0 1 0 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+const NAV_LINKS = [
+  { href: "#pipeline", label: "Pipeline" },
+  { href: "#priority", label: "Priority" },
+  { href: "#map", label: "Map" },
+]
+
+const linkClass =
+  "rounded-full px-1 text-[15px] font-medium text-muted-foreground transition-colors hover:text-foreground"
+
+export function LandingNav() {
+  return (
+    <header className="relative z-10">
+      <nav
+        aria-label="Main"
+        className="mx-auto flex h-20 max-w-[1120px] items-center justify-between gap-4 px-4 sm:px-6"
+      >
+        <Link href="/" className="flex items-center gap-2.5 rounded-md">
+          <WaveLogo className="h-6 w-8 text-primary" />
+          <span className="font-display text-[19px] font-bold tracking-[-0.01em] text-foreground">FirstWave</span>
+        </Link>
+
+        <div className="flex items-center gap-5 sm:gap-7">
+          <ul className="hidden items-center gap-7 md:flex">
+            {NAV_LINKS.map((link) => (
+              <li key={link.href}>
+                <a href={link.href} className={linkClass}>
+                  {link.label}
+                </a>
+              </li>
+            ))}
+            <li>
+              <Link href={SETTINGS_HREF} className={linkClass}>
+                Settings
+              </Link>
+            </li>
+          </ul>
+          <Button asChild>
+            <Link href={CONSOLE_HREF}>Open console</Link>
+          </Button>
+        </div>
+      </nav>
+    </header>
+  )
+}
diff --git a/frontend/src/components/landing/links.ts b/frontend/src/components/landing/links.ts
new file mode 100644
index 0000000..385ffbd
--- /dev/null
+++ b/frontend/src/components/landing/links.ts
@@ -0,0 +1,4 @@
+export const CONSOLE_HREF = "/console"
+export const SETTINGS_HREF = "/settings"
+export const DEMO_URL = "https://youtu.be/tViIWf1pbC8"
+export const GITHUB_URL = "https://github.com/darrensh3n/FirstWaveAI"
diff --git a/frontend/src/components/landing/map-illustration.tsx b/frontend/src/components/landing/map-illustration.tsx
new file mode 100644
index 0000000..51ceca4
--- /dev/null
+++ b/frontend/src/components/landing/map-illustration.tsx
@@ -0,0 +1,85 @@
+import { Cross, Flame, Pill, Shield, type LucideIcon } from "lucide-react"
+
+// Static illustration only. The console uses the live Leaflet map.
+const W = 614
+const H = 458
+const INCIDENT = { x: 307, y: 229 }
+
+type Marker = { label: string; legend: string; x: number; y: number; icon: LucideIcon; bg: string }
+
+const MARKERS: Marker[] = [
+  { label: "Hospital", legend: "Hospitals", x: 187, y: 142, icon: Cross, bg: "bg-resource-medical" },
+  { label: "Fire station", legend: "Fire stations", x: 438, y: 153, icon: Flame, bg: "bg-resource-fire" },
+  { label: "Police", legend: "Police", x: 384, y: 339, icon: Shield, bg: "bg-resource-police" },
+  { label: "Pharmacy", legend: "Pharmacies", x: 165, y: 317, icon: Pill, bg: "bg-resource-pharmacy" },
+]
+
+const pos = (x: number, y: number) => ({ left: `${(x / W) * 100}%`, top: `${(y / H) * 100}%` })
+
+export function MapIllustration() {
+  return (
+    <figure className="overflow-hidden rounded-card border border-border bg-card">
+      <div
+        role="img"
+        aria-label="Illustration: an incident pin surrounded by the nearest hospital, fire station, police station and pharmacy"
+        className="relative aspect-[614/458] bg-background"
+      >
+        <svg viewBox={`0 0 ${W} ${H}`} fill="none" aria-hidden="true" className="absolute inset-0 size-full">
+          {/* Street grid */}
+          <g stroke="var(--border-strong)" strokeWidth="1.5">
+            {[121, 307, 492].map((x) => (
+              <line key={`v${x}`} x1={x} y1="0" x2={x} y2={H} />
+            ))}
+            {[98, 229, 359].map((y) => (
+              <line key={`h${y}`} x1="0" y1={y} x2={W} y2={y} />
+            ))}
+          </g>
+          {/* Main roads */}
+          <g stroke="var(--border-strong)" strokeWidth="4" strokeLinecap="round" opacity="0.9">
+            <line x1="220" y1="0" x2="395" y2={H} />
+            <line x1="0" y1="163" x2={W} y2="295" />
+          </g>
+          {/* Search radius rings */}
+          <g stroke="var(--primary)" strokeWidth="1">
+            <circle cx={INCIDENT.x} cy={INCIDENT.y} r="50" opacity="0.3" />
+            <circle cx={INCIDENT.x} cy={INCIDENT.y} r="105" opacity="0.2" />
+            <circle cx={INCIDENT.x} cy={INCIDENT.y} r="160" opacity="0.12" />
+          </g>
+        </svg>
+
+        {/* Incident pin: P1 color, dot + ring halo */}
+        <span
+          aria-hidden="true"
+          className="absolute flex size-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+          style={pos(INCIDENT.x, INCIDENT.y)}
+        >
+          <span className="absolute inset-0 animate-wave-ring rounded-full border border-p1/60" />
+          <span className="absolute size-7 rounded-full border-2 border-p1/70" />
+          <span className="size-4 rounded-full bg-p1" />
+        </span>
+
+        {MARKERS.map(({ label, x, y, icon: Icon, bg }) => (
+          <span
+            key={label}
+            aria-hidden="true"
+            className={`absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 border-card ${bg}`}
+            style={pos(x, y)}
+          >
+            <Icon className="size-3 text-primary-foreground" strokeWidth={2.75} />
+          </span>
+        ))}
+      </div>
+
+      <figcaption className="border-t border-border px-5 py-3.5">
+        <ul className="flex flex-wrap gap-x-5 gap-y-2 text-[13px] text-muted-foreground">
+          {MARKERS.map(({ legend, bg }) => (
+            <li key={legend} className="flex items-center gap-2">
+              <span aria-hidden="true" className={`size-2 rounded-full ${bg}`} />
+              {legend}
+            </li>
+          ))}
+        </ul>
+      </figcaption>
+    </figure>
+  )
+}
diff --git a/frontend/src/components/landing/sections.tsx b/frontend/src/components/landing/sections.tsx
new file mode 100644
index 0000000..840d699
--- /dev/null
+++ b/frontend/src/components/landing/sections.tsx
@@ -0,0 +1,144 @@
+import Link from "next/link"
+
+import { Button } from "@/components/ui/button"
+import { CONSOLE_HREF, GITHUB_URL } from "./links"
+import { MapIllustration } from "./map-illustration"
+
+const container = "mx-auto max-w-[1120px] px-4 sm:px-6"
+const h2Class = "mt-5 text-[32px] leading-[1.1] tracking-[-0.02em] sm:text-[40px]"
+const copyClass = "mt-6 text-[17px] leading-[1.6] text-muted-foreground"
+
+const AGENTS = [
+  { title: "Extraction", body: "Pulls location, injuries, hazards and headcount out of the live transcript." },
+  { title: "Triage", body: "Classifies the emergency and assigns a P1 to P4 priority." },
+  { title: "Next-Question", body: "Spots what is still missing and suggests the follow-up to ask." },
+  { title: "Dispatch Planner", body: "Recommends EMS, Fire or Police for the incident." },
+  { title: "Resource Locator", body: "Finds the nearest available units with ETAs." },
+  { title: "Safety Guardrail", body: "Checks every recommendation before it reaches the dispatcher." },
+]
+
+export function PipelineSection() {
+  return (
+    <section id="pipeline" aria-labelledby="pipeline-title" className="scroll-mt-6 py-20 lg:py-28">
+      <div className={container}>
+        <p className="eyebrow">Multi-agent pipeline</p>
+        <h2 id="pipeline-title" className={h2Class}>
+          Six agents work the call <br className="hidden sm:block" /> while the caller is still talking.
+        </h2>
+        <ol className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {AGENTS.map((agent, i) => (
+            <li key={agent.title} className="rounded-card border border-border bg-card p-6 sm:p-7">
+              <span className="font-mono text-[13px] text-primary">{String(i + 1).padStart(2, "0")}</span>
+              <h3 className="mt-4 text-[20px] font-semibold tracking-[-0.01em]">{agent.title}</h3>
+              <p className="mt-3 text-[15px] leading-[1.55] text-muted-foreground">{agent.body}</p>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  )
+}
+
+const PRIORITIES = [
+  { level: "P1", label: "Life-threatening, immediate response", color: "text-p1" },
+  { level: "P2", label: "Urgent, serious but stable", color: "text-p2" },
+  { level: "P3", label: "Needs a response, not time-critical", color: "text-p3" },
+  { level: "P4", label: "Low priority, can wait", color: "text-p4" },
+]
+
+export function PrioritySection() {
+  return (
+    <section id="priority" aria-labelledby="priority-title" className="scroll-mt-6 py-20 lg:py-28">
+      <div className={`${container} grid items-center gap-12 lg:grid-cols-2 lg:gap-14`}>
+        <div>
+          <p className="eyebrow">Human in control</p>
+          <h2 id="priority-title" className={h2Class}>
+            The AI recommends. <br className="hidden sm:block" /> The dispatcher decides.
+          </h2>
+          <p className={`${copyClass} max-w-[34rem]`}>
+            Every recommendation lands with a priority, a rationale and the units to send. Nothing goes out until a
+            dispatcher approves it, and cancelling takes one click.
+          </p>
+          {/* Illustration of the console controls. Non-functional, so hidden from assistive tech and tab order. */}
+          <div className="mt-8 flex flex-wrap gap-3" aria-hidden="true">
+            <Button type="button" tabIndex={-1} className="cursor-default">
+              Approve dispatch
+            </Button>
+            <Button type="button" tabIndex={-1} variant="outline" className="cursor-default">
+              Cancel
+            </Button>
+          </div>
+        </div>
+
+        <ul className="space-y-3" aria-label="Priority levels">
+          {PRIORITIES.map((p) => (
+            <li
+              key={p.level}
+              className="flex items-center gap-6 rounded-card border border-border bg-card px-6 py-5"
+            >
+              <span className={`w-12 shrink-0 font-display text-[32px] font-bold leading-none tracking-[-0.02em] sm:text-[36px] ${p.color}`}>
+                {p.level}
+              </span>
+              <span className="text-[16px] text-foreground">{p.label}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+export function MapSection() {
+  return (
+    <section id="map" aria-labelledby="map-title" className="scroll-mt-6 py-20 lg:py-28">
+      <div className={`${container} grid items-center gap-12 lg:grid-cols-2 lg:gap-14`}>
+        <div className="order-2 lg:order-1">
+          <MapIllustration />
+        </div>
+        <div className="order-1 lg:order-2">
+          <p className="eyebrow">Resource mapping</p>
+          <h2 id="map-title" className={h2Class}>
+            See the nearest help before you send it.
+          </h2>
+          <p className={copyClass}>
+            An interactive map plots the incident and the closest hospitals, fire stations, police and pharmacies, each
+            with distance and travel time, built on Leaflet and OpenStreetMap.
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function CtaBand() {
+  return (
+    <section aria-labelledby="cta-title" className="py-20 lg:py-28">
+      <div className={container}>
+        <div className="rounded-card border border-border bg-card px-6 py-14 sm:px-12 sm:py-16 lg:px-20 lg:py-20">
+          <h2 id="cta-title" className="max-w-[36rem] text-[34px] leading-[1.05] tracking-[-0.025em] sm:text-[48px]">
+            Give every dispatcher <br className="hidden sm:block" /> a faster first minute.
+          </h2>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Button asChild size="lg">
+              <Link href={CONSOLE_HREF}>Open the dispatcher console</Link>
+            </Button>
+            <Button asChild size="lg" variant="outline">
+              <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer">
+                View on GitHub
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export function LandingFooter() {
+  return (
+    <footer className={`${container} flex flex-col gap-2 pt-4 pb-12 text-[13px] text-muted-foreground sm:flex-row sm:justify-between`}>
+      <p>FirstWave · MIT License</p>
+      <p>Next.js · FastAPI · LangGraph · Groq</p>
+    </footer>
+  )
+}
diff --git a/frontend/src/components/nearby-resources.tsx b/frontend/src/components/nearby-resources.tsx
index a103262..be0a02e 100644
--- a/frontend/src/components/nearby-resources.tsx
+++ b/frontend/src/components/nearby-resources.tsx
@@ -1,24 +1,10 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState } from "react"
 import dynamic from "next/dynamic"
-import { 
-  MapPin, 
-  Phone, 
-  ExternalLink, 
-  Flame, 
-  Building2, 
-  Shield, 
-  Cross,
-  Filter,
-  Navigation,
-  ChevronDown,
-  Car,
-  MapPinOff,
-  Loader2
-} from "lucide-react"
+import { Phone, ExternalLink, MoreHorizontal, Maximize2, Minimize2, Loader2, MapPinOff } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { Switch } from "@/components/ui/switch"
+import { Card, CardAction, CardHeader, CardTitle } from "@/components/ui/card"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -38,17 +24,16 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
 
 // Dynamically import the map to avoid SSR issues with Leaflet
-const MapComponent = dynamic(() => import("./resource-map"), { 
+const MapComponent = dynamic(() => import("./resource-map"), {
   ssr: false,
   loading: () => (
-    <div className="h-48 bg-secondary/50 rounded-lg flex flex-col items-center justify-center gap-2">
-      <MapPin className="w-8 h-8 text-muted-foreground/50" />
-      <span className="text-muted-foreground text-sm">Map Component Area</span>
-      <span className="text-muted-foreground/70 text-xs">Loading map...</span>
+    <div className="flex h-full items-center justify-center bg-input">
+      <span className="font-mono text-xs text-muted-foreground">Loading map…</span>
     </div>
-  )
+  ),
 })
 
 type ResourceType = "medical" | "police" | "fire" | "pharmacy"
@@ -134,36 +119,14 @@ const mockResources: Resource[] = [
   },
 ]
 
-const resourceTypeConfig = {
-  medical: { 
-    label: "Medical",
-    icon: Cross, 
-    color: "text-rose-500", 
-    bg: "bg-rose-500/20",
-    activeBg: "bg-rose-500/30"
-  },
-  police: { 
-    label: "Police",
-    icon: Shield, 
-    color: "text-sky-500", 
-    bg: "bg-sky-500/20",
-    activeBg: "bg-sky-500/30"
-  },
-  fire: { 
-    label: "Fire",
-    icon: Flame, 
-    color: "text-orange-500", 
-    bg: "bg-orange-500/20",
-    activeBg: "bg-orange-500/30"
-  },
-  pharmacy: { 
-    label: "Pharmacy",
-    icon: Building2, 
-    color: "text-emerald-500", 
-    bg: "bg-emerald-500/20",
-    activeBg: "bg-emerald-500/30"
-  },
+// Resource type colors + labels (design.md §2.1). Order matches the legend.
+const resourceTypeConfig: Record<ResourceType, { label: string; dot: string }> = {
+  medical: { label: "Hospital", dot: "bg-resource-medical" },
+  fire: { label: "Fire", dot: "bg-resource-fire" },
+  police: { label: "Police", dot: "bg-resource-police" },
+  pharmacy: { label: "Pharmacy", dot: "bg-resource-pharmacy" },
 }
+const RESOURCE_TYPES = Object.keys(resourceTypeConfig) as ResourceType[]
 
 // Demo mode: Hardcoded caller location at San Jose State University
 const DEMO_CALLER_LOCATION = {
@@ -172,7 +135,12 @@ const DEMO_CALLER_LOCATION = {
   name: "San Jose State University"
 }
 
-export function NearbyResources() {
+interface NearbyResourcesProps {
+  /** Current call priority (P1–P4); tints the incident pin on the map. */
+  priority?: string | null
+}
+
+export function NearbyResources({ priority = null }: NearbyResourcesProps) {
   // For demo: Start with SJSU location already set
   const [userLocation, setUserLocation] = useState<{lat: number, lng: number} | null>(DEMO_CALLER_LOCATION)
   const [locationError, setLocationError] = useState<string | null>(null)
@@ -195,12 +163,12 @@ export function NearbyResources() {
 
   const handleLocationToggle = (enabled: boolean) => {
     setLocationEnabled(enabled)
-    
+
     if (enabled) {
       if ("geolocation" in navigator) {
         setIsLocating(true)
         setLocationError(null)
-        
+
         navigator.geolocation.getCurrentPosition(
           (position) => {
             setUserLocation({
@@ -212,8 +180,8 @@ export function NearbyResources() {
           },
           (error) => {
             setLocationError(
-              error.code === 1 
-                ? "Location permission denied" 
+              error.code === 1
+                ? "Location permission denied"
                 : "Unable to retrieve your location"
             )
             setIsLocating(false)
@@ -240,50 +208,54 @@ export function NearbyResources() {
     })
   }
 
-  const filteredResources = selectedTypes.size > 0
-    ? mockResources.filter(r => selectedTypes.has(r.type))
-    : mockResources
+  const isTypeVisible = (type: ResourceType) => selectedTypes.size === 0 || selectedTypes.has(type)
 
-  const resourceCounts = {
-    medical: mockResources.filter(r => r.type === "medical").length,
-    police: mockResources.filter(r => r.type === "police").length,
-    fire: mockResources.filter(r => r.type === "fire").length,
-    pharmacy: mockResources.filter(r => r.type === "pharmacy").length,
-  }
+  const filteredResources = mockResources
+    .filter((r) => isTypeVisible(r.type))
+    .sort((a, b) => a.distance - b.distance)
+
+  const resourceCounts = Object.fromEntries(
+    RESOURCE_TYPES.map((type) => [type, mockResources.filter((r) => r.type === type).length])
+  ) as Record<ResourceType, number>
+
+  const locationStatus = isLocating
+    ? { text: "Detecting location…", tone: "text-muted-foreground" }
+    : locationEnabled && userLocation
+      ? { text: `Caller location: ${DEMO_CALLER_LOCATION.name}`, tone: "text-muted-foreground" }
+      : locationError
+        ? { text: locationError, tone: "text-warning" }
+        : { text: "Location sharing off", tone: "text-muted-foreground" }
 
   return (
-    <div className="rounded-xl border border-border bg-card overflow-hidden">
-      {/* Header */}
-      <div className="p-4 flex items-center justify-between border-b border-border">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
-            <MapPin className="w-5 h-5 text-emerald-500" />
-          </div>
-          <div>
-            <h3 className="font-semibold text-foreground">Nearby Resources</h3>
-            <p className="text-sm text-muted-foreground">Emergency services in your area</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
+    <Card className="h-full overflow-hidden">
+      <CardHeader>
+        <CardTitle>Nearby resources</CardTitle>
+        <CardAction className="gap-1">
+          {selectedTypes.size > 0 && (
+            <span className="font-mono text-xs text-muted-foreground">
+              {selectedTypes.size} filter{selectedTypes.size > 1 ? "s" : ""}
+            </span>
+          )}
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={() => setIsExpanded(!isExpanded)}
+            aria-label={isExpanded ? "Collapse map" : "Expand map"}
+            aria-pressed={isExpanded}
+          >
+            {isExpanded ? <Minimize2 /> : <Maximize2 />}
+          </Button>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="sm" className="gap-2">
-                <Filter className="w-4 h-4" />
-                Filter
-                {selectedTypes.size > 0 && (
-                  <span className="text-xs px-1.5 rounded-full bg-secondary text-foreground">
-                    {selectedTypes.size}
-                  </span>
-                )}
-                <ChevronDown className="w-3 h-3" />
+              <Button variant="ghost" size="icon-sm" aria-label="Map options">
+                <MoreHorizontal />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuContent align="end" className="w-56">
               <DropdownMenuLabel>Resource types</DropdownMenuLabel>
               <DropdownMenuSeparator />
-              {(Object.keys(resourceTypeConfig) as ResourceType[]).map((type) => {
+              {RESOURCE_TYPES.map((type) => {
                 const config = resourceTypeConfig[type]
-                const Icon = config.icon
                 return (
                   <DropdownMenuCheckboxItem
                     key={type}
@@ -291,175 +263,151 @@ export function NearbyResources() {
                     onCheckedChange={() => toggleType(type)}
                     onSelect={(e) => e.preventDefault()}
                   >
-                    <Icon className={`w-4 h-4 ${config.color}`} />
+                    <span className={cn("size-2 rounded-full", config.dot)} aria-hidden />
                     <span className="flex-1">{config.label}</span>
-                    <span className="text-xs text-muted-foreground">{resourceCounts[type]}</span>
+                    <span className="font-mono text-xs text-muted-foreground">{resourceCounts[type]}</span>
                   </DropdownMenuCheckboxItem>
                 )
               })}
-              <DropdownMenuSeparator />
               <DropdownMenuItem
                 disabled={selectedTypes.size === 0}
                 onSelect={() => setSelectedTypes(new Set())}
               >
                 Show all
               </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuCheckboxItem
+                checked={locationEnabled}
+                disabled={isLocating}
+                onCheckedChange={(checked) => handleLocationToggle(checked === true)}
+                onSelect={(e) => e.preventDefault()}
+              >
+                Share caller location
+              </DropdownMenuCheckboxItem>
             </DropdownMenuContent>
           </DropdownMenu>
-          <Button variant="ghost" size="icon" className="w-8 h-8" aria-label="Center map on my location">
-            <Navigation className="w-4 h-4" />
-          </Button>
-        </div>
-      </div>
+        </CardAction>
+      </CardHeader>
 
-      <div className="p-4 space-y-4">
-        {/* Location Toggle */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            {isLocating ? (
-              <Loader2 className="w-4 h-4 text-emerald-500 animate-spin" />
-            ) : locationEnabled && userLocation ? (
-              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
-            ) : locationError ? (
-              <MapPinOff className="w-4 h-4 text-amber-500" />
-            ) : (
-              <span className="w-2 h-2 rounded-full bg-muted-foreground/50" />
+      <div className="grid flex-1 md:grid-cols-[3fr_2fr]">
+        {/* Map + legend */}
+        <div className="flex flex-col border-b border-border md:border-r md:border-b-0">
+          <div
+            className={cn(
+              // isolate: keep Leaflet's z-index 400+ panes under the sticky header and menus
+              "relative isolate transition-[height] duration-300 motion-reduce:transition-none",
+              isExpanded ? "h-[480px]" : "h-[280px]"
             )}
-            <span className={`text-sm ${
-              isLocating 
-                ? 'text-emerald-500' 
-                : locationEnabled && userLocation 
-                  ? 'text-emerald-500' 
-                  : locationError 
-                    ? 'text-amber-500' 
-                    : 'text-muted-foreground'
-            }`}>
-              {isLocating 
-                ? 'Detecting location...' 
-                : locationEnabled && userLocation 
-                  ? `Caller location: ${DEMO_CALLER_LOCATION.name}` 
-                  : locationError 
-                    ? locationError 
-                    : 'Share your location for nearby results'}
-            </span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-muted-foreground">Share location</span>
-            <Switch
-              checked={locationEnabled}
-              onCheckedChange={handleLocationToggle}
-              disabled={isLocating}
-              aria-label="Toggle location sharing"
+          >
+            <MapComponent
+              resources={filteredResources}
+              userLocation={userLocation}
+              priority={priority}
+              className="h-full"
             />
           </div>
-        </div>
-
-        {/* Filter Badges */}
-        <div className="flex gap-2 flex-wrap">
-          {(Object.keys(resourceCounts) as ResourceType[]).map((type) => {
-            const config = resourceTypeConfig[type]
-            const Icon = config.icon
-            const isActive = selectedTypes.has(type)
-            return (
-              <button
-                key={type}
-                aria-label={`Filter ${config.label}`}
-                aria-pressed={isActive}
-                onClick={() => toggleType(type)}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-200
-                  ${isActive 
-                    ? `${config.activeBg} ${config.color} ring-1 ring-current` 
-                    : 'bg-secondary text-muted-foreground hover:bg-secondary/80'
-                  }`}
-              >
-                <Icon className="w-3.5 h-3.5" />
-                {resourceCounts[type]}
-              </button>
-            )
-          })}
-        </div>
-
-        {/* Map */}
-        <div className="relative">
-          <MapComponent 
-            resources={filteredResources} 
-            userLocation={userLocation}
-            className={`transition-all duration-300 ${isExpanded ? "h-96" : "h-48"}`}
-          />
-          <Button 
-            variant="secondary" 
-            size="sm" 
-            className="absolute bottom-3 right-3 shadow-lg"
-            onClick={() => setIsExpanded(!isExpanded)}
+          <div
+            className="flex flex-wrap items-center gap-1 border-t border-border px-3 py-2"
+            role="group"
+            aria-label="Filter resource types on map"
           >
-            {isExpanded ? 'Collapse' : 'Expand'}
-          </Button>
+            {RESOURCE_TYPES.map((type) => {
+              const config = resourceTypeConfig[type]
+              const active = selectedTypes.has(type)
+              const visible = isTypeVisible(type)
+              return (
+                <button
+                  key={type}
+                  type="button"
+                  aria-pressed={active}
+                  onClick={() => toggleType(type)}
+                  className={cn(
+                    "flex h-7 items-center gap-1.5 rounded-lg border px-2 text-xs font-medium transition-colors",
+                    active
+                      ? "border-primary/50 bg-primary-soft text-foreground"
+                      : "border-transparent hover:bg-card-raised",
+                    visible ? "text-foreground" : "text-muted-foreground"
+                  )}
+                >
+                  <span className={cn("size-2 rounded-full", config.dot, !visible && "opacity-40")} aria-hidden />
+                  {config.label}
+                </button>
+              )
+            })}
+          </div>
         </div>
-      </div>
 
-      {/* Resource List */}
-      <div className="divide-y divide-border max-h-[400px] overflow-y-auto">
-        {filteredResources.map((resource) => {
-          const config = resourceTypeConfig[resource.type]
-          const Icon = config.icon
-          return (
-            <div 
-              key={resource.id} 
-              className="p-4 flex items-center justify-between hover:bg-secondary/30 transition-colors"
-            >
-              <div className="flex items-center gap-3">
-                <div className={`w-10 h-10 rounded-lg ${config.bg} flex items-center justify-center flex-shrink-0`}>
-                  <Icon className={`w-5 h-5 ${config.color}`} />
-                </div>
-                <div className="min-w-0">
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <span className="font-medium text-foreground">{resource.name}</span>
-                    {resource.is24Hours && (
-                      <span className="text-xs px-1.5 py-0.5 rounded border border-emerald-500/50 text-emerald-500 font-medium">
-                        24h
-                      </span>
-                    )}
-                  </div>
-                  <p className="text-sm text-muted-foreground truncate">{resource.address}</p>
-                  <div className="flex items-center gap-3 text-xs text-muted-foreground mt-1">
-                    <span className="flex items-center gap-1">
-                      <Navigation className="w-3 h-3" />
-                      {resource.distance} mi
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <Car className="w-3 h-3" />
-                      {resource.travelTime} min
-                    </span>
+        {/* Resource list */}
+        <div className="flex min-w-0 flex-col px-4 py-3">
+          <ul className="divide-y divide-border">
+            {filteredResources.map((resource) => {
+              const config = resourceTypeConfig[resource.type]
+              return (
+                <li key={resource.id} className="group relative flex min-h-12 items-center gap-3 py-2">
+                  <span className={cn("size-2 shrink-0 rounded-full", config.dot)} aria-hidden />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm text-foreground" title={resource.name}>
+                      {resource.name}
+                      <span className="sr-only"> ({config.label})</span>
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">{resource.address}</p>
                   </div>
-                </div>
-              </div>
-              <div className="flex items-center gap-1 flex-shrink-0">
-                {resource.phone && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="w-9 h-9"
-                    aria-label={`Call ${resource.name}`}
-                    onClick={() => setPendingLink({ kind: "call", name: resource.name, target: resource.phone! })}
-                  >
-                    <Phone className="w-4 h-4" />
-                  </Button>
-                )}
-                {resource.website && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="w-9 h-9"
-                    aria-label={`Visit ${resource.name} website`}
-                    onClick={() => setPendingLink({ kind: "website", name: resource.name, target: resource.website! })}
+                  {/* Actions overlay the distance on hover/focus; always inline on touch screens. */}
+                  {(resource.phone || resource.website) && (
+                  <div
+                    className={cn(
+                      "absolute inset-y-0 right-0 flex items-center gap-0.5 bg-card pl-2 opacity-0 transition-opacity",
+                      "group-hover:opacity-100 focus-within:opacity-100",
+                      "[@media(hover:none)]:static [@media(hover:none)]:order-last [@media(hover:none)]:opacity-100"
+                    )}
                   >
-                    <ExternalLink className="w-4 h-4" />
-                  </Button>
-                )}
-              </div>
-            </div>
-          )
-        })}
+                    {resource.phone && (
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        aria-label={`Call ${resource.name}`}
+                        onClick={() => setPendingLink({ kind: "call", name: resource.name, target: resource.phone! })}
+                      >
+                        <Phone />
+                      </Button>
+                    )}
+                    {resource.website && (
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        aria-label={`Visit ${resource.name} website`}
+                        onClick={() => setPendingLink({ kind: "website", name: resource.name, target: resource.website! })}
+                      >
+                        <ExternalLink />
+                      </Button>
+                    )}
+                  </div>
+                  )}
+                  <span className="shrink-0 whitespace-nowrap font-mono text-xs text-muted-foreground">
+                    {resource.distance} mi · {resource.travelTime} min
+                  </span>
+                </li>
+              )
+            })}
+            {filteredResources.length === 0 && (
+              <li className="py-6 text-center text-sm text-muted-foreground">No resources match these filters</li>
+            )}
+          </ul>
+
+          <p className={cn("mt-auto flex items-center gap-2 pt-3 text-xs", locationStatus.tone)}>
+            {isLocating ? (
+              <Loader2 className="size-3 animate-spin" aria-hidden />
+            ) : locationError ? (
+              <MapPinOff className="size-3" aria-hidden />
+            ) : (
+              <span
+                className={cn("size-1.5 rounded-full", locationEnabled && userLocation ? "bg-success" : "bg-subtle-foreground")}
+                aria-hidden
+              />
+            )}
+            {locationStatus.text}
+          </p>
+        </div>
       </div>
 
       <AlertDialog open={pendingLink !== null} onOpenChange={(open) => !open && setPendingLink(null)}>
@@ -480,6 +428,6 @@ export function NearbyResources() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </Card>
   )
 }
diff --git a/frontend/src/components/resource-map.tsx b/frontend/src/components/resource-map.tsx
index 1019e07..00a2ea3 100644
--- a/frontend/src/components/resource-map.tsx
+++ b/frontend/src/components/resource-map.tsx
@@ -1,48 +1,63 @@
 "use client"
 
-import { useEffect } from "react"
+import { useEffect, useMemo } from "react"
 import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet"
 import L from "leaflet"
 import "leaflet/dist/leaflet.css"
 
-// Fix for default marker icons in webpack/Next.js builds
-const createIcon = (color: string) => {
-  return L.divIcon({
-    className: "custom-marker",
+// Lucide glyph paths (Cross, Flame, Shield, Pill) inlined so markers can be
+// plain divIcon HTML without rendering React to a string.
+const GLYPHS: Record<string, string> = {
+  medical:
+    '<path d="M11 2a2 2 0 0 0-2 2v5H4a2 2 0 0 0-2 2v2c0 1.1.9 2 2 2h5v5c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2v-5h5a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2h-2z"/>',
+  fire: '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
+  police:
+    '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
+  pharmacy:
+    '<path d="m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z"/><path d="m8.5 8.5 7 7"/>',
+}
+
+const RESOURCE_TYPES = new Set(["medical", "fire", "police", "pharmacy"])
+
+// 20px filled circle in the resource-type color, 2px card stroke, white 11px glyph (design.md §5).
+const resourceIconCache = new Map<string, L.DivIcon>()
+function getResourceIcon(type: string) {
+  const cached = resourceIconCache.get(type)
+  if (cached) return cached
+  const color = RESOURCE_TYPES.has(type) ? `var(--resource-${type})` : "var(--muted-foreground)"
+  const icon = L.divIcon({
+    className: "fw-marker",
     html: `
-      <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M16 0C7.164 0 0 7.164 0 16c0 12 16 24 16 24s16-12 16-24c0-8.836-7.164-16-16-16z" fill="${color}"/>
-        <circle cx="16" cy="16" r="6" fill="white"/>
-      </svg>
+      <span class="fw-marker__dot" style="background:${color}">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${GLYPHS[type] ?? ""}</svg>
+      </span>
     `,
-    iconSize: [32, 40],
-    iconAnchor: [16, 40],
-    popupAnchor: [0, -40]
+    iconSize: [20, 20],
+    iconAnchor: [10, 10],
+    popupAnchor: [0, -12],
   })
+  resourceIconCache.set(type, icon)
+  return icon
 }
 
-const userIcon = L.divIcon({
-  className: "user-marker",
-  html: `
-    <div style="
-      width: 16px;
-      height: 16px;
-      background: #10b981;
-      border: 3px solid white;
-      border-radius: 50%;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-    "></div>
-  `,
-  iconSize: [16, 16],
-  iconAnchor: [8, 8],
-  popupAnchor: [0, -8]
-})
-
-const resourceColors: Record<string, string> = {
-  medical: "#f43f5e",
-  police: "#0ea5e9",
-  fire: "#f97316",
-  pharmacy: "#10b981"
+// Incident / caller: dot + two concentric rings in the current call's priority color
+// (foreground white before triage). Outer ring pulses; reduce-motion rules live in globals.css.
+function createIncidentIcon(priority: string | null | undefined) {
+  const key = priority?.toLowerCase()
+  const color = key && ["p1", "p2", "p3", "p4"].includes(key) ? `var(--${key})` : "var(--foreground)"
+  return L.divIcon({
+    className: "fw-marker",
+    html: `
+      <span class="fw-incident" style="--fw-incident:${color}">
+        <span class="fw-incident__ring fw-incident__ring--outer animate-wave-ring"></span>
+        <span class="fw-incident__ring"></span>
+        <span class="fw-incident__dot"></span>
+      </span>
+    `,
+    iconSize: [44, 44],
+    iconAnchor: [22, 22],
+    popupAnchor: [0, -14],
+  })
 }
 
 type Resource = {
@@ -51,11 +66,14 @@ type Resource = {
   type: string
   lat: number
   lng: number
+  address?: string
 }
 
 type Props = {
   resources: Resource[]
   userLocation: { lat: number; lng: number } | null
+  /** Current call priority (P1–P4) used to tint the incident pin. */
+  priority?: string | null
   className?: string
 }
 
@@ -67,42 +85,54 @@ function MapUpdater({ center }: { center: [number, number] }) {
   return null
 }
 
-export default function ResourceMap({ resources, userLocation, className = "" }: Props) {
-  const defaultCenter: [number, number] = userLocation 
-    ? [userLocation.lat, userLocation.lng] 
-    : [37.3352, -121.8811] // San Jose State University (demo default)
+/** Leaflet needs a nudge when its container height changes (expand/collapse). */
+function SizeWatcher() {
+  const map = useMap()
+  useEffect(() => {
+    const container = map.getContainer()
+    const observer = new ResizeObserver(() => map.invalidateSize())
+    observer.observe(container)
+    return () => observer.disconnect()
+  }, [map])
+  return null
+}
+
+export default function ResourceMap({ resources, userLocation, priority, className = "" }: Props) {
+  const lat = userLocation?.lat ?? 37.3352 // San Jose State University (demo default)
+  const lng = userLocation?.lng ?? -121.8811
+  const center = useMemo<[number, number]>(() => [lat, lng], [lat, lng])
+  const incidentIcon = useMemo(() => createIncidentIcon(priority), [priority])
 
   return (
-    <MapContainer
-      center={defaultCenter}
-      zoom={14}
-      className={`w-full rounded-lg ${className}`}
-      style={{ minHeight: "200px" }}
-    >
+    // fw-map: OSM tiles are darkened with a CSS filter in globals.css (design.md §5, option 2).
+    <MapContainer center={center} zoom={14} className={`fw-map w-full ${className}`}>
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <MapUpdater center={defaultCenter} />
-      
+      <MapUpdater center={center} />
+      <SizeWatcher />
+
       {userLocation && (
-        <Marker position={[userLocation.lat, userLocation.lng]} icon={userIcon}>
+        <Marker position={[userLocation.lat, userLocation.lng]} icon={incidentIcon} zIndexOffset={1000}>
           <Popup>
-            <span className="font-medium">Caller&apos;s Location</span>
+            <span className="font-semibold">Caller location</span>
             <br />
-            <span className="text-xs text-gray-600">San Jose State University</span>
+            <span className="text-xs text-muted-foreground">San Jose State University</span>
           </Popup>
         </Marker>
       )}
-      
+
       {resources.map((resource) => (
-        <Marker 
-          key={resource.id} 
-          position={[resource.lat, resource.lng]}
-          icon={createIcon(resourceColors[resource.type] || "#6b7280")}
-        >
+        <Marker key={resource.id} position={[resource.lat, resource.lng]} icon={getResourceIcon(resource.type)}>
           <Popup>
-            <span className="font-medium">{resource.name}</span>
+            <span className="font-semibold">{resource.name}</span>
+            {resource.address && (
+              <>
+                <br />
+                <span className="text-xs text-muted-foreground">{resource.address}</span>
+              </>
+            )}
           </Popup>
         </Marker>
       ))}
diff --git a/frontend/src/components/settings/settings-controls.tsx b/frontend/src/components/settings/settings-controls.tsx
new file mode 100644
index 0000000..7966b52
--- /dev/null
+++ b/frontend/src/components/settings/settings-controls.tsx
@@ -0,0 +1,252 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Switch } from "@/components/ui/switch"
+import { cn } from "@/lib/utils"
+
+/* Local building blocks for the settings page. The design calls for shadcn
+   `slider` / `select` (design.md §7), which are not installed yet, so the
+   slider and select here are native elements styled to §3. */
+
+export function SettingsSection({
+  id,
+  title,
+  children,
+}: {
+  id: string
+  title: string
+  children: React.ReactNode
+}) {
+  const headingId = `${id}-heading`
+  return (
+    <section id={id} aria-labelledby={headingId} className="scroll-mt-36 md:scroll-mt-24">
+      <Card className="p-5">
+        <h2 id={headingId} className="text-[15px] font-semibold leading-none">
+          {title}
+        </h2>
+        <div className="mt-2">{children}</div>
+      </Card>
+    </section>
+  )
+}
+
+/** One row: label + optional description left, control right. Rows are divided by a 1px border. */
+export function SettingRow({
+  label,
+  description,
+  htmlFor,
+  labelId,
+  descriptionId,
+  children,
+}: {
+  label: string
+  description?: string
+  htmlFor?: string
+  labelId?: string
+  descriptionId?: string
+  children: React.ReactNode
+}) {
+  const LabelTag = htmlFor ? "label" : "span"
+  return (
+    <div className="flex items-center justify-between gap-6 border-b border-border py-3.5 last:border-b-0 last:pb-1">
+      <div className="min-w-0">
+        <LabelTag id={labelId} htmlFor={htmlFor} className="block text-sm font-medium text-foreground">
+          {label}
+        </LabelTag>
+        {description && (
+          <p id={descriptionId} className="mt-0.5 text-[13px] leading-snug text-muted-foreground">
+            {description}
+          </p>
+        )}
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  )
+}
+
+/** Switch row. `locked` renders a checked, non-interactive switch at 55% opacity (Human approval). */
+export function SwitchRow({
+  id,
+  label,
+  description,
+  checked,
+  onCheckedChange,
+  locked = false,
+}: {
+  id: string
+  label: string
+  description?: string
+  checked: boolean
+  onCheckedChange?: (checked: boolean) => void
+  locked?: boolean
+}) {
+  const descriptionId = description ? `${id}-description` : undefined
+  return (
+    <SettingRow label={label} description={description} htmlFor={id} descriptionId={descriptionId}>
+      <Switch
+        id={id}
+        checked={locked ? true : checked}
+        onCheckedChange={locked ? undefined : onCheckedChange}
+        disabled={locked}
+        aria-describedby={descriptionId}
+        className={cn(
+          // Off track is --border-strong per design.md §3 (shared Switch defaults to --input).
+          "data-[state=unchecked]:bg-border-strong",
+          "disabled:cursor-not-allowed disabled:opacity-55"
+        )}
+      />
+    </SettingRow>
+  )
+}
+
+export function NativeSelect({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"select">) {
+  return (
+    <div className={cn("relative", className)}>
+      <select
+        className={cn(
+          "h-9 w-full cursor-pointer appearance-none rounded-[8px] border border-border bg-input pl-3 pr-9 text-sm text-foreground transition-colors",
+          "hover:border-border-strong focus-visible:border-primary/60"
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown
+        className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+        aria-hidden
+      />
+    </div>
+  )
+}
+
+/** Native range input: --primary filled track, light thumb (design.md §3). */
+export function RangeSlider({
+  value,
+  min,
+  max,
+  step = 1,
+  onValueChange,
+  className,
+  ...props
+}: Omit<React.ComponentProps<"input">, "type" | "value" | "onChange" | "min" | "max" | "step"> & {
+  value: number
+  min: number
+  max: number
+  step?: number
+  onValueChange: (value: number) => void
+}) {
+  const pct = ((value - min) / (max - min)) * 100
+  return (
+    <input
+      type="range"
+      value={value}
+      min={min}
+      max={max}
+      step={step}
+      onChange={(e) => onValueChange(Number(e.target.value))}
+      style={{
+        background: `linear-gradient(to right, var(--primary) ${pct}%, var(--border-strong) ${pct}%)`,
+      }}
+      className={cn(
+        "h-1.5 w-full cursor-pointer appearance-none rounded-full",
+        "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-card [&::-webkit-slider-thumb]:bg-foreground",
+        "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-card [&::-moz-range-thumb]:bg-foreground",
+        "[&::-moz-range-track]:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const chipBase =
+  "inline-flex h-9 items-center gap-2.5 rounded-[8px] border px-3 text-left text-sm transition-colors"
+const chipOn = "border-primary/50 bg-primary-soft text-foreground"
+const chipOff = "border-border bg-transparent text-muted-foreground hover:border-border-strong hover:text-foreground"
+
+/** Toggle chip (Settings → Map types). Dot + label, selected = --primary-soft fill + --primary @ 50% border. */
+export function FilterChip({
+  selected,
+  dotClassName,
+  children,
+  className,
+  ...props
+}: Omit<React.ComponentProps<"button">, "type"> & {
+  selected: boolean
+  dotClassName: string
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      className={cn(chipBase, selected ? chipOn : chipOff, className)}
+      {...props}
+    >
+      <span className={cn("size-2 shrink-0 rounded-full", dotClassName)} aria-hidden />
+      {children}
+    </button>
+  )
+}
+
+/** Single-choice chip group with roving focus and arrow-key navigation (Settings → Accent color). */
+export function SwatchGroup<T extends string>({
+  label,
+  labelId,
+  options,
+  value,
+  onValueChange,
+}: {
+  label: string
+  labelId: string
+  options: { value: T; label: string; color: string }[]
+  value: T
+  onValueChange: (value: T) => void
+}) {
+  const refs = React.useRef<(HTMLButtonElement | null)[]>([])
+
+  const onKeyDown = (e: React.KeyboardEvent, index: number) => {
+    const delta = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0
+    if (!delta) return
+    e.preventDefault()
+    const next = (index + delta + options.length) % options.length
+    onValueChange(options[next].value)
+    refs.current[next]?.focus()
+  }
+
+  return (
+    <div>
+      <span id={labelId} className="block text-sm font-medium text-foreground">
+        {label}
+      </span>
+      <div role="radiogroup" aria-labelledby={labelId} className="mt-2.5 grid grid-cols-2 gap-2 sm:grid-cols-3">
+        {options.map((option, i) => {
+          const selected = option.value === value
+          return (
+            <button
+              key={option.value}
+              ref={(el) => {
+                refs.current[i] = el
+              }}
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => onValueChange(option.value)}
+              onKeyDown={(e) => onKeyDown(e, i)}
+              className={cn(chipBase, selected ? chipOn : chipOff)}
+            >
+              <span className="size-3.5 shrink-0 rounded-full" style={{ backgroundColor: option.color }} aria-hidden />
+              {option.label}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/settings/settings-form.tsx b/frontend/src/components/settings/settings-form.tsx
new file mode 100644
index 0000000..80266e7
--- /dev/null
+++ b/frontend/src/components/settings/settings-form.tsx
@@ -0,0 +1,286 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import {
+  FilterChip,
+  NativeSelect,
+  RangeSlider,
+  SettingRow,
+  SettingsSection,
+  SwatchGroup,
+  SwitchRow,
+} from "./settings-controls"
+import { SettingsNav, type SettingsNavItem } from "./settings-nav"
+
+/* Visual-only settings form. All values live in local state and reset on reload.
+   TODO: replace with `useSettings()` from `src/lib/settings.tsx` (SettingsProvider,
+   localStorage `firstwave.settings`, backend URL validation) per design.md §4.3. */
+
+const DEFAULT_BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000"
+
+type ResourceType = "medical" | "fire" | "police" | "pharmacy"
+type Accent = "wave" | "indigo" | "amber" | "mint"
+
+type SettingsState = {
+  ttsEnabled: boolean
+  liveTranscription: boolean
+  recognitionLang: string
+  suggestFollowUps: boolean
+  showAgentPipeline: boolean
+  searchRadiusMi: number
+  mapTypes: Record<ResourceType, boolean>
+  accent: Accent
+  reduceMotion: boolean
+  backendUrl: string
+}
+
+const DEFAULTS: SettingsState = {
+  ttsEnabled: true,
+  liveTranscription: true,
+  recognitionLang: "en-US",
+  suggestFollowUps: true,
+  showAgentPipeline: true,
+  searchRadiusMi: 5,
+  mapTypes: { medical: true, fire: true, police: true, pharmacy: true },
+  accent: "wave",
+  reduceMotion: false,
+  backendUrl: DEFAULT_BACKEND_URL,
+}
+
+const NAV_ITEMS: SettingsNavItem[] = [
+  { id: "voice", label: "Voice" },
+  { id: "dispatch", label: "Dispatch" },
+  { id: "map", label: "Map" },
+  { id: "appearance", label: "Appearance" },
+  { id: "connection", label: "Connection" },
+]
+
+const LANGUAGES = [
+  { value: "en-US", label: "English (US)" },
+  { value: "en-GB", label: "English (UK)" },
+  { value: "es-US", label: "Spanish (US)" },
+  { value: "es-ES", label: "Spanish (Spain)" },
+  { value: "fr-FR", label: "French" },
+  { value: "de-DE", label: "German" },
+  { value: "zh-CN", label: "Chinese (Mandarin)" },
+  { value: "vi-VN", label: "Vietnamese" },
+]
+
+const MAP_TYPES: { value: ResourceType; label: string; dot: string }[] = [
+  { value: "medical", label: "Hospitals", dot: "bg-resource-medical" },
+  { value: "fire", label: "Fire stations", dot: "bg-resource-fire" },
+  { value: "police", label: "Police", dot: "bg-resource-police" },
+  { value: "pharmacy", label: "Pharmacies", dot: "bg-resource-pharmacy" },
+]
+
+// Fixed swatch colors: `--primary` itself changes with the accent, so it can't be used here.
+const ACCENTS: { value: Accent; label: string; color: string }[] = [
+  { value: "wave", label: "Wave", color: "#38d4f2" },
+  { value: "indigo", label: "Indigo", color: "#8b8cf8" },
+  { value: "amber", label: "Amber", color: "var(--warning)" },
+  { value: "mint", label: "Mint", color: "var(--success)" },
+]
+
+type HealthStatus = "checking" | "online" | "offline"
+
+/** One-off read-only /health check of the build-time backend, so the pill isn't fake. */
+function useBackendHealth(url: string): HealthStatus {
+  const [status, setStatus] = useState<HealthStatus>("checking")
+  useEffect(() => {
+    const controller = new AbortController()
+    fetch(`${url}/health`, { cache: "no-store", signal: controller.signal })
+      .then((res) => setStatus(res.ok ? "online" : "offline"))
+      .catch(() => {
+        if (!controller.signal.aborted) setStatus("offline")
+      })
+    return () => controller.abort()
+  }, [url])
+  return status
+}
+
+const HEALTH_LABEL: Record<HealthStatus, string> = { checking: "Checking", online: "Online", offline: "Offline" }
+
+export function SettingsForm() {
+  const [s, setS] = useState<SettingsState>(DEFAULTS)
+  const set = <K extends keyof SettingsState>(key: K, value: SettingsState[K]) =>
+    setS((prev) => ({ ...prev, [key]: value }))
+
+  const health = useBackendHealth(DEFAULT_BACKEND_URL)
+
+  return (
+    <div className="mt-6 grid gap-6 md:mt-8 md:grid-cols-[160px_minmax(0,1fr)] md:gap-6">
+      <SettingsNav items={NAV_ITEMS} />
+
+      <div className="flex min-w-0 flex-col gap-4">
+        <SettingsSection id="voice" title="Voice">
+          <SwitchRow
+            id="tts-enabled"
+            label="Spoken replies"
+            description="FirstWave reads its questions to the caller aloud."
+            checked={s.ttsEnabled}
+            onCheckedChange={(v) => set("ttsEnabled", v)}
+          />
+          <SwitchRow
+            id="live-transcription"
+            label="Live transcription"
+            description="Transcribe the caller as they speak."
+            checked={s.liveTranscription}
+            onCheckedChange={(v) => set("liveTranscription", v)}
+          />
+          <SettingRow label="Recognition language" htmlFor="recognition-lang">
+            <NativeSelect
+              id="recognition-lang"
+              className="w-44"
+              value={s.recognitionLang}
+              onChange={(e) => set("recognitionLang", e.target.value)}
+            >
+              {LANGUAGES.map((lang) => (
+                <option key={lang.value} value={lang.value}>
+                  {lang.label}
+                </option>
+              ))}
+            </NativeSelect>
+          </SettingRow>
+        </SettingsSection>
+
+        <SettingsSection id="dispatch" title="Dispatch">
+          <SwitchRow
+            id="human-approval"
+            label="Human approval required"
+            description="Always on. A dispatcher approves every recommendation."
+            checked
+            locked
+          />
+          <SwitchRow
+            id="suggest-followups"
+            label="Suggest follow-up questions"
+            description="Show the next question for the caller."
+            checked={s.suggestFollowUps}
+            onCheckedChange={(v) => set("suggestFollowUps", v)}
+          />
+          <SwitchRow
+            id="show-agent-pipeline"
+            label="Show agent pipeline"
+            description="Display each agent's progress during a call."
+            checked={s.showAgentPipeline}
+            onCheckedChange={(v) => set("showAgentPipeline", v)}
+          />
+        </SettingsSection>
+
+        <SettingsSection id="map" title="Map">
+          <div className="py-3.5">
+            <div className="flex items-center justify-between">
+              <label htmlFor="search-radius" className="text-sm font-medium text-foreground">
+                Search radius
+              </label>
+              <output htmlFor="search-radius" className="font-mono text-[13px] text-primary">
+                {s.searchRadiusMi} mi
+              </output>
+            </div>
+            <RangeSlider
+              id="search-radius"
+              className="mt-3"
+              min={1}
+              max={25}
+              value={s.searchRadiusMi}
+              onValueChange={(v) => set("searchRadiusMi", v)}
+              aria-valuetext={`${s.searchRadiusMi} ${s.searchRadiusMi === 1 ? "mile" : "miles"}`}
+            />
+          </div>
+          <div className="pb-1 pt-2">
+            <span id="map-types-label" className="block text-sm font-medium text-foreground">
+              Show on map
+            </span>
+            <div role="group" aria-labelledby="map-types-label" className="mt-2.5 grid grid-cols-2 gap-2 sm:grid-cols-3">
+              {MAP_TYPES.map((type) => (
+                <FilterChip
+                  key={type.value}
+                  selected={s.mapTypes[type.value]}
+                  dotClassName={type.dot}
+                  onClick={() => set("mapTypes", { ...s.mapTypes, [type.value]: !s.mapTypes[type.value] })}
+                >
+                  {type.label}
+                </FilterChip>
+              ))}
+            </div>
+          </div>
+        </SettingsSection>
+
+        <SettingsSection id="appearance" title="Appearance">
+          <div className="border-b border-border py-3.5">
+            <SwatchGroup
+              label="Accent color"
+              labelId="accent-label"
+              options={ACCENTS}
+              value={s.accent}
+              onValueChange={(v) => set("accent", v)}
+            />
+          </div>
+          <SwitchRow
+            id="reduce-motion"
+            label="Reduce motion"
+            description="Turn off pulsing indicators."
+            checked={s.reduceMotion}
+            onCheckedChange={(v) => set("reduceMotion", v)}
+          />
+        </SettingsSection>
+
+        <SettingsSection id="connection" title="Connection">
+          <div className="pb-1 pt-3.5">
+            <label htmlFor="backend-url" className="block text-sm font-medium text-foreground">
+              Backend URL
+            </label>
+            <div className="mt-2.5 flex items-center gap-2">
+              <Input
+                id="backend-url"
+                type="url"
+                inputMode="url"
+                spellCheck={false}
+                autoComplete="off"
+                className="font-mono text-[13px]"
+                value={s.backendUrl}
+                onChange={(e) => set("backendUrl", e.target.value)}
+              />
+              <div
+                role="status"
+                className="flex h-10 shrink-0 items-center gap-2 rounded-full bg-card-raised px-4 text-[13px] font-semibold"
+              >
+                <span
+                  className={cn(
+                    "size-2 rounded-full",
+                    health === "online" && "bg-success animate-pulse-dot",
+                    health === "offline" && "bg-danger",
+                    health === "checking" && "bg-muted-foreground"
+                  )}
+                  aria-hidden
+                />
+                <span
+                  className={cn(
+                    health === "online" && "text-foreground",
+                    health === "offline" && "text-danger",
+                    health === "checking" && "text-muted-foreground"
+                  )}
+                >
+                  <span className="sr-only">Backend status: </span>
+                  {HEALTH_LABEL[health]}
+                </span>
+              </div>
+            </div>
+          </div>
+        </SettingsSection>
+
+        <div className="flex justify-end">
+          <button
+            type="button"
+            onClick={() => setS(DEFAULTS)}
+            className="rounded-tile px-2 py-1 text-sm text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline"
+          >
+            Reset to defaults
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/settings/settings-header.tsx b/frontend/src/components/settings/settings-header.tsx
new file mode 100644
index 0000000..58eb5db
--- /dev/null
+++ b/frontend/src/components/settings/settings-header.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link"
+import { Radio } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+/** Settings page header: logo left, "Back to console" pill right (design.md §4.3). */
+export function SettingsHeader() {
+  return (
+    <header className="sticky top-0 z-40 border-b border-border bg-card">
+      <div className="mx-auto flex h-16 max-w-[960px] items-center justify-between px-4 sm:px-6">
+        <Link href="/" className="flex items-center gap-2.5 rounded-tile" aria-label="FirstWave home">
+          <Radio className="size-7 text-primary" strokeWidth={2.25} aria-hidden />
+          <span className="font-display text-xl font-bold tracking-tight text-foreground">FirstWave</span>
+        </Link>
+
+        <Button asChild variant="outline" className="h-10 px-4">
+          <Link href="/console">
+            Back to console
+          </Link>
+        </Button>
+      </div>
+    </header>
+  )
+}
diff --git a/frontend/src/components/settings/settings-nav.tsx b/frontend/src/components/settings/settings-nav.tsx
new file mode 100644
index 0000000..cbbb83d
--- /dev/null
+++ b/frontend/src/components/settings/settings-nav.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { cn } from "@/lib/utils"
+
+export type SettingsNavItem = { id: string; label: string }
+
+/**
+ * Sticky section nav that scroll-spies the cards on the right (design.md §4.3).
+ * Desktop: vertical list. Mobile: horizontal scrolling tab row under the header.
+ */
+export function SettingsNav({ items }: { items: SettingsNavItem[] }) {
+  const [active, setActive] = useState(items[0]?.id)
+
+  useEffect(() => {
+    const sections = items
+      .map((item) => document.getElementById(item.id))
+      .filter((el): el is HTMLElement => el !== null)
+    if (!sections.length) return
+
+    const visible = new Map<string, boolean>()
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) visible.set(entry.target.id, entry.isIntersecting)
+        // Topmost section inside the activation band wins.
+        const first = items.find((item) => visible.get(item.id))
+        if (first) setActive(first.id)
+      },
+      { rootMargin: "-25% 0px -60% 0px" }
+    )
+    sections.forEach((section) => observer.observe(section))
+
+    // At the very bottom the last (short) section may never reach the band.
+    const onScroll = () => {
+      const atBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2
+      if (atBottom) setActive(items[items.length - 1].id)
+    }
+    window.addEventListener("scroll", onScroll, { passive: true })
+
+    return () => {
+      observer.disconnect()
+      window.removeEventListener("scroll", onScroll)
+    }
+  }, [items])
+
+  return (
+    <nav
+      aria-label="Settings sections"
+      className={cn(
+        "sticky top-16 z-30 -mx-4 border-b border-border bg-background px-4 py-2 sm:-mx-6 sm:px-6",
+        "md:top-24 md:mx-0 md:self-start md:border-b-0 md:bg-transparent md:p-0"
+      )}
+    >
+      <ul className="flex gap-1 overflow-x-auto md:flex-col md:overflow-visible">
+        {items.map((item) => {
+          const isActive = item.id === active
+          return (
+            <li key={item.id} className="shrink-0">
+              <a
+                href={`#${item.id}`}
+                onClick={() => setActive(item.id)}
+                aria-current={isActive ? "location" : undefined}
+                className={cn(
+                  "block rounded-tile px-3 py-2 text-sm transition-colors",
+                  isActive
+                    ? "bg-card-raised font-medium text-foreground"
+                    : "text-muted-foreground hover:bg-card-raised/60 hover:text-foreground"
+                )}
+              >
+                {item.label}
+              </a>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 37a7d4b..9504793 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -5,30 +5,31 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-[background-color,border-color,color,filter] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        default: "bg-primary text-primary-foreground hover:brightness-106",
+        destructive: "bg-danger text-primary-foreground hover:brightness-106",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "border border-border-strong bg-transparent text-foreground hover:bg-card-raised",
+        secondary: "bg-card-raised text-foreground hover:bg-border-strong",
+        ghost: "text-muted-foreground hover:bg-card-raised hover:text-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        default: "h-11 px-5 has-[>svg]:px-4",
+        sm: "h-8 gap-1.5 px-3 text-[13px] has-[>svg]:px-2.5",
+        lg: "h-12 px-6 text-[15px] has-[>svg]:px-5",
+        icon: "size-10 rounded-tile",
+        "icon-sm": "size-8 rounded-tile",
+        "icon-lg": "size-11 rounded-tile",
       },
     },
+    compoundVariants: [
+      // Icon buttons sit on a raised square (mic, settings) unless they're primary (send).
+      { variant: "outline", size: ["icon", "icon-sm", "icon-lg"], class: "bg-card-raised border-border" },
+    ],
     defaultVariants: {
       variant: "default",
       size: "default",
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..091c0c5
--- /dev/null
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,69 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn("flex flex-col rounded-card border border-border bg-card text-card-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+/** 52px header row: title left, status (CardAction) right, divider below. */
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex min-h-13 items-center justify-between gap-3 border-b border-border px-5", className)}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+  return (
+    <h3
+      data-slot="card-title"
+      className={cn("font-display text-[15px] font-semibold leading-none text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return <p data-slot="card-description" className={cn("text-sm text-muted-foreground", className)} {...props} />
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("flex shrink-0 items-center gap-2 text-[13px] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("flex-1 p-5", className)} {...props} />
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center gap-3 border-t border-border p-5", className)}
+      {...props}
+    />
+  )
+}
+
+/** Nested tile inside a card (summary fields, unit counts). */
+function CardTile({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-tile" className={cn("rounded-tile bg-card-raised p-3", className)} {...props} />
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, CardTile }
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..e968592
--- /dev/null
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "flex h-10 w-full min-w-0 rounded-tile border border-border bg-input px-3.5 text-sm text-foreground transition-colors",
+        "placeholder:text-subtle-foreground selection:bg-primary-soft",
+        "hover:border-border-strong focus-visible:border-primary/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:border-danger aria-invalid:focus-visible:outline-danger",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }