diff --git a/dashboard/app/dashboard/clients/page.tsx b/dashboard/app/dashboard/clients/page.tsx
index afe34a8..162e120 100644
--- a/dashboard/app/dashboard/clients/page.tsx
+++ b/dashboard/app/dashboard/clients/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { toast } from "sonner";
 import { Plus, ExternalLink, X } from "lucide-react";
-import DemoBadge from "@/components/DemoBadge";
 import { api } from "@/lib/api";
 import { stubClients } from "@/lib/stubs";
 import type { Client } from "@/lib/stubs";
@@ -81,21 +81,21 @@ export default function ClientsPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-foreground">Clients</h1>
+          <h1 className="text-xl font-semibold text-foreground">Clients</h1>
           <p className="mt-1 text-sm text-muted-foreground">Manage your client roster</p>
         </div>
         <button
           onClick={() => setShowModal(true)}
-          className="inline-flex items-center gap-1 rounded bg-accent px-3 py-1.5 text-sm font-medium text-accent-foreground hover:bg-accent/90"
+          className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90 transition-colors"
         >
           <Plus className="h-4 w-4" /> Add Client
         </button>
       </div>
 
-      <div className="overflow-x-auto rounded-lg border border-border bg-background">
+      <div className="overflow-x-auto rounded-xl ring-1 ring-foreground/10 bg-background">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-border bg-muted text-left text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <tr className="border-b border-border bg-muted text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               <th className="px-4 py-3">Business</th>
               <th className="px-4 py-3">Type</th>
               <th className="px-4 py-3">Trial</th>
