diff --git a/sites/mainweb/app/(portal)/admin/analytics/AnalyticsPage.tsx b/sites/mainweb/app/(portal)/admin/analytics/AnalyticsPage.tsx
new file mode 100644
index 00000000..ea777b3d
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/analytics/AnalyticsPage.tsx
@@ -0,0 +1,594 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { loginHref } from "@/lib/safe-callback";
+import dynamic from "next/dynamic";
+import { useSession } from "next-auth/react";
+import { useTheme } from "next-themes";
+import { trpc } from "@/lib/trpc";
+import { useRouter } from "next/navigation";
+import {
+  btnSecondary,
+  itemTitle,
+  label,
+  meta,
+  body,
+  pageDek,
+  sectionTitle,
+} from "@/components/portal/ui";
+
+const Line = dynamic(() => import("react-chartjs-2").then((m) => m.Line), {
+  ssr: false,
+  loading: () => <ChartSkeleton />,
+});
+const Bar = dynamic(() => import("react-chartjs-2").then((m) => m.Bar), {
+  ssr: false,
+  loading: () => <ChartSkeleton />,
+});
+
+function ChartSkeleton() {
+  return (
+    <div
+      className="h-full w-full rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
+      aria-hidden
+    />
+  );
+}
+
+/** Admin pages carry a smaller headline than member pages. */
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)]";
+
+const th = "px-4 py-2.5 text-[13px] font-medium text-[var(--text-subtle)]";
+
+/**
+ * Canvas cannot read a CSS variable, so the portal tokens are resolved to
+ * literal colours here. Members draw in the accent, bootcamp in ink with a
+ * dash, so the two lines differ by more than hue.
+ */
+interface ChartTokens {
+  accent: string;
+  ink: string;
+  muted: string;
+  subtle: string;
+  grid: string;
+  card: string;
+  font: string;
+}
+
+function readTokens(element: HTMLElement): ChartTokens {
+  const root = getComputedStyle(document.documentElement);
+  const read = (name: string) => root.getPropertyValue(name).trim();
+  return {
+    accent: read("--accent"),
+    ink: read("--text-primary"),
+    muted: read("--text-muted"),
+    subtle: read("--text-subtle"),
+    grid: read("--border-subtle"),
+    card: read("--bg-card"),
+    font: getComputedStyle(element).fontFamily,
+  };
+}
+
+function phaseLabel(phase: string) {
+  if (phase === "open") return "Registration open";
+  if (phase === "closed") return "Registration closed";
+  if (phase === "in_progress") return "In progress";
+  return phase;
+}
+
+/** `2026-fall` is how it is stored; nobody should have to read it that way. */
+function termLabel(term: string) {
+  const [year, season] = term.split("-");
+  if (!year || !season) return term;
+  return `${season.charAt(0).toUpperCase()}${season.slice(1)} ${year}`;
+}
+
+/** `2026-01` becomes `Jan 26`. Twelve of these have to fit one axis. */
+function monthLabel(month: string) {
+  const [year, index] = month.split("-");
+  const date = new Date(Date.UTC(Number(year), Number(index) - 1, 1));
+  const name = date.toLocaleString("en-US", {
+    month: "short",
+    timeZone: "UTC",
+  });
+  return `${name} ${year?.slice(2)}`;
+}
+
+const statCell =
+  "sm:border-l sm:border-[var(--border-subtle)] sm:pl-6 sm:first:border-l-0 sm:first:pl-0";
+
+interface StatProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+}
+
+function Stat({ title, value, subtitle }: StatProps) {
+  return (
+    <div className={statCell}>
+      <dt className={label}>{title}</dt>
+      <dd className="mt-1 font-[family-name:var(--font-display)] text-[32px] font-semibold leading-none tabular-nums text-[var(--text-primary)] md:text-[36px]">
+        {value}
+      </dd>
+      {subtitle && <dd className={`mt-1.5 ${meta}`}>{subtitle}</dd>}
+    </div>
+  );
+}
+
+function StatSkeleton() {
+  return (
+    <div className={statCell} aria-hidden>
+      <div className="h-4 w-24 rounded-[var(--radius-sm)] bg-[var(--bg-secondary)]" />
+      <div className="mt-2 h-9 w-16 rounded-[var(--radius-sm)] bg-[var(--bg-secondary)]" />
+    </div>
+  );
+}
+
+/** A short line in the series colour, dashed for the dashed series. */
+function Swatch({ color, dashed = false }: { color: string; dashed?: boolean }) {
+  return (
+    <span
+      aria-hidden
+      className={`inline-block w-5 border-t-2 ${dashed ? "border-dashed" : "border-solid"}`}
+      style={{ borderColor: color }}
+    />
+  );
+}
+
+export default function AnalyticsPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const { resolvedTheme } = useTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [chartsReady, setChartsReady] = useState(false);
+  const [tokens, setTokens] = useState<ChartTokens | null>(null);
+  const [showTable, setShowTable] = useState(false);
+
+  const { data: stats, isLoading } = trpc.admin.analyticsOverview.useQuery(
+    undefined,
+    // Matched to the server's cache entry. Polling faster only produced
+    // repeated cache hits and a request per tab per 5s for numbers that move
+    // on a much slower clock.
+    { enabled: !!session, refetchInterval: 15000 },
+  );
+
+  const live = trpc.admin.hackathonLive.useQuery(undefined, {
+    enabled: !!session,
+    refetchInterval: 15000,
+  });
+
+  // Growth moves on a monthly clock, so it is fetched once rather than polled.
+  const growth = trpc.admin.growth.useQuery(undefined, { enabled: !!session });
+
+  useEffect(() => {
+    import("chart.js").then(
+      ({
+        Chart,
+        LineElement,
+        PointElement,
+        BarElement,
+        CategoryScale,
+        LinearScale,
+        Tooltip,
+      }) => {
+        Chart.register(
+          LineElement,
+          PointElement,
+          BarElement,
+          CategoryScale,
+          LinearScale,
+          Tooltip,
+        );
+        setChartsReady(true);
+      },
+    );
+  }, []);
+
+  // next-themes swaps the class on <html> in its own effect, which runs after
+  // this one, so the tokens are read a frame later when the new theme is live.
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (containerRef.current) setTokens(readTokens(containerRef.current));
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [resolvedTheme]);
+
+  const options = useMemo(() => {
+    if (!tokens) return undefined;
+    const font = { family: tokens.font, size: 12 };
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: { mode: "index" as const, intersect: false },
+      plugins: {
+        // The legend is rendered as HTML above the chart, where it can carry a
+        // line style as well as a colour.
+        legend: { display: false },
+        tooltip: {
+          backgroundColor: tokens.card,
+          borderColor: tokens.grid,
+          borderWidth: 1,
+          cornerRadius: 4,
+          titleColor: tokens.ink,
+          bodyColor: tokens.muted,
+          titleFont: { ...font, weight: 600 },
+          bodyFont: font,
+          padding: 10,
+        },
+      },
+      scales: {
+        x: {
+          grid: { display: false },
+          border: { color: tokens.grid },
+          ticks: { color: tokens.subtle, font },
+        },
+        y: {
+          beginAtZero: true,
+          grid: { color: tokens.grid },
+          border: { display: false },
+          ticks: { color: tokens.subtle, font, precision: 0 },
+        },
+      },
+    };
+  }, [tokens]);
+
+  if (status === "unauthenticated") {
+    router.push(loginHref());
+    return null;
+  }
+
+  const months = growth.data?.months ?? [];
+  const terms = growth.data?.terms ?? [];
+  const totals = growth.data?.totals;
+  const ready = chartsReady && !!tokens && !growth.isPending;
+
+  const growthData = {
+    labels: months.map((row) => monthLabel(row.month)),
+    datasets: [
+      {
+        label: "Members",
+        data: months.map((row) => row.members),
+        borderColor: tokens?.accent,
+        backgroundColor: tokens?.accent,
+        borderWidth: 2,
+        pointRadius: 3,
+        pointHoverRadius: 5,
+        pointStyle: "circle" as const,
+        tension: 0.25,
+      },
+      {
+        label: "Bootcamp members",
+        data: months.map((row) => row.bootcampMembers),
+        borderColor: tokens?.ink,
+        backgroundColor: tokens?.ink,
+        borderWidth: 2,
+        // Dash and marker shape, not colour alone, separate the two lines.
+        borderDash: [6, 4],
+        pointRadius: 3,
+        pointHoverRadius: 5,
+        pointStyle: "rectRot" as const,
+        tension: 0.25,
+      },
+    ],
+  };
+
+  const joinedData = {
+    labels: months.map((row) => monthLabel(row.month)),
+    datasets: [
+      {
+        label: "Joined",
+        data: months.map((row) => row.joined),
+        backgroundColor: tokens?.accent,
+        borderRadius: 2,
+        maxBarThickness: 56,
+        borderSkipped: "bottom" as const,
+      },
+    ],
+  };
+
+  const termData = {
+    labels: terms.map((row) => termLabel(row.term)),
+    datasets: [
+      {
+        label: "Enrolled",
+        data: terms.map((row) => row.enrolled),
+        // Muted, not ink: a full-strength ink bar is a near-white slab in
+        // the night edition.
+        backgroundColor: tokens?.muted,
+        borderRadius: 2,
+        // One term would otherwise stretch to the whole chart width.
+        maxBarThickness: 56,
+        borderSkipped: "bottom" as const,
+      },
+    ],
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="mx-auto w-full max-w-7xl px-5 py-10 sm:px-8 md:px-12 md:py-14"
+    >
+      <header>
+        <h1 className={adminTitle}>Club growth</h1>
+        <p className={pageDek}>
+          Membership, bootcamp enrolment, and turnout across every event and
+          hackathon.
+        </p>
+      </header>
+
+      {/* Membership */}
+      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+        <h2 className={sectionTitle}>Membership</h2>
+        <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-4">
+          {growth.isPending ? (
+            [1, 2, 3, 4].map((i) => <StatSkeleton key={i} />)
+          ) : (
+            <>
+              <Stat
+                title="Members"
+                value={totals?.members ?? 0}
+                subtitle="All time"
+              />
+              <Stat
+                title="Active now"
+                value={totals?.activeMembers ?? 0}
+                subtitle="Memberships not ended"
+              />
+              <Stat
+                title="Bootcamp this term"
+                value={totals?.bootcampThisTerm ?? 0}
+                subtitle={totals ? termLabel(totals.currentTerm) : undefined}
+              />
+              <Stat
+                title="Bootcamp all time"
+                value={totals?.bootcampAllTime ?? 0}
+                subtitle={
+                  totals?.members
+                    ? `${Math.round((totals.bootcampAllTime / totals.members) * 100)}% of members`
+                    : undefined
+                }
+              />
+            </>
+          )}
+        </dl>
+
+        {/* Growth */}
+        <div className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+          <div className="mb-4 flex flex-wrap items-baseline justify-between gap-3">
+            <h3 className={itemTitle}>Members and bootcamp, running total</h3>
+            {/* Identity never rests on colour alone. */}
+            <ul className="flex flex-wrap items-center gap-x-5 gap-y-1">
+              <li className="flex items-center gap-2 text-[13px] text-[var(--text-muted)]">
+                <Swatch color="var(--accent)" />
+                Members
+              </li>
+              <li className="flex items-center gap-2 text-[13px] text-[var(--text-muted)]">
+                <Swatch color="var(--text-primary)" dashed />
+                Bootcamp members
+              </li>
+            </ul>
+          </div>
+          <div className="h-72">
+            {ready ? (
+              <Line
+                data={growthData}
+                options={options}
+                aria-label="Running total of members and of bootcamp members, by month"
+              />
+            ) : (
+              <ChartSkeleton />
+            )}
+          </div>
+          <p className={`mt-3 max-w-2xl ${meta}`}>
+            A bootcamp member counts from the month they joined the club, not
+            the month they bought the add-on. Only the term they bought is
+            recorded.
+          </p>
+        </div>
+
+        <div className="mt-10 grid gap-10 border-t border-[var(--border-subtle)] pt-6 lg:grid-cols-2">
+          <div>
+            <h3 className={`mb-4 ${itemTitle}`}>New members per month</h3>
+            <div className="h-64">
+              {ready ? (
+                <Bar
+                  data={joinedData}
+                  options={options}
+                  aria-label="Members who joined, by month"
+                />
+              ) : (
+                <ChartSkeleton />
+              )}
+            </div>
+          </div>
+
+          <div>
+            <h3 className={`mb-4 ${itemTitle}`}>Bootcamp enrolment per term</h3>
+            <div className="h-64">
+              {!ready ? (
+                <ChartSkeleton />
+              ) : terms.length === 0 ? (
+                <p className="flex h-full items-center justify-center text-[15px] text-[var(--text-muted)]">
+                  Enrolment per term appears here once someone joins a bootcamp.
+                </p>
+              ) : (
+                <Bar
+                  data={termData}
+                  options={options}
+                  aria-label="Bootcamp enrolment, by term"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8">
+          <button
+            type="button"
+            onClick={() => setShowTable((open) => !open)}
+            aria-expanded={showTable}
+            className={btnSecondary}
+          >
+            {showTable ? "Hide the numbers" : "Show the numbers"}
+          </button>
+
+          {showTable && (
+            <div className="mt-4 overflow-x-auto border-y border-[var(--border-subtle)]">
+              <table className="w-full border-collapse text-[15px]">
+                <caption className="sr-only">
+                  The same twelve months as the charts above, as numbers.
+                </caption>
+                <thead>
+                  <tr className="border-b border-[var(--border-subtle)] text-left">
+                    <th scope="col" className={`${th} pl-0`}>
+                      Month
+                    </th>
+                    <th scope="col" className={`${th} text-right`}>
+                      Joined
+                    </th>
+                    <th scope="col" className={`${th} text-right`}>
+                      Members
+                    </th>
+                    <th scope="col" className={`${th} pr-0 text-right`}>
+                      Bootcamp members
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {months.map((row) => (
+                    <tr
+                      key={row.month}
+                      className="border-b border-[var(--border-subtle)] transition-colors last:border-b-0 hover:bg-[var(--bg-secondary)]"
+                    >
+                      <th
+                        scope="row"
+                        className="py-2.5 pr-4 text-left font-normal text-[var(--text-primary)]"
+                      >
+                        {monthLabel(row.month)}
+                      </th>
+                      <td className="px-4 py-2.5 text-right tabular-nums text-[var(--text-primary)]">
+                        {row.joined}
+                      </td>
+                      <td className="px-4 py-2.5 text-right tabular-nums text-[var(--text-primary)]">
+                        {row.members}
+                      </td>
+                      <td className="py-2.5 pl-4 text-right tabular-nums text-[var(--text-primary)]">
+                        {row.bootcampMembers}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Events and hackathons */}
+      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+        <h2 className={sectionTitle}>Events and hackathons</h2>
+        <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
+          {isLoading ? (
+            [1, 2, 3, 4, 5].map((i) => <StatSkeleton key={i} />)
+          ) : (
+            <>
+              <Stat
+                title="Participants"
+                value={stats?.totalParticipants || 0}
+                subtitle="Registered for a hackathon"
+              />
+              <Stat
+                title="Events hosted"
+                value={stats?.totalEvents || 0}
+                subtitle="Competitions and gatherings"
+              />
+              <Stat
+                title="Hackathons"
+                value={stats?.totalHackathons || 0}
+                subtitle="Active and upcoming"
+              />
+              <Stat
+                title="Badge scans today"
+                value={stats?.badgeScansToday || 0}
+                subtitle="Hackathon QR scans"
+              />
+              <Stat
+                title="Door check-ins today"
+                value={stats?.doorCheckinsToday || 0}
+                subtitle="Club event QR scans"
+              />
+            </>
+          )}
+        </dl>
+      </section>
+
+      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+        <h2 className={sectionTitle}>Live hackathon</h2>
+        <p className={`mt-2 max-w-2xl ${body}`}>
+          Editions that are open, registration-closed, or in progress. These
+          are the same counts the metrics endpoint publishes.
+        </p>
+        {live.isPending ? (
+          <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
+            {[1, 2, 3, 4].map((i) => (
+              <StatSkeleton key={i} />
+            ))}
+          </dl>
+        ) : !live.data?.length ? (
+          <p className={`mt-6 ${meta}`}>
+            No edition is open, registration-closed, or in progress.
+          </p>
+        ) : (
+          live.data.map((edition) => {
+            const judgingIdle =
+              edition.judgingActive &&
+              edition.judgingProjects > 0 &&
+              edition.votes === 0;
+            return (
+              <div key={edition.edition} className="mt-8">
+                <h3 className={itemTitle}>{edition.edition}</h3>
+                <p className={`mt-1 ${meta}`}>{phaseLabel(edition.phase)}</p>
+                {judgingIdle && (
+                  <p className="mt-3 max-w-2xl text-[15px] text-[var(--text-primary)]">
+                    Judging is on and no scores have landed.
+                  </p>
+                )}
+                <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
+                  <Stat
+                    title="Checked in"
+                    value={edition.participants.checked_in}
+                  />
+                  <Stat
+                    title="Approved"
+                    value={edition.participants.approved}
+                    subtitle="Not checked in yet"
+                  />
+                  <Stat
+                    title="Pending"
+                    value={edition.participants.pending}
+                  />
+                  <Stat title="Projects submitted" value={edition.projects} />
+                  <Stat
+                    title="Badge scans today"
+                    value={edition.checkinsToday}
+                    subtitle="Since midnight Eastern"
+                  />
+                  <Stat
+                    title="Judging tables"
+                    value={edition.judgingProjects}
+                  />
+                  <Stat title="Judge scores" value={edition.votes} />
+                </dl>
+                <p className={`mt-4 ${meta}`}>
+                  Waitlisted {edition.participants.waitlisted} · Rejected{" "}
+                  {edition.participants.rejected}
+                </p>
+              </div>
+            );
+          })
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/analytics/page.tsx b/sites/mainweb/app/(portal)/admin/analytics/page.tsx
index ea777b3d..df126184 100644
--- a/sites/mainweb/app/(portal)/admin/analytics/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/analytics/page.tsx
@@ -1,594 +1,16 @@
-"use client";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AnalyticsPage from "./AnalyticsPage";
 
-import { useEffect, useMemo, useRef, useState } from "react";
-import { loginHref } from "@/lib/safe-callback";
-import dynamic from "next/dynamic";
-import { useSession } from "next-auth/react";
-import { useTheme } from "next-themes";
-import { trpc } from "@/lib/trpc";
-import { useRouter } from "next/navigation";
-import {
-  btnSecondary,
-  itemTitle,
-  label,
-  meta,
-  body,
-  pageDek,
-  sectionTitle,
-} from "@/components/portal/ui";
-
-const Line = dynamic(() => import("react-chartjs-2").then((m) => m.Line), {
-  ssr: false,
-  loading: () => <ChartSkeleton />,
-});
-const Bar = dynamic(() => import("react-chartjs-2").then((m) => m.Bar), {
-  ssr: false,
-  loading: () => <ChartSkeleton />,
-});
-
-function ChartSkeleton() {
-  return (
-    <div
-      className="h-full w-full rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
-      aria-hidden
-    />
-  );
-}
-
-/** Admin pages carry a smaller headline than member pages. */
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)]";
-
-const th = "px-4 py-2.5 text-[13px] font-medium text-[var(--text-subtle)]";
-
-/**
- * Canvas cannot read a CSS variable, so the portal tokens are resolved to
- * literal colours here. Members draw in the accent, bootcamp in ink with a
- * dash, so the two lines differ by more than hue.
- */
-interface ChartTokens {
-  accent: string;
-  ink: string;
-  muted: string;
-  subtle: string;
-  grid: string;
-  card: string;
-  font: string;
-}
-
-function readTokens(element: HTMLElement): ChartTokens {
-  const root = getComputedStyle(document.documentElement);
-  const read = (name: string) => root.getPropertyValue(name).trim();
-  return {
-    accent: read("--accent"),
-    ink: read("--text-primary"),
-    muted: read("--text-muted"),
-    subtle: read("--text-subtle"),
-    grid: read("--border-subtle"),
-    card: read("--bg-card"),
-    font: getComputedStyle(element).fontFamily,
-  };
-}
-
-function phaseLabel(phase: string) {
-  if (phase === "open") return "Registration open";
-  if (phase === "closed") return "Registration closed";
-  if (phase === "in_progress") return "In progress";
-  return phase;
-}
-
-/** `2026-fall` is how it is stored; nobody should have to read it that way. */
-function termLabel(term: string) {
-  const [year, season] = term.split("-");
-  if (!year || !season) return term;
-  return `${season.charAt(0).toUpperCase()}${season.slice(1)} ${year}`;
-}
-
-/** `2026-01` becomes `Jan 26`. Twelve of these have to fit one axis. */
-function monthLabel(month: string) {
-  const [year, index] = month.split("-");
-  const date = new Date(Date.UTC(Number(year), Number(index) - 1, 1));
-  const name = date.toLocaleString("en-US", {
-    month: "short",
-    timeZone: "UTC",
-  });
-  return `${name} ${year?.slice(2)}`;
-}
-
-const statCell =
-  "sm:border-l sm:border-[var(--border-subtle)] sm:pl-6 sm:first:border-l-0 sm:first:pl-0";
-
-interface StatProps {
-  title: string;
-  value: string | number;
-  subtitle?: string;
-}
-
-function Stat({ title, value, subtitle }: StatProps) {
-  return (
-    <div className={statCell}>
-      <dt className={label}>{title}</dt>
-      <dd className="mt-1 font-[family-name:var(--font-display)] text-[32px] font-semibold leading-none tabular-nums text-[var(--text-primary)] md:text-[36px]">
-        {value}
-      </dd>
-      {subtitle && <dd className={`mt-1.5 ${meta}`}>{subtitle}</dd>}
-    </div>
-  );
-}
-
-function StatSkeleton() {
-  return (
-    <div className={statCell} aria-hidden>
-      <div className="h-4 w-24 rounded-[var(--radius-sm)] bg-[var(--bg-secondary)]" />
-      <div className="mt-2 h-9 w-16 rounded-[var(--radius-sm)] bg-[var(--bg-secondary)]" />
-    </div>
-  );
-}
-
-/** A short line in the series colour, dashed for the dashed series. */
-function Swatch({ color, dashed = false }: { color: string; dashed?: boolean }) {
+export default function Page() {
   return (
-    <span
-      aria-hidden
-      className={`inline-block w-5 border-t-2 ${dashed ? "border-dashed" : "border-solid"}`}
-      style={{ borderColor: color }}
-    />
-  );
-}
-
-export default function AnalyticsPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  const { resolvedTheme } = useTheme();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [chartsReady, setChartsReady] = useState(false);
-  const [tokens, setTokens] = useState<ChartTokens | null>(null);
-  const [showTable, setShowTable] = useState(false);
-
-  const { data: stats, isLoading } = trpc.admin.analyticsOverview.useQuery(
-    undefined,
-    // Matched to the server's cache entry. Polling faster only produced
-    // repeated cache hits and a request per tab per 5s for numbers that move
-    // on a much slower clock.
-    { enabled: !!session, refetchInterval: 15000 },
-  );
-
-  const live = trpc.admin.hackathonLive.useQuery(undefined, {
-    enabled: !!session,
-    refetchInterval: 15000,
-  });
-
-  // Growth moves on a monthly clock, so it is fetched once rather than polled.
-  const growth = trpc.admin.growth.useQuery(undefined, { enabled: !!session });
-
-  useEffect(() => {
-    import("chart.js").then(
-      ({
-        Chart,
-        LineElement,
-        PointElement,
-        BarElement,
-        CategoryScale,
-        LinearScale,
-        Tooltip,
-      }) => {
-        Chart.register(
-          LineElement,
-          PointElement,
-          BarElement,
-          CategoryScale,
-          LinearScale,
-          Tooltip,
-        );
-        setChartsReady(true);
-      },
-    );
-  }, []);
-
-  // next-themes swaps the class on <html> in its own effect, which runs after
-  // this one, so the tokens are read a frame later when the new theme is live.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      if (containerRef.current) setTokens(readTokens(containerRef.current));
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [resolvedTheme]);
-
-  const options = useMemo(() => {
-    if (!tokens) return undefined;
-    const font = { family: tokens.font, size: 12 };
-    return {
-      responsive: true,
-      maintainAspectRatio: false,
-      interaction: { mode: "index" as const, intersect: false },
-      plugins: {
-        // The legend is rendered as HTML above the chart, where it can carry a
-        // line style as well as a colour.
-        legend: { display: false },
-        tooltip: {
-          backgroundColor: tokens.card,
-          borderColor: tokens.grid,
-          borderWidth: 1,
-          cornerRadius: 4,
-          titleColor: tokens.ink,
-          bodyColor: tokens.muted,
-          titleFont: { ...font, weight: 600 },
-          bodyFont: font,
-          padding: 10,
-        },
-      },
-      scales: {
-        x: {
-          grid: { display: false },
-          border: { color: tokens.grid },
-          ticks: { color: tokens.subtle, font },
-        },
-        y: {
-          beginAtZero: true,
-          grid: { color: tokens.grid },
-          border: { display: false },
-          ticks: { color: tokens.subtle, font, precision: 0 },
-        },
-      },
-    };
-  }, [tokens]);
-
-  if (status === "unauthenticated") {
-    router.push(loginHref());
-    return null;
-  }
-
-  const months = growth.data?.months ?? [];
-  const terms = growth.data?.terms ?? [];
-  const totals = growth.data?.totals;
-  const ready = chartsReady && !!tokens && !growth.isPending;
-
-  const growthData = {
-    labels: months.map((row) => monthLabel(row.month)),
-    datasets: [
-      {
-        label: "Members",
-        data: months.map((row) => row.members),
-        borderColor: tokens?.accent,
-        backgroundColor: tokens?.accent,
-        borderWidth: 2,
-        pointRadius: 3,
-        pointHoverRadius: 5,
-        pointStyle: "circle" as const,
-        tension: 0.25,
-      },
-      {
-        label: "Bootcamp members",
-        data: months.map((row) => row.bootcampMembers),
-        borderColor: tokens?.ink,
-        backgroundColor: tokens?.ink,
-        borderWidth: 2,
-        // Dash and marker shape, not colour alone, separate the two lines.
-        borderDash: [6, 4],
-        pointRadius: 3,
-        pointHoverRadius: 5,
-        pointStyle: "rectRot" as const,
-        tension: 0.25,
-      },
-    ],
-  };
-
-  const joinedData = {
-    labels: months.map((row) => monthLabel(row.month)),
-    datasets: [
-      {
-        label: "Joined",
-        data: months.map((row) => row.joined),
-        backgroundColor: tokens?.accent,
-        borderRadius: 2,
-        maxBarThickness: 56,
-        borderSkipped: "bottom" as const,
-      },
-    ],
-  };
-
-  const termData = {
-    labels: terms.map((row) => termLabel(row.term)),
-    datasets: [
-      {
-        label: "Enrolled",
-        data: terms.map((row) => row.enrolled),
-        // Muted, not ink: a full-strength ink bar is a near-white slab in
-        // the night edition.
-        backgroundColor: tokens?.muted,
-        borderRadius: 2,
-        // One term would otherwise stretch to the whole chart width.
-        maxBarThickness: 56,
-        borderSkipped: "bottom" as const,
-      },
-    ],
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      className="mx-auto w-full max-w-7xl px-5 py-10 sm:px-8 md:px-12 md:py-14"
+    <PrefetchedPage
+      reads={(c) => [
+        ["admin.analyticsOverview", undefined, c.admin.analyticsOverview()],
+        ["admin.hackathonLive", undefined, c.admin.hackathonLive()],
+        ["admin.growth", undefined, c.admin.growth()],
+      ]}
     >
-      <header>
-        <h1 className={adminTitle}>Club growth</h1>
-        <p className={pageDek}>
-          Membership, bootcamp enrolment, and turnout across every event and
-          hackathon.
-        </p>
-      </header>
-
-      {/* Membership */}
-      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-        <h2 className={sectionTitle}>Membership</h2>
-        <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-4">
-          {growth.isPending ? (
-            [1, 2, 3, 4].map((i) => <StatSkeleton key={i} />)
-          ) : (
-            <>
-              <Stat
-                title="Members"
-                value={totals?.members ?? 0}
-                subtitle="All time"
-              />
-              <Stat
-                title="Active now"
-                value={totals?.activeMembers ?? 0}
-                subtitle="Memberships not ended"
-              />
-              <Stat
-                title="Bootcamp this term"
-                value={totals?.bootcampThisTerm ?? 0}
-                subtitle={totals ? termLabel(totals.currentTerm) : undefined}
-              />
-              <Stat
-                title="Bootcamp all time"
-                value={totals?.bootcampAllTime ?? 0}
-                subtitle={
-                  totals?.members
-                    ? `${Math.round((totals.bootcampAllTime / totals.members) * 100)}% of members`
-                    : undefined
-                }
-              />
-            </>
-          )}
-        </dl>
-
-        {/* Growth */}
-        <div className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-          <div className="mb-4 flex flex-wrap items-baseline justify-between gap-3">
-            <h3 className={itemTitle}>Members and bootcamp, running total</h3>
-            {/* Identity never rests on colour alone. */}
-            <ul className="flex flex-wrap items-center gap-x-5 gap-y-1">
-              <li className="flex items-center gap-2 text-[13px] text-[var(--text-muted)]">
-                <Swatch color="var(--accent)" />
-                Members
-              </li>
-              <li className="flex items-center gap-2 text-[13px] text-[var(--text-muted)]">
-                <Swatch color="var(--text-primary)" dashed />
-                Bootcamp members
-              </li>
-            </ul>
-          </div>
-          <div className="h-72">
-            {ready ? (
-              <Line
-                data={growthData}
-                options={options}
-                aria-label="Running total of members and of bootcamp members, by month"
-              />
-            ) : (
-              <ChartSkeleton />
-            )}
-          </div>
-          <p className={`mt-3 max-w-2xl ${meta}`}>
-            A bootcamp member counts from the month they joined the club, not
-            the month they bought the add-on. Only the term they bought is
-            recorded.
-          </p>
-        </div>
-
-        <div className="mt-10 grid gap-10 border-t border-[var(--border-subtle)] pt-6 lg:grid-cols-2">
-          <div>
-            <h3 className={`mb-4 ${itemTitle}`}>New members per month</h3>
-            <div className="h-64">
-              {ready ? (
-                <Bar
-                  data={joinedData}
-                  options={options}
-                  aria-label="Members who joined, by month"
-                />
-              ) : (
-                <ChartSkeleton />
-              )}
-            </div>
-          </div>
-
-          <div>
-            <h3 className={`mb-4 ${itemTitle}`}>Bootcamp enrolment per term</h3>
-            <div className="h-64">
-              {!ready ? (
-                <ChartSkeleton />
-              ) : terms.length === 0 ? (
-                <p className="flex h-full items-center justify-center text-[15px] text-[var(--text-muted)]">
-                  Enrolment per term appears here once someone joins a bootcamp.
-                </p>
-              ) : (
-                <Bar
-                  data={termData}
-                  options={options}
-                  aria-label="Bootcamp enrolment, by term"
-                />
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-8">
-          <button
-            type="button"
-            onClick={() => setShowTable((open) => !open)}
-            aria-expanded={showTable}
-            className={btnSecondary}
-          >
-            {showTable ? "Hide the numbers" : "Show the numbers"}
-          </button>
-
-          {showTable && (
-            <div className="mt-4 overflow-x-auto border-y border-[var(--border-subtle)]">
-              <table className="w-full border-collapse text-[15px]">
-                <caption className="sr-only">
-                  The same twelve months as the charts above, as numbers.
-                </caption>
-                <thead>
-                  <tr className="border-b border-[var(--border-subtle)] text-left">
-                    <th scope="col" className={`${th} pl-0`}>
-                      Month
-                    </th>
-                    <th scope="col" className={`${th} text-right`}>
-                      Joined
-                    </th>
-                    <th scope="col" className={`${th} text-right`}>
-                      Members
-                    </th>
-                    <th scope="col" className={`${th} pr-0 text-right`}>
-                      Bootcamp members
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {months.map((row) => (
-                    <tr
-                      key={row.month}
-                      className="border-b border-[var(--border-subtle)] transition-colors last:border-b-0 hover:bg-[var(--bg-secondary)]"
-                    >
-                      <th
-                        scope="row"
-                        className="py-2.5 pr-4 text-left font-normal text-[var(--text-primary)]"
-                      >
-                        {monthLabel(row.month)}
-                      </th>
-                      <td className="px-4 py-2.5 text-right tabular-nums text-[var(--text-primary)]">
-                        {row.joined}
-                      </td>
-                      <td className="px-4 py-2.5 text-right tabular-nums text-[var(--text-primary)]">
-                        {row.members}
-                      </td>
-                      <td className="py-2.5 pl-4 text-right tabular-nums text-[var(--text-primary)]">
-                        {row.bootcampMembers}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </section>
-
-      {/* Events and hackathons */}
-      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-        <h2 className={sectionTitle}>Events and hackathons</h2>
-        <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
-          {isLoading ? (
-            [1, 2, 3, 4, 5].map((i) => <StatSkeleton key={i} />)
-          ) : (
-            <>
-              <Stat
-                title="Participants"
-                value={stats?.totalParticipants || 0}
-                subtitle="Registered for a hackathon"
-              />
-              <Stat
-                title="Events hosted"
-                value={stats?.totalEvents || 0}
-                subtitle="Competitions and gatherings"
-              />
-              <Stat
-                title="Hackathons"
-                value={stats?.totalHackathons || 0}
-                subtitle="Active and upcoming"
-              />
-              <Stat
-                title="Badge scans today"
-                value={stats?.badgeScansToday || 0}
-                subtitle="Hackathon QR scans"
-              />
-              <Stat
-                title="Door check-ins today"
-                value={stats?.doorCheckinsToday || 0}
-                subtitle="Club event QR scans"
-              />
-            </>
-          )}
-        </dl>
-      </section>
-
-      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-        <h2 className={sectionTitle}>Live hackathon</h2>
-        <p className={`mt-2 max-w-2xl ${body}`}>
-          Editions that are open, registration-closed, or in progress. These
-          are the same counts the metrics endpoint publishes.
-        </p>
-        {live.isPending ? (
-          <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
-            {[1, 2, 3, 4].map((i) => (
-              <StatSkeleton key={i} />
-            ))}
-          </dl>
-        ) : !live.data?.length ? (
-          <p className={`mt-6 ${meta}`}>
-            No edition is open, registration-closed, or in progress.
-          </p>
-        ) : (
-          live.data.map((edition) => {
-            const judgingIdle =
-              edition.judgingActive &&
-              edition.judgingProjects > 0 &&
-              edition.votes === 0;
-            return (
-              <div key={edition.edition} className="mt-8">
-                <h3 className={itemTitle}>{edition.edition}</h3>
-                <p className={`mt-1 ${meta}`}>{phaseLabel(edition.phase)}</p>
-                {judgingIdle && (
-                  <p className="mt-3 max-w-2xl text-[15px] text-[var(--text-primary)]">
-                    Judging is on and no scores have landed.
-                  </p>
-                )}
-                <dl className="mt-6 grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-4">
-                  <Stat
-                    title="Checked in"
-                    value={edition.participants.checked_in}
-                  />
-                  <Stat
-                    title="Approved"
-                    value={edition.participants.approved}
-                    subtitle="Not checked in yet"
-                  />
-                  <Stat
-                    title="Pending"
-                    value={edition.participants.pending}
-                  />
-                  <Stat title="Projects submitted" value={edition.projects} />
-                  <Stat
-                    title="Badge scans today"
-                    value={edition.checkinsToday}
-                    subtitle="Since midnight Eastern"
-                  />
-                  <Stat
-                    title="Judging tables"
-                    value={edition.judgingProjects}
-                  />
-                  <Stat title="Judge scores" value={edition.votes} />
-                </dl>
-                <p className={`mt-4 ${meta}`}>
-                  Waitlisted {edition.participants.waitlisted} · Rejected{" "}
-                  {edition.participants.rejected}
-                </p>
-              </div>
-            );
-          })
-        )}
-      </section>
-    </div>
+      <AnalyticsPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx b/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
index ec8ad6e8..e8e65285 100644
--- a/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
@@ -1,5 +1,6 @@
 import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
 import { decodeHackathonParam } from "@/lib/hackathon-slug";
+import type { Prefetch } from "@/lib/portal-bootstrap.server";
 import AdminHackathonDashboard from "./AdminHackathonPage";
 
 // The Applications tab is what the dashboard opens on; a link to another tab
@@ -20,7 +21,8 @@ export default async function Page({
         const found = await hackathon.catch(() => null);
         if (!found) return [["hackathon.getById", { id }, hackathon]];
         const hackathonId = found.id;
-        return [
+        const { status } = found;
+        const entries: Prefetch[] = [
           ["hackathon.getById", { id }, hackathon],
           ["hackathon.getById", { id: hackathonId }, hackathon],
           [
@@ -38,6 +40,27 @@ export default async function Page({
             c.hackathon.analytics({ hackathonId }),
           ],
         ];
+        // The Applications tab shows the interest list for an announced
+        // edition and the acceptance waves for any other.
+        if (status !== "announced") {
+          entries.push([
+            "hackathon.waveStatus",
+            { hackathonId },
+            c.hackathon.waveStatus({ hackathonId }),
+          ]);
+        }
+        if (
+          status === "announced" ||
+          status === "open" ||
+          status === "in_progress"
+        ) {
+          entries.push([
+            "hackathon.registrationOpenEmailStatus",
+            { hackathonId },
+            c.hackathon.registrationOpenEmailStatus({ hackathonId }),
+          ]);
+        }
+        return entries;
       }}
     >
       <AdminHackathonDashboard />
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/page.tsx b/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
index 7c654d88..ed7ade84 100644
--- a/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
@@ -1,13 +1,27 @@
 import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import type { Prefetch } from "@/lib/portal-bootstrap.server";
 import AdminHackathonsPage from "./AdminHackathonsPage";
 
 export default function Page() {
   return (
     <PrefetchedPage
-      reads={(c) => [
-        ["hackathon.listAll", undefined, c.hackathon.listAll()],
-        ["hackathon.listBans", undefined, c.hackathon.listBans()],
-      ]}
+      reads={async (c) => {
+        const all = c.hackathon.listAll();
+        const entries: Prefetch[] = [
+          ["hackathon.listAll", undefined, all],
+          ["hackathon.listBans", undefined, c.hackathon.listBans()],
+        ];
+        // Each card reads its hackathon's events.
+        const hackathons = await all.catch(() => []);
+        for (const { id: hackathonId } of hackathons) {
+          entries.push([
+            "hackathon.getEvents",
+            { hackathonId },
+            c.hackathon.getEvents({ hackathonId }),
+          ]);
+        }
+        return entries;
+      }}
     >
       <AdminHackathonsPage />
     </PrefetchedPage>
diff --git a/sites/mainweb/app/(portal)/admin/initiatives/AdminInitiativesPage.tsx b/sites/mainweb/app/(portal)/admin/initiatives/AdminInitiativesPage.tsx
new file mode 100644
index 00000000..da974bf0
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/initiatives/AdminInitiativesPage.tsx
@@ -0,0 +1,302 @@
+"use client";
+
+import { useState } from "react";
+import { useSession } from "next-auth/react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { trpc } from "@/lib/trpc";
+import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
+import type { RouterOutputs } from "@query/api";
+import {
+  body,
+  btnDanger,
+  btnInk,
+  btnPrimary,
+  btnSecondary,
+  fieldLabel,
+  input,
+  itemTitle,
+  meta,
+  page,
+  pageDek,
+  sectionTitle,
+} from "@/components/portal/ui";
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
+
+/**
+ * Who runs club initiatives.
+ *
+ * Granting takes a user id rather than an email search: this reuses the
+ * attendees list every officer already works from, and a leader has to have
+ * signed in at least once to have an id at all.
+ */
+function ProposalRow({
+  proposal,
+}: {
+  proposal: RouterOutputs["initiative"]["listProposals"][number];
+}) {
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+  const [note, setNote] = useState("");
+  const [declining, setDeclining] = useState(false);
+
+  const review = trpc.initiative.reviewProposal.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.initiative.listProposals.invalidate(),
+        // Approving mints a project leader, so that list moves too.
+        utils.initiative.listLeaders.invalidate(),
+      ]);
+    },
+  });
+
+  return (
+    <div className="py-6">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <h3 className={itemTitle}>{proposal.title}</h3>
+          <p className={`${meta} mt-0.5 break-all`}>
+            {proposal.proposerName ?? proposal.proposerEmail} ·{" "}
+            {proposal.proposerEmail}
+          </p>
+          {proposal.summary && (
+            <p className="mt-3 text-[15px] text-[var(--text-secondary)]">
+              {proposal.summary}
+            </p>
+          )}
+          {proposal.description && (
+            <p className={`${body} mt-2 whitespace-pre-line`}>
+              {proposal.description}
+            </p>
+          )}
+          <p className={`${meta} mt-3`}>
+            {proposal.commitment ?? "No commitment given"} ·{" "}
+            {proposal.maxMembers === null
+              ? "no team cap"
+              : `cap ${proposal.maxMembers}`}
+          </p>
+        </div>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          <button
+            type="button"
+            disabled={readOnly || review.isPending}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            onClick={() =>
+              review.mutate({ id: proposal.id, decision: "approve" })
+            }
+            className={btnInk}
+          >
+            Approve
+          </button>
+          <button
+            type="button"
+            disabled={readOnly || review.isPending}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            onClick={() => setDeclining((prev) => !prev)}
+            className={btnSecondary}
+          >
+            Decline
+          </button>
+        </div>
+      </div>
+
+      {/* A decline without a reason is the thing a member can do nothing with,
+          so the note is asked for at the moment of declining. */}
+      {declining && (
+        <div className="mt-4 border-t border-[var(--border-subtle)] pt-4">
+          <label htmlFor={`note-${proposal.id}`} className={fieldLabel}>
+            Why (shown to them)
+          </label>
+          <textarea
+            id={`note-${proposal.id}`}
+            rows={2}
+            maxLength={1000}
+            value={note}
+            onChange={(event) => setNote(event.target.value)}
+            placeholder="Too close to an existing project, needs a clearer scope, …"
+            className={`${input} min-h-11`}
+          />
+          <button
+            type="button"
+            disabled={readOnly || review.isPending}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            onClick={() =>
+              review.mutate({
+                id: proposal.id,
+                decision: "decline",
+                note: note.trim() || undefined,
+              })
+            }
+            className={`${btnDanger} mt-3`}
+          >
+            Confirm decline
+          </button>
+        </div>
+      )}
+
+      {review.error && (
+        <p role="alert" className="mt-3 text-[13px] text-[var(--danger)]">
+          {review.error.message}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default function AdminInitiativesPage() {
+  const { data: session, status } = useSession();
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+  const [userId, setUserId] = useState("");
+
+  const leaders = trpc.initiative.listLeaders.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const proposals = trpc.initiative.listProposals.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  const setLeader = trpc.initiative.setLeader.useMutation({
+    onSuccess: async () => {
+      setUserId("");
+      await utils.initiative.listLeaders.invalidate();
+    },
+  });
+
+  if (status === "loading" || leaders.isPending) return <LoadingScreen />;
+
+  if (leaders.error) {
+    return (
+      <div className={page}>
+        <h1 className={adminTitle}>Project leaders</h1>
+        <p role="alert" className="mt-3 text-[15px] text-[var(--danger)]">
+          {leaders.error.message}
+        </p>
+      </div>
+    );
+  }
+
+  const rows = leaders.data ?? [];
+
+  return (
+    <div className={page}>
+      <h1 className={adminTitle}>Project leaders</h1>
+      <p className={pageDek}>
+        A project leader can post projects and pick who joins them. It grants
+        nothing else; admin screens stay admin-only.
+      </p>
+
+      <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+        <h2 className={sectionTitle}>
+          Proposals waiting on you
+          {proposals.data && proposals.data.length > 0 ? (
+            <span className="ml-2 text-[var(--text-subtle)] tabular-nums">
+              {proposals.data.length}
+            </span>
+          ) : null}
+        </h2>
+        {proposals.error ? (
+          <p role="alert" className="mt-3 text-[13px] text-[var(--danger)]">
+            {proposals.error.message}
+          </p>
+        ) : (proposals.data ?? []).length > 0 ? (
+          <div className="mt-2 divide-y divide-[var(--border-subtle)]">
+            {(proposals.data ?? []).map((proposal) => (
+              <ProposalRow key={proposal.id} proposal={proposal} />
+            ))}
+          </div>
+        ) : (
+          <p className={`${body} mt-3`}>
+            Nothing waiting. Members pitch projects from their Projects page;
+            approving one makes them a project leader.
+          </p>
+        )}
+      </section>
+
+      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+        <h2 className={sectionTitle}>Project leaders</h2>
+
+        <form
+          className="mt-4 flex flex-col sm:flex-row sm:items-end gap-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (!userId.trim()) return;
+            setLeader.mutate({ userId: userId.trim(), isLeader: true });
+          }}
+        >
+          <div className="min-w-0 sm:flex-1">
+            <label htmlFor="leader-user-id" className={fieldLabel}>
+              Grant by user id
+            </label>
+            <input
+              id="leader-user-id"
+              value={userId}
+              onChange={(event) => setUserId(event.target.value)}
+              placeholder="User id from the attendees list"
+              className={`${input} min-h-11 font-mono`}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={readOnly || setLeader.isPending}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            className={btnPrimary}
+          >
+            {setLeader.isPending ? "Saving…" : "Make leader"}
+          </button>
+        </form>
+
+        {setLeader.error && (
+          <p role="alert" className="mt-3 text-[13px] text-[var(--danger)]">
+            {setLeader.error.message}
+          </p>
+        )}
+
+        {rows.length > 0 ? (
+          <div className="mt-8 border-t border-[var(--border-subtle)] divide-y divide-[var(--border-subtle)]">
+            {rows.map((leader) => (
+              <div
+                key={leader.id}
+                className="py-3 flex flex-wrap items-center justify-between gap-4"
+              >
+                <div className="min-w-0 flex-1">
+                  <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+                    {leader.name ?? leader.email}
+                    {!leader.isActive && (
+                      <span className="ml-2 text-[13px] font-normal text-[var(--text-subtle)]">
+                        revoked
+                      </span>
+                    )}
+                  </p>
+                  <p className={`${meta} break-all`}>{leader.email}</p>
+                </div>
+
+                <button
+                  type="button"
+                  disabled={readOnly || setLeader.isPending}
+                  title={readOnly ? READ_ONLY_TITLE : undefined}
+                  onClick={() =>
+                    setLeader.mutate({
+                      userId: leader.userId,
+                      isLeader: !leader.isActive,
+                    })
+                  }
+                  className={leader.isActive ? btnDanger : btnSecondary}
+                >
+                  {leader.isActive ? "Revoke" : "Restore"}
+                </button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className={`${body} mt-8`}>
+            No leaders yet. Grant the role above and it takes effect on their
+            next request.
+          </p>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/initiatives/page.tsx b/sites/mainweb/app/(portal)/admin/initiatives/page.tsx
index da974bf0..d77b540f 100644
--- a/sites/mainweb/app/(portal)/admin/initiatives/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/initiatives/page.tsx
@@ -1,302 +1,15 @@
-"use client";
-
-import { useState } from "react";
-import { useSession } from "next-auth/react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { trpc } from "@/lib/trpc";
-import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
-import type { RouterOutputs } from "@query/api";
-import {
-  body,
-  btnDanger,
-  btnInk,
-  btnPrimary,
-  btnSecondary,
-  fieldLabel,
-  input,
-  itemTitle,
-  meta,
-  page,
-  pageDek,
-  sectionTitle,
-} from "@/components/portal/ui";
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
-
-/**
- * Who runs club initiatives.
- *
- * Granting takes a user id rather than an email search: this reuses the
- * attendees list every officer already works from, and a leader has to have
- * signed in at least once to have an id at all.
- */
-function ProposalRow({
-  proposal,
-}: {
-  proposal: RouterOutputs["initiative"]["listProposals"][number];
-}) {
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-  const [note, setNote] = useState("");
-  const [declining, setDeclining] = useState(false);
-
-  const review = trpc.initiative.reviewProposal.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.initiative.listProposals.invalidate(),
-        // Approving mints a project leader, so that list moves too.
-        utils.initiative.listLeaders.invalidate(),
-      ]);
-    },
-  });
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminInitiativesPage from "./AdminInitiativesPage";
 
+export default function Page() {
   return (
-    <div className="py-6">
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <h3 className={itemTitle}>{proposal.title}</h3>
-          <p className={`${meta} mt-0.5 break-all`}>
-            {proposal.proposerName ?? proposal.proposerEmail} ·{" "}
-            {proposal.proposerEmail}
-          </p>
-          {proposal.summary && (
-            <p className="mt-3 text-[15px] text-[var(--text-secondary)]">
-              {proposal.summary}
-            </p>
-          )}
-          {proposal.description && (
-            <p className={`${body} mt-2 whitespace-pre-line`}>
-              {proposal.description}
-            </p>
-          )}
-          <p className={`${meta} mt-3`}>
-            {proposal.commitment ?? "No commitment given"} ·{" "}
-            {proposal.maxMembers === null
-              ? "no team cap"
-              : `cap ${proposal.maxMembers}`}
-          </p>
-        </div>
-
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
-          <button
-            type="button"
-            disabled={readOnly || review.isPending}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            onClick={() =>
-              review.mutate({ id: proposal.id, decision: "approve" })
-            }
-            className={btnInk}
-          >
-            Approve
-          </button>
-          <button
-            type="button"
-            disabled={readOnly || review.isPending}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            onClick={() => setDeclining((prev) => !prev)}
-            className={btnSecondary}
-          >
-            Decline
-          </button>
-        </div>
-      </div>
-
-      {/* A decline without a reason is the thing a member can do nothing with,
-          so the note is asked for at the moment of declining. */}
-      {declining && (
-        <div className="mt-4 border-t border-[var(--border-subtle)] pt-4">
-          <label htmlFor={`note-${proposal.id}`} className={fieldLabel}>
-            Why (shown to them)
-          </label>
-          <textarea
-            id={`note-${proposal.id}`}
-            rows={2}
-            maxLength={1000}
-            value={note}
-            onChange={(event) => setNote(event.target.value)}
-            placeholder="Too close to an existing project, needs a clearer scope, …"
-            className={`${input} min-h-11`}
-          />
-          <button
-            type="button"
-            disabled={readOnly || review.isPending}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            onClick={() =>
-              review.mutate({
-                id: proposal.id,
-                decision: "decline",
-                note: note.trim() || undefined,
-              })
-            }
-            className={`${btnDanger} mt-3`}
-          >
-            Confirm decline
-          </button>
-        </div>
-      )}
-
-      {review.error && (
-        <p role="alert" className="mt-3 text-[13px] text-[var(--danger)]">
-          {review.error.message}
-        </p>
-      )}
-    </div>
-  );
-}
-
-export default function AdminInitiativesPage() {
-  const { data: session, status } = useSession();
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-  const [userId, setUserId] = useState("");
-
-  const leaders = trpc.initiative.listLeaders.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const proposals = trpc.initiative.listProposals.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  const setLeader = trpc.initiative.setLeader.useMutation({
-    onSuccess: async () => {
-      setUserId("");
-      await utils.initiative.listLeaders.invalidate();
-    },
-  });
-
-  if (status === "loading" || leaders.isPending) return <LoadingScreen />;
-
-  if (leaders.error) {
-    return (
-      <div className={page}>
-        <h1 className={adminTitle}>Project leaders</h1>
-        <p role="alert" className="mt-3 text-[15px] text-[var(--danger)]">
-          {leaders.error.message}
-        </p>
-      </div>
-    );
-  }
-
-  const rows = leaders.data ?? [];
-
-  return (
-    <div className={page}>
-      <h1 className={adminTitle}>Project leaders</h1>
-      <p className={pageDek}>
-        A project leader can post projects and pick who joins them. It grants
-        nothing else; admin screens stay admin-only.
-      </p>
-
-      <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-        <h2 className={sectionTitle}>
-          Proposals waiting on you
-          {proposals.data && proposals.data.length > 0 ? (
-            <span className="ml-2 text-[var(--text-subtle)] tabular-nums">
-              {proposals.data.length}
-            </span>
-          ) : null}
-        </h2>
-        {proposals.error ? (
-          <p role="alert" className="mt-3 text-[13px] text-[var(--danger)]">
-            {proposals.error.message}
-          </p>
-        ) : (proposals.data ?? []).length > 0 ? (
-          <div className="mt-2 divide-y divide-[var(--border-subtle)]">
-            {(proposals.data ?? []).map((proposal) => (
-              <ProposalRow key={proposal.id} proposal={proposal} />
-            ))}
-          </div>
-        ) : (
-          <p className={`${body} mt-3`}>
-            Nothing waiting. Members pitch projects from their Projects page;
-            approving one makes them a project leader.
-          </p>
-        )}
-      </section>
-
-      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-        <h2 className={sectionTitle}>Project leaders</h2>
-
-        <form
-          className="mt-4 flex flex-col sm:flex-row sm:items-end gap-3"
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (!userId.trim()) return;
-            setLeader.mutate({ userId: userId.trim(), isLeader: true });
-          }}
-        >
-          <div className="min-w-0 sm:flex-1">
-            <label htmlFor="leader-user-id" className={fieldLabel}>
-              Grant by user id
-            </label>
-            <input
-              id="leader-user-id"
-              value={userId}
-              onChange={(event) => setUserId(event.target.value)}
-              placeholder="User id from the attendees list"
-              className={`${input} min-h-11 font-mono`}
-            />
-          </div>
-          <button
-            type="submit"
-            disabled={readOnly || setLeader.isPending}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            className={btnPrimary}
-          >
-            {setLeader.isPending ? "Saving…" : "Make leader"}
-          </button>
-        </form>
-
-        {setLeader.error && (
-          <p role="alert" className="mt-3 text-[13px] text-[var(--danger)]">
-            {setLeader.error.message}
-          </p>
-        )}
-
-        {rows.length > 0 ? (
-          <div className="mt-8 border-t border-[var(--border-subtle)] divide-y divide-[var(--border-subtle)]">
-            {rows.map((leader) => (
-              <div
-                key={leader.id}
-                className="py-3 flex flex-wrap items-center justify-between gap-4"
-              >
-                <div className="min-w-0 flex-1">
-                  <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-                    {leader.name ?? leader.email}
-                    {!leader.isActive && (
-                      <span className="ml-2 text-[13px] font-normal text-[var(--text-subtle)]">
-                        revoked
-                      </span>
-                    )}
-                  </p>
-                  <p className={`${meta} break-all`}>{leader.email}</p>
-                </div>
-
-                <button
-                  type="button"
-                  disabled={readOnly || setLeader.isPending}
-                  title={readOnly ? READ_ONLY_TITLE : undefined}
-                  onClick={() =>
-                    setLeader.mutate({
-                      userId: leader.userId,
-                      isLeader: !leader.isActive,
-                    })
-                  }
-                  className={leader.isActive ? btnDanger : btnSecondary}
-                >
-                  {leader.isActive ? "Revoke" : "Restore"}
-                </button>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <p className={`${body} mt-8`}>
-            No leaders yet. Grant the role above and it takes effect on their
-            next request.
-          </p>
-        )}
-      </section>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["initiative.listLeaders", undefined, c.initiative.listLeaders()],
+        ["initiative.listProposals", undefined, c.initiative.listProposals()],
+      ]}
+    >
+      <AdminInitiativesPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/projects/ProjectsPage.tsx b/sites/mainweb/app/(portal)/admin/projects/ProjectsPage.tsx
new file mode 100644
index 00000000..64da30b4
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/projects/ProjectsPage.tsx
@@ -0,0 +1,312 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { loginHref } from "@/lib/safe-callback";
+import { trpc } from "@/lib/trpc";
+import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { skipToken } from "@tanstack/react-query";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  fieldLabel,
+  input,
+  itemTitle,
+  meta,
+  object,
+  page,
+  pageDek,
+  status as statusClass,
+} from "@/components/portal/ui";
+import type { Tone } from "@/components/portal/ui";
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
+
+export default function ProjectsPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const readOnly = useReadOnly();
+
+  const [selectedHackathon, setSelectedHackathon] = useState<string | null>(
+    null,
+  );
+
+  const { data: hackathonList } = trpc.hackathon.listAll.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  const { data: projects, isLoading } = trpc.hackathon.projects.useQuery(
+    selectedHackathon ? { hackathonId: selectedHackathon } : skipToken,
+  );
+
+  // The one project being repaired, and the field values being repaired to.
+  const [editing, setEditing] = useState<string | null>(null);
+  const [form, setForm] = useState({
+    name: "",
+    description: "",
+    githubUrl: "",
+    demoUrl: "",
+    videoUrl: "",
+  });
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [withdrawing, setWithdrawing] = useState<string | null>(null);
+
+  const utils = trpc.useUtils();
+
+  const refresh = () => {
+    if (selectedHackathon) {
+      utils.hackathon.projects.invalidate({ hackathonId: selectedHackathon });
+    }
+  };
+
+  const updateProject = trpc.hackathon.adminUpdateProject.useMutation({
+    onSuccess: () => {
+      setEditing(null);
+      setActionError(null);
+      refresh();
+    },
+    onError: (error) => setActionError(error.message),
+  });
+
+  const withdrawProject = trpc.hackathon.adminWithdrawProject.useMutation({
+    onSuccess: () => {
+      setWithdrawing(null);
+      setActionError(null);
+      refresh();
+    },
+    // A project already in judging comes back as CONFLICT with what that
+    // means; the second press confirms it.
+    onError: (error) => setActionError(error.message),
+  });
+
+  if (status === "unauthenticated") {
+    router.push(loginHref());
+    return null;
+  }
+
+  const getStatusTone = (projectStatus: string): Tone => {
+    switch (projectStatus) {
+      case "submitted":
+        return "accent";
+      case "judging":
+        return "warning";
+      case "winner":
+        return "success";
+      default:
+        return "neutral";
+    }
+  };
+
+  return (
+    <div className={page}>
+      <h1 className={adminTitle}>Hackathon projects</h1>
+      <p className={pageDek}>
+        Browse the projects participants submitted, fix their details, or
+        withdraw one.
+      </p>
+
+      <div className="mt-10 space-y-6">
+        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-3">
+          <div className="sm:w-80">
+            <label htmlFor="project-hackathon" className={fieldLabel}>
+              Hackathon
+            </label>
+            <select
+              id="project-hackathon"
+              aria-label="Filter projects by hackathon"
+              value={selectedHackathon || ""}
+              onChange={(e) => setSelectedHackathon(e.target.value || null)}
+              className={`${input} min-h-11 cursor-pointer`}
+            >
+              <option value="">Select a hackathon…</option>
+              {hackathonList?.map((h) => (
+                <option key={h.id} value={h.id}>
+                  {h.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <p className={`${meta} tabular-nums`}>
+            {projects?.length || 0} total projects
+          </p>
+        </div>
+
+        <div className="border-t border-[var(--border-subtle)] pt-6">
+          {!selectedHackathon ? (
+            <p className={body}>
+              Choose a hackathon above to see its submitted projects.
+            </p>
+          ) : isLoading ? (
+            <p className={meta}>Loading projects…</p>
+          ) : !projects || projects.length === 0 ? (
+            <p className={body}>
+              No projects yet. They will appear here once participants submit
+              them.
+            </p>
+          ) : (
+            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {projects.map((project) => (
+                <div
+                  key={project.id}
+                  className={`${object} p-5 flex flex-col`}
+                >
+                  <div className="flex items-start justify-between gap-3 mb-3">
+                    <div className="min-w-0 flex-1">
+                      <h3 className={`${itemTitle} break-words`}>
+                        {project.name}
+                      </h3>
+                      <p className="text-[14px] text-[var(--text-muted)] mt-1 line-clamp-2">
+                        {project.description || "No description"}
+                      </p>
+                    </div>
+                    <span
+                      className={`${statusClass(getStatusTone(project.status))} shrink-0 capitalize`}
+                    >
+                      {project.status}
+                    </span>
+                  </div>
+
+                  <div className={`${meta} space-y-1`}>
+                    {project.tracks && project.tracks.length > 0 && (
+                      <p>Tracks: {project.tracks.join(", ")}</p>
+                    )}
+                    <p>Team: {project.team?.name || "Unknown"}</p>
+                  </div>
+
+                  {editing === project.id ? (
+                    <div className="mt-4 pt-4 border-t border-[var(--border-subtle)] space-y-3">
+                      {(
+                        [
+                          ["name", "Name"],
+                          ["description", "Description"],
+                          ["githubUrl", "Repo URL"],
+                          ["demoUrl", "Demo URL"],
+                          ["videoUrl", "Video URL"],
+                        ] as const
+                      ).map(([field, label]) => (
+                        <div key={field}>
+                          <label
+                            htmlFor={`${project.id}-${field}`}
+                            className={fieldLabel}
+                          >
+                            {label}
+                          </label>
+                          <input
+                            id={`${project.id}-${field}`}
+                            type="text"
+                            value={form[field]}
+                            onChange={(e) =>
+                              setForm((f) => ({
+                                ...f,
+                                [field]: e.target.value,
+                              }))
+                            }
+                            className={input}
+                          />
+                        </div>
+                      ))}
+                      <div className="flex flex-wrap gap-2 pt-1">
+                        <button
+                          type="button"
+                          disabled={readOnly || updateProject.isPending}
+                          title={readOnly ? READ_ONLY_TITLE : undefined}
+                          onClick={() =>
+                            updateProject.mutate({
+                              projectId: project.id,
+                              name: form.name.trim() || undefined,
+                              description:
+                                form.description.trim() || undefined,
+                              // null clears; undefined leaves unchanged.
+                              githubUrl: form.githubUrl.trim() || null,
+                              demoUrl: form.demoUrl.trim() || null,
+                              videoUrl: form.videoUrl.trim() || null,
+                            })
+                          }
+                          className={btnPrimary}
+                        >
+                          {updateProject.isPending ? "Saving…" : "Save"}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setEditing(null);
+                            setActionError(null);
+                          }}
+                          className={btnSecondary}
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="mt-auto pt-4">
+                      <div className="pt-4 border-t border-[var(--border-subtle)] flex flex-wrap gap-2">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setActionError(null);
+                            setWithdrawing(null);
+                            setEditing(project.id);
+                            setForm({
+                              name: project.name,
+                              description: project.description || "",
+                              githubUrl: project.githubUrl || "",
+                              demoUrl: project.demoUrl || "",
+                              videoUrl: project.videoUrl || "",
+                            });
+                          }}
+                          disabled={readOnly}
+                          title={readOnly ? READ_ONLY_TITLE : undefined}
+                          className={btnSecondary}
+                        >
+                          Fix details
+                        </button>
+                        {project.status !== "draft" && (
+                          <button
+                            type="button"
+                            disabled={readOnly || withdrawProject.isPending}
+                            title={readOnly ? READ_ONLY_TITLE : undefined}
+                            onClick={() => {
+                              setActionError(null);
+                              withdrawProject.mutate({
+                                projectId: project.id,
+                                // Forced only on the second press, after the
+                                // server has said what withdrawing costs.
+                                force: withdrawing === project.id,
+                              });
+                              setWithdrawing(project.id);
+                            }}
+                            className={btnDanger}
+                          >
+                            {withdrawing === project.id
+                              ? "Withdraw anyway"
+                              : "Withdraw"}
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {actionError &&
+                    (editing === project.id ||
+                      withdrawing === project.id) && (
+                      <p
+                        role="alert"
+                        className="mt-3 text-[13px] leading-relaxed text-[var(--warning)]"
+                      >
+                        {actionError}
+                      </p>
+                    )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/projects/page.tsx b/sites/mainweb/app/(portal)/admin/projects/page.tsx
index 64da30b4..b8e60344 100644
--- a/sites/mainweb/app/(portal)/admin/projects/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/projects/page.tsx
@@ -1,312 +1,12 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { loginHref } from "@/lib/safe-callback";
-import { trpc } from "@/lib/trpc";
-import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { skipToken } from "@tanstack/react-query";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  fieldLabel,
-  input,
-  itemTitle,
-  meta,
-  object,
-  page,
-  pageDek,
-  status as statusClass,
-} from "@/components/portal/ui";
-import type { Tone } from "@/components/portal/ui";
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
-
-export default function ProjectsPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  const readOnly = useReadOnly();
-
-  const [selectedHackathon, setSelectedHackathon] = useState<string | null>(
-    null,
-  );
-
-  const { data: hackathonList } = trpc.hackathon.listAll.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  const { data: projects, isLoading } = trpc.hackathon.projects.useQuery(
-    selectedHackathon ? { hackathonId: selectedHackathon } : skipToken,
-  );
-
-  // The one project being repaired, and the field values being repaired to.
-  const [editing, setEditing] = useState<string | null>(null);
-  const [form, setForm] = useState({
-    name: "",
-    description: "",
-    githubUrl: "",
-    demoUrl: "",
-    videoUrl: "",
-  });
-  const [actionError, setActionError] = useState<string | null>(null);
-  const [withdrawing, setWithdrawing] = useState<string | null>(null);
-
-  const utils = trpc.useUtils();
-
-  const refresh = () => {
-    if (selectedHackathon) {
-      utils.hackathon.projects.invalidate({ hackathonId: selectedHackathon });
-    }
-  };
-
-  const updateProject = trpc.hackathon.adminUpdateProject.useMutation({
-    onSuccess: () => {
-      setEditing(null);
-      setActionError(null);
-      refresh();
-    },
-    onError: (error) => setActionError(error.message),
-  });
-
-  const withdrawProject = trpc.hackathon.adminWithdrawProject.useMutation({
-    onSuccess: () => {
-      setWithdrawing(null);
-      setActionError(null);
-      refresh();
-    },
-    // A project already in judging comes back as CONFLICT with what that
-    // means; the second press confirms it.
-    onError: (error) => setActionError(error.message),
-  });
-
-  if (status === "unauthenticated") {
-    router.push(loginHref());
-    return null;
-  }
-
-  const getStatusTone = (projectStatus: string): Tone => {
-    switch (projectStatus) {
-      case "submitted":
-        return "accent";
-      case "judging":
-        return "warning";
-      case "winner":
-        return "success";
-      default:
-        return "neutral";
-    }
-  };
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import ProjectsPage from "./ProjectsPage";
 
+export default function Page() {
   return (
-    <div className={page}>
-      <h1 className={adminTitle}>Hackathon projects</h1>
-      <p className={pageDek}>
-        Browse the projects participants submitted, fix their details, or
-        withdraw one.
-      </p>
-
-      <div className="mt-10 space-y-6">
-        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-3">
-          <div className="sm:w-80">
-            <label htmlFor="project-hackathon" className={fieldLabel}>
-              Hackathon
-            </label>
-            <select
-              id="project-hackathon"
-              aria-label="Filter projects by hackathon"
-              value={selectedHackathon || ""}
-              onChange={(e) => setSelectedHackathon(e.target.value || null)}
-              className={`${input} min-h-11 cursor-pointer`}
-            >
-              <option value="">Select a hackathon…</option>
-              {hackathonList?.map((h) => (
-                <option key={h.id} value={h.id}>
-                  {h.name}
-                </option>
-              ))}
-            </select>
-          </div>
-          <p className={`${meta} tabular-nums`}>
-            {projects?.length || 0} total projects
-          </p>
-        </div>
-
-        <div className="border-t border-[var(--border-subtle)] pt-6">
-          {!selectedHackathon ? (
-            <p className={body}>
-              Choose a hackathon above to see its submitted projects.
-            </p>
-          ) : isLoading ? (
-            <p className={meta}>Loading projects…</p>
-          ) : !projects || projects.length === 0 ? (
-            <p className={body}>
-              No projects yet. They will appear here once participants submit
-              them.
-            </p>
-          ) : (
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {projects.map((project) => (
-                <div
-                  key={project.id}
-                  className={`${object} p-5 flex flex-col`}
-                >
-                  <div className="flex items-start justify-between gap-3 mb-3">
-                    <div className="min-w-0 flex-1">
-                      <h3 className={`${itemTitle} break-words`}>
-                        {project.name}
-                      </h3>
-                      <p className="text-[14px] text-[var(--text-muted)] mt-1 line-clamp-2">
-                        {project.description || "No description"}
-                      </p>
-                    </div>
-                    <span
-                      className={`${statusClass(getStatusTone(project.status))} shrink-0 capitalize`}
-                    >
-                      {project.status}
-                    </span>
-                  </div>
-
-                  <div className={`${meta} space-y-1`}>
-                    {project.tracks && project.tracks.length > 0 && (
-                      <p>Tracks: {project.tracks.join(", ")}</p>
-                    )}
-                    <p>Team: {project.team?.name || "Unknown"}</p>
-                  </div>
-
-                  {editing === project.id ? (
-                    <div className="mt-4 pt-4 border-t border-[var(--border-subtle)] space-y-3">
-                      {(
-                        [
-                          ["name", "Name"],
-                          ["description", "Description"],
-                          ["githubUrl", "Repo URL"],
-                          ["demoUrl", "Demo URL"],
-                          ["videoUrl", "Video URL"],
-                        ] as const
-                      ).map(([field, label]) => (
-                        <div key={field}>
-                          <label
-                            htmlFor={`${project.id}-${field}`}
-                            className={fieldLabel}
-                          >
-                            {label}
-                          </label>
-                          <input
-                            id={`${project.id}-${field}`}
-                            type="text"
-                            value={form[field]}
-                            onChange={(e) =>
-                              setForm((f) => ({
-                                ...f,
-                                [field]: e.target.value,
-                              }))
-                            }
-                            className={input}
-                          />
-                        </div>
-                      ))}
-                      <div className="flex flex-wrap gap-2 pt-1">
-                        <button
-                          type="button"
-                          disabled={readOnly || updateProject.isPending}
-                          title={readOnly ? READ_ONLY_TITLE : undefined}
-                          onClick={() =>
-                            updateProject.mutate({
-                              projectId: project.id,
-                              name: form.name.trim() || undefined,
-                              description:
-                                form.description.trim() || undefined,
-                              // null clears; undefined leaves unchanged.
-                              githubUrl: form.githubUrl.trim() || null,
-                              demoUrl: form.demoUrl.trim() || null,
-                              videoUrl: form.videoUrl.trim() || null,
-                            })
-                          }
-                          className={btnPrimary}
-                        >
-                          {updateProject.isPending ? "Saving…" : "Save"}
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setEditing(null);
-                            setActionError(null);
-                          }}
-                          className={btnSecondary}
-                        >
-                          Cancel
-                        </button>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="mt-auto pt-4">
-                      <div className="pt-4 border-t border-[var(--border-subtle)] flex flex-wrap gap-2">
-                        <button
-                          type="button"
-                          onClick={() => {
-                            setActionError(null);
-                            setWithdrawing(null);
-                            setEditing(project.id);
-                            setForm({
-                              name: project.name,
-                              description: project.description || "",
-                              githubUrl: project.githubUrl || "",
-                              demoUrl: project.demoUrl || "",
-                              videoUrl: project.videoUrl || "",
-                            });
-                          }}
-                          disabled={readOnly}
-                          title={readOnly ? READ_ONLY_TITLE : undefined}
-                          className={btnSecondary}
-                        >
-                          Fix details
-                        </button>
-                        {project.status !== "draft" && (
-                          <button
-                            type="button"
-                            disabled={readOnly || withdrawProject.isPending}
-                            title={readOnly ? READ_ONLY_TITLE : undefined}
-                            onClick={() => {
-                              setActionError(null);
-                              withdrawProject.mutate({
-                                projectId: project.id,
-                                // Forced only on the second press, after the
-                                // server has said what withdrawing costs.
-                                force: withdrawing === project.id,
-                              });
-                              setWithdrawing(project.id);
-                            }}
-                            className={btnDanger}
-                          >
-                            {withdrawing === project.id
-                              ? "Withdraw anyway"
-                              : "Withdraw"}
-                          </button>
-                        )}
-                      </div>
-                    </div>
-                  )}
-
-                  {actionError &&
-                    (editing === project.id ||
-                      withdrawing === project.id) && (
-                      <p
-                        role="alert"
-                        className="mt-3 text-[13px] leading-relaxed text-[var(--warning)]"
-                      >
-                        {actionError}
-                      </p>
-                    )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [["hackathon.listAll", undefined, c.hackathon.listAll()]]}
+    >
+      <ProjectsPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/resumes/AdminResumesPage.tsx b/sites/mainweb/app/(portal)/admin/resumes/AdminResumesPage.tsx
new file mode 100644
index 00000000..d6f81748
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/resumes/AdminResumesPage.tsx
@@ -0,0 +1,337 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { trpc } from "@/lib/trpc";
+import { ResumePreview } from "@/components/portal/ResumePreview";
+import {
+  btnPrimary,
+  btnSecondary,
+  label,
+  meta,
+  page,
+  pageDek,
+  status,
+  tab,
+  tabList,
+  textLink,
+} from "@/components/portal/ui";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Search,
+  X,
+} from "lucide-react";
+
+type Scope = "members" | "all";
+
+const PAGE_SIZE = 100;
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
+
+function formatSize(bytes: number) {
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export default function AdminResumesPage() {
+  const [scope, setScope] = useState<Scope>("members");
+  const [search, setSearch] = useState("");
+  const [debounced, setDebounced] = useState("");
+  const [offset, setOffset] = useState(0);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [preview, setPreview] = useState<{
+    userId: string;
+    name: string;
+  } | null>(null);
+
+  useEffect(() => {
+    const t = setTimeout(() => setDebounced(search.trim()), 250);
+    return () => clearTimeout(t);
+  }, [search]);
+
+  const list = trpc.resume.adminList.useQuery({
+    scope,
+    search: debounced || undefined,
+    limit: PAGE_SIZE,
+    offset,
+  });
+
+  const rows = useMemo(() => list.data?.rows ?? [], [list.data]);
+  const total = list.data?.total ?? 0;
+
+  // A selection or page carried across a filter change would put people in a
+  // book the list said it would not.
+  const [filterShown, setFilterShown] = useState({ scope, debounced });
+  if (filterShown.scope !== scope || filterShown.debounced !== debounced) {
+    setFilterShown({ scope, debounced });
+    setSelected(new Set());
+    setPreview(null);
+    setOffset(0);
+  }
+
+  const allChecked = rows.length > 0 && rows.every((r) => selected.has(r.userId));
+
+  const toggle = (userId: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(userId)) next.delete(userId);
+      else next.add(userId);
+      return next;
+    });
+  };
+
+  const togglePage = () => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      for (const row of rows) {
+        if (allChecked) next.delete(row.userId);
+        else next.add(row.userId);
+      }
+      return next;
+    });
+  };
+
+  const bookHref = (ids?: Set<string>) => {
+    const params = new URLSearchParams({ scope });
+    if (debounced) params.set("search", debounced);
+    if (ids?.size) params.set("ids", [...ids].join(","));
+    return `/api/resume-book?${params}`;
+  };
+
+  return (
+    <div className={page}>
+      <h1 className={adminTitle}>Resume book</h1>
+      <p className={pageDek}>
+        Every resume uploaded from a profile. Download a filtered set as one
+        ZIP, with an index.csv listing who is in it.
+      </p>
+
+      <div className="mt-10 space-y-6">
+        <div>
+          <div className={tabList}>
+            {(
+              [
+                { id: "members", label: "Members" },
+                { id: "all", label: "All" },
+              ] as const
+            ).map((option) => (
+              <button
+                key={option.id}
+                onClick={() => setScope(option.id)}
+                className={tab(scope === option.id)}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+          <p className={`${meta} mt-2`}>
+            {scope === "members"
+              ? "Paid, unexpired memberships only."
+              : "Everyone with a resume on file, membership or not."}
+          </p>
+        </div>
+
+        <div className="relative">
+          <Search
+            strokeWidth={1.75}
+            className="w-4 h-4 text-[var(--text-subtle)] absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none"
+          />
+          <input
+            type="search"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search by name, email or major…"
+            className="w-full rounded-[var(--radius-sm)] border border-[var(--border-medium)] bg-[var(--bg-input)] pl-10 pr-3.5 py-2.5 text-[15px] text-[var(--text-primary)] placeholder:text-[var(--text-subtle)] focus:border-accent focus:outline-none focus:ring-2 focus:ring-[var(--accent-dim)] transition-colors"
+          />
+        </div>
+
+        {list.isLoading ? (
+          <p className={`${meta} py-8`}>Loading…</p>
+        ) : rows.length === 0 ? (
+          <p className="py-8 text-[15px] text-[var(--text-muted)]">
+            {debounced
+              ? "Nobody matches that search. Try a shorter name or another major."
+              : scope === "members"
+                ? "No current member has uploaded a resume yet. They will appear here once they add one from their profile."
+                : "No resumes uploaded yet. They will appear here once members add one from their profile."}
+          </p>
+        ) : (
+          <>
+            <div className="overflow-x-auto border-y border-[var(--border-subtle)]">
+              <table className="w-full text-[14px]">
+                <thead>
+                  <tr className="border-b border-[var(--border-subtle)]">
+                    <th className="py-2.5 pl-1 pr-3 w-10 text-left">
+                      <input
+                        type="checkbox"
+                        checked={allChecked}
+                        onChange={togglePage}
+                        aria-label="Select this page"
+                        className="accent-[var(--accent)] w-4 h-4"
+                      />
+                    </th>
+                    {["Name", "Major", "Grad", "Status", "File", ""].map(
+                      (heading, i) => (
+                        <th
+                          key={heading || `col-${i}`}
+                          className={`py-2.5 px-3 text-left whitespace-nowrap ${label}`}
+                        >
+                          {heading}
+                        </th>
+                      ),
+                    )}
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((row) => (
+                    <tr
+                      key={row.userId}
+                      className={`border-b border-[var(--border-subtle)] last:border-0 transition-colors ${
+                        preview?.userId === row.userId
+                          ? "bg-[var(--bg-secondary)]"
+                          : "hover:bg-[var(--bg-secondary)]"
+                      }`}
+                    >
+                      <td className="py-3 pl-1 pr-3">
+                        <input
+                          type="checkbox"
+                          checked={selected.has(row.userId)}
+                          onChange={() => toggle(row.userId)}
+                          aria-label={`Include ${row.displayName}`}
+                          className="accent-[var(--accent)] w-4 h-4"
+                        />
+                      </td>
+                      <td className="py-3 px-3">
+                        <p className="font-semibold text-[var(--text-primary)]">
+                          {row.displayName}
+                        </p>
+                        <p className={meta}>{row.email}</p>
+                      </td>
+                      <td className="py-3 px-3 text-[var(--text-muted)]">
+                        {row.major ?? "—"}
+                      </td>
+                      <td className="py-3 px-3 text-[var(--text-muted)] tabular-nums">
+                        {row.graduationYear ?? "—"}
+                      </td>
+                      <td className="py-3 px-3 whitespace-nowrap">
+                        <span
+                          className={status(
+                            row.isCurrentMember ? "success" : "neutral",
+                          )}
+                        >
+                          {row.isCurrentMember ? "Member" : "Non-member"}
+                        </span>
+                      </td>
+                      <td className="py-3 px-3 text-[13px] text-[var(--text-subtle)] whitespace-nowrap">
+                        <span className="font-mono">
+                          {formatSize(row.sizeBytes)}
+                        </span>{" "}
+                        · {new Date(row.uploadedAt).toLocaleDateString()}
+                      </td>
+                      <td className="py-3 px-3">
+                        <button
+                          onClick={() =>
+                            setPreview(
+                              preview?.userId === row.userId
+                                ? null
+                                : { userId: row.userId, name: row.displayName },
+                            )
+                          }
+                          className={textLink}
+                        >
+                          {preview?.userId === row.userId ? "Hide" : "View"}
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <div className="flex items-center justify-between gap-4">
+              <p className={`${meta} tabular-nums`}>
+                {offset + 1}–{offset + rows.length} of {total}
+              </p>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+                  disabled={offset === 0}
+                  aria-label="Previous page"
+                  className={btnSecondary}
+                >
+                  <ChevronLeft strokeWidth={1.75} className="w-4 h-4" />
+                </button>
+                <button
+                  onClick={() => setOffset(offset + PAGE_SIZE)}
+                  disabled={offset + rows.length >= total}
+                  aria-label="Next page"
+                  className={btnSecondary}
+                >
+                  <ChevronRight strokeWidth={1.75} className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+
+        {preview && (
+          <div className="space-y-3 border-t border-[var(--border-subtle)] pt-6">
+            <div className="flex items-center justify-between gap-4">
+              <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+                {preview.name}
+              </p>
+              <div className="flex items-center gap-4">
+                <a
+                  href={`/api/resume/${preview.userId}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={textLink}
+                >
+                  Open
+                </a>
+                <button
+                  onClick={() => setPreview(null)}
+                  aria-label="Close preview"
+                  className="p-1.5 rounded-[var(--radius-sm)] text-[var(--text-subtle)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] transition-colors"
+                >
+                  <X strokeWidth={1.75} className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+            <ResumePreview
+              key={preview.userId}
+              src={`/api/resume/${preview.userId}`}
+              title={`${preview.name} resume`}
+            />
+          </div>
+        )}
+
+        {total > 0 && (
+          <div className="flex flex-wrap items-center justify-between gap-4 border-t border-[var(--border-subtle)] pt-6">
+            <p className={meta}>
+              {selected.size > 0
+                ? `${selected.size} picked`
+                : "Nothing picked. The download takes everything that matches."}
+            </p>
+            <div className="flex flex-wrap items-center gap-3">
+              {selected.size > 0 && (
+                <a href={bookHref(selected)} className={btnSecondary}>
+                  <Download strokeWidth={1.75} className="w-4 h-4" /> Download
+                  picked ({selected.size})
+                </a>
+              )}
+              {/* A plain link, so the browser streams gigabytes to disk rather
+                  than holding the ZIP in a Blob in the tab. */}
+              <a href={bookHref()} className={btnPrimary}>
+                <Download strokeWidth={1.75} className="w-4 h-4" /> Download
+                all {total} as ZIP
+              </a>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/resumes/page.tsx b/sites/mainweb/app/(portal)/admin/resumes/page.tsx
index d6f81748..aa8ed9bd 100644
--- a/sites/mainweb/app/(portal)/admin/resumes/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/resumes/page.tsx
@@ -1,337 +1,17 @@
-"use client";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminResumesPage from "./AdminResumesPage";
 
-import { useEffect, useMemo, useState } from "react";
-import { trpc } from "@/lib/trpc";
-import { ResumePreview } from "@/components/portal/ResumePreview";
-import {
-  btnPrimary,
-  btnSecondary,
-  label,
-  meta,
-  page,
-  pageDek,
-  status,
-  tab,
-  tabList,
-  textLink,
-} from "@/components/portal/ui";
-import {
-  ChevronLeft,
-  ChevronRight,
-  Download,
-  Search,
-  X,
-} from "lucide-react";
-
-type Scope = "members" | "all";
-
-const PAGE_SIZE = 100;
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
-
-function formatSize(bytes: number) {
-  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-export default function AdminResumesPage() {
-  const [scope, setScope] = useState<Scope>("members");
-  const [search, setSearch] = useState("");
-  const [debounced, setDebounced] = useState("");
-  const [offset, setOffset] = useState(0);
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [preview, setPreview] = useState<{
-    userId: string;
-    name: string;
-  } | null>(null);
-
-  useEffect(() => {
-    const t = setTimeout(() => setDebounced(search.trim()), 250);
-    return () => clearTimeout(t);
-  }, [search]);
-
-  const list = trpc.resume.adminList.useQuery({
-    scope,
-    search: debounced || undefined,
-    limit: PAGE_SIZE,
-    offset,
-  });
-
-  const rows = useMemo(() => list.data?.rows ?? [], [list.data]);
-  const total = list.data?.total ?? 0;
-
-  // A selection or page carried across a filter change would put people in a
-  // book the list said it would not.
-  const [filterShown, setFilterShown] = useState({ scope, debounced });
-  if (filterShown.scope !== scope || filterShown.debounced !== debounced) {
-    setFilterShown({ scope, debounced });
-    setSelected(new Set());
-    setPreview(null);
-    setOffset(0);
-  }
-
-  const allChecked = rows.length > 0 && rows.every((r) => selected.has(r.userId));
-
-  const toggle = (userId: string) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(userId)) next.delete(userId);
-      else next.add(userId);
-      return next;
-    });
-  };
-
-  const togglePage = () => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      for (const row of rows) {
-        if (allChecked) next.delete(row.userId);
-        else next.add(row.userId);
-      }
-      return next;
-    });
-  };
-
-  const bookHref = (ids?: Set<string>) => {
-    const params = new URLSearchParams({ scope });
-    if (debounced) params.set("search", debounced);
-    if (ids?.size) params.set("ids", [...ids].join(","));
-    return `/api/resume-book?${params}`;
-  };
+// The members scope, first page: what the page opens on.
+const OPENING_LIST = { scope: "members", limit: 100, offset: 0 } as const;
 
+export default function Page() {
   return (
-    <div className={page}>
-      <h1 className={adminTitle}>Resume book</h1>
-      <p className={pageDek}>
-        Every resume uploaded from a profile. Download a filtered set as one
-        ZIP, with an index.csv listing who is in it.
-      </p>
-
-      <div className="mt-10 space-y-6">
-        <div>
-          <div className={tabList}>
-            {(
-              [
-                { id: "members", label: "Members" },
-                { id: "all", label: "All" },
-              ] as const
-            ).map((option) => (
-              <button
-                key={option.id}
-                onClick={() => setScope(option.id)}
-                className={tab(scope === option.id)}
-              >
-                {option.label}
-              </button>
-            ))}
-          </div>
-          <p className={`${meta} mt-2`}>
-            {scope === "members"
-              ? "Paid, unexpired memberships only."
-              : "Everyone with a resume on file, membership or not."}
-          </p>
-        </div>
-
-        <div className="relative">
-          <Search
-            strokeWidth={1.75}
-            className="w-4 h-4 text-[var(--text-subtle)] absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none"
-          />
-          <input
-            type="search"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search by name, email or major…"
-            className="w-full rounded-[var(--radius-sm)] border border-[var(--border-medium)] bg-[var(--bg-input)] pl-10 pr-3.5 py-2.5 text-[15px] text-[var(--text-primary)] placeholder:text-[var(--text-subtle)] focus:border-accent focus:outline-none focus:ring-2 focus:ring-[var(--accent-dim)] transition-colors"
-          />
-        </div>
-
-        {list.isLoading ? (
-          <p className={`${meta} py-8`}>Loading…</p>
-        ) : rows.length === 0 ? (
-          <p className="py-8 text-[15px] text-[var(--text-muted)]">
-            {debounced
-              ? "Nobody matches that search. Try a shorter name or another major."
-              : scope === "members"
-                ? "No current member has uploaded a resume yet. They will appear here once they add one from their profile."
-                : "No resumes uploaded yet. They will appear here once members add one from their profile."}
-          </p>
-        ) : (
-          <>
-            <div className="overflow-x-auto border-y border-[var(--border-subtle)]">
-              <table className="w-full text-[14px]">
-                <thead>
-                  <tr className="border-b border-[var(--border-subtle)]">
-                    <th className="py-2.5 pl-1 pr-3 w-10 text-left">
-                      <input
-                        type="checkbox"
-                        checked={allChecked}
-                        onChange={togglePage}
-                        aria-label="Select this page"
-                        className="accent-[var(--accent)] w-4 h-4"
-                      />
-                    </th>
-                    {["Name", "Major", "Grad", "Status", "File", ""].map(
-                      (heading, i) => (
-                        <th
-                          key={heading || `col-${i}`}
-                          className={`py-2.5 px-3 text-left whitespace-nowrap ${label}`}
-                        >
-                          {heading}
-                        </th>
-                      ),
-                    )}
-                  </tr>
-                </thead>
-                <tbody>
-                  {rows.map((row) => (
-                    <tr
-                      key={row.userId}
-                      className={`border-b border-[var(--border-subtle)] last:border-0 transition-colors ${
-                        preview?.userId === row.userId
-                          ? "bg-[var(--bg-secondary)]"
-                          : "hover:bg-[var(--bg-secondary)]"
-                      }`}
-                    >
-                      <td className="py-3 pl-1 pr-3">
-                        <input
-                          type="checkbox"
-                          checked={selected.has(row.userId)}
-                          onChange={() => toggle(row.userId)}
-                          aria-label={`Include ${row.displayName}`}
-                          className="accent-[var(--accent)] w-4 h-4"
-                        />
-                      </td>
-                      <td className="py-3 px-3">
-                        <p className="font-semibold text-[var(--text-primary)]">
-                          {row.displayName}
-                        </p>
-                        <p className={meta}>{row.email}</p>
-                      </td>
-                      <td className="py-3 px-3 text-[var(--text-muted)]">
-                        {row.major ?? "—"}
-                      </td>
-                      <td className="py-3 px-3 text-[var(--text-muted)] tabular-nums">
-                        {row.graduationYear ?? "—"}
-                      </td>
-                      <td className="py-3 px-3 whitespace-nowrap">
-                        <span
-                          className={status(
-                            row.isCurrentMember ? "success" : "neutral",
-                          )}
-                        >
-                          {row.isCurrentMember ? "Member" : "Non-member"}
-                        </span>
-                      </td>
-                      <td className="py-3 px-3 text-[13px] text-[var(--text-subtle)] whitespace-nowrap">
-                        <span className="font-mono">
-                          {formatSize(row.sizeBytes)}
-                        </span>{" "}
-                        · {new Date(row.uploadedAt).toLocaleDateString()}
-                      </td>
-                      <td className="py-3 px-3">
-                        <button
-                          onClick={() =>
-                            setPreview(
-                              preview?.userId === row.userId
-                                ? null
-                                : { userId: row.userId, name: row.displayName },
-                            )
-                          }
-                          className={textLink}
-                        >
-                          {preview?.userId === row.userId ? "Hide" : "View"}
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-
-            <div className="flex items-center justify-between gap-4">
-              <p className={`${meta} tabular-nums`}>
-                {offset + 1}–{offset + rows.length} of {total}
-              </p>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
-                  disabled={offset === 0}
-                  aria-label="Previous page"
-                  className={btnSecondary}
-                >
-                  <ChevronLeft strokeWidth={1.75} className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => setOffset(offset + PAGE_SIZE)}
-                  disabled={offset + rows.length >= total}
-                  aria-label="Next page"
-                  className={btnSecondary}
-                >
-                  <ChevronRight strokeWidth={1.75} className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-          </>
-        )}
-
-        {preview && (
-          <div className="space-y-3 border-t border-[var(--border-subtle)] pt-6">
-            <div className="flex items-center justify-between gap-4">
-              <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-                {preview.name}
-              </p>
-              <div className="flex items-center gap-4">
-                <a
-                  href={`/api/resume/${preview.userId}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={textLink}
-                >
-                  Open
-                </a>
-                <button
-                  onClick={() => setPreview(null)}
-                  aria-label="Close preview"
-                  className="p-1.5 rounded-[var(--radius-sm)] text-[var(--text-subtle)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] transition-colors"
-                >
-                  <X strokeWidth={1.75} className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-            <ResumePreview
-              key={preview.userId}
-              src={`/api/resume/${preview.userId}`}
-              title={`${preview.name} resume`}
-            />
-          </div>
-        )}
-
-        {total > 0 && (
-          <div className="flex flex-wrap items-center justify-between gap-4 border-t border-[var(--border-subtle)] pt-6">
-            <p className={meta}>
-              {selected.size > 0
-                ? `${selected.size} picked`
-                : "Nothing picked. The download takes everything that matches."}
-            </p>
-            <div className="flex flex-wrap items-center gap-3">
-              {selected.size > 0 && (
-                <a href={bookHref(selected)} className={btnSecondary}>
-                  <Download strokeWidth={1.75} className="w-4 h-4" /> Download
-                  picked ({selected.size})
-                </a>
-              )}
-              {/* A plain link, so the browser streams gigabytes to disk rather
-                  than holding the ZIP in a Blob in the tab. */}
-              <a href={bookHref()} className={btnPrimary}>
-                <Download strokeWidth={1.75} className="w-4 h-4" /> Download
-                all {total} as ZIP
-              </a>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["resume.adminList", OPENING_LIST, c.resume.adminList(OPENING_LIST)],
+      ]}
+    >
+      <AdminResumesPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/staff/StaffPage.tsx b/sites/mainweb/app/(portal)/admin/staff/StaffPage.tsx
new file mode 100644
index 00000000..4c83ad75
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/staff/StaffPage.tsx
@@ -0,0 +1,352 @@
+"use client";
+
+import { useState } from "react";
+import { trpc } from "@/lib/trpc";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { usePortalContext } from "@/lib/use-portal-context";
+import { isStaffRole } from "@query/api/portal-context";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  fieldHint,
+  fieldLabel,
+  input,
+  meta,
+  object,
+  page,
+  pageDek,
+  sectionTitle,
+  status,
+} from "@/components/portal/ui";
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
+
+/**
+ * Staff and roles.
+ *
+ * `admin.create`/`update`/`list` have existed for a long time with nothing
+ * calling them, so the only way to make somebody a volunteer was an INSERT
+ * against production — while /scan's own rejection screen told them to "ask an
+ * organiser to add you as event staff". This is that screen.
+ */
+
+const ROLES = [
+  {
+    id: "volunteer" as const,
+    label: "Volunteer",
+    hint: "Scans hackathon badges and club passes. No access to admin pages.",
+  },
+  {
+    id: "bug_tester" as const,
+    label: "Bug tester",
+    hint: "Read-only QA. Opens every admin page to test it; the API refuses any change they try to save. No resume downloads.",
+  },
+  {
+    id: "moderator" as const,
+    label: "Moderator",
+    hint: "Full staff access to the admin pages.",
+  },
+  {
+    id: "admin" as const,
+    label: "Admin",
+    hint: "Full staff access to the admin pages.",
+  },
+  {
+    id: "super_admin" as const,
+    label: "Super admin",
+    hint: "Also grants and revokes roles, and can delete an edition.",
+  },
+];
+
+type Role = (typeof ROLES)[number]["id"];
+
+/** The name people know a role by, not its database key. */
+const roleLabel = (id: string) => ROLES.find((r) => r.id === id)?.label ?? id;
+
+/** ISO day rather than a locale format: this renders on the server too, and a
+ *  locale-dependent string mismatches on hydration. */
+const termDate = (value: string | Date) =>
+  new Date(value).toISOString().slice(0, 10);
+
+export default function StaffPage() {
+  const utils = trpc.useUtils();
+  const { data: portalContext, isLoading: contextLoading } = usePortalContext();
+
+  const [email, setEmail] = useState("");
+  const [searchedEmail, setSearchedEmail] = useState("");
+  const [role, setRole] = useState<Role>("volunteer");
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  const { data: staff, isLoading: staffLoading } = trpc.admin.list.useQuery();
+
+  const isSuperAdmin = portalContext?.role === "super_admin";
+  // Any full staff member may add and remove volunteers, so check-in desks can
+  // be staffed without a super admin; every other role stays theirs alone.
+  const canManage = isStaffRole(portalContext?.role);
+  const roleOptions = isSuperAdmin
+    ? ROLES
+    : ROLES.filter((option) => option.id === "volunteer");
+  const mayChange = (held: string) => isSuperAdmin || held === "volunteer";
+
+  const lookup = trpc.admin.findUserByEmail.useQuery(
+    { email: searchedEmail },
+    { enabled: canManage && searchedEmail.length > 0, retry: false },
+  );
+
+  const done = (message: string) => {
+    setError(null);
+    setNotice(message);
+    utils.admin.list.invalidate();
+    lookup.refetch();
+  };
+
+  const createStaff = trpc.admin.create.useMutation({
+    onSuccess: () => done("Role granted."),
+    onError: (e) => setError(e.message),
+  });
+
+  const updateStaff = trpc.admin.update.useMutation({
+    onSuccess: () => done("Role updated."),
+    onError: (e) => setError(e.message),
+  });
+
+  if (contextLoading) return <LoadingScreen message="Loading…" />;
+
+  // Granting a role is staff-only server-side; saying so beats rendering a
+  // form whose every button is refused.
+  if (!canManage) {
+    return (
+      <div className={page}>
+        <h1 className={adminTitle}>Staff &amp; roles</h1>
+        <p className={pageDek}>
+          Only staff can grant roles. Ask an admin to add you or the person
+          you are trying to add.
+        </p>
+      </div>
+    );
+  }
+
+  const heldRole = lookup.data?.existingRole?.role;
+  const locked = !!heldRole && !mayChange(heldRole);
+
+  return (
+    <div className={page}>
+      <h1 className={adminTitle}>Staff &amp; roles</h1>
+      <p className={pageDek}>
+        Grant the volunteer role before the event, not at the door.
+        {!isSuperAdmin &&
+          " You can add and remove volunteers; other roles need a super admin."}
+      </p>
+
+      <section className="mt-10 space-y-6">
+        <div>
+          <label htmlFor="staff-email" className={fieldLabel}>
+            Their sign-in email
+          </label>
+          <div className="flex gap-3">
+            <input
+              id="staff-email"
+              type="email"
+              autoComplete="email"
+              spellCheck={false}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="them@gatech.edu"
+              className={`${input} min-w-0 flex-1`}
+            />
+            <button
+              type="button"
+              onClick={() => {
+                setNotice(null);
+                setError(null);
+                setSearchedEmail(email.trim().toLowerCase());
+              }}
+              disabled={!email.trim()}
+              className={`shrink-0 ${btnSecondary}`}
+            >
+              Find
+            </button>
+          </div>
+          <p className={fieldHint}>
+            They must have signed in at least once. The role attaches to an
+            existing account.
+          </p>
+        </div>
+
+        {searchedEmail && !lookup.isPending && !lookup.data && (
+          <p className="text-[13px] text-[var(--warning)]">
+            No account for {searchedEmail}. Ask them to sign in once, then look
+            again.
+          </p>
+        )}
+
+        {lookup.data && (
+          <div className={`${object} p-5 space-y-5`}>
+            <div>
+              <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+                {lookup.data.name ?? "Unnamed account"}
+              </p>
+              <p className={meta}>{lookup.data.email}</p>
+              {lookup.data.existingRole && (
+                <p className="mt-2 text-[13px] text-[var(--text-secondary)]">
+                  Already {roleLabel(lookup.data.existingRole.role).toLowerCase()}
+                  {lookup.data.existingRole.isActive ? "" : " (deactivated)"}
+                  {lookup.data.existingRole.expiresAt
+                    ? ` until ${termDate(lookup.data.existingRole.expiresAt)}`
+                    : ""}
+                </p>
+              )}
+            </div>
+
+            {roleOptions.length > 1 ? (
+              <fieldset>
+                <legend className={fieldLabel}>Role</legend>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                  {roleOptions.map((option) => (
+                    <button
+                      key={option.id}
+                      type="button"
+                      onClick={() => setRole(option.id)}
+                      aria-pressed={role === option.id}
+                      className={`p-3 text-left rounded-[var(--radius-sm)] border transition-colors ${
+                        role === option.id
+                          ? "border-accent ring-1 ring-accent"
+                          : "border-[var(--border-medium)] hover:border-[var(--border-hover)]"
+                      }`}
+                    >
+                      <p className="text-sm font-semibold text-[var(--text-primary)]">
+                        {option.label}
+                      </p>
+                      <p className={`${meta} mt-1`}>{option.hint}</p>
+                    </button>
+                  ))}
+                </div>
+              </fieldset>
+            ) : (
+              <p className="text-[15px] leading-relaxed text-[var(--text-secondary)]">
+                {roleOptions[0]?.hint}
+              </p>
+            )}
+
+            <button
+              type="button"
+              onClick={() => {
+                const target = lookup.data;
+                if (!target) return;
+                if (target.existingRole) {
+                  updateStaff.mutate({
+                    adminId: target.existingRole.id,
+                    role,
+                    isActive: true,
+                  });
+                } else {
+                  createStaff.mutate({ userId: target.id, role });
+                }
+              }}
+              disabled={
+                locked || createStaff.isPending || updateStaff.isPending
+              }
+              title={
+                locked ? "Only a super admin can change this role." : undefined
+              }
+              className={btnPrimary}
+            >
+              {lookup.data.existingRole
+                ? "Change role"
+                : roleOptions.length > 1
+                  ? "Grant role"
+                  : "Grant volunteer role"}
+            </button>
+            {locked && (
+              <p className={fieldHint}>
+                Only a super admin can change the{" "}
+                {roleLabel(heldRole ?? "").toLowerCase()} role.
+              </p>
+            )}
+          </div>
+        )}
+
+        {error && (
+          <p role="alert" className="text-[13px] text-[var(--danger)]">
+            {error}
+          </p>
+        )}
+        {notice && (
+          <p role="status" className="text-[13px] text-[var(--success)]">
+            {notice}
+          </p>
+        )}
+      </section>
+
+      <section className="mt-12 border-t border-[var(--border-subtle)] pt-8">
+        <h2 className={`${sectionTitle} mb-4`}>Current staff</h2>
+        {staffLoading ? (
+          <p className={meta}>Loading…</p>
+        ) : (staff?.length ?? 0) === 0 ? (
+          <p className={body}>
+            Nobody has a staff role yet. Find someone above to grant one.
+          </p>
+        ) : (
+          <div className="border-t border-[var(--border-subtle)] divide-y divide-[var(--border-subtle)]">
+            {staff?.map((row) => (
+              <div
+                key={row.id}
+                className="py-3 flex items-center justify-between gap-3"
+              >
+                <div className="min-w-0">
+                  <p
+                    className={`flex items-center gap-2 text-[15px] font-semibold ${
+                      row.isActive
+                        ? "text-[var(--text-primary)]"
+                        : "text-[var(--text-muted)]"
+                    }`}
+                  >
+                    <span className="truncate">
+                      {row.user?.name ?? "Unnamed account"}
+                    </span>
+                    {!row.isActive && (
+                      <span className={`shrink-0 ${status("neutral")}`}>
+                        Deactivated
+                      </span>
+                    )}
+                  </p>
+                  <p className={`${meta} truncate`}>{row.user?.email}</p>
+                  <p className={meta}>
+                    {roleLabel(row.role)}
+                    {row.expiresAt
+                      // oxlint-disable-next-line react/purity
+                      ? new Date(row.expiresAt) < new Date()
+                        ? ` · expired ${termDate(row.expiresAt)}`
+                        : ` · until ${termDate(row.expiresAt)}`
+                      : ""}
+                  </p>
+                </div>
+                {mayChange(row.role) && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setNotice(null);
+                      setError(null);
+                      updateStaff.mutate({
+                        adminId: row.id,
+                        isActive: !row.isActive,
+                      });
+                    }}
+                    disabled={updateStaff.isPending}
+                    className={`${row.isActive ? btnDanger : btnSecondary} shrink-0`}
+                  >
+                    {row.isActive ? "Deactivate" : "Reactivate"}
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/staff/page.tsx b/sites/mainweb/app/(portal)/admin/staff/page.tsx
index 4c83ad75..04caa8f2 100644
--- a/sites/mainweb/app/(portal)/admin/staff/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/staff/page.tsx
@@ -1,352 +1,10 @@
-"use client";
-
-import { useState } from "react";
-import { trpc } from "@/lib/trpc";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { usePortalContext } from "@/lib/use-portal-context";
-import { isStaffRole } from "@query/api/portal-context";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  fieldHint,
-  fieldLabel,
-  input,
-  meta,
-  object,
-  page,
-  pageDek,
-  sectionTitle,
-  status,
-} from "@/components/portal/ui";
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
-
-/**
- * Staff and roles.
- *
- * `admin.create`/`update`/`list` have existed for a long time with nothing
- * calling them, so the only way to make somebody a volunteer was an INSERT
- * against production — while /scan's own rejection screen told them to "ask an
- * organiser to add you as event staff". This is that screen.
- */
-
-const ROLES = [
-  {
-    id: "volunteer" as const,
-    label: "Volunteer",
-    hint: "Scans hackathon badges and club passes. No access to admin pages.",
-  },
-  {
-    id: "bug_tester" as const,
-    label: "Bug tester",
-    hint: "Read-only QA. Opens every admin page to test it; the API refuses any change they try to save. No resume downloads.",
-  },
-  {
-    id: "moderator" as const,
-    label: "Moderator",
-    hint: "Full staff access to the admin pages.",
-  },
-  {
-    id: "admin" as const,
-    label: "Admin",
-    hint: "Full staff access to the admin pages.",
-  },
-  {
-    id: "super_admin" as const,
-    label: "Super admin",
-    hint: "Also grants and revokes roles, and can delete an edition.",
-  },
-];
-
-type Role = (typeof ROLES)[number]["id"];
-
-/** The name people know a role by, not its database key. */
-const roleLabel = (id: string) => ROLES.find((r) => r.id === id)?.label ?? id;
-
-/** ISO day rather than a locale format: this renders on the server too, and a
- *  locale-dependent string mismatches on hydration. */
-const termDate = (value: string | Date) =>
-  new Date(value).toISOString().slice(0, 10);
-
-export default function StaffPage() {
-  const utils = trpc.useUtils();
-  const { data: portalContext, isLoading: contextLoading } = usePortalContext();
-
-  const [email, setEmail] = useState("");
-  const [searchedEmail, setSearchedEmail] = useState("");
-  const [role, setRole] = useState<Role>("volunteer");
-  const [error, setError] = useState<string | null>(null);
-  const [notice, setNotice] = useState<string | null>(null);
-
-  const { data: staff, isLoading: staffLoading } = trpc.admin.list.useQuery();
-
-  const isSuperAdmin = portalContext?.role === "super_admin";
-  // Any full staff member may add and remove volunteers, so check-in desks can
-  // be staffed without a super admin; every other role stays theirs alone.
-  const canManage = isStaffRole(portalContext?.role);
-  const roleOptions = isSuperAdmin
-    ? ROLES
-    : ROLES.filter((option) => option.id === "volunteer");
-  const mayChange = (held: string) => isSuperAdmin || held === "volunteer";
-
-  const lookup = trpc.admin.findUserByEmail.useQuery(
-    { email: searchedEmail },
-    { enabled: canManage && searchedEmail.length > 0, retry: false },
-  );
-
-  const done = (message: string) => {
-    setError(null);
-    setNotice(message);
-    utils.admin.list.invalidate();
-    lookup.refetch();
-  };
-
-  const createStaff = trpc.admin.create.useMutation({
-    onSuccess: () => done("Role granted."),
-    onError: (e) => setError(e.message),
-  });
-
-  const updateStaff = trpc.admin.update.useMutation({
-    onSuccess: () => done("Role updated."),
-    onError: (e) => setError(e.message),
-  });
-
-  if (contextLoading) return <LoadingScreen message="Loading…" />;
-
-  // Granting a role is staff-only server-side; saying so beats rendering a
-  // form whose every button is refused.
-  if (!canManage) {
-    return (
-      <div className={page}>
-        <h1 className={adminTitle}>Staff &amp; roles</h1>
-        <p className={pageDek}>
-          Only staff can grant roles. Ask an admin to add you or the person
-          you are trying to add.
-        </p>
-      </div>
-    );
-  }
-
-  const heldRole = lookup.data?.existingRole?.role;
-  const locked = !!heldRole && !mayChange(heldRole);
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import StaffPage from "./StaffPage";
 
+export default function Page() {
   return (
-    <div className={page}>
-      <h1 className={adminTitle}>Staff &amp; roles</h1>
-      <p className={pageDek}>
-        Grant the volunteer role before the event, not at the door.
-        {!isSuperAdmin &&
-          " You can add and remove volunteers; other roles need a super admin."}
-      </p>
-
-      <section className="mt-10 space-y-6">
-        <div>
-          <label htmlFor="staff-email" className={fieldLabel}>
-            Their sign-in email
-          </label>
-          <div className="flex gap-3">
-            <input
-              id="staff-email"
-              type="email"
-              autoComplete="email"
-              spellCheck={false}
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="them@gatech.edu"
-              className={`${input} min-w-0 flex-1`}
-            />
-            <button
-              type="button"
-              onClick={() => {
-                setNotice(null);
-                setError(null);
-                setSearchedEmail(email.trim().toLowerCase());
-              }}
-              disabled={!email.trim()}
-              className={`shrink-0 ${btnSecondary}`}
-            >
-              Find
-            </button>
-          </div>
-          <p className={fieldHint}>
-            They must have signed in at least once. The role attaches to an
-            existing account.
-          </p>
-        </div>
-
-        {searchedEmail && !lookup.isPending && !lookup.data && (
-          <p className="text-[13px] text-[var(--warning)]">
-            No account for {searchedEmail}. Ask them to sign in once, then look
-            again.
-          </p>
-        )}
-
-        {lookup.data && (
-          <div className={`${object} p-5 space-y-5`}>
-            <div>
-              <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-                {lookup.data.name ?? "Unnamed account"}
-              </p>
-              <p className={meta}>{lookup.data.email}</p>
-              {lookup.data.existingRole && (
-                <p className="mt-2 text-[13px] text-[var(--text-secondary)]">
-                  Already {roleLabel(lookup.data.existingRole.role).toLowerCase()}
-                  {lookup.data.existingRole.isActive ? "" : " (deactivated)"}
-                  {lookup.data.existingRole.expiresAt
-                    ? ` until ${termDate(lookup.data.existingRole.expiresAt)}`
-                    : ""}
-                </p>
-              )}
-            </div>
-
-            {roleOptions.length > 1 ? (
-              <fieldset>
-                <legend className={fieldLabel}>Role</legend>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                  {roleOptions.map((option) => (
-                    <button
-                      key={option.id}
-                      type="button"
-                      onClick={() => setRole(option.id)}
-                      aria-pressed={role === option.id}
-                      className={`p-3 text-left rounded-[var(--radius-sm)] border transition-colors ${
-                        role === option.id
-                          ? "border-accent ring-1 ring-accent"
-                          : "border-[var(--border-medium)] hover:border-[var(--border-hover)]"
-                      }`}
-                    >
-                      <p className="text-sm font-semibold text-[var(--text-primary)]">
-                        {option.label}
-                      </p>
-                      <p className={`${meta} mt-1`}>{option.hint}</p>
-                    </button>
-                  ))}
-                </div>
-              </fieldset>
-            ) : (
-              <p className="text-[15px] leading-relaxed text-[var(--text-secondary)]">
-                {roleOptions[0]?.hint}
-              </p>
-            )}
-
-            <button
-              type="button"
-              onClick={() => {
-                const target = lookup.data;
-                if (!target) return;
-                if (target.existingRole) {
-                  updateStaff.mutate({
-                    adminId: target.existingRole.id,
-                    role,
-                    isActive: true,
-                  });
-                } else {
-                  createStaff.mutate({ userId: target.id, role });
-                }
-              }}
-              disabled={
-                locked || createStaff.isPending || updateStaff.isPending
-              }
-              title={
-                locked ? "Only a super admin can change this role." : undefined
-              }
-              className={btnPrimary}
-            >
-              {lookup.data.existingRole
-                ? "Change role"
-                : roleOptions.length > 1
-                  ? "Grant role"
-                  : "Grant volunteer role"}
-            </button>
-            {locked && (
-              <p className={fieldHint}>
-                Only a super admin can change the{" "}
-                {roleLabel(heldRole ?? "").toLowerCase()} role.
-              </p>
-            )}
-          </div>
-        )}
-
-        {error && (
-          <p role="alert" className="text-[13px] text-[var(--danger)]">
-            {error}
-          </p>
-        )}
-        {notice && (
-          <p role="status" className="text-[13px] text-[var(--success)]">
-            {notice}
-          </p>
-        )}
-      </section>
-
-      <section className="mt-12 border-t border-[var(--border-subtle)] pt-8">
-        <h2 className={`${sectionTitle} mb-4`}>Current staff</h2>
-        {staffLoading ? (
-          <p className={meta}>Loading…</p>
-        ) : (staff?.length ?? 0) === 0 ? (
-          <p className={body}>
-            Nobody has a staff role yet. Find someone above to grant one.
-          </p>
-        ) : (
-          <div className="border-t border-[var(--border-subtle)] divide-y divide-[var(--border-subtle)]">
-            {staff?.map((row) => (
-              <div
-                key={row.id}
-                className="py-3 flex items-center justify-between gap-3"
-              >
-                <div className="min-w-0">
-                  <p
-                    className={`flex items-center gap-2 text-[15px] font-semibold ${
-                      row.isActive
-                        ? "text-[var(--text-primary)]"
-                        : "text-[var(--text-muted)]"
-                    }`}
-                  >
-                    <span className="truncate">
-                      {row.user?.name ?? "Unnamed account"}
-                    </span>
-                    {!row.isActive && (
-                      <span className={`shrink-0 ${status("neutral")}`}>
-                        Deactivated
-                      </span>
-                    )}
-                  </p>
-                  <p className={`${meta} truncate`}>{row.user?.email}</p>
-                  <p className={meta}>
-                    {roleLabel(row.role)}
-                    {row.expiresAt
-                      // oxlint-disable-next-line react/purity
-                      ? new Date(row.expiresAt) < new Date()
-                        ? ` · expired ${termDate(row.expiresAt)}`
-                        : ` · until ${termDate(row.expiresAt)}`
-                      : ""}
-                  </p>
-                </div>
-                {mayChange(row.role) && (
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setNotice(null);
-                      setError(null);
-                      updateStaff.mutate({
-                        adminId: row.id,
-                        isActive: !row.isActive,
-                      });
-                    }}
-                    disabled={updateStaff.isPending}
-                    className={`${row.isActive ? btnDanger : btnSecondary} shrink-0`}
-                  >
-                    {row.isActive ? "Deactivate" : "Reactivate"}
-                  </button>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
-    </div>
+    <PrefetchedPage reads={(c) => [["admin.list", undefined, c.admin.list()]]}>
+      <StaffPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/subteams/AdminSubteamsPage.tsx b/sites/mainweb/app/(portal)/admin/subteams/AdminSubteamsPage.tsx
new file mode 100644
index 00000000..1c70b730
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/subteams/AdminSubteamsPage.tsx
@@ -0,0 +1,825 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  SubteamApplicationChip,
+  SubteamChip,
+  shortDate,
+} from "@/components/portal/subteams/chips";
+import { trpc } from "@/lib/trpc";
+import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
+import type { RouterOutputs } from "@query/api";
+import type { SubteamApplicationStatus } from "@query/db";
+import {
+  body,
+  btnDanger,
+  btnInk,
+  btnPrimary,
+  btnSecondary,
+  chip,
+  fieldHint,
+  fieldLabel,
+  input,
+  itemTitle,
+  meta,
+  page,
+  pageDek,
+  sectionTitle,
+} from "@/components/portal/ui";
+
+type SubteamRow = RouterOutputs["subteam"]["adminList"][number];
+type Applicant = RouterOutputs["subteam"]["applicants"]["applicants"][number];
+type RosterMember = RouterOutputs["subteam"]["roster"][number];
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
+const errorText = "mt-3 text-[13px] text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed";
+const backLink =
+  "text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]";
+const quote = `${body} whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`;
+
+// The router's limit, repeated so the add button can stop at it.
+const MAX_QUESTIONS = 10;
+
+/** Delays a fast-changing value so it can drive a query without firing one per
+ *  keystroke. */
+function useDebounced<T>(value: T, ms: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), ms);
+    return () => clearTimeout(timer);
+  }, [value, ms]);
+  return debounced;
+}
+
+type QuestionDraft = { id: string; prompt: string; required: boolean };
+
+type Draft = {
+  name: string;
+  summary: string;
+  description: string;
+  isOpen: boolean;
+  questions: QuestionDraft[];
+};
+
+const draftFrom = (row?: SubteamRow): Draft => ({
+  name: row?.name ?? "",
+  summary: row?.summary ?? "",
+  description: row?.description ?? "",
+  isOpen: row?.isOpen ?? false,
+  questions: row?.questions.map((question) => ({ ...question })) ?? [],
+});
+
+/**
+ * Create and edit share one form. A question keeps its id across edits, so the
+ * answers already given stay matched to it; a new one is named here and the
+ * server keeps that name.
+ */
+function SubteamForm({
+  subteam,
+  onDone,
+}: {
+  subteam?: SubteamRow;
+  onDone: () => void;
+}) {
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+  const [draft, setDraft] = useState(() => draftFrom(subteam));
+
+  const onSuccess = async () => {
+    onDone();
+    await utils.subteam.adminList.invalidate();
+  };
+  const create = trpc.subteam.create.useMutation({ onSuccess });
+  const update = trpc.subteam.update.useMutation({ onSuccess });
+  const save = subteam ? update : create;
+
+  const setQuestion = (index: number, patch: Partial<QuestionDraft>) =>
+    setDraft((prev) => ({
+      ...prev,
+      questions: prev.questions.map((question, i) =>
+        i === index ? { ...question, ...patch } : question,
+      ),
+    }));
+
+  const archived = !!subteam && subteam.archivedAt !== null;
+
+  return (
+    <form
+      className="space-y-4"
+      onSubmit={(event) => {
+        event.preventDefault();
+        const values = {
+          name: draft.name.trim(),
+          summary: draft.summary.trim() || undefined,
+          description: draft.description.trim() || undefined,
+          isOpen: draft.isOpen,
+          questions: draft.questions.map((question) => ({
+            ...question,
+            prompt: question.prompt.trim(),
+          })),
+        };
+        if (subteam) update.mutate({ id: subteam.id, ...values });
+        else create.mutate(values);
+      }}
+    >
+      <div>
+        <label htmlFor="subteam-name" className={fieldLabel}>
+          Name
+        </label>
+        <input
+          id="subteam-name"
+          required
+          maxLength={120}
+          value={draft.name}
+          onChange={(event) => setDraft({ ...draft, name: event.target.value })}
+          className={input}
+        />
+      </div>
+      <div>
+        <label htmlFor="subteam-summary" className={fieldLabel}>
+          Short description
+        </label>
+        <input
+          id="subteam-summary"
+          maxLength={300}
+          value={draft.summary}
+          onChange={(event) =>
+            setDraft({ ...draft, summary: event.target.value })
+          }
+          placeholder="One line a member reads before opening it"
+          className={input}
+        />
+      </div>
+      <div>
+        <label htmlFor="subteam-description" className={fieldLabel}>
+          What you would do
+        </label>
+        <textarea
+          id="subteam-description"
+          rows={4}
+          maxLength={4000}
+          value={draft.description}
+          onChange={(event) =>
+            setDraft({ ...draft, description: event.target.value })
+          }
+          className={input}
+        />
+      </div>
+
+      <fieldset>
+        <legend className={fieldLabel}>Application questions</legend>
+        {draft.questions.length === 0 && (
+          <p className={fieldHint}>
+            No questions yet. Members can still apply with a note.
+          </p>
+        )}
+        <ol className="space-y-3">
+          {draft.questions.map((question, index) => (
+            <li
+              key={question.id}
+              className="flex flex-col gap-2 sm:flex-row sm:items-center"
+            >
+              <input
+                aria-label={`Question ${index + 1}`}
+                required
+                maxLength={300}
+                value={question.prompt}
+                onChange={(event) =>
+                  setQuestion(index, { prompt: event.target.value })
+                }
+                placeholder="Why this subteam?"
+                className={`${input} sm:flex-1`}
+              />
+              <div className="flex items-center gap-4">
+                <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                  <input
+                    type="checkbox"
+                    checked={question.required}
+                    onChange={(event) =>
+                      setQuestion(index, { required: event.target.checked })
+                    }
+                    className="h-4 w-4 accent-[var(--accent)]"
+                  />
+                  Required
+                </label>
+                <button
+                  type="button"
+                  onClick={() =>
+                    setDraft((prev) => ({
+                      ...prev,
+                      questions: prev.questions.filter((_, i) => i !== index),
+                    }))
+                  }
+                  className={quietAction}
+                >
+                  Remove
+                </button>
+              </div>
+            </li>
+          ))}
+        </ol>
+        <button
+          type="button"
+          disabled={draft.questions.length >= MAX_QUESTIONS}
+          onClick={() =>
+            setDraft((prev) => ({
+              ...prev,
+              questions: [
+                ...prev.questions,
+                { id: crypto.randomUUID(), prompt: "", required: true },
+              ],
+            }))
+          }
+          className={`${quietAction} mt-3`}
+        >
+          Add a question
+        </button>
+      </fieldset>
+
+      <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+        <input
+          type="checkbox"
+          checked={draft.isOpen}
+          disabled={archived}
+          onChange={(event) =>
+            setDraft({ ...draft, isOpen: event.target.checked })
+          }
+          className="h-4 w-4 accent-[var(--accent)]"
+        />
+        Taking applications
+        {archived && <span className={meta}>(restore it first)</span>}
+      </label>
+
+      <div className="flex flex-wrap gap-3 pt-1">
+        <button
+          type="submit"
+          disabled={readOnly || save.isPending}
+          title={readOnly ? READ_ONLY_TITLE : undefined}
+          className={btnPrimary}
+        >
+          {save.isPending
+            ? "Saving…"
+            : subteam
+              ? "Save changes"
+              : "Create subteam"}
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            save.reset();
+            onDone();
+          }}
+          className={btnSecondary}
+        >
+          Cancel
+        </button>
+      </div>
+
+      {save.error && (
+        <p role="alert" className={errorText}>
+          {save.error.message}
+        </p>
+      )}
+    </form>
+  );
+}
+
+function SubteamListRow({
+  subteam,
+  onReview,
+}: {
+  subteam: SubteamRow;
+  onReview: () => void;
+}) {
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+  const [editing, setEditing] = useState(false);
+  const archived = subteam.archivedAt !== null;
+
+  const setArchived = trpc.subteam.setArchived.useMutation({
+    onSuccess: async () => {
+      await utils.subteam.adminList.invalidate();
+    },
+  });
+
+  if (editing) {
+    return (
+      <div className="py-6">
+        <h3 className={`${itemTitle} mb-4`}>Edit {subteam.name}</h3>
+        <SubteamForm subteam={subteam} onDone={() => setEditing(false)} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-5">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+            <h3 className={itemTitle}>{subteam.name}</h3>
+            <SubteamChip
+              isOpen={subteam.isOpen}
+              archivedAt={subteam.archivedAt}
+            />
+          </div>
+          {subteam.summary && (
+            <p className={`${body} mt-1`}>{subteam.summary}</p>
+          )}
+          <p className={`${meta} mt-2 tabular-nums`}>
+            {subteam.pending} waiting · {subteam.accepted} on the team ·{" "}
+            {subteam.questions.length} question
+            {subteam.questions.length === 1 ? "" : "s"}
+          </p>
+        </div>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-4">
+          <button type="button" onClick={onReview} className={btnSecondary}>
+            Review
+          </button>
+          <button
+            type="button"
+            onClick={() => setEditing(true)}
+            className={quietAction}
+          >
+            Edit
+          </button>
+          <button
+            type="button"
+            disabled={readOnly || setArchived.isPending}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            onClick={() =>
+              setArchived.mutate({ id: subteam.id, archived: !archived })
+            }
+            className={quietAction}
+          >
+            {archived ? "Restore" : "Archive"}
+          </button>
+        </div>
+      </div>
+
+      {setArchived.error && (
+        <p role="alert" className={errorText}>
+          {setArchived.error.message}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function ApplicantRow({
+  applicant,
+  archived,
+  onChanged,
+}: {
+  applicant: Applicant;
+  archived: boolean;
+  onChanged: () => Promise<unknown>;
+}) {
+  const readOnly = useReadOnly();
+  const [note, setNote] = useState("");
+  const [writingNote, setWritingNote] = useState(false);
+
+  const decide = trpc.subteam.decide.useMutation({ onSuccess: onChanged });
+  const send = (decision: "accepted" | "rejected") =>
+    decide.mutate({
+      applicationId: applicant.id,
+      decision,
+      note: note.trim() || undefined,
+    });
+
+  const blocked = readOnly || archived || decide.isPending;
+
+  return (
+    <li className="border-b border-[var(--border-subtle)] py-5">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+        <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+          {applicant.name ?? applicant.email}
+        </p>
+        <SubteamApplicationChip status={applicant.status} side="admin" />
+      </div>
+      <p className={`${meta} mt-0.5 break-all`}>
+        <a
+          href={`mailto:${applicant.email}`}
+          className="transition-colors hover:text-[var(--text-primary)]"
+        >
+          {applicant.email}
+        </a>{" "}
+        · applied {shortDate(applicant.appliedAt)}
+      </p>
+
+      {applicant.answers.length > 0 && (
+        <dl className="mt-4 max-w-2xl space-y-3">
+          {applicant.answers.map((row) => (
+            <div key={row.questionId}>
+              <dt className={meta}>{row.prompt}</dt>
+              <dd className={`${body} mt-0.5 whitespace-pre-line`}>
+                {row.answer}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      )}
+      {applicant.note && (
+        <p className={`${quote} mt-4 max-w-2xl`}>{applicant.note}</p>
+      )}
+      {applicant.decisionNote && applicant.status !== "pending" && (
+        <p className={`${meta} mt-3`}>Note sent: {applicant.decisionNote}</p>
+      )}
+
+      {applicant.status === "pending" && (
+        <div className="mt-4">
+          {writingNote && (
+            <div className="mb-3 max-w-2xl">
+              <label htmlFor={`note-${applicant.id}`} className={fieldLabel}>
+                Note to them (sent with the decision)
+              </label>
+              <textarea
+                id={`note-${applicant.id}`}
+                rows={2}
+                maxLength={1000}
+                value={note}
+                onChange={(event) => setNote(event.target.value)}
+                className={input}
+              />
+            </div>
+          )}
+          <div className="flex flex-wrap items-center gap-3">
+            <button
+              type="button"
+              disabled={blocked}
+              title={readOnly ? READ_ONLY_TITLE : undefined}
+              onClick={() => send("accepted")}
+              className={btnInk}
+            >
+              Accept
+            </button>
+            <button
+              type="button"
+              disabled={blocked}
+              title={readOnly ? READ_ONLY_TITLE : undefined}
+              onClick={() => send("rejected")}
+              className={btnSecondary}
+            >
+              Reject
+            </button>
+            {!writingNote && (
+              <button
+                type="button"
+                onClick={() => setWritingNote(true)}
+                className={quietAction}
+              >
+                Add a note
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {decide.error && (
+        <p role="alert" className={errorText}>
+          {decide.error.message}
+        </p>
+      )}
+    </li>
+  );
+}
+
+function RosterRow({
+  member,
+  onChanged,
+}: {
+  member: RosterMember;
+  onChanged: () => Promise<unknown>;
+}) {
+  const readOnly = useReadOnly();
+  const [confirm, setConfirm] = useState(false);
+  const remove = trpc.subteam.removeMember.useMutation({
+    onSuccess: onChanged,
+  });
+
+  return (
+    <li className="flex flex-wrap items-center justify-between gap-4 border-b border-[var(--border-subtle)] py-3">
+      <div className="min-w-0 flex-1">
+        <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+          {member.name ?? member.email}
+        </p>
+        <p className={`${meta} break-all`}>
+          {member.email}
+          {member.decidedAt ? ` · since ${shortDate(member.decidedAt)}` : ""}
+        </p>
+        {remove.error && (
+          <p role="alert" className={errorText}>
+            {remove.error.message}
+          </p>
+        )}
+      </div>
+
+      {confirm ? (
+        <span className="flex flex-wrap items-center gap-3">
+          <span className="text-sm text-[var(--text-muted)]">
+            Take them off the subteam?
+          </span>
+          <button
+            type="button"
+            disabled={readOnly || remove.isPending}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            onClick={() => {
+              remove.mutate({ applicationId: member.id });
+              setConfirm(false);
+            }}
+            className={btnDanger}
+          >
+            Remove
+          </button>
+          <button
+            type="button"
+            onClick={() => setConfirm(false)}
+            className={btnSecondary}
+          >
+            Cancel
+          </button>
+        </span>
+      ) : (
+        <button
+          type="button"
+          disabled={readOnly}
+          title={readOnly ? READ_ONLY_TITLE : undefined}
+          onClick={() => setConfirm(true)}
+          className={quietAction}
+        >
+          Remove
+        </button>
+      )}
+    </li>
+  );
+}
+
+const FILTERS: { value: SubteamApplicationStatus | null; label: string }[] = [
+  { value: null, label: "All" },
+  { value: "pending", label: "Waiting" },
+  { value: "accepted", label: "Accepted" },
+  { value: "rejected", label: "Rejected" },
+  { value: "withdrawn", label: "Withdrawn" },
+  { value: "removed", label: "Removed" },
+];
+
+function SubteamReview({
+  subteam,
+  onBack,
+}: {
+  subteam: SubteamRow;
+  onBack: () => void;
+}) {
+  const utils = trpc.useUtils();
+  // Waiting first: that is the queue somebody opened this to work.
+  const [filter, setFilter] = useState<SubteamApplicationStatus | null>(
+    "pending",
+  );
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounced(search, 300);
+  const archived = subteam.archivedAt !== null;
+
+  const applicants = trpc.subteam.applicants.useQuery(
+    {
+      subteamId: subteam.id,
+      status: filter ?? undefined,
+      search: debouncedSearch.trim() || undefined,
+    },
+    { placeholderData: (previous) => previous },
+  );
+  const roster = trpc.subteam.roster.useQuery({ subteamId: subteam.id });
+
+  // A decision moves a row between filters, onto the roster, and changes the
+  // counts on the list behind this view.
+  const refresh = () =>
+    Promise.all([
+      utils.subteam.applicants.invalidate({ subteamId: subteam.id }),
+      utils.subteam.roster.invalidate({ subteamId: subteam.id }),
+      utils.subteam.adminList.invalidate(),
+    ]);
+
+  const counts = applicants.data?.counts;
+  const total = counts
+    ? Object.values(counts).reduce((sum, value) => sum + value, 0)
+    : null;
+  const rows = applicants.data?.applicants ?? [];
+  const members = roster.data ?? [];
+
+  return (
+    <div className={page}>
+      <button type="button" onClick={onBack} className={backLink}>
+        ← All subteams
+      </button>
+
+      <header className="mt-6">
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+          <h1 className={adminTitle}>{subteam.name}</h1>
+          <SubteamChip
+            isOpen={subteam.isOpen}
+            archivedAt={subteam.archivedAt}
+          />
+        </div>
+        {archived && (
+          <p className={pageDek}>
+            Archived, so decisions are paused. Restore it from the list to
+            review again.
+          </p>
+        )}
+      </header>
+
+      <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+        <div className="flex items-baseline justify-between gap-4">
+          <h2 className={sectionTitle}>On the team</h2>
+          <span className={`${meta} tabular-nums`}>{members.length}</span>
+        </div>
+        {roster.error ? (
+          <p role="alert" className={errorText}>
+            {roster.error.message}
+          </p>
+        ) : members.length > 0 ? (
+          <ul className="mt-4 border-t border-[var(--border-subtle)]">
+            {members.map((member) => (
+              <RosterRow key={member.id} member={member} onChanged={refresh} />
+            ))}
+          </ul>
+        ) : (
+          <p className={`${body} mt-3`}>
+            {roster.isPending
+              ? "Loading…"
+              : "Nobody yet. Accepted applicants show up here."}
+          </p>
+        )}
+      </section>
+
+      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+        <div className="flex items-baseline justify-between gap-4">
+          <h2 className={sectionTitle}>Applications</h2>
+          {total !== null && (
+            <span className={`${meta} tabular-nums`}>{total}</span>
+          )}
+        </div>
+
+        <div className="mt-4 flex flex-wrap gap-2">
+          {FILTERS.map((option) => (
+            <button
+              key={option.label}
+              type="button"
+              aria-pressed={filter === option.value}
+              onClick={() => setFilter(option.value)}
+              className={chip(filter === option.value)}
+            >
+              {option.label}
+              {counts && option.value ? (
+                <span className="ml-1.5 tabular-nums opacity-70">
+                  {counts[option.value]}
+                </span>
+              ) : null}
+            </button>
+          ))}
+        </div>
+
+        <label htmlFor="applicant-search" className="sr-only">
+          Search by name or email
+        </label>
+        <input
+          id="applicant-search"
+          type="search"
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          maxLength={100}
+          placeholder="Search by name or email"
+          className={`${input} mt-4 max-w-md`}
+        />
+
+        {applicants.error ? (
+          <p role="alert" className={errorText}>
+            {applicants.error.message}
+          </p>
+        ) : applicants.isPending ? (
+          <p className={`${body} mt-6`}>Loading…</p>
+        ) : rows.length > 0 ? (
+          <ul className="mt-6 border-t border-[var(--border-subtle)]">
+            {rows.map((applicant) => (
+              <ApplicantRow
+                key={applicant.id}
+                applicant={applicant}
+                archived={archived}
+                onChanged={refresh}
+              />
+            ))}
+          </ul>
+        ) : (
+          <p className={`${body} mt-6`}>
+            {debouncedSearch.trim() || filter
+              ? "Nothing matches that filter."
+              : "Nobody has applied yet."}
+          </p>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export default function AdminSubteamsPage() {
+  const { data: session, status } = useSession();
+  const readOnly = useReadOnly();
+  const [creating, setCreating] = useState(false);
+  const [reviewingId, setReviewingId] = useState<string | null>(null);
+
+  const list = trpc.subteam.adminList.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (status === "loading" || list.isPending) return <LoadingScreen />;
+
+  if (list.error) {
+    return (
+      <div className={page}>
+        <h1 className={adminTitle}>Subteams</h1>
+        <p role="alert" className="mt-3 text-[15px] text-[var(--danger)]">
+          {list.error.message} Refresh the page to try again.
+        </p>
+      </div>
+    );
+  }
+
+  const rows = list.data ?? [];
+  const reviewing = rows.find((row) => row.id === reviewingId);
+  if (reviewing) {
+    return (
+      <SubteamReview subteam={reviewing} onBack={() => setReviewingId(null)} />
+    );
+  }
+
+  // Live ones first; archived stay reachable for their history.
+  const active = rows.filter((row) => row.archivedAt === null);
+  const archived = rows.filter((row) => row.archivedAt !== null);
+
+  return (
+    <div className={page}>
+      <h1 className={adminTitle}>Subteams</h1>
+      <p className={pageDek}>
+        The groups members apply to join. Write the questions, open it, then
+        accept people onto the team.
+      </p>
+
+      <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+        {creating ? (
+          <>
+            <h2 className={`${sectionTitle} mb-5`}>New subteam</h2>
+            <SubteamForm onDone={() => setCreating(false)} />
+          </>
+        ) : (
+          <button
+            type="button"
+            disabled={readOnly}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            onClick={() => setCreating(true)}
+            className={btnPrimary}
+          >
+            New subteam
+          </button>
+        )}
+      </section>
+
+      <section className="mt-10">
+        {active.length > 0 ? (
+          <div className="divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]">
+            {active.map((subteam) => (
+              <SubteamListRow
+                key={subteam.id}
+                subteam={subteam}
+                onReview={() => setReviewingId(subteam.id)}
+              />
+            ))}
+          </div>
+        ) : (
+          <p className={`${body} max-w-xl`}>
+            No subteams yet. Create one and open it when its questions are
+            ready.
+          </p>
+        )}
+      </section>
+
+      {archived.length > 0 && (
+        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+          <h2 className={sectionTitle}>Archived</h2>
+          <div className="mt-2 divide-y divide-[var(--border-subtle)]">
+            {archived.map((subteam) => (
+              <SubteamListRow
+                key={subteam.id}
+                subteam={subteam}
+                onReview={() => setReviewingId(subteam.id)}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/subteams/page.tsx b/sites/mainweb/app/(portal)/admin/subteams/page.tsx
index 1c70b730..0951605e 100644
--- a/sites/mainweb/app/(portal)/admin/subteams/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/subteams/page.tsx
@@ -1,825 +1,12 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useSession } from "next-auth/react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  SubteamApplicationChip,
-  SubteamChip,
-  shortDate,
-} from "@/components/portal/subteams/chips";
-import { trpc } from "@/lib/trpc";
-import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
-import type { RouterOutputs } from "@query/api";
-import type { SubteamApplicationStatus } from "@query/db";
-import {
-  body,
-  btnDanger,
-  btnInk,
-  btnPrimary,
-  btnSecondary,
-  chip,
-  fieldHint,
-  fieldLabel,
-  input,
-  itemTitle,
-  meta,
-  page,
-  pageDek,
-  sectionTitle,
-} from "@/components/portal/ui";
-
-type SubteamRow = RouterOutputs["subteam"]["adminList"][number];
-type Applicant = RouterOutputs["subteam"]["applicants"]["applicants"][number];
-type RosterMember = RouterOutputs["subteam"]["roster"][number];
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
-const errorText = "mt-3 text-[13px] text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50 disabled:cursor-not-allowed";
-const backLink =
-  "text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]";
-const quote = `${body} whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`;
-
-// The router's limit, repeated so the add button can stop at it.
-const MAX_QUESTIONS = 10;
-
-/** Delays a fast-changing value so it can drive a query without firing one per
- *  keystroke. */
-function useDebounced<T>(value: T, ms: number): T {
-  const [debounced, setDebounced] = useState(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebounced(value), ms);
-    return () => clearTimeout(timer);
-  }, [value, ms]);
-  return debounced;
-}
-
-type QuestionDraft = { id: string; prompt: string; required: boolean };
-
-type Draft = {
-  name: string;
-  summary: string;
-  description: string;
-  isOpen: boolean;
-  questions: QuestionDraft[];
-};
-
-const draftFrom = (row?: SubteamRow): Draft => ({
-  name: row?.name ?? "",
-  summary: row?.summary ?? "",
-  description: row?.description ?? "",
-  isOpen: row?.isOpen ?? false,
-  questions: row?.questions.map((question) => ({ ...question })) ?? [],
-});
-
-/**
- * Create and edit share one form. A question keeps its id across edits, so the
- * answers already given stay matched to it; a new one is named here and the
- * server keeps that name.
- */
-function SubteamForm({
-  subteam,
-  onDone,
-}: {
-  subteam?: SubteamRow;
-  onDone: () => void;
-}) {
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-  const [draft, setDraft] = useState(() => draftFrom(subteam));
-
-  const onSuccess = async () => {
-    onDone();
-    await utils.subteam.adminList.invalidate();
-  };
-  const create = trpc.subteam.create.useMutation({ onSuccess });
-  const update = trpc.subteam.update.useMutation({ onSuccess });
-  const save = subteam ? update : create;
-
-  const setQuestion = (index: number, patch: Partial<QuestionDraft>) =>
-    setDraft((prev) => ({
-      ...prev,
-      questions: prev.questions.map((question, i) =>
-        i === index ? { ...question, ...patch } : question,
-      ),
-    }));
-
-  const archived = !!subteam && subteam.archivedAt !== null;
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminSubteamsPage from "./AdminSubteamsPage";
 
+export default function Page() {
   return (
-    <form
-      className="space-y-4"
-      onSubmit={(event) => {
-        event.preventDefault();
-        const values = {
-          name: draft.name.trim(),
-          summary: draft.summary.trim() || undefined,
-          description: draft.description.trim() || undefined,
-          isOpen: draft.isOpen,
-          questions: draft.questions.map((question) => ({
-            ...question,
-            prompt: question.prompt.trim(),
-          })),
-        };
-        if (subteam) update.mutate({ id: subteam.id, ...values });
-        else create.mutate(values);
-      }}
+    <PrefetchedPage
+      reads={(c) => [["subteam.adminList", undefined, c.subteam.adminList()]]}
     >
-      <div>
-        <label htmlFor="subteam-name" className={fieldLabel}>
-          Name
-        </label>
-        <input
-          id="subteam-name"
-          required
-          maxLength={120}
-          value={draft.name}
-          onChange={(event) => setDraft({ ...draft, name: event.target.value })}
-          className={input}
-        />
-      </div>
-      <div>
-        <label htmlFor="subteam-summary" className={fieldLabel}>
-          Short description
-        </label>
-        <input
-          id="subteam-summary"
-          maxLength={300}
-          value={draft.summary}
-          onChange={(event) =>
-            setDraft({ ...draft, summary: event.target.value })
-          }
-          placeholder="One line a member reads before opening it"
-          className={input}
-        />
-      </div>
-      <div>
-        <label htmlFor="subteam-description" className={fieldLabel}>
-          What you would do
-        </label>
-        <textarea
-          id="subteam-description"
-          rows={4}
-          maxLength={4000}
-          value={draft.description}
-          onChange={(event) =>
-            setDraft({ ...draft, description: event.target.value })
-          }
-          className={input}
-        />
-      </div>
-
-      <fieldset>
-        <legend className={fieldLabel}>Application questions</legend>
-        {draft.questions.length === 0 && (
-          <p className={fieldHint}>
-            No questions yet. Members can still apply with a note.
-          </p>
-        )}
-        <ol className="space-y-3">
-          {draft.questions.map((question, index) => (
-            <li
-              key={question.id}
-              className="flex flex-col gap-2 sm:flex-row sm:items-center"
-            >
-              <input
-                aria-label={`Question ${index + 1}`}
-                required
-                maxLength={300}
-                value={question.prompt}
-                onChange={(event) =>
-                  setQuestion(index, { prompt: event.target.value })
-                }
-                placeholder="Why this subteam?"
-                className={`${input} sm:flex-1`}
-              />
-              <div className="flex items-center gap-4">
-                <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
-                  <input
-                    type="checkbox"
-                    checked={question.required}
-                    onChange={(event) =>
-                      setQuestion(index, { required: event.target.checked })
-                    }
-                    className="h-4 w-4 accent-[var(--accent)]"
-                  />
-                  Required
-                </label>
-                <button
-                  type="button"
-                  onClick={() =>
-                    setDraft((prev) => ({
-                      ...prev,
-                      questions: prev.questions.filter((_, i) => i !== index),
-                    }))
-                  }
-                  className={quietAction}
-                >
-                  Remove
-                </button>
-              </div>
-            </li>
-          ))}
-        </ol>
-        <button
-          type="button"
-          disabled={draft.questions.length >= MAX_QUESTIONS}
-          onClick={() =>
-            setDraft((prev) => ({
-              ...prev,
-              questions: [
-                ...prev.questions,
-                { id: crypto.randomUUID(), prompt: "", required: true },
-              ],
-            }))
-          }
-          className={`${quietAction} mt-3`}
-        >
-          Add a question
-        </button>
-      </fieldset>
-
-      <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
-        <input
-          type="checkbox"
-          checked={draft.isOpen}
-          disabled={archived}
-          onChange={(event) =>
-            setDraft({ ...draft, isOpen: event.target.checked })
-          }
-          className="h-4 w-4 accent-[var(--accent)]"
-        />
-        Taking applications
-        {archived && <span className={meta}>(restore it first)</span>}
-      </label>
-
-      <div className="flex flex-wrap gap-3 pt-1">
-        <button
-          type="submit"
-          disabled={readOnly || save.isPending}
-          title={readOnly ? READ_ONLY_TITLE : undefined}
-          className={btnPrimary}
-        >
-          {save.isPending
-            ? "Saving…"
-            : subteam
-              ? "Save changes"
-              : "Create subteam"}
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            save.reset();
-            onDone();
-          }}
-          className={btnSecondary}
-        >
-          Cancel
-        </button>
-      </div>
-
-      {save.error && (
-        <p role="alert" className={errorText}>
-          {save.error.message}
-        </p>
-      )}
-    </form>
-  );
-}
-
-function SubteamListRow({
-  subteam,
-  onReview,
-}: {
-  subteam: SubteamRow;
-  onReview: () => void;
-}) {
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-  const [editing, setEditing] = useState(false);
-  const archived = subteam.archivedAt !== null;
-
-  const setArchived = trpc.subteam.setArchived.useMutation({
-    onSuccess: async () => {
-      await utils.subteam.adminList.invalidate();
-    },
-  });
-
-  if (editing) {
-    return (
-      <div className="py-6">
-        <h3 className={`${itemTitle} mb-4`}>Edit {subteam.name}</h3>
-        <SubteamForm subteam={subteam} onDone={() => setEditing(false)} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="py-5">
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-            <h3 className={itemTitle}>{subteam.name}</h3>
-            <SubteamChip
-              isOpen={subteam.isOpen}
-              archivedAt={subteam.archivedAt}
-            />
-          </div>
-          {subteam.summary && (
-            <p className={`${body} mt-1`}>{subteam.summary}</p>
-          )}
-          <p className={`${meta} mt-2 tabular-nums`}>
-            {subteam.pending} waiting · {subteam.accepted} on the team ·{" "}
-            {subteam.questions.length} question
-            {subteam.questions.length === 1 ? "" : "s"}
-          </p>
-        </div>
-
-        <div className="flex shrink-0 flex-wrap items-center gap-4">
-          <button type="button" onClick={onReview} className={btnSecondary}>
-            Review
-          </button>
-          <button
-            type="button"
-            onClick={() => setEditing(true)}
-            className={quietAction}
-          >
-            Edit
-          </button>
-          <button
-            type="button"
-            disabled={readOnly || setArchived.isPending}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            onClick={() =>
-              setArchived.mutate({ id: subteam.id, archived: !archived })
-            }
-            className={quietAction}
-          >
-            {archived ? "Restore" : "Archive"}
-          </button>
-        </div>
-      </div>
-
-      {setArchived.error && (
-        <p role="alert" className={errorText}>
-          {setArchived.error.message}
-        </p>
-      )}
-    </div>
-  );
-}
-
-function ApplicantRow({
-  applicant,
-  archived,
-  onChanged,
-}: {
-  applicant: Applicant;
-  archived: boolean;
-  onChanged: () => Promise<unknown>;
-}) {
-  const readOnly = useReadOnly();
-  const [note, setNote] = useState("");
-  const [writingNote, setWritingNote] = useState(false);
-
-  const decide = trpc.subteam.decide.useMutation({ onSuccess: onChanged });
-  const send = (decision: "accepted" | "rejected") =>
-    decide.mutate({
-      applicationId: applicant.id,
-      decision,
-      note: note.trim() || undefined,
-    });
-
-  const blocked = readOnly || archived || decide.isPending;
-
-  return (
-    <li className="border-b border-[var(--border-subtle)] py-5">
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
-        <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-          {applicant.name ?? applicant.email}
-        </p>
-        <SubteamApplicationChip status={applicant.status} side="admin" />
-      </div>
-      <p className={`${meta} mt-0.5 break-all`}>
-        <a
-          href={`mailto:${applicant.email}`}
-          className="transition-colors hover:text-[var(--text-primary)]"
-        >
-          {applicant.email}
-        </a>{" "}
-        · applied {shortDate(applicant.appliedAt)}
-      </p>
-
-      {applicant.answers.length > 0 && (
-        <dl className="mt-4 max-w-2xl space-y-3">
-          {applicant.answers.map((row) => (
-            <div key={row.questionId}>
-              <dt className={meta}>{row.prompt}</dt>
-              <dd className={`${body} mt-0.5 whitespace-pre-line`}>
-                {row.answer}
-              </dd>
-            </div>
-          ))}
-        </dl>
-      )}
-      {applicant.note && (
-        <p className={`${quote} mt-4 max-w-2xl`}>{applicant.note}</p>
-      )}
-      {applicant.decisionNote && applicant.status !== "pending" && (
-        <p className={`${meta} mt-3`}>Note sent: {applicant.decisionNote}</p>
-      )}
-
-      {applicant.status === "pending" && (
-        <div className="mt-4">
-          {writingNote && (
-            <div className="mb-3 max-w-2xl">
-              <label htmlFor={`note-${applicant.id}`} className={fieldLabel}>
-                Note to them (sent with the decision)
-              </label>
-              <textarea
-                id={`note-${applicant.id}`}
-                rows={2}
-                maxLength={1000}
-                value={note}
-                onChange={(event) => setNote(event.target.value)}
-                className={input}
-              />
-            </div>
-          )}
-          <div className="flex flex-wrap items-center gap-3">
-            <button
-              type="button"
-              disabled={blocked}
-              title={readOnly ? READ_ONLY_TITLE : undefined}
-              onClick={() => send("accepted")}
-              className={btnInk}
-            >
-              Accept
-            </button>
-            <button
-              type="button"
-              disabled={blocked}
-              title={readOnly ? READ_ONLY_TITLE : undefined}
-              onClick={() => send("rejected")}
-              className={btnSecondary}
-            >
-              Reject
-            </button>
-            {!writingNote && (
-              <button
-                type="button"
-                onClick={() => setWritingNote(true)}
-                className={quietAction}
-              >
-                Add a note
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-
-      {decide.error && (
-        <p role="alert" className={errorText}>
-          {decide.error.message}
-        </p>
-      )}
-    </li>
-  );
-}
-
-function RosterRow({
-  member,
-  onChanged,
-}: {
-  member: RosterMember;
-  onChanged: () => Promise<unknown>;
-}) {
-  const readOnly = useReadOnly();
-  const [confirm, setConfirm] = useState(false);
-  const remove = trpc.subteam.removeMember.useMutation({
-    onSuccess: onChanged,
-  });
-
-  return (
-    <li className="flex flex-wrap items-center justify-between gap-4 border-b border-[var(--border-subtle)] py-3">
-      <div className="min-w-0 flex-1">
-        <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-          {member.name ?? member.email}
-        </p>
-        <p className={`${meta} break-all`}>
-          {member.email}
-          {member.decidedAt ? ` · since ${shortDate(member.decidedAt)}` : ""}
-        </p>
-        {remove.error && (
-          <p role="alert" className={errorText}>
-            {remove.error.message}
-          </p>
-        )}
-      </div>
-
-      {confirm ? (
-        <span className="flex flex-wrap items-center gap-3">
-          <span className="text-sm text-[var(--text-muted)]">
-            Take them off the subteam?
-          </span>
-          <button
-            type="button"
-            disabled={readOnly || remove.isPending}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            onClick={() => {
-              remove.mutate({ applicationId: member.id });
-              setConfirm(false);
-            }}
-            className={btnDanger}
-          >
-            Remove
-          </button>
-          <button
-            type="button"
-            onClick={() => setConfirm(false)}
-            className={btnSecondary}
-          >
-            Cancel
-          </button>
-        </span>
-      ) : (
-        <button
-          type="button"
-          disabled={readOnly}
-          title={readOnly ? READ_ONLY_TITLE : undefined}
-          onClick={() => setConfirm(true)}
-          className={quietAction}
-        >
-          Remove
-        </button>
-      )}
-    </li>
-  );
-}
-
-const FILTERS: { value: SubteamApplicationStatus | null; label: string }[] = [
-  { value: null, label: "All" },
-  { value: "pending", label: "Waiting" },
-  { value: "accepted", label: "Accepted" },
-  { value: "rejected", label: "Rejected" },
-  { value: "withdrawn", label: "Withdrawn" },
-  { value: "removed", label: "Removed" },
-];
-
-function SubteamReview({
-  subteam,
-  onBack,
-}: {
-  subteam: SubteamRow;
-  onBack: () => void;
-}) {
-  const utils = trpc.useUtils();
-  // Waiting first: that is the queue somebody opened this to work.
-  const [filter, setFilter] = useState<SubteamApplicationStatus | null>(
-    "pending",
-  );
-  const [search, setSearch] = useState("");
-  const debouncedSearch = useDebounced(search, 300);
-  const archived = subteam.archivedAt !== null;
-
-  const applicants = trpc.subteam.applicants.useQuery(
-    {
-      subteamId: subteam.id,
-      status: filter ?? undefined,
-      search: debouncedSearch.trim() || undefined,
-    },
-    { placeholderData: (previous) => previous },
-  );
-  const roster = trpc.subteam.roster.useQuery({ subteamId: subteam.id });
-
-  // A decision moves a row between filters, onto the roster, and changes the
-  // counts on the list behind this view.
-  const refresh = () =>
-    Promise.all([
-      utils.subteam.applicants.invalidate({ subteamId: subteam.id }),
-      utils.subteam.roster.invalidate({ subteamId: subteam.id }),
-      utils.subteam.adminList.invalidate(),
-    ]);
-
-  const counts = applicants.data?.counts;
-  const total = counts
-    ? Object.values(counts).reduce((sum, value) => sum + value, 0)
-    : null;
-  const rows = applicants.data?.applicants ?? [];
-  const members = roster.data ?? [];
-
-  return (
-    <div className={page}>
-      <button type="button" onClick={onBack} className={backLink}>
-        ← All subteams
-      </button>
-
-      <header className="mt-6">
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-          <h1 className={adminTitle}>{subteam.name}</h1>
-          <SubteamChip
-            isOpen={subteam.isOpen}
-            archivedAt={subteam.archivedAt}
-          />
-        </div>
-        {archived && (
-          <p className={pageDek}>
-            Archived, so decisions are paused. Restore it from the list to
-            review again.
-          </p>
-        )}
-      </header>
-
-      <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-        <div className="flex items-baseline justify-between gap-4">
-          <h2 className={sectionTitle}>On the team</h2>
-          <span className={`${meta} tabular-nums`}>{members.length}</span>
-        </div>
-        {roster.error ? (
-          <p role="alert" className={errorText}>
-            {roster.error.message}
-          </p>
-        ) : members.length > 0 ? (
-          <ul className="mt-4 border-t border-[var(--border-subtle)]">
-            {members.map((member) => (
-              <RosterRow key={member.id} member={member} onChanged={refresh} />
-            ))}
-          </ul>
-        ) : (
-          <p className={`${body} mt-3`}>
-            {roster.isPending
-              ? "Loading…"
-              : "Nobody yet. Accepted applicants show up here."}
-          </p>
-        )}
-      </section>
-
-      <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-        <div className="flex items-baseline justify-between gap-4">
-          <h2 className={sectionTitle}>Applications</h2>
-          {total !== null && (
-            <span className={`${meta} tabular-nums`}>{total}</span>
-          )}
-        </div>
-
-        <div className="mt-4 flex flex-wrap gap-2">
-          {FILTERS.map((option) => (
-            <button
-              key={option.label}
-              type="button"
-              aria-pressed={filter === option.value}
-              onClick={() => setFilter(option.value)}
-              className={chip(filter === option.value)}
-            >
-              {option.label}
-              {counts && option.value ? (
-                <span className="ml-1.5 tabular-nums opacity-70">
-                  {counts[option.value]}
-                </span>
-              ) : null}
-            </button>
-          ))}
-        </div>
-
-        <label htmlFor="applicant-search" className="sr-only">
-          Search by name or email
-        </label>
-        <input
-          id="applicant-search"
-          type="search"
-          value={search}
-          onChange={(event) => setSearch(event.target.value)}
-          maxLength={100}
-          placeholder="Search by name or email"
-          className={`${input} mt-4 max-w-md`}
-        />
-
-        {applicants.error ? (
-          <p role="alert" className={errorText}>
-            {applicants.error.message}
-          </p>
-        ) : applicants.isPending ? (
-          <p className={`${body} mt-6`}>Loading…</p>
-        ) : rows.length > 0 ? (
-          <ul className="mt-6 border-t border-[var(--border-subtle)]">
-            {rows.map((applicant) => (
-              <ApplicantRow
-                key={applicant.id}
-                applicant={applicant}
-                archived={archived}
-                onChanged={refresh}
-              />
-            ))}
-          </ul>
-        ) : (
-          <p className={`${body} mt-6`}>
-            {debouncedSearch.trim() || filter
-              ? "Nothing matches that filter."
-              : "Nobody has applied yet."}
-          </p>
-        )}
-      </section>
-    </div>
-  );
-}
-
-export default function AdminSubteamsPage() {
-  const { data: session, status } = useSession();
-  const readOnly = useReadOnly();
-  const [creating, setCreating] = useState(false);
-  const [reviewingId, setReviewingId] = useState<string | null>(null);
-
-  const list = trpc.subteam.adminList.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (status === "loading" || list.isPending) return <LoadingScreen />;
-
-  if (list.error) {
-    return (
-      <div className={page}>
-        <h1 className={adminTitle}>Subteams</h1>
-        <p role="alert" className="mt-3 text-[15px] text-[var(--danger)]">
-          {list.error.message} Refresh the page to try again.
-        </p>
-      </div>
-    );
-  }
-
-  const rows = list.data ?? [];
-  const reviewing = rows.find((row) => row.id === reviewingId);
-  if (reviewing) {
-    return (
-      <SubteamReview subteam={reviewing} onBack={() => setReviewingId(null)} />
-    );
-  }
-
-  // Live ones first; archived stay reachable for their history.
-  const active = rows.filter((row) => row.archivedAt === null);
-  const archived = rows.filter((row) => row.archivedAt !== null);
-
-  return (
-    <div className={page}>
-      <h1 className={adminTitle}>Subteams</h1>
-      <p className={pageDek}>
-        The groups members apply to join. Write the questions, open it, then
-        accept people onto the team.
-      </p>
-
-      <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-        {creating ? (
-          <>
-            <h2 className={`${sectionTitle} mb-5`}>New subteam</h2>
-            <SubteamForm onDone={() => setCreating(false)} />
-          </>
-        ) : (
-          <button
-            type="button"
-            disabled={readOnly}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            onClick={() => setCreating(true)}
-            className={btnPrimary}
-          >
-            New subteam
-          </button>
-        )}
-      </section>
-
-      <section className="mt-10">
-        {active.length > 0 ? (
-          <div className="divide-y divide-[var(--border-subtle)] border-t border-[var(--border-subtle)]">
-            {active.map((subteam) => (
-              <SubteamListRow
-                key={subteam.id}
-                subteam={subteam}
-                onReview={() => setReviewingId(subteam.id)}
-              />
-            ))}
-          </div>
-        ) : (
-          <p className={`${body} max-w-xl`}>
-            No subteams yet. Create one and open it when its questions are
-            ready.
-          </p>
-        )}
-      </section>
-
-      {archived.length > 0 && (
-        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-          <h2 className={sectionTitle}>Archived</h2>
-          <div className="mt-2 divide-y divide-[var(--border-subtle)]">
-            {archived.map((subteam) => (
-              <SubteamListRow
-                key={subteam.id}
-                subteam={subteam}
-                onReview={() => setReviewingId(subteam.id)}
-              />
-            ))}
-          </div>
-        </section>
-      )}
-    </div>
+      <AdminSubteamsPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/hackathons/[id]/checkin/CheckInPage.tsx b/sites/mainweb/app/(portal)/hackathons/[id]/checkin/CheckInPage.tsx
new file mode 100644
index 00000000..d5d66514
--- /dev/null
+++ b/sites/mainweb/app/(portal)/hackathons/[id]/checkin/CheckInPage.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { Suspense, useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useSession } from "next-auth/react";
+import type { RouterOutputs } from "@query/api";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import { trpcErrorMessage } from "@/lib/trpc-error";
+import { decodeHackathonParam } from "@/lib/hackathon-slug";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { HackathonUnavailable } from "@/components/hackathon/HackathonUnavailable";
+import { CheckInCodeForm } from "@/components/hackathon/points/CheckInCodeForm";
+import { pointsLabel } from "@/components/hackathon/points/format";
+import {
+  btnPrimary,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+  sectionRule,
+  textLink,
+} from "@/components/portal/ui";
+
+/**
+ * Where an event's poster QR lands: /hackathons/<id>/checkin?code=XXXXXX.
+ * The code is submitted as soon as the hacker is signed in, so scanning the
+ * poster is the whole check-in. Signed-out visitors go to sign in and come
+ * back to this same URL, code included.
+ */
+export default function EventCodeCheckInPage() {
+  return (
+    <Suspense fallback={<LoadingScreen message="Loading check-in…" />}>
+      <EventCodeCheckIn />
+    </Suspense>
+  );
+}
+
+function EventCodeCheckIn() {
+  const { status: authStatus } = useSession();
+  const router = useRouter();
+  const params = useParams();
+  const searchParams = useSearchParams();
+
+  const rawId = params.id;
+  const hackathonParam = decodeHackathonParam(
+    Array.isArray(rawId) ? (rawId[0] ?? "") : ((rawId as string | undefined) ?? ""),
+  );
+  const code = searchParams.get("code")?.trim() ?? "";
+
+  useEffect(() => {
+    if (authStatus === "unauthenticated") router.push(loginHref());
+  }, [authStatus, router]);
+
+  const hackathon = trpc.hackathon.getById.useQuery(
+    { id: hackathonParam },
+    { enabled: authStatus === "authenticated" },
+  );
+
+  // From the poster's code, or from one typed after it was refused.
+  const [checkedIn, setCheckedIn] = useState<
+    RouterOutputs["points"]["me"]["checkIn"] | null
+  >(null);
+
+  const utils = trpc.useUtils();
+  const checkIn = trpc.points.me.checkIn.useMutation({
+    onSuccess: (result) => {
+      setCheckedIn(result);
+      void utils.points.me.invalidate();
+    },
+  });
+  const { mutate: submitCode } = checkIn;
+
+  // Once per visit. Strict Mode runs effects twice on mount, and a second
+  // submit would come back as "already checked in" over the real answer.
+  const submitted = useRef(false);
+  const hackathonId = hackathon.data?.id;
+  useEffect(() => {
+    if (!hackathonId || !code || submitted.current) return;
+    submitted.current = true;
+    submitCode({ hackathonId, code });
+  }, [hackathonId, code, submitCode]);
+
+  // FORBIDDEN is also an event not taking codes or outside its window, for a
+  // hacker who has arrived. Only one who has not is sent to their pass.
+  const refusedForbidden = checkIn.error?.data?.code === "FORBIDDEN";
+  const arrival = trpc.points.me.summary.useQuery(
+    { hackathonId: hackathonId ?? "" },
+    { enabled: !!hackathonId && refusedForbidden },
+  );
+
+  if (authStatus !== "authenticated") {
+    return <LoadingScreen message="Loading check-in…" />;
+  }
+  if (hackathon.isLoading) {
+    return <LoadingScreen message="Loading check-in…" />;
+  }
+  if (!hackathon.data) {
+    return <HackathonUnavailable message={hackathon.error?.message} />;
+  }
+
+  const pointsHref = `/hackathons/${hackathon.data.id}?tab=POINTS`;
+
+  // Opened without a code (or with the code stripped by a QR reader): ask for
+  // it rather than calling that an error.
+  if (!code && !checkedIn) {
+    return (
+      <main className={page}>
+        <p className={meta}>{hackathon.data.name}</p>
+        <h1 className={`mt-2 ${pageTitle}`}>Check in to an event</h1>
+        <p className={pageDek}>
+          Type the code shown on the screen or poster at the event.
+        </p>
+        <div className="mt-8 max-w-xl">
+          <CheckInCodeForm
+            hackathonId={hackathon.data.id}
+            onCheckedIn={setCheckedIn}
+          />
+        </div>
+        <div className="mt-6">
+          <Link href={pointsHref} className={`min-h-11 ${textLink}`}>
+            Your points
+          </Link>
+        </div>
+      </main>
+    );
+  }
+
+  if (checkedIn) {
+    return (
+      <main className={page}>
+        <p className={meta}>{hackathon.data.name}</p>
+        <h1 className={`mt-2 ${pageTitle}`}>
+          You&apos;re checked into {checkedIn.eventName}
+        </h1>
+        <p className={pageDek}>
+          {checkedIn.pointsAwarded > 0
+            ? `${pointsLabel(checkedIn.pointsAwarded)} added to your total.`
+            : "Your attendance is recorded. This event does not award points."}
+        </p>
+        <Link
+          href={pointsHref}
+          className={`mt-8 min-h-11 w-full sm:w-auto ${btnPrimary}`}
+        >
+          See your points
+        </Link>
+      </main>
+    );
+  }
+
+  if (checkIn.error) {
+    const refusal = checkIn.error.data?.code;
+    // Already in, or locked out for a minute: typing another code here does
+    // not help, so the form is only offered for the other refusals. Nor for a
+    // hacker who has not arrived yet, where the way forward is the pass.
+    const notArrived =
+      refusal === "FORBIDDEN" && arrival.data?.checkedIn === false;
+    const offerForm =
+      refusal !== "CONFLICT" &&
+      refusal !== "TOO_MANY_REQUESTS" &&
+      !notArrived &&
+      !(refusal === "FORBIDDEN" && arrival.isLoading);
+    return (
+      <main className={page}>
+        <p className={meta}>{hackathon.data.name}</p>
+        <h1 className={`mt-2 ${pageTitle}`}>
+          {refusal === "CONFLICT"
+            ? "Already checked in"
+            : refusal === "TOO_MANY_REQUESTS"
+              ? "Too many tries"
+              : notArrived
+                ? "Check in at the door first"
+                : "Not checked in"}
+        </h1>
+        <p className={pageDek}>
+          {notArrived
+            ? "Event codes work once your pass has been scanned at check-in."
+            : trpcErrorMessage(
+                checkIn.error,
+                "The check-in did not go through. Type the code from the screen below.",
+              )}
+        </p>
+        {offerForm && (
+          <section className={`mt-10 max-w-xl ${sectionRule}`}>
+            <CheckInCodeForm
+              hackathonId={hackathon.data.id}
+              onCheckedIn={setCheckedIn}
+            />
+          </section>
+        )}
+        {notArrived && (
+          <Link
+            href={`/hackathons/${hackathon.data.id}?tab=SCHEDULE`}
+            className={`mt-8 min-h-11 w-full sm:w-auto ${btnPrimary}`}
+          >
+            Show my pass
+          </Link>
+        )}
+        {!notArrived && (
+          <div className="mt-6">
+            <Link href={pointsHref} className={`min-h-11 ${textLink}`}>
+              Your points
+            </Link>
+          </div>
+        )}
+      </main>
+    );
+  }
+
+  return <LoadingScreen message="Checking you in…" />;
+}
diff --git a/sites/mainweb/app/(portal)/hackathons/[id]/checkin/page.tsx b/sites/mainweb/app/(portal)/hackathons/[id]/checkin/page.tsx
index d5d66514..d22097d5 100644
--- a/sites/mainweb/app/(portal)/hackathons/[id]/checkin/page.tsx
+++ b/sites/mainweb/app/(portal)/hackathons/[id]/checkin/page.tsx
@@ -1,212 +1,20 @@
-"use client";
-
-import { Suspense, useEffect, useRef, useState } from "react";
-import Link from "next/link";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useSession } from "next-auth/react";
-import type { RouterOutputs } from "@query/api";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import { trpcErrorMessage } from "@/lib/trpc-error";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
 import { decodeHackathonParam } from "@/lib/hackathon-slug";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { HackathonUnavailable } from "@/components/hackathon/HackathonUnavailable";
-import { CheckInCodeForm } from "@/components/hackathon/points/CheckInCodeForm";
-import { pointsLabel } from "@/components/hackathon/points/format";
-import {
-  btnPrimary,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-  sectionRule,
-  textLink,
-} from "@/components/portal/ui";
-
-/**
- * Where an event's poster QR lands: /hackathons/<id>/checkin?code=XXXXXX.
- * The code is submitted as soon as the hacker is signed in, so scanning the
- * poster is the whole check-in. Signed-out visitors go to sign in and come
- * back to this same URL, code included.
- */
-export default function EventCodeCheckInPage() {
+import CheckInPage from "./CheckInPage";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = decodeHackathonParam((await params).id);
   return (
-    <Suspense fallback={<LoadingScreen message="Loading check-in…" />}>
-      <EventCodeCheckIn />
-    </Suspense>
-  );
-}
-
-function EventCodeCheckIn() {
-  const { status: authStatus } = useSession();
-  const router = useRouter();
-  const params = useParams();
-  const searchParams = useSearchParams();
-
-  const rawId = params.id;
-  const hackathonParam = decodeHackathonParam(
-    Array.isArray(rawId) ? (rawId[0] ?? "") : ((rawId as string | undefined) ?? ""),
-  );
-  const code = searchParams.get("code")?.trim() ?? "";
-
-  useEffect(() => {
-    if (authStatus === "unauthenticated") router.push(loginHref());
-  }, [authStatus, router]);
-
-  const hackathon = trpc.hackathon.getById.useQuery(
-    { id: hackathonParam },
-    { enabled: authStatus === "authenticated" },
-  );
-
-  // From the poster's code, or from one typed after it was refused.
-  const [checkedIn, setCheckedIn] = useState<
-    RouterOutputs["points"]["me"]["checkIn"] | null
-  >(null);
-
-  const utils = trpc.useUtils();
-  const checkIn = trpc.points.me.checkIn.useMutation({
-    onSuccess: (result) => {
-      setCheckedIn(result);
-      void utils.points.me.invalidate();
-    },
-  });
-  const { mutate: submitCode } = checkIn;
-
-  // Once per visit. Strict Mode runs effects twice on mount, and a second
-  // submit would come back as "already checked in" over the real answer.
-  const submitted = useRef(false);
-  const hackathonId = hackathon.data?.id;
-  useEffect(() => {
-    if (!hackathonId || !code || submitted.current) return;
-    submitted.current = true;
-    submitCode({ hackathonId, code });
-  }, [hackathonId, code, submitCode]);
-
-  // FORBIDDEN is also an event not taking codes or outside its window, for a
-  // hacker who has arrived. Only one who has not is sent to their pass.
-  const refusedForbidden = checkIn.error?.data?.code === "FORBIDDEN";
-  const arrival = trpc.points.me.summary.useQuery(
-    { hackathonId: hackathonId ?? "" },
-    { enabled: !!hackathonId && refusedForbidden },
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.getById", { id }, c.hackathon.getById({ id })],
+      ]}
+    >
+      <CheckInPage />
+    </PrefetchedPage>
   );
-
-  if (authStatus !== "authenticated") {
-    return <LoadingScreen message="Loading check-in…" />;
-  }
-  if (hackathon.isLoading) {
-    return <LoadingScreen message="Loading check-in…" />;
-  }
-  if (!hackathon.data) {
-    return <HackathonUnavailable message={hackathon.error?.message} />;
-  }
-
-  const pointsHref = `/hackathons/${hackathon.data.id}?tab=POINTS`;
-
-  // Opened without a code (or with the code stripped by a QR reader): ask for
-  // it rather than calling that an error.
-  if (!code && !checkedIn) {
-    return (
-      <main className={page}>
-        <p className={meta}>{hackathon.data.name}</p>
-        <h1 className={`mt-2 ${pageTitle}`}>Check in to an event</h1>
-        <p className={pageDek}>
-          Type the code shown on the screen or poster at the event.
-        </p>
-        <div className="mt-8 max-w-xl">
-          <CheckInCodeForm
-            hackathonId={hackathon.data.id}
-            onCheckedIn={setCheckedIn}
-          />
-        </div>
-        <div className="mt-6">
-          <Link href={pointsHref} className={`min-h-11 ${textLink}`}>
-            Your points
-          </Link>
-        </div>
-      </main>
-    );
-  }
-
-  if (checkedIn) {
-    return (
-      <main className={page}>
-        <p className={meta}>{hackathon.data.name}</p>
-        <h1 className={`mt-2 ${pageTitle}`}>
-          You&apos;re checked into {checkedIn.eventName}
-        </h1>
-        <p className={pageDek}>
-          {checkedIn.pointsAwarded > 0
-            ? `${pointsLabel(checkedIn.pointsAwarded)} added to your total.`
-            : "Your attendance is recorded. This event does not award points."}
-        </p>
-        <Link
-          href={pointsHref}
-          className={`mt-8 min-h-11 w-full sm:w-auto ${btnPrimary}`}
-        >
-          See your points
-        </Link>
-      </main>
-    );
-  }
-
-  if (checkIn.error) {
-    const refusal = checkIn.error.data?.code;
-    // Already in, or locked out for a minute: typing another code here does
-    // not help, so the form is only offered for the other refusals. Nor for a
-    // hacker who has not arrived yet, where the way forward is the pass.
-    const notArrived =
-      refusal === "FORBIDDEN" && arrival.data?.checkedIn === false;
-    const offerForm =
-      refusal !== "CONFLICT" &&
-      refusal !== "TOO_MANY_REQUESTS" &&
-      !notArrived &&
-      !(refusal === "FORBIDDEN" && arrival.isLoading);
-    return (
-      <main className={page}>
-        <p className={meta}>{hackathon.data.name}</p>
-        <h1 className={`mt-2 ${pageTitle}`}>
-          {refusal === "CONFLICT"
-            ? "Already checked in"
-            : refusal === "TOO_MANY_REQUESTS"
-              ? "Too many tries"
-              : notArrived
-                ? "Check in at the door first"
-                : "Not checked in"}
-        </h1>
-        <p className={pageDek}>
-          {notArrived
-            ? "Event codes work once your pass has been scanned at check-in."
-            : trpcErrorMessage(
-                checkIn.error,
-                "The check-in did not go through. Type the code from the screen below.",
-              )}
-        </p>
-        {offerForm && (
-          <section className={`mt-10 max-w-xl ${sectionRule}`}>
-            <CheckInCodeForm
-              hackathonId={hackathon.data.id}
-              onCheckedIn={setCheckedIn}
-            />
-          </section>
-        )}
-        {notArrived && (
-          <Link
-            href={`/hackathons/${hackathon.data.id}?tab=SCHEDULE`}
-            className={`mt-8 min-h-11 w-full sm:w-auto ${btnPrimary}`}
-          >
-            Show my pass
-          </Link>
-        )}
-        {!notArrived && (
-          <div className="mt-6">
-            <Link href={pointsHref} className={`min-h-11 ${textLink}`}>
-              Your points
-            </Link>
-          </div>
-        )}
-      </main>
-    );
-  }
-
-  return <LoadingScreen message="Checking you in…" />;
 }
diff --git a/sites/mainweb/app/(portal)/hackathons/[id]/page.tsx b/sites/mainweb/app/(portal)/hackathons/[id]/page.tsx
index ea8b93e7..5fa2fd1e 100644
--- a/sites/mainweb/app/(portal)/hackathons/[id]/page.tsx
+++ b/sites/mainweb/app/(portal)/hackathons/[id]/page.tsx
@@ -1,5 +1,7 @@
 import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
 import { decodeHackathonParam } from "@/lib/hackathon-slug";
+import { nextStepReads } from "@/lib/next-step-reads.server";
+import type { Prefetch } from "@/lib/portal-bootstrap.server";
 import HackathonDetailPage from "./HackathonDetailPage";
 
 export default async function Page({
@@ -10,9 +12,31 @@ export default async function Page({
   const id = decodeHackathonParam((await params).id);
   return (
     <PrefetchedPage
-      reads={(c) => [
-        ["hackathon.getById", { id }, c.hackathon.getById({ id })],
-      ]}
+      reads={async (c) => {
+        const hackathon = c.hackathon.getById({ id });
+        const entries: Prefetch[] = [["hackathon.getById", { id }, hackathon]];
+        // The page reads more for a registered hacker: announcements, and the
+        // next-step queries their registration status enables.
+        const myRegs = c.hackathon.myRegistrations();
+        const [found, regs] = await Promise.all([
+          hackathon.catch(() => null),
+          myRegs.catch(() => null),
+        ]);
+        if (!found || !regs) return entries;
+        entries.push(["hackathon.myRegistrations", undefined, myRegs]);
+        const reg = regs.find((r) => r.hackathonId === found.id);
+        if (!reg) return entries;
+        const hackathonId = found.id;
+        entries.push(
+          [
+            "hackathon.listForMe",
+            { hackathonId },
+            c.hackathon.listForMe({ hackathonId }),
+          ],
+          ...nextStepReads(c, found, reg.registrationStatus),
+        );
+        return entries;
+      }}
     >
       <HackathonDetailPage />
     </PrefetchedPage>
diff --git a/sites/mainweb/app/(portal)/hacklytics/page.tsx b/sites/mainweb/app/(portal)/hacklytics/page.tsx
index bf658aca..a2d8030c 100644
--- a/sites/mainweb/app/(portal)/hacklytics/page.tsx
+++ b/sites/mainweb/app/(portal)/hacklytics/page.tsx
@@ -18,6 +18,9 @@ import {
   pageTitle,
   textLink,
 } from "@/components/portal/ui";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import { nextStepReads } from "@/lib/next-step-reads.server";
+import type { Prefetch } from "@/lib/portal-bootstrap.server";
 import { MyRegistration } from "./MyRegistration";
 import { RetryButton } from "./RetryButton";
 import { hlSectionTitle } from "./styles";
@@ -327,7 +330,24 @@ export default async function HacklyticsPage() {
 
       <section className="mt-8 border-t border-[var(--border-subtle)] pt-6">
         {ctx.userId ? (
-          <MyRegistration event={event}>{offer}</MyRegistration>
+          <PrefetchedPage
+            reads={async (c) => {
+              const myRegs = c.hackathon.myRegistrations();
+              const entries: Prefetch[] = [
+                ["hackathon.myRegistrations", undefined, myRegs],
+              ];
+              const reg = (await myRegs.catch(() => [])).find(
+                (r) => r.hackathonId === event.id,
+              );
+              if (!reg) return entries;
+              return [
+                ...entries,
+                ...nextStepReads(c, event, reg.registrationStatus),
+              ];
+            }}
+          >
+            <MyRegistration event={event}>{offer}</MyRegistration>
+          </PrefetchedPage>
         ) : (
           offer
         )}
diff --git a/sites/mainweb/app/(portal)/judge/[hackathonId]/page.tsx b/sites/mainweb/app/(portal)/judge/[hackathonId]/page.tsx
index 25594cf8..5b0f3837 100644
--- a/sites/mainweb/app/(portal)/judge/[hackathonId]/page.tsx
+++ b/sites/mainweb/app/(portal)/judge/[hackathonId]/page.tsx
@@ -1,4 +1,6 @@
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
 import { JudgeDesk } from "@/components/judge/JudgeDesk";
+import type { Prefetch } from "@/lib/portal-bootstrap.server";
 
 // The judge desk for one edition, for a judge signed in with a portal account.
 export default async function JudgeDeskPage({
@@ -7,5 +9,41 @@ export default async function JudgeDeskPage({
   params: Promise<{ hackathonId: string }>;
 }) {
   const { hackathonId } = await params;
-  return <JudgeDesk hackathonId={hackathonId} opened="member" />;
+  return (
+    <PrefetchedPage
+      reads={async (c) => {
+        const context = c.judging.desk.context({ hackathonId });
+        const entries: Prefetch[] = [
+          ["judging.desk.context", { hackathonId }, context],
+        ];
+        // The desk's panels wait on the context, so a member who has a desk
+        // to open gets theirs now instead of after the page loads.
+        const desk = await context.catch(() => null);
+        if (!desk || desk.kind !== "member" || desk.needsName) return entries;
+        entries.push(
+          [
+            "judging.desk.announcements",
+            { hackathonId },
+            c.judging.desk.announcements({ hackathonId }),
+          ],
+          [
+            "judging.desk.itinerary",
+            { hackathonId },
+            c.judging.desk.itinerary({ hackathonId }),
+          ],
+        );
+        if (desk.challenges.length > 0) {
+          const input = { hackathonId, hideJudged: true, inMyRoomOnly: true };
+          entries.push([
+            "judging.desk.projects",
+            input,
+            c.judging.desk.projects(input),
+          ]);
+        }
+        return entries;
+      }}
+    >
+      <JudgeDesk hackathonId={hackathonId} opened="member" />
+    </PrefetchedPage>
+  );
 }
diff --git a/sites/mainweb/app/(portal)/scan/ScanPage.tsx b/sites/mainweb/app/(portal)/scan/ScanPage.tsx
new file mode 100644
index 00000000..1f3fc249
--- /dev/null
+++ b/sites/mainweb/app/(portal)/scan/ScanPage.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { trpc } from "@/lib/trpc";
+import { usePortalContext } from "@/lib/use-portal-context";
+import {
+  body,
+  fieldLabel,
+  input,
+  kicker,
+  meta,
+  page,
+  pageTitle,
+} from "@/components/portal/ui";
+import { ScanAccess } from "@/components/portal/ScanAccess";
+import { ScannerTab } from "@/components/admin/hackathons/ScannerTab";
+
+/**
+ * Hackathon badge check-in.
+ *
+ * Club meetings are a different desk (/scan/club). Volunteers are not admins,
+ * so this stays outside /admin; mixing both modes here is what put club
+ * events inside the hackathon.
+ */
+export default function ScanPage() {
+  const { data: portalContext } = usePortalContext();
+  // null until the volunteer picks one, so a single live edition can stand in.
+  const [pickedId, setPickedId] = useState<string | null>(null);
+
+  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery(
+    {},
+    { enabled: !!portalContext?.isScanner },
+  );
+
+  // The desk is for the edition running now. With exactly one, there is
+  // nothing to choose.
+  const live = hackathons?.filter((h) => h.status === "in_progress") ?? [];
+  const onlyLive = live.length === 1 ? live[0] : undefined;
+  const hackathonId = pickedId ?? onlyLive?.id ?? "";
+  const edition = hackathons?.find((h) => h.id === hackathonId);
+  // A lone live edition is already chosen; the list only matters when there is
+  // a choice to make. Admins reach other editions from the Scanner tab.
+  const showPicker = !isLoading && (!onlyLive || pickedId !== null);
+
+  return (
+    <ScanAccess>
+      <main className={page}>
+        <header>
+          <p className={kicker}>{edition?.name ?? "Hackathon staff"}</p>
+          <h1 className={`mt-1 ${pageTitle}`}>Check-in desk</h1>
+        </header>
+
+        {showPicker && (
+          <div className="mt-6 max-w-md">
+            <label htmlFor="scan-hackathon" className={fieldLabel}>
+              Hackathon
+            </label>
+            <select
+              id="scan-hackathon"
+              value={hackathonId}
+              onChange={(e) => setPickedId(e.target.value)}
+              className={`min-h-11 ${input}`}
+            >
+              <option value="">Select a hackathon…</option>
+              {hackathons?.map((h) => (
+                <option key={h.id} value={h.id}>
+                  {h.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        <div className="mt-6">
+          {hackathonId ? (
+            // An event picked for one edition means nothing in another.
+            <ScannerTab key={hackathonId} hackathonId={hackathonId} />
+          ) : isLoading ? (
+            <p className={meta}>Loading hackathons…</p>
+          ) : (
+            <p className={body}>
+              Choose a hackathon above to start scanning.
+            </p>
+          )}
+        </div>
+      </main>
+    </ScanAccess>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/scan/club/ClubScanPage.tsx b/sites/mainweb/app/(portal)/scan/club/ClubScanPage.tsx
new file mode 100644
index 00000000..48a9fe1d
--- /dev/null
+++ b/sites/mainweb/app/(portal)/scan/club/ClubScanPage.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useState } from "react";
+import { trpc } from "@/lib/trpc";
+import { canViewAdmin, usePortalContext } from "@/lib/use-portal-context";
+import {
+  body,
+  btnSecondary,
+  fieldLabel,
+  input,
+  meta,
+  page,
+  pageDek,
+} from "@/components/portal/ui";
+import { ScanAccess } from "@/components/portal/ScanAccess";
+import { ClubScannerTab } from "@/components/portal/ClubScannerTab";
+import { ClubAttendanceMetrics } from "@/components/portal/ClubAttendanceMetrics";
+import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
+import { EventOptions } from "@/components/portal/EventOptions";
+
+/** Staff pages carry a smaller headline than member pages. */
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
+
+/**
+ * Club meeting attendance, with the pass scanner one click away.
+ *
+ * Scans a member pass, not a hackathon badge. Kept off /scan so club
+ * gatherings are not a mode of the hackathon desk. Volunteers can scan here
+ * but the metrics are a staff query, so they get the scanner open instead.
+ */
+export default function ClubScanPage() {
+  const { data: portalContext } = usePortalContext();
+  const [clubEventId, setClubEventId] = useState("");
+  // Null until toggled: open by default only for those without the metrics.
+  const [scannerToggle, setScannerToggle] = useState<boolean | null>(null);
+  const [openEvent, setOpenEvent] = useState<{
+    id: string;
+    title: string;
+  } | null>(null);
+
+  // Staff and read-only bug testers; the server refuses volunteers either way.
+  const canViewMetrics = canViewAdmin(portalContext);
+  const scannerOpen = scannerToggle ?? !canViewMetrics;
+
+  const { data: clubEvents } = trpc.events.list.useQuery(undefined, {
+    enabled: !!portalContext?.isScanner,
+  });
+
+  const showScanner = () => {
+    setScannerToggle(true);
+    document
+      .getElementById("club-scanner")
+      ?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  return (
+    <ScanAccess>
+      <main className={page}>
+        <header>
+          <h1 className={adminTitle}>Club attendance</h1>
+          <p className={pageDek}>
+            Who comes to club meetings, and how often. Scan member passes from
+            here too; hackathon check-in has its own desk.
+          </p>
+        </header>
+
+        <div className="mt-8 flex flex-wrap items-end gap-4">
+          <div className="w-full sm:max-w-sm">
+            <label htmlFor="scan-club-event" className={fieldLabel}>
+              Event
+            </label>
+            <select
+              id="scan-club-event"
+              value={clubEventId}
+              onChange={(e) => setClubEventId(e.target.value)}
+              className={`min-h-11 ${input}`}
+            >
+              <option value="">Select an event…</option>
+              <EventOptions events={clubEvents} />
+            </select>
+          </div>
+          <button
+            type="button"
+            onClick={() => setScannerToggle(!scannerOpen)}
+            aria-expanded={scannerOpen}
+            aria-controls="club-scanner"
+            className={`min-h-11 ${btnSecondary}`}
+          >
+            {scannerOpen ? "Hide scanner" : "Scan passes"}
+          </button>
+        </div>
+
+        <div id="club-scanner" className="scroll-mt-6">
+          {scannerOpen && (
+            <div className="mt-8 border-t border-[var(--border-subtle)] pt-8">
+              {clubEventId ? (
+                <ClubScannerTab eventId={clubEventId} />
+              ) : (
+                <p className={body}>
+                  Choose a club event above to start scanning.
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+          {canViewMetrics ? (
+            <ClubAttendanceMetrics
+              onOpenEvent={(event) => {
+                setClubEventId(event.id);
+                setOpenEvent(event);
+              }}
+              onScan={showScanner}
+            />
+          ) : (
+            <p className={meta}>
+              Attendance figures are for club officers. Scanning works the same
+              either way.
+            </p>
+          )}
+        </div>
+
+        {openEvent && (
+          <EventAttendanceModal
+            eventId={openEvent.id}
+            eventTitle={openEvent.title}
+            onClose={() => setOpenEvent(null)}
+          />
+        )}
+      </main>
+    </ScanAccess>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/scan/club/page.tsx b/sites/mainweb/app/(portal)/scan/club/page.tsx
index 48a9fe1d..0381b623 100644
--- a/sites/mainweb/app/(portal)/scan/club/page.tsx
+++ b/sites/mainweb/app/(portal)/scan/club/page.tsx
@@ -1,135 +1,20 @@
-"use client";
-
-import { useState } from "react";
-import { trpc } from "@/lib/trpc";
-import { canViewAdmin, usePortalContext } from "@/lib/use-portal-context";
-import {
-  body,
-  btnSecondary,
-  fieldLabel,
-  input,
-  meta,
-  page,
-  pageDek,
-} from "@/components/portal/ui";
-import { ScanAccess } from "@/components/portal/ScanAccess";
-import { ClubScannerTab } from "@/components/portal/ClubScannerTab";
-import { ClubAttendanceMetrics } from "@/components/portal/ClubAttendanceMetrics";
-import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
-import { EventOptions } from "@/components/portal/EventOptions";
-
-/** Staff pages carry a smaller headline than member pages. */
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-[1.05] tracking-[-0.02em] text-[var(--text-primary)] text-balance";
-
-/**
- * Club meeting attendance, with the pass scanner one click away.
- *
- * Scans a member pass, not a hackathon badge. Kept off /scan so club
- * gatherings are not a mode of the hackathon desk. Volunteers can scan here
- * but the metrics are a staff query, so they get the scanner open instead.
- */
-export default function ClubScanPage() {
-  const { data: portalContext } = usePortalContext();
-  const [clubEventId, setClubEventId] = useState("");
-  // Null until toggled: open by default only for those without the metrics.
-  const [scannerToggle, setScannerToggle] = useState<boolean | null>(null);
-  const [openEvent, setOpenEvent] = useState<{
-    id: string;
-    title: string;
-  } | null>(null);
-
-  // Staff and read-only bug testers; the server refuses volunteers either way.
-  const canViewMetrics = canViewAdmin(portalContext);
-  const scannerOpen = scannerToggle ?? !canViewMetrics;
-
-  const { data: clubEvents } = trpc.events.list.useQuery(undefined, {
-    enabled: !!portalContext?.isScanner,
-  });
-
-  const showScanner = () => {
-    setScannerToggle(true);
-    document
-      .getElementById("club-scanner")
-      ?.scrollIntoView({ behavior: "smooth", block: "start" });
-  };
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import ClubScanPage from "./ClubScanPage";
 
+export default function Page() {
   return (
-    <ScanAccess>
-      <main className={page}>
-        <header>
-          <h1 className={adminTitle}>Club attendance</h1>
-          <p className={pageDek}>
-            Who comes to club meetings, and how often. Scan member passes from
-            here too; hackathon check-in has its own desk.
-          </p>
-        </header>
-
-        <div className="mt-8 flex flex-wrap items-end gap-4">
-          <div className="w-full sm:max-w-sm">
-            <label htmlFor="scan-club-event" className={fieldLabel}>
-              Event
-            </label>
-            <select
-              id="scan-club-event"
-              value={clubEventId}
-              onChange={(e) => setClubEventId(e.target.value)}
-              className={`min-h-11 ${input}`}
-            >
-              <option value="">Select an event…</option>
-              <EventOptions events={clubEvents} />
-            </select>
-          </div>
-          <button
-            type="button"
-            onClick={() => setScannerToggle(!scannerOpen)}
-            aria-expanded={scannerOpen}
-            aria-controls="club-scanner"
-            className={`min-h-11 ${btnSecondary}`}
-          >
-            {scannerOpen ? "Hide scanner" : "Scan passes"}
-          </button>
-        </div>
-
-        <div id="club-scanner" className="scroll-mt-6">
-          {scannerOpen && (
-            <div className="mt-8 border-t border-[var(--border-subtle)] pt-8">
-              {clubEventId ? (
-                <ClubScannerTab eventId={clubEventId} />
-              ) : (
-                <p className={body}>
-                  Choose a club event above to start scanning.
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-          {canViewMetrics ? (
-            <ClubAttendanceMetrics
-              onOpenEvent={(event) => {
-                setClubEventId(event.id);
-                setOpenEvent(event);
-              }}
-              onScan={showScanner}
-            />
-          ) : (
-            <p className={meta}>
-              Attendance figures are for club officers. Scanning works the same
-              either way.
-            </p>
-          )}
-        </div>
-
-        {openEvent && (
-          <EventAttendanceModal
-            eventId={openEvent.id}
-            eventTitle={openEvent.title}
-            onClose={() => setOpenEvent(null)}
-          />
-        )}
-      </main>
-    </ScanAccess>
+    <PrefetchedPage
+      reads={(c) => [
+        ["events.list", undefined, c.events.list()],
+        // The metrics open on the term range.
+        [
+          "events.attendanceMetrics",
+          { range: "term" },
+          c.events.attendanceMetrics({ range: "term" }),
+        ],
+      ]}
+    >
+      <ClubScanPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/scan/page.tsx b/sites/mainweb/app/(portal)/scan/page.tsx
index 1f3fc249..850f72ee 100644
--- a/sites/mainweb/app/(portal)/scan/page.tsx
+++ b/sites/mainweb/app/(portal)/scan/page.tsx
@@ -1,89 +1,29 @@
-"use client";
-
-import { useState } from "react";
-import { trpc } from "@/lib/trpc";
-import { usePortalContext } from "@/lib/use-portal-context";
-import {
-  body,
-  fieldLabel,
-  input,
-  kicker,
-  meta,
-  page,
-  pageTitle,
-} from "@/components/portal/ui";
-import { ScanAccess } from "@/components/portal/ScanAccess";
-import { ScannerTab } from "@/components/admin/hackathons/ScannerTab";
-
-/**
- * Hackathon badge check-in.
- *
- * Club meetings are a different desk (/scan/club). Volunteers are not admins,
- * so this stays outside /admin; mixing both modes here is what put club
- * events inside the hackathon.
- */
-export default function ScanPage() {
-  const { data: portalContext } = usePortalContext();
-  // null until the volunteer picks one, so a single live edition can stand in.
-  const [pickedId, setPickedId] = useState<string | null>(null);
-
-  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery(
-    {},
-    { enabled: !!portalContext?.isScanner },
-  );
-
-  // The desk is for the edition running now. With exactly one, there is
-  // nothing to choose.
-  const live = hackathons?.filter((h) => h.status === "in_progress") ?? [];
-  const onlyLive = live.length === 1 ? live[0] : undefined;
-  const hackathonId = pickedId ?? onlyLive?.id ?? "";
-  const edition = hackathons?.find((h) => h.id === hackathonId);
-  // A lone live edition is already chosen; the list only matters when there is
-  // a choice to make. Admins reach other editions from the Scanner tab.
-  const showPicker = !isLoading && (!onlyLive || pickedId !== null);
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import type { Prefetch } from "@/lib/portal-bootstrap.server";
+import ScanPage from "./ScanPage";
 
+export default function Page() {
   return (
-    <ScanAccess>
-      <main className={page}>
-        <header>
-          <p className={kicker}>{edition?.name ?? "Hackathon staff"}</p>
-          <h1 className={`mt-1 ${pageTitle}`}>Check-in desk</h1>
-        </header>
-
-        {showPicker && (
-          <div className="mt-6 max-w-md">
-            <label htmlFor="scan-hackathon" className={fieldLabel}>
-              Hackathon
-            </label>
-            <select
-              id="scan-hackathon"
-              value={hackathonId}
-              onChange={(e) => setPickedId(e.target.value)}
-              className={`min-h-11 ${input}`}
-            >
-              <option value="">Select a hackathon…</option>
-              {hackathons?.map((h) => (
-                <option key={h.id} value={h.id}>
-                  {h.name}
-                </option>
-              ))}
-            </select>
-          </div>
-        )}
-
-        <div className="mt-6">
-          {hackathonId ? (
-            // An event picked for one edition means nothing in another.
-            <ScannerTab key={hackathonId} hackathonId={hackathonId} />
-          ) : isLoading ? (
-            <p className={meta}>Loading hackathons…</p>
-          ) : (
-            <p className={body}>
-              Choose a hackathon above to start scanning.
-            </p>
-          )}
-        </div>
-      </main>
-    </ScanAccess>
+    <PrefetchedPage
+      reads={async (c) => {
+        const list = c.hackathon.list({});
+        const entries: Prefetch[] = [["hackathon.list", {}, list]];
+        // With exactly one live edition the desk opens on it.
+        const live = (await list.catch(() => [])).filter(
+          (h) => h.status === "in_progress",
+        );
+        if (live.length === 1) {
+          const hackathonId = live[0].id;
+          entries.push([
+            "hackathon.getEvents",
+            { hackathonId },
+            c.hackathon.getEvents({ hackathonId }),
+          ]);
+        }
+        return entries;
+      }}
+    >
+      <ScanPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/lib/next-step-reads.server.ts b/sites/mainweb/lib/next-step-reads.server.ts
new file mode 100644
index 00000000..7cdb568d
--- /dev/null
+++ b/sites/mainweb/lib/next-step-reads.server.ts
@@ -0,0 +1,50 @@
+import { nextStepQueries } from "@/lib/hackathon-next-step";
+import type { NextStepHackathon } from "@/lib/hackathon-next-step";
+import type { PortalCaller, Prefetch } from "@/lib/portal-bootstrap.server";
+
+/**
+ * The next-step strip's extra reads for one registration: the ones
+ * `nextStepQueries` enables, with the input the client passes.
+ */
+export function nextStepReads(
+  c: PortalCaller,
+  hackathon: NextStepHackathon,
+  registrationStatus: string | null | undefined,
+): Prefetch[] {
+  const needs = nextStepQueries({
+    now: new Date(),
+    hackathon,
+    registrationStatus,
+  });
+  const hackathonId = hackathon.id;
+  const entries: Prefetch[] = [];
+  if (needs.submission) {
+    entries.push(
+      [
+        "team.submissionWindow",
+        { hackathonId },
+        c.team.submissionWindow({ hackathonId }),
+      ],
+      [
+        "team.mySubmission",
+        { hackathonId },
+        c.team.mySubmission({ hackathonId }),
+      ],
+    );
+  }
+  if (needs.judging) {
+    entries.push([
+      "judging.hacker.itinerary",
+      { hackathonId },
+      c.judging.hacker.itinerary({ hackathonId }),
+    ]);
+  }
+  if (needs.results) {
+    entries.push([
+      "hackathon.getResults",
+      { hackathonId },
+      c.hackathon.getResults({ hackathonId }),
+    ]);
+  }
+  return entries;
+}