diff --git a/frontend/packages/swarm-ui/src/App.tsx b/frontend/packages/swarm-ui/src/App.tsx
index 822984ef..3ef432e3 100644
--- a/frontend/packages/swarm-ui/src/App.tsx
+++ b/frontend/packages/swarm-ui/src/App.tsx
@@ -1,87 +1,11 @@
-// Root shell component. `/` is the real hive-roster overview page —
-// fetches swarm-controller's `GET /api/hives/status`, the swarm-wide
-// status aggregate: one row per roster hive, freshness derived at read
-// time from the status bucket. Supersedes the earlier `GET /api/hives`
-// + static "configured" chip placeholder now that the real rollup
-// exists — same component, richer data, no rebuild, exactly the plan
-// that placeholder's comment laid out.
-import { useEffect, useState } from 'preact/hooks';
+// Root shell component — routing only. Each route's content is its own
+// page component under `./pages/`; this file just maps paths to them.
 import { Route, Switch } from 'wouter-preact';
 import { Shell } from './shell/Shell.js';
 import { ComponentsPage } from './pages/ComponentsPage.js';
 import { JobsPage } from './pages/JobsPage.js';
+import { OverviewPage } from './pages/OverviewPage.js';
 import { Panel } from './ui/panel/Panel.js';
-import { StatusChip, type ChipTone } from './ui/status-chip/StatusChip.js';
-import { Table, type TableColumn } from './ui/table/Table.js';
-import { fmtAgo } from './util.js';
-
-type Freshness = 'fresh' | 'stale' | 'never_reported' | 'unknown';
-
-interface HiveStatus {
-  name: string;
-  domain: string | null;
-  freshness: Freshness;
-  last_seen_unix: number | null;
-  age_seconds: number | null;
-}
-
-// One tone + label per freshness value. `unknown` (reporting but absent
-// from the roster) reads `negative` — it's the one case this endpoint
-// cannot vouch for at all, per `status.rs`'s doc comment.
-const FRESHNESS: Record<Freshness, { tone: ChipTone; label: string }> = {
-  fresh: { tone: 'positive', label: 'fresh' },
-  stale: { tone: 'warning', label: 'stale' },
-  never_reported: { tone: 'neutral', label: 'never reported' },
-  unknown: { tone: 'negative', label: 'unknown' },
-};
-
-const COLUMNS: TableColumn<HiveStatus>[] = [
-  { key: 'name', header: 'name', render: (h) => h.name },
-  {
-    key: 'domain',
-    header: 'domain',
-    render: (h) =>
-      h.domain ? (
-        <a href={`https://${h.domain}/`} target="_blank" rel="noreferrer">
-          {h.domain}
-        </a>
-      ) : (
-        '—'
-      ),
-  },
-  {
-    key: 'status',
-    header: 'status',
-    render: (h) => {
-      const { tone, label } = FRESHNESS[h.freshness];
-      const age = h.age_seconds !== null ? ` (${fmtAgo(h.age_seconds)})` : '';
-      return <StatusChip tone={tone} label={label + age} />;
-    },
-  },
-];
-
-function Home() {
-  const [hives, setHives] = useState<HiveStatus[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    fetch('/api/hives/status')
-      .then((r) => {
-        if (!r.ok) throw new Error(`http ${r.status}`);
-        return r.json() as Promise<HiveStatus[]>;
-      })
-      .then(setHives)
-      .catch((e: unknown) => setError(String(e)));
-  }, []);
-
-  return (
-    <Panel title="overview">
-      {error ? <p>failed to load the hive roster: {error}</p> : null}
-      {!error && hives === null ? <p>loading…</p> : null}
-      {hives ? <Table columns={COLUMNS} rows={hives} rowKey={(h) => h.name} /> : null}
-    </Panel>
-  );
-}
 
 function NotFound() {
   return (
@@ -95,7 +19,7 @@ export function App() {
   return (
     <Shell>
       <Switch>
-        <Route path="/" component={Home} />
+        <Route path="/" component={OverviewPage} />
         <Route path="/jobs" component={JobsPage} />
         <Route path="/components" component={ComponentsPage} />
         <Route component={NotFound} />
diff --git a/frontend/packages/swarm-ui/src/pages/OverviewPage.tsx b/frontend/packages/swarm-ui/src/pages/OverviewPage.tsx
new file mode 100644
index 00000000..b78f8f12
--- /dev/null
+++ b/frontend/packages/swarm-ui/src/pages/OverviewPage.tsx
@@ -0,0 +1,82 @@
+// <OverviewPage> — the hive-roster overview, `/`'s content. Fetches
+// swarm-controller's `GET /api/hives/status`, the swarm-wide status
+// aggregate: one row per roster hive, freshness derived at read time
+// from the status bucket. Supersedes the earlier `GET /api/hives` +
+// static "configured" chip placeholder now that the real rollup
+// exists — same component, richer data, no rebuild, exactly the plan
+// that placeholder's comment laid out. Its own component/file rather
+// than living in `App.tsx`, matching `JobsPage`'s shape: `App.tsx` is
+// routing, a page owns its own fetch + render.
+import { useEffect, useState } from 'preact/hooks';
+import { Panel } from '../ui/panel/Panel.js';
+import { StatusChip, type ChipTone } from '../ui/status-chip/StatusChip.js';
+import { Table, type TableColumn } from '../ui/table/Table.js';
+import { fmtAgo } from '../util.js';
+
+type Freshness = 'fresh' | 'stale' | 'never_reported' | 'unknown';
+
+interface HiveStatus {
+  name: string;
+  domain: string | null;
+  freshness: Freshness;
+  last_seen_unix: number | null;
+  age_seconds: number | null;
+}
+
+// One tone + label per freshness value. `unknown` (reporting but absent
+// from the roster) reads `negative` — it's the one case this endpoint
+// cannot vouch for at all, per `status.rs`'s doc comment.
+const FRESHNESS: Record<Freshness, { tone: ChipTone; label: string }> = {
+  fresh: { tone: 'positive', label: 'fresh' },
+  stale: { tone: 'warning', label: 'stale' },
+  never_reported: { tone: 'neutral', label: 'never reported' },
+  unknown: { tone: 'negative', label: 'unknown' },
+};
+
+const COLUMNS: TableColumn<HiveStatus>[] = [
+  { key: 'name', header: 'name', render: (h) => h.name },
+  {
+    key: 'domain',
+    header: 'domain',
+    render: (h) =>
+      h.domain ? (
+        <a href={`https://${h.domain}/`} target="_blank" rel="noreferrer">
+          {h.domain}
+        </a>
+      ) : (
+        '—'
+      ),
+  },
+  {
+    key: 'status',
+    header: 'status',
+    render: (h) => {
+      const { tone, label } = FRESHNESS[h.freshness];
+      const age = h.age_seconds !== null ? ` (${fmtAgo(h.age_seconds)})` : '';
+      return <StatusChip tone={tone} label={label + age} />;
+    },
+  },
+];
+
+export function OverviewPage() {
+  const [hives, setHives] = useState<HiveStatus[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/hives/status')
+      .then((r) => {
+        if (!r.ok) throw new Error(`http ${r.status}`);
+        return r.json() as Promise<HiveStatus[]>;
+      })
+      .then(setHives)
+      .catch((e: unknown) => setError(String(e)));
+  }, []);
+
+  return (
+    <Panel title="overview">
+      {error ? <p>failed to load the hive roster: {error}</p> : null}
+      {!error && hives === null ? <p>loading…</p> : null}
+      {hives ? <Table columns={COLUMNS} rows={hives} rowKey={(h) => h.name} /> : null}
+    </Panel>
+  );
+}