diff --git a/dashboard/app/dashboard/growth/page.tsx b/dashboard/app/dashboard/growth/page.tsx
new file mode 100644
index 0000000..8fb2ae2
--- /dev/null
+++ b/dashboard/app/dashboard/growth/page.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  Mail,
+  Search,
+  MapPin,
+  TrendingUp,
+  DollarSign,
+  BookOpen,
+  Clock,
+  ChevronRight,
+} from "lucide-react";
+import DualRankingTable from "@/components/DualRankingTable";
+import { stubDualRankings, stubCompetitorChanges } from "@/lib/stubs";
+import type { StructuredDiff } from "@/lib/stubs";
+import { dualRankingStats } from "@/lib/stats";
+
+const threatColors: Record<string, string> = {
+  low: "bg-chart-3/10 text-chart-3",
+  medium: "bg-muted text-chart-2",
+  high: "bg-destructive/10 text-destructive",
+};
+
+const diffTypeMeta: Record<
+  StructuredDiff["type"],
+  { icon: typeof DollarSign; chipBg: string; pillBg: string }
+> = {
+  price: {
+    icon: DollarSign,
+    chipBg: "bg-destructive/10 text-destructive",
+    pillBg: "bg-destructive/10 text-destructive",
+  },
+  menu: {
+    icon: BookOpen,
+    chipBg: "bg-chart-4/10 text-chart-4",
+    pillBg: "bg-chart-4/10 text-chart-4",
+  },
+  hours: {
+    icon: Clock,
+    chipBg: "bg-chart-3/10 text-chart-3",
+    pillBg: "bg-chart-3/10 text-chart-3",
+  },
+};
+
+const legendItems: {
+  type: StructuredDiff["type"];
+  label: string;
+  pillClass: string;
+}[] = [
+  { type: "price", label: "Price change", pillClass: "bg-destructive/10 text-destructive" },
+  { type: "menu", label: "Menu / service change", pillClass: "bg-chart-4/10 text-chart-4" },
+  { type: "hours", label: "Hours change", pillClass: "bg-chart-3/10 text-chart-3" },
+];
+
+export default function GrowthPage() {
+  const [tab, setTab] = useState<"seo" | "competitors">("seo");
+
+  const rankingStats = dualRankingStats(stubDualRankings);
+  const totalChanges = stubCompetitorChanges.reduce(
+    (s, c) => s + c.changes.length,
+    0,
+  );
+
+  const seoStats = [
+    {
+      label: "Avg organic rank",
+      value: rankingStats.avgOrganic.toFixed(1),
+      icon: Search,
+      chipClass: "bg-muted text-muted-foreground",
+    },
+    {
+      label: "Avg Local Pack rank",
+      value: rankingStats.avgLocalPack.toFixed(1),
+      icon: MapPin,
+      chipClass: "bg-chart-4/10 text-chart-4",
+    },
+    {
+      label: "Keywords improving",
+      value: rankingStats.improving.toString(),
+      icon: TrendingUp,
+      chipClass: "bg-chart-3/10 text-chart-3",
+    },
+    {
+      label: "In top 3 (Maps)",
+      value: rankingStats.topThreeMaps.toString(),
+      icon: MapPin,
+      chipClass: "bg-accent/10 text-accent",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Page header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">Growth</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            SEO rankings and competitor intelligence
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => toast.info("Data refresh coming soon")}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-muted transition-colors"
+          >
+            <Mail className="h-4 w-4" /> Email report
+          </button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-4 border-b border-border">
+        <button
+          onClick={() => setTab("seo")}
+          className={`pb-2 text-sm font-medium transition-colors ${
+            tab === "seo"
+              ? "border-b-2 border-accent text-accent"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          SEO Rankings
+        </button>
+        <button
+          onClick={() => setTab("competitors")}
+          className={`pb-2 text-sm font-medium transition-colors ${
+            tab === "competitors"
+              ? "border-b-2 border-accent text-accent"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          Competitor Watch
+        </button>
+      </div>
+
+      {tab === "seo" ? (
+        <>
+          {/* Stat cards */}
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {seoStats.map((stat) => {
+              const Icon = stat.icon;
+              return (
+                <div
+                  key={stat.label}
+                  className="rounded-xl ring-1 ring-foreground/10 bg-background p-4"
+                >
+                  <div className="flex items-center gap-3">
+                    <span
+                      className={`flex h-9 w-9 flex-none items-center justify-center rounded-lg ${stat.chipClass}`}
+                    >
+                      <Icon className="h-4 w-4" />
+                    </span>
+                    <div>
+                      <p className="text-2xl font-semibold tabular-nums text-foreground">
+                        {stat.value}
+                      </p>
+                      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                        {stat.label}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Rankings table */}
+          <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-foreground">
+                Keyword Rankings
+              </h2>
+              <span className="text-xs text-muted-foreground">
+                Updated 21 Jul 2026, 6:00 AM
+              </span>
+            </div>
+            <DualRankingTable data={stubDualRankings} />
+          </div>
+        </>
+      ) : (
+        <>
+          {/* Legend */}
+          <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-4">
+            <div className="flex flex-wrap items-center gap-4">
+              {legendItems.map((item) => {
+                const Icon = diffTypeMeta[item.type].icon;
+                return (
+                  <span
+                    key={item.type}
+                    className="inline-flex items-center gap-1.5 text-xs text-muted-foreground"
+                  >
+                    <Icon className="h-3.5 w-3.5" />
+                    <span
+                      className={`rounded px-1.5 py-0.5 text-xs font-medium ${item.pillClass}`}
+                    >
+                      {item.label}
+                    </span>
+                  </span>
+                );
+              })}
+              <span className="ml-auto text-xs text-muted-foreground">
+                {totalChanges} structured changes across{" "}
+                {stubCompetitorChanges.length} competitors this week
+              </span>
+            </div>
+          </div>
+
+          {/* Competitor cards */}
+          <div className="grid gap-4 lg:grid-cols-2">
+            {stubCompetitorChanges.map((competitor) => (
+              <div
+                key={competitor.domain}
+                className="overflow-hidden rounded-xl ring-1 ring-foreground/10 bg-background"
+              >
+                <div className="border-b border-border p-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-sm font-semibold text-foreground">
+                        {competitor.name}
+                      </h3>
+                      <p className="text-xs text-muted-foreground">
+                        {competitor.domain}
+                      </p>
+                    </div>
+                    <span
+                      className={`rounded-full px-2 py-0.5 text-xs font-medium ${threatColors[competitor.threat]}`}
+                    >
+                      {competitor.threat.toUpperCase()}
+                    </span>
+                  </div>
+                </div>
+                <div>
+                  {competitor.changes.map((change, idx) => {
+                    const meta = diffTypeMeta[change.type];
+                    const Icon = meta.icon;
+                    return (
+                      <div
+                        key={idx}
+                        className={`flex items-start justify-between gap-2 p-4 ${
+                          idx < competitor.changes.length - 1
+                            ? "border-b border-border"
+                            : ""
+                        }`}
+                      >
+                        <div className="flex items-start gap-2">
+                          <span
+                            className={`flex h-8 w-8 flex-none items-center justify-center rounded-lg ${meta.chipBg}`}
+                          >
+                            <Icon className="h-3.5 w-3.5" />
+                          </span>
+                          <div>
+                            <p className="text-sm font-medium text-foreground">
+                              {change.description}
+                            </p>
+                            <div className="mt-1.5 flex flex-wrap items-center gap-2">
+                              <span className="rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground line-through opacity-60">
+                                {change.oldValue}
+                              </span>
+                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                              <span
+                                className={`rounded px-1.5 py-0.5 text-xs font-medium ${meta.pillBg}`}
+                              >
+                                {change.newValue}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <span className="whitespace-nowrap text-xs text-muted-foreground">
+                          {change.timestamp}
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/dashboard/app/dashboard/layout.tsx b/dashboard/app/dashboard/layout.tsx
index 5ea4b2f..6ad687a 100644
--- a/dashboard/app/dashboard/layout.tsx
+++ b/dashboard/app/dashboard/layout.tsx
@@ -1,20 +1,9 @@
-import Sidebar from "@/components/Sidebar";
-import TrialBanner from "@/components/TrialBanner";
+import { DashboardShell } from "@/components/DashboardShell";
 
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <div className="flex min-h-screen">
-      <Sidebar />
-      <div className="flex flex-1 flex-col">
-        <TrialBanner />
-        <main id="main-content" className="flex-1 mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-          {children}
-        </main>
-      </div>
-    </div>
-  );
+  return <DashboardShell>{children}</DashboardShell>;
 }
diff --git a/dashboard/app/dashboard/locations/page.tsx b/dashboard/app/dashboard/locations/page.tsx
index 2497a2f..9d01fd5 100644
--- a/dashboard/app/dashboard/locations/page.tsx
+++ b/dashboard/app/dashboard/locations/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { toast } from "sonner";
 import {
   Building2,
   Store,
@@ -13,7 +14,6 @@ import {
   Stethoscope,
   Globe,
 } from "lucide-react";
-import DemoBadge from "@/components/DemoBadge";
 import Toggle from "@/components/Toggle";
 import { stubLocations } from "@/lib/stubs";
 import type { Location } from "@/lib/stubs";
@@ -61,14 +61,30 @@ export default function LocationsPage() {
   };
 
   const statCards = [
-    { label: "Locations", value: stats.total.toString(), icon: Building2 },
+    {
+      label: "Locations",
+      value: stats.total.toString(),
+      icon: Building2,
+      chipClass: "bg-accent/10 text-accent",
+    },
     {
       label: "Menus synced",
       value: `${stats.synced}/${stats.total}`,
       icon: Store,
+      chipClass: "bg-chart-3/10 text-chart-3",
+    },
+    {
+      label: "Reviews this week",
+      value: "23",
+      icon: Star,
+      chipClass: "bg-muted text-chart-2",
+    },
+    {
+      label: "Avg local rank",
+      value: "4.2",
+      icon: MapPin,
+      chipClass: "bg-chart-4/10 text-chart-4",
     },
-    { label: "Reviews this week", value: "23", icon: Star },
-    { label: "Avg local rank", value: "4.2", icon: MapPin },
   ];
 
   const columns = [selected.targets.slice(0, 2), selected.targets.slice(2, 4)];
@@ -77,13 +93,12 @@ export default function LocationsPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-foreground">Locations</h1>
+          <h1 className="text-xl font-semibold text-foreground">Locations</h1>
           <p className="mt-1 text-sm text-muted-foreground">
             Manage venues and per-location menu-sync targets
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <DemoBadge />
           <div className="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground">
             <Building2 className="h-4 w-4" />
             <span>Bondi Dental</span>
@@ -92,27 +107,35 @@ export default function LocationsPage() {
             </span>
             <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
           </div>
-          <button className="inline-flex items-center gap-1 rounded bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90">
+          <button
+            onClick={() => toast.info("Add location coming soon")}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90 transition-colors"
+          >
             <Plus className="h-4 w-4" /> Add location
           </button>
         </div>
       </div>
 
+      {/* Stat cards */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {statCards.map((stat) => {
           const Icon = stat.icon;
           return (
             <div
               key={stat.label}
-              className="rounded-lg border border-border bg-background p-4"
+              className="rounded-xl ring-1 ring-foreground/10 bg-background p-4"
             >
               <div className="flex items-center gap-3">
-                <Icon className="h-5 w-5 text-foreground" />
+                <span
+                  className={`flex h-9 w-9 flex-none items-center justify-center rounded-lg ${stat.chipClass}`}
+                >
+                  <Icon className="h-4 w-4" />
+                </span>
                 <div>
-                  <p className="text-2xl font-bold text-foreground">
+                  <p className="text-2xl font-semibold tabular-nums text-foreground">
                     {stat.value}
                   </p>
-                  <p className="text-xs font-medium text-muted-foreground">
+                  <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                     {stat.label}
                   </p>
                 </div>
@@ -122,10 +145,11 @@ export default function LocationsPage() {
         })}
       </div>
 
-      <div className="overflow-x-auto rounded-lg border border-border bg-background">
+      {/* Locations table */}
+      <div className="overflow-x-auto rounded-xl ring-1 ring-foreground/10 bg-background">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-border bg-muted text-left text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <tr className="border-b border-border bg-muted text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               <th className="px-4 py-3">Location</th>
               <th className="px-4 py-3">Menu-sync target</th>
               <th className="px-4 py-3">Status</th>
@@ -174,7 +198,8 @@ export default function LocationsPage() {
         </table>
       </div>
 
-      <div className="rounded-lg border border-border bg-background p-6">
+      {/* Menu-sync targets for selected location */}
+      <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
         <div className="mb-4 flex items-center justify-between">
           <h2 className="text-lg font-semibold text-foreground">
             Menu-sync targets — {venueName(selected)}
@@ -189,7 +214,7 @@ export default function LocationsPage() {
           {columns.map((col, colIdx) => (
             <div
               key={colIdx}
-              className="rounded-lg border border-border"
+              className="rounded-lg ring-1 ring-foreground/10"
             >
               {col.map((target, idx) => {
                 const Icon = targetIcons[target.key] ?? Store;
@@ -227,7 +252,10 @@ export default function LocationsPage() {
           ))}
         </div>
         <div className="mt-4">
-          <button className="inline-flex items-center gap-1 rounded bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90">
+          <button
+            onClick={() => toast.info("Sync targets saved (demo mode)")}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90 transition-colors"
+          >
             <Check className="h-4 w-4" /> Save sync targets
           </button>
         </div>
diff --git a/dashboard/app/dashboard/page.tsx b/dashboard/app/dashboard/page.tsx
index 78b185f..b57c3ed 100644
--- a/dashboard/app/dashboard/page.tsx
+++ b/dashboard/app/dashboard/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { toast } from "sonner";
 import { Clock, CheckCircle2, BarChart3 } from "lucide-react";
 import ReviewCard from "@/components/ReviewCard";
 import { api } from "@/lib/api";
@@ -24,19 +25,19 @@ export default function DashboardPage() {
       label: "Pending",
       value: drafts.length.toString(),
       icon: Clock,
-      color: "text-accent bg-accent/10",
+      chipClass: "bg-accent/10 text-accent",
     },
     {
       label: "Posted today",
       value: "2",
       icon: CheckCircle2,
-      color: "text-chart-3 bg-chart-3/10",
+      chipClass: "bg-chart-3/10 text-chart-3",
     },
     {
       label: "Avg SLA",
       value: "3.2h",
       icon: BarChart3,
-      color: "text-chart-2 bg-muted",
+      chipClass: "bg-muted text-chart-2",
     },
   ];
 
@@ -51,7 +52,7 @@ export default function DashboardPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-2xl font-bold text-foreground">
+        <h1 className="text-xl font-semibold text-foreground">
           Review Approval Queue
         </h1>
         <p className="mt-1 text-sm text-muted-foreground">
@@ -59,16 +60,28 @@ export default function DashboardPage() {
         </p>
       </div>
 
+      {/* Stat cards */}
       <div className="grid gap-4 sm:grid-cols-3">
         {stats.map((stat) => {
           const Icon = stat.icon;
           return (
-            <div key={stat.label} className={`rounded-lg border border-border p-4 ${stat.color}`}>
+            <div
+              key={stat.label}
+              className="rounded-xl ring-1 ring-foreground/10 bg-background p-4"
+            >
               <div className="flex items-center gap-3">
-                <Icon className="h-5 w-5" />
+                <span
+                  className={`flex h-9 w-9 flex-none items-center justify-center rounded-lg ${stat.chipClass}`}
+                >
+                  <Icon className="h-4 w-4" />
+                </span>
                 <div>
-                  <p className="text-2xl font-bold">{stat.value}</p>
-                  <p className="text-xs font-medium">{stat.label}</p>
+                  <p className="text-2xl font-semibold tabular-nums text-foreground">
+                    {stat.value}
+                  </p>
+                  <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                    {stat.label}
+                  </p>
                 </div>
               </div>
             </div>
@@ -77,7 +90,7 @@ export default function DashboardPage() {
       </div>
 
       {drafts.length === 0 ? (
-        <div className="rounded-lg border border-border bg-background p-12 text-center">
+        <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-12 text-center">
           <CheckCircle2 className="mx-auto h-12 w-12 text-chart-3" />
           <h3 className="mt-4 text-lg font-semibold text-foreground">
             All caught up!
@@ -85,6 +98,9 @@ export default function DashboardPage() {
           <p className="mt-1 text-sm text-muted-foreground">
             Check back later for new reviews needing approval.
           </p>
+          <p className="mt-2 text-xs text-muted-foreground">
+            New reviews appear here automatically when customers leave feedback.
+          </p>
         </div>
       ) : (
         <div className="space-y-3">
diff --git a/dashboard/app/dashboard/rebook/page.tsx b/dashboard/app/dashboard/rebook/page.tsx
index f406f8c..1a8bfe5 100644
--- a/dashboard/app/dashboard/rebook/page.tsx
+++ b/dashboard/app/dashboard/rebook/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { toast } from "sonner";
 import {
   Users,
   Clock,
@@ -10,7 +11,6 @@ import {
   Building2,
   ChevronDown,
 } from "lucide-react";
-import DemoBadge from "@/components/DemoBadge";
 import Toggle from "@/components/Toggle";
 import { stubPractitioners } from "@/lib/stubs";
 import type { Practitioner, LapsedPatient } from "@/lib/stubs";
@@ -80,28 +80,26 @@ export default function RebookPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-foreground">Rebook</h1>
+          <h1 className="text-xl font-semibold text-foreground">Rebook</h1>
           <p className="mt-1 text-sm text-muted-foreground">
             Lapsed-patient follow-up by practitioner
           </p>
         </div>
-        <div className="flex items-center gap-2">
-          <DemoBadge />
-          <div className="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground">
-            <Building2 className="h-4 w-4" />
-            <span>Bondi Dental Clinic</span>
-            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
-          </div>
+        <div className="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground">
+          <Building2 className="h-4 w-4" />
+          <span>Bondi Dental Clinic</span>
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
         </div>
       </div>
 
+      {/* Stat cards */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {statCards.map((stat, i) => {
           const Icon = stat.icon;
           return (
             <div
               key={stat.label}
-              className="rounded-lg border border-border bg-background p-4"
+              className="rounded-xl ring-1 ring-foreground/10 bg-background p-4"
             >
               <div className="flex items-center gap-3">
                 <span
@@ -110,10 +108,10 @@ export default function RebookPage() {
                   <Icon className="h-4 w-4" />
                 </span>
                 <div>
-                  <p className="text-2xl font-bold text-foreground">
+                  <p className="text-2xl font-semibold tabular-nums text-foreground">
                     {stat.value}
                   </p>
-                  <p className="text-xs font-medium text-muted-foreground">
+                  <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                     {stat.label}
                   </p>
                 </div>
@@ -123,10 +121,11 @@ export default function RebookPage() {
         })}
       </div>
 
-      <div className="overflow-x-auto rounded-lg border border-border bg-background">
+      {/* Practitioners table */}
+      <div className="overflow-x-auto rounded-xl ring-1 ring-foreground/10 bg-background">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-border bg-muted text-left text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <tr className="border-b border-border bg-muted text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               <th className="px-4 py-3">Practitioner</th>
               <th className="px-4 py-3">Lapsed patients</th>
               <th className="px-4 py-3">Follow-ups sent</th>
@@ -232,7 +231,7 @@ function PractitionerDetail({
   ];
 
   return (
-    <div className="rounded-lg border border-border bg-background p-6">
+    <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
       <div className="mb-4 flex items-center justify-between">
         <div>
           <h2 className="text-lg font-semibold text-foreground">
@@ -257,22 +256,22 @@ function PractitionerDetail({
         {detailStats.map((stat) => (
           <div
             key={stat.label}
-            className="rounded-lg border border-border p-4"
+            className="rounded-lg ring-1 ring-foreground/10 p-4"
           >
-            <p className={`text-2xl font-bold ${stat.className}`}>
+            <p className={`text-2xl font-semibold tabular-nums ${stat.className}`}>
               {stat.value}
             </p>
-            <p className="text-xs font-medium text-muted-foreground">
+            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
               {stat.label}
             </p>
           </div>
         ))}
       </div>
 
-      <div className="overflow-x-auto rounded-lg border border-border">
+      <div className="overflow-x-auto rounded-lg ring-1 ring-foreground/10">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-border text-left text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            <tr className="border-b border-border text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
               <th className="px-4 py-3">Patient</th>
               <th className="px-4 py-3">Last visit</th>
               <th className="px-4 py-3">Channel</th>
diff --git a/dashboard/app/dashboard/reports/page.tsx b/dashboard/app/dashboard/reports/page.tsx
index 18c5063..07ac29d 100644
--- a/dashboard/app/dashboard/reports/page.tsx
+++ b/dashboard/app/dashboard/reports/page.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import {
-  RefreshCw,
   Mail,
   Search,
   MapPin,
@@ -13,7 +12,7 @@ import {
   ChevronRight,
 } from "lucide-react";
 import DualRankingTable from "@/components/DualRankingTable";
-import DemoBadge from "@/components/DemoBadge";
+import { toast } from "sonner";
 import { stubDualRankings, stubCompetitorChanges } from "@/lib/stubs";
 import type { StructuredDiff } from "@/lib/stubs";
 import { dualRankingStats } from "@/lib/stats";
@@ -101,13 +100,12 @@ export default function ReportsPage() {
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <button className="inline-flex items-center gap-1 rounded border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-muted">
-            <RefreshCw className="h-4 w-4" /> Refresh data
-          </button>
-          <button className="inline-flex items-center gap-1 rounded border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-muted">
+          <button
+            onClick={() => toast.info("Data refresh coming soon")}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground hover:bg-muted transition-colors"
+          >
             <Mail className="h-4 w-4" /> Email report
           </button>
-          <DemoBadge />
         </div>
       </div>
 
diff --git a/dashboard/app/dashboard/settings/page.tsx b/dashboard/app/dashboard/settings/page.tsx
index f035e06..35de710 100644
--- a/dashboard/app/dashboard/settings/page.tsx
+++ b/dashboard/app/dashboard/settings/page.tsx
@@ -1,8 +1,36 @@
 "use client";
 
-import { useState } from "react";
-import { Save, X } from "lucide-react";
-import DemoBadge from "@/components/DemoBadge";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+  CreditCard,
+  Gauge,
+  Settings,
+  Save,
+  X,
+  ExternalLink,
+  Download,
+  Check,
+  ShieldCheck,
+  FileText,
+  Search,
+  MessageSquare,
+  ChevronRight,
+  TrendingUp,
+} from "lucide-react";
+import Toggle from "@/components/Toggle";
+import { api } from "@/lib/api";
+import { stubBillingUsage } from "@/lib/stubs";
+import type { BillingUsage, Invoice, UsageBar } from "@/lib/stubs";
+import {
+  usagePercent,
+  usageStatus,
+  usageRemaining,
+  STATUS_STYLES,
+} from "@/lib/usage";
+import type { LucideIcon } from "lucide-react";
+
+type SettingsTab = "preferences" | "billing" | "usage";
 
 const JOBS = [
   "Review Guard",
@@ -12,7 +40,25 @@ const JOBS = [
   "Menu Sync",
 ];
 
-export default function SettingsPage() {
+const JOB_ICONS: Record<string, LucideIcon> = {
+  "Review drafts": ShieldCheck,
+  "SEO reports": FileText,
+  "Competitor briefs": Search,
+  "Follow-up messages": MessageSquare,
+  "Menu syncs": Settings,
+};
+
+const INVOICE_STATUS_STYLES: Record<Invoice["status"], string> = {
+  paid: "bg-chart-3/10 text-chart-3",
+  open: "bg-muted text-chart-2",
+  void: "bg-destructive/10 text-destructive",
+};
+
+/* ------------------------------------------------------------------ */
+/* Tab: Preferences                                                     */
+/* ------------------------------------------------------------------ */
+
+function PreferencesTab() {
   const [jobToggles, setJobToggles] = useState<Record<string, boolean>>({
     "Review Guard": true,
     "Rank Report": true,
@@ -42,31 +88,22 @@ export default function SettingsPage() {
     if (kw && !keywords.includes(kw)) setKeywords([...keywords, kw]);
     setKeywordInput("");
   };
-
   const removeKeyword = (kw: string) =>
     setKeywords(keywords.filter((k) => k !== kw));
-
   const addUrl = () => {
     const url = urlInput.trim();
     if (url && !competitorUrls.includes(url))
       setCompetitorUrls([...competitorUrls, url]);
     setUrlInput("");
   };
-
   const removeUrl = (url: string) =>
     setCompetitorUrls(competitorUrls.filter((u) => u !== url));
 
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">Settings</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Configure your automation preferences
-        </p>
-      </div>
-
       <div className="grid gap-6 md:grid-cols-2">
-        <div className="rounded-lg border border-border bg-background p-6">
+        {/* Active Jobs */}
+        <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
           <h2 className="text-lg font-semibold text-foreground">Active Jobs</h2>
           <p className="mb-4 text-sm text-muted-foreground">
             Toggle automations on/off
@@ -80,29 +117,18 @@ export default function SettingsPage() {
                 <span className="text-sm font-medium text-muted-foreground">
                   {job}
                 </span>
-                <button
-                  onClick={() =>
-                    setJobToggles({ ...jobToggles, [job]: !jobToggles[job] })
-                  }
-                  className={`relative inline-flex h-5 w-9 rounded-full transition-colors ${
-                    jobToggles[job] ? "bg-accent" : "bg-border"
-                  }`}
-                >
-                  <span
-                    className={`inline-block h-4 w-4 transform rounded-full bg-background shadow transition-transform ${
-                      jobToggles[job]
-                        ? "translate-x-4"
-                        : "translate-x-0.5"
-                    }`}
-                    style={{ marginTop: "2px" }}
-                  />
-                </button>
+                <Toggle
+                  checked={jobToggles[job]}
+                  onChange={(v) => setJobToggles({ ...jobToggles, [job]: v })}
+                  aria-label={`Toggle ${job}`}
+                />
               </label>
             ))}
           </div>
         </div>
 
-        <div className="rounded-lg border border-border bg-background p-6">
+        {/* Voice Sample */}
+        <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
           <h2 className="text-lg font-semibold text-foreground">
             Voice Sample
           </h2>
@@ -110,14 +136,15 @@ export default function SettingsPage() {
             Used for AI-generated phone scripts
           </p>
           <textarea
-            className="w-full rounded border border-border bg-background p-3 text-sm"
+            className="w-full rounded-lg border border-border bg-background p-3 text-sm"
             rows={5}
             value={voiceSample}
             onChange={(e) => setVoiceSample(e.target.value)}
           />
         </div>
 
-        <div className="rounded-lg border border-border bg-background p-6">
+        {/* SEO Keywords */}
+        <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
           <h2 className="text-lg font-semibold text-foreground">
             SEO Keywords
           </h2>
@@ -127,7 +154,7 @@ export default function SettingsPage() {
           <div className="mb-3 flex gap-2">
             <input
               type="text"
-              className="flex-1 rounded border border-border bg-background px-3 py-1.5 text-sm"
+              className="flex-1 rounded-lg border border-border bg-background px-3 py-1.5 text-sm"
               placeholder="Add keyword..."
               value={keywordInput}
               onChange={(e) => setKeywordInput(e.target.value)}
@@ -135,7 +162,7 @@ export default function SettingsPage() {
             />
             <button
               onClick={addKeyword}
-              className="rounded bg-muted px-3 py-1.5 text-sm font-medium hover:bg-muted/80"
+              className="rounded-lg bg-muted px-3 py-1.5 text-sm font-medium hover:bg-muted/80"
             >
               Add
             </button>
@@ -158,7 +185,8 @@ export default function SettingsPage() {
           </div>
         </div>
 
-        <div className="rounded-lg border border-border bg-background p-6">
+        {/* Competitor URLs */}
+        <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
           <h2 className="text-lg font-semibold text-foreground">
             Competitor URLs
           </h2>
@@ -168,7 +196,7 @@ export default function SettingsPage() {
           <div className="mb-3 flex gap-2">
             <input
               type="text"
-              className="flex-1 rounded border border-border bg-background px-3 py-1.5 text-sm"
+              className="flex-1 rounded-lg border border-border bg-background px-3 py-1.5 text-sm"
               placeholder="https://..."
               value={urlInput}
               onChange={(e) => setUrlInput(e.target.value)}
@@ -176,7 +204,7 @@ export default function SettingsPage() {
             />
             <button
               onClick={addUrl}
-              className="rounded bg-muted px-3 py-1.5 text-sm font-medium hover:bg-muted/80"
+              className="rounded-lg bg-muted px-3 py-1.5 text-sm font-medium hover:bg-muted/80"
             >
               Add
             </button>
@@ -200,12 +228,384 @@ export default function SettingsPage() {
         </div>
       </div>
 
-      <div className="flex items-center gap-2">
-        <button className="inline-flex items-center gap-1 rounded bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90">
-          <Save className="h-4 w-4" /> Save Settings
-        </button>
-        <DemoBadge />
+      <button
+        onClick={() => toast.info("Settings saved (demo mode)")}
+        className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90 transition-colors"
+      >
+        <Save className="h-4 w-4" /> Save Settings
+      </button>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Tab: Billing                                                         */
+/* ------------------------------------------------------------------ */
+
+function BillingTab({ billing, portalLoading }: { billing: BillingUsage; portalLoading: boolean }) {
+  const { plan, usage, invoices } = billing;
+
+  const openPortal = async () => {
+    try {
+      const res = await api.post<{ url: string }>("/billing/portal", {});
+      if (res?.url) window.location.href = res.url;
+    } catch {
+      toast.info("Stripe portal coming soon (demo mode)");
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-6 md:grid-cols-2">
+        {/* Current plan */}
+        <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
+          <div className="flex items-start justify-between">
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                Current plan
+              </p>
+              <p className="mt-1 text-2xl font-semibold text-foreground">
+                {plan.name}
+              </p>
+              <p className="mt-1 text-sm text-muted-foreground">
+                {plan.price} &middot; renews {plan.renews_at}
+              </p>
+            </div>
+            <span className="inline-flex items-center gap-1 rounded-full bg-chart-3/10 px-2 py-0.5 text-xs font-medium text-chart-3">
+              <Check className="h-3.5 w-3.5" /> Active
+            </span>
+          </div>
+          <div className="mt-5 flex flex-wrap gap-2">
+            <button
+              onClick={openPortal}
+              disabled={portalLoading}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-foreground hover:bg-accent/90 disabled:opacity-60 transition-colors"
+            >
+              <ExternalLink className="h-4 w-4" />
+              {portalLoading ? "Opening…" : "Manage billing"}
+            </button>
+            <button
+              onClick={() => toast.info("Plan changes coming soon")}
+              className="inline-flex items-center gap-1.5 rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-muted transition-colors"
+            >
+              Change plan
+            </button>
+          </div>
+          <p className="mt-3 text-xs text-muted-foreground">
+            Opens the secure Stripe billing portal to update payment, download
+            invoices, or cancel.
+          </p>
+        </div>
+
+        {/* Payment method */}
+        <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
+          <h2 className="mb-4 text-lg font-semibold text-foreground">
+            Payment method
+          </h2>
+          {plan.card ? (
+            <div className="flex items-center justify-between rounded-lg border border-border bg-muted p-4">
+              <div className="flex items-center gap-2">
+                <CreditCard className="h-5 w-5 text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium text-foreground">
+                    {plan.card.brand} •••• {plan.card.last4}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Expires {plan.card.expires}
+                  </p>
+                </div>
+              </div>
+              <span className="inline-flex items-center gap-1 rounded-full bg-chart-3/10 px-2 py-0.5 text-xs font-medium text-chart-3">
+                Valid
+              </span>
+            </div>
+          ) : (
+            <div className="rounded-lg border border-border bg-muted p-4 text-sm text-muted-foreground">
+              No payment method on file.
+            </div>
+          )}
+          <div className="mt-3 flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Billing email</span>
+            <span className="text-sm font-medium text-foreground">
+              {plan.billing_email}
+            </span>
+          </div>
+          <div className="mt-2 flex items-center justify-between">
+            <span className="text-sm text-muted-foreground">Next invoice</span>
+            <span className="text-sm font-medium text-foreground">
+              {plan.next_invoice.amount} on {plan.next_invoice.date}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Plan usage */}
+      <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-6">
+        <h2 className="mb-3 text-lg font-semibold text-foreground">
+          Plan usage this cycle
+        </h2>
+        <div className="divide-y divide-border">
+          {usage.map((bar) => (
+            <BillingUsageRow key={bar.label} bar={bar} />
+          ))}
+        </div>
+      </div>
+
+      {/* Recent invoices */}
+      <div className="overflow-hidden rounded-xl ring-1 ring-foreground/10 bg-background">
+        <div className="border-b border-border p-4">
+          <h2 className="text-lg font-semibold text-foreground">
+            Recent invoices
+          </h2>
+        </div>
+        <table className="w-full border-collapse text-sm">
+          <thead>
+            <tr className="border-b border-border text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              <th className="px-4 py-3 font-medium">Date</th>
+              <th className="px-4 py-3 font-medium">Amount</th>
+              <th className="px-4 py-3 font-medium">Status</th>
+              <th className="px-4 py-3" />
+            </tr>
+          </thead>
+          <tbody>
+            {invoices.length === 0 ? (
+              <tr>
+                <td colSpan={4} className="p-6 text-center text-sm text-muted-foreground">
+                  No invoices yet — your first invoice will appear after your next billing cycle.
+                </td>
+              </tr>
+            ) : (
+              invoices.map((inv) => (
+                <tr
+                  key={inv.id}
+                  className="border-b border-border last:border-0 hover:bg-muted"
+                >
+                  <td className="px-4 py-3 font-medium text-foreground">{inv.date}</td>
+                  <td className="px-4 py-3 text-muted-foreground">{inv.amount}</td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium capitalize ${INVOICE_STATUS_STYLES[inv.status]}`}
+                    >
+                      {inv.status}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      onClick={() => toast.info("PDF download coming soon")}
+                      className="inline-flex items-center gap-1 text-xs font-medium text-accent hover:underline"
+                    >
+                      <Download className="h-3.5 w-3.5" /> PDF
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Tab: Usage                                                           */
+/* ------------------------------------------------------------------ */
+
+function UsageTab({ billing }: { billing: BillingUsage }) {
+  const { plan, usage } = billing;
+
+  return (
+    <div className="space-y-6">
+      {/* Plan card */}
+      <div className="flex flex-wrap items-center justify-between gap-4 rounded-xl ring-1 ring-foreground/10 bg-background p-4">
+        <div className="flex items-center gap-2">
+          <Gauge className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-[0.9375rem] font-semibold text-foreground">
+              {plan.name} plan
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Billing cycle resets {plan.renews_at} &middot; {plan.days_left}{" "}
+              days left
+            </p>
+          </div>
+        </div>
+        <span className="inline-flex items-center gap-1 rounded-full bg-chart-3/10 px-2 py-0.5 text-xs font-medium text-chart-3">
+          Active
+        </span>
+      </div>
+
+      {/* Usage bars */}
+      <div className="rounded-xl ring-1 ring-foreground/10 bg-background">
+        <div className="border-b border-border p-4">
+          <h2 className="text-lg font-semibold text-foreground">This cycle</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Used / cap / remaining per job
+          </p>
+        </div>
+        <div className="divide-y divide-border">
+          {usage.map((bar) => (
+            <UsageDetailRow key={bar.label} bar={bar} />
+          ))}
+        </div>
+      </div>
+
+      {/* Need higher caps */}
+      <div className="rounded-xl ring-1 ring-foreground/10 bg-background p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">
+              Need higher caps?
+            </span>
+          </div>
+          <button
+            onClick={() => toast.info("Plan comparison coming soon")}
+            className="inline-flex items-center gap-1 text-xs font-medium text-accent hover:underline"
+          >
+            Compare plans <ChevronRight className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Main Settings Page                                                    */
+/* ------------------------------------------------------------------ */
+
+export default function SettingsPage() {
+  const [tab, setTab] = useState<SettingsTab>("preferences");
+  const [billing, setBilling] = useState<BillingUsage>(stubBillingUsage);
+  const [loading, setLoading] = useState(true);
+  const [portalLoading, setPortalLoading] = useState(false);
+
+  useEffect(() => {
+    api
+      .get<BillingUsage>("/billing/usage")
+      .then((data) => setBilling(data ?? stubBillingUsage))
+      .catch(() => setBilling(stubBillingUsage))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const tabDefs: { id: SettingsTab; label: string; icon: typeof Settings }[] = [
+    { id: "preferences", label: "Preferences", icon: Settings },
+    { id: "billing", label: "Billing", icon: CreditCard },
+    { id: "usage", label: "Usage & Caps", icon: Gauge },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold text-foreground">Settings</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Manage your preferences, billing, and usage
+        </p>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex gap-4 border-b border-border">
+        {tabDefs.map((t) => {
+          const Icon = t.icon;
+          return (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className={`inline-flex items-center gap-1.5 pb-2 text-sm font-medium transition-colors ${
+                tab === t.id
+                  ? "border-b-2 border-accent text-accent"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Icon className="h-4 w-4" />
+              {t.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-20">
+          <div className="h-6 w-6 animate-spin rounded-full border-2 border-accent border-t-transparent" />
+        </div>
+      ) : (
+        <>
+          {tab === "preferences" && <PreferencesTab />}
+          {tab === "billing" && (
+            <BillingTab billing={billing} portalLoading={portalLoading} />
+          )}
+          {tab === "usage" && <UsageTab billing={billing} />}
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Shared sub-components                                                */
+/* ------------------------------------------------------------------ */
+
+function BillingUsageRow({ bar }: { bar: UsageBar }) {
+  const status = usageStatus(bar);
+  const pct = usagePercent(bar);
+  const styles = STATUS_STYLES[status];
+
+  return (
+    <div className="py-3">
+      <div className="mb-1.5 flex items-center justify-between">
+        <span className="text-sm text-foreground">{bar.label}</span>
+        <span className="font-mono text-xs text-muted-foreground">
+          {bar.used}/{bar.cap}
+        </span>
+      </div>
+      <div className="h-2 w-full overflow-hidden rounded-full bg-input">
+        <div
+          className={`h-full rounded-full ${styles.bar}`}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function UsageDetailRow({ bar }: { bar: UsageBar }) {
+  const status = usageStatus(bar);
+  const pct = usagePercent(bar);
+  const remaining = usageRemaining(bar);
+  const styles = STATUS_STYLES[status];
+  const Icon = JOB_ICONS[bar.label];
+
+  return (
+    <div className="p-4">
+      <div className="mb-2 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+          <span className="text-sm font-medium text-foreground">
+            {bar.label}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span
+            className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${styles.badge}`}
+          >
+            {styles.label}
+          </span>
+          <span className="font-mono text-sm">
+            <strong className="font-semibold text-foreground">{bar.used}</strong>
+            <span className="text-muted-foreground">/{bar.cap}</span>
+          </span>
+        </div>
+      </div>
+      <div className="h-2 w-full overflow-hidden rounded-full bg-input">
+        <div
+          className={`h-full rounded-full ${styles.bar}`}
+          style={{ width: `${pct}%` }}
+        />
       </div>
+      <p className="mt-1.5 text-xs text-muted-foreground">
+        {remaining} of quota remaining this cycle
+      </p>
     </div>
   );
 }
diff --git a/dashboard/components/DashboardShell.tsx b/dashboard/components/DashboardShell.tsx
new file mode 100644
index 0000000..3c2f639
--- /dev/null
+++ b/dashboard/components/DashboardShell.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { Toaster } from "sonner";
+import Sidebar from "@/components/Sidebar";
+import DemoHeader from "@/components/DemoHeader";
+import { useDemoPersona } from "@/hooks/useDemoPersona";
+
+export function DashboardShell({ children }: { children: React.ReactNode }) {
+  const { personaId, persona, setPersonaId } = useDemoPersona();
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar persona={persona} />
+      <div className="flex flex-1 flex-col">
+        <DemoHeader personaId={personaId} onPersonaChange={setPersonaId} />
+        <main
+          id="main-content"
+          className="flex-1 mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
+        >
+          {children}
+        </main>
+      </div>
+      <Toaster position="bottom-right" />
+    </div>
+  );
+}
diff --git a/dashboard/components/DemoHeader.tsx b/dashboard/components/DemoHeader.tsx
new file mode 100644
index 0000000..0a33703
--- /dev/null
+++ b/dashboard/components/DemoHeader.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import PersonaSwitcher from "@/components/PersonaSwitcher";
+import type { PersonaId } from "@/lib/demo-personas";
+
+interface DemoHeaderProps {
+  personaId: PersonaId;
+  onPersonaChange: (id: PersonaId) => void;
+}
+
+/** Single central "Demo" ribbon indicator — replaces scattered DemoBadges. */
+export default function DemoHeader({
+  personaId,
+  onPersonaChange,
+}: DemoHeaderProps) {
+  return (
+    <div className="sticky top-0 z-50 border-b border-border bg-accent/5 px-4 py-2">
+      <div className="mx-auto flex max-w-7xl items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="-rotate-3 select-none rounded bg-accent px-2 py-0.5 text-xs font-bold uppercase tracking-wider text-accent-foreground">
+            Demo
+          </span>
+          <span className="text-xs text-muted-foreground">
+            Preview mode — data is illustrative
+          </span>
+        </div>
+        <PersonaSwitcher
+          currentId={personaId}
+          onChange={onPersonaChange}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/components/PersonaSwitcher.tsx b/dashboard/components/PersonaSwitcher.tsx
new file mode 100644
index 0000000..7e1441c
--- /dev/null
+++ b/dashboard/components/PersonaSwitcher.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { ChevronDown, Users } from "lucide-react";
+import type { PersonaId } from "@/lib/demo-personas";
+import { PERSONA_LIST } from "@/lib/demo-personas";
+
+interface PersonaSwitcherProps {
+  currentId: PersonaId;
+  onChange: (id: PersonaId) => void;
+}
+
+export default function PersonaSwitcher({ currentId, onChange }: PersonaSwitcherProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const current = PERSONA_LIST.find((p) => p.id === currentId)!;
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground hover:bg-muted transition-colors"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        <Users className="h-4 w-4 text-muted-foreground" />
+        <span>{current.name}</span>
+        <span className="hidden sm:inline text-xs text-muted-foreground">
+          · {current.businessName}
+        </span>
+        <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform ${open ? "rotate-180" : ""}`} />
+      </button>
+
+      {open && (
+        <ul
+          role="listbox"
+          className="absolute right-0 z-50 mt-1 w-72 overflow-hidden rounded-lg border border-border bg-background shadow-lg"
+        >
+          <div className="border-b border-border px-3 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Switch demo persona
+          </div>
+          {PERSONA_LIST.map((p) => {
+            const isActive = p.id === currentId;
+            return (
+              <li key={p.id}>
+                <button
+                  role="option"
+                  aria-selected={isActive}
+                  onClick={() => {
+                    onChange(p.id);
+                    setOpen(false);
+                  }}
+                  className={`flex w-full items-center justify-between px-3 py-2.5 text-sm transition-colors hover:bg-muted ${
+                    isActive ? "bg-accent/5 text-accent" : "text-foreground"
+                  }`}
+                >
+                  <div className="text-left">
+                    <p className="font-medium">{p.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {p.businessName}
+                    </p>
+                  </div>
+                  <span className="rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+                    {p.plan}
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/dashboard/components/ReviewCard.tsx b/dashboard/components/ReviewCard.tsx
index a8e914a..9a1efe4 100644
--- a/dashboard/components/ReviewCard.tsx
+++ b/dashboard/components/ReviewCard.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { Star, Trash2, Check, Edit3, Clock } from "lucide-react";
 import { differenceInHours, parseISO } from "date-fns";
-import DemoBadge from "./DemoBadge";
+import { toast } from "sonner";
 import type { DraftReview } from "@/lib/stubs";
 
 interface ReviewCardProps {
@@ -122,7 +122,12 @@ export default function ReviewCard({
             >
               <Trash2 className="h-3 w-3" /> Discard
             </button>
-            <DemoBadge />
+            <button
+              onClick={() => toast.info("Approval coming soon (demo mode)")}
+              className="rounded-lg bg-accent px-3 py-1.5 text-xs font-medium text-accent-foreground hover:bg-accent/90 transition-colors"
+            >
+              Approve
+            </button>
           </div>
         </div>
       </div>
diff --git a/dashboard/components/Sidebar.tsx b/dashboard/components/Sidebar.tsx
index 6e892eb..a6a00ec 100644
--- a/dashboard/components/Sidebar.tsx
+++ b/dashboard/components/Sidebar.tsx
@@ -1,69 +1,190 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
   LayoutDashboard,
-  BarChart3,
-  Users,
+  TrendingUp,
   Map,
   RefreshCw,
-  Gauge,
-  CreditCard,
   Settings,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 import clsx from "clsx";
+import type { Persona } from "@/lib/demo-personas";
 
-const navItems = [
-  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
-  { href: "/dashboard/reports", label: "Reports", icon: BarChart3 },
-  { href: "/dashboard/clients", label: "Clients", icon: Users },
-  { href: "/dashboard/locations", label: "Locations", icon: Map },
-  { href: "/dashboard/rebook", label: "Rebook", icon: RefreshCw },
-  { href: "/dashboard/usage", label: "Usage", icon: Gauge },
-  { href: "/dashboard/billing", label: "Billing", icon: CreditCard },
-  { href: "/dashboard/settings", label: "Settings", icon: Settings },
+const STORAGE_KEY = "localmate_nav_collapsed";
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+interface NavGroup {
+  label: string;
+  items: NavItem[];
+}
+
+const NAV_GROUPS: NavGroup[] = [
+  {
+    label: "Dashboard",
+    items: [
+      { href: "/dashboard", label: "Review Queue", icon: <LayoutDashboard className="h-4 w-4" /> },
+    ],
+  },
+  {
+    label: "Growth",
+    items: [
+      { href: "/dashboard/growth", label: "Rankings & Competitors", icon: <TrendingUp className="h-4 w-4" /> },
+    ],
+  },
+  {
+    label: "Operations",
+    items: [
+      { href: "/dashboard/locations", label: "Locations", icon: <Map className="h-4 w-4" /> },
+      { href: "/dashboard/rebook", label: "Rebook", icon: <RefreshCw className="h-4 w-4" /> },
+    ],
+  },
 ];
 
-export default function Sidebar() {
+interface SidebarProps {
+  persona?: Persona | null;
+}
+
+export default function Sidebar({ persona }: SidebarProps) {
   const pathname = usePathname();
+  const [collapsed, setCollapsed] = useState(true);
+
+  // Hydrate from localStorage on mount.
+  useEffect(() => {
+    if (window.localStorage.getItem(STORAGE_KEY) !== "0") return;
+    const t = setTimeout(() => setCollapsed(false), 0);
+    return () => clearTimeout(t);
+  }, []);
+
+  function toggle() {
+    setCollapsed((prev) => {
+      const next = !prev;
+      window.localStorage.setItem(STORAGE_KEY, next ? "1" : "0");
+      return next;
+    });
+  }
+
+  const isActive = (href: string) =>
+    href === "/dashboard"
+      ? pathname === href
+      : pathname.startsWith(href);
+
+  const businessName = persona?.businessName ?? "LocalMate";
+  const planName = persona?.plan ?? "";
 
   return (
-    <aside className="flex w-64 flex-col border-r border-sidebar-border bg-sidebar">
-      <div className="flex items-center gap-2 border-b border-sidebar-border px-6 py-4">
-        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-orange-500 to-amber-600 text-xs font-bold text-white">
+    <aside
+      className={clsx(
+        "flex shrink-0 flex-col border-r border-sidebar-border bg-sidebar p-3 transition-[width] duration-150",
+        collapsed ? "w-16" : "w-56"
+      )}
+    >
+      {/* Logo */}
+      <div
+        className={clsx(
+          "mb-3 flex items-center gap-2 border-b border-sidebar-border pb-3",
+          collapsed && "justify-center"
+        )}
+      >
+        <div className="flex h-8 w-8 flex-none items-center justify-center rounded-full bg-gradient-to-br from-orange-500 to-amber-600 text-xs font-bold text-white">
           LM
         </div>
-        <div>
-          <p className="text-sm font-semibold text-sidebar-foreground">
-            Local<span className="text-accent">Mate</span>
-          </p>
-          <p className="text-xs text-muted-foreground">by CrewCircle</p>
-        </div>
+        {!collapsed && (
+          <div>
+            <p className="text-sm font-semibold text-sidebar-foreground">
+              Local<span className="text-accent">Mate</span>
+            </p>
+            <p className="text-xs text-muted-foreground">by CrewCircle</p>
+          </div>
+        )}
       </div>
-      <nav className="flex-1 space-y-1 px-3 py-4">
-        {navItems.map((item) => {
-          const Icon = item.icon;
-          const active = pathname === item.href;
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={clsx(
-                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
-                active
-                  ? "bg-sidebar-accent text-sidebar-primary"
-                  : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/50"
-              )}
-            >
-              <Icon className="h-4 w-4" />
-              {item.label}
-            </Link>
-          );
-        })}
+
+      {/* Nav groups */}
+      <nav className="flex flex-1 flex-col gap-4">
+        {NAV_GROUPS.map((group) => (
+          <div key={group.label}>
+            {!collapsed && (
+              <p className="mb-1 px-3 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                {group.label}
+              </p>
+            )}
+            <div className="flex flex-col gap-0.5">
+              {group.items.map((item) => {
+                const active = isActive(item.href);
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    title={collapsed ? item.label : undefined}
+                    className={clsx(
+                      "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                      collapsed && "justify-center px-2",
+                      active
+                        ? "bg-primary text-primary-foreground"
+                        : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/50"
+                    )}
+                  >
+                    {item.icon}
+                    {!collapsed && item.label}
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        ))}
       </nav>
-      <div className="border-t border-sidebar-border px-6 py-4">
-        <p className="text-xs text-muted-foreground/70">v0.1.0-demo</p>
+
+      {/* Footer: Settings + business info + toggle */}
+      <div className="mt-auto space-y-1 border-t border-sidebar-border pt-3">
+        <Link
+          href="/dashboard/settings"
+          title={collapsed ? "Settings" : undefined}
+          className={clsx(
+            "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+            collapsed && "justify-center px-2",
+            isActive("/dashboard/settings")
+              ? "bg-primary text-primary-foreground"
+              : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent/50"
+          )}
+        >
+          <Settings className="h-4 w-4" />
+          {!collapsed && "Settings"}
+        </Link>
+
+        {!collapsed && persona && (
+          <div className="px-3 py-1">
+            <p className="truncate text-xs font-medium text-sidebar-foreground">
+              {businessName}
+            </p>
+            {planName && (
+              <span className="inline-block mt-0.5 rounded bg-sidebar-accent px-1.5 py-0.5 text-[10px] font-medium text-accent">
+                {planName}
+              </span>
+            )}
+          </div>
+        )}
+
+        <button
+          type="button"
+          onClick={toggle}
+          aria-label={collapsed ? "Expand menu" : "Collapse menu"}
+          className="flex w-full items-center justify-center rounded-lg p-2 text-muted-foreground hover:bg-sidebar-accent/50 hover:text-sidebar-foreground transition-colors"
+        >
+          {collapsed ? (
+            <ChevronRight className="h-4 w-4" />
+          ) : (
+            <ChevronLeft className="h-4 w-4" />
+          )}
+        </button>
       </div>
     </aside>
   );
diff --git a/dashboard/components/TrialBanner.tsx b/dashboard/components/TrialBanner.tsx
index d2d31fc..5cabdd6 100644
--- a/dashboard/components/TrialBanner.tsx
+++ b/dashboard/components/TrialBanner.tsx
@@ -9,8 +9,11 @@ import { api } from "@/lib/api";
 import { stubBillingUsage } from "@/lib/stubs";
 import type { BillingUsage, PlanInfo } from "@/lib/stubs";
 import { getCap, REVIEW_DRAFTS } from "@/lib/usage";
-import DemoBadge from "./DemoBadge";
+import { toast } from "sonner";
 
+/* NOTE: TrialBanner is currently unused — DashboardShell renders DemoHeader instead.
+   When non-demo mode is needed, DashboardShell should check NEXT_PUBLIC_DEMO_MODE
+   and conditionally render this vs DemoHeader. */
 interface TrialBannerProps {
   client?: {
     trial_ends_at: string;
@@ -67,7 +70,6 @@ function UsageBanner({ plan }: { plan: PlanInfo }) {
           >
             Manage billing
           </Link>
-          <DemoBadge />
         </div>
       </div>
     </div>
@@ -125,16 +127,21 @@ export default function TrialBanner({ client: _client }: TrialBannerProps) {
         </div>
         <div className="flex items-center gap-2">
           {(state === "expiring_soon" || state === "card_required") && (
-            <button className="rounded bg-background px-3 py-1 text-sm font-medium shadow-sm border border-border hover:bg-muted">
+            <button
+              onClick={() => toast.info("Stripe billing portal coming soon")}
+              className="rounded bg-background px-3 py-1 text-sm font-medium shadow-sm border border-border hover:bg-muted"
+            >
               {state === "card_required" ? "Add card NOW" : "Add card"}
             </button>
           )}
           {state === "expired" && (
-            <button className="rounded bg-primary px-3 py-1 text-sm font-medium text-primary-foreground hover:bg-primary/90">
+            <button
+              onClick={() => toast.info("Plan upgrades coming soon")}
+              className="rounded bg-primary px-3 py-1 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+            >
               Upgrade
             </button>
           )}
-          <DemoBadge />
         </div>
       </div>
     </div>
diff --git a/dashboard/hooks/useDemoPersona.ts b/dashboard/hooks/useDemoPersona.ts
new file mode 100644
index 0000000..2031ffb
--- /dev/null
+++ b/dashboard/hooks/useDemoPersona.ts
@@ -0,0 +1,31 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { PersonaId, Persona } from "@/lib/demo-personas";
+import { PERSONAS, DEFAULT_PERSONA_ID } from "@/lib/demo-personas";
+
+const STORAGE_KEY = "localmate_demo_persona";
+
+/** Reactive hook for demo persona state, persisted to sessionStorage. */
+export function useDemoPersona() {
+  const [personaId, setPersonaIdState] = useState<PersonaId>(DEFAULT_PERSONA_ID);
+
+  // Hydrate from sessionStorage on mount.
+  useEffect(() => {
+    const stored = sessionStorage.getItem(STORAGE_KEY);
+    if (stored && stored in PERSONAS) {
+      setPersonaIdState(stored as PersonaId);
+    } else {
+      setPersonaIdState(DEFAULT_PERSONA_ID);
+    }
+  }, []);
+
+  const setPersonaId = useCallback((id: PersonaId) => {
+    sessionStorage.setItem(STORAGE_KEY, id);
+    setPersonaIdState(id);
+  }, []);
+
+  const persona: Persona = PERSONAS[personaId];
+
+  return { personaId, persona, setPersonaId };
+}
diff --git a/dashboard/lib/demo-personas.ts b/dashboard/lib/demo-personas.ts
new file mode 100644
index 0000000..b7da941
--- /dev/null
+++ b/dashboard/lib/demo-personas.ts
@@ -0,0 +1,705 @@
+import type {
+  BillingUsage,
+  DraftReview,
+  DualRanking,
+  CompetitorChange,
+  Location,
+  Practitioner,
+  Client,
+} from "@/lib/stubs";
+
+/* ------------------------------------------------------------------ */
+/* Five personas covering every plan tier, vertical, and job mix.      */
+/* ------------------------------------------------------------------ */
+
+export type PersonaId =
+  | "sarah-chen"
+  | "marco-rossi"
+  | "james-mitchell"
+  | "emma-lewis"
+  | "tom-nguyen";
+
+export interface Persona {
+  id: PersonaId;
+  name: string;
+  businessName: string;
+  vertical: string;
+  suburb: string;
+  state: string;
+  plan: string;
+  planStatus: "active" | "trial" | "trial_expired";
+  trialEndsAt: string;
+  cardCollectedAt: string | null;
+  jobs: string[];
+  billing: BillingUsage;
+  drafts: DraftReview[];
+  rankings: DualRanking[];
+  competitorChanges: CompetitorChange[];
+  locations: Location[];
+  practitioners: Practitioner[];
+  client: Client;
+}
+
+/* ------------------------------------------------------------------ */
+/* 1. Dr Sarah Chen — Bondi Dental Clinic (Growth, $149/mo)            */
+/* ------------------------------------------------------------------ */
+
+const sarahDrafts: DraftReview[] = [
+  {
+    id: "d1",
+    review:
+      "Appointment was 20 minutes late but Dr Chen was thorough and gentle. Would recommend.",
+    reviewer: "Sarah M",
+    rating: 4,
+    source: "google",
+    draft:
+      "Hi Sarah, thanks for the kind words about Dr Chen. Sorry again about the wait — we've adjusted our booking slots so this won't happen again. Hope to see you back soon. — Bondi Dental",
+    created_at: "2026-07-21T10:30:00+10:00",
+  },
+  {
+    id: "d2",
+    review:
+      "Receptionist was rude on the phone. Hung up on me when I asked about payment plans.",
+    reviewer: "James K",
+    rating: 1,
+    source: "google",
+    draft:
+      "Hi James, I'm really sorry to hear about your experience. That's not the standard we aim for. Our team has been reminded about phone etiquette, and I'd like to personally help with your payment plan enquiry. Please call us and ask for the practice manager. — Bondi Dental",
+    created_at: "2026-07-21T14:00:00+10:00",
+  },
+  {
+    id: "d3",
+    review:
+      "Best dentist I've been to in years. Clean facility, friendly staff, pain-free procedure.",
+    reviewer: "Emily T",
+    rating: 5,
+    source: "google",
+    draft:
+      "Hi Emily, that's wonderful to hear! Our team works hard to make every visit comfortable and pain-free. Thank you for taking the time to share your experience. See you at your next check-up! — Bondi Dental",
+    created_at: "2026-07-20T09:15:00+10:00",
+  },
+];
+
+const sarahRankings: DualRanking[] = [
+  { keyword: "dentist Bondi", organicThisWeek: 2, organicDelta: 1, localPackThisWeek: 1, localPackDelta: 1 },
+  { keyword: "teeth whitening Sydney", organicThisWeek: 11, organicDelta: -3, localPackThisWeek: 6, localPackDelta: -1 },
+  { keyword: "emergency dentist", organicThisWeek: 5, organicDelta: 0, localPackThisWeek: 2, localPackDelta: 1 },
+  { keyword: "dental implant", organicThisWeek: 7, organicDelta: 5, localPackThisWeek: 4, localPackDelta: 5 },
+  { keyword: "invisalign", organicThisWeek: 6, organicDelta: 3, localPackThisWeek: 7, localPackDelta: 0 },
+];
+
+const sarahCompetitorChanges: CompetitorChange[] = [
+  {
+    name: "Bondi Beach Dental",
+    domain: "bondibeachdental.com.au",
+    threat: "high",
+    changes: [
+      { type: "price", description: "Teeth whitening price changed", oldValue: "A$450", newValue: "A$390", timestamp: "2h ago" },
+      { type: "menu", description: "Added service: Same-day emergency", oldValue: "Not offered", newValue: "Now offered", timestamp: "2h ago" },
+      { type: "price", description: "Consultation fee changed", oldValue: "A$95", newValue: "A$120", timestamp: "1d ago" },
+    ],
+  },
+  {
+    name: "Sydney Smiles Dental",
+    domain: "sydneysmiles.com.au",
+    threat: "medium",
+    changes: [
+      { type: "menu", description: "Menu item added: Invisalign Lite", oldValue: "—", newValue: "A$2,900", timestamp: "6h ago" },
+      { type: "hours", description: "Opening hours updated", oldValue: "Sat closed", newValue: "Sat 9–13", timestamp: "3d ago" },
+    ],
+  },
+];
+
+const sarahLocations: Location[] = [
+  {
+    id: "loc1", name: "Bondi Dental — Bondi Junction", area: "Bondi Junction, NSW",
+    menuSyncTarget: "Google Business Profile + HealthEngine", status: "synced", lastSync: "5m ago",
+    targets: [
+      { key: "gbp", label: "Google Business Profile", subtitle: "Services & hours", enabled: true },
+      { key: "healthengine", label: "HealthEngine", subtitle: "12 services mapped", enabled: true },
+      { key: "doctify", label: "Doctify", subtitle: "Not connected", enabled: false },
+      { key: "website", label: "Website", subtitle: "Auto-embed", enabled: true },
+    ],
+  },
+  {
+    id: "loc2", name: "Bondi Dental — Surry Hills", area: "Surry Hills, NSW",
+    menuSyncTarget: "Google Business Profile + HealthEngine", status: "synced", lastSync: "5m ago",
+    targets: [
+      { key: "gbp", label: "Google Business Profile", subtitle: "Services & hours", enabled: true },
+      { key: "healthengine", label: "HealthEngine", subtitle: "10 services mapped", enabled: true },
+      { key: "doctify", label: "Doctify", subtitle: "Not connected", enabled: false },
+      { key: "website", label: "Website", subtitle: "Auto-embed", enabled: true },
+    ],
+  },
+];
+
+const sarahPractitioners: Practitioner[] = [
+  {
+    id: "p1", name: "Dr Sarah Chen", specialty: "General dentistry",
+    lapsed: 24, sent: 15, rebooked: 6, autoFollowUp: true,
+    patients: [
+      { name: "J. Adams", lastVisit: "Nov 2025", channel: "SMS", status: "rebooked" },
+      { name: "T. Nguyen", lastVisit: "Oct 2025", channel: "Email", status: "sent" },
+      { name: "Y. Patel", lastVisit: "Sep 2025", channel: "SMS", status: "queued" },
+      { name: "R. Williams", lastVisit: "Dec 2025", channel: "—", status: "opted_out" },
+    ],
+  },
+  {
+    id: "p2", name: "Dr James Wilson", specialty: "Orthodontics",
+    lapsed: 31, sent: 22, rebooked: 9, autoFollowUp: true,
+    patients: [
+      { name: "L. Garcia", lastVisit: "Oct 2025", channel: "SMS", status: "rebooked" },
+      { name: "M. Thompson", lastVisit: "Aug 2025", channel: "Email", status: "sent" },
+    ],
+  },
+];
+
+const sarahClient: Client = {
+  id: "c-sarah",
+  business_name: "Bondi Dental Clinic",
+  business_type: "Dental",
+  suburb: "Bondi Junction",
+  state: "NSW",
+  trial_status: "active",
+  trial_ends_at: "2026-07-15T00:00:00+10:00",
+  card_collected_at: null,
+  subscription_status: "trial",
+  active_jobs: ["Review Guard", "Rebook", "Rank Report"],
+  trial_usage: { review_drafts: 3 },
+};
+
+const sarahBilling: BillingUsage = {
+  plan: {
+    name: "Growth",
+    status: "active",
+    price: "A$149 / month",
+    renews_at: "1 Aug 2026",
+    days_left: 9,
+    card: { brand: "Visa", last4: "4242", expires: "08 / 2027", valid: true },
+    billing_email: "accounts@bondidental.com.au",
+    next_invoice: { amount: "A$149.00", date: "1 Aug 2026" },
+  },
+  usage: [
+    { label: "Review drafts", used: 212, cap: 500 },
+    { label: "SEO reports", used: 6, cap: 8 },
+    { label: "Competitor briefs", used: 4, cap: 5 },
+    { label: "Follow-up messages", used: 188, cap: 250 },
+  ],
+  invoices: [
+    { id: "inv_07", date: "1 Jul 2026", amount: "A$149.00", status: "paid" },
+    { id: "inv_06", date: "1 Jun 2026", amount: "A$149.00", status: "paid" },
+    { id: "inv_05", date: "1 May 2026", amount: "A$149.00", status: "paid" },
+  ],
+};
+
+/* ------------------------------------------------------------------ */
+/* 2. Marco Rossi — Prefecture 48 (Enterprise, $299/mo, 6 venues)      */
+/* ------------------------------------------------------------------ */
+
+const marcoDrafts: DraftReview[] = [
+  {
+    id: "m1", review: "Amazing six-course tasting menu. The somm pairing was perfect.", reviewer: "Alex P", rating: 5, source: "google",
+    draft: "Hi Alex, grazie mille for the wonderful review! Chef Marco is delighted you enjoyed the tasting experience. We update the menu seasonally — hope to welcome you back for our spring collection. — Prefecture 48",
+    created_at: "2026-07-21T19:30:00+10:00",
+  },
+  {
+    id: "m2", review: "Cocktails were weak and overpriced. Won't be back.", reviewer: "Chris D", rating: 2, source: "google",
+    draft: "Hi Chris, we're sorry the cocktails didn't meet your expectations. Our bar team has reviewed the specs and we'd love to invite you back for a complimentary round. Please reach out to our venue manager. — Prefecture 48",
+    created_at: "2026-07-21T11:00:00+10:00",
+  },
+  {
+    id: "m3", review: "Best Italian outside of Italy. The burrata is to die for.", reviewer: "Maria L", rating: 5, source: "google",
+    draft: "Hi Maria, thank you for the incredible compliment! Our burrata is flown in weekly from Puglia — we're so glad you loved it. See you again soon! — Prefecture 48",
+    created_at: "2026-07-20T20:00:00+10:00",
+  },
+  {
+    id: "m4", review: "Service was slow but food made up for it. Will give it another try.", reviewer: "David W", rating: 3, source: "google",
+    draft: "Hi David, thanks for your honest feedback. We've added extra floor staff on Friday/Saturday nights to speed up service. Glad the food won you over — we'd love to see you again. — Prefecture 48",
+    created_at: "2026-07-20T14:00:00+10:00",
+  },
+];
+
+const marcoRankings: DualRanking[] = [
+  { keyword: "Italian restaurant Sydney", organicThisWeek: 3, organicDelta: 2, localPackThisWeek: 2, localPackDelta: 1 },
+  { keyword: "best pasta Sydney", organicThisWeek: 5, organicDelta: -1, localPackThisWeek: 3, localPackDelta: 2 },
+  { keyword: "fine dining Sydney", organicThisWeek: 8, organicDelta: 1, localPackThisWeek: 5, localPackDelta: 0 },
+  { keyword: "wine bar Surry Hills", organicThisWeek: 2, organicDelta: 1, localPackThisWeek: 1, localPackDelta: 1 },
+  { keyword: "private dining room", organicThisWeek: 1, organicDelta: 0, localPackThisWeek: 1, localPackDelta: 0 },
+  { keyword: "bottomless brunch", organicThisWeek: 12, organicDelta: -4, localPackThisWeek: 8, localPackDelta: -2 },
+];
+
+const marcoCompetitorChanges: CompetitorChange[] = [
+  {
+    name: "Osteria di Russo",
+    domain: "osteriadirusso.com.au",
+    threat: "high",
+    changes: [
+      { type: "menu", description: "New degustation menu launched", oldValue: "5 courses", newValue: "7 courses A$165", timestamp: "4h ago" },
+      { type: "hours", description: "Extended dinner hours", oldValue: "Thu–Sat until 10pm", newValue: "Wed–Sun until 11pm", timestamp: "1d ago" },
+    ],
+  },
+  {
+    name: "Vino e Cucina",
+    domain: "vinoecucina.com.au",
+    threat: "medium",
+    changes: [
+      { type: "price", description: "Pasta prices updated", oldValue: "A$28–38", newValue: "A$32–45", timestamp: "2d ago" },
+    ],
+  },
+  {
+    name: "Bar Roma Trattoria",
+    domain: "barromasydney.com.au",
+    threat: "low",
+    changes: [
+      { type: "menu", description: "Added gluten-free pasta option", oldValue: "Not offered", newValue: "Available on request", timestamp: "5d ago" },
+    ],
+  },
+];
+
+const marcoLocations: Location[] = [
+  { id: "m-loc1", name: "Prefecture 48 — Surry Hills", area: "Surry Hills, NSW", menuSyncTarget: "Google Business Profile + OpenTable", status: "synced", lastSync: "2m ago", targets: [
+    { key: "gbp", label: "Google Business Profile", subtitle: "Menu, hours & photos", enabled: true },
+    { key: "opentable", label: "OpenTable", subtitle: "42 covers tonight", enabled: true },
+    { key: "website", label: "Website", subtitle: "Auto-embed", enabled: true },
+  ]},
+  { id: "m-loc2", name: "Prefecture 48 — Barangaroo", area: "Barangaroo, NSW", menuSyncTarget: "Google Business Profile + OpenTable", status: "synced", lastSync: "2m ago", targets: [
+    { key: "gbp", label: "Google Business Profile", subtitle: "Menu, hours & photos", enabled: true },
+    { key: "opentable", label: "OpenTable", subtitle: "31 covers tonight", enabled: true },
+    { key: "website", label: "Website", subtitle: "Auto-embed", enabled: true },
+  ]},
+  { id: "m-loc3", name: "Prefecture 48 — Manly", area: "Manly, NSW", menuSyncTarget: "Google Business Profile", status: "synced", lastSync: "8m ago", targets: [
+    { key: "gbp", label: "Google Business Profile", subtitle: "Menu, hours & photos", enabled: true },
+    { key: "opentable", label: "OpenTable", subtitle: "Not connected", enabled: false },
+    { key: "website", label: "Website", subtitle: "Auto-embed", enabled: true },
+  ]},
+  { id: "m-loc4", name: "Prefecture 48 — Bondi", area: "Bondi Beach, NSW", menuSyncTarget: "Google Business Profile", status: "synced", lastSync: "15m ago", targets: [
+    { key: "gbp", label: "Google Business Profile", subtitle: "Menu, hours & photos", enabled: true },
+    { key: "opentable", label: "OpenTable", subtitle: "Not connected", enabled: false },
+    { key: "website", label: "Website", subtitle: "Auto-embed", enabled: true },
+  ]},
+  { id: "m-loc5", name: "Prefecture 48 — Chatswood", area: "Chatswood, NSW", menuSyncTarget: "Google Business Profile", status: "synced", lastSync: "3h ago", targets: [
+    { key: "gbp", label: "Google Business Profile", subtitle: "Menu, hours & photos", enabled: true },
+    { key: "website", label: "Website", subtitle: "Auto-embed", enabled: true },
+  ]},
+  { id: "m-loc6", name: "Prefecture 48 — Newtown", area: "Newtown, NSW", menuSyncTarget: "Not configured", status: "setup_needed", lastSync: "—", targets: [
+    { key: "gbp", label: "Google Business Profile", subtitle: "Not connected", enabled: false },
+    { key: "website", label: "Website", subtitle: "Auto-embed", enabled: false },
+  ]},
+];
+
+const marcoPractitioners: Practitioner[] = []; // Hospitality — no practitioners
+
+const marcoClient: Client = {
+  id: "c-marco",
+  business_name: "Prefecture 48",
+  business_type: "Hospitality",
+  suburb: "Surry Hills",
+  state: "NSW",
+  trial_status: "active",
+  trial_ends_at: "2026-07-15T00:00:00+10:00",
+  card_collected_at: null,
+  subscription_status: "trial",
+  active_jobs: ["Review Guard", "Menu Sync", "Competitor Watch", "Rank Report"],
+  trial_usage: { review_drafts: 5 },
+};
+
+const marcoBilling: BillingUsage = {
+  plan: {
+    name: "Enterprise",
+    status: "active",
+    price: "A$299 / month",
+    renews_at: "15 Aug 2026",
+    days_left: 23,
+    card: { brand: "Mastercard", last4: "8891", expires: "11 / 2028", valid: true },
+    billing_email: "marco@prefecture48.com.au",
+    next_invoice: { amount: "A$299.00", date: "15 Aug 2026" },
+  },
+  usage: [
+    { label: "Review drafts", used: 347, cap: 1000 },
+    { label: "SEO reports", used: 3, cap: 12 },
+    { label: "Competitor briefs", used: 10, cap: 20 },
+    { label: "Menu syncs", used: 42, cap: 200 },
+  ],
+  invoices: [
+    { id: "inv_m07", date: "15 Jul 2026", amount: "A$299.00", status: "paid" },
+    { id: "inv_m06", date: "15 Jun 2026", amount: "A$299.00", status: "paid" },
+    { id: "inv_m05", date: "15 May 2026", amount: "A$299.00", status: "paid" },
+  ],
+};
+
+/* ------------------------------------------------------------------ */
+/* 3. James Mitchell — Parramatta Legal (Trial, 3 days left, no card)  */
+/* ------------------------------------------------------------------ */
+
+const jamesDrafts: DraftReview[] = [
+  {
+    id: "j1", review: "James helped me through a messy property settlement. Professional and fair pricing.", reviewer: "Brenda H", rating: 5, source: "google",
+    draft: "Hi Brenda, thank you for your trust during a difficult time. We're glad we could help you reach a fair outcome. If anything else comes up, we're here for you. — Parramatta Legal",
+    created_at: "2026-07-22T09:00:00+10:00",
+  },
+  {
+    id: "j2", review: "Never returned my calls. Had to chase them for weeks.", reviewer: "Michael R", rating: 1, source: "google",
+    draft: "Hi Michael, I sincerely apologise for the poor communication. We've reviewed our intake process and implemented a 24-hour call-back guarantee. Please give us another chance — I'll personally handle your matter. — James Mitchell, Partner",
+    created_at: "2026-07-21T16:00:00+10:00",
+  },
+];
+
+const jamesRankings: DualRanking[] = [
+  { keyword: "family lawyer Parramatta", organicThisWeek: 4, organicDelta: -1, localPackThisWeek: 3, localPackDelta: 0 },
+  { keyword: "property settlement lawyer", organicThisWeek: 7, organicDelta: 2, localPackThisWeek: 5, localPackDelta: 2 },
+  { keyword: "divorce lawyer Sydney", organicThisWeek: 15, organicDelta: 1, localPackThisWeek: 9, localPackDelta: -2 },
+  { keyword: "conveyancing Parramatta", organicThisWeek: 2, organicDelta: 1, localPackThisWeek: 2, localPackDelta: 1 },
+];
+
+const jamesCompetitorChanges: CompetitorChange[] = [
+  {
+    name: "Parramatta Family Law",
+    domain: "parrafamilylaw.com.au",
+    threat: "high",
+    changes: [
+      { type: "price", description: "Fixed-fee packages launched", oldValue: "Hourly billing", newValue: "A$2,500–5,500 flat fee", timestamp: "1d ago" },
+    ],
+  },
+];
+
+const jamesLocations: Location[] = [
+  { id: "j-loc1", name: "Parramatta Legal — Parramatta", area: "Parramatta, NSW", menuSyncTarget: "Not applicable", status: "synced", lastSync: "—", targets: [] },
+];
+
+const jamesPractitioners: Practitioner[] = []; // Legal — no practitioners
+
+const jamesClient: Client = {
+  id: "c-james",
+  business_name: "Parramatta Legal",
+  business_type: "Legal",
+  suburb: "Parramatta",
+  state: "NSW",
+  trial_status: "expiring_soon",
+  trial_ends_at: "2026-07-26T00:00:00+10:00",
+  card_collected_at: null,
+  subscription_status: "trial",
+  active_jobs: ["Review Guard", "Rank Report"],
+  trial_usage: { review_drafts: 45 },
+};
+
+const jamesBilling: BillingUsage = {
+  plan: {
+    name: "Trial",
+    status: "trial",
+    price: "Free",
+    renews_at: "26 Jul 2026",
+    days_left: 3,
+    card: null,
+    billing_email: "james@parralegal.com.au",
+    next_invoice: { amount: "A$149.00", date: "26 Jul 2026" },
+  },
+  usage: [
+    { label: "Review drafts", used: 45, cap: 100 },
+    { label: "SEO reports", used: 2, cap: 3 },
+  ],
+  invoices: [],
+};
+
+/* ------------------------------------------------------------------ */
+/* 4. Emma Lewis — Surry Hills Physio (Growth, $149/mo)                 */
+/* ------------------------------------------------------------------ */
+
+const emmaDrafts: DraftReview[] = [
+  {
+    id: "e1", review: "Emma fixed my shoulder in 3 sessions. Amazing physio!", reviewer: "Tom H", rating: 5, source: "google",
+    draft: "Hi Tom, that's fantastic to hear! Emma's shoulder protocol is one of our most effective. Keep up with those exercises and you'll be back to full strength in no time. — Surry Hills Physio",
+    created_at: "2026-07-21T15:00:00+10:00",
+  },
+  {
+    id: "e2", review: "Good treatment but always running 15 mins late.", reviewer: "Priya S", rating: 3, source: "google",
+    draft: "Hi Priya, thank you for the feedback. We've introduced a buffer between appointments to reduce wait times. We appreciate your patience and look forward to your next visit. — Surry Hills Physio",
+    created_at: "2026-07-20T11:00:00+10:00",
+  },
+];
+
+const emmaRankings: DualRanking[] = [
+  { keyword: "physio Surry Hills", organicThisWeek: 1, organicDelta: 2, localPackThisWeek: 1, localPackDelta: 1 },
+  { keyword: "sports physio Sydney", organicThisWeek: 6, organicDelta: 3, localPackThisWeek: 4, localPackDelta: 2 },
+  { keyword: "shoulder pain treatment", organicThisWeek: 8, organicDelta: -2, localPackThisWeek: 5, localPackDelta: 0 },
+  { keyword: "physio near me", organicThisWeek: 2, organicDelta: 1, localPackThisWeek: 1, localPackDelta: 1 },
+];
+
+const emmaCompetitorChanges: CompetitorChange[] = [
+  {
+    name: "Surry Hills Sports Clinic",
+    domain: "surreysportclinic.com.au",
+    threat: "medium",
+    changes: [
+      { type: "hours", description: "Added Saturday appointments", oldValue: "Mon–Fri only", newValue: "Mon–Sat 8–14", timestamp: "3d ago" },
+    ],
+  },
+];
+
+const emmaLocations: Location[] = [
+  { id: "e-loc1", name: "Surry Hills Physio — Surry Hills", area: "Surry Hills, NSW", menuSyncTarget: "Not applicable", status: "synced", lastSync: "—", targets: [] },
+];
+
+const emmaPractitioners: Practitioner[] = [
+  {
+    id: "ep1", name: "Emma Lewis", specialty: "Sports physiotherapy",
+    lapsed: 18, sent: 12, rebooked: 7, autoFollowUp: true,
+    patients: [
+      { name: "P. Johnson", lastVisit: "Oct 2025", channel: "SMS", status: "rebooked" },
+      { name: "L. Chen", lastVisit: "Sep 2025", channel: "Email", status: "sent" },
+      { name: "M. Davis", lastVisit: "Aug 2025", channel: "SMS", status: "queued" },
+    ],
+  },
+  {
+    id: "ep2", name: "David Park", specialty: "Rehabilitation",
+    lapsed: 11, sent: 6, rebooked: 3, autoFollowUp: false,
+    patients: [
+      { name: "R. Khan", lastVisit: "Nov 2025", channel: "SMS", status: "rebooked" },
+    ],
+  },
+];
+
+const emmaClient: Client = {
+  id: "c-emma",
+  business_name: "Surry Hills Physio",
+  business_type: "Medical",
+  suburb: "Surry Hills",
+  state: "NSW",
+  trial_status: "active",
+  trial_ends_at: "2026-07-15T00:00:00+10:00",
+  card_collected_at: null,
+  subscription_status: "trial",
+  active_jobs: ["Review Guard", "Rebook"],
+  trial_usage: { review_drafts: 12 },
+};
+
+const emmaBilling: BillingUsage = {
+  plan: {
+    name: "Growth",
+    status: "active",
+    price: "A$149 / month",
+    renews_at: "5 Aug 2026",
+    days_left: 13,
+    card: { brand: "Visa", last4: "7890", expires: "03 / 2028", valid: true },
+    billing_email: "emma@surreylsphysio.com.au",
+    next_invoice: { amount: "A$149.00", date: "5 Aug 2026" },
+  },
+  usage: [
+    { label: "Review drafts", used: 98, cap: 500 },
+    { label: "SEO reports", used: 2, cap: 8 },
+    { label: "Competitor briefs", used: 1, cap: 5 },
+    { label: "Follow-up messages", used: 120, cap: 250 },
+  ],
+  invoices: [
+    { id: "inv_e07", date: "5 Jul 2026", amount: "A$149.00", status: "paid" },
+    { id: "inv_e06", date: "5 Jun 2026", amount: "A$149.00", status: "paid" },
+  ],
+};
+
+/* ------------------------------------------------------------------ */
+/* 5. Tom Nguyen — Newtown Fitness Hub (Starter, $79/mo)                */
+/* ------------------------------------------------------------------ */
+
+const tomDrafts: DraftReview[] = [
+  {
+    id: "t1", review: "Great gym, clean equipment, friendly staff. Only downside is parking.", reviewer: "Steve B", rating: 4, source: "google",
+    draft: "Hi Steve, thanks for the positive review! We hear you on parking — we've partnered with the council lot on Wilson St for free 2-hour validation. Ask at reception next time. — Newtown Fitness Hub",
+    created_at: "2026-07-22T07:00:00+10:00",
+  },
+  {
+    id: "t2", review: "Classes are always fully booked. Impossible to get a spot.", reviewer: "Jess K", rating: 2, source: "google",
+    draft: "Hi Jess, we're sorry you've had trouble booking classes. We've added 3 extra HIIT sessions and opened a waitlist feature in our app. Spots now open up automatically — give it a try! — Newtown Fitness Hub",
+    created_at: "2026-07-21T12:00:00+10:00",
+  },
+  {
+    id: "t3", review: "PT Tom is incredible! Helped me drop 12kg in 4 months.", reviewer: "Andy L", rating: 5, source: "google",
+    draft: "Hi Andy, what an achievement! Tom is thrilled with your progress. Keep up the momentum — we can't wait to see what you accomplish next. — Newtown Fitness Hub",
+    created_at: "2026-07-20T08:00:00+10:00",
+  },
+];
+
+const tomRankings: DualRanking[] = [
+  { keyword: "gym Newtown", organicThisWeek: 1, organicDelta: 0, localPackThisWeek: 1, localPackDelta: 0 },
+  { keyword: "personal trainer Sydney", organicThisWeek: 14, organicDelta: -2, localPackThisWeek: 12, localPackDelta: -1 },
+  { keyword: "fitness classes inner west", organicThisWeek: 3, organicDelta: 1, localPackThisWeek: 2, localPackDelta: 1 },
+  { keyword: "24 hour gym", organicThisWeek: 6, organicDelta: 4, localPackThisWeek: 5, localPackDelta: 3 },
+];
+
+const tomCompetitorChanges: CompetitorChange[] = [
+  {
+    name: "Anytime Fitness Newtown",
+    domain: "anytimefitness.com.au",
+    threat: "high",
+    changes: [
+      { type: "price", description: "Membership prices reduced", oldValue: "A$89/mo", newValue: "A$69/mo", timestamp: "5d ago" },
+    ],
+  },
+  {
+    name: "F45 Newtown",
+    domain: "f45training.com.au",
+    threat: "medium",
+    changes: [
+      { type: "menu", description: "New challenge program", oldValue: "8-week challenge", newValue: "6-week summer shred", timestamp: "2d ago" },
+    ],
+  },
+];
+
+const tomLocations: Location[] = [
+  { id: "t-loc1", name: "Newtown Fitness Hub — Newtown", area: "Newtown, NSW", menuSyncTarget: "Not applicable", status: "synced", lastSync: "—", targets: [] },
+];
+
+const tomPractitioners: Practitioner[] = [];
+
+const tomClient: Client = {
+  id: "c-tom",
+  business_name: "Newtown Fitness Hub",
+  business_type: "Fitness",
+  suburb: "Newtown",
+  state: "NSW",
+  trial_status: "active",
+  trial_ends_at: "2026-07-20T00:00:00+10:00",
+  card_collected_at: "2026-06-25T00:00:00+10:00",
+  subscription_status: "trial",
+  active_jobs: ["Review Guard", "Competitor Watch", "Rank Report"],
+  trial_usage: { review_drafts: 7 },
+};
+
+const tomBilling: BillingUsage = {
+  plan: {
+    name: "Starter",
+    status: "active",
+    price: "A$79 / month",
+    renews_at: "28 Jul 2026",
+    days_left: 5,
+    card: { brand: "Amex", last4: "3001", expires: "01 / 2027", valid: true },
+    billing_email: "tom@newtownfitness.com.au",
+    next_invoice: { amount: "A$79.00", date: "28 Jul 2026" },
+  },
+  usage: [
+    { label: "Review drafts", used: 78, cap: 150 },
+    { label: "SEO reports", used: 3, cap: 5 },
+    { label: "Competitor briefs", used: 4, cap: 5 },
+  ],
+  invoices: [
+    { id: "inv_t07", date: "28 Jun 2026", amount: "A$79.00", status: "paid" },
+    { id: "inv_t06", date: "28 May 2026", amount: "A$79.00", status: "paid" },
+  ],
+};
+
+/* ------------------------------------------------------------------ */
+/* Persona registry                                                        */
+/* ------------------------------------------------------------------ */
+
+export const PERSONAS: Record<PersonaId, Persona> = {
+  "sarah-chen": {
+    id: "sarah-chen",
+    name: "Dr Sarah Chen",
+    businessName: "Bondi Dental Clinic",
+    vertical: "Dental",
+    suburb: "Bondi Junction",
+    state: "NSW",
+    plan: "Growth",
+    planStatus: "active",
+    trialEndsAt: "2026-07-15T00:00:00+10:00",
+    cardCollectedAt: null,
+    jobs: ["Review Guard", "Rebook", "Rank Report"],
+    billing: sarahBilling,
+    drafts: sarahDrafts,
+    rankings: sarahRankings,
+    competitorChanges: sarahCompetitorChanges,
+    locations: sarahLocations,
+    practitioners: sarahPractitioners,
+    client: sarahClient,
+  },
+  "marco-rossi": {
+    id: "marco-rossi",
+    name: "Marco Rossi",
+    businessName: "Prefecture 48",
+    vertical: "Hospitality",
+    suburb: "Surry Hills",
+    state: "NSW",
+    plan: "Enterprise",
+    planStatus: "active",
+    trialEndsAt: "2026-07-15T00:00:00+10:00",
+    cardCollectedAt: null,
+    jobs: ["Review Guard", "Menu Sync", "Competitor Watch", "Rank Report"],
+    billing: marcoBilling,
+    drafts: marcoDrafts,
+    rankings: marcoRankings,
+    competitorChanges: marcoCompetitorChanges,
+    locations: marcoLocations,
+    practitioners: marcoPractitioners,
+    client: marcoClient,
+  },
+  "james-mitchell": {
+    id: "james-mitchell",
+    name: "James Mitchell",
+    businessName: "Parramatta Legal",
+    vertical: "Legal",
+    suburb: "Parramatta",
+    state: "NSW",
+    plan: "Trial",
+    planStatus: "trial",
+    trialEndsAt: "2026-07-26T00:00:00+10:00",
+    cardCollectedAt: null,
+    jobs: ["Review Guard", "Rank Report"],
+    billing: jamesBilling,
+    drafts: jamesDrafts,
+    rankings: jamesRankings,
+    competitorChanges: jamesCompetitorChanges,
+    locations: jamesLocations,
+    practitioners: jamesPractitioners,
+    client: jamesClient,
+  },
+  "emma-lewis": {
+    id: "emma-lewis",
+    name: "Emma Lewis",
+    businessName: "Surry Hills Physio",
+    vertical: "Medical",
+    suburb: "Surry Hills",
+    state: "NSW",
+    plan: "Growth",
+    planStatus: "active",
+    trialEndsAt: "2026-07-15T00:00:00+10:00",
+    cardCollectedAt: null,
+    jobs: ["Review Guard", "Rebook"],
+    billing: emmaBilling,
+    drafts: emmaDrafts,
+    rankings: emmaRankings,
+    competitorChanges: emmaCompetitorChanges,
+    locations: emmaLocations,
+    practitioners: emmaPractitioners,
+    client: emmaClient,
+  },
+  "tom-nguyen": {
+    id: "tom-nguyen",
+    name: "Tom Nguyen",
+    businessName: "Newtown Fitness Hub",
+    vertical: "Fitness",
+    suburb: "Newtown",
+    state: "NSW",
+    plan: "Starter",
+    planStatus: "active",
+    trialEndsAt: "2026-07-20T00:00:00+10:00",
+    cardCollectedAt: "2026-06-25T00:00:00+10:00",
+    jobs: ["Review Guard", "Competitor Watch", "Rank Report"],
+    billing: tomBilling,
+    drafts: tomDrafts,
+    rankings: tomRankings,
+    competitorChanges: tomCompetitorChanges,
+    locations: tomLocations,
+    practitioners: tomPractitioners,
+    client: tomClient,
+  },
+};
+
+/** Default persona shown on first load. */
+export const DEFAULT_PERSONA_ID: PersonaId = "sarah-chen";
+
+/** Ordered list of persona entries for the switcher dropdown. */
+export const PERSONA_LIST: { id: PersonaId; name: string; businessName: string; plan: string }[] = [
+  { id: "sarah-chen", name: "Dr Sarah Chen", businessName: "Bondi Dental Clinic", plan: "Growth" },
+  { id: "marco-rossi", name: "Marco Rossi", businessName: "Prefecture 48", plan: "Enterprise" },
+  { id: "james-mitchell", name: "James Mitchell", businessName: "Parramatta Legal", plan: "Trial" },
+  { id: "emma-lewis", name: "Emma Lewis", businessName: "Surry Hills Physio", plan: "Growth" },
+  { id: "tom-nguyen", name: "Tom Nguyen", businessName: "Newtown Fitness Hub", plan: "Starter" },
+];
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index f9ec058..993f62e 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -16,7 +16,8 @@
         "lucide-react": "^1.23.0",
         "next": "16.2.9",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "sonner": "^2.0.7"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -6648,6 +6649,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/dashboard/package.json b/dashboard/package.json
index c30c9db..21bb71d 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -19,7 +19,8 @@
     "lucide-react": "^1.23.0",
     "next": "16.2.9",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "sonner": "^2.0.7"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",