diff --git a/packages/api/src/routers/hackathon/admin/attendee-where.ts b/packages/api/src/routers/hackathon/admin/attendee-where.ts
index 39d13370..e275a94c 100644
--- a/packages/api/src/routers/hackathon/admin/attendee-where.ts
+++ b/packages/api/src/routers/hackathon/admin/attendee-where.ts
@@ -41,6 +41,11 @@ export const buildAttendeeWhere = (input: {
     // Escaped so a literal % or _ in a name searches for that character instead
     // of turning into a wildcard.
     const pattern = `%${term.replace(/[\\%_]/g, (c) => `\\${c}`)}%`;
+    // The user table gets its own alias, written by hand. Inside the relational
+    // roster query (db.query...findMany) Drizzle renders every column in this
+    // template against the participants alias, so `${users.id}` came out as
+    // "hackathonParticipants"."id" (a uuid) compared with user_id (text) and
+    // every search answered 500.
     clauses.push(
       sql`(
         ${hackathonParticipants.firstName} ilike ${pattern}
@@ -49,9 +54,9 @@ export const buildAttendeeWhere = (input: {
         or ${hackathonParticipants.major} ilike ${pattern}
         or ${hackathonParticipants.whyAttend} ilike ${pattern}
         or exists (
-          select 1 from ${users}
-          where ${users.id} = ${hackathonParticipants.userId}
-            and (${users.name} ilike ${pattern} or ${users.email} ilike ${pattern})
+          select 1 from ${users} as attendee_user
+          where attendee_user."id" = ${hackathonParticipants.userId}
+            and (attendee_user."name" ilike ${pattern} or attendee_user."email" ilike ${pattern})
         )
       )`,
     );
diff --git a/sites/mainweb/app/(portal)/admin/AdminPage.tsx b/sites/mainweb/app/(portal)/admin/AdminPage.tsx
new file mode 100644
index 00000000..ab294ff0
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/AdminPage.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import { venueFormat } from "@/lib/venue-time";
+import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
+import {
+  canViewAdmin,
+  READ_ONLY_TITLE,
+  usePortalContext,
+  useReadOnly,
+} from "@/lib/use-portal-context";
+import { useState } from "react";
+import Link from "next/link";
+import { useEventQR } from "@/components/portal/EventQR";
+import { EventFormModal } from "@/components/portal/EventFormModal";
+import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  chip,
+  itemTitle,
+  meta,
+  object,
+  page,
+  pageDek,
+  sectionRule,
+  status,
+  textLink,
+} 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";
+
+const inlineLink =
+  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
+
+type Event = {
+  id: string;
+  title: string;
+  description: string | null;
+  location: string | null;
+  eventDate: Date;
+  qrCode: string;
+  checkInEnabled: boolean;
+  currentCheckIns: number;
+  maxCheckIns: number | null;
+};
+
+export default function AdminPage() {
+  const { data: session } = useSession();
+  const utils = trpc.useUtils();
+
+  const [showCreateEvent, setShowCreateEvent] = useState(false);
+  const qr = useEventQR();
+  const [editingEvent, setEditingEvent] = useState<Event | null>(null);
+  const [attendanceEvent, setAttendanceEvent] = useState<Event | null>(null);
+  const [editError, setEditError] = useState<string | null>(null);
+
+  const { data: portalContext } = usePortalContext();
+  const readOnly = useReadOnly();
+  const { data: allEvents, isLoading: eventsLoading } =
+    trpc.events.listAll.useQuery(undefined, {
+      enabled: !!session && canViewAdmin(portalContext),
+    });
+  // Bootcamp sessions have their own check-in controls on /admin/bootcamp.
+  const events = allEvents?.filter((e) => e.kind === "club");
+
+  type StatusFilter = "all" | "open" | "closed";
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+
+  const createEventMutation = trpc.events.create.useMutation({
+    onSuccess: (newEvent) => {
+      if (newEvent) {
+        utils.events.listAll.invalidate();
+        setShowCreateEvent(false);
+        void qr.show(newEvent);
+      }
+    },
+  });
+
+  const toggleCheckInMutation = trpc.events.toggleCheckIn.useMutation({
+    onSuccess: () => utils.events.listAll.invalidate(),
+  });
+
+  const deleteEventMutation = trpc.events.delete.useMutation({
+    onSuccess: () => {
+      utils.events.listAll.invalidate();
+      qr.hide();
+    },
+  });
+
+  // Editing rather than delete-and-recreate: deleting takes every check-in
+  // already collected with it, and mints a QR nobody's printed sign matches.
+  const updateEventMutation = trpc.events.update.useMutation({
+    onSuccess: () => {
+      utils.events.listAll.invalidate();
+      setEditingEvent(null);
+      setEditError(null);
+    },
+    onError: (error) => setEditError(error.message),
+  });
+
+  type EventForm = {
+    title: string;
+    description: string;
+    location: string;
+    eventDate: string;
+    maxCheckIns: string;
+  };
+
+  // Empty means no cap — the column is nullable and the door gate only runs
+  // when a number is set. The form used to hardcode undefined, so capacity was
+  // unreachable from anywhere in the product.
+  const parseCapacity = (value: string) => {
+    const parsed = Number(value);
+    return value.trim() && Number.isFinite(parsed) && parsed > 0
+      ? Math.floor(parsed)
+      : undefined;
+  };
+
+  const handleCreateEvent = (formData: EventForm) => {
+    createEventMutation.mutate({
+      title: formData.title,
+      description: formData.description || undefined,
+      location: formData.location || undefined,
+      eventDate: new Date(formData.eventDate),
+      maxCheckIns: parseCapacity(formData.maxCheckIns),
+    });
+  };
+
+  const handleEditEvent = (formData: EventForm) => {
+    if (!editingEvent) return;
+    setEditError(null);
+    updateEventMutation.mutate({
+      eventId: editingEvent.id,
+      title: formData.title,
+      description: formData.description || null,
+      location: formData.location || null,
+      eventDate: new Date(formData.eventDate),
+      maxCheckIns: parseCapacity(formData.maxCheckIns) ?? null,
+    });
+  };
+
+  /** `datetime-local` wants local wall-clock, not the UTC ISO string. */
+  const toLocalInput = (date: Date) => {
+    const local = new Date(
+      date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1000,
+    );
+    return local.toISOString().slice(0, 16);
+  };
+
+  return (
+    <>
+      {showCreateEvent && (
+        <EventFormModal
+          onClose={() => setShowCreateEvent(false)}
+          onSubmit={handleCreateEvent}
+          isSubmitting={createEventMutation.isPending}
+        />
+      )}
+
+      {editingEvent && (
+        <EventFormModal
+          mode="edit"
+          initial={{
+            title: editingEvent.title,
+            description: editingEvent.description ?? "",
+            location: editingEvent.location ?? "",
+            eventDate: toLocalInput(new Date(editingEvent.eventDate)),
+            maxCheckIns: editingEvent.maxCheckIns
+              ? String(editingEvent.maxCheckIns)
+              : "",
+          }}
+          onClose={() => {
+            setEditingEvent(null);
+            setEditError(null);
+          }}
+          onSubmit={handleEditEvent}
+          isSubmitting={updateEventMutation.isPending}
+          error={editError}
+        />
+      )}
+
+      {attendanceEvent && (
+        <EventAttendanceModal
+          eventId={attendanceEvent.id}
+          eventTitle={attendanceEvent.title}
+          onClose={() => setAttendanceEvent(null)}
+        />
+      )}
+
+      {qr.modal}
+
+      <div className={page}>
+        <header>
+          <h1 className={adminTitle}>Club check-ins</h1>
+          <p className={pageDek}>
+            Club meetings and workshops. Bootcamp sessions are managed on the{" "}
+            <Link href="/admin/bootcamp" className={inlineLink}>
+              bootcamp page
+            </Link>
+            , and Hacklytics weekend events live on the hackathon dashboard.
+          </p>
+        </header>
+
+        <section className="mt-10 space-y-6">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <div
+              role="group"
+              aria-label="Filter events by check-in"
+              className="flex flex-wrap gap-2"
+            >
+              {(["all", "open", "closed"] as const).map((f) => (
+                <button
+                  key={f}
+                  type="button"
+                  onClick={() => setStatusFilter(f)}
+                  aria-pressed={statusFilter === f}
+                  className={`${chip(statusFilter === f)} tabular-nums`}
+                >
+                  {f === "all"
+                    ? `All (${events?.length ?? 0})`
+                    : f === "open"
+                      ? `Open (${events?.filter((e) => e.checkInEnabled).length ?? 0})`
+                      : `Closed (${events?.filter((e) => !e.checkInEnabled).length ?? 0})`}
+                </button>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <Link href="/scan/club" className={btnSecondary}>
+                Scan passes
+              </Link>
+              <button
+                type="button"
+                onClick={() => setShowCreateEvent(true)}
+                disabled={readOnly}
+                title={readOnly ? READ_ONLY_TITLE : undefined}
+                className={btnPrimary}
+              >
+                New event
+              </button>
+            </div>
+          </div>
+
+          {eventsLoading ? (
+            <div className="space-y-4" aria-hidden="true">
+              {[1, 2, 3].map((n) => (
+                <div
+                  key={n}
+                  className="h-28 animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
+                />
+              ))}
+            </div>
+          ) : !events || events.length === 0 ? (
+            <div className={sectionRule}>
+              <p className={body}>
+                Club events you create show up here, each with its own check-in
+                QR code.
+              </p>
+              <button
+                type="button"
+                onClick={() => setShowCreateEvent(true)}
+                disabled={readOnly}
+                title={readOnly ? READ_ONLY_TITLE : undefined}
+                className={`${textLink} mt-4 disabled:cursor-not-allowed disabled:opacity-50`}
+              >
+                Create the first event
+              </button>
+            </div>
+          ) : (
+            <ul className="space-y-4">
+              {events
+                .filter((e) =>
+                  statusFilter === "all"
+                    ? true
+                    : statusFilter === "open"
+                      ? e.checkInEnabled
+                      : !e.checkInEnabled,
+                )
+                .map((event) => (
+                  <li key={event.id} className={`${object} p-5 sm:p-6`}>
+                    <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-start">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+                          <h2 className={itemTitle}>{event.title}</h2>
+                          <span
+                            className={status(
+                              event.checkInEnabled ? "accent" : "neutral",
+                            )}
+                          >
+                            {event.checkInEnabled
+                              ? "Check-in open"
+                              : "Check-in closed"}
+                          </span>
+                        </div>
+                        {event.description && (
+                          <p className={`${body} mt-2`}>{event.description}</p>
+                        )}
+                        <p className={`${meta} mt-2 tabular-nums`}>
+                          {event.location || "No location"} ·{" "}
+                          {venueFormat(event.eventDate)} ·{" "}
+                          <span className="font-semibold text-[var(--text-primary)]">
+                            {event.currentCheckIns} check-ins
+                          </span>
+                        </p>
+                      </div>
+
+                      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+                        <button
+                          type="button"
+                          onClick={() => void qr.show(event)}
+                          disabled={qr.generatingFor === event.qrCode}
+                          className={btnSecondary}
+                        >
+                          {qr.generatingFor === event.qrCode
+                            ? "Generating…"
+                            : "QR code"}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() =>
+                            toggleCheckInMutation.mutate({
+                              eventId: event.id,
+                              enabled: !event.checkInEnabled,
+                            })
+                          }
+                          disabled={readOnly}
+                          title={readOnly ? READ_ONLY_TITLE : undefined}
+                          className={btnSecondary}
+                        >
+                          {event.checkInEnabled
+                            ? "Close check-in"
+                            : "Open check-in"}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setAttendanceEvent(event)}
+                          className={textLink}
+                        >
+                          Attendance
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => setEditingEvent(event)}
+                          disabled={readOnly}
+                          title={readOnly ? READ_ONLY_TITLE : undefined}
+                          className={`${textLink} disabled:cursor-not-allowed disabled:opacity-50`}
+                        >
+                          Edit
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            if (
+                              confirm(
+                                event.currentCheckIns > 0
+                                  ? `Delete this event? Its ${event.currentCheckIns} check-in(s) are deleted with it and cannot be recovered.`
+                                  : "Delete this event?",
+                              )
+                            ) {
+                              deleteEventMutation.mutate({ eventId: event.id });
+                            }
+                          }}
+                          disabled={readOnly}
+                          title={readOnly ? READ_ONLY_TITLE : undefined}
+                          className={btnDanger}
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+                  </li>
+                ))}
+            </ul>
+          )}
+        </section>
+      </div>
+    </>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/attendees/AttendeesPage.tsx b/sites/mainweb/app/(portal)/admin/attendees/AttendeesPage.tsx
new file mode 100644
index 00000000..ad5ae4ec
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/attendees/AttendeesPage.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { loginHref } from "@/lib/safe-callback";
+import { trpc } from "@/lib/trpc";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { skipToken } from "@tanstack/react-query";
+import { Download } from "lucide-react";
+import {
+  body,
+  btnSecondary,
+  fieldLabel,
+  input,
+  meta,
+  page,
+  pageDek,
+  sectionRule,
+  status as statusText,
+} from "@/components/portal/ui";
+import { EventOptions } from "@/components/portal/EventOptions";
+
+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 th = "px-4 py-3 text-[13px] font-medium text-[var(--text-subtle)]";
+const td = "px-4 py-3";
+
+export default function AttendeesPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+
+  const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
+
+  const { data: eventList } = trpc.events.listAll.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  const { data: eventData, isLoading } = trpc.events.getById.useQuery(
+    selectedEvent ? { id: selectedEvent } : skipToken,
+  );
+
+  const attendees = eventData?.checkIns;
+
+  if (status === "unauthenticated") {
+    router.push(loginHref());
+    return null;
+  }
+
+  const handleDownloadCSV = () => {
+    if (!attendees || attendees.length === 0) return;
+
+    const cell = (value: unknown) =>
+      `"${String(value ?? "").replace(/"/g, '""')}"`;
+
+    const rows = attendees.map((a: NonNullable<typeof attendees>[number]) =>
+      [
+        a.member ? `${a.member.firstName} ${a.member.lastName}` : a.user?.name,
+        a.user?.email,
+        a.checkInMethod,
+        a.checkedInAt ? new Date(a.checkedInAt).toISOString() : "",
+      ].map(cell),
+    );
+
+    const csv = [
+      // No "Points" column: every row carried the same schema default, so the
+      // export presented a constant as though it were tracked data.
+      ["Name", "Email", "Method", "Checked In At"].map(cell),
+      ...rows,
+    ]
+      .map((r) => r.join(","))
+      .join("\n");
+
+    const url = URL.createObjectURL(
+      new Blob([csv], { type: "text/csv;charset=utf-8;" }),
+    );
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${(eventData?.title ?? "event")
+      .replace(/[^a-z0-9]/gi, "_")
+      .toLowerCase()}_attendees.csv`;
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    // Without this the blob is retained for the lifetime of the page.
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className={page}>
+      <header>
+        <h1 className={adminTitle}>Club event attendees</h1>
+        <p className={pageDek}>
+          Who checked in to each club meeting. Hackathon applications live on
+          each edition&apos;s dashboard.
+        </p>
+      </header>
+
+      <section className="mt-10 space-y-6">
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="w-full sm:max-w-sm">
+            <label htmlFor="attendees-event" className={fieldLabel}>
+              Club event
+            </label>
+            <select
+              id="attendees-event"
+              aria-label="Filter attendees by club event"
+              value={selectedEvent || ""}
+              onChange={(e) => setSelectedEvent(e.target.value || null)}
+              className={`${input} min-h-11 cursor-pointer`}
+            >
+              <option value="">Select an event…</option>
+              <EventOptions events={eventList} />
+            </select>
+          </div>
+          {selectedEvent && (
+            <button
+              type="button"
+              onClick={handleDownloadCSV}
+              className={btnSecondary}
+            >
+              <Download
+                aria-hidden="true"
+                strokeWidth={1.75}
+                className="h-4 w-4"
+              />
+              Export CSV
+            </button>
+          )}
+        </div>
+
+        {isLoading ? (
+          <p className={`${meta} ${sectionRule}`}>Loading check-ins…</p>
+        ) : !attendees || attendees.length === 0 ? (
+          <p className={`${body} ${sectionRule}`}>
+            {selectedEvent
+              ? "Nobody has checked in to this event yet. Check-ins appear here as people arrive."
+              : "Pick a club event to see who checked in."}
+          </p>
+        ) : (
+          <div className="overflow-x-auto border-y border-[var(--border-subtle)]">
+            <table className="w-full min-w-[640px] text-left text-[15px]">
+              <thead className="border-b border-[var(--border-subtle)]">
+                <tr>
+                  <th scope="col" className={th}>
+                    Name
+                  </th>
+                  <th scope="col" className={th}>
+                    Email
+                  </th>
+                  <th scope="col" className={th}>
+                    Status
+                  </th>
+                  <th scope="col" className={th}>
+                    Checked in at
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {attendees.map((attendee) => (
+                  <tr
+                    key={attendee.id}
+                    className="border-b border-[var(--border-subtle)] last:border-b-0 transition-colors hover:bg-[var(--bg-secondary)]"
+                  >
+                    <td className={td}>
+                      <div className="flex items-center gap-3">
+                        {}
+                        <img
+                          src={attendee.user?.image || "/avatars/default.svg"}
+                          alt={attendee.user?.name || "Attendee"}
+                          className="h-8 w-8 shrink-0 rounded-full object-cover"
+                        />
+                        <span className="font-semibold text-[var(--text-primary)]">
+                          {attendee.user?.name ||
+                            `${attendee.member?.firstName ?? ""} ${attendee.member?.lastName ?? ""}`.trim() ||
+                            "Unknown"}
+                        </span>
+                      </div>
+                    </td>
+                    <td className={`${td} text-[var(--text-muted)]`}>
+                      {attendee.user?.email}
+                    </td>
+                    <td className={td}>
+                      <span className={statusText("success")}>Checked in</span>
+                    </td>
+                    <td
+                      className={`${td} whitespace-nowrap tabular-nums text-[var(--text-muted)]`}
+                    >
+                      {attendee.checkedInAt
+                        ? new Date(attendee.checkedInAt).toLocaleString()
+                        : "—"}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/attendees/page.tsx b/sites/mainweb/app/(portal)/admin/attendees/page.tsx
index ad5ae4ec..787031ae 100644
--- a/sites/mainweb/app/(portal)/admin/attendees/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/attendees/page.tsx
@@ -1,203 +1,14 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { loginHref } from "@/lib/safe-callback";
-import { trpc } from "@/lib/trpc";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { skipToken } from "@tanstack/react-query";
-import { Download } from "lucide-react";
-import {
-  body,
-  btnSecondary,
-  fieldLabel,
-  input,
-  meta,
-  page,
-  pageDek,
-  sectionRule,
-  status as statusText,
-} from "@/components/portal/ui";
-import { EventOptions } from "@/components/portal/EventOptions";
-
-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 th = "px-4 py-3 text-[13px] font-medium text-[var(--text-subtle)]";
-const td = "px-4 py-3";
-
-export default function AttendeesPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-
-  const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
-
-  const { data: eventList } = trpc.events.listAll.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  const { data: eventData, isLoading } = trpc.events.getById.useQuery(
-    selectedEvent ? { id: selectedEvent } : skipToken,
-  );
-
-  const attendees = eventData?.checkIns;
-
-  if (status === "unauthenticated") {
-    router.push(loginHref());
-    return null;
-  }
-
-  const handleDownloadCSV = () => {
-    if (!attendees || attendees.length === 0) return;
-
-    const cell = (value: unknown) =>
-      `"${String(value ?? "").replace(/"/g, '""')}"`;
-
-    const rows = attendees.map((a: NonNullable<typeof attendees>[number]) =>
-      [
-        a.member ? `${a.member.firstName} ${a.member.lastName}` : a.user?.name,
-        a.user?.email,
-        a.checkInMethod,
-        a.checkedInAt ? new Date(a.checkedInAt).toISOString() : "",
-      ].map(cell),
-    );
-
-    const csv = [
-      // No "Points" column: every row carried the same schema default, so the
-      // export presented a constant as though it were tracked data.
-      ["Name", "Email", "Method", "Checked In At"].map(cell),
-      ...rows,
-    ]
-      .map((r) => r.join(","))
-      .join("\n");
-
-    const url = URL.createObjectURL(
-      new Blob([csv], { type: "text/csv;charset=utf-8;" }),
-    );
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${(eventData?.title ?? "event")
-      .replace(/[^a-z0-9]/gi, "_")
-      .toLowerCase()}_attendees.csv`;
-    link.style.visibility = "hidden";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    // Without this the blob is retained for the lifetime of the page.
-    URL.revokeObjectURL(url);
-  };
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AttendeesPage from "./AttendeesPage";
 
+export default function Page() {
   return (
-    <div className={page}>
-      <header>
-        <h1 className={adminTitle}>Club event attendees</h1>
-        <p className={pageDek}>
-          Who checked in to each club meeting. Hackathon applications live on
-          each edition&apos;s dashboard.
-        </p>
-      </header>
-
-      <section className="mt-10 space-y-6">
-        <div className="flex flex-wrap items-end justify-between gap-4">
-          <div className="w-full sm:max-w-sm">
-            <label htmlFor="attendees-event" className={fieldLabel}>
-              Club event
-            </label>
-            <select
-              id="attendees-event"
-              aria-label="Filter attendees by club event"
-              value={selectedEvent || ""}
-              onChange={(e) => setSelectedEvent(e.target.value || null)}
-              className={`${input} min-h-11 cursor-pointer`}
-            >
-              <option value="">Select an event…</option>
-              <EventOptions events={eventList} />
-            </select>
-          </div>
-          {selectedEvent && (
-            <button
-              type="button"
-              onClick={handleDownloadCSV}
-              className={btnSecondary}
-            >
-              <Download
-                aria-hidden="true"
-                strokeWidth={1.75}
-                className="h-4 w-4"
-              />
-              Export CSV
-            </button>
-          )}
-        </div>
-
-        {isLoading ? (
-          <p className={`${meta} ${sectionRule}`}>Loading check-ins…</p>
-        ) : !attendees || attendees.length === 0 ? (
-          <p className={`${body} ${sectionRule}`}>
-            {selectedEvent
-              ? "Nobody has checked in to this event yet. Check-ins appear here as people arrive."
-              : "Pick a club event to see who checked in."}
-          </p>
-        ) : (
-          <div className="overflow-x-auto border-y border-[var(--border-subtle)]">
-            <table className="w-full min-w-[640px] text-left text-[15px]">
-              <thead className="border-b border-[var(--border-subtle)]">
-                <tr>
-                  <th scope="col" className={th}>
-                    Name
-                  </th>
-                  <th scope="col" className={th}>
-                    Email
-                  </th>
-                  <th scope="col" className={th}>
-                    Status
-                  </th>
-                  <th scope="col" className={th}>
-                    Checked in at
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {attendees.map((attendee) => (
-                  <tr
-                    key={attendee.id}
-                    className="border-b border-[var(--border-subtle)] last:border-b-0 transition-colors hover:bg-[var(--bg-secondary)]"
-                  >
-                    <td className={td}>
-                      <div className="flex items-center gap-3">
-                        {}
-                        <img
-                          src={attendee.user?.image || "/avatars/default.svg"}
-                          alt={attendee.user?.name || "Attendee"}
-                          className="h-8 w-8 shrink-0 rounded-full object-cover"
-                        />
-                        <span className="font-semibold text-[var(--text-primary)]">
-                          {attendee.user?.name ||
-                            `${attendee.member?.firstName ?? ""} ${attendee.member?.lastName ?? ""}`.trim() ||
-                            "Unknown"}
-                        </span>
-                      </div>
-                    </td>
-                    <td className={`${td} text-[var(--text-muted)]`}>
-                      {attendee.user?.email}
-                    </td>
-                    <td className={td}>
-                      <span className={statusText("success")}>Checked in</span>
-                    </td>
-                    <td
-                      className={`${td} whitespace-nowrap tabular-nums text-[var(--text-muted)]`}
-                    >
-                      {attendee.checkedInAt
-                        ? new Date(attendee.checkedInAt).toLocaleString()
-                        : "—"}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </section>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["events.listAll", undefined, c.events.listAll()],
+      ]}
+    >
+      <AttendeesPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/bootcamp/AdminBootcampPage.tsx b/sites/mainweb/app/(portal)/admin/bootcamp/AdminBootcampPage.tsx
new file mode 100644
index 00000000..bd61f1c5
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/bootcamp/AdminBootcampPage.tsx
@@ -0,0 +1,759 @@
+"use client";
+
+import { venueFormat } from "@/lib/venue-time";
+import { useState } from "react";
+import { useSession } from "next-auth/react";
+import { Check, Copy, Mail } from "lucide-react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { BootcampMaterialsTable } from "@/components/portal/BootcampMaterialsTable";
+import type { BootcampMaterialRow } from "@/components/portal/BootcampMaterialsTable";
+import { BootcampWorkshopModal } from "@/components/portal/BootcampWorkshopModal";
+import type { BootcampWorkshopFormData } from "@/components/portal/BootcampWorkshopModal";
+import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
+import { useEventQR } from "@/components/portal/EventQR";
+import { trpc } from "@/lib/trpc";
+import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
+import {
+  body,
+  btnPrimary,
+  btnSecondary,
+  fieldLabel,
+  input,
+  itemTitle,
+  kicker,
+  label,
+  meta,
+  pageDek,
+  sectionTitle,
+  status as statusDot,
+  textLink,
+} from "@/components/portal/ui";
+
+/** 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-3 py-2.5 text-[13px] font-medium text-[var(--text-subtle)]";
+
+/** `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}`;
+}
+
+/** `datetime-local` carries local wall-clock time rather than a UTC ISO value. */
+function toLocalInput(date: Date) {
+  const local = new Date(
+    date.getTime() - date.getTimezoneOffset() * 60 * 1000,
+  );
+  return local.toISOString().slice(0, 16);
+}
+
+/** A mailto with the whole cohort BCC'd stops being clickable somewhere around
+ *  2000 characters, and browsers differ on where. Past that, copying is the only
+ *  thing that reliably works. */
+const MAILTO_LIMIT = 1800;
+
+function CohortEmails({ emails }: { emails: string[] }) {
+  const [copied, setCopied] = useState(false);
+  const list = emails.join(", ");
+  const mailto = `mailto:?bcc=${encodeURIComponent(emails.join(","))}`;
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(list);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard is blocked without a secure context or permission; the
+      // addresses are on screen below either way.
+      setCopied(false);
+    }
+  };
+
+  return (
+    <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h2 className={itemTitle}>Email the cohort</h2>
+          <p className={`mt-1 ${body}`}>
+            <span className="tabular-nums">{emails.length}</span> address
+            {emails.length === 1 ? "" : "es"}, everyone enrolled this term.
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3">
+          <button type="button" onClick={copy} className={btnSecondary}>
+            <Copy aria-hidden="true" className="h-4 w-4" strokeWidth={1.75} />
+            {copied ? "Copied" : "Copy addresses"}
+          </button>
+
+          {mailto.length <= MAILTO_LIMIT && (
+            <a href={mailto} className={btnSecondary}>
+              <Mail aria-hidden="true" className="h-4 w-4" strokeWidth={1.75} />
+              Open in mail app
+            </a>
+          )}
+        </div>
+      </div>
+
+      {/* Selectable as well as copyable: a locked-down browser refuses the
+          clipboard API, and this still works. */}
+      <p className="mt-4 select-all break-words text-[13px] leading-relaxed text-[var(--text-subtle)]">
+        {list}
+      </p>
+
+      <p aria-live="polite" className="sr-only">
+        {copied ? "Addresses copied to the clipboard." : ""}
+      </p>
+
+      {mailto.length > MAILTO_LIMIT && (
+        <p className={`mt-3 ${meta}`}>
+          Too many addresses for a mail-app link. Copy them and paste them into
+          BCC.
+        </p>
+      )}
+    </section>
+  );
+}
+
+function Stat({
+  label: text,
+  value,
+}: {
+  label: string;
+  value: string | number;
+}) {
+  return (
+    <div className="sm:border-l sm:border-[var(--border-subtle)] sm:pl-6 sm:first:border-l-0 sm:first:pl-0">
+      <dt className={label}>{text}</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>
+    </div>
+  );
+}
+
+export default function AdminBootcampPage() {
+  const { data: session, status } = useSession();
+  const [term, setTerm] = useState<string | undefined>(undefined);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selected, setSelected] = useState<BootcampMaterialRow | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+
+  const attendance = trpc.bootcamp.attendance.useQuery(
+    { term },
+    { enabled: !!session },
+  );
+  const workshops = trpc.bootcamp.adminWorkshops.useQuery(
+    { term },
+    { enabled: !!session },
+  );
+  const createWorkshop = trpc.bootcamp.createWorkshop.useMutation();
+  const updateWorkshop = trpc.bootcamp.updateWorkshop.useMutation();
+  const upsertSession = trpc.bootcamp.upsertSession.useMutation();
+
+  // Session check-in lives here rather than on the Club Hub: a session is
+  // still an event underneath, with the same QR and door, but staff run it
+  // from the bootcamp page.
+  const qr = useEventQR();
+  const [attendanceFor, setAttendanceFor] = useState<{
+    id: string;
+    title: string;
+  } | null>(null);
+  const toggleCheckIn = trpc.events.toggleCheckIn.useMutation({
+    onSuccess: () => utils.bootcamp.attendance.invalidate(),
+  });
+  const setPublished = trpc.bootcamp.setPublished.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.bootcamp.adminWorkshops.invalidate(),
+        utils.bootcamp.workshops.invalidate(),
+      ]);
+    },
+  });
+
+  const upload = async (
+    workshopId: string,
+    kind: "materials" | "solution",
+    file: File,
+  ) => {
+    const response = await fetch(
+      `/api/bootcamp/materials/${workshopId}/${kind}`,
+      {
+        method: "POST",
+        headers: { "x-bootcamp-filename": encodeURIComponent(file.name) },
+        body: file,
+      },
+    );
+    if (!response.ok) {
+      const body = (await response.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+      throw new Error(body?.error ?? `Upload failed (${response.status})`);
+    }
+  };
+
+  const saveWorkshop = async (form: BootcampWorkshopFormData) => {
+    setIsSaving(true);
+    setError(null);
+    setNotice(null);
+    const wasEditing = !!selected;
+    // What the form opened with, so an untouched date or room is not rewritten.
+    const initialDate = selected?.eventDate
+      ? toLocalInput(new Date(selected.eventDate))
+      : "";
+    const initialLocation = selected?.location ?? "";
+    const dateChanged = form.sessionDate !== initialDate;
+    const locationChanged = form.location.trim() !== initialLocation;
+
+    let workshopId: string;
+    try {
+      const fields = {
+        title: form.title.trim(),
+        recordingUrl: form.recordingUrl.trim() || null,
+      };
+      const saved = selected
+        ? await updateWorkshop.mutateAsync({
+            workshopId: selected.id,
+            ...fields,
+          })
+        : await createWorkshop.mutateAsync({
+            ...fields,
+            week: Number(form.week),
+            // The term being viewed, not the live one: adding a week while
+            // filtered to a past cohort must land in that cohort. Undefined
+            // until the officer picks one, which the server reads as current.
+            term,
+          });
+      workshopId = saved.id;
+      // A create followed by a failed upload must retry as an edit; otherwise
+      // the second save collides with the draft row that already succeeded.
+      setSelected({
+        ...saved,
+        eventDate: selected?.eventDate ?? null,
+        location: selected?.location ?? null,
+      });
+    } catch (cause) {
+      setError(
+        `Workshop details were not saved: ${cause instanceof Error ? cause.message : "Unknown error"}`,
+      );
+      setIsSaving(false);
+      return;
+    }
+
+    try {
+      // A blank date on a new row means TBA, not "detach week N's session".
+      if (dateChanged || (locationChanged && form.sessionDate)) {
+        await upsertSession.mutateAsync({
+          workshopId,
+          sessionDate: form.sessionDate ? new Date(form.sessionDate) : null,
+          ...(locationChanged ? { location: form.location.trim() || null } : {}),
+        });
+      }
+      // Session writes affect the material join, attendance views, and every
+      // event list that can expose the new QR-backed club event.
+      await Promise.all([
+        utils.bootcamp.adminWorkshops.invalidate(),
+        utils.bootcamp.workshops.invalidate(),
+        utils.bootcamp.attendance.invalidate(),
+        utils.bootcamp.myProgress.invalidate(),
+        utils.events.listAll.invalidate(),
+        utils.events.list.invalidate(),
+        utils.events.myEvents.invalidate(),
+        utils.events.myStats.invalidate(),
+      ]);
+    } catch (cause) {
+      setError(
+        `Workshop details were saved, but its session event was not: ${cause instanceof Error ? cause.message : "Unknown error"}`,
+      );
+      setIsSaving(false);
+      return;
+    }
+
+    try {
+      if (form.materials) {
+        await upload(workshopId, "materials", form.materials);
+      }
+      if (form.solution) {
+        await upload(workshopId, "solution", form.solution);
+      }
+    } catch (cause) {
+      await utils.bootcamp.adminWorkshops.invalidate();
+      setError(
+        `Workshop details were saved, but a ZIP upload failed: ${cause instanceof Error ? cause.message : "Unknown error"}`,
+      );
+      setIsSaving(false);
+      return;
+    }
+
+    await Promise.all([
+      utils.bootcamp.adminWorkshops.invalidate(),
+      utils.bootcamp.workshops.invalidate(),
+    ]);
+    setNotice(wasEditing ? "Workshop updated." : "Workshop created as a draft.");
+    setIsSaving(false);
+    setModalOpen(false);
+    setSelected(null);
+  };
+
+  const removeFile = async (kind: "materials" | "solution") => {
+    if (!selected) return;
+    setIsSaving(true);
+    setError(null);
+    // A network failure otherwise leaves isSaving set and the modal stuck.
+    const response = await fetch(
+      `/api/bootcamp/materials/${selected.id}/${kind}`,
+      { method: "DELETE" },
+    ).catch(() => null);
+    if (!response?.ok) {
+      const body = (await response?.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+      setError(body?.error ?? `Could not remove ${kind}.`);
+      setIsSaving(false);
+      return;
+    }
+    setSelected({
+      ...selected,
+      ...(kind === "materials"
+        ? {
+            materialsKey: null,
+            materialsFileName: null,
+            materialsSizeBytes: null,
+          }
+        : {
+            solutionKey: null,
+            solutionFileName: null,
+            solutionSizeBytes: null,
+          }),
+    });
+    await utils.bootcamp.adminWorkshops.invalidate();
+    setNotice(`${kind === "materials" ? "Materials" : "Solution"} ZIP removed.`);
+    setIsSaving(false);
+  };
+
+  const deleteWorkshop = async (row: BootcampMaterialRow) => {
+    if (
+      !window.confirm(
+        `Delete week ${row.week}, its metadata, materials ZIP, and solution ZIP? This cannot be undone.`,
+      )
+    ) {
+      return;
+    }
+    setError(null);
+    setNotice(null);
+    const response = await fetch(`/api/bootcamp/materials/${row.id}`, {
+      method: "DELETE",
+    }).catch(() => null);
+    if (!response?.ok) {
+      const body = (await response?.json().catch(() => null)) as {
+        error?: string;
+      } | null;
+      setError(body?.error ?? "Could not delete workshop.");
+      return;
+    }
+    await Promise.all([
+      utils.bootcamp.adminWorkshops.invalidate(),
+      utils.bootcamp.workshops.invalidate(),
+    ]);
+    setNotice(`Week ${row.week} deleted.`);
+  };
+
+  if (status === "loading" || attendance.isPending || workshops.isPending) {
+    return <LoadingScreen message="Loading bootcamp…" />;
+  }
+
+  if (attendance.error || workshops.error) {
+    return (
+      <div className="mx-auto max-w-3xl px-5 py-12 sm:px-8">
+        <p role="alert" className="text-[15px] text-[var(--danger)]">
+          The bootcamp did not load:{" "}
+          {attendance.error?.message ?? workshops.error?.message} Reload the
+          page to try again.
+        </p>
+      </div>
+    );
+  }
+
+  const data = attendance.data;
+  const { sessions, members, stats } = data;
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)] pb-20 text-[var(--text-muted)]">
+      <main className="mx-auto w-full max-w-7xl px-5 py-10 sm:px-8 md:px-12 md:py-14">
+        <header className="flex flex-wrap items-end justify-between gap-6">
+          <div>
+            <p className={kicker}>{termLabel(data.term)}</p>
+            <h1 className={`mt-2 ${adminTitle}`}>Bootcamp</h1>
+            <p className={pageDek}>
+              Who is enrolled, who turned up, and what each week hands out.
+            </p>
+          </div>
+
+          {/* Attendance outlives its semester, so past terms stay reachable. */}
+          {data.terms.length > 1 && (
+            <div className="w-full sm:w-48">
+              <label htmlFor="bootcamp-term" className={fieldLabel}>
+                Term
+              </label>
+              <select
+                id="bootcamp-term"
+                value={data.term}
+                onChange={(event) => setTerm(event.target.value)}
+                className={input}
+              >
+                {data.terms.map((option) => (
+                  <option key={option} value={option}>
+                    {termLabel(option)}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+        </header>
+
+        <dl className="mt-10 grid grid-cols-2 gap-x-6 gap-y-6 border-t border-[var(--border-subtle)] pt-6 sm:grid-cols-4">
+          <Stat label="Enrolled" value={stats.enrolled} />
+          <Stat
+            label="Sessions held"
+            value={`${stats.sessionsHeld}/${stats.sessionsPlanned}`}
+          />
+          <Stat label="Average attendance" value={stats.averageAttendance} />
+          <Stat
+            label="Turnout"
+            value={
+              stats.enrolled && stats.sessionsHeld
+                ? `${Math.round((stats.averageAttendance / stats.enrolled) * 100)}%`
+                : "—"
+            }
+          />
+        </dl>
+
+        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+          <div className="mb-5 flex flex-wrap items-end justify-between gap-4">
+            <div>
+              <h2 className={sectionTitle}>Workshop materials</h2>
+              <p className={`mt-1 ${meta}`}>
+                What members download each week. New weeks start as drafts.
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => {
+                setSelected(null);
+                setError(null);
+                setModalOpen(true);
+              }}
+              disabled={readOnly}
+              title={readOnly ? READ_ONLY_TITLE : undefined}
+              className={btnPrimary}
+            >
+              Add workshop
+            </button>
+          </div>
+
+          {error && !modalOpen && (
+            <p role="alert" className="mb-4 text-sm text-[var(--danger)]">
+              {error}
+            </p>
+          )}
+          {notice && (
+            <p className={`mb-4 ${statusDot("success")}`} role="status">
+              {notice}
+            </p>
+          )}
+
+          <BootcampMaterialsTable
+            rows={workshops.data ?? []}
+            term={termLabel(data.term)}
+            isUpdating={setPublished.isPending}
+            onEdit={(row) => {
+              setSelected(row);
+              setError(null);
+              setModalOpen(true);
+            }}
+            onDelete={deleteWorkshop}
+            onSetPublished={async (row, isPublished) => {
+              setError(null);
+              setNotice(null);
+              try {
+                await setPublished.mutateAsync({
+                  workshopId: row.id,
+                  isPublished,
+                });
+                setNotice(
+                  `Week ${row.week} ${isPublished ? "published" : "returned to draft"}.`,
+                );
+              } catch (cause) {
+                setError(
+                  cause instanceof Error
+                    ? cause.message
+                    : "Could not change publication status.",
+                );
+              }
+            }}
+          />
+        </section>
+
+        {members.length > 0 && (
+          <CohortEmails emails={members.map((member) => member.email)} />
+        )}
+
+        {qr.modal}
+        {attendanceFor && (
+          <EventAttendanceModal
+            eventId={attendanceFor.id}
+            eventTitle={attendanceFor.title}
+            onClose={() => setAttendanceFor(null)}
+          />
+        )}
+
+        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+          <h2 className={sectionTitle}>Session check-in</h2>
+          <p className={`mt-1 ${meta}`}>
+            Show the QR code at the door, then close check-in when the session
+            ends.
+          </p>
+
+          {sessions.length > 0 && (
+            <ul className="mt-5 border-t border-[var(--border-subtle)]">
+              {sessions.map((row) => (
+                <li
+                  key={row.id}
+                  className="flex flex-col gap-3 border-b border-[var(--border-subtle)] py-4 lg:flex-row lg:items-center lg:justify-between"
+                >
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+                      <span className={`${label} tabular-nums`}>
+                        Week {row.week}
+                      </span>
+                      <span className="text-[17px] font-semibold text-[var(--text-primary)]">
+                        {row.title}
+                      </span>
+                      <span
+                        className={statusDot(
+                          row.checkInEnabled ? "accent" : "neutral",
+                        )}
+                      >
+                        {row.checkInEnabled ? "Check-in open" : "Check-in closed"}
+                      </span>
+                    </div>
+                    <p className={`mt-1 ${meta}`}>
+                      {row.location || "No room set"} ·{" "}
+                      {venueFormat(row.eventDate)} ·{" "}
+                      <span className="tabular-nums">{row.attendance}</span>{" "}
+                      checked in
+                    </p>
+                  </div>
+
+                  <div className="flex flex-wrap items-center gap-3">
+                    <button
+                      type="button"
+                      onClick={() => void qr.show(row)}
+                      disabled={qr.generatingFor === row.qrCode}
+                      className={`${btnSecondary} min-h-11`}
+                    >
+                      {qr.generatingFor === row.qrCode
+                        ? "Generating…"
+                        : "Show QR code"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        toggleCheckIn.mutate({
+                          eventId: row.id,
+                          enabled: !row.checkInEnabled,
+                        })
+                      }
+                      disabled={readOnly || toggleCheckIn.isPending}
+                      title={readOnly ? READ_ONLY_TITLE : undefined}
+                      className={`${btnSecondary} min-h-11`}
+                    >
+                      {row.checkInEnabled ? "Close check-in" : "Open check-in"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setAttendanceFor({ id: row.id, title: row.title })
+                      }
+                      className={`${textLink} min-h-11`}
+                    >
+                      Attendance
+                    </button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <h3 className={`mt-10 ${itemTitle}`}>Attendance by member</h3>
+
+          {sessions.length === 0 ? (
+            <p className={`mt-3 max-w-2xl ${body}`}>
+              No sessions are scheduled for {termLabel(data.term)}. Give a
+              workshop a session date under Workshop materials, and its QR code,
+              check-in controls and attendance column appear here.
+            </p>
+          ) : members.length === 0 ? (
+            <p className={`mt-3 max-w-2xl ${body}`}>
+              Nobody has enrolled in this bootcamp yet. Members enrol by adding
+              the bootcamp to their membership payment, and they appear here as
+              soon as it clears.
+            </p>
+          ) : (
+            /* Twelve weeks will not fit a phone; scrolling beats squeezing. */
+            <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">
+                  Bootcamp attendance for {termLabel(data.term)}: one row per
+                  enrolled member, one column per session.
+                </caption>
+                <thead>
+                  <tr className="border-b border-[var(--border-subtle)]">
+                    <th
+                      scope="col"
+                      className={`sticky left-0 z-10 bg-[var(--bg-primary)] pl-0 text-left ${th}`}
+                    >
+                      Member
+                    </th>
+                    {sessions.map((row) => (
+                      <th
+                        key={row.id}
+                        scope="col"
+                        title={`${row.title} · ${row.attendance} checked in`}
+                        className={`text-center tabular-nums ${th}`}
+                      >
+                        W{row.week}
+                      </th>
+                    ))}
+                    <th scope="col" className={`pr-0 text-right ${th}`}>
+                      Total
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {members.map((member) => {
+                    const attended = new Set(member.attendedEventIds);
+                    return (
+                      <tr
+                        key={member.userId}
+                        className="group border-b border-[var(--border-subtle)] transition-colors last:border-b-0 hover:bg-[var(--bg-secondary)]"
+                      >
+                        <th
+                          scope="row"
+                          className="sticky left-0 z-10 bg-[var(--bg-primary)] py-3 pr-3 text-left font-normal transition-colors group-hover:bg-[var(--bg-secondary)]"
+                        >
+                          <span className="block font-semibold text-[var(--text-primary)]">
+                            {member.name}
+                          </span>
+                          <span className="block text-[13px] text-[var(--text-subtle)]">
+                            {member.email}
+                          </span>
+                        </th>
+
+                        {sessions.map((row) => (
+                          <td key={row.id} className="px-3 py-3 text-center">
+                            {attended.has(row.id) ? (
+                              <>
+                                <Check
+                                  aria-hidden="true"
+                                  strokeWidth={1.75}
+                                  className="mx-auto h-4 w-4 text-[var(--success)]"
+                                />
+                                <span className="sr-only">
+                                  Attended week {row.week}
+                                </span>
+                              </>
+                            ) : (
+                              <>
+                                <span aria-hidden="true" className="text-[var(--text-subtle)]">
+                                  ·
+                                </span>
+                                <span className="sr-only">
+                                  {row.past ? "Missed" : "Not held yet"} week{" "}
+                                  {row.week}
+                                </span>
+                              </>
+                            )}
+                          </td>
+                        ))}
+
+                        <td className="py-3 pl-3 text-right font-semibold tabular-nums text-[var(--text-primary)]">
+                          {member.attendedCount}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+                <tfoot>
+                  <tr className="border-t border-[var(--border-subtle)]">
+                    <th
+                      scope="row"
+                      className={`sticky left-0 z-10 bg-[var(--bg-primary)] pl-0 text-left ${th}`}
+                    >
+                      Checked in
+                    </th>
+                    {sessions.map((row) => (
+                      <td
+                        key={row.id}
+                        className="px-3 py-2.5 text-center text-[13px] tabular-nums text-[var(--text-muted)]"
+                      >
+                        {row.attendance}
+                      </td>
+                    ))}
+                    <td />
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          )}
+
+          {sessions.length > 0 && (
+            <p className={`mt-4 max-w-2xl ${meta}`}>
+              A session counts anyone who scanned in, member of this bootcamp or
+              not, so a per-session total can run ahead of the rows above. Fix a
+              wrong check-in from that session&rsquo;s Attendance list.
+            </p>
+          )}
+        </section>
+
+        {modalOpen && (
+          <BootcampWorkshopModal
+            mode={selected ? "edit" : "create"}
+            initial={
+              selected
+                ? {
+                    week: String(selected.week),
+                    title: selected.title,
+                    sessionDate: selected.eventDate
+                      ? toLocalInput(new Date(selected.eventDate))
+                      : "",
+                    location: selected.location ?? "",
+                    recordingUrl: selected.recordingUrl ?? "",
+                    materialsFileName: selected.materialsFileName,
+                    solutionFileName: selected.solutionFileName,
+                  }
+                : undefined
+            }
+            isSubmitting={isSaving}
+            error={error}
+            onRemoveFile={removeFile}
+            onSubmit={saveWorkshop}
+            onClose={() => {
+              if (isSaving) return;
+              setModalOpen(false);
+              setSelected(null);
+              setError(null);
+            }}
+          />
+        )}
+      </main>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/bootcamp/page.tsx b/sites/mainweb/app/(portal)/admin/bootcamp/page.tsx
index 3fdf90fe..faa72235 100644
--- a/sites/mainweb/app/(portal)/admin/bootcamp/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/bootcamp/page.tsx
@@ -1,758 +1,15 @@
-"use client";
-
-import { useState } from "react";
-import { useSession } from "next-auth/react";
-import { Check, Copy, Mail } from "lucide-react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { BootcampMaterialsTable } from "@/components/portal/BootcampMaterialsTable";
-import type { BootcampMaterialRow } from "@/components/portal/BootcampMaterialsTable";
-import { BootcampWorkshopModal } from "@/components/portal/BootcampWorkshopModal";
-import type { BootcampWorkshopFormData } from "@/components/portal/BootcampWorkshopModal";
-import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
-import { useEventQR } from "@/components/portal/EventQR";
-import { trpc } from "@/lib/trpc";
-import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
-import {
-  body,
-  btnPrimary,
-  btnSecondary,
-  fieldLabel,
-  input,
-  itemTitle,
-  kicker,
-  label,
-  meta,
-  pageDek,
-  sectionTitle,
-  status as statusDot,
-  textLink,
-} from "@/components/portal/ui";
-
-/** 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-3 py-2.5 text-[13px] font-medium text-[var(--text-subtle)]";
-
-/** `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}`;
-}
-
-/** `datetime-local` carries local wall-clock time rather than a UTC ISO value. */
-function toLocalInput(date: Date) {
-  const local = new Date(
-    date.getTime() - date.getTimezoneOffset() * 60 * 1000,
-  );
-  return local.toISOString().slice(0, 16);
-}
-
-/** A mailto with the whole cohort BCC'd stops being clickable somewhere around
- *  2000 characters, and browsers differ on where. Past that, copying is the only
- *  thing that reliably works. */
-const MAILTO_LIMIT = 1800;
-
-function CohortEmails({ emails }: { emails: string[] }) {
-  const [copied, setCopied] = useState(false);
-  const list = emails.join(", ");
-  const mailto = `mailto:?bcc=${encodeURIComponent(emails.join(","))}`;
-
-  const copy = async () => {
-    try {
-      await navigator.clipboard.writeText(list);
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Clipboard is blocked without a secure context or permission; the
-      // addresses are on screen below either way.
-      setCopied(false);
-    }
-  };
-
-  return (
-    <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-      <div className="flex flex-wrap items-end justify-between gap-4">
-        <div>
-          <h2 className={itemTitle}>Email the cohort</h2>
-          <p className={`mt-1 ${body}`}>
-            <span className="tabular-nums">{emails.length}</span> address
-            {emails.length === 1 ? "" : "es"}, everyone enrolled this term.
-          </p>
-        </div>
-
-        <div className="flex flex-wrap items-center gap-3">
-          <button type="button" onClick={copy} className={btnSecondary}>
-            <Copy aria-hidden="true" className="h-4 w-4" strokeWidth={1.75} />
-            {copied ? "Copied" : "Copy addresses"}
-          </button>
-
-          {mailto.length <= MAILTO_LIMIT && (
-            <a href={mailto} className={btnSecondary}>
-              <Mail aria-hidden="true" className="h-4 w-4" strokeWidth={1.75} />
-              Open in mail app
-            </a>
-          )}
-        </div>
-      </div>
-
-      {/* Selectable as well as copyable: a locked-down browser refuses the
-          clipboard API, and this still works. */}
-      <p className="mt-4 select-all break-words text-[13px] leading-relaxed text-[var(--text-subtle)]">
-        {list}
-      </p>
-
-      <p aria-live="polite" className="sr-only">
-        {copied ? "Addresses copied to the clipboard." : ""}
-      </p>
-
-      {mailto.length > MAILTO_LIMIT && (
-        <p className={`mt-3 ${meta}`}>
-          Too many addresses for a mail-app link. Copy them and paste them into
-          BCC.
-        </p>
-      )}
-    </section>
-  );
-}
-
-function Stat({
-  label: text,
-  value,
-}: {
-  label: string;
-  value: string | number;
-}) {
-  return (
-    <div className="sm:border-l sm:border-[var(--border-subtle)] sm:pl-6 sm:first:border-l-0 sm:first:pl-0">
-      <dt className={label}>{text}</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>
-    </div>
-  );
-}
-
-export default function AdminBootcampPage() {
-  const { data: session, status } = useSession();
-  const [term, setTerm] = useState<string | undefined>(undefined);
-  const [modalOpen, setModalOpen] = useState(false);
-  const [selected, setSelected] = useState<BootcampMaterialRow | null>(null);
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [notice, setNotice] = useState<string | null>(null);
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-
-  const attendance = trpc.bootcamp.attendance.useQuery(
-    { term },
-    { enabled: !!session },
-  );
-  const workshops = trpc.bootcamp.adminWorkshops.useQuery(
-    { term },
-    { enabled: !!session },
-  );
-  const createWorkshop = trpc.bootcamp.createWorkshop.useMutation();
-  const updateWorkshop = trpc.bootcamp.updateWorkshop.useMutation();
-  const upsertSession = trpc.bootcamp.upsertSession.useMutation();
-
-  // Session check-in lives here rather than on the Club Hub: a session is
-  // still an event underneath, with the same QR and door, but staff run it
-  // from the bootcamp page.
-  const qr = useEventQR();
-  const [attendanceFor, setAttendanceFor] = useState<{
-    id: string;
-    title: string;
-  } | null>(null);
-  const toggleCheckIn = trpc.events.toggleCheckIn.useMutation({
-    onSuccess: () => utils.bootcamp.attendance.invalidate(),
-  });
-  const setPublished = trpc.bootcamp.setPublished.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.bootcamp.adminWorkshops.invalidate(),
-        utils.bootcamp.workshops.invalidate(),
-      ]);
-    },
-  });
-
-  const upload = async (
-    workshopId: string,
-    kind: "materials" | "solution",
-    file: File,
-  ) => {
-    const response = await fetch(
-      `/api/bootcamp/materials/${workshopId}/${kind}`,
-      {
-        method: "POST",
-        headers: { "x-bootcamp-filename": encodeURIComponent(file.name) },
-        body: file,
-      },
-    );
-    if (!response.ok) {
-      const body = (await response.json().catch(() => null)) as {
-        error?: string;
-      } | null;
-      throw new Error(body?.error ?? `Upload failed (${response.status})`);
-    }
-  };
-
-  const saveWorkshop = async (form: BootcampWorkshopFormData) => {
-    setIsSaving(true);
-    setError(null);
-    setNotice(null);
-    const wasEditing = !!selected;
-    // What the form opened with, so an untouched date or room is not rewritten.
-    const initialDate = selected?.eventDate
-      ? toLocalInput(new Date(selected.eventDate))
-      : "";
-    const initialLocation = selected?.location ?? "";
-    const dateChanged = form.sessionDate !== initialDate;
-    const locationChanged = form.location.trim() !== initialLocation;
-
-    let workshopId: string;
-    try {
-      const fields = {
-        title: form.title.trim(),
-        recordingUrl: form.recordingUrl.trim() || null,
-      };
-      const saved = selected
-        ? await updateWorkshop.mutateAsync({
-            workshopId: selected.id,
-            ...fields,
-          })
-        : await createWorkshop.mutateAsync({
-            ...fields,
-            week: Number(form.week),
-            // The term being viewed, not the live one: adding a week while
-            // filtered to a past cohort must land in that cohort. Undefined
-            // until the officer picks one, which the server reads as current.
-            term,
-          });
-      workshopId = saved.id;
-      // A create followed by a failed upload must retry as an edit; otherwise
-      // the second save collides with the draft row that already succeeded.
-      setSelected({
-        ...saved,
-        eventDate: selected?.eventDate ?? null,
-        location: selected?.location ?? null,
-      });
-    } catch (cause) {
-      setError(
-        `Workshop details were not saved: ${cause instanceof Error ? cause.message : "Unknown error"}`,
-      );
-      setIsSaving(false);
-      return;
-    }
-
-    try {
-      // A blank date on a new row means TBA, not "detach week N's session".
-      if (dateChanged || (locationChanged && form.sessionDate)) {
-        await upsertSession.mutateAsync({
-          workshopId,
-          sessionDate: form.sessionDate ? new Date(form.sessionDate) : null,
-          ...(locationChanged ? { location: form.location.trim() || null } : {}),
-        });
-      }
-      // Session writes affect the material join, attendance views, and every
-      // event list that can expose the new QR-backed club event.
-      await Promise.all([
-        utils.bootcamp.adminWorkshops.invalidate(),
-        utils.bootcamp.workshops.invalidate(),
-        utils.bootcamp.attendance.invalidate(),
-        utils.bootcamp.myProgress.invalidate(),
-        utils.events.listAll.invalidate(),
-        utils.events.list.invalidate(),
-        utils.events.myEvents.invalidate(),
-        utils.events.myStats.invalidate(),
-      ]);
-    } catch (cause) {
-      setError(
-        `Workshop details were saved, but its session event was not: ${cause instanceof Error ? cause.message : "Unknown error"}`,
-      );
-      setIsSaving(false);
-      return;
-    }
-
-    try {
-      if (form.materials) {
-        await upload(workshopId, "materials", form.materials);
-      }
-      if (form.solution) {
-        await upload(workshopId, "solution", form.solution);
-      }
-    } catch (cause) {
-      await utils.bootcamp.adminWorkshops.invalidate();
-      setError(
-        `Workshop details were saved, but a ZIP upload failed: ${cause instanceof Error ? cause.message : "Unknown error"}`,
-      );
-      setIsSaving(false);
-      return;
-    }
-
-    await Promise.all([
-      utils.bootcamp.adminWorkshops.invalidate(),
-      utils.bootcamp.workshops.invalidate(),
-    ]);
-    setNotice(wasEditing ? "Workshop updated." : "Workshop created as a draft.");
-    setIsSaving(false);
-    setModalOpen(false);
-    setSelected(null);
-  };
-
-  const removeFile = async (kind: "materials" | "solution") => {
-    if (!selected) return;
-    setIsSaving(true);
-    setError(null);
-    // A network failure otherwise leaves isSaving set and the modal stuck.
-    const response = await fetch(
-      `/api/bootcamp/materials/${selected.id}/${kind}`,
-      { method: "DELETE" },
-    ).catch(() => null);
-    if (!response?.ok) {
-      const body = (await response?.json().catch(() => null)) as {
-        error?: string;
-      } | null;
-      setError(body?.error ?? `Could not remove ${kind}.`);
-      setIsSaving(false);
-      return;
-    }
-    setSelected({
-      ...selected,
-      ...(kind === "materials"
-        ? {
-            materialsKey: null,
-            materialsFileName: null,
-            materialsSizeBytes: null,
-          }
-        : {
-            solutionKey: null,
-            solutionFileName: null,
-            solutionSizeBytes: null,
-          }),
-    });
-    await utils.bootcamp.adminWorkshops.invalidate();
-    setNotice(`${kind === "materials" ? "Materials" : "Solution"} ZIP removed.`);
-    setIsSaving(false);
-  };
-
-  const deleteWorkshop = async (row: BootcampMaterialRow) => {
-    if (
-      !window.confirm(
-        `Delete week ${row.week}, its metadata, materials ZIP, and solution ZIP? This cannot be undone.`,
-      )
-    ) {
-      return;
-    }
-    setError(null);
-    setNotice(null);
-    const response = await fetch(`/api/bootcamp/materials/${row.id}`, {
-      method: "DELETE",
-    }).catch(() => null);
-    if (!response?.ok) {
-      const body = (await response?.json().catch(() => null)) as {
-        error?: string;
-      } | null;
-      setError(body?.error ?? "Could not delete workshop.");
-      return;
-    }
-    await Promise.all([
-      utils.bootcamp.adminWorkshops.invalidate(),
-      utils.bootcamp.workshops.invalidate(),
-    ]);
-    setNotice(`Week ${row.week} deleted.`);
-  };
-
-  if (status === "loading" || attendance.isPending || workshops.isPending) {
-    return <LoadingScreen message="Loading bootcamp…" />;
-  }
-
-  if (attendance.error || workshops.error) {
-    return (
-      <div className="mx-auto max-w-3xl px-5 py-12 sm:px-8">
-        <p role="alert" className="text-[15px] text-[var(--danger)]">
-          The bootcamp did not load:{" "}
-          {attendance.error?.message ?? workshops.error?.message} Reload the
-          page to try again.
-        </p>
-      </div>
-    );
-  }
-
-  const data = attendance.data;
-  const { sessions, members, stats } = data;
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminBootcampPage from "./AdminBootcampPage";
 
+export default function Page() {
   return (
-    <div className="min-h-screen bg-[var(--bg-primary)] pb-20 text-[var(--text-muted)]">
-      <main className="mx-auto w-full max-w-7xl px-5 py-10 sm:px-8 md:px-12 md:py-14">
-        <header className="flex flex-wrap items-end justify-between gap-6">
-          <div>
-            <p className={kicker}>{termLabel(data.term)}</p>
-            <h1 className={`mt-2 ${adminTitle}`}>Bootcamp</h1>
-            <p className={pageDek}>
-              Who is enrolled, who turned up, and what each week hands out.
-            </p>
-          </div>
-
-          {/* Attendance outlives its semester, so past terms stay reachable. */}
-          {data.terms.length > 1 && (
-            <div className="w-full sm:w-48">
-              <label htmlFor="bootcamp-term" className={fieldLabel}>
-                Term
-              </label>
-              <select
-                id="bootcamp-term"
-                value={data.term}
-                onChange={(event) => setTerm(event.target.value)}
-                className={input}
-              >
-                {data.terms.map((option) => (
-                  <option key={option} value={option}>
-                    {termLabel(option)}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-        </header>
-
-        <dl className="mt-10 grid grid-cols-2 gap-x-6 gap-y-6 border-t border-[var(--border-subtle)] pt-6 sm:grid-cols-4">
-          <Stat label="Enrolled" value={stats.enrolled} />
-          <Stat
-            label="Sessions held"
-            value={`${stats.sessionsHeld}/${stats.sessionsPlanned}`}
-          />
-          <Stat label="Average attendance" value={stats.averageAttendance} />
-          <Stat
-            label="Turnout"
-            value={
-              stats.enrolled && stats.sessionsHeld
-                ? `${Math.round((stats.averageAttendance / stats.enrolled) * 100)}%`
-                : "—"
-            }
-          />
-        </dl>
-
-        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-          <div className="mb-5 flex flex-wrap items-end justify-between gap-4">
-            <div>
-              <h2 className={sectionTitle}>Workshop materials</h2>
-              <p className={`mt-1 ${meta}`}>
-                What members download each week. New weeks start as drafts.
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={() => {
-                setSelected(null);
-                setError(null);
-                setModalOpen(true);
-              }}
-              disabled={readOnly}
-              title={readOnly ? READ_ONLY_TITLE : undefined}
-              className={btnPrimary}
-            >
-              Add workshop
-            </button>
-          </div>
-
-          {error && !modalOpen && (
-            <p role="alert" className="mb-4 text-sm text-[var(--danger)]">
-              {error}
-            </p>
-          )}
-          {notice && (
-            <p className={`mb-4 ${statusDot("success")}`} role="status">
-              {notice}
-            </p>
-          )}
-
-          <BootcampMaterialsTable
-            rows={workshops.data ?? []}
-            term={termLabel(data.term)}
-            isUpdating={setPublished.isPending}
-            onEdit={(row) => {
-              setSelected(row);
-              setError(null);
-              setModalOpen(true);
-            }}
-            onDelete={deleteWorkshop}
-            onSetPublished={async (row, isPublished) => {
-              setError(null);
-              setNotice(null);
-              try {
-                await setPublished.mutateAsync({
-                  workshopId: row.id,
-                  isPublished,
-                });
-                setNotice(
-                  `Week ${row.week} ${isPublished ? "published" : "returned to draft"}.`,
-                );
-              } catch (cause) {
-                setError(
-                  cause instanceof Error
-                    ? cause.message
-                    : "Could not change publication status.",
-                );
-              }
-            }}
-          />
-        </section>
-
-        {members.length > 0 && (
-          <CohortEmails emails={members.map((member) => member.email)} />
-        )}
-
-        {qr.modal}
-        {attendanceFor && (
-          <EventAttendanceModal
-            eventId={attendanceFor.id}
-            eventTitle={attendanceFor.title}
-            onClose={() => setAttendanceFor(null)}
-          />
-        )}
-
-        <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-          <h2 className={sectionTitle}>Session check-in</h2>
-          <p className={`mt-1 ${meta}`}>
-            Show the QR code at the door, then close check-in when the session
-            ends.
-          </p>
-
-          {sessions.length > 0 && (
-            <ul className="mt-5 border-t border-[var(--border-subtle)]">
-              {sessions.map((row) => (
-                <li
-                  key={row.id}
-                  className="flex flex-col gap-3 border-b border-[var(--border-subtle)] py-4 lg:flex-row lg:items-center lg:justify-between"
-                >
-                  <div className="min-w-0">
-                    <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
-                      <span className={`${label} tabular-nums`}>
-                        Week {row.week}
-                      </span>
-                      <span className="text-[17px] font-semibold text-[var(--text-primary)]">
-                        {row.title}
-                      </span>
-                      <span
-                        className={statusDot(
-                          row.checkInEnabled ? "accent" : "neutral",
-                        )}
-                      >
-                        {row.checkInEnabled ? "Check-in open" : "Check-in closed"}
-                      </span>
-                    </div>
-                    <p className={`mt-1 ${meta}`}>
-                      {row.location || "No room set"} ·{" "}
-                      {new Date(row.eventDate).toLocaleDateString()} ·{" "}
-                      <span className="tabular-nums">{row.attendance}</span>{" "}
-                      checked in
-                    </p>
-                  </div>
-
-                  <div className="flex flex-wrap items-center gap-3">
-                    <button
-                      type="button"
-                      onClick={() => void qr.show(row)}
-                      disabled={qr.generatingFor === row.qrCode}
-                      className={`${btnSecondary} min-h-11`}
-                    >
-                      {qr.generatingFor === row.qrCode
-                        ? "Generating…"
-                        : "Show QR code"}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        toggleCheckIn.mutate({
-                          eventId: row.id,
-                          enabled: !row.checkInEnabled,
-                        })
-                      }
-                      disabled={readOnly || toggleCheckIn.isPending}
-                      title={readOnly ? READ_ONLY_TITLE : undefined}
-                      className={`${btnSecondary} min-h-11`}
-                    >
-                      {row.checkInEnabled ? "Close check-in" : "Open check-in"}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setAttendanceFor({ id: row.id, title: row.title })
-                      }
-                      className={`${textLink} min-h-11`}
-                    >
-                      Attendance
-                    </button>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-
-          <h3 className={`mt-10 ${itemTitle}`}>Attendance by member</h3>
-
-          {sessions.length === 0 ? (
-            <p className={`mt-3 max-w-2xl ${body}`}>
-              No sessions are scheduled for {termLabel(data.term)}. Give a
-              workshop a session date under Workshop materials, and its QR code,
-              check-in controls and attendance column appear here.
-            </p>
-          ) : members.length === 0 ? (
-            <p className={`mt-3 max-w-2xl ${body}`}>
-              Nobody has enrolled in this bootcamp yet. Members enrol by adding
-              the bootcamp to their membership payment, and they appear here as
-              soon as it clears.
-            </p>
-          ) : (
-            /* Twelve weeks will not fit a phone; scrolling beats squeezing. */
-            <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">
-                  Bootcamp attendance for {termLabel(data.term)}: one row per
-                  enrolled member, one column per session.
-                </caption>
-                <thead>
-                  <tr className="border-b border-[var(--border-subtle)]">
-                    <th
-                      scope="col"
-                      className={`sticky left-0 z-10 bg-[var(--bg-primary)] pl-0 text-left ${th}`}
-                    >
-                      Member
-                    </th>
-                    {sessions.map((row) => (
-                      <th
-                        key={row.id}
-                        scope="col"
-                        title={`${row.title} · ${row.attendance} checked in`}
-                        className={`text-center tabular-nums ${th}`}
-                      >
-                        W{row.week}
-                      </th>
-                    ))}
-                    <th scope="col" className={`pr-0 text-right ${th}`}>
-                      Total
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {members.map((member) => {
-                    const attended = new Set(member.attendedEventIds);
-                    return (
-                      <tr
-                        key={member.userId}
-                        className="group border-b border-[var(--border-subtle)] transition-colors last:border-b-0 hover:bg-[var(--bg-secondary)]"
-                      >
-                        <th
-                          scope="row"
-                          className="sticky left-0 z-10 bg-[var(--bg-primary)] py-3 pr-3 text-left font-normal transition-colors group-hover:bg-[var(--bg-secondary)]"
-                        >
-                          <span className="block font-semibold text-[var(--text-primary)]">
-                            {member.name}
-                          </span>
-                          <span className="block text-[13px] text-[var(--text-subtle)]">
-                            {member.email}
-                          </span>
-                        </th>
-
-                        {sessions.map((row) => (
-                          <td key={row.id} className="px-3 py-3 text-center">
-                            {attended.has(row.id) ? (
-                              <>
-                                <Check
-                                  aria-hidden="true"
-                                  strokeWidth={1.75}
-                                  className="mx-auto h-4 w-4 text-[var(--success)]"
-                                />
-                                <span className="sr-only">
-                                  Attended week {row.week}
-                                </span>
-                              </>
-                            ) : (
-                              <>
-                                <span aria-hidden="true" className="text-[var(--text-subtle)]">
-                                  ·
-                                </span>
-                                <span className="sr-only">
-                                  {row.past ? "Missed" : "Not held yet"} week{" "}
-                                  {row.week}
-                                </span>
-                              </>
-                            )}
-                          </td>
-                        ))}
-
-                        <td className="py-3 pl-3 text-right font-semibold tabular-nums text-[var(--text-primary)]">
-                          {member.attendedCount}
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-                <tfoot>
-                  <tr className="border-t border-[var(--border-subtle)]">
-                    <th
-                      scope="row"
-                      className={`sticky left-0 z-10 bg-[var(--bg-primary)] pl-0 text-left ${th}`}
-                    >
-                      Checked in
-                    </th>
-                    {sessions.map((row) => (
-                      <td
-                        key={row.id}
-                        className="px-3 py-2.5 text-center text-[13px] tabular-nums text-[var(--text-muted)]"
-                      >
-                        {row.attendance}
-                      </td>
-                    ))}
-                    <td />
-                  </tr>
-                </tfoot>
-              </table>
-            </div>
-          )}
-
-          {sessions.length > 0 && (
-            <p className={`mt-4 max-w-2xl ${meta}`}>
-              A session counts anyone who scanned in, member of this bootcamp or
-              not, so a per-session total can run ahead of the rows above. Fix a
-              wrong check-in from that session&rsquo;s Attendance list.
-            </p>
-          )}
-        </section>
-
-        {modalOpen && (
-          <BootcampWorkshopModal
-            mode={selected ? "edit" : "create"}
-            initial={
-              selected
-                ? {
-                    week: String(selected.week),
-                    title: selected.title,
-                    sessionDate: selected.eventDate
-                      ? toLocalInput(new Date(selected.eventDate))
-                      : "",
-                    location: selected.location ?? "",
-                    recordingUrl: selected.recordingUrl ?? "",
-                    materialsFileName: selected.materialsFileName,
-                    solutionFileName: selected.solutionFileName,
-                  }
-                : undefined
-            }
-            isSubmitting={isSaving}
-            error={error}
-            onRemoveFile={removeFile}
-            onSubmit={saveWorkshop}
-            onClose={() => {
-              if (isSaving) return;
-              setModalOpen(false);
-              setSelected(null);
-              setError(null);
-            }}
-          />
-        )}
-      </main>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["bootcamp.attendance", { term: undefined }, c.bootcamp.attendance({ term: undefined })],
+        ["bootcamp.adminWorkshops", { term: undefined }, c.bootcamp.adminWorkshops({ term: undefined })],
+      ]}
+    >
+      <AdminBootcampPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/AdminHackathonsPage.tsx b/sites/mainweb/app/(portal)/admin/hackathons/AdminHackathonsPage.tsx
new file mode 100644
index 00000000..c184fdb1
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/hackathons/AdminHackathonsPage.tsx
@@ -0,0 +1,160 @@
+"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 { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { adminHackathonPath } from "@/lib/hackathon-slug";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { body, btnPrimary, btnSecondary, pageDek } from "@/components/portal/ui";
+
+// Extracted Components
+
+import { HackathonCard } from "@/components/admin/hackathons/HackathonCard";
+import { CreateHackathonForm } from "@/components/admin/hackathons/CreateHackathonForm";
+import { EditHackathonForm } from "@/components/admin/hackathons/EditHackathonForm";
+import { HackathonBans } from "@/components/admin/hackathons/HackathonBans";
+
+const adminTitle =
+  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]";
+
+export default function AdminHackathonsPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+
+  const [showCreate, setShowCreate] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const {
+    data: hackathons,
+    isLoading,
+    isError,
+    error,
+    refetch,
+  } = trpc.hackathon.listAll.useQuery(
+    undefined,
+    { enabled: !!session },
+  );
+
+  if (status === "loading") return <LoadingScreen message="Loading hackathons…" />;
+  if (status === "unauthenticated") {
+    router.push(loginHref());
+    return null;
+  }
+
+  return (
+    <>
+      <div className="mx-auto w-full max-w-5xl py-4 md:py-8">
+        <header className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h1 className={adminTitle}>Hackathons</h1>
+            <p className={pageDek}>
+              Every edition, its schedule and who has signed up. Open one to
+              review applications, check people in and run judging.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setShowCreate(true)}
+            disabled={readOnly}
+            title={readOnly ? READ_ONLY_TITLE : undefined}
+            className={`shrink-0 self-start sm:self-auto ${btnPrimary}`}
+          >
+            New hackathon
+          </button>
+        </header>
+
+        {showCreate && (
+          <CreateHackathonForm
+            onClose={() => setShowCreate(false)}
+            onCreated={(row) => {
+              setShowCreate(false);
+              utils.hackathon.listAll.invalidate();
+              // Straight into the new edition's dashboard, where its
+              // schedule, applications and judging are set up.
+              router.push(adminHackathonPath(row.name, row.id));
+            }}
+          />
+        )}
+
+        {editingId && (
+          <EditHackathonForm
+            hackathonId={editingId}
+            onClose={() => setEditingId(null)}
+            onSaved={() => {
+              // The form seeds itself from getById; left cached, reopening it
+              // shows the old values and a second save writes them back.
+              utils.hackathon.getById.invalidate({ id: editingId });
+              setEditingId(null);
+              utils.hackathon.listAll.invalidate();
+            }}
+          />
+        )}
+
+        <div className="mt-10">
+          {/* Checked before the skeleton: a failed query leaves data
+              undefined, which used to hold the skeleton up forever. */}
+          {isError ? (
+            <div className="flex flex-col items-start gap-4 border-t border-[var(--border-subtle)] pt-6">
+              <p role="alert" className="text-[15px] text-[var(--danger)]">
+                Couldn&apos;t load hackathons. {error.message}
+              </p>
+              <button
+                type="button"
+                onClick={() => refetch()}
+                className={btnSecondary}
+              >
+                Try again
+              </button>
+            </div>
+          ) : isLoading || hackathons === undefined ? (
+            <div className="space-y-6">
+              {[1, 2, 3].map((n) => (
+                <div
+                  key={n}
+                  className="h-36 animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
+                />
+              ))}
+            </div>
+          ) : hackathons.length === 0 ? (
+            <div className="flex flex-col items-start gap-4 border-t border-[var(--border-subtle)] pt-6">
+              <p className={body}>
+                No hackathons yet. Each edition you create will be listed here.
+              </p>
+              <button
+                type="button"
+                onClick={() => setShowCreate(true)}
+                disabled={readOnly}
+                title={readOnly ? READ_ONLY_TITLE : undefined}
+                className={btnSecondary}
+              >
+                Create the first one
+              </button>
+            </div>
+          ) : (
+            <div className="space-y-8">
+              {hackathons.map((h: NonNullable<typeof hackathons>[number]) => {
+                return (
+                  <HackathonCard
+                    key={h.id}
+                    hackathon={h}
+                    onEdit={() => setEditingId(h.id)}
+                    onStatusChange={(_newStatus) => {
+                      utils.hackathon.listAll.invalidate();
+                    }}
+                  />
+                );
+              })}
+            </div>
+          )}
+
+          <HackathonBans />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/[id]/AdminHackathonPage.tsx b/sites/mainweb/app/(portal)/admin/hackathons/[id]/AdminHackathonPage.tsx
new file mode 100644
index 00000000..cafb6440
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/hackathons/[id]/AdminHackathonPage.tsx
@@ -0,0 +1,327 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
+import {
+  READ_ONLY_TITLE,
+  canViewAdmin,
+  usePortalContext,
+  useReadOnly,
+} from "@/lib/use-portal-context";
+import { useParams, useRouter } from "next/navigation";
+import { useState, useSyncExternalStore } from "react";
+import Link from "next/link";
+import { adminHackathonPath, decodeHackathonParam } from "@/lib/hackathon-slug";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { EditHackathonForm } from "@/components/admin/hackathons/EditHackathonForm";
+import { ScannerTab } from "@/components/admin/hackathons/ScannerTab";
+import { AttendeesTab } from "@/components/admin/hackathons/AttendeesTab";
+import { AnalyticsTab } from "@/components/admin/hackathons/AnalyticsTab";
+import { EventsTab } from "@/components/admin/hackathons/EventsTab";
+import { JudgesTab } from "@/components/admin/hackathons/JudgesTab";
+import { AnnouncementsTab } from "@/components/admin/hackathons/AnnouncementsTab";
+import { PointsAdminTab } from "@/components/admin/hackathons/points/PointsAdminTab";
+import { StoreTab } from "@/components/admin/hackathons/points/StoreTab";
+import {
+  body,
+  btnPrimary,
+  btnSecondary,
+  sectionTitle,
+  tab as tabClass,
+  tabList,
+} from "@/components/portal/ui";
+import {
+  BarChart3,
+  Calendar,
+  Coins,
+  Gavel,
+  Megaphone,
+  ScanLine,
+  Store,
+  Users,
+} from "lucide-react";
+
+const TABS = [
+  "events",
+  "scanner",
+  "attendees",
+  "analytics",
+  "judges",
+  "points",
+  "store",
+  "announcements",
+] as const;
+
+type Tab = (typeof TABS)[number];
+
+// The tab lives in the URL hash, like the judging console: a reload, a pasted
+// link and the schedule links on the hackathons list (#events) land on the
+// tab the organiser meant instead of Applications.
+const subscribeHash = (onChange: () => void) => {
+  window.addEventListener("hashchange", onChange);
+  return () => window.removeEventListener("hashchange", onChange);
+};
+
+function useTab(): Tab {
+  const hash = useSyncExternalStore(
+    subscribeHash,
+    () => window.location.hash.slice(1),
+    () => "",
+  );
+  return TABS.find((t) => t === hash) ?? "attendees";
+}
+
+export default function AdminHackathonDashboard() {
+  const { status } = useSession();
+  const params = useParams();
+  const router = useRouter();
+  const utils = trpc.useUtils();
+  const readOnly = useReadOnly();
+  const rawId = params?.id;
+  const hackathonId = decodeHackathonParam(
+    Array.isArray(rawId) ? (rawId[0] ?? "") : ((rawId as string | undefined) ?? ""),
+  );
+  const activeTab = useTab();
+  const [editing, setEditing] = useState(false);
+
+  const { data: portalContext, isLoading: portalLoading } = usePortalContext();
+  const {
+    data: hackathon,
+    isLoading,
+    error,
+    refetch,
+  } = trpc.hackathon.getById.useQuery(
+    { id: hackathonId },
+    { enabled: !!hackathonId && canViewAdmin(portalContext) },
+  );
+
+  // isLoading is false on the render where the query flips enabled but has not
+  // started fetching, and it is false again once the query has errored. Both
+  // used to fall through to a bare `return null`, which paints the dashboard as
+  // an unexplained black screen instead of a spinner or the actual failure.
+  const settled = !!hackathon || !!error;
+
+  if (status === "loading" || portalLoading) {
+    return <LoadingScreen message="Loading…" />;
+  }
+
+  // Not found rather than a permission error: telling a non-admin that this
+  // edition exists behind a door they cannot open is the whole leak, and the
+  // query is disabled for them anyway, so waiting on it spun forever.
+  if (!canViewAdmin(portalContext)) {
+    return <DashboardUnavailable message="Hackathon not found" />;
+  }
+
+  if (isLoading || !settled) {
+    return <LoadingScreen message="Loading…" />;
+  }
+
+  if (!hackathon) {
+    return (
+      <DashboardUnavailable
+        message={error?.message ?? "Hackathon not found"}
+        onRetry={() => refetch()}
+      />
+    );
+  }
+
+  // A rename moves the dashboard to a new slug and the old one stops
+  // resolving, so follow the row to its new path instead of landing on
+  // "Hackathon not found" the moment the save succeeds.
+  const finishEdit = async () => {
+    setEditing(false);
+    utils.hackathon.listAll.invalidate();
+    try {
+      const fresh = await utils.hackathon.getById.fetch(
+        { id: hackathon.id },
+        { staleTime: 0 },
+      );
+      const next = adminHackathonPath(fresh.name, fresh.id);
+      if (next !== window.location.pathname) {
+        router.replace(`${next}${window.location.hash}`);
+        return;
+      }
+    } catch {
+      // Fall through: the invalidation below surfaces the failure on the page.
+    }
+    utils.hackathon.getById.invalidate();
+  };
+
+  const icon = { className: "w-4 h-4", strokeWidth: 1.75, "aria-hidden": true } as const;
+  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
+    {
+      id: "attendees",
+      label: "Applications",
+      icon: <Users {...icon} />,
+    },
+    {
+      id: "events",
+      label: "Events",
+      icon: <Calendar {...icon} />,
+    },
+    { id: "scanner", label: "Scan", icon: <ScanLine {...icon} /> },
+    {
+      id: "analytics",
+      label: "Stats",
+      icon: <BarChart3 {...icon} />,
+    },
+    { id: "judges", label: "Judges", icon: <Gavel {...icon} /> },
+    { id: "points", label: "Points", icon: <Coins {...icon} /> },
+    { id: "store", label: "Store", icon: <Store {...icon} /> },
+    {
+      id: "announcements",
+      label: "Email",
+      icon: <Megaphone {...icon} />,
+    },
+  ];
+
+  return (
+    <div className="relative min-h-screen bg-[var(--bg-primary)] text-[var(--text-muted)] flex flex-col pb-32 md:pb-12">
+      <header className="relative sticky top-0 z-30 bg-[var(--bg-primary)] border-b border-[var(--border-subtle)] md:border-b-0">
+        <div className="max-w-7xl mx-auto px-4 pt-4 pb-4 md:pb-0">
+          <div className="flex items-end justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <Link
+                href="/admin/hackathons"
+                className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
+                aria-label="Back to hackathons hub"
+              >
+                ← <span className="hidden md:inline">All hackathons</span>
+              </Link>
+              <h1 className="mt-2 truncate font-[family-name:var(--font-display)] text-[28px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
+                {hackathon.name}
+              </h1>
+            </div>
+            <div className="flex flex-wrap items-center gap-2">
+              {["scanner", "attendees"].includes(activeTab) && (
+                // ScannerTab is rendered on this page; there is no
+                // /admin/hackathons/[id]/scanner route to link to.
+                <a href="#scanner" className={btnSecondary}>
+                  <ScanLine className="w-4 h-4 shrink-0" strokeWidth={1.75} aria-hidden="true" />
+                  Scan
+                </a>
+              )}
+              <Link
+                href={`/admin/judging/${hackathon.id}`}
+                className={btnSecondary}
+              >
+                <Gavel className="w-4 h-4 shrink-0" strokeWidth={1.75} aria-hidden="true" />
+                Judging
+              </Link>
+              <button
+                type="button"
+                onClick={() => setEditing(true)}
+                disabled={readOnly}
+                title={readOnly ? READ_ONLY_TITLE : undefined}
+                className={btnSecondary}
+              >
+                Edit
+              </button>
+            </div>
+          </div>
+
+          {/* DESKTOP TABS - Hidden on mobile */}
+          <div className={`hidden md:flex mt-6 ${tabList}`}>
+            {tabs.map((tab) => (
+              <a
+                key={tab.id}
+                href={`#${tab.id}`}
+                aria-current={activeTab === tab.id ? "page" : undefined}
+                className={`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${tabClass(activeTab === tab.id)}`}
+              >
+                {tab.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </header>
+
+      {/* MAIN CONTENT AREA */}
+      <main className="flex-1 px-4 py-6 md:py-8 min-h-[calc(100vh-200px)]">
+        <div className="max-w-7xl mx-auto w-full">
+          {activeTab === "events" && <EventsTab hackathonId={hackathon.id} />}
+          {activeTab === "scanner" && <ScannerTab hackathonId={hackathon.id} />}
+          {activeTab === "attendees" && (
+            <AttendeesTab
+              hackathonId={hackathon.id}
+              hackathonName={hackathon.name}
+              status={hackathon.status}
+            />
+          )}
+          {activeTab === "analytics" && (
+            <AnalyticsTab hackathonId={hackathon.id} />
+          )}
+          {activeTab === "judges" && <JudgesTab hackathonId={hackathon.id} />}
+          {activeTab === "points" && (
+            <PointsAdminTab hackathonId={hackathon.id} />
+          )}
+          {activeTab === "store" && <StoreTab hackathonId={hackathon.id} />}
+          {activeTab === "announcements" && (
+            <AnnouncementsTab
+              hackathonId={hackathon.id}
+              status={hackathon.status}
+            />
+          )}
+        </div>
+      </main>
+
+      {/* MOBILE BOTTOM NAVIGATION */}
+      {/* Scrolls horizontally rather than a fixed 5-column grid: there are
+          eight tabs, so the last ones would be laid out off the right edge of
+          the phone an organiser actually carries — unreachable, with nothing
+          to suggest they existed. */}
+      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-[var(--bg-primary)] border-t border-[var(--border-subtle)] z-40 flex overflow-x-auto pb-safe [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {tabs.map((tab) => (
+          <a
+            key={tab.id}
+            href={`#${tab.id}`}
+            aria-current={activeTab === tab.id ? "page" : undefined}
+            className={`shrink-0 basis-1/5 flex flex-col items-center justify-center gap-1 border-t-2 -mt-px py-3 transition-colors ${
+              activeTab === tab.id
+                ? "border-accent text-[var(--text-primary)] font-semibold"
+                : "border-transparent text-[var(--text-muted)]"
+            }`}
+          >
+            {tab.icon}
+            <span className="text-[12px]">{tab.label}</span>
+          </a>
+        ))}
+      </div>
+
+      {editing && (
+        <EditHackathonForm
+          hackathonId={hackathon.id}
+          onClose={() => setEditing(false)}
+          onSaved={finishEdit}
+        />
+      )}
+    </div>
+  );
+}
+
+function DashboardUnavailable({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry?: () => void;
+}) {
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)] flex items-center justify-center p-6">
+      <div className="w-full max-w-md">
+        <h1 className={sectionTitle}>Hackathon unavailable</h1>
+        <p className={`mt-3 break-words ${body}`}>{message}</p>
+        <div className="mt-8 flex flex-col sm:flex-row gap-3">
+          {onRetry && (
+            <button type="button" onClick={onRetry} className={btnPrimary}>
+              Try again
+            </button>
+          )}
+          <Link href="/admin/hackathons" className={btnSecondary}>
+            Back to hackathons
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx b/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
index cafb6440..ec8ad6e8 100644
--- a/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/hackathons/[id]/page.tsx
@@ -1,327 +1,46 @@
-"use client";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import { decodeHackathonParam } from "@/lib/hackathon-slug";
+import AdminHackathonDashboard from "./AdminHackathonPage";
 
-import { useSession } from "next-auth/react";
-import { trpc } from "@/lib/trpc";
-import {
-  READ_ONLY_TITLE,
-  canViewAdmin,
-  usePortalContext,
-  useReadOnly,
-} from "@/lib/use-portal-context";
-import { useParams, useRouter } from "next/navigation";
-import { useState, useSyncExternalStore } from "react";
-import Link from "next/link";
-import { adminHackathonPath, decodeHackathonParam } from "@/lib/hackathon-slug";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { EditHackathonForm } from "@/components/admin/hackathons/EditHackathonForm";
-import { ScannerTab } from "@/components/admin/hackathons/ScannerTab";
-import { AttendeesTab } from "@/components/admin/hackathons/AttendeesTab";
-import { AnalyticsTab } from "@/components/admin/hackathons/AnalyticsTab";
-import { EventsTab } from "@/components/admin/hackathons/EventsTab";
-import { JudgesTab } from "@/components/admin/hackathons/JudgesTab";
-import { AnnouncementsTab } from "@/components/admin/hackathons/AnnouncementsTab";
-import { PointsAdminTab } from "@/components/admin/hackathons/points/PointsAdminTab";
-import { StoreTab } from "@/components/admin/hackathons/points/StoreTab";
-import {
-  body,
-  btnPrimary,
-  btnSecondary,
-  sectionTitle,
-  tab as tabClass,
-  tabList,
-} from "@/components/portal/ui";
-import {
-  BarChart3,
-  Calendar,
-  Coins,
-  Gavel,
-  Megaphone,
-  ScanLine,
-  Store,
-  Users,
-} from "lucide-react";
+// The Applications tab is what the dashboard opens on; a link to another tab
+// carries it in the hash, which the server never sees, so that tab fetches for
+// itself as before.
+const PAGE_SIZE = 50;
 
-const TABS = [
-  "events",
-  "scanner",
-  "attendees",
-  "analytics",
-  "judges",
-  "points",
-  "store",
-  "announcements",
-] as const;
-
-type Tab = (typeof TABS)[number];
-
-// The tab lives in the URL hash, like the judging console: a reload, a pasted
-// link and the schedule links on the hackathons list (#events) land on the
-// tab the organiser meant instead of Applications.
-const subscribeHash = (onChange: () => void) => {
-  window.addEventListener("hashchange", onChange);
-  return () => window.removeEventListener("hashchange", onChange);
-};
-
-function useTab(): Tab {
-  const hash = useSyncExternalStore(
-    subscribeHash,
-    () => window.location.hash.slice(1),
-    () => "",
-  );
-  return TABS.find((t) => t === hash) ?? "attendees";
-}
-
-export default function AdminHackathonDashboard() {
-  const { status } = useSession();
-  const params = useParams();
-  const router = useRouter();
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-  const rawId = params?.id;
-  const hackathonId = decodeHackathonParam(
-    Array.isArray(rawId) ? (rawId[0] ?? "") : ((rawId as string | undefined) ?? ""),
-  );
-  const activeTab = useTab();
-  const [editing, setEditing] = useState(false);
-
-  const { data: portalContext, isLoading: portalLoading } = usePortalContext();
-  const {
-    data: hackathon,
-    isLoading,
-    error,
-    refetch,
-  } = trpc.hackathon.getById.useQuery(
-    { id: hackathonId },
-    { enabled: !!hackathonId && canViewAdmin(portalContext) },
-  );
-
-  // isLoading is false on the render where the query flips enabled but has not
-  // started fetching, and it is false again once the query has errored. Both
-  // used to fall through to a bare `return null`, which paints the dashboard as
-  // an unexplained black screen instead of a spinner or the actual failure.
-  const settled = !!hackathon || !!error;
-
-  if (status === "loading" || portalLoading) {
-    return <LoadingScreen message="Loading…" />;
-  }
-
-  // Not found rather than a permission error: telling a non-admin that this
-  // edition exists behind a door they cannot open is the whole leak, and the
-  // query is disabled for them anyway, so waiting on it spun forever.
-  if (!canViewAdmin(portalContext)) {
-    return <DashboardUnavailable message="Hackathon not found" />;
-  }
-
-  if (isLoading || !settled) {
-    return <LoadingScreen message="Loading…" />;
-  }
-
-  if (!hackathon) {
-    return (
-      <DashboardUnavailable
-        message={error?.message ?? "Hackathon not found"}
-        onRetry={() => refetch()}
-      />
-    );
-  }
-
-  // A rename moves the dashboard to a new slug and the old one stops
-  // resolving, so follow the row to its new path instead of landing on
-  // "Hackathon not found" the moment the save succeeds.
-  const finishEdit = async () => {
-    setEditing(false);
-    utils.hackathon.listAll.invalidate();
-    try {
-      const fresh = await utils.hackathon.getById.fetch(
-        { id: hackathon.id },
-        { staleTime: 0 },
-      );
-      const next = adminHackathonPath(fresh.name, fresh.id);
-      if (next !== window.location.pathname) {
-        router.replace(`${next}${window.location.hash}`);
-        return;
-      }
-    } catch {
-      // Fall through: the invalidation below surfaces the failure on the page.
-    }
-    utils.hackathon.getById.invalidate();
-  };
-
-  const icon = { className: "w-4 h-4", strokeWidth: 1.75, "aria-hidden": true } as const;
-  const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
-    {
-      id: "attendees",
-      label: "Applications",
-      icon: <Users {...icon} />,
-    },
-    {
-      id: "events",
-      label: "Events",
-      icon: <Calendar {...icon} />,
-    },
-    { id: "scanner", label: "Scan", icon: <ScanLine {...icon} /> },
-    {
-      id: "analytics",
-      label: "Stats",
-      icon: <BarChart3 {...icon} />,
-    },
-    { id: "judges", label: "Judges", icon: <Gavel {...icon} /> },
-    { id: "points", label: "Points", icon: <Coins {...icon} /> },
-    { id: "store", label: "Store", icon: <Store {...icon} /> },
-    {
-      id: "announcements",
-      label: "Email",
-      icon: <Megaphone {...icon} />,
-    },
-  ];
-
-  return (
-    <div className="relative min-h-screen bg-[var(--bg-primary)] text-[var(--text-muted)] flex flex-col pb-32 md:pb-12">
-      <header className="relative sticky top-0 z-30 bg-[var(--bg-primary)] border-b border-[var(--border-subtle)] md:border-b-0">
-        <div className="max-w-7xl mx-auto px-4 pt-4 pb-4 md:pb-0">
-          <div className="flex items-end justify-between gap-4">
-            <div className="flex-1 min-w-0">
-              <Link
-                href="/admin/hackathons"
-                className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
-                aria-label="Back to hackathons hub"
-              >
-                ← <span className="hidden md:inline">All hackathons</span>
-              </Link>
-              <h1 className="mt-2 truncate font-[family-name:var(--font-display)] text-[28px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
-                {hackathon.name}
-              </h1>
-            </div>
-            <div className="flex flex-wrap items-center gap-2">
-              {["scanner", "attendees"].includes(activeTab) && (
-                // ScannerTab is rendered on this page; there is no
-                // /admin/hackathons/[id]/scanner route to link to.
-                <a href="#scanner" className={btnSecondary}>
-                  <ScanLine className="w-4 h-4 shrink-0" strokeWidth={1.75} aria-hidden="true" />
-                  Scan
-                </a>
-              )}
-              <Link
-                href={`/admin/judging/${hackathon.id}`}
-                className={btnSecondary}
-              >
-                <Gavel className="w-4 h-4 shrink-0" strokeWidth={1.75} aria-hidden="true" />
-                Judging
-              </Link>
-              <button
-                type="button"
-                onClick={() => setEditing(true)}
-                disabled={readOnly}
-                title={readOnly ? READ_ONLY_TITLE : undefined}
-                className={btnSecondary}
-              >
-                Edit
-              </button>
-            </div>
-          </div>
-
-          {/* DESKTOP TABS - Hidden on mobile */}
-          <div className={`hidden md:flex mt-6 ${tabList}`}>
-            {tabs.map((tab) => (
-              <a
-                key={tab.id}
-                href={`#${tab.id}`}
-                aria-current={activeTab === tab.id ? "page" : undefined}
-                className={`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${tabClass(activeTab === tab.id)}`}
-              >
-                {tab.label}
-              </a>
-            ))}
-          </div>
-        </div>
-      </header>
-
-      {/* MAIN CONTENT AREA */}
-      <main className="flex-1 px-4 py-6 md:py-8 min-h-[calc(100vh-200px)]">
-        <div className="max-w-7xl mx-auto w-full">
-          {activeTab === "events" && <EventsTab hackathonId={hackathon.id} />}
-          {activeTab === "scanner" && <ScannerTab hackathonId={hackathon.id} />}
-          {activeTab === "attendees" && (
-            <AttendeesTab
-              hackathonId={hackathon.id}
-              hackathonName={hackathon.name}
-              status={hackathon.status}
-            />
-          )}
-          {activeTab === "analytics" && (
-            <AnalyticsTab hackathonId={hackathon.id} />
-          )}
-          {activeTab === "judges" && <JudgesTab hackathonId={hackathon.id} />}
-          {activeTab === "points" && (
-            <PointsAdminTab hackathonId={hackathon.id} />
-          )}
-          {activeTab === "store" && <StoreTab hackathonId={hackathon.id} />}
-          {activeTab === "announcements" && (
-            <AnnouncementsTab
-              hackathonId={hackathon.id}
-              status={hackathon.status}
-            />
-          )}
-        </div>
-      </main>
-
-      {/* MOBILE BOTTOM NAVIGATION */}
-      {/* Scrolls horizontally rather than a fixed 5-column grid: there are
-          eight tabs, so the last ones would be laid out off the right edge of
-          the phone an organiser actually carries — unreachable, with nothing
-          to suggest they existed. */}
-      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-[var(--bg-primary)] border-t border-[var(--border-subtle)] z-40 flex overflow-x-auto pb-safe [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        {tabs.map((tab) => (
-          <a
-            key={tab.id}
-            href={`#${tab.id}`}
-            aria-current={activeTab === tab.id ? "page" : undefined}
-            className={`shrink-0 basis-1/5 flex flex-col items-center justify-center gap-1 border-t-2 -mt-px py-3 transition-colors ${
-              activeTab === tab.id
-                ? "border-accent text-[var(--text-primary)] font-semibold"
-                : "border-transparent text-[var(--text-muted)]"
-            }`}
-          >
-            {tab.icon}
-            <span className="text-[12px]">{tab.label}</span>
-          </a>
-        ))}
-      </div>
-
-      {editing && (
-        <EditHackathonForm
-          hackathonId={hackathon.id}
-          onClose={() => setEditing(false)}
-          onSaved={finishEdit}
-        />
-      )}
-    </div>
-  );
-}
-
-function DashboardUnavailable({
-  message,
-  onRetry,
+export default async function Page({
+  params,
 }: {
-  message: string;
-  onRetry?: () => void;
+  params: Promise<{ id: string }>;
 }) {
+  const id = decodeHackathonParam((await params).id);
   return (
-    <div className="min-h-screen bg-[var(--bg-primary)] flex items-center justify-center p-6">
-      <div className="w-full max-w-md">
-        <h1 className={sectionTitle}>Hackathon unavailable</h1>
-        <p className={`mt-3 break-words ${body}`}>{message}</p>
-        <div className="mt-8 flex flex-col sm:flex-row gap-3">
-          {onRetry && (
-            <button type="button" onClick={onRetry} className={btnPrimary}>
-              Try again
-            </button>
-          )}
-          <Link href="/admin/hackathons" className={btnSecondary}>
-            Back to hackathons
-          </Link>
-        </div>
-      </div>
-    </div>
+    <PrefetchedPage
+      reads={async (c) => {
+        const hackathon = c.hackathon.getById({ id });
+        const found = await hackathon.catch(() => null);
+        if (!found) return [["hackathon.getById", { id }, hackathon]];
+        const hackathonId = found.id;
+        return [
+          ["hackathon.getById", { id }, hackathon],
+          ["hackathon.getById", { id: hackathonId }, hackathon],
+          [
+            "hackathon.adminGetAttendees",
+            { hackathonId, limit: PAGE_SIZE, offset: 0 },
+            c.hackathon.adminGetAttendees({
+              hackathonId,
+              limit: PAGE_SIZE,
+              offset: 0,
+            }),
+          ],
+          [
+            "hackathon.analytics",
+            { hackathonId },
+            c.hackathon.analytics({ hackathonId }),
+          ],
+        ];
+      }}
+    >
+      <AdminHackathonDashboard />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/hackathons/page.tsx b/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
index c184fdb1..7c654d88 100644
--- a/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/hackathons/page.tsx
@@ -1,160 +1,15 @@
-"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 { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { adminHackathonPath } from "@/lib/hackathon-slug";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { body, btnPrimary, btnSecondary, pageDek } from "@/components/portal/ui";
-
-// Extracted Components
-
-import { HackathonCard } from "@/components/admin/hackathons/HackathonCard";
-import { CreateHackathonForm } from "@/components/admin/hackathons/CreateHackathonForm";
-import { EditHackathonForm } from "@/components/admin/hackathons/EditHackathonForm";
-import { HackathonBans } from "@/components/admin/hackathons/HackathonBans";
-
-const adminTitle =
-  "font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]";
-
-export default function AdminHackathonsPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  const utils = trpc.useUtils();
-  const readOnly = useReadOnly();
-
-  const [showCreate, setShowCreate] = useState(false);
-  const [editingId, setEditingId] = useState<string | null>(null);
-
-  const {
-    data: hackathons,
-    isLoading,
-    isError,
-    error,
-    refetch,
-  } = trpc.hackathon.listAll.useQuery(
-    undefined,
-    { enabled: !!session },
-  );
-
-  if (status === "loading") return <LoadingScreen message="Loading hackathons…" />;
-  if (status === "unauthenticated") {
-    router.push(loginHref());
-    return null;
-  }
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminHackathonsPage from "./AdminHackathonsPage";
 
+export default function Page() {
   return (
-    <>
-      <div className="mx-auto w-full max-w-5xl py-4 md:py-8">
-        <header className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
-          <div>
-            <h1 className={adminTitle}>Hackathons</h1>
-            <p className={pageDek}>
-              Every edition, its schedule and who has signed up. Open one to
-              review applications, check people in and run judging.
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={() => setShowCreate(true)}
-            disabled={readOnly}
-            title={readOnly ? READ_ONLY_TITLE : undefined}
-            className={`shrink-0 self-start sm:self-auto ${btnPrimary}`}
-          >
-            New hackathon
-          </button>
-        </header>
-
-        {showCreate && (
-          <CreateHackathonForm
-            onClose={() => setShowCreate(false)}
-            onCreated={(row) => {
-              setShowCreate(false);
-              utils.hackathon.listAll.invalidate();
-              // Straight into the new edition's dashboard, where its
-              // schedule, applications and judging are set up.
-              router.push(adminHackathonPath(row.name, row.id));
-            }}
-          />
-        )}
-
-        {editingId && (
-          <EditHackathonForm
-            hackathonId={editingId}
-            onClose={() => setEditingId(null)}
-            onSaved={() => {
-              // The form seeds itself from getById; left cached, reopening it
-              // shows the old values and a second save writes them back.
-              utils.hackathon.getById.invalidate({ id: editingId });
-              setEditingId(null);
-              utils.hackathon.listAll.invalidate();
-            }}
-          />
-        )}
-
-        <div className="mt-10">
-          {/* Checked before the skeleton: a failed query leaves data
-              undefined, which used to hold the skeleton up forever. */}
-          {isError ? (
-            <div className="flex flex-col items-start gap-4 border-t border-[var(--border-subtle)] pt-6">
-              <p role="alert" className="text-[15px] text-[var(--danger)]">
-                Couldn&apos;t load hackathons. {error.message}
-              </p>
-              <button
-                type="button"
-                onClick={() => refetch()}
-                className={btnSecondary}
-              >
-                Try again
-              </button>
-            </div>
-          ) : isLoading || hackathons === undefined ? (
-            <div className="space-y-6">
-              {[1, 2, 3].map((n) => (
-                <div
-                  key={n}
-                  className="h-36 animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
-                />
-              ))}
-            </div>
-          ) : hackathons.length === 0 ? (
-            <div className="flex flex-col items-start gap-4 border-t border-[var(--border-subtle)] pt-6">
-              <p className={body}>
-                No hackathons yet. Each edition you create will be listed here.
-              </p>
-              <button
-                type="button"
-                onClick={() => setShowCreate(true)}
-                disabled={readOnly}
-                title={readOnly ? READ_ONLY_TITLE : undefined}
-                className={btnSecondary}
-              >
-                Create the first one
-              </button>
-            </div>
-          ) : (
-            <div className="space-y-8">
-              {hackathons.map((h: NonNullable<typeof hackathons>[number]) => {
-                return (
-                  <HackathonCard
-                    key={h.id}
-                    hackathon={h}
-                    onEdit={() => setEditingId(h.id)}
-                    onStatusChange={(_newStatus) => {
-                      utils.hackathon.listAll.invalidate();
-                    }}
-                  />
-                );
-              })}
-            </div>
-          )}
-
-          <HackathonBans />
-        </div>
-      </div>
-    </>
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.listAll", undefined, c.hackathon.listAll()],
+        ["hackathon.listBans", undefined, c.hackathon.listBans()],
+      ]}
+    >
+      <AdminHackathonsPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/judging/AdminJudgingPage.tsx b/sites/mainweb/app/(portal)/admin/judging/AdminJudgingPage.tsx
new file mode 100644
index 00000000..8917f061
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/judging/AdminJudgingPage.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { venueFormat } from "@/lib/venue-time";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { trpc } from "@/lib/trpc";
+import { hackathonStatus } from "@/lib/hackathon-status";
+import {
+  body,
+  itemTitle,
+  meta,
+  pageDek,
+  sectionRule,
+  status,
+  textLink,
+} from "@/components/portal/ui";
+
+// Judging is run per edition. AdminLayout gates this page to staff.
+export default function AdminJudgingPage() {
+  const { data: hackathons, isLoading, isError, refetch } =
+    trpc.hackathon.list.useQuery({ limit: 50 });
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      <header className="mb-8">
+        <h1 className="font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
+          Judging
+        </h1>
+        <p className={pageDek}>
+          Pick an edition to open its judging console: projects, challenges,
+          rooms, the schedule, launch and results. Each edition&apos;s judge
+          roster is on its hackathon page, under Judges.
+        </p>
+      </header>
+
+      <section className={sectionRule}>
+        {isLoading ? (
+          <p className={body}>Loading editions…</p>
+        ) : isError ? (
+          <p className={body}>
+            Could not load the editions.{" "}
+            <button
+              type="button"
+              onClick={() => refetch()}
+              className={textLink}
+            >
+              Try again
+            </button>
+          </p>
+        ) : !hackathons || hackathons.length === 0 ? (
+          <p className={body}>
+            No editions yet. Create one from{" "}
+            <Link
+              href="/admin/hackathons"
+              className={textLink}
+            >
+              Hackathons
+            </Link>{" "}
+            first.
+          </p>
+        ) : (
+          <ul className="border-t border-[var(--border-subtle)]">
+            {hackathons.map((h) => {
+              const conf = hackathonStatus(h.status);
+              return (
+                <li key={h.id} className="border-b border-[var(--border-subtle)]">
+                  <Link
+                    href={`/admin/judging/${h.id}`}
+                    className="flex items-center gap-4 py-4 min-h-11 hover:bg-[var(--bg-secondary)] transition-colors"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <p className={`${itemTitle} truncate`}>{h.name}</p>
+                      <p className={`mt-1 ${meta}`}>
+                        <span className={status(conf.tone)}>{conf.label}</span>
+                        {" · "}
+                        {venueFormat(h.startDate, {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                        })}
+                      </p>
+                    </div>
+                    <ChevronRight
+                      className="h-4 w-4 shrink-0 text-[var(--text-subtle)]"
+                      strokeWidth={1.75}
+                      aria-hidden="true"
+                    />
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/AdminEditionJudgingPage.tsx b/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/AdminEditionJudgingPage.tsx
new file mode 100644
index 00000000..7a1dc58b
--- /dev/null
+++ b/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/AdminEditionJudgingPage.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { trpc } from "@/lib/trpc";
+import { trpcErrorMessage } from "@/lib/trpc-error";
+import {
+  body,
+  btnSecondary,
+  kicker,
+  meta,
+  status,
+  tab,
+  tabList,
+} from "@/components/portal/ui";
+import type { Tone } from "@/components/portal/ui";
+import {
+  OFFICER_POLL_MS,
+  SECTIONS,
+  plural,
+  stationCount,
+} from "@/components/admin/judging/shared";
+import type { Overview, SectionId } from "@/components/admin/judging/shared";
+import { ChecklistSection } from "@/components/admin/judging/ChecklistSection";
+import { ProjectsSection } from "@/components/admin/judging/ProjectsSection";
+import { ChallengesSection } from "@/components/admin/judging/ChallengesSection";
+import { RoomsSection } from "@/components/admin/judging/RoomsSection";
+import { RubricSection } from "@/components/admin/judging/RubricSection";
+import { LaunchSection } from "@/components/admin/judging/LaunchSection";
+import { AnnouncementsSection } from "@/components/admin/judging/AnnouncementsSection";
+import { RepoCheckSection } from "@/components/admin/judging/RepoCheckSection";
+import { DangerZone } from "@/components/admin/judging/DangerZone";
+import { ScheduleTab as JudgingSchedule } from "@/components/admin/judging/schedule/ScheduleTab";
+import { ClaimsPanel as JudgingClaims } from "@/components/admin/judging/claims/ClaimsPanel";
+import { ResultsTab as JudgingResults } from "@/components/admin/judging/results/ResultsTab";
+
+// One edition's judging console. The section lives in the URL hash so the
+// checklist can link straight to the part that needs work and a reload keeps
+// the organiser where they were. AdminLayout gates this page to staff.
+
+const subscribeHash = (onChange: () => void) => {
+  window.addEventListener("hashchange", onChange);
+  return () => window.removeEventListener("hashchange", onChange);
+};
+
+function useSection(): SectionId {
+  const hash = useSyncExternalStore(
+    subscribeHash,
+    () => window.location.hash.slice(1),
+    () => "",
+  );
+  return SECTIONS.find((s) => s.id === hash)?.id ?? "checklist";
+}
+
+const STATE: Record<Overview["config"]["state"], { label: string; tone: Tone }> =
+  {
+    draft: { label: "Draft", tone: "neutral" },
+    open: { label: "Open", tone: "success" },
+    closed: { label: "Closed", tone: "warning" },
+  };
+
+export default function AdminEditionJudgingPage() {
+  const params = useParams<{ hackathonId: string }>();
+  const hackathonId = params?.hackathonId ?? "";
+  const section = useSection();
+
+  const overview = trpc.judging.admin.overview.useQuery(
+    { hackathonId },
+    { enabled: !!hackathonId, refetchInterval: OFFICER_POLL_MS },
+  );
+
+  // Switching from far down a long section leaves the new one scrolled out of
+  // sight on a phone; bring its top back into view.
+  const contentRef = useRef<HTMLDivElement>(null);
+  const shown = useRef(section);
+  useEffect(() => {
+    if (shown.current === section) return;
+    shown.current = section;
+    const top = contentRef.current?.getBoundingClientRect().top ?? 0;
+    if (top < 0) contentRef.current?.scrollIntoView({ block: "start" });
+  }, [section]);
+
+  const data = overview.data;
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <Link
+        href="/admin/judging"
+        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
+      >
+        ← All editions
+      </Link>
+      <header className="mt-4 mb-8">
+        {data && <p className={`${kicker} mb-2`}>{data.hackathon.name}</p>}
+        <h1 className="font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
+          Judging
+        </h1>
+        {data ? (
+          <p
+            className={`mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 ${meta}`}
+          >
+            <span className={status(STATE[data.config.state].tone)}>
+              Judging {STATE[data.config.state].label.toLowerCase()}
+            </span>
+            <span>
+              {plural(
+                data.counts.entries.devpost + data.counts.entries.portal,
+                "project",
+              )}
+            </span>
+            <span>
+              {stationCount(data.counts.rooms.active, data.counts.rooms.tables)}
+            </span>
+            <span>{plural(data.counts.judgesSeated, "judge")} seated</span>
+            {data.counts.checkInFlags.open > 0 && (
+              <span className={status("warning")}>
+                {plural(data.counts.checkInFlags.open, "open check-in flag")}
+              </span>
+            )}
+            {data.config.emergencyMode && (
+              <span className={status("danger")}>Emergency mode on</span>
+            )}
+          </p>
+        ) : null}
+      </header>
+
+      {overview.isLoading ? (
+        <p className={body}>Loading the edition…</p>
+      ) : overview.isError || !data ? (
+        <div className="space-y-4">
+          <p className={body}>
+            {trpcErrorMessage(overview.error, "Could not load this edition.")}
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <button
+              type="button"
+              onClick={() => overview.refetch()}
+              className={btnSecondary}
+            >
+              Try again
+            </button>
+            <Link href="/admin/judging" className={btnSecondary}>
+              Pick another edition
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <div className="lg:grid lg:grid-cols-[200px_minmax(0,1fr)] lg:gap-12">
+          <nav aria-label="Judging console">
+            <div className={`lg:hidden mb-8 ${tabList}`}>
+              {SECTIONS.map((s) => (
+                <a
+                  key={s.id}
+                  href={`#${s.id}`}
+                  aria-current={section === s.id ? "page" : undefined}
+                  className={tab(section === s.id)}
+                >
+                  {s.label}
+                </a>
+              ))}
+            </div>
+            <ul className="hidden lg:block sticky top-6 border-l border-[var(--border-subtle)]">
+              {SECTIONS.map((s) => (
+                <li key={s.id}>
+                  <a
+                    href={`#${s.id}`}
+                    aria-current={section === s.id ? "page" : undefined}
+                    className={`-ml-px flex min-h-9 items-center border-l-2 pl-4 text-sm transition-colors ${
+                      section === s.id
+                        ? "border-accent font-semibold text-[var(--text-primary)]"
+                        : "border-transparent text-[var(--text-muted)] hover:text-[var(--text-primary)]"
+                    }`}
+                  >
+                    {s.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <div ref={contentRef} className="min-w-0 scroll-mt-6">
+            {section === "checklist" && (
+              <ChecklistSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "projects" && (
+              <ProjectsSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "challenges" && (
+              <ChallengesSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "rooms" && (
+              <RoomsSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "rubric" && <RubricSection hackathonId={hackathonId} />}
+            {section === "launch" && (
+              <LaunchSection hackathonId={hackathonId} overview={data} />
+            )}
+            {section === "schedule" && (
+              <JudgingSchedule hackathonId={hackathonId} />
+            )}
+            {section === "claims" && <JudgingClaims hackathonId={hackathonId} />}
+            {section === "results" && (
+              <JudgingResults hackathonId={hackathonId} />
+            )}
+            {section === "repo-check" && (
+              <RepoCheckSection hackathonId={hackathonId} />
+            )}
+            {section === "announcements" && (
+              <AnnouncementsSection hackathonId={hackathonId} />
+            )}
+            {section === "danger" && (
+              <DangerZone hackathonId={hackathonId} overview={data} />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/page.tsx b/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/page.tsx
index 7a1dc58b..0e9928cb 100644
--- a/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/judging/[hackathonId]/page.tsx
@@ -1,220 +1,28 @@
-"use client";
-
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { useEffect, useRef, useSyncExternalStore } from "react";
-import { trpc } from "@/lib/trpc";
-import { trpcErrorMessage } from "@/lib/trpc-error";
-import {
-  body,
-  btnSecondary,
-  kicker,
-  meta,
-  status,
-  tab,
-  tabList,
-} from "@/components/portal/ui";
-import type { Tone } from "@/components/portal/ui";
-import {
-  OFFICER_POLL_MS,
-  SECTIONS,
-  plural,
-  stationCount,
-} from "@/components/admin/judging/shared";
-import type { Overview, SectionId } from "@/components/admin/judging/shared";
-import { ChecklistSection } from "@/components/admin/judging/ChecklistSection";
-import { ProjectsSection } from "@/components/admin/judging/ProjectsSection";
-import { ChallengesSection } from "@/components/admin/judging/ChallengesSection";
-import { RoomsSection } from "@/components/admin/judging/RoomsSection";
-import { RubricSection } from "@/components/admin/judging/RubricSection";
-import { LaunchSection } from "@/components/admin/judging/LaunchSection";
-import { AnnouncementsSection } from "@/components/admin/judging/AnnouncementsSection";
-import { RepoCheckSection } from "@/components/admin/judging/RepoCheckSection";
-import { DangerZone } from "@/components/admin/judging/DangerZone";
-import { ScheduleTab as JudgingSchedule } from "@/components/admin/judging/schedule/ScheduleTab";
-import { ClaimsPanel as JudgingClaims } from "@/components/admin/judging/claims/ClaimsPanel";
-import { ResultsTab as JudgingResults } from "@/components/admin/judging/results/ResultsTab";
-
-// One edition's judging console. The section lives in the URL hash so the
-// checklist can link straight to the part that needs work and a reload keeps
-// the organiser where they were. AdminLayout gates this page to staff.
-
-const subscribeHash = (onChange: () => void) => {
-  window.addEventListener("hashchange", onChange);
-  return () => window.removeEventListener("hashchange", onChange);
-};
-
-function useSection(): SectionId {
-  const hash = useSyncExternalStore(
-    subscribeHash,
-    () => window.location.hash.slice(1),
-    () => "",
-  );
-  return SECTIONS.find((s) => s.id === hash)?.id ?? "checklist";
-}
-
-const STATE: Record<Overview["config"]["state"], { label: string; tone: Tone }> =
-  {
-    draft: { label: "Draft", tone: "neutral" },
-    open: { label: "Open", tone: "success" },
-    closed: { label: "Closed", tone: "warning" },
-  };
-
-export default function AdminEditionJudgingPage() {
-  const params = useParams<{ hackathonId: string }>();
-  const hackathonId = params?.hackathonId ?? "";
-  const section = useSection();
-
-  const overview = trpc.judging.admin.overview.useQuery(
-    { hackathonId },
-    { enabled: !!hackathonId, refetchInterval: OFFICER_POLL_MS },
-  );
-
-  // Switching from far down a long section leaves the new one scrolled out of
-  // sight on a phone; bring its top back into view.
-  const contentRef = useRef<HTMLDivElement>(null);
-  const shown = useRef(section);
-  useEffect(() => {
-    if (shown.current === section) return;
-    shown.current = section;
-    const top = contentRef.current?.getBoundingClientRect().top ?? 0;
-    if (top < 0) contentRef.current?.scrollIntoView({ block: "start" });
-  }, [section]);
-
-  const data = overview.data;
-
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminEditionJudgingPage from "./AdminEditionJudgingPage";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ hackathonId: string }>;
+}) {
+  const { hackathonId } = await params;
   return (
-    <div className="max-w-6xl mx-auto">
-      <Link
-        href="/admin/judging"
-        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
-      >
-        ← All editions
-      </Link>
-      <header className="mt-4 mb-8">
-        {data && <p className={`${kicker} mb-2`}>{data.hackathon.name}</p>}
-        <h1 className="font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
-          Judging
-        </h1>
-        {data ? (
-          <p
-            className={`mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 ${meta}`}
-          >
-            <span className={status(STATE[data.config.state].tone)}>
-              Judging {STATE[data.config.state].label.toLowerCase()}
-            </span>
-            <span>
-              {plural(
-                data.counts.entries.devpost + data.counts.entries.portal,
-                "project",
-              )}
-            </span>
-            <span>
-              {stationCount(data.counts.rooms.active, data.counts.rooms.tables)}
-            </span>
-            <span>{plural(data.counts.judgesSeated, "judge")} seated</span>
-            {data.counts.checkInFlags.open > 0 && (
-              <span className={status("warning")}>
-                {plural(data.counts.checkInFlags.open, "open check-in flag")}
-              </span>
-            )}
-            {data.config.emergencyMode && (
-              <span className={status("danger")}>Emergency mode on</span>
-            )}
-          </p>
-        ) : null}
-      </header>
-
-      {overview.isLoading ? (
-        <p className={body}>Loading the edition…</p>
-      ) : overview.isError || !data ? (
-        <div className="space-y-4">
-          <p className={body}>
-            {trpcErrorMessage(overview.error, "Could not load this edition.")}
-          </p>
-          <div className="flex flex-wrap gap-3">
-            <button
-              type="button"
-              onClick={() => overview.refetch()}
-              className={btnSecondary}
-            >
-              Try again
-            </button>
-            <Link href="/admin/judging" className={btnSecondary}>
-              Pick another edition
-            </Link>
-          </div>
-        </div>
-      ) : (
-        <div className="lg:grid lg:grid-cols-[200px_minmax(0,1fr)] lg:gap-12">
-          <nav aria-label="Judging console">
-            <div className={`lg:hidden mb-8 ${tabList}`}>
-              {SECTIONS.map((s) => (
-                <a
-                  key={s.id}
-                  href={`#${s.id}`}
-                  aria-current={section === s.id ? "page" : undefined}
-                  className={tab(section === s.id)}
-                >
-                  {s.label}
-                </a>
-              ))}
-            </div>
-            <ul className="hidden lg:block sticky top-6 border-l border-[var(--border-subtle)]">
-              {SECTIONS.map((s) => (
-                <li key={s.id}>
-                  <a
-                    href={`#${s.id}`}
-                    aria-current={section === s.id ? "page" : undefined}
-                    className={`-ml-px flex min-h-9 items-center border-l-2 pl-4 text-sm transition-colors ${
-                      section === s.id
-                        ? "border-accent font-semibold text-[var(--text-primary)]"
-                        : "border-transparent text-[var(--text-muted)] hover:text-[var(--text-primary)]"
-                    }`}
-                  >
-                    {s.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-
-          <div ref={contentRef} className="min-w-0 scroll-mt-6">
-            {section === "checklist" && (
-              <ChecklistSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "projects" && (
-              <ProjectsSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "challenges" && (
-              <ChallengesSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "rooms" && (
-              <RoomsSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "rubric" && <RubricSection hackathonId={hackathonId} />}
-            {section === "launch" && (
-              <LaunchSection hackathonId={hackathonId} overview={data} />
-            )}
-            {section === "schedule" && (
-              <JudgingSchedule hackathonId={hackathonId} />
-            )}
-            {section === "claims" && <JudgingClaims hackathonId={hackathonId} />}
-            {section === "results" && (
-              <JudgingResults hackathonId={hackathonId} />
-            )}
-            {section === "repo-check" && (
-              <RepoCheckSection hackathonId={hackathonId} />
-            )}
-            {section === "announcements" && (
-              <AnnouncementsSection hackathonId={hackathonId} />
-            )}
-            {section === "danger" && (
-              <DangerZone hackathonId={hackathonId} overview={data} />
-            )}
-          </div>
-        </div>
-      )}
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        [
+          "judging.admin.overview",
+          { hackathonId },
+          c.judging.admin.overview({ hackathonId }),
+        ],
+        [
+          "judging.admin.checklist",
+          { hackathonId },
+          c.judging.admin.checklist({ hackathonId }),
+        ],
+      ]}
+    >
+      <AdminEditionJudgingPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/judging/page.tsx b/sites/mainweb/app/(portal)/admin/judging/page.tsx
index c025fada..84ddf649 100644
--- a/sites/mainweb/app/(portal)/admin/judging/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/judging/page.tsx
@@ -1,96 +1,14 @@
-"use client";
-
-import Link from "next/link";
-import { ChevronRight } from "lucide-react";
-import { trpc } from "@/lib/trpc";
-import { hackathonStatus } from "@/lib/hackathon-status";
-import {
-  body,
-  itemTitle,
-  meta,
-  pageDek,
-  sectionRule,
-  status,
-  textLink,
-} from "@/components/portal/ui";
-
-// Judging is run per edition. AdminLayout gates this page to staff.
-export default function AdminJudgingPage() {
-  const { data: hackathons, isLoading, isError, refetch } =
-    trpc.hackathon.list.useQuery({ limit: 50 });
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminJudgingPage from "./AdminJudgingPage";
 
+export default function Page() {
   return (
-    <div className="max-w-3xl mx-auto">
-      <header className="mb-8">
-        <h1 className="font-[family-name:var(--font-display)] text-[32px] md:text-[40px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text-primary)]">
-          Judging
-        </h1>
-        <p className={pageDek}>
-          Pick an edition to open its judging console: projects, challenges,
-          rooms, the schedule, launch and results. Each edition&apos;s judge
-          roster is on its hackathon page, under Judges.
-        </p>
-      </header>
-
-      <section className={sectionRule}>
-        {isLoading ? (
-          <p className={body}>Loading editions…</p>
-        ) : isError ? (
-          <p className={body}>
-            Could not load the editions.{" "}
-            <button
-              type="button"
-              onClick={() => refetch()}
-              className={textLink}
-            >
-              Try again
-            </button>
-          </p>
-        ) : !hackathons || hackathons.length === 0 ? (
-          <p className={body}>
-            No editions yet. Create one from{" "}
-            <Link
-              href="/admin/hackathons"
-              className={textLink}
-            >
-              Hackathons
-            </Link>{" "}
-            first.
-          </p>
-        ) : (
-          <ul className="border-t border-[var(--border-subtle)]">
-            {hackathons.map((h) => {
-              const conf = hackathonStatus(h.status);
-              return (
-                <li key={h.id} className="border-b border-[var(--border-subtle)]">
-                  <Link
-                    href={`/admin/judging/${h.id}`}
-                    className="flex items-center gap-4 py-4 min-h-11 hover:bg-[var(--bg-secondary)] transition-colors"
-                  >
-                    <div className="flex-1 min-w-0">
-                      <p className={`${itemTitle} truncate`}>{h.name}</p>
-                      <p className={`mt-1 ${meta}`}>
-                        <span className={status(conf.tone)}>{conf.label}</span>
-                        {" · "}
-                        {new Date(h.startDate).toLocaleDateString("en-US", {
-                          month: "short",
-                          day: "numeric",
-                          year: "numeric",
-                        })}
-                      </p>
-                    </div>
-                    <ChevronRight
-                      className="h-4 w-4 shrink-0 text-[var(--text-subtle)]"
-                      strokeWidth={1.75}
-                      aria-hidden="true"
-                    />
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </section>
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.list", { limit: 50 }, c.hackathon.list({ limit: 50 })],
+      ]}
+    >
+      <AdminJudgingPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/admin/page.tsx b/sites/mainweb/app/(portal)/admin/page.tsx
index 64d68639..0a438019 100644
--- a/sites/mainweb/app/(portal)/admin/page.tsx
+++ b/sites/mainweb/app/(portal)/admin/page.tsx
@@ -1,381 +1,14 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { trpc } from "@/lib/trpc";
-import {
-  canViewAdmin,
-  READ_ONLY_TITLE,
-  usePortalContext,
-  useReadOnly,
-} from "@/lib/use-portal-context";
-import { useState } from "react";
-import Link from "next/link";
-import { useEventQR } from "@/components/portal/EventQR";
-import { EventFormModal } from "@/components/portal/EventFormModal";
-import { EventAttendanceModal } from "@/components/portal/EventAttendanceModal";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  chip,
-  itemTitle,
-  meta,
-  object,
-  page,
-  pageDek,
-  sectionRule,
-  status,
-  textLink,
-} 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";
-
-const inlineLink =
-  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
-
-type Event = {
-  id: string;
-  title: string;
-  description: string | null;
-  location: string | null;
-  eventDate: Date;
-  qrCode: string;
-  checkInEnabled: boolean;
-  currentCheckIns: number;
-  maxCheckIns: number | null;
-};
-
-export default function AdminPage() {
-  const { data: session } = useSession();
-  const utils = trpc.useUtils();
-
-  const [showCreateEvent, setShowCreateEvent] = useState(false);
-  const qr = useEventQR();
-  const [editingEvent, setEditingEvent] = useState<Event | null>(null);
-  const [attendanceEvent, setAttendanceEvent] = useState<Event | null>(null);
-  const [editError, setEditError] = useState<string | null>(null);
-
-  const { data: portalContext } = usePortalContext();
-  const readOnly = useReadOnly();
-  const { data: allEvents, isLoading: eventsLoading } =
-    trpc.events.listAll.useQuery(undefined, {
-      enabled: !!session && canViewAdmin(portalContext),
-    });
-  // Bootcamp sessions have their own check-in controls on /admin/bootcamp.
-  const events = allEvents?.filter((e) => e.kind === "club");
-
-  type StatusFilter = "all" | "open" | "closed";
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
-
-  const createEventMutation = trpc.events.create.useMutation({
-    onSuccess: (newEvent) => {
-      if (newEvent) {
-        utils.events.listAll.invalidate();
-        setShowCreateEvent(false);
-        void qr.show(newEvent);
-      }
-    },
-  });
-
-  const toggleCheckInMutation = trpc.events.toggleCheckIn.useMutation({
-    onSuccess: () => utils.events.listAll.invalidate(),
-  });
-
-  const deleteEventMutation = trpc.events.delete.useMutation({
-    onSuccess: () => {
-      utils.events.listAll.invalidate();
-      qr.hide();
-    },
-  });
-
-  // Editing rather than delete-and-recreate: deleting takes every check-in
-  // already collected with it, and mints a QR nobody's printed sign matches.
-  const updateEventMutation = trpc.events.update.useMutation({
-    onSuccess: () => {
-      utils.events.listAll.invalidate();
-      setEditingEvent(null);
-      setEditError(null);
-    },
-    onError: (error) => setEditError(error.message),
-  });
-
-  type EventForm = {
-    title: string;
-    description: string;
-    location: string;
-    eventDate: string;
-    maxCheckIns: string;
-  };
-
-  // Empty means no cap — the column is nullable and the door gate only runs
-  // when a number is set. The form used to hardcode undefined, so capacity was
-  // unreachable from anywhere in the product.
-  const parseCapacity = (value: string) => {
-    const parsed = Number(value);
-    return value.trim() && Number.isFinite(parsed) && parsed > 0
-      ? Math.floor(parsed)
-      : undefined;
-  };
-
-  const handleCreateEvent = (formData: EventForm) => {
-    createEventMutation.mutate({
-      title: formData.title,
-      description: formData.description || undefined,
-      location: formData.location || undefined,
-      eventDate: new Date(formData.eventDate),
-      maxCheckIns: parseCapacity(formData.maxCheckIns),
-    });
-  };
-
-  const handleEditEvent = (formData: EventForm) => {
-    if (!editingEvent) return;
-    setEditError(null);
-    updateEventMutation.mutate({
-      eventId: editingEvent.id,
-      title: formData.title,
-      description: formData.description || null,
-      location: formData.location || null,
-      eventDate: new Date(formData.eventDate),
-      maxCheckIns: parseCapacity(formData.maxCheckIns) ?? null,
-    });
-  };
-
-  /** `datetime-local` wants local wall-clock, not the UTC ISO string. */
-  const toLocalInput = (date: Date) => {
-    const local = new Date(
-      date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1000,
-    );
-    return local.toISOString().slice(0, 16);
-  };
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import AdminPage from "./AdminPage";
 
+export default function Page() {
   return (
-    <>
-      {showCreateEvent && (
-        <EventFormModal
-          onClose={() => setShowCreateEvent(false)}
-          onSubmit={handleCreateEvent}
-          isSubmitting={createEventMutation.isPending}
-        />
-      )}
-
-      {editingEvent && (
-        <EventFormModal
-          mode="edit"
-          initial={{
-            title: editingEvent.title,
-            description: editingEvent.description ?? "",
-            location: editingEvent.location ?? "",
-            eventDate: toLocalInput(new Date(editingEvent.eventDate)),
-            maxCheckIns: editingEvent.maxCheckIns
-              ? String(editingEvent.maxCheckIns)
-              : "",
-          }}
-          onClose={() => {
-            setEditingEvent(null);
-            setEditError(null);
-          }}
-          onSubmit={handleEditEvent}
-          isSubmitting={updateEventMutation.isPending}
-          error={editError}
-        />
-      )}
-
-      {attendanceEvent && (
-        <EventAttendanceModal
-          eventId={attendanceEvent.id}
-          eventTitle={attendanceEvent.title}
-          onClose={() => setAttendanceEvent(null)}
-        />
-      )}
-
-      {qr.modal}
-
-      <div className={page}>
-        <header>
-          <h1 className={adminTitle}>Club check-ins</h1>
-          <p className={pageDek}>
-            Club meetings and workshops. Bootcamp sessions are managed on the{" "}
-            <Link href="/admin/bootcamp" className={inlineLink}>
-              bootcamp page
-            </Link>
-            , and Hacklytics weekend events live on the hackathon dashboard.
-          </p>
-        </header>
-
-        <section className="mt-10 space-y-6">
-          <div className="flex flex-wrap items-center justify-between gap-4">
-            <div
-              role="group"
-              aria-label="Filter events by check-in"
-              className="flex flex-wrap gap-2"
-            >
-              {(["all", "open", "closed"] as const).map((f) => (
-                <button
-                  key={f}
-                  type="button"
-                  onClick={() => setStatusFilter(f)}
-                  aria-pressed={statusFilter === f}
-                  className={`${chip(statusFilter === f)} tabular-nums`}
-                >
-                  {f === "all"
-                    ? `All (${events?.length ?? 0})`
-                    : f === "open"
-                      ? `Open (${events?.filter((e) => e.checkInEnabled).length ?? 0})`
-                      : `Closed (${events?.filter((e) => !e.checkInEnabled).length ?? 0})`}
-                </button>
-              ))}
-            </div>
-            <div className="flex flex-wrap gap-2">
-              <Link href="/scan/club" className={btnSecondary}>
-                Scan passes
-              </Link>
-              <button
-                type="button"
-                onClick={() => setShowCreateEvent(true)}
-                disabled={readOnly}
-                title={readOnly ? READ_ONLY_TITLE : undefined}
-                className={btnPrimary}
-              >
-                New event
-              </button>
-            </div>
-          </div>
-
-          {eventsLoading ? (
-            <div className="space-y-4" aria-hidden="true">
-              {[1, 2, 3].map((n) => (
-                <div
-                  key={n}
-                  className="h-28 animate-pulse rounded-[var(--radius-md)] bg-[var(--bg-secondary)]"
-                />
-              ))}
-            </div>
-          ) : !events || events.length === 0 ? (
-            <div className={sectionRule}>
-              <p className={body}>
-                Club events you create show up here, each with its own check-in
-                QR code.
-              </p>
-              <button
-                type="button"
-                onClick={() => setShowCreateEvent(true)}
-                disabled={readOnly}
-                title={readOnly ? READ_ONLY_TITLE : undefined}
-                className={`${textLink} mt-4 disabled:cursor-not-allowed disabled:opacity-50`}
-              >
-                Create the first event
-              </button>
-            </div>
-          ) : (
-            <ul className="space-y-4">
-              {events
-                .filter((e) =>
-                  statusFilter === "all"
-                    ? true
-                    : statusFilter === "open"
-                      ? e.checkInEnabled
-                      : !e.checkInEnabled,
-                )
-                .map((event) => (
-                  <li key={event.id} className={`${object} p-5 sm:p-6`}>
-                    <div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-start">
-                      <div className="min-w-0 flex-1">
-                        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
-                          <h2 className={itemTitle}>{event.title}</h2>
-                          <span
-                            className={status(
-                              event.checkInEnabled ? "accent" : "neutral",
-                            )}
-                          >
-                            {event.checkInEnabled
-                              ? "Check-in open"
-                              : "Check-in closed"}
-                          </span>
-                        </div>
-                        {event.description && (
-                          <p className={`${body} mt-2`}>{event.description}</p>
-                        )}
-                        <p className={`${meta} mt-2 tabular-nums`}>
-                          {event.location || "No location"} ·{" "}
-                          {new Date(event.eventDate).toLocaleDateString()} ·{" "}
-                          <span className="font-semibold text-[var(--text-primary)]">
-                            {event.currentCheckIns} check-ins
-                          </span>
-                        </p>
-                      </div>
-
-                      <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
-                        <button
-                          type="button"
-                          onClick={() => void qr.show(event)}
-                          disabled={qr.generatingFor === event.qrCode}
-                          className={btnSecondary}
-                        >
-                          {qr.generatingFor === event.qrCode
-                            ? "Generating…"
-                            : "QR code"}
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() =>
-                            toggleCheckInMutation.mutate({
-                              eventId: event.id,
-                              enabled: !event.checkInEnabled,
-                            })
-                          }
-                          disabled={readOnly}
-                          title={readOnly ? READ_ONLY_TITLE : undefined}
-                          className={btnSecondary}
-                        >
-                          {event.checkInEnabled
-                            ? "Close check-in"
-                            : "Open check-in"}
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => setAttendanceEvent(event)}
-                          className={textLink}
-                        >
-                          Attendance
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => setEditingEvent(event)}
-                          disabled={readOnly}
-                          title={readOnly ? READ_ONLY_TITLE : undefined}
-                          className={`${textLink} disabled:cursor-not-allowed disabled:opacity-50`}
-                        >
-                          Edit
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            if (
-                              confirm(
-                                event.currentCheckIns > 0
-                                  ? `Delete this event? Its ${event.currentCheckIns} check-in(s) are deleted with it and cannot be recovered.`
-                                  : "Delete this event?",
-                              )
-                            ) {
-                              deleteEventMutation.mutate({ eventId: event.id });
-                            }
-                          }}
-                          disabled={readOnly}
-                          title={readOnly ? READ_ONLY_TITLE : undefined}
-                          className={btnDanger}
-                        >
-                          Delete
-                        </button>
-                      </div>
-                    </div>
-                  </li>
-                ))}
-            </ul>
-          )}
-        </section>
-      </div>
-    </>
+    <PrefetchedPage
+      reads={(c) => [
+        ["events.listAll", undefined, c.events.listAll()],
+      ]}
+    >
+      <AdminPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/club/bootcamp/BootcampPage.tsx b/sites/mainweb/app/(portal)/club/bootcamp/BootcampPage.tsx
new file mode 100644
index 00000000..95aaeb54
--- /dev/null
+++ b/sites/mainweb/app/(portal)/club/bootcamp/BootcampPage.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { ExternalLink } from "lucide-react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import { BootcampAddOn } from "@/components/portal/BootcampAddOn";
+import { BootcampMaterialsTable } from "@/components/portal/BootcampMaterialsTable";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import {
+  BOOTCAMP_MEETING_TIME,
+  BOOTCAMP_ROOM,
+  BOOTCAMP_START_DATE,
+  BOOTCAMP_WORKSPACE_URL,
+} from "@/lib/bootcamp-schedule";
+import {
+  MEMBERSHIP_CENTS,
+  SEMESTER_MEMBERSHIP_CENTS,
+  BOOTCAMP_ADDON_CENTS,
+  formatCents,
+} from "@query/api/pricing";
+import {
+  body,
+  btnPrimary,
+  btnSecondary,
+  kicker,
+  label,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+  sectionRule,
+  sectionTitle,
+  status,
+} from "@/components/portal/ui";
+
+/** `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}`;
+}
+
+/** Where and when it meets — the thing somebody checks walking to class. */
+function MeetingCard() {
+  const rows = [
+    { label: "Room", value: BOOTCAMP_ROOM },
+    { label: "Time", value: BOOTCAMP_MEETING_TIME },
+    { label: "First session", value: BOOTCAMP_START_DATE },
+  ];
+
+  return (
+    <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-3">
+      {rows.map((row) => (
+        <div key={row.label}>
+          <dt className={label}>{row.label}</dt>
+          <dd className="mt-1 text-[17px] font-semibold text-[var(--text-primary)]">
+            {row.value ?? "To be announced"}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/** Hidden until the URL is set — a button that goes nowhere is worse. */
+function WorkspaceLink() {
+  if (!BOOTCAMP_WORKSPACE_URL) return null;
+
+  return (
+    <a
+      href={BOOTCAMP_WORKSPACE_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={btnSecondary}
+    >
+      Open bootcamp workspace
+      <ExternalLink aria-hidden="true" strokeWidth={1.75} className="h-4 w-4" />
+    </a>
+  );
+}
+
+/** Members buy the add-on here; non-members go to the flow that sells both. */
+function NotEnrolled({ term }: { term: string }) {
+  const memberStatus = trpc.member.checkStatus.useQuery();
+  const isMember = !!memberStatus.data?.isActive;
+
+  return (
+    <div>
+      <h2 className={sectionTitle}>
+        You are not in the {termLabel(term)} bootcamp
+      </h2>
+      <p className={`${body} mt-3 max-w-2xl`}>
+        Nine weeks of Python and data science, taught in person, with the
+        notebooks to keep. It runs for one semester, so joining covers this term
+        {isMember
+          ? ""
+          : ` — ${formatCents(BOOTCAMP_ADDON_CENTS)} on top of a membership (${formatCents(MEMBERSHIP_CENTS)} a year or ${formatCents(SEMESTER_MEMBERSHIP_CENTS)} a semester)`}
+        .
+      </p>
+
+      {isMember ? (
+        <BootcampAddOn term={termLabel(term)} />
+      ) : (
+        <Link href="/dashboard" className={`${btnPrimary} mt-6`}>
+          Become a member
+        </Link>
+      )}
+    </div>
+  );
+}
+
+export default function BootcampPortalPage() {
+  const { data: session, status: sessionStatus } = useSession();
+  const router = useRouter();
+  // Queries wait on the session, so a signed-out visitor otherwise sits on
+  // the loading screen forever.
+  useEffect(() => {
+    if (sessionStatus === "unauthenticated") router.push(loginHref());
+  }, [sessionStatus, router]);
+  const progress = trpc.bootcamp.myProgress.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const workshops = trpc.bootcamp.workshops.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (
+    sessionStatus === "loading" ||
+    progress.isPending ||
+    workshops.isPending
+  ) {
+    return <LoadingScreen message="Loading bootcamp…" />;
+  }
+
+  const data = progress.data;
+  const enrolled = !!data?.enrolled;
+
+  return (
+    <div className="min-h-screen bg-[var(--bg-primary)] text-[var(--text-muted)]">
+      <main className={page}>
+        <header>
+          <p className={kicker}>
+            {data ? `${termLabel(data.term)} · ` : ""}Data Science at Georgia
+            Tech
+          </p>
+          <h1 className={`${pageTitle} mt-2`}>Bootcamp</h1>
+
+          {enrolled && data && (
+            <>
+              <p className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1">
+                <span className={status("success")}>Enrolled</span>
+                {/* 0 of 0 reads as a failure. */}
+                {data.held > 0 && (
+                  <span className={meta}>
+                    {data.attended} of {data.held} attended
+                  </span>
+                )}
+              </p>
+              <p className={pageDek}>
+                Meeting details, notebooks, datasets, solutions and recordings
+                for the {termLabel(data.term)} cohort. Solutions and recordings
+                go up after each in-person workshop.
+              </p>
+            </>
+          )}
+        </header>
+
+        {progress.error && (
+          <p role="alert" className="mt-6 text-sm text-[var(--danger)]">
+            {progress.error.message}
+          </p>
+        )}
+
+        {workshops.error && (
+          <p role="alert" className="mt-6 text-sm text-[var(--danger)]">
+            {workshops.error.message}
+          </p>
+        )}
+
+        {/* Enrolled members came for the room and time; everyone else needs the offer. */}
+        {(enrolled || data) && (
+          <section className={`${sectionRule} mt-10`}>
+            {enrolled ? <MeetingCard /> : data && <NotEnrolled term={data.term} />}
+          </section>
+        )}
+
+        {/* Scoped to the member's own cohort by the server, so a past cohort's
+            files stay here after the term rolls even though the upsell shows. */}
+        {(enrolled || (workshops.data?.length ?? 0) > 0) && (
+          <section className="mt-12">
+            <h2 className={sectionTitle}>Weekly materials</h2>
+            <div className="mt-4">
+              <BootcampMaterialsTable
+                rows={workshops.data ?? []}
+                term={
+                  data ? termLabel(workshops.data?.[0]?.term ?? data.term) : ""
+                }
+              />
+            </div>
+          </section>
+        )}
+
+        <div className="mt-10">
+          <WorkspaceLink />
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/club/bootcamp/page.tsx b/sites/mainweb/app/(portal)/club/bootcamp/page.tsx
index 95aaeb54..f84ca446 100644
--- a/sites/mainweb/app/(portal)/club/bootcamp/page.tsx
+++ b/sites/mainweb/app/(portal)/club/bootcamp/page.tsx
@@ -1,213 +1,16 @@
-"use client";
-
-import { useEffect } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { ExternalLink } from "lucide-react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import { BootcampAddOn } from "@/components/portal/BootcampAddOn";
-import { BootcampMaterialsTable } from "@/components/portal/BootcampMaterialsTable";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import {
-  BOOTCAMP_MEETING_TIME,
-  BOOTCAMP_ROOM,
-  BOOTCAMP_START_DATE,
-  BOOTCAMP_WORKSPACE_URL,
-} from "@/lib/bootcamp-schedule";
-import {
-  MEMBERSHIP_CENTS,
-  SEMESTER_MEMBERSHIP_CENTS,
-  BOOTCAMP_ADDON_CENTS,
-  formatCents,
-} from "@query/api/pricing";
-import {
-  body,
-  btnPrimary,
-  btnSecondary,
-  kicker,
-  label,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-  sectionRule,
-  sectionTitle,
-  status,
-} from "@/components/portal/ui";
-
-/** `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}`;
-}
-
-/** Where and when it meets — the thing somebody checks walking to class. */
-function MeetingCard() {
-  const rows = [
-    { label: "Room", value: BOOTCAMP_ROOM },
-    { label: "Time", value: BOOTCAMP_MEETING_TIME },
-    { label: "First session", value: BOOTCAMP_START_DATE },
-  ];
-
-  return (
-    <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-3">
-      {rows.map((row) => (
-        <div key={row.label}>
-          <dt className={label}>{row.label}</dt>
-          <dd className="mt-1 text-[17px] font-semibold text-[var(--text-primary)]">
-            {row.value ?? "To be announced"}
-          </dd>
-        </div>
-      ))}
-    </dl>
-  );
-}
-
-/** Hidden until the URL is set — a button that goes nowhere is worse. */
-function WorkspaceLink() {
-  if (!BOOTCAMP_WORKSPACE_URL) return null;
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import BootcampPage from "./BootcampPage";
 
+export default function Page() {
   return (
-    <a
-      href={BOOTCAMP_WORKSPACE_URL}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={btnSecondary}
+    <PrefetchedPage
+      reads={(c) => [
+        ["bootcamp.myProgress", undefined, c.bootcamp.myProgress()],
+        ["bootcamp.workshops", undefined, c.bootcamp.workshops()],
+        ["member.checkStatus", undefined, c.member.checkStatus()],
+      ]}
     >
-      Open bootcamp workspace
-      <ExternalLink aria-hidden="true" strokeWidth={1.75} className="h-4 w-4" />
-    </a>
-  );
-}
-
-/** Members buy the add-on here; non-members go to the flow that sells both. */
-function NotEnrolled({ term }: { term: string }) {
-  const memberStatus = trpc.member.checkStatus.useQuery();
-  const isMember = !!memberStatus.data?.isActive;
-
-  return (
-    <div>
-      <h2 className={sectionTitle}>
-        You are not in the {termLabel(term)} bootcamp
-      </h2>
-      <p className={`${body} mt-3 max-w-2xl`}>
-        Nine weeks of Python and data science, taught in person, with the
-        notebooks to keep. It runs for one semester, so joining covers this term
-        {isMember
-          ? ""
-          : ` — ${formatCents(BOOTCAMP_ADDON_CENTS)} on top of a membership (${formatCents(MEMBERSHIP_CENTS)} a year or ${formatCents(SEMESTER_MEMBERSHIP_CENTS)} a semester)`}
-        .
-      </p>
-
-      {isMember ? (
-        <BootcampAddOn term={termLabel(term)} />
-      ) : (
-        <Link href="/dashboard" className={`${btnPrimary} mt-6`}>
-          Become a member
-        </Link>
-      )}
-    </div>
-  );
-}
-
-export default function BootcampPortalPage() {
-  const { data: session, status: sessionStatus } = useSession();
-  const router = useRouter();
-  // Queries wait on the session, so a signed-out visitor otherwise sits on
-  // the loading screen forever.
-  useEffect(() => {
-    if (sessionStatus === "unauthenticated") router.push(loginHref());
-  }, [sessionStatus, router]);
-  const progress = trpc.bootcamp.myProgress.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const workshops = trpc.bootcamp.workshops.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (
-    sessionStatus === "loading" ||
-    progress.isPending ||
-    workshops.isPending
-  ) {
-    return <LoadingScreen message="Loading bootcamp…" />;
-  }
-
-  const data = progress.data;
-  const enrolled = !!data?.enrolled;
-
-  return (
-    <div className="min-h-screen bg-[var(--bg-primary)] text-[var(--text-muted)]">
-      <main className={page}>
-        <header>
-          <p className={kicker}>
-            {data ? `${termLabel(data.term)} · ` : ""}Data Science at Georgia
-            Tech
-          </p>
-          <h1 className={`${pageTitle} mt-2`}>Bootcamp</h1>
-
-          {enrolled && data && (
-            <>
-              <p className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1">
-                <span className={status("success")}>Enrolled</span>
-                {/* 0 of 0 reads as a failure. */}
-                {data.held > 0 && (
-                  <span className={meta}>
-                    {data.attended} of {data.held} attended
-                  </span>
-                )}
-              </p>
-              <p className={pageDek}>
-                Meeting details, notebooks, datasets, solutions and recordings
-                for the {termLabel(data.term)} cohort. Solutions and recordings
-                go up after each in-person workshop.
-              </p>
-            </>
-          )}
-        </header>
-
-        {progress.error && (
-          <p role="alert" className="mt-6 text-sm text-[var(--danger)]">
-            {progress.error.message}
-          </p>
-        )}
-
-        {workshops.error && (
-          <p role="alert" className="mt-6 text-sm text-[var(--danger)]">
-            {workshops.error.message}
-          </p>
-        )}
-
-        {/* Enrolled members came for the room and time; everyone else needs the offer. */}
-        {(enrolled || data) && (
-          <section className={`${sectionRule} mt-10`}>
-            {enrolled ? <MeetingCard /> : data && <NotEnrolled term={data.term} />}
-          </section>
-        )}
-
-        {/* Scoped to the member's own cohort by the server, so a past cohort's
-            files stay here after the term rolls even though the upsell shows. */}
-        {(enrolled || (workshops.data?.length ?? 0) > 0) && (
-          <section className="mt-12">
-            <h2 className={sectionTitle}>Weekly materials</h2>
-            <div className="mt-4">
-              <BootcampMaterialsTable
-                rows={workshops.data ?? []}
-                term={
-                  data ? termLabel(workshops.data?.[0]?.term ?? data.term) : ""
-                }
-              />
-            </div>
-          </section>
-        )}
-
-        <div className="mt-10">
-          <WorkspaceLink />
-        </div>
-      </main>
-    </div>
+      <BootcampPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/club/page.tsx b/sites/mainweb/app/(portal)/club/page.tsx
index 5b8f4889..2e129ae5 100644
--- a/sites/mainweb/app/(portal)/club/page.tsx
+++ b/sites/mainweb/app/(portal)/club/page.tsx
@@ -10,6 +10,7 @@ export default function Page() {
         ["events.myStats", undefined, c.events.myStats()],
         ["events.myEvents", undefined, c.events.myEvents()],
         ["events.list", undefined, c.events.list()],
+        ["member.myPass", undefined, c.member.myPass()],
       ]}
     >
       <ClubPage />
diff --git a/sites/mainweb/app/(portal)/dashboard/page.tsx b/sites/mainweb/app/(portal)/dashboard/page.tsx
index 313d96c2..9b9e7e02 100644
--- a/sites/mainweb/app/(portal)/dashboard/page.tsx
+++ b/sites/mainweb/app/(portal)/dashboard/page.tsx
@@ -1,12 +1,82 @@
 import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import {
+  isWithinEditionDates,
+  nextStepQueries,
+} from "@/lib/hackathon-next-step";
+import type { Prefetch } from "@/lib/portal-bootstrap.server";
 import DashboardPage from "./DashboardPage";
 
 export default function Page() {
   return (
     <PrefetchedPage
-      reads={(c) => [
-        ["user.me", undefined, c.user.me()],
-      ]}
+      reads={async (c) => {
+        const me = c.user.me();
+        const myRegs = c.hackathon.myRegistrations();
+        const portal = c.user.getPortalContext();
+        const entries: Prefetch[] = [["user.me", undefined, me]];
+
+        // The page reads up to four more queries for the registration whose
+        // next step it shows. Work out which, the way the page does, and read
+        // them now. A guess that misses costs only the prefetch.
+        const [regs, context] = await Promise.all([
+          myRegs.catch(() => null),
+          portal.catch(() => null),
+        ]);
+        if (!regs) return entries;
+        entries.push(["hackathon.myRegistrations", undefined, myRegs]);
+
+        const now = new Date();
+        const eventReg = regs.find(
+          (r) =>
+            (r.registrationStatus === "approved" ||
+              r.registrationStatus === "checked_in") &&
+            r.hackathon.status !== "cancelled" &&
+            isWithinEditionDates(r.hackathon, now),
+        );
+        const clubView = !eventReg && !!context?.member?.isMember;
+        const latestReg =
+          eventReg ??
+          regs.find((r) =>
+            r.hackathon.endDate ? new Date(r.hackathon.endDate) >= now : true,
+          );
+        if (clubView || !latestReg) return entries;
+
+        const needs = nextStepQueries({
+          now,
+          hackathon: latestReg.hackathon,
+          registrationStatus: latestReg.registrationStatus,
+        });
+        const { hackathonId } = latestReg;
+        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;
+      }}
     >
       <DashboardPage />
     </PrefetchedPage>
diff --git a/sites/mainweb/app/(portal)/hackathons/HackathonsPage.tsx b/sites/mainweb/app/(portal)/hackathons/HackathonsPage.tsx
new file mode 100644
index 00000000..4768dc68
--- /dev/null
+++ b/sites/mainweb/app/(portal)/hackathons/HackathonsPage.tsx
@@ -0,0 +1,376 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { loginHref } from "@/lib/safe-callback";
+import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
+import { hackathonSlug } from "@/lib/hackathon-slug";
+import { useRouter } from "next/navigation";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import Link from "next/link";
+import { StatusBadge } from "@/components/hackathon/StatusBadge";
+import { hackathonStatus } from "@/lib/hackathon-status";
+import { venueFormat, venueParts } from "@/lib/venue-time";
+import {
+  body,
+  btnSecondary,
+  chip,
+  itemTitle,
+  kicker,
+  meta,
+  object,
+  page,
+  pageDek,
+  pageTitle,
+  sectionTitle,
+  status,
+  tab,
+  tabList,
+  textLink,
+} from "@/components/portal/ui";
+
+type Tab = "browse" | "registrations" | "projects";
+
+function formatDate(d: Date | string) {
+  return venueFormat(d, { month: "short", day: "numeric", year: "numeric" });
+}
+
+function formatDateRange(start: Date | string, end: Date | string) {
+  const s = venueParts(start);
+  const e = venueParts(end);
+  const short = { month: "short", day: "numeric" } as const;
+  if (s.month === e.month && s.year === e.year) {
+    return `${venueFormat(start, short)} – ${e.day}, ${e.year}`;
+  }
+  if (s.year === e.year) {
+    return `${venueFormat(start, short)} – ${venueFormat(end, short)}, ${e.year}`;
+  }
+  return `${formatDate(start)} – ${formatDate(end)}`;
+}
+
+export default function HackathonsPage() {
+  const { data: session, status: authStatus } = useSession();
+  const router = useRouter();
+
+  const [activeTab, setActiveTab] = useState<Tab>("browse");
+  const [statusFilter, setStatusFilter] = useState<
+    "all" | "open" | "live" | "completed"
+  >("all");
+
+  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery({});
+  const { data: myRegs } = trpc.hackathon.myRegistrations.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  // Covers solo submissions too, which have no team to read them off.
+  const { data: myProjects } = trpc.team.myProjects.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const projects = myProjects ?? [];
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.replace("#", "") as Tab;
+      if (["browse", "registrations", "projects"].includes(hash)) {
+        setActiveTab(hash);
+      }
+    };
+    handleHashChange();
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, []);
+
+  useEffect(() => {
+    if (authStatus === "unauthenticated") router.push(loginHref());
+  }, [authStatus, router]);
+
+  if (authStatus === "loading" || isLoading)
+    return <LoadingScreen message="Loading hackathons…" />;
+  if (!session) return null;
+
+  const regStatusById = new Map(
+    myRegs?.map((r) => [r.hackathonId, r.registrationStatus]) ?? [],
+  );
+
+  const tabs = [
+    { id: "browse", label: "Browse" },
+    { id: "registrations", label: "My registrations" },
+    { id: "projects", label: "My projects" },
+  ];
+
+  const filters = [
+    { key: "all", label: "All" },
+    { key: "open", label: "Open" },
+    { key: "live", label: "Live" },
+    { key: "completed", label: "Past" },
+  ] as const;
+
+  const filtered = (hackathons ?? []).filter((h) => {
+    if (statusFilter === "all") return true;
+    if (statusFilter === "open") return h.status === "open";
+    if (statusFilter === "live") return h.status === "in_progress";
+    return h.status === "completed";
+  });
+  const filterLabel =
+    filters.find((f) => f.key === statusFilter)?.label.toLowerCase() ?? "";
+
+  return (
+    <div className={page}>
+      <Link
+        href="/dashboard"
+        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
+      >
+        ← Dashboard
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>Hackathons</h1>
+        <p className={pageDek}>
+          Events you can register for, your registrations, and projects
+          you&apos;ve submitted.
+        </p>
+      </header>
+
+      <nav aria-label="Hackathon views" className={`mt-8 ${tabList}`}>
+        {tabs.map((t) => (
+          <Link
+            key={t.id}
+            href={`#${t.id}`}
+            onClick={() => setActiveTab(t.id as Tab)}
+            aria-current={activeTab === t.id ? "page" : undefined}
+            className={tab(activeTab === t.id)}
+          >
+            {t.label}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Browse */}
+      {activeTab === "browse" && (
+        <div className="mt-6">
+          <div className="flex flex-wrap gap-2">
+            {filters.map(({ key, label }) => (
+              <button
+                key={key}
+                type="button"
+                onClick={() => setStatusFilter(key)}
+                aria-pressed={statusFilter === key}
+                className={chip(statusFilter === key)}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+
+          {!hackathons || hackathons.length === 0 ? (
+            <p className={`mt-8 ${body}`}>
+              No hackathons are listed yet. New events show up here when
+              they&apos;re announced.
+            </p>
+          ) : filtered.length === 0 ? (
+            <div className="mt-8 space-y-3">
+              <p className={body}>No {filterLabel} hackathons right now.</p>
+              <button
+                type="button"
+                onClick={() => setStatusFilter("all")}
+                className={textLink}
+              >
+                Show all hackathons
+              </button>
+            </div>
+          ) : (
+            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filtered.map((h) => {
+                const conf = hackathonStatus(h.status);
+                const regStatus = regStatusById.get(h.id);
+                return (
+                  <Link
+                    href={`/hackathons/${hackathonSlug(h.name)}`}
+                    key={h.id}
+                    className={`flex h-full flex-col gap-3 p-5 transition-colors hover:border-[var(--border-hover)] ${object}`}
+                  >
+                    <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+                      <span className={status(conf.tone)}>{conf.label}</span>
+                      {regStatus && <StatusBadge status={regStatus} />}
+                    </div>
+
+                    <div className="flex-1">
+                      {h.theme && <p className={kicker}>{h.theme}</p>}
+                      <h2 className={`mt-1 ${itemTitle}`}>{h.name}</h2>
+                      {h.description && (
+                        <p className={`mt-2 line-clamp-3 ${body}`}>
+                          {h.description}
+                        </p>
+                      )}
+                    </div>
+
+                    <div className={`space-y-0.5 ${meta}`}>
+                      <p>{formatDateRange(h.startDate, h.endDate)}</p>
+                      {h.location && <p>{h.location}</p>}
+                      {h.maxParticipants && (
+                        <p>
+                          {h.currentParticipants} of {h.maxParticipants} spots
+                          taken
+                        </p>
+                      )}
+                    </div>
+
+                    <span className={`mt-1 self-start ${textLink}`}>View</span>
+                  </Link>
+                );
+              })}
+            </div>
+          )}
+
+          <section className="mt-12 border-t border-[var(--border-subtle)] pt-6 flex flex-col md:flex-row md:items-end justify-between gap-4">
+            <div>
+              <h2 className={sectionTitle}>Judge a hackathon</h2>
+              <p className={`mt-2 max-w-xl ${body}`}>
+                Industry professionals and experienced students score projects
+                at the expo. You apply per event, and an organiser reviews each
+                application.
+              </p>
+            </div>
+            <Link
+              href="/judge/register"
+              className={`shrink-0 self-start md:self-auto ${btnSecondary}`}
+            >
+              Apply to judge
+            </Link>
+          </section>
+        </div>
+      )}
+
+      {/* My registrations */}
+      {activeTab === "registrations" && (
+        <div className="mt-6">
+          {myRegs && myRegs.length > 0 ? (
+            <ul className="border-b border-[var(--border-subtle)]">
+              {myRegs.map((reg) => (
+                <li
+                  key={reg.id}
+                  className="border-t border-[var(--border-subtle)] first:border-t-0"
+                >
+                  <Link
+                    href={`/hackathons/${hackathonSlug(reg.hackathon.name)}?tab=INFO`}
+                    className="flex flex-col gap-3 py-5 sm:flex-row sm:items-start sm:justify-between sm:gap-8"
+                  >
+                    <div className="min-w-0">
+                      <StatusBadge status={reg.registrationStatus} />
+                      <h3 className={`mt-1 ${itemTitle}`}>
+                        {reg.hackathon.name}
+                      </h3>
+                      {reg.hackathon.theme && (
+                        <p className={`mt-0.5 ${meta}`}>
+                          Theme: {reg.hackathon.theme}
+                        </p>
+                      )}
+                      <p className={`mt-2 line-clamp-3 max-w-2xl ${body}`}>
+                        {reg.hackathon.description}
+                      </p>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-6 sm:flex-col sm:items-end sm:gap-2">
+                      <span className={meta}>
+                        {reg.hackathon.startDate
+                          ? venueFormat(reg.hackathon.startDate)
+                          : "TBA"}
+                      </span>
+                      <span className={textLink}>View</span>
+                    </div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div className="mt-8 space-y-3">
+              <p className={body}>
+                You haven&apos;t registered for any hackathons yet.
+              </p>
+              <button
+                type="button"
+                onClick={() => setActiveTab("browse")}
+                className={textLink}
+              >
+                Browse hackathons
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* My projects */}
+      {activeTab === "projects" && (
+        <div className="mt-6">
+          {projects.length === 0 ? (
+            <div className="mt-8 space-y-3">
+              <p className={body}>
+                Projects you submit to a hackathon show up here.
+              </p>
+              <button
+                type="button"
+                onClick={() => setActiveTab("browse")}
+                className={textLink}
+              >
+                Browse hackathons
+              </button>
+            </div>
+          ) : (
+            <ul className="border-b border-[var(--border-subtle)]">
+              {projects.map((project) => (
+                <li
+                  key={project.id}
+                  className="border-t border-[var(--border-subtle)] first:border-t-0 py-5"
+                >
+                  <span
+                    className={status(
+                      project.status === "winner"
+                        ? "success"
+                        : project.status === "judging"
+                          ? "accent"
+                          : "neutral",
+                    )}
+                  >
+                    {project.status === "winner"
+                      ? "Winner"
+                      : project.status === "judging"
+                        ? "In judging"
+                        : "Submitted"}
+                  </span>
+                  <h3 className={`mt-1 ${itemTitle}`}>{project.name}</h3>
+                  <p className={`mt-2 line-clamp-3 max-w-2xl ${body}`}>
+                    {project.description}
+                  </p>
+
+                  {(project.githubUrl || project.demoUrl) && (
+                    <div className="mt-3 flex flex-wrap gap-6">
+                      {project.githubUrl && (
+                        <Link
+                          href={project.githubUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={textLink}
+                        >
+                          Code
+                        </Link>
+                      )}
+                      {project.demoUrl && (
+                        <Link
+                          href={project.demoUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={textLink}
+                        >
+                          Demo
+                        </Link>
+                      )}
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/hackathons/page.tsx b/sites/mainweb/app/(portal)/hackathons/page.tsx
index 5ba2dc4e..575ddb0f 100644
--- a/sites/mainweb/app/(portal)/hackathons/page.tsx
+++ b/sites/mainweb/app/(portal)/hackathons/page.tsx
@@ -1,380 +1,16 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { loginHref } from "@/lib/safe-callback";
-import { useSession } from "next-auth/react";
-import { trpc } from "@/lib/trpc";
-import { hackathonSlug } from "@/lib/hackathon-slug";
-import { useRouter } from "next/navigation";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import Link from "next/link";
-import { StatusBadge } from "@/components/hackathon/StatusBadge";
-import { hackathonStatus } from "@/lib/hackathon-status";
-import {
-  body,
-  btnSecondary,
-  chip,
-  itemTitle,
-  kicker,
-  meta,
-  object,
-  page,
-  pageDek,
-  pageTitle,
-  sectionTitle,
-  status,
-  tab,
-  tabList,
-  textLink,
-} from "@/components/portal/ui";
-
-type Tab = "browse" | "registrations" | "projects";
-
-function formatDate(d: Date | string) {
-  return new Date(d).toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
-}
-
-function formatDateRange(start: Date | string, end: Date | string) {
-  const s = new Date(start);
-  const e = new Date(end);
-  if (s.getMonth() === e.getMonth() && s.getFullYear() === e.getFullYear()) {
-    return `${s.toLocaleDateString("en-US", { month: "short", day: "numeric" })} – ${e.getDate()}, ${e.getFullYear()}`;
-  }
-  if (s.getFullYear() === e.getFullYear()) {
-    return `${s.toLocaleDateString("en-US", { month: "short", day: "numeric" })} – ${e.toLocaleDateString("en-US", { month: "short", day: "numeric" })}, ${e.getFullYear()}`;
-  }
-  return `${formatDate(s)} – ${formatDate(e)}`;
-}
-
-export default function HackathonsPage() {
-  const { data: session, status: authStatus } = useSession();
-  const router = useRouter();
-
-  const [activeTab, setActiveTab] = useState<Tab>("browse");
-  const [statusFilter, setStatusFilter] = useState<
-    "all" | "open" | "live" | "completed"
-  >("all");
-
-  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery({});
-  const { data: myRegs } = trpc.hackathon.myRegistrations.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  // Covers solo submissions too, which have no team to read them off.
-  const { data: myProjects } = trpc.team.myProjects.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const projects = myProjects ?? [];
-
-  useEffect(() => {
-    const handleHashChange = () => {
-      const hash = window.location.hash.replace("#", "") as Tab;
-      if (["browse", "registrations", "projects"].includes(hash)) {
-        setActiveTab(hash);
-      }
-    };
-    handleHashChange();
-    window.addEventListener("hashchange", handleHashChange);
-    return () => window.removeEventListener("hashchange", handleHashChange);
-  }, []);
-
-  useEffect(() => {
-    if (authStatus === "unauthenticated") router.push(loginHref());
-  }, [authStatus, router]);
-
-  if (authStatus === "loading" || isLoading)
-    return <LoadingScreen message="Loading hackathons…" />;
-  if (!session) return null;
-
-  const regStatusById = new Map(
-    myRegs?.map((r) => [r.hackathonId, r.registrationStatus]) ?? [],
-  );
-
-  const tabs = [
-    { id: "browse", label: "Browse" },
-    { id: "registrations", label: "My registrations" },
-    { id: "projects", label: "My projects" },
-  ];
-
-  const filters = [
-    { key: "all", label: "All" },
-    { key: "open", label: "Open" },
-    { key: "live", label: "Live" },
-    { key: "completed", label: "Past" },
-  ] as const;
-
-  const filtered = (hackathons ?? []).filter((h) => {
-    if (statusFilter === "all") return true;
-    if (statusFilter === "open") return h.status === "open";
-    if (statusFilter === "live") return h.status === "in_progress";
-    return h.status === "completed";
-  });
-  const filterLabel =
-    filters.find((f) => f.key === statusFilter)?.label.toLowerCase() ?? "";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import HackathonsPage from "./HackathonsPage";
 
+export default function Page() {
   return (
-    <div className={page}>
-      <Link
-        href="/dashboard"
-        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
-      >
-        ← Dashboard
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>Hackathons</h1>
-        <p className={pageDek}>
-          Events you can register for, your registrations, and projects
-          you&apos;ve submitted.
-        </p>
-      </header>
-
-      <nav aria-label="Hackathon views" className={`mt-8 ${tabList}`}>
-        {tabs.map((t) => (
-          <Link
-            key={t.id}
-            href={`#${t.id}`}
-            onClick={() => setActiveTab(t.id as Tab)}
-            aria-current={activeTab === t.id ? "page" : undefined}
-            className={tab(activeTab === t.id)}
-          >
-            {t.label}
-          </Link>
-        ))}
-      </nav>
-
-      {/* Browse */}
-      {activeTab === "browse" && (
-        <div className="mt-6">
-          <div className="flex flex-wrap gap-2">
-            {filters.map(({ key, label }) => (
-              <button
-                key={key}
-                type="button"
-                onClick={() => setStatusFilter(key)}
-                aria-pressed={statusFilter === key}
-                className={chip(statusFilter === key)}
-              >
-                {label}
-              </button>
-            ))}
-          </div>
-
-          {!hackathons || hackathons.length === 0 ? (
-            <p className={`mt-8 ${body}`}>
-              No hackathons are listed yet. New events show up here when
-              they&apos;re announced.
-            </p>
-          ) : filtered.length === 0 ? (
-            <div className="mt-8 space-y-3">
-              <p className={body}>No {filterLabel} hackathons right now.</p>
-              <button
-                type="button"
-                onClick={() => setStatusFilter("all")}
-                className={textLink}
-              >
-                Show all hackathons
-              </button>
-            </div>
-          ) : (
-            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {filtered.map((h) => {
-                const conf = hackathonStatus(h.status);
-                const regStatus = regStatusById.get(h.id);
-                return (
-                  <Link
-                    href={`/hackathons/${hackathonSlug(h.name)}`}
-                    key={h.id}
-                    className={`flex h-full flex-col gap-3 p-5 transition-colors hover:border-[var(--border-hover)] ${object}`}
-                  >
-                    <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
-                      <span className={status(conf.tone)}>{conf.label}</span>
-                      {regStatus && <StatusBadge status={regStatus} />}
-                    </div>
-
-                    <div className="flex-1">
-                      {h.theme && <p className={kicker}>{h.theme}</p>}
-                      <h2 className={`mt-1 ${itemTitle}`}>{h.name}</h2>
-                      {h.description && (
-                        <p className={`mt-2 line-clamp-3 ${body}`}>
-                          {h.description}
-                        </p>
-                      )}
-                    </div>
-
-                    <div className={`space-y-0.5 ${meta}`}>
-                      <p>{formatDateRange(h.startDate, h.endDate)}</p>
-                      {h.location && <p>{h.location}</p>}
-                      {h.maxParticipants && (
-                        <p>
-                          {h.currentParticipants} of {h.maxParticipants} spots
-                          taken
-                        </p>
-                      )}
-                    </div>
-
-                    <span className={`mt-1 self-start ${textLink}`}>View</span>
-                  </Link>
-                );
-              })}
-            </div>
-          )}
-
-          <section className="mt-12 border-t border-[var(--border-subtle)] pt-6 flex flex-col md:flex-row md:items-end justify-between gap-4">
-            <div>
-              <h2 className={sectionTitle}>Judge a hackathon</h2>
-              <p className={`mt-2 max-w-xl ${body}`}>
-                Industry professionals and experienced students score projects
-                at the expo. You apply per event, and an organiser reviews each
-                application.
-              </p>
-            </div>
-            <Link
-              href="/judge/register"
-              className={`shrink-0 self-start md:self-auto ${btnSecondary}`}
-            >
-              Apply to judge
-            </Link>
-          </section>
-        </div>
-      )}
-
-      {/* My registrations */}
-      {activeTab === "registrations" && (
-        <div className="mt-6">
-          {myRegs && myRegs.length > 0 ? (
-            <ul className="border-b border-[var(--border-subtle)]">
-              {myRegs.map((reg) => (
-                <li
-                  key={reg.id}
-                  className="border-t border-[var(--border-subtle)] first:border-t-0"
-                >
-                  <Link
-                    href={`/hackathons/${hackathonSlug(reg.hackathon.name)}?tab=INFO`}
-                    className="flex flex-col gap-3 py-5 sm:flex-row sm:items-start sm:justify-between sm:gap-8"
-                  >
-                    <div className="min-w-0">
-                      <StatusBadge status={reg.registrationStatus} />
-                      <h3 className={`mt-1 ${itemTitle}`}>
-                        {reg.hackathon.name}
-                      </h3>
-                      {reg.hackathon.theme && (
-                        <p className={`mt-0.5 ${meta}`}>
-                          Theme: {reg.hackathon.theme}
-                        </p>
-                      )}
-                      <p className={`mt-2 line-clamp-3 max-w-2xl ${body}`}>
-                        {reg.hackathon.description}
-                      </p>
-                    </div>
-                    <div className="flex shrink-0 items-center gap-6 sm:flex-col sm:items-end sm:gap-2">
-                      <span className={meta}>
-                        {reg.hackathon.startDate
-                          ? new Date(
-                              reg.hackathon.startDate,
-                            ).toLocaleDateString()
-                          : "TBA"}
-                      </span>
-                      <span className={textLink}>View</span>
-                    </div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          ) : (
-            <div className="mt-8 space-y-3">
-              <p className={body}>
-                You haven&apos;t registered for any hackathons yet.
-              </p>
-              <button
-                type="button"
-                onClick={() => setActiveTab("browse")}
-                className={textLink}
-              >
-                Browse hackathons
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* My projects */}
-      {activeTab === "projects" && (
-        <div className="mt-6">
-          {projects.length === 0 ? (
-            <div className="mt-8 space-y-3">
-              <p className={body}>
-                Projects you submit to a hackathon show up here.
-              </p>
-              <button
-                type="button"
-                onClick={() => setActiveTab("browse")}
-                className={textLink}
-              >
-                Browse hackathons
-              </button>
-            </div>
-          ) : (
-            <ul className="border-b border-[var(--border-subtle)]">
-              {projects.map((project) => (
-                <li
-                  key={project.id}
-                  className="border-t border-[var(--border-subtle)] first:border-t-0 py-5"
-                >
-                  <span
-                    className={status(
-                      project.status === "winner"
-                        ? "success"
-                        : project.status === "judging"
-                          ? "accent"
-                          : "neutral",
-                    )}
-                  >
-                    {project.status === "winner"
-                      ? "Winner"
-                      : project.status === "judging"
-                        ? "In judging"
-                        : "Submitted"}
-                  </span>
-                  <h3 className={`mt-1 ${itemTitle}`}>{project.name}</h3>
-                  <p className={`mt-2 line-clamp-3 max-w-2xl ${body}`}>
-                    {project.description}
-                  </p>
-
-                  {(project.githubUrl || project.demoUrl) && (
-                    <div className="mt-3 flex flex-wrap gap-6">
-                      {project.githubUrl && (
-                        <Link
-                          href={project.githubUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className={textLink}
-                        >
-                          Code
-                        </Link>
-                      )}
-                      {project.demoUrl && (
-                        <Link
-                          href={project.demoUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className={textLink}
-                        >
-                          Demo
-                        </Link>
-                      )}
-                    </div>
-                  )}
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      )}
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.list", {}, c.hackathon.list({})],
+        ["hackathon.myRegistrations", undefined, c.hackathon.myRegistrations()],
+        ["team.myProjects", undefined, c.team.myProjects()],
+      ]}
+    >
+      <HackathonsPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/initiatives/InitiativesPage.tsx b/sites/mainweb/app/(portal)/initiatives/InitiativesPage.tsx
new file mode 100644
index 00000000..fc963737
--- /dev/null
+++ b/sites/mainweb/app/(portal)/initiatives/InitiativesPage.tsx
@@ -0,0 +1,592 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  ApplicationChip,
+  InitiativeChip,
+  initiativeState,
+  seatLabel,
+} from "@/components/portal/initiatives/chips";
+import {
+  InitiativeFields,
+  emptyDraft,
+  toInput,
+} from "@/components/portal/initiatives/form-fields";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  fieldHint,
+  fieldLabel,
+  input,
+  itemTitle,
+  meta,
+  object,
+  page,
+  pageDek,
+  pageTitle,
+  sectionTitle,
+} from "@/components/portal/ui";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import type { RouterOutputs } from "@query/api";
+
+type OpenInitiative = RouterOutputs["initiative"]["list"][number];
+type MyApplication = RouterOutputs["initiative"]["myApplications"][number];
+type MyProposal = RouterOutputs["initiative"]["myProposals"][number];
+
+const errorText = "text-sm text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
+const inlineLink =
+  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
+const listRow = "border-b border-[var(--border-subtle)] py-5";
+
+/**
+ * Proposing something to run, rather than joining something that exists.
+ *
+ * An admin reviews it; approving turns the proposal into a draft project
+ * and makes the proposer a project leader, so this is the one place a member
+ * can earn that role.
+ */
+function ProposeSection({ canPropose }: { canPropose: boolean }) {
+  const utils = trpc.useUtils();
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(emptyDraft);
+
+  const propose = trpc.initiative.propose.useMutation({
+    onSuccess: async () => {
+      setOpen(false);
+      setDraft(emptyDraft);
+      await utils.initiative.myProposals.invalidate();
+    },
+  });
+
+  if (!canPropose) return null;
+
+  if (!open) {
+    return (
+      <section className="mt-12 flex flex-col justify-between gap-4 border-t border-[var(--border-subtle)] pt-6 md:flex-row md:items-end">
+        <div>
+          <h2 className={sectionTitle}>Have something to build?</h2>
+          <p className={`${body} mt-2 max-w-xl`}>
+            Pitch it. If it is approved you become its project leader and pick
+            who joins.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className={`${btnSecondary} shrink-0 self-start md:self-auto`}
+        >
+          Propose a project
+        </button>
+      </section>
+    );
+  }
+
+  return (
+    <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+          propose.mutate(toInput(draft));
+        }}
+      >
+        <h2 className={sectionTitle}>Propose a project</h2>
+        <p className={`${body} mt-2 mb-5 max-w-xl`}>
+          An organiser reviews it. If it is approved you lead it and pick who
+          joins.
+        </p>
+        <InitiativeFields draft={draft} onChange={setDraft} />
+
+        <div className="mt-5 flex flex-wrap gap-3">
+          <button
+            type="submit"
+            disabled={propose.isPending}
+            className={btnPrimary}
+          >
+            {propose.isPending ? "Sending…" : "Send for review"}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(false);
+              propose.reset();
+            }}
+            className={btnSecondary}
+          >
+            Cancel
+          </button>
+        </div>
+
+        {propose.error && (
+          <p aria-live="polite" className={`${errorText} mt-3`}>
+            {propose.error.message}
+          </p>
+        )}
+      </form>
+    </section>
+  );
+}
+
+function ProposalRow({ proposal }: { proposal: MyProposal }) {
+  const utils = trpc.useUtils();
+
+  const withdraw = trpc.initiative.withdrawProposal.useMutation({
+    onSuccess: async () => {
+      await utils.initiative.myProposals.invalidate();
+    },
+  });
+
+  const state = initiativeState(proposal);
+
+  return (
+    <li className={listRow}>
+      <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="text-[15px] font-semibold text-[var(--text-primary)]">
+              {proposal.title}
+            </h3>
+            <InitiativeChip state={state} />
+          </div>
+          {proposal.summary && (
+            <p className={`${body} mt-1`}>{proposal.summary}</p>
+          )}
+
+          {/* The reviewer's note is the whole point of a decline — without it a
+              member has no idea what to change before pitching again. */}
+          {proposal.reviewNote && (
+            <p
+              className={`${body} mt-3 border-l-2 border-[var(--border-medium)] pl-3`}
+            >
+              {proposal.reviewNote}
+            </p>
+          )}
+
+          {proposal.status === "draft" && (
+            <p className={`${body} mt-2`}>
+              Approved. Finish writing it and open it to members from{" "}
+              <Link href="/lead" className={inlineLink}>
+                your projects
+              </Link>
+              .
+            </p>
+          )}
+        </div>
+
+        {proposal.status === "proposed" && (
+          <button
+            type="button"
+            disabled={withdraw.isPending}
+            onClick={() => withdraw.mutate({ id: proposal.id })}
+            className={`${quietAction} shrink-0`}
+          >
+            Withdraw
+          </button>
+        )}
+      </div>
+
+      {withdraw.error && (
+        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
+      )}
+    </li>
+  );
+}
+
+function OpenRow({
+  initiative,
+  canApply,
+}: {
+  initiative: OpenInitiative;
+  canApply: boolean;
+}) {
+  const utils = trpc.useUtils();
+  const [writing, setWriting] = useState(false);
+  const [pitch, setPitch] = useState("");
+
+  // Both lists move together: applying takes a project out of one and puts
+  // it into the other, so refreshing one alone renders it twice.
+  const refresh = async () => {
+    await Promise.all([
+      utils.initiative.list.invalidate(),
+      utils.initiative.myApplications.invalidate(),
+    ]);
+  };
+
+  const [resume, setResume] = useState<{
+    fileName: string;
+    dataUrl: string;
+  } | null>(null);
+  const [resumeError, setResumeError] = useState<string | null>(null);
+
+  const join = trpc.initiative.requestToJoin.useMutation({
+    onSuccess: async () => {
+      setWriting(false);
+      setPitch("");
+      setResume(null);
+      await refresh();
+    },
+  });
+
+  // 2 MB is the server's whole-payload cap; catching it here saves a round
+  // trip and says which file was too big.
+  const readResume = (file: File | undefined) => {
+    setResumeError(null);
+    // Cleared first: a rejected pick must not leave the previous file attached
+    // and submitted under the error.
+    setResume(null);
+    if (!file) return;
+    if (file.type !== "application/pdf") {
+      return setResumeError(
+        "Your resume must be a PDF. Export it as one and try again.",
+      );
+    }
+    if (file.size > 1.4 * 1024 * 1024) {
+      return setResumeError(
+        "That PDF is over 1.4 MB. Compress it and try again.",
+      );
+    }
+    const reader = new FileReader();
+    reader.onload = () =>
+      setResume({ fileName: file.name, dataUrl: String(reader.result) });
+    reader.onerror = () =>
+      setResumeError("Could not read that file. Try choosing it again.");
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <li className={`${object} p-5`}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <h3 className={itemTitle}>{initiative.title}</h3>
+          <p className={`${meta} mt-1`}>
+            Led by {initiative.leaderName ?? "a project leader"} ·{" "}
+            {seatLabel(initiative.accepted, initiative.maxMembers)}
+            {initiative.commitment ? ` · ${initiative.commitment}` : ""}
+          </p>
+        </div>
+
+        {initiative.isFull ? (
+          <span className="shrink-0 text-sm font-semibold text-[var(--text-subtle)]">
+            Full
+          </span>
+        ) : (
+          !writing &&
+          canApply && (
+            <button
+              type="button"
+              onClick={() => setWriting(true)}
+              className={`${btnSecondary} shrink-0`}
+            >
+              Apply
+            </button>
+          )
+        )}
+      </div>
+
+      {initiative.summary && (
+        <p className="mt-3 text-[15px] leading-relaxed text-[var(--text-secondary)]">
+          {initiative.summary}
+        </p>
+      )}
+      {initiative.description && (
+        <p className={`${body} mt-2 whitespace-pre-line`}>
+          {initiative.description}
+        </p>
+      )}
+
+      {!canApply && !initiative.isFull && (
+        <p className={`${meta} mt-3`}>
+          Joining needs an active membership.{" "}
+          <Link href="/dashboard" className={inlineLink}>
+            Become a member
+          </Link>
+        </p>
+      )}
+
+      {writing && (
+        <form
+          className="mt-5 border-t border-[var(--border-subtle)] pt-5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            join.mutate({
+              initiativeId: initiative.id,
+              pitch: pitch.trim(),
+              resume: resume ?? undefined,
+            });
+          }}
+        >
+          <label htmlFor={`pitch-${initiative.id}`} className={fieldLabel}>
+            Why do you want to join?
+          </label>
+          <textarea
+            id={`pitch-${initiative.id}`}
+            rows={3}
+            required
+            maxLength={1000}
+            value={pitch}
+            onChange={(event) => setPitch(event.target.value)}
+            placeholder="What you want to work on, and what you have built before."
+            className={input}
+          />
+
+          <label
+            htmlFor={`resume-${initiative.id}`}
+            className={`${fieldLabel} mt-5`}
+          >
+            Resume (PDF, optional)
+          </label>
+          <input
+            id={`resume-${initiative.id}`}
+            type="file"
+            accept="application/pdf,.pdf"
+            onChange={(event) => readResume(event.target.files?.[0])}
+            className="block w-full text-sm text-[var(--text-muted)] file:mr-3 file:cursor-pointer file:rounded-[var(--radius-sm)] file:border file:border-solid file:border-[var(--border-medium)] file:bg-transparent file:px-4 file:py-2 file:text-sm file:font-semibold file:text-[var(--text-primary)] hover:file:bg-[var(--bg-secondary)]"
+          />
+          {resume && <p className={fieldHint}>Attached: {resume.fileName}</p>}
+          {resumeError && (
+            <p aria-live="polite" className={`${errorText} mt-1.5`}>
+              {resumeError}
+            </p>
+          )}
+
+          <div className="mt-5 flex flex-wrap gap-3">
+            <button
+              type="submit"
+              disabled={join.isPending || !pitch.trim()}
+              className={btnPrimary}
+            >
+              {join.isPending ? "Sending…" : "Send application"}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setWriting(false);
+                join.reset();
+              }}
+              className={btnSecondary}
+            >
+              Cancel
+            </button>
+          </div>
+
+          {join.error && (
+            <p aria-live="polite" className={`${errorText} mt-3`}>
+              {join.error.message}
+            </p>
+          )}
+        </form>
+      )}
+    </li>
+  );
+}
+
+function ApplicationRow({ application }: { application: MyApplication }) {
+  const utils = trpc.useUtils();
+  const [confirm, setConfirm] = useState(false);
+
+  const withdraw = trpc.initiative.withdraw.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.initiative.list.invalidate(),
+        utils.initiative.myApplications.invalidate(),
+      ]);
+    },
+  });
+
+  // Nothing to leave once the leader has said no, and an archived project is
+  // over — the control would change nothing either way.
+  const canWithdraw =
+    application.myStatus !== "rejected" && application.archivedAt === null;
+  const leaving = application.myStatus === "accepted";
+
+  return (
+    <li className={listRow}>
+      <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="text-[15px] font-semibold text-[var(--text-primary)]">
+              {application.title}
+            </h3>
+            <ApplicationChip status={application.myStatus} />
+          </div>
+          <p className={`${meta} mt-1`}>
+            Led by {application.leaderName ?? "a project leader"}
+            {application.archivedAt !== null ? " · archived" : ""}
+          </p>
+          {application.leaderEmail && (
+            <p className={`${body} mt-1`}>
+              Reach them at{" "}
+              <a
+                href={`mailto:${application.leaderEmail}`}
+                className={inlineLink}
+              >
+                {application.leaderEmail}
+              </a>
+            </p>
+          )}
+        </div>
+
+        {canWithdraw &&
+          (confirm ? (
+            <span className="flex flex-wrap items-center gap-3">
+              <span className="text-sm text-[var(--text-muted)]">
+                {leaving ? "Leave this project?" : "Withdraw your application?"}
+              </span>
+              <button
+                type="button"
+                disabled={withdraw.isPending}
+                onClick={() => {
+                  withdraw.mutate({ initiativeId: application.id });
+                  setConfirm(false);
+                }}
+                className={btnDanger}
+              >
+                {leaving ? "Leave" : "Withdraw"}
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirm(false)}
+                className={btnSecondary}
+              >
+                Cancel
+              </button>
+            </span>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setConfirm(true)}
+              className={`${quietAction} shrink-0`}
+            >
+              {leaving ? "Leave" : "Withdraw"}
+            </button>
+          ))}
+      </div>
+
+      {withdraw.error && (
+        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
+      )}
+    </li>
+  );
+}
+
+export default function InitiativesPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  // Queries wait on the session, so a signed-out visitor otherwise sits on
+  // the loading screen forever.
+  useEffect(() => {
+    if (status === "unauthenticated") router.push(loginHref());
+  }, [status, router]);
+
+  const open = trpc.initiative.list.useQuery(undefined, { enabled: !!session });
+  const mine = trpc.initiative.myApplications.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const memberStatus = trpc.member.checkStatus.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const proposals = trpc.initiative.myProposals.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (
+    status === "loading" ||
+    open.isPending ||
+    mine.isPending ||
+    proposals.isPending
+  ) {
+    return <LoadingScreen />;
+  }
+
+  const applications = mine.data ?? [];
+  const myProposals = proposals.data ?? [];
+  // Already applied belongs in the member's own list, not in the one offering
+  // them a chance to apply again.
+  const joinable = (open.data ?? []).filter((row) => row.myStatus === null);
+  const canApply = !!memberStatus.data?.isActive;
+  const loadError = open.error ?? mine.error ?? proposals.error;
+
+  return (
+    <div className={page}>
+      <Link
+        href="/dashboard"
+        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
+      >
+        ← Dashboard
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>
+          {joinable.length > 0
+            ? `${joinable.length} club project${joinable.length === 1 ? " is" : "s are"} taking members`
+            : "Club projects"}
+        </h1>
+        <p className={pageDek}>
+          Projects the club runs year-round. Leaders post what they are building
+          and pick who joins.
+        </p>
+      </header>
+
+      {loadError && (
+        <p className={`${errorText} mt-6`}>
+          {loadError.message} Refresh the page to try again.
+        </p>
+      )}
+
+      <section className="mt-10">
+        <h2 className={sectionTitle}>Open to join</h2>
+        {joinable.length > 0 ? (
+          <ul className="mt-5 space-y-4">
+            {joinable.map((initiative) => (
+              <OpenRow
+                key={initiative.id}
+                initiative={initiative}
+                canApply={canApply}
+              />
+            ))}
+          </ul>
+        ) : (
+          <p className={`${body} mt-3 max-w-xl`}>
+            {applications.length > 0
+              ? "Nothing else is open right now."
+              : "No projects are taking applications right now."}{" "}
+            Leaders open them through the year, so check back or ask at a
+            general meeting what is being planned.
+          </p>
+        )}
+      </section>
+
+      {applications.length > 0 && (
+        <section className="mt-12">
+          <h2 className={sectionTitle}>Your applications</h2>
+          <ul className="mt-4 border-t border-[var(--border-subtle)]">
+            {applications.map((application) => (
+              <ApplicationRow key={application.id} application={application} />
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {myProposals.length > 0 && (
+        <section className="mt-12">
+          <h2 className={sectionTitle}>What you proposed</h2>
+          <ul className="mt-4 border-t border-[var(--border-subtle)]">
+            {myProposals.map((proposal) => (
+              <ProposalRow key={proposal.id} proposal={proposal} />
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <ProposeSection canPropose={canApply} />
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/initiatives/page.tsx b/sites/mainweb/app/(portal)/initiatives/page.tsx
index fc963737..cb4bcbec 100644
--- a/sites/mainweb/app/(portal)/initiatives/page.tsx
+++ b/sites/mainweb/app/(portal)/initiatives/page.tsx
@@ -1,592 +1,17 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  ApplicationChip,
-  InitiativeChip,
-  initiativeState,
-  seatLabel,
-} from "@/components/portal/initiatives/chips";
-import {
-  InitiativeFields,
-  emptyDraft,
-  toInput,
-} from "@/components/portal/initiatives/form-fields";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  fieldHint,
-  fieldLabel,
-  input,
-  itemTitle,
-  meta,
-  object,
-  page,
-  pageDek,
-  pageTitle,
-  sectionTitle,
-} from "@/components/portal/ui";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import type { RouterOutputs } from "@query/api";
-
-type OpenInitiative = RouterOutputs["initiative"]["list"][number];
-type MyApplication = RouterOutputs["initiative"]["myApplications"][number];
-type MyProposal = RouterOutputs["initiative"]["myProposals"][number];
-
-const errorText = "text-sm text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
-const inlineLink =
-  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
-const listRow = "border-b border-[var(--border-subtle)] py-5";
-
-/**
- * Proposing something to run, rather than joining something that exists.
- *
- * An admin reviews it; approving turns the proposal into a draft project
- * and makes the proposer a project leader, so this is the one place a member
- * can earn that role.
- */
-function ProposeSection({ canPropose }: { canPropose: boolean }) {
-  const utils = trpc.useUtils();
-  const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState(emptyDraft);
-
-  const propose = trpc.initiative.propose.useMutation({
-    onSuccess: async () => {
-      setOpen(false);
-      setDraft(emptyDraft);
-      await utils.initiative.myProposals.invalidate();
-    },
-  });
-
-  if (!canPropose) return null;
-
-  if (!open) {
-    return (
-      <section className="mt-12 flex flex-col justify-between gap-4 border-t border-[var(--border-subtle)] pt-6 md:flex-row md:items-end">
-        <div>
-          <h2 className={sectionTitle}>Have something to build?</h2>
-          <p className={`${body} mt-2 max-w-xl`}>
-            Pitch it. If it is approved you become its project leader and pick
-            who joins.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setOpen(true)}
-          className={`${btnSecondary} shrink-0 self-start md:self-auto`}
-        >
-          Propose a project
-        </button>
-      </section>
-    );
-  }
-
-  return (
-    <section className="mt-12 border-t border-[var(--border-subtle)] pt-6">
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          propose.mutate(toInput(draft));
-        }}
-      >
-        <h2 className={sectionTitle}>Propose a project</h2>
-        <p className={`${body} mt-2 mb-5 max-w-xl`}>
-          An organiser reviews it. If it is approved you lead it and pick who
-          joins.
-        </p>
-        <InitiativeFields draft={draft} onChange={setDraft} />
-
-        <div className="mt-5 flex flex-wrap gap-3">
-          <button
-            type="submit"
-            disabled={propose.isPending}
-            className={btnPrimary}
-          >
-            {propose.isPending ? "Sending…" : "Send for review"}
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              setOpen(false);
-              propose.reset();
-            }}
-            className={btnSecondary}
-          >
-            Cancel
-          </button>
-        </div>
-
-        {propose.error && (
-          <p aria-live="polite" className={`${errorText} mt-3`}>
-            {propose.error.message}
-          </p>
-        )}
-      </form>
-    </section>
-  );
-}
-
-function ProposalRow({ proposal }: { proposal: MyProposal }) {
-  const utils = trpc.useUtils();
-
-  const withdraw = trpc.initiative.withdrawProposal.useMutation({
-    onSuccess: async () => {
-      await utils.initiative.myProposals.invalidate();
-    },
-  });
-
-  const state = initiativeState(proposal);
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import InitiativesPage from "./InitiativesPage";
 
+export default function Page() {
   return (
-    <li className={listRow}>
-      <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="text-[15px] font-semibold text-[var(--text-primary)]">
-              {proposal.title}
-            </h3>
-            <InitiativeChip state={state} />
-          </div>
-          {proposal.summary && (
-            <p className={`${body} mt-1`}>{proposal.summary}</p>
-          )}
-
-          {/* The reviewer's note is the whole point of a decline — without it a
-              member has no idea what to change before pitching again. */}
-          {proposal.reviewNote && (
-            <p
-              className={`${body} mt-3 border-l-2 border-[var(--border-medium)] pl-3`}
-            >
-              {proposal.reviewNote}
-            </p>
-          )}
-
-          {proposal.status === "draft" && (
-            <p className={`${body} mt-2`}>
-              Approved. Finish writing it and open it to members from{" "}
-              <Link href="/lead" className={inlineLink}>
-                your projects
-              </Link>
-              .
-            </p>
-          )}
-        </div>
-
-        {proposal.status === "proposed" && (
-          <button
-            type="button"
-            disabled={withdraw.isPending}
-            onClick={() => withdraw.mutate({ id: proposal.id })}
-            className={`${quietAction} shrink-0`}
-          >
-            Withdraw
-          </button>
-        )}
-      </div>
-
-      {withdraw.error && (
-        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
-      )}
-    </li>
-  );
-}
-
-function OpenRow({
-  initiative,
-  canApply,
-}: {
-  initiative: OpenInitiative;
-  canApply: boolean;
-}) {
-  const utils = trpc.useUtils();
-  const [writing, setWriting] = useState(false);
-  const [pitch, setPitch] = useState("");
-
-  // Both lists move together: applying takes a project out of one and puts
-  // it into the other, so refreshing one alone renders it twice.
-  const refresh = async () => {
-    await Promise.all([
-      utils.initiative.list.invalidate(),
-      utils.initiative.myApplications.invalidate(),
-    ]);
-  };
-
-  const [resume, setResume] = useState<{
-    fileName: string;
-    dataUrl: string;
-  } | null>(null);
-  const [resumeError, setResumeError] = useState<string | null>(null);
-
-  const join = trpc.initiative.requestToJoin.useMutation({
-    onSuccess: async () => {
-      setWriting(false);
-      setPitch("");
-      setResume(null);
-      await refresh();
-    },
-  });
-
-  // 2 MB is the server's whole-payload cap; catching it here saves a round
-  // trip and says which file was too big.
-  const readResume = (file: File | undefined) => {
-    setResumeError(null);
-    // Cleared first: a rejected pick must not leave the previous file attached
-    // and submitted under the error.
-    setResume(null);
-    if (!file) return;
-    if (file.type !== "application/pdf") {
-      return setResumeError(
-        "Your resume must be a PDF. Export it as one and try again.",
-      );
-    }
-    if (file.size > 1.4 * 1024 * 1024) {
-      return setResumeError(
-        "That PDF is over 1.4 MB. Compress it and try again.",
-      );
-    }
-    const reader = new FileReader();
-    reader.onload = () =>
-      setResume({ fileName: file.name, dataUrl: String(reader.result) });
-    reader.onerror = () =>
-      setResumeError("Could not read that file. Try choosing it again.");
-    reader.readAsDataURL(file);
-  };
-
-  return (
-    <li className={`${object} p-5`}>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <h3 className={itemTitle}>{initiative.title}</h3>
-          <p className={`${meta} mt-1`}>
-            Led by {initiative.leaderName ?? "a project leader"} ·{" "}
-            {seatLabel(initiative.accepted, initiative.maxMembers)}
-            {initiative.commitment ? ` · ${initiative.commitment}` : ""}
-          </p>
-        </div>
-
-        {initiative.isFull ? (
-          <span className="shrink-0 text-sm font-semibold text-[var(--text-subtle)]">
-            Full
-          </span>
-        ) : (
-          !writing &&
-          canApply && (
-            <button
-              type="button"
-              onClick={() => setWriting(true)}
-              className={`${btnSecondary} shrink-0`}
-            >
-              Apply
-            </button>
-          )
-        )}
-      </div>
-
-      {initiative.summary && (
-        <p className="mt-3 text-[15px] leading-relaxed text-[var(--text-secondary)]">
-          {initiative.summary}
-        </p>
-      )}
-      {initiative.description && (
-        <p className={`${body} mt-2 whitespace-pre-line`}>
-          {initiative.description}
-        </p>
-      )}
-
-      {!canApply && !initiative.isFull && (
-        <p className={`${meta} mt-3`}>
-          Joining needs an active membership.{" "}
-          <Link href="/dashboard" className={inlineLink}>
-            Become a member
-          </Link>
-        </p>
-      )}
-
-      {writing && (
-        <form
-          className="mt-5 border-t border-[var(--border-subtle)] pt-5"
-          onSubmit={(event) => {
-            event.preventDefault();
-            join.mutate({
-              initiativeId: initiative.id,
-              pitch: pitch.trim(),
-              resume: resume ?? undefined,
-            });
-          }}
-        >
-          <label htmlFor={`pitch-${initiative.id}`} className={fieldLabel}>
-            Why do you want to join?
-          </label>
-          <textarea
-            id={`pitch-${initiative.id}`}
-            rows={3}
-            required
-            maxLength={1000}
-            value={pitch}
-            onChange={(event) => setPitch(event.target.value)}
-            placeholder="What you want to work on, and what you have built before."
-            className={input}
-          />
-
-          <label
-            htmlFor={`resume-${initiative.id}`}
-            className={`${fieldLabel} mt-5`}
-          >
-            Resume (PDF, optional)
-          </label>
-          <input
-            id={`resume-${initiative.id}`}
-            type="file"
-            accept="application/pdf,.pdf"
-            onChange={(event) => readResume(event.target.files?.[0])}
-            className="block w-full text-sm text-[var(--text-muted)] file:mr-3 file:cursor-pointer file:rounded-[var(--radius-sm)] file:border file:border-solid file:border-[var(--border-medium)] file:bg-transparent file:px-4 file:py-2 file:text-sm file:font-semibold file:text-[var(--text-primary)] hover:file:bg-[var(--bg-secondary)]"
-          />
-          {resume && <p className={fieldHint}>Attached: {resume.fileName}</p>}
-          {resumeError && (
-            <p aria-live="polite" className={`${errorText} mt-1.5`}>
-              {resumeError}
-            </p>
-          )}
-
-          <div className="mt-5 flex flex-wrap gap-3">
-            <button
-              type="submit"
-              disabled={join.isPending || !pitch.trim()}
-              className={btnPrimary}
-            >
-              {join.isPending ? "Sending…" : "Send application"}
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setWriting(false);
-                join.reset();
-              }}
-              className={btnSecondary}
-            >
-              Cancel
-            </button>
-          </div>
-
-          {join.error && (
-            <p aria-live="polite" className={`${errorText} mt-3`}>
-              {join.error.message}
-            </p>
-          )}
-        </form>
-      )}
-    </li>
-  );
-}
-
-function ApplicationRow({ application }: { application: MyApplication }) {
-  const utils = trpc.useUtils();
-  const [confirm, setConfirm] = useState(false);
-
-  const withdraw = trpc.initiative.withdraw.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.initiative.list.invalidate(),
-        utils.initiative.myApplications.invalidate(),
-      ]);
-    },
-  });
-
-  // Nothing to leave once the leader has said no, and an archived project is
-  // over — the control would change nothing either way.
-  const canWithdraw =
-    application.myStatus !== "rejected" && application.archivedAt === null;
-  const leaving = application.myStatus === "accepted";
-
-  return (
-    <li className={listRow}>
-      <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="text-[15px] font-semibold text-[var(--text-primary)]">
-              {application.title}
-            </h3>
-            <ApplicationChip status={application.myStatus} />
-          </div>
-          <p className={`${meta} mt-1`}>
-            Led by {application.leaderName ?? "a project leader"}
-            {application.archivedAt !== null ? " · archived" : ""}
-          </p>
-          {application.leaderEmail && (
-            <p className={`${body} mt-1`}>
-              Reach them at{" "}
-              <a
-                href={`mailto:${application.leaderEmail}`}
-                className={inlineLink}
-              >
-                {application.leaderEmail}
-              </a>
-            </p>
-          )}
-        </div>
-
-        {canWithdraw &&
-          (confirm ? (
-            <span className="flex flex-wrap items-center gap-3">
-              <span className="text-sm text-[var(--text-muted)]">
-                {leaving ? "Leave this project?" : "Withdraw your application?"}
-              </span>
-              <button
-                type="button"
-                disabled={withdraw.isPending}
-                onClick={() => {
-                  withdraw.mutate({ initiativeId: application.id });
-                  setConfirm(false);
-                }}
-                className={btnDanger}
-              >
-                {leaving ? "Leave" : "Withdraw"}
-              </button>
-              <button
-                type="button"
-                onClick={() => setConfirm(false)}
-                className={btnSecondary}
-              >
-                Cancel
-              </button>
-            </span>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setConfirm(true)}
-              className={`${quietAction} shrink-0`}
-            >
-              {leaving ? "Leave" : "Withdraw"}
-            </button>
-          ))}
-      </div>
-
-      {withdraw.error && (
-        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
-      )}
-    </li>
-  );
-}
-
-export default function InitiativesPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  // Queries wait on the session, so a signed-out visitor otherwise sits on
-  // the loading screen forever.
-  useEffect(() => {
-    if (status === "unauthenticated") router.push(loginHref());
-  }, [status, router]);
-
-  const open = trpc.initiative.list.useQuery(undefined, { enabled: !!session });
-  const mine = trpc.initiative.myApplications.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const memberStatus = trpc.member.checkStatus.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const proposals = trpc.initiative.myProposals.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (
-    status === "loading" ||
-    open.isPending ||
-    mine.isPending ||
-    proposals.isPending
-  ) {
-    return <LoadingScreen />;
-  }
-
-  const applications = mine.data ?? [];
-  const myProposals = proposals.data ?? [];
-  // Already applied belongs in the member's own list, not in the one offering
-  // them a chance to apply again.
-  const joinable = (open.data ?? []).filter((row) => row.myStatus === null);
-  const canApply = !!memberStatus.data?.isActive;
-  const loadError = open.error ?? mine.error ?? proposals.error;
-
-  return (
-    <div className={page}>
-      <Link
-        href="/dashboard"
-        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
-      >
-        ← Dashboard
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>
-          {joinable.length > 0
-            ? `${joinable.length} club project${joinable.length === 1 ? " is" : "s are"} taking members`
-            : "Club projects"}
-        </h1>
-        <p className={pageDek}>
-          Projects the club runs year-round. Leaders post what they are building
-          and pick who joins.
-        </p>
-      </header>
-
-      {loadError && (
-        <p className={`${errorText} mt-6`}>
-          {loadError.message} Refresh the page to try again.
-        </p>
-      )}
-
-      <section className="mt-10">
-        <h2 className={sectionTitle}>Open to join</h2>
-        {joinable.length > 0 ? (
-          <ul className="mt-5 space-y-4">
-            {joinable.map((initiative) => (
-              <OpenRow
-                key={initiative.id}
-                initiative={initiative}
-                canApply={canApply}
-              />
-            ))}
-          </ul>
-        ) : (
-          <p className={`${body} mt-3 max-w-xl`}>
-            {applications.length > 0
-              ? "Nothing else is open right now."
-              : "No projects are taking applications right now."}{" "}
-            Leaders open them through the year, so check back or ask at a
-            general meeting what is being planned.
-          </p>
-        )}
-      </section>
-
-      {applications.length > 0 && (
-        <section className="mt-12">
-          <h2 className={sectionTitle}>Your applications</h2>
-          <ul className="mt-4 border-t border-[var(--border-subtle)]">
-            {applications.map((application) => (
-              <ApplicationRow key={application.id} application={application} />
-            ))}
-          </ul>
-        </section>
-      )}
-
-      {myProposals.length > 0 && (
-        <section className="mt-12">
-          <h2 className={sectionTitle}>What you proposed</h2>
-          <ul className="mt-4 border-t border-[var(--border-subtle)]">
-            {myProposals.map((proposal) => (
-              <ProposalRow key={proposal.id} proposal={proposal} />
-            ))}
-          </ul>
-        </section>
-      )}
-
-      <ProposeSection canPropose={canApply} />
-    </div>
+    <PrefetchedPage
+      reads={(c) => [
+        ["initiative.list", undefined, c.initiative.list()],
+        ["initiative.myApplications", undefined, c.initiative.myApplications()],
+        ["member.checkStatus", undefined, c.member.checkStatus()],
+        ["initiative.myProposals", undefined, c.initiative.myProposals()],
+      ]}
+    >
+      <InitiativesPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/judge/register/JudgeRegisterPage.tsx b/sites/mainweb/app/(portal)/judge/register/JudgeRegisterPage.tsx
new file mode 100644
index 00000000..38645b30
--- /dev/null
+++ b/sites/mainweb/app/(portal)/judge/register/JudgeRegisterPage.tsx
@@ -0,0 +1,448 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { loginHref } from "@/lib/safe-callback";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { trpc } from "@/lib/trpc";
+import {
+  FormInput,
+  FormTextarea,
+  FormChipSelect,
+  FormMultiChipSelect,
+  StepProgress,
+  StepContainer,
+  FormErrorAlert,
+  FormNavigation,
+} from "@/components/hackathon/FormComponents";
+import { SHIRT_SIZES, DIETARY_OPTIONS } from "@/components/hackathon/constants";
+import Link from "next/link";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  body,
+  btnPrimary,
+  btnSecondary,
+  fieldHint,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+} from "@/components/portal/ui";
+
+const JUDGE_REGISTRATION_STEPS = [
+  "Event",
+  "About you",
+  "Experience",
+  "Logistics",
+];
+
+export default function JudgeRegisterPage() {
+  const router = useRouter();
+  const { data: session, status: authStatus } = useSession();
+  // Null until the judge moves, so the first step can depend on data that has
+  // not loaded yet.
+  const [pickedStep, setStep] = useState<number | null>(null);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery({});
+  // An application or a participant registration for the edition means the
+  // form would only end in a refusal from judge.register.
+  const signedIn = authStatus === "authenticated";
+  const { data: applications, isLoading: applicationsLoading } =
+    trpc.judge.myApplications.useQuery(undefined, { enabled: signedIn });
+  const { data: registrations, isLoading: registrationsLoading } =
+    trpc.hackathon.myRegistrations.useQuery(undefined, { enabled: signedIn });
+  const utils = trpc.useUtils();
+  const registerMutation = trpc.judge.register.useMutation({
+    onSuccess: () => {
+      setSuccess(true);
+      // Or /judge still offers "Apply to Judge", which now throws "already
+      // applied".
+      void utils.judge.myApplications.invalidate();
+    },
+    onError: (e) => setError(e.message),
+  });
+
+  // Form State
+  // /judge links here with the edition already chosen; starting step 0 empty
+  // made the judge pick it again.
+  const searchParams = useSearchParams();
+  const [linkedHackathonId] = useState(
+    () => searchParams.get("hackathonId") ?? "",
+  );
+  const [hackathonId, setHackathonId] = useState(linkedHackathonId);
+  const [preferredTrack, setPreferredTrack] = useState("");
+  // Null until edited, so the session's name and email fill in whenever it
+  // arrives without an effect to copy them over.
+  const [typedName, setName] = useState<string | null>(null);
+  const [typedEmail, setEmail] = useState<string | null>(null);
+  const name = typedName ?? session?.user?.name ?? "";
+  const email = typedEmail ?? session?.user?.email ?? "";
+  const [phone, setPhone] = useState("");
+  const [company, setCompany] = useState("");
+  const [title, setTitle] = useState("");
+  const [specialty, setSpecialty] = useState("");
+  const [linkedinUrl, setLinkedinUrl] = useState("");
+  const [githubUrl, setGithubUrl] = useState("");
+  const [previousExperience, setPreviousExperience] = useState("");
+  const [whyJudge, setWhyJudge] = useState("");
+  const [shirtSize, setShirtSize] = useState("");
+  const [dietary, setDietary] = useState<string[]>([]);
+
+  // judge.register is protected, so an outside professional following a shared
+  // link filled in all four steps and only then got "Not authenticated".
+  useEffect(() => {
+    if (authStatus === "unauthenticated") router.push(loginHref());
+  }, [authStatus, router]);
+
+  if (authStatus === "loading" || authStatus === "unauthenticated") {
+    return <LoadingScreen message="Checking your session…" />;
+  }
+
+  if (isLoading || applicationsLoading || registrationsLoading) {
+    return <LoadingScreen message="Loading hackathons…" />;
+  }
+
+  // `closed` belongs here: closing participant registration is the natural step
+  // *before* recruiting judges, and leaving it out emptied this page with no
+  // explanation exactly when organisers were sending the link out.
+  const activeHackathons =
+    hackathons?.filter(
+      // Announced too: judges are recruited before registration opens.
+      (h) =>
+        h.status === "announced" ||
+        h.status === "open" ||
+        h.status === "closed" ||
+        h.status === "in_progress",
+    ) || [];
+
+  const selectedHackathon = activeHackathons.find((h) => h.id === hackathonId);
+  const trackOptions = [
+    ...(selectedHackathon?.tracks ?? []),
+    ...(selectedHackathon?.challenges ?? []),
+  ];
+
+  // A link from /judge already chose the edition, so a valid one skips the
+  // picker; a stale or unknown id still lands on it.
+  const step =
+    pickedStep ??
+    (activeHackathons.some((h) => h.id === linkedHackathonId) ? 1 : 0);
+
+  const application = applications?.find((a) => a.hackathonId === hackathonId);
+  const isParticipant = !!registrations?.some(
+    (r) => r.hackathonId === hackathonId,
+  );
+
+  function validateStep(s: number): boolean {
+    setError("");
+    if (s === 0) {
+      if (!selectedHackathon) {
+        setError("Pick a hackathon to judge.");
+        return false;
+      }
+    } else if (s === 1) {
+      if (!name.trim()) {
+        setError("Enter your full name.");
+        return false;
+      }
+      if (!email.trim() || !email.includes("@")) {
+        setError("Enter a valid email address.");
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function handleNext() {
+    if (!validateStep(step)) return;
+    setStep(Math.min(step + 1, JUDGE_REGISTRATION_STEPS.length - 1));
+  }
+
+  function handleBack() {
+    setError("");
+    setStep(Math.max(step - 1, 0));
+  }
+
+  function handleSubmit() {
+    if (!validateStep(3)) return;
+    setError("");
+    registerMutation.mutate({
+      hackathonId,
+      name: name.trim(),
+      email: email.trim(),
+      phone: phone.trim() || undefined,
+      company: company.trim() || undefined,
+      title: title.trim() || undefined,
+      specialty: specialty.trim() || undefined,
+      linkedinUrl: linkedinUrl.trim() || undefined,
+      githubUrl: githubUrl.trim() || undefined,
+      previousExperience: previousExperience.trim() || undefined,
+      whyJudge: whyJudge.trim() || undefined,
+      shirtSize: shirtSize || undefined,
+      dietaryRestrictions: dietary.length ? dietary : undefined,
+      preferredTrack: preferredTrack || undefined,
+    });
+  }
+
+  if (success) {
+    return (
+      <main className={page}>
+        <div className="max-w-xl">
+          <h1 className={pageTitle}>Application received</h1>
+          {/* judge.setActive sends the approval email on the transition. */}
+          <p className={pageDek}>
+            An organiser will review it. You&apos;ll get an email once
+            you&apos;re approved.
+          </p>
+          <Link href="/judge" className={`mt-8 ${btnPrimary}`}>
+            See your application
+          </Link>
+        </div>
+      </main>
+    );
+  }
+
+  // Shown instead of the form: the edition is already settled one way or the
+  // other, and submitting would be refused.
+  if (selectedHackathon && (application || isParticipant)) {
+    return (
+      <main className={page}>
+        <div className="max-w-xl">
+          <h1 className={pageTitle}>
+            {application
+              ? application.approved
+                ? `You're judging ${selectedHackathon.name}`
+                : "Application received"
+              : `You're registered for ${selectedHackathon.name}`}
+          </h1>
+          <p className={pageDek}>
+            {application
+              ? application.approved
+                ? "An organiser approved your application. Open your edition on judging day."
+                : `An organiser will review your application to judge ${selectedHackathon.name}. You'll get an email once you're approved.`
+              : "People registered as participants can't judge the same event."}
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            {application ? (
+              <Link href="/judge" className={btnPrimary}>
+                See your application
+              </Link>
+            ) : (
+              <Link href="/hackathons" className={btnSecondary}>
+                Back to hackathons
+              </Link>
+            )}
+            <button
+              type="button"
+              onClick={() => {
+                setHackathonId("");
+                setStep(0);
+              }}
+              className={btnSecondary}
+            >
+              Choose another event
+            </button>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className={page}>
+      <Link
+        href="/hackathons"
+        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
+      >
+        ← All hackathons
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>Apply to judge</h1>
+        <p className={pageDek}>
+          Pick an event, tell us about yourself, and choose a track. Takes
+          about five minutes.
+        </p>
+      </header>
+
+      <div className="mt-10 max-w-3xl border-t border-[var(--border-subtle)] pt-6">
+        <StepProgress steps={JUDGE_REGISTRATION_STEPS} current={step} />
+
+        {step === 0 && (
+          <StepContainer title="Which event will you judge?">
+            {activeHackathons.length === 0 ? (
+              <p className={body}>
+                No hackathons are taking judge applications right now. Check
+                back closer to the next event.
+              </p>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {activeHackathons.map((h) => (
+                  <button
+                    key={h.id}
+                    type="button"
+                    aria-pressed={hackathonId === h.id}
+                    onClick={() => setHackathonId(h.id)}
+                    className={`rounded-[var(--radius-md)] border text-left p-5 min-h-11 transition-colors ${
+                      hackathonId === h.id
+                        ? "border-accent bg-[var(--accent-dim)]"
+                        : "border-[var(--border-subtle)] bg-[var(--bg-card)] hover:border-[var(--border-hover)]"
+                    }`}
+                  >
+                    <span className="block text-[17px] font-semibold text-[var(--text-primary)]">
+                      {h.name}
+                    </span>
+                    {h.description && (
+                      <span className={`mt-1 block line-clamp-2 ${meta}`}>
+                        {h.description}
+                      </span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            )}
+          </StepContainer>
+        )}
+
+        {step === 1 && (
+          <StepContainer title="About you">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <FormInput
+                label="Full name"
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Jane Doe"
+              />
+              <FormInput
+                label="Email"
+                required
+                type="email"
+                autoComplete="email"
+                spellCheck={false}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="jane@example.com"
+              />
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <FormInput
+                label="Company or organisation"
+                value={company}
+                onChange={(e) => setCompany(e.target.value)}
+                placeholder="Acme Corp"
+              />
+              <FormInput
+                label="Title or role"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Senior Software Engineer"
+              />
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <FormInput
+                label="Phone"
+                value={phone}
+                onChange={(e) => setPhone(e.target.value)}
+                placeholder="(555) 123-4567"
+              />
+              <FormInput
+                label="Specialty"
+                value={specialty}
+                onChange={(e) => setSpecialty(e.target.value)}
+                placeholder="e.g. AI, Web3, Design, Product"
+              />
+            </div>
+          </StepContainer>
+        )}
+
+        {step === 2 && (
+          <StepContainer title="Experience">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <FormInput
+                label="LinkedIn URL"
+                type="url"
+                value={linkedinUrl}
+                onChange={(e) => setLinkedinUrl(e.target.value)}
+                placeholder="https://linkedin.com/in/…"
+              />
+              <FormInput
+                label="GitHub URL"
+                type="url"
+                value={githubUrl}
+                onChange={(e) => setGithubUrl(e.target.value)}
+                placeholder="https://github.com/…"
+              />
+            </div>
+            <FormTextarea
+              label="Judging or mentoring you have done"
+              value={previousExperience}
+              onChange={(e) => setPreviousExperience(e.target.value)}
+              placeholder="Hackathons you have judged, students you have mentored…"
+              rows={3}
+            />
+            <FormTextarea
+              label="Why do you want to judge?"
+              value={whyJudge}
+              onChange={(e) => setWhyJudge(e.target.value)}
+              placeholder="What excites you about being a judge for this event?"
+              rows={3}
+            />
+          </StepContainer>
+        )}
+
+        {step === 3 && (
+          <StepContainer title="Logistics">
+            {/* The chosen edition's own labels, not free text, so organisers
+                placing judges in rooms see a track that exists. Leaving it
+                unset means "any project", which is a real and common answer. */}
+            {trackOptions.length > 0 ? (
+              <FormChipSelect
+                label="Track you would like to judge"
+                options={trackOptions}
+                value={preferredTrack}
+                onChange={setPreferredTrack}
+                allowDeselect
+              />
+            ) : (
+              <p className={fieldHint}>
+                This hackathon has no tracks published yet. You can apply
+                without one.
+              </p>
+            )}
+            <div className="mt-6">
+              <FormChipSelect
+                label="T-shirt size"
+                options={[...SHIRT_SIZES]}
+                value={shirtSize}
+                onChange={setShirtSize}
+                allowDeselect
+              />
+            </div>
+            <div className="mt-6">
+              <FormMultiChipSelect
+                label="Dietary restrictions"
+                options={[...DIETARY_OPTIONS]}
+                selected={dietary}
+                onChange={setDietary}
+                noneOption="None"
+              />
+            </div>
+          </StepContainer>
+        )}
+
+        <FormErrorAlert message={error} />
+        <FormNavigation
+          step={step}
+          totalSteps={JUDGE_REGISTRATION_STEPS.length}
+          onBack={handleBack}
+          onNext={handleNext}
+          onSubmit={handleSubmit}
+          onCancel={() => router.push("/hackathons")}
+          isSubmitting={registerMutation.isPending}
+        />
+      </div>
+    </main>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/judge/register/page.tsx b/sites/mainweb/app/(portal)/judge/register/page.tsx
index 38645b30..7f7cad32 100644
--- a/sites/mainweb/app/(portal)/judge/register/page.tsx
+++ b/sites/mainweb/app/(portal)/judge/register/page.tsx
@@ -1,448 +1,16 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { loginHref } from "@/lib/safe-callback";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { trpc } from "@/lib/trpc";
-import {
-  FormInput,
-  FormTextarea,
-  FormChipSelect,
-  FormMultiChipSelect,
-  StepProgress,
-  StepContainer,
-  FormErrorAlert,
-  FormNavigation,
-} from "@/components/hackathon/FormComponents";
-import { SHIRT_SIZES, DIETARY_OPTIONS } from "@/components/hackathon/constants";
-import Link from "next/link";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  body,
-  btnPrimary,
-  btnSecondary,
-  fieldHint,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-} from "@/components/portal/ui";
-
-const JUDGE_REGISTRATION_STEPS = [
-  "Event",
-  "About you",
-  "Experience",
-  "Logistics",
-];
-
-export default function JudgeRegisterPage() {
-  const router = useRouter();
-  const { data: session, status: authStatus } = useSession();
-  // Null until the judge moves, so the first step can depend on data that has
-  // not loaded yet.
-  const [pickedStep, setStep] = useState<number | null>(null);
-  const [error, setError] = useState("");
-  const [success, setSuccess] = useState(false);
-
-  const { data: hackathons, isLoading } = trpc.hackathon.list.useQuery({});
-  // An application or a participant registration for the edition means the
-  // form would only end in a refusal from judge.register.
-  const signedIn = authStatus === "authenticated";
-  const { data: applications, isLoading: applicationsLoading } =
-    trpc.judge.myApplications.useQuery(undefined, { enabled: signedIn });
-  const { data: registrations, isLoading: registrationsLoading } =
-    trpc.hackathon.myRegistrations.useQuery(undefined, { enabled: signedIn });
-  const utils = trpc.useUtils();
-  const registerMutation = trpc.judge.register.useMutation({
-    onSuccess: () => {
-      setSuccess(true);
-      // Or /judge still offers "Apply to Judge", which now throws "already
-      // applied".
-      void utils.judge.myApplications.invalidate();
-    },
-    onError: (e) => setError(e.message),
-  });
-
-  // Form State
-  // /judge links here with the edition already chosen; starting step 0 empty
-  // made the judge pick it again.
-  const searchParams = useSearchParams();
-  const [linkedHackathonId] = useState(
-    () => searchParams.get("hackathonId") ?? "",
-  );
-  const [hackathonId, setHackathonId] = useState(linkedHackathonId);
-  const [preferredTrack, setPreferredTrack] = useState("");
-  // Null until edited, so the session's name and email fill in whenever it
-  // arrives without an effect to copy them over.
-  const [typedName, setName] = useState<string | null>(null);
-  const [typedEmail, setEmail] = useState<string | null>(null);
-  const name = typedName ?? session?.user?.name ?? "";
-  const email = typedEmail ?? session?.user?.email ?? "";
-  const [phone, setPhone] = useState("");
-  const [company, setCompany] = useState("");
-  const [title, setTitle] = useState("");
-  const [specialty, setSpecialty] = useState("");
-  const [linkedinUrl, setLinkedinUrl] = useState("");
-  const [githubUrl, setGithubUrl] = useState("");
-  const [previousExperience, setPreviousExperience] = useState("");
-  const [whyJudge, setWhyJudge] = useState("");
-  const [shirtSize, setShirtSize] = useState("");
-  const [dietary, setDietary] = useState<string[]>([]);
-
-  // judge.register is protected, so an outside professional following a shared
-  // link filled in all four steps and only then got "Not authenticated".
-  useEffect(() => {
-    if (authStatus === "unauthenticated") router.push(loginHref());
-  }, [authStatus, router]);
-
-  if (authStatus === "loading" || authStatus === "unauthenticated") {
-    return <LoadingScreen message="Checking your session…" />;
-  }
-
-  if (isLoading || applicationsLoading || registrationsLoading) {
-    return <LoadingScreen message="Loading hackathons…" />;
-  }
-
-  // `closed` belongs here: closing participant registration is the natural step
-  // *before* recruiting judges, and leaving it out emptied this page with no
-  // explanation exactly when organisers were sending the link out.
-  const activeHackathons =
-    hackathons?.filter(
-      // Announced too: judges are recruited before registration opens.
-      (h) =>
-        h.status === "announced" ||
-        h.status === "open" ||
-        h.status === "closed" ||
-        h.status === "in_progress",
-    ) || [];
-
-  const selectedHackathon = activeHackathons.find((h) => h.id === hackathonId);
-  const trackOptions = [
-    ...(selectedHackathon?.tracks ?? []),
-    ...(selectedHackathon?.challenges ?? []),
-  ];
-
-  // A link from /judge already chose the edition, so a valid one skips the
-  // picker; a stale or unknown id still lands on it.
-  const step =
-    pickedStep ??
-    (activeHackathons.some((h) => h.id === linkedHackathonId) ? 1 : 0);
-
-  const application = applications?.find((a) => a.hackathonId === hackathonId);
-  const isParticipant = !!registrations?.some(
-    (r) => r.hackathonId === hackathonId,
-  );
-
-  function validateStep(s: number): boolean {
-    setError("");
-    if (s === 0) {
-      if (!selectedHackathon) {
-        setError("Pick a hackathon to judge.");
-        return false;
-      }
-    } else if (s === 1) {
-      if (!name.trim()) {
-        setError("Enter your full name.");
-        return false;
-      }
-      if (!email.trim() || !email.includes("@")) {
-        setError("Enter a valid email address.");
-        return false;
-      }
-    }
-    return true;
-  }
-
-  function handleNext() {
-    if (!validateStep(step)) return;
-    setStep(Math.min(step + 1, JUDGE_REGISTRATION_STEPS.length - 1));
-  }
-
-  function handleBack() {
-    setError("");
-    setStep(Math.max(step - 1, 0));
-  }
-
-  function handleSubmit() {
-    if (!validateStep(3)) return;
-    setError("");
-    registerMutation.mutate({
-      hackathonId,
-      name: name.trim(),
-      email: email.trim(),
-      phone: phone.trim() || undefined,
-      company: company.trim() || undefined,
-      title: title.trim() || undefined,
-      specialty: specialty.trim() || undefined,
-      linkedinUrl: linkedinUrl.trim() || undefined,
-      githubUrl: githubUrl.trim() || undefined,
-      previousExperience: previousExperience.trim() || undefined,
-      whyJudge: whyJudge.trim() || undefined,
-      shirtSize: shirtSize || undefined,
-      dietaryRestrictions: dietary.length ? dietary : undefined,
-      preferredTrack: preferredTrack || undefined,
-    });
-  }
-
-  if (success) {
-    return (
-      <main className={page}>
-        <div className="max-w-xl">
-          <h1 className={pageTitle}>Application received</h1>
-          {/* judge.setActive sends the approval email on the transition. */}
-          <p className={pageDek}>
-            An organiser will review it. You&apos;ll get an email once
-            you&apos;re approved.
-          </p>
-          <Link href="/judge" className={`mt-8 ${btnPrimary}`}>
-            See your application
-          </Link>
-        </div>
-      </main>
-    );
-  }
-
-  // Shown instead of the form: the edition is already settled one way or the
-  // other, and submitting would be refused.
-  if (selectedHackathon && (application || isParticipant)) {
-    return (
-      <main className={page}>
-        <div className="max-w-xl">
-          <h1 className={pageTitle}>
-            {application
-              ? application.approved
-                ? `You're judging ${selectedHackathon.name}`
-                : "Application received"
-              : `You're registered for ${selectedHackathon.name}`}
-          </h1>
-          <p className={pageDek}>
-            {application
-              ? application.approved
-                ? "An organiser approved your application. Open your edition on judging day."
-                : `An organiser will review your application to judge ${selectedHackathon.name}. You'll get an email once you're approved.`
-              : "People registered as participants can't judge the same event."}
-          </p>
-          <div className="mt-8 flex flex-wrap gap-3">
-            {application ? (
-              <Link href="/judge" className={btnPrimary}>
-                See your application
-              </Link>
-            ) : (
-              <Link href="/hackathons" className={btnSecondary}>
-                Back to hackathons
-              </Link>
-            )}
-            <button
-              type="button"
-              onClick={() => {
-                setHackathonId("");
-                setStep(0);
-              }}
-              className={btnSecondary}
-            >
-              Choose another event
-            </button>
-          </div>
-        </div>
-      </main>
-    );
-  }
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import JudgeRegisterPage from "./JudgeRegisterPage";
 
+export default function Page() {
   return (
-    <main className={page}>
-      <Link
-        href="/hackathons"
-        className="text-[13px] text-[var(--text-subtle)] hover:text-[var(--text-primary)] transition-colors"
-      >
-        ← All hackathons
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>Apply to judge</h1>
-        <p className={pageDek}>
-          Pick an event, tell us about yourself, and choose a track. Takes
-          about five minutes.
-        </p>
-      </header>
-
-      <div className="mt-10 max-w-3xl border-t border-[var(--border-subtle)] pt-6">
-        <StepProgress steps={JUDGE_REGISTRATION_STEPS} current={step} />
-
-        {step === 0 && (
-          <StepContainer title="Which event will you judge?">
-            {activeHackathons.length === 0 ? (
-              <p className={body}>
-                No hackathons are taking judge applications right now. Check
-                back closer to the next event.
-              </p>
-            ) : (
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                {activeHackathons.map((h) => (
-                  <button
-                    key={h.id}
-                    type="button"
-                    aria-pressed={hackathonId === h.id}
-                    onClick={() => setHackathonId(h.id)}
-                    className={`rounded-[var(--radius-md)] border text-left p-5 min-h-11 transition-colors ${
-                      hackathonId === h.id
-                        ? "border-accent bg-[var(--accent-dim)]"
-                        : "border-[var(--border-subtle)] bg-[var(--bg-card)] hover:border-[var(--border-hover)]"
-                    }`}
-                  >
-                    <span className="block text-[17px] font-semibold text-[var(--text-primary)]">
-                      {h.name}
-                    </span>
-                    {h.description && (
-                      <span className={`mt-1 block line-clamp-2 ${meta}`}>
-                        {h.description}
-                      </span>
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
-          </StepContainer>
-        )}
-
-        {step === 1 && (
-          <StepContainer title="About you">
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              <FormInput
-                label="Full name"
-                required
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="Jane Doe"
-              />
-              <FormInput
-                label="Email"
-                required
-                type="email"
-                autoComplete="email"
-                spellCheck={false}
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="jane@example.com"
-              />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              <FormInput
-                label="Company or organisation"
-                value={company}
-                onChange={(e) => setCompany(e.target.value)}
-                placeholder="Acme Corp"
-              />
-              <FormInput
-                label="Title or role"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                placeholder="Senior Software Engineer"
-              />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              <FormInput
-                label="Phone"
-                value={phone}
-                onChange={(e) => setPhone(e.target.value)}
-                placeholder="(555) 123-4567"
-              />
-              <FormInput
-                label="Specialty"
-                value={specialty}
-                onChange={(e) => setSpecialty(e.target.value)}
-                placeholder="e.g. AI, Web3, Design, Product"
-              />
-            </div>
-          </StepContainer>
-        )}
-
-        {step === 2 && (
-          <StepContainer title="Experience">
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-              <FormInput
-                label="LinkedIn URL"
-                type="url"
-                value={linkedinUrl}
-                onChange={(e) => setLinkedinUrl(e.target.value)}
-                placeholder="https://linkedin.com/in/…"
-              />
-              <FormInput
-                label="GitHub URL"
-                type="url"
-                value={githubUrl}
-                onChange={(e) => setGithubUrl(e.target.value)}
-                placeholder="https://github.com/…"
-              />
-            </div>
-            <FormTextarea
-              label="Judging or mentoring you have done"
-              value={previousExperience}
-              onChange={(e) => setPreviousExperience(e.target.value)}
-              placeholder="Hackathons you have judged, students you have mentored…"
-              rows={3}
-            />
-            <FormTextarea
-              label="Why do you want to judge?"
-              value={whyJudge}
-              onChange={(e) => setWhyJudge(e.target.value)}
-              placeholder="What excites you about being a judge for this event?"
-              rows={3}
-            />
-          </StepContainer>
-        )}
-
-        {step === 3 && (
-          <StepContainer title="Logistics">
-            {/* The chosen edition's own labels, not free text, so organisers
-                placing judges in rooms see a track that exists. Leaving it
-                unset means "any project", which is a real and common answer. */}
-            {trackOptions.length > 0 ? (
-              <FormChipSelect
-                label="Track you would like to judge"
-                options={trackOptions}
-                value={preferredTrack}
-                onChange={setPreferredTrack}
-                allowDeselect
-              />
-            ) : (
-              <p className={fieldHint}>
-                This hackathon has no tracks published yet. You can apply
-                without one.
-              </p>
-            )}
-            <div className="mt-6">
-              <FormChipSelect
-                label="T-shirt size"
-                options={[...SHIRT_SIZES]}
-                value={shirtSize}
-                onChange={setShirtSize}
-                allowDeselect
-              />
-            </div>
-            <div className="mt-6">
-              <FormMultiChipSelect
-                label="Dietary restrictions"
-                options={[...DIETARY_OPTIONS]}
-                selected={dietary}
-                onChange={setDietary}
-                noneOption="None"
-              />
-            </div>
-          </StepContainer>
-        )}
-
-        <FormErrorAlert message={error} />
-        <FormNavigation
-          step={step}
-          totalSteps={JUDGE_REGISTRATION_STEPS.length}
-          onBack={handleBack}
-          onNext={handleNext}
-          onSubmit={handleSubmit}
-          onCancel={() => router.push("/hackathons")}
-          isSubmitting={registerMutation.isPending}
-        />
-      </div>
-    </main>
+    <PrefetchedPage
+      reads={(c) => [
+        ["hackathon.list", {}, c.hackathon.list({})],
+        ["judge.myApplications", undefined, c.judge.myApplications()],
+        ["hackathon.myRegistrations", undefined, c.hackathon.myRegistrations()],
+      ]}
+    >
+      <JudgeRegisterPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/lead/LeadPage.tsx b/sites/mainweb/app/(portal)/lead/LeadPage.tsx
new file mode 100644
index 00000000..d9000903
--- /dev/null
+++ b/sites/mainweb/app/(portal)/lead/LeadPage.tsx
@@ -0,0 +1,365 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  InitiativeChip,
+  initiativeState,
+  seatLabel,
+} from "@/components/portal/initiatives/chips";
+import {
+  InitiativeFields,
+  draftFrom,
+  toInput,
+} from "@/components/portal/initiatives/form-fields";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  chip,
+  itemTitle,
+  kicker,
+  label,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+  textLink,
+} from "@/components/portal/ui";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import type { RouterOutputs } from "@query/api";
+
+type LeadInitiative = RouterOutputs["initiative"]["listMine"][number];
+
+const statuses = [
+  { value: "draft", label: "Draft" },
+  { value: "open", label: "Open" },
+  { value: "closed", label: "Closed" },
+] as const;
+
+const errorText = "text-sm text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
+
+function InitiativeForm({
+  initiative,
+  onDone,
+}: {
+  initiative?: LeadInitiative;
+  onDone: () => void;
+}) {
+  const utils = trpc.useUtils();
+  const [error, setError] = useState<string | null>(null);
+  const [draft, setDraft] = useState(() => draftFrom(initiative));
+
+  const done = async () => {
+    await utils.initiative.listMine.invalidate();
+    onDone();
+  };
+
+  const create = trpc.initiative.create.useMutation({
+    onSuccess: done,
+    onError: (e) => setError(e.message),
+  });
+  const update = trpc.initiative.update.useMutation({
+    onSuccess: done,
+    onError: (e) => setError(e.message),
+  });
+  const pending = create.isPending || update.isPending;
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        setError(null);
+        const values = toInput(draft);
+        if (initiative) update.mutate({ ...values, id: initiative.id });
+        else create.mutate(values);
+      }}
+    >
+      <h2 className={`${itemTitle} mb-4`}>
+        {initiative ? `Edit ${initiative.title}` : "New project"}
+      </h2>
+
+      <InitiativeFields draft={draft} onChange={setDraft} />
+
+      {error && <p className={`${errorText} mt-3`}>{error}</p>}
+
+      <div className="mt-5 flex flex-wrap gap-3">
+        <button type="submit" disabled={pending} className={btnPrimary}>
+          {pending ? "Saving…" : initiative ? "Save changes" : "Create draft"}
+        </button>
+        <button type="button" onClick={onDone} className={btnSecondary}>
+          Cancel
+        </button>
+      </div>
+
+      {!initiative && (
+        <p className={`${meta} mt-3`}>
+          It starts as a draft. Nothing reaches members until you open it.
+        </p>
+      )}
+    </form>
+  );
+}
+
+function InitiativeRow({ initiative }: { initiative: LeadInitiative }) {
+  const utils = trpc.useUtils();
+  const [editing, setEditing] = useState(false);
+  const [confirmArchive, setConfirmArchive] = useState(false);
+
+  // The applicants screen reads getById, so invalidating only the list leaves
+  // it serving a stale initiative.
+  const refresh = async () => {
+    await Promise.all([
+      utils.initiative.listMine.invalidate(),
+      utils.initiative.getById.invalidate({ id: initiative.id }),
+    ]);
+  };
+
+  const setStatus = trpc.initiative.setStatus.useMutation({
+    onSuccess: refresh,
+  });
+  const archive = trpc.initiative.setArchived.useMutation({
+    onSuccess: refresh,
+  });
+
+  if (editing) {
+    return (
+      <InitiativeForm
+        initiative={initiative}
+        onDone={() => setEditing(false)}
+      />
+    );
+  }
+
+  const state = initiativeState(initiative);
+  const archived = state === "archived";
+
+  return (
+    <>
+      <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}>{initiative.title}</h3>
+            <InitiativeChip state={state} />
+          </div>
+          {initiative.summary && (
+            <p className={`${body} mt-1`}>{initiative.summary}</p>
+          )}
+          <p className={`${meta} mt-1`}>
+            {seatLabel(initiative.accepted, initiative.maxMembers)}
+            {initiative.pending > 0
+              ? ` · ${initiative.pending} waiting on you`
+              : " · nobody waiting"}
+          </p>
+          {!initiative.isMine && (
+            <p className={`${meta} mt-1`}>Led by {initiative.leaderName}</p>
+          )}
+        </div>
+
+        <Link
+          href={`/lead/${initiative.id}`}
+          className={`${initiative.pending > 0 ? btnSecondary : textLink} shrink-0`}
+        >
+          {initiative.pending > 0
+            ? `Review ${initiative.pending} application${initiative.pending === 1 ? "" : "s"}`
+            : "Applications"}
+        </Link>
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-3">
+        <div
+          role="group"
+          aria-label="Status"
+          className="flex flex-wrap items-center gap-2"
+        >
+          <span className={label}>Status</span>
+          {statuses.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              aria-pressed={initiative.status === option.value}
+              disabled={archived || setStatus.isPending}
+              onClick={() =>
+                setStatus.mutate({ id: initiative.id, status: option.value })
+              }
+              className={`${chip(initiative.status === option.value)} disabled:cursor-not-allowed disabled:opacity-40`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+
+        <button
+          type="button"
+          onClick={() => setEditing(true)}
+          className={textLink}
+        >
+          Edit
+        </button>
+
+        <div className="flex flex-wrap items-center gap-3 sm:ml-auto">
+          {confirmArchive ? (
+            <>
+              <span className="text-sm text-[var(--text-muted)]">
+                {archived ? "Restore this project?" : "Archive this project?"}
+              </span>
+              <button
+                type="button"
+                onClick={() => {
+                  archive.mutate({
+                    id: initiative.id,
+                    archived: !archived,
+                  });
+                  setConfirmArchive(false);
+                }}
+                className={archived ? btnSecondary : btnDanger}
+              >
+                {archived ? "Restore" : "Archive"}
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirmArchive(false)}
+                className={btnSecondary}
+              >
+                Cancel
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setConfirmArchive(true)}
+              className={quietAction}
+            >
+              {archived ? "Restore" : "Archive"}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {(setStatus.error ?? archive.error) && (
+        <p className={`${errorText} mt-3`}>
+          {(setStatus.error ?? archive.error)?.message}
+        </p>
+      )}
+    </>
+  );
+}
+
+export default function LeadPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  // Queries wait on the session, so a signed-out visitor otherwise sits on
+  // the loading screen forever.
+  useEffect(() => {
+    if (status === "unauthenticated") router.push(loginHref());
+  }, [status, router]);
+  const [creating, setCreating] = useState(false);
+
+  const listing = trpc.initiative.listMine.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (status === "loading" || listing.isPending) return <LoadingScreen />;
+
+  if (listing.error) {
+    const forbidden = listing.error.data?.code === "FORBIDDEN";
+    return (
+      <div className={page}>
+        <h1 className={pageTitle}>
+          {forbidden
+            ? "This page is for project leaders"
+            : "Your projects did not load"}
+        </h1>
+        <p className={pageDek}>
+          {forbidden
+            ? "Pitch a project from the projects page. If it is approved, you lead it and manage it here."
+            : `${listing.error.message} Refresh the page to try again.`}
+        </p>
+        <Link href="/initiatives" className={`${textLink} mt-6`}>
+          Browse projects instead
+        </Link>
+      </div>
+    );
+  }
+
+  const initiatives = listing.data ?? [];
+  const waiting = initiatives.reduce((total, row) => total + row.pending, 0);
+
+  return (
+    <div className={page}>
+      <Link
+        href="/initiatives"
+        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
+      >
+        ← Club projects
+      </Link>
+
+      <header className="mt-6 flex flex-col justify-between gap-6 md:flex-row md:items-end">
+        <div>
+          <p className={kicker}>Projects you lead</p>
+          <h1 className={`${pageTitle} mt-2`}>
+            {waiting > 0
+              ? `${waiting} application${waiting === 1 ? "" : "s"} waiting on you`
+              : "Nothing waiting on you"}
+          </h1>
+          <p className={pageDek}>
+            Open a project to members, review who applies, and keep the team
+            list current.
+          </p>
+        </div>
+
+        {!creating && (
+          <button
+            type="button"
+            onClick={() => setCreating(true)}
+            className={`${btnPrimary} shrink-0 self-start md:self-auto`}
+          >
+            New project
+          </button>
+        )}
+      </header>
+
+      {creating && (
+        <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+          <InitiativeForm onDone={() => setCreating(false)} />
+        </section>
+      )}
+
+      {initiatives.length > 0 ? (
+        <ul className="mt-10 border-t border-[var(--border-subtle)]">
+          {initiatives.map((initiative) => (
+            <li
+              key={initiative.id}
+              className="border-b border-[var(--border-subtle)] py-6"
+            >
+              <InitiativeRow initiative={initiative} />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        !creating && (
+          <div className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+            <p className={`${body} max-w-xl`}>
+              You have no projects yet. A new one starts as a draft, so you can
+              write it up now and open it to members when you are ready.
+            </p>
+            <button
+              type="button"
+              onClick={() => setCreating(true)}
+              className={`${textLink} mt-4`}
+            >
+              Start a draft
+            </button>
+          </div>
+        )
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/lead/[id]/LeadInitiativePage.tsx b/sites/mainweb/app/(portal)/lead/[id]/LeadInitiativePage.tsx
new file mode 100644
index 00000000..5037c3f0
--- /dev/null
+++ b/sites/mainweb/app/(portal)/lead/[id]/LeadInitiativePage.tsx
@@ -0,0 +1,351 @@
+"use client";
+
+import { use, useState } from "react";
+import Link from "next/link";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  ApplicationChip,
+  InitiativeChip,
+  initiativeState,
+  seatLabel,
+} from "@/components/portal/initiatives/chips";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  label,
+  meta,
+  page,
+  pageDek,
+  pageTitle,
+  sectionTitle,
+  textLink,
+} from "@/components/portal/ui";
+import { trpc } from "@/lib/trpc";
+import type { RouterOutputs } from "@query/api";
+import type { ApplicationStatus } from "@query/db";
+
+type Applicant = RouterOutputs["initiative"]["getById"]["applicants"][number];
+
+const errorText = "text-sm text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--danger)] disabled:opacity-50";
+const backLink =
+  "text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]";
+const factRow =
+  "grid grid-cols-1 gap-1 border-b border-[var(--border-subtle)] py-3.5 sm:grid-cols-[200px_1fr] sm:gap-6";
+const factValue = "text-[15px] font-semibold text-[var(--text-primary)]";
+
+function ApplicantRow({
+  initiativeId,
+  applicant,
+  full,
+}: {
+  initiativeId: string;
+  applicant: Applicant;
+  full: boolean;
+}) {
+  const utils = trpc.useUtils();
+  const [confirmRemove, setConfirmRemove] = useState(false);
+  const [wantResume, setWantResume] = useState(false);
+
+  // Fetched on click, not with the queue: thirty applicants would otherwise
+  // mean thirty PDFs on page load.
+  const resume = trpc.initiative.applicantResume.useQuery(
+    { initiativeId, userId: applicant.userId },
+    { enabled: wantResume },
+  );
+
+  const decide = trpc.initiative.decide.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.initiative.getById.invalidate({ id: initiativeId }),
+        // The list row carries the pending count, so leaving it alone keeps
+        // offering a queue that is already empty.
+        utils.initiative.listMine.invalidate(),
+      ]);
+    },
+  });
+
+  const send = (decision: "accepted" | "rejected") =>
+    decide.mutate({ initiativeId, userId: applicant.userId, decision });
+
+  return (
+    <li className="border-b border-[var(--border-subtle)] 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">
+            <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+              {applicant.name ?? applicant.email}
+            </p>
+            <ApplicationChip status={applicant.status} side="leader" />
+          </div>
+          <p className={`${meta} mt-0.5`}>
+            <a
+              href={`mailto:${applicant.email}`}
+              className="transition-colors hover:text-[var(--text-primary)]"
+            >
+              {applicant.email}
+            </a>
+          </p>
+          {applicant.pitch && (
+            <p
+              className={`${body} mt-3 max-w-2xl whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`}
+            >
+              {applicant.pitch}
+            </p>
+          )}
+
+          {applicant.resumeFileName &&
+            (resume.data ? (
+              <a
+                href={resume.data.dataUrl}
+                download={resume.data.fileName}
+                className={`${textLink} mt-3`}
+              >
+                Download {resume.data.fileName}
+              </a>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setWantResume(true)}
+                disabled={resume.isFetching}
+                className={`${textLink} mt-3 disabled:opacity-50`}
+              >
+                {resume.isFetching
+                  ? "Loading resume…"
+                  : `Resume: ${applicant.resumeFileName}`}
+              </button>
+            ))}
+          {resume.error && (
+            <p aria-live="polite" className={`${errorText} mt-2`}>
+              {resume.error.message}
+            </p>
+          )}
+        </div>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-3">
+          {applicant.status === "pending" && (
+            <>
+              <button
+                type="button"
+                disabled={decide.isPending || full}
+                onClick={() => send("accepted")}
+                className={btnPrimary}
+              >
+                Accept
+              </button>
+              <button
+                type="button"
+                disabled={decide.isPending}
+                onClick={() => send("rejected")}
+                className={btnDanger}
+              >
+                Reject
+              </button>
+            </>
+          )}
+
+          {applicant.status === "rejected" && (
+            <button
+              type="button"
+              disabled={decide.isPending || full}
+              onClick={() => send("accepted")}
+              className={btnSecondary}
+            >
+              Accept after all
+            </button>
+          )}
+
+          {applicant.status === "accepted" &&
+            (confirmRemove ? (
+              <>
+                <span className="text-sm text-[var(--text-muted)]">
+                  Take them off the team?
+                </span>
+                <button
+                  type="button"
+                  disabled={decide.isPending}
+                  onClick={() => {
+                    send("rejected");
+                    setConfirmRemove(false);
+                  }}
+                  className={btnDanger}
+                >
+                  Remove
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setConfirmRemove(false)}
+                  className={btnSecondary}
+                >
+                  Cancel
+                </button>
+              </>
+            ) : (
+              <button
+                type="button"
+                onClick={() => setConfirmRemove(true)}
+                className={quietAction}
+              >
+                Remove
+              </button>
+            ))}
+        </div>
+      </div>
+
+      {decide.error && (
+        <p className={`${errorText} mt-3`}>{decide.error.message}</p>
+      )}
+    </li>
+  );
+}
+
+function Group({
+  title,
+  rows,
+  render,
+}: {
+  title: string;
+  rows: Applicant[];
+  render: (applicant: Applicant) => React.ReactNode;
+}) {
+  if (rows.length === 0) return null;
+  return (
+    <section className="mt-12">
+      <div className="flex items-baseline justify-between gap-4">
+        <h2 className={sectionTitle}>{title}</h2>
+        <span className={`${meta} tabular-nums`}>{rows.length}</span>
+      </div>
+      <ul className="mt-4 border-t border-[var(--border-subtle)]">
+        {rows.map(render)}
+      </ul>
+    </section>
+  );
+}
+
+export default function LeadInitiativePage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const detail = trpc.initiative.getById.useQuery({ id });
+
+  if (detail.isPending) return <LoadingScreen />;
+
+  if (detail.error) {
+    return (
+      <div className={page}>
+        <Link href="/lead" className={backLink}>
+          ← Your projects
+        </Link>
+        <h1 className={`${pageTitle} mt-6`}>This project did not load</h1>
+        <p className={pageDek}>
+          {detail.error.message} Go back to your projects and open it again.
+        </p>
+        <Link href="/lead" className={`${textLink} mt-6`}>
+          Back to your projects
+        </Link>
+      </div>
+    );
+  }
+
+  const { initiative, applicants, accepted } = detail.data;
+  const state = initiativeState(initiative);
+  const full =
+    initiative.maxMembers !== null && accepted >= initiative.maxMembers;
+
+  const inState = (...wanted: ApplicationStatus[]) =>
+    applicants.filter((row) => wanted.includes(row.status));
+
+  const row = (applicant: Applicant) => (
+    <ApplicantRow
+      key={applicant.userId}
+      initiativeId={initiative.id}
+      applicant={applicant}
+      full={full}
+    />
+  );
+
+  return (
+    <div className={page}>
+      <Link href="/lead" className={backLink}>
+        ← Your projects
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>{initiative.title}</h1>
+
+        {/* Said once, at the top: every Accept below is off and the reason has to
+            be readable without hovering a disabled button. */}
+        {full && (
+          <p className={pageDek}>
+            Every spot is taken. Raise the team size, or remove somebody, before
+            accepting anyone else.
+          </p>
+        )}
+
+        {state === "draft" && (
+          <p className={pageDek}>
+            This is still a draft, so members cannot see it or apply. Open it
+            from your projects list.
+          </p>
+        )}
+      </header>
+
+      <dl className="mt-8 max-w-3xl border-t border-[var(--border-subtle)]">
+        <div className={factRow}>
+          <dt className={label}>Status</dt>
+          <dd>
+            <InitiativeChip state={state} />
+          </dd>
+        </div>
+        <div className={factRow}>
+          <dt className={label}>Team</dt>
+          <dd className={factValue}>
+            {seatLabel(accepted, initiative.maxMembers)}
+          </dd>
+        </div>
+        {initiative.commitment && (
+          <div className={factRow}>
+            <dt className={label}>Commitment</dt>
+            <dd className={factValue}>{initiative.commitment}</dd>
+          </div>
+        )}
+      </dl>
+
+      {applicants.length === 0 ? (
+        <section className="mt-12">
+          <h2 className={sectionTitle}>Applications</h2>
+          <p className={`${body} mt-3 max-w-xl`}>
+            Nobody has applied yet.{" "}
+            {state === "open"
+              ? "It is open, so it is showing on the members' projects page."
+              : "Open it from your projects list and it will start showing to members."}
+          </p>
+          {state !== "open" && (
+            <Link href="/lead" className={`${textLink} mt-4`}>
+              Go to your projects
+            </Link>
+          )}
+        </section>
+      ) : (
+        <>
+          <Group
+            title="Waiting on you"
+            rows={inState("pending")}
+            render={row}
+          />
+          <Group title="On the team" rows={inState("accepted")} render={row} />
+          <Group
+            title="Turned down and withdrawn"
+            rows={inState("rejected", "withdrawn")}
+            render={row}
+          />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/lead/[id]/page.tsx b/sites/mainweb/app/(portal)/lead/[id]/page.tsx
index 5037c3f0..06dafe07 100644
--- a/sites/mainweb/app/(portal)/lead/[id]/page.tsx
+++ b/sites/mainweb/app/(portal)/lead/[id]/page.tsx
@@ -1,351 +1,15 @@
-"use client";
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import LeadInitiativePage from "./LeadInitiativePage";
 
-import { use, useState } from "react";
-import Link from "next/link";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  ApplicationChip,
-  InitiativeChip,
-  initiativeState,
-  seatLabel,
-} from "@/components/portal/initiatives/chips";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  label,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-  sectionTitle,
-  textLink,
-} from "@/components/portal/ui";
-import { trpc } from "@/lib/trpc";
-import type { RouterOutputs } from "@query/api";
-import type { ApplicationStatus } from "@query/db";
-
-type Applicant = RouterOutputs["initiative"]["getById"]["applicants"][number];
-
-const errorText = "text-sm text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--danger)] disabled:opacity-50";
-const backLink =
-  "text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]";
-const factRow =
-  "grid grid-cols-1 gap-1 border-b border-[var(--border-subtle)] py-3.5 sm:grid-cols-[200px_1fr] sm:gap-6";
-const factValue = "text-[15px] font-semibold text-[var(--text-primary)]";
-
-function ApplicantRow({
-  initiativeId,
-  applicant,
-  full,
-}: {
-  initiativeId: string;
-  applicant: Applicant;
-  full: boolean;
-}) {
-  const utils = trpc.useUtils();
-  const [confirmRemove, setConfirmRemove] = useState(false);
-  const [wantResume, setWantResume] = useState(false);
-
-  // Fetched on click, not with the queue: thirty applicants would otherwise
-  // mean thirty PDFs on page load.
-  const resume = trpc.initiative.applicantResume.useQuery(
-    { initiativeId, userId: applicant.userId },
-    { enabled: wantResume },
-  );
-
-  const decide = trpc.initiative.decide.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.initiative.getById.invalidate({ id: initiativeId }),
-        // The list row carries the pending count, so leaving it alone keeps
-        // offering a queue that is already empty.
-        utils.initiative.listMine.invalidate(),
-      ]);
-    },
-  });
-
-  const send = (decision: "accepted" | "rejected") =>
-    decide.mutate({ initiativeId, userId: applicant.userId, decision });
-
-  return (
-    <li className="border-b border-[var(--border-subtle)] 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">
-            <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-              {applicant.name ?? applicant.email}
-            </p>
-            <ApplicationChip status={applicant.status} side="leader" />
-          </div>
-          <p className={`${meta} mt-0.5`}>
-            <a
-              href={`mailto:${applicant.email}`}
-              className="transition-colors hover:text-[var(--text-primary)]"
-            >
-              {applicant.email}
-            </a>
-          </p>
-          {applicant.pitch && (
-            <p
-              className={`${body} mt-3 max-w-2xl whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`}
-            >
-              {applicant.pitch}
-            </p>
-          )}
-
-          {applicant.resumeFileName &&
-            (resume.data ? (
-              <a
-                href={resume.data.dataUrl}
-                download={resume.data.fileName}
-                className={`${textLink} mt-3`}
-              >
-                Download {resume.data.fileName}
-              </a>
-            ) : (
-              <button
-                type="button"
-                onClick={() => setWantResume(true)}
-                disabled={resume.isFetching}
-                className={`${textLink} mt-3 disabled:opacity-50`}
-              >
-                {resume.isFetching
-                  ? "Loading resume…"
-                  : `Resume: ${applicant.resumeFileName}`}
-              </button>
-            ))}
-          {resume.error && (
-            <p aria-live="polite" className={`${errorText} mt-2`}>
-              {resume.error.message}
-            </p>
-          )}
-        </div>
-
-        <div className="flex shrink-0 flex-wrap items-center gap-3">
-          {applicant.status === "pending" && (
-            <>
-              <button
-                type="button"
-                disabled={decide.isPending || full}
-                onClick={() => send("accepted")}
-                className={btnPrimary}
-              >
-                Accept
-              </button>
-              <button
-                type="button"
-                disabled={decide.isPending}
-                onClick={() => send("rejected")}
-                className={btnDanger}
-              >
-                Reject
-              </button>
-            </>
-          )}
-
-          {applicant.status === "rejected" && (
-            <button
-              type="button"
-              disabled={decide.isPending || full}
-              onClick={() => send("accepted")}
-              className={btnSecondary}
-            >
-              Accept after all
-            </button>
-          )}
-
-          {applicant.status === "accepted" &&
-            (confirmRemove ? (
-              <>
-                <span className="text-sm text-[var(--text-muted)]">
-                  Take them off the team?
-                </span>
-                <button
-                  type="button"
-                  disabled={decide.isPending}
-                  onClick={() => {
-                    send("rejected");
-                    setConfirmRemove(false);
-                  }}
-                  className={btnDanger}
-                >
-                  Remove
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setConfirmRemove(false)}
-                  className={btnSecondary}
-                >
-                  Cancel
-                </button>
-              </>
-            ) : (
-              <button
-                type="button"
-                onClick={() => setConfirmRemove(true)}
-                className={quietAction}
-              >
-                Remove
-              </button>
-            ))}
-        </div>
-      </div>
-
-      {decide.error && (
-        <p className={`${errorText} mt-3`}>{decide.error.message}</p>
-      )}
-    </li>
-  );
-}
-
-function Group({
-  title,
-  rows,
-  render,
-}: {
-  title: string;
-  rows: Applicant[];
-  render: (applicant: Applicant) => React.ReactNode;
-}) {
-  if (rows.length === 0) return null;
+export default function Page({ params }: { params: Promise<{ id: string }> }) {
   return (
-    <section className="mt-12">
-      <div className="flex items-baseline justify-between gap-4">
-        <h2 className={sectionTitle}>{title}</h2>
-        <span className={`${meta} tabular-nums`}>{rows.length}</span>
-      </div>
-      <ul className="mt-4 border-t border-[var(--border-subtle)]">
-        {rows.map(render)}
-      </ul>
-    </section>
-  );
-}
-
-export default function LeadInitiativePage({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = use(params);
-  const detail = trpc.initiative.getById.useQuery({ id });
-
-  if (detail.isPending) return <LoadingScreen />;
-
-  if (detail.error) {
-    return (
-      <div className={page}>
-        <Link href="/lead" className={backLink}>
-          ← Your projects
-        </Link>
-        <h1 className={`${pageTitle} mt-6`}>This project did not load</h1>
-        <p className={pageDek}>
-          {detail.error.message} Go back to your projects and open it again.
-        </p>
-        <Link href="/lead" className={`${textLink} mt-6`}>
-          Back to your projects
-        </Link>
-      </div>
-    );
-  }
-
-  const { initiative, applicants, accepted } = detail.data;
-  const state = initiativeState(initiative);
-  const full =
-    initiative.maxMembers !== null && accepted >= initiative.maxMembers;
-
-  const inState = (...wanted: ApplicationStatus[]) =>
-    applicants.filter((row) => wanted.includes(row.status));
-
-  const row = (applicant: Applicant) => (
-    <ApplicantRow
-      key={applicant.userId}
-      initiativeId={initiative.id}
-      applicant={applicant}
-      full={full}
-    />
-  );
-
-  return (
-    <div className={page}>
-      <Link href="/lead" className={backLink}>
-        ← Your projects
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>{initiative.title}</h1>
-
-        {/* Said once, at the top: every Accept below is off and the reason has to
-            be readable without hovering a disabled button. */}
-        {full && (
-          <p className={pageDek}>
-            Every spot is taken. Raise the team size, or remove somebody, before
-            accepting anyone else.
-          </p>
-        )}
-
-        {state === "draft" && (
-          <p className={pageDek}>
-            This is still a draft, so members cannot see it or apply. Open it
-            from your projects list.
-          </p>
-        )}
-      </header>
-
-      <dl className="mt-8 max-w-3xl border-t border-[var(--border-subtle)]">
-        <div className={factRow}>
-          <dt className={label}>Status</dt>
-          <dd>
-            <InitiativeChip state={state} />
-          </dd>
-        </div>
-        <div className={factRow}>
-          <dt className={label}>Team</dt>
-          <dd className={factValue}>
-            {seatLabel(accepted, initiative.maxMembers)}
-          </dd>
-        </div>
-        {initiative.commitment && (
-          <div className={factRow}>
-            <dt className={label}>Commitment</dt>
-            <dd className={factValue}>{initiative.commitment}</dd>
-          </div>
-        )}
-      </dl>
-
-      {applicants.length === 0 ? (
-        <section className="mt-12">
-          <h2 className={sectionTitle}>Applications</h2>
-          <p className={`${body} mt-3 max-w-xl`}>
-            Nobody has applied yet.{" "}
-            {state === "open"
-              ? "It is open, so it is showing on the members' projects page."
-              : "Open it from your projects list and it will start showing to members."}
-          </p>
-          {state !== "open" && (
-            <Link href="/lead" className={`${textLink} mt-4`}>
-              Go to your projects
-            </Link>
-          )}
-        </section>
-      ) : (
-        <>
-          <Group
-            title="Waiting on you"
-            rows={inState("pending")}
-            render={row}
-          />
-          <Group title="On the team" rows={inState("accepted")} render={row} />
-          <Group
-            title="Turned down and withdrawn"
-            rows={inState("rejected", "withdrawn")}
-            render={row}
-          />
-        </>
-      )}
-    </div>
+    <PrefetchedPage
+      reads={async (c) => {
+        const { id } = await params;
+        return [["initiative.getById", { id }, c.initiative.getById({ id })]];
+      }}
+    >
+      <LeadInitiativePage params={params} />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/lead/page.tsx b/sites/mainweb/app/(portal)/lead/page.tsx
index d9000903..b24fcffa 100644
--- a/sites/mainweb/app/(portal)/lead/page.tsx
+++ b/sites/mainweb/app/(portal)/lead/page.tsx
@@ -1,365 +1,14 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  InitiativeChip,
-  initiativeState,
-  seatLabel,
-} from "@/components/portal/initiatives/chips";
-import {
-  InitiativeFields,
-  draftFrom,
-  toInput,
-} from "@/components/portal/initiatives/form-fields";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  chip,
-  itemTitle,
-  kicker,
-  label,
-  meta,
-  page,
-  pageDek,
-  pageTitle,
-  textLink,
-} from "@/components/portal/ui";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import type { RouterOutputs } from "@query/api";
-
-type LeadInitiative = RouterOutputs["initiative"]["listMine"][number];
-
-const statuses = [
-  { value: "draft", label: "Draft" },
-  { value: "open", label: "Open" },
-  { value: "closed", label: "Closed" },
-] as const;
-
-const errorText = "text-sm text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
-
-function InitiativeForm({
-  initiative,
-  onDone,
-}: {
-  initiative?: LeadInitiative;
-  onDone: () => void;
-}) {
-  const utils = trpc.useUtils();
-  const [error, setError] = useState<string | null>(null);
-  const [draft, setDraft] = useState(() => draftFrom(initiative));
-
-  const done = async () => {
-    await utils.initiative.listMine.invalidate();
-    onDone();
-  };
-
-  const create = trpc.initiative.create.useMutation({
-    onSuccess: done,
-    onError: (e) => setError(e.message),
-  });
-  const update = trpc.initiative.update.useMutation({
-    onSuccess: done,
-    onError: (e) => setError(e.message),
-  });
-  const pending = create.isPending || update.isPending;
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import LeadPage from "./LeadPage";
 
+export default function Page() {
   return (
-    <form
-      onSubmit={(event) => {
-        event.preventDefault();
-        setError(null);
-        const values = toInput(draft);
-        if (initiative) update.mutate({ ...values, id: initiative.id });
-        else create.mutate(values);
-      }}
+    <PrefetchedPage
+      reads={(c) => [
+        ["initiative.listMine", undefined, c.initiative.listMine()],
+      ]}
     >
-      <h2 className={`${itemTitle} mb-4`}>
-        {initiative ? `Edit ${initiative.title}` : "New project"}
-      </h2>
-
-      <InitiativeFields draft={draft} onChange={setDraft} />
-
-      {error && <p className={`${errorText} mt-3`}>{error}</p>}
-
-      <div className="mt-5 flex flex-wrap gap-3">
-        <button type="submit" disabled={pending} className={btnPrimary}>
-          {pending ? "Saving…" : initiative ? "Save changes" : "Create draft"}
-        </button>
-        <button type="button" onClick={onDone} className={btnSecondary}>
-          Cancel
-        </button>
-      </div>
-
-      {!initiative && (
-        <p className={`${meta} mt-3`}>
-          It starts as a draft. Nothing reaches members until you open it.
-        </p>
-      )}
-    </form>
-  );
-}
-
-function InitiativeRow({ initiative }: { initiative: LeadInitiative }) {
-  const utils = trpc.useUtils();
-  const [editing, setEditing] = useState(false);
-  const [confirmArchive, setConfirmArchive] = useState(false);
-
-  // The applicants screen reads getById, so invalidating only the list leaves
-  // it serving a stale initiative.
-  const refresh = async () => {
-    await Promise.all([
-      utils.initiative.listMine.invalidate(),
-      utils.initiative.getById.invalidate({ id: initiative.id }),
-    ]);
-  };
-
-  const setStatus = trpc.initiative.setStatus.useMutation({
-    onSuccess: refresh,
-  });
-  const archive = trpc.initiative.setArchived.useMutation({
-    onSuccess: refresh,
-  });
-
-  if (editing) {
-    return (
-      <InitiativeForm
-        initiative={initiative}
-        onDone={() => setEditing(false)}
-      />
-    );
-  }
-
-  const state = initiativeState(initiative);
-  const archived = state === "archived";
-
-  return (
-    <>
-      <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}>{initiative.title}</h3>
-            <InitiativeChip state={state} />
-          </div>
-          {initiative.summary && (
-            <p className={`${body} mt-1`}>{initiative.summary}</p>
-          )}
-          <p className={`${meta} mt-1`}>
-            {seatLabel(initiative.accepted, initiative.maxMembers)}
-            {initiative.pending > 0
-              ? ` · ${initiative.pending} waiting on you`
-              : " · nobody waiting"}
-          </p>
-          {!initiative.isMine && (
-            <p className={`${meta} mt-1`}>Led by {initiative.leaderName}</p>
-          )}
-        </div>
-
-        <Link
-          href={`/lead/${initiative.id}`}
-          className={`${initiative.pending > 0 ? btnSecondary : textLink} shrink-0`}
-        >
-          {initiative.pending > 0
-            ? `Review ${initiative.pending} application${initiative.pending === 1 ? "" : "s"}`
-            : "Applications"}
-        </Link>
-      </div>
-
-      <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-3">
-        <div
-          role="group"
-          aria-label="Status"
-          className="flex flex-wrap items-center gap-2"
-        >
-          <span className={label}>Status</span>
-          {statuses.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              aria-pressed={initiative.status === option.value}
-              disabled={archived || setStatus.isPending}
-              onClick={() =>
-                setStatus.mutate({ id: initiative.id, status: option.value })
-              }
-              className={`${chip(initiative.status === option.value)} disabled:cursor-not-allowed disabled:opacity-40`}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-
-        <button
-          type="button"
-          onClick={() => setEditing(true)}
-          className={textLink}
-        >
-          Edit
-        </button>
-
-        <div className="flex flex-wrap items-center gap-3 sm:ml-auto">
-          {confirmArchive ? (
-            <>
-              <span className="text-sm text-[var(--text-muted)]">
-                {archived ? "Restore this project?" : "Archive this project?"}
-              </span>
-              <button
-                type="button"
-                onClick={() => {
-                  archive.mutate({
-                    id: initiative.id,
-                    archived: !archived,
-                  });
-                  setConfirmArchive(false);
-                }}
-                className={archived ? btnSecondary : btnDanger}
-              >
-                {archived ? "Restore" : "Archive"}
-              </button>
-              <button
-                type="button"
-                onClick={() => setConfirmArchive(false)}
-                className={btnSecondary}
-              >
-                Cancel
-              </button>
-            </>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setConfirmArchive(true)}
-              className={quietAction}
-            >
-              {archived ? "Restore" : "Archive"}
-            </button>
-          )}
-        </div>
-      </div>
-
-      {(setStatus.error ?? archive.error) && (
-        <p className={`${errorText} mt-3`}>
-          {(setStatus.error ?? archive.error)?.message}
-        </p>
-      )}
-    </>
-  );
-}
-
-export default function LeadPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  // Queries wait on the session, so a signed-out visitor otherwise sits on
-  // the loading screen forever.
-  useEffect(() => {
-    if (status === "unauthenticated") router.push(loginHref());
-  }, [status, router]);
-  const [creating, setCreating] = useState(false);
-
-  const listing = trpc.initiative.listMine.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (status === "loading" || listing.isPending) return <LoadingScreen />;
-
-  if (listing.error) {
-    const forbidden = listing.error.data?.code === "FORBIDDEN";
-    return (
-      <div className={page}>
-        <h1 className={pageTitle}>
-          {forbidden
-            ? "This page is for project leaders"
-            : "Your projects did not load"}
-        </h1>
-        <p className={pageDek}>
-          {forbidden
-            ? "Pitch a project from the projects page. If it is approved, you lead it and manage it here."
-            : `${listing.error.message} Refresh the page to try again.`}
-        </p>
-        <Link href="/initiatives" className={`${textLink} mt-6`}>
-          Browse projects instead
-        </Link>
-      </div>
-    );
-  }
-
-  const initiatives = listing.data ?? [];
-  const waiting = initiatives.reduce((total, row) => total + row.pending, 0);
-
-  return (
-    <div className={page}>
-      <Link
-        href="/initiatives"
-        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
-      >
-        ← Club projects
-      </Link>
-
-      <header className="mt-6 flex flex-col justify-between gap-6 md:flex-row md:items-end">
-        <div>
-          <p className={kicker}>Projects you lead</p>
-          <h1 className={`${pageTitle} mt-2`}>
-            {waiting > 0
-              ? `${waiting} application${waiting === 1 ? "" : "s"} waiting on you`
-              : "Nothing waiting on you"}
-          </h1>
-          <p className={pageDek}>
-            Open a project to members, review who applies, and keep the team
-            list current.
-          </p>
-        </div>
-
-        {!creating && (
-          <button
-            type="button"
-            onClick={() => setCreating(true)}
-            className={`${btnPrimary} shrink-0 self-start md:self-auto`}
-          >
-            New project
-          </button>
-        )}
-      </header>
-
-      {creating && (
-        <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-          <InitiativeForm onDone={() => setCreating(false)} />
-        </section>
-      )}
-
-      {initiatives.length > 0 ? (
-        <ul className="mt-10 border-t border-[var(--border-subtle)]">
-          {initiatives.map((initiative) => (
-            <li
-              key={initiative.id}
-              className="border-b border-[var(--border-subtle)] py-6"
-            >
-              <InitiativeRow initiative={initiative} />
-            </li>
-          ))}
-        </ul>
-      ) : (
-        !creating && (
-          <div className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-            <p className={`${body} max-w-xl`}>
-              You have no projects yet. A new one starts as a draft, so you can
-              write it up now and open it to members when you are ready.
-            </p>
-            <button
-              type="button"
-              onClick={() => setCreating(true)}
-              className={`${textLink} mt-4`}
-            >
-              Start a draft
-            </button>
-          </div>
-        )
-      )}
-    </div>
+      <LeadPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/submit/SubmitPage.tsx b/sites/mainweb/app/(portal)/submit/SubmitPage.tsx
new file mode 100644
index 00000000..c73a669b
--- /dev/null
+++ b/sites/mainweb/app/(portal)/submit/SubmitPage.tsx
@@ -0,0 +1,764 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { loginHref } from "@/lib/safe-callback";
+import { trpc } from "@/lib/trpc";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useState } from "react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import Link from "next/link";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  chip,
+  fieldLabel,
+  input,
+  itemTitle,
+  kicker,
+  page,
+  pageTitle,
+  textLink,
+} from "@/components/portal/ui";
+
+/**
+ * Deadlines are rendered in the event's own time zone, not the viewer's. Half
+ * the field is remote, and a submission deadline shown in the wrong zone is the
+ * one rendering mistake that costs someone their entry.
+ */
+const formatMoment = (moment: Date) =>
+  moment.toLocaleString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short",
+    timeZone: "America/New_York",
+  });
+
+/** A deadline that never breaks across lines: "EST." alone on a line is unreadable. */
+const Moment = ({ at }: { at: Date }) => (
+  <span className="whitespace-nowrap font-semibold">{formatMoment(at)}</span>
+);
+
+/** A teammate's view of the form: filed values read as values, not empty fields. */
+const readOnlyField =
+  "read-only:bg-transparent read-only:border-[var(--border-subtle)]";
+
+function SubmitPortalContent() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const urlHackathonId = searchParams.get("id");
+
+  const utils = trpc.useUtils();
+
+  // Context & State
+  const [selectedHackathonId, setSelectedHackathonId] = useState<string>(
+    urlHackathonId || "",
+  );
+  // The id can come straight from the URL or the picker, so it is encoded
+  // wherever it becomes part of a link path.
+  const hackathonPath = `/hackathons/${encodeURIComponent(selectedHackathonId)}`;
+  const [confirmWithdraw, setConfirmWithdraw] = useState(false);
+
+  const [projectName, setProjectName] = useState("");
+  const [projectDesc, setProjectDesc] = useState("");
+  const [githubUrl, setGithubUrl] = useState("");
+  const [videoUrl, setVideoUrl] = useState("");
+  const [demoUrl, setDemoUrl] = useState("");
+  // Judge routing filters on exactly these three. A submission without them
+  // reaches no track judge and no sponsor judge at all.
+  const [tracks, setTracks] = useState<string[]>([]);
+  const [challenges, setChallenges] = useState<string[]>([]);
+  const [isCreateX, setIsCreateX] = useState(false);
+
+  const [error, setError] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+  const [projectSubmitted, setProjectSubmitted] = useState(false);
+  // Which hackathon the form below has already been filled from, so a
+  // background refetch cannot overwrite what someone is part-way through
+  // typing.
+  const [prefilledFor, setPrefilledFor] = useState("");
+
+  // Queries
+  const { data: myRegs, isLoading: loadingRegs } =
+    trpc.hackathon.myRegistrations.useQuery(undefined, {
+      enabled: !!session,
+      // An accepted attendee gets checked in at the venue, which is what
+      // unlocks the form. Poll for it only on the event's days, so the page
+      // updates without a reload and idle tabs stay quiet. Day granularity on
+      // the viewer's clock, as the event page does: a badge scanned before
+      // doors open still counts.
+      refetchInterval: (query) => {
+        const reg = query.state.data?.find(
+          (r) => r.hackathonId === selectedHackathonId,
+        );
+        if (reg?.registrationStatus !== "approved") return false;
+        const startOfDay = (d: Date | string) =>
+          new Date(d).setHours(0, 0, 0, 0);
+        const today = startOfDay(new Date());
+        const started = startOfDay(reg.hackathon.startDate) <= today;
+        const ended =
+          !!reg.hackathon.endDate && today > startOfDay(reg.hackathon.endDate);
+        return started && !ended ? 30_000 : false;
+      },
+    });
+
+  // The project a submit would overwrite — the team's entry, or the solo one
+  // this participant filed. Reading it from the team alone leaves every solo
+  // hacker staring at a blank form over a live submission.
+  const mySubmission = trpc.team.mySubmission.useQuery(
+    { hackathonId: selectedHackathonId },
+    { enabled: !!session && !!selectedHackathonId },
+  );
+
+  // The event's own track and challenge lists. Offering free text instead
+  // would be worse than offering nothing: judge assignment matches these
+  // strings exactly, so a typo silently removes a project from a judge's pool.
+  const { data: hackathonDetail } = trpc.hackathon.getById.useQuery(
+    { id: selectedHackathonId },
+    { enabled: !!session && !!selectedHackathonId },
+  );
+
+  // The window the submit mutation gates on. The page never queried it, so the
+  // refusal only ever arrived after the form was filled in.
+  const submissionWindow = trpc.team.submissionWindow.useQuery(
+    { hackathonId: selectedHackathonId },
+    { enabled: !!session && !!selectedHackathonId },
+  );
+
+  const availableTracks = hackathonDetail?.tracks ?? [];
+  const availableChallenges = hackathonDetail?.challenges ?? [];
+
+  const toggle = (
+    value: string,
+    current: string[],
+    set: (next: string[]) => void,
+  ) =>
+    set(
+      current.includes(value)
+        ? current.filter((v) => v !== value)
+        : [...current, value],
+    );
+
+  // We get the specific registration / team context based on selected hackathon
+  const currentReg = myRegs?.find((r) => r.hackathonId === selectedHackathonId);
+  // Same gate as TeamsTab: forming a team needs acceptance, and the server
+  // refuses anyone else, so the controls are not offered until then.
+  const admitted =
+    currentReg?.registrationStatus === "approved" ||
+    currentReg?.registrationStatus === "checked_in";
+  // A withdrawn project stays as a draft row, so the row alone is not a
+  // submission.
+  const hasSubmitted =
+    (!!mySubmission.data && mySubmission.data.status !== "draft") ||
+    currentReg?.hasSubmittedProject ||
+    projectSubmitted;
+  // submitProject and withdrawProject refuse everyone but the captain, so
+  // teammates see the entry but cannot change it.
+  const readOnly =
+    !!currentReg?.team && currentReg.team.captainId !== session?.user?.id;
+  // The team list already carries the captain; it is read only to name them.
+  const teamRoster = trpc.team.list.useQuery(
+    { hackathonId: selectedHackathonId },
+    { enabled: readOnly && !!selectedHackathonId },
+  );
+  const captainName = teamRoster.data?.find(
+    (t) => t.id === currentReg?.team?.id,
+  )?.captain?.name;
+
+  // Mutations
+  const submitProject = trpc.team.submitProject.useMutation({
+    onSuccess: () => {
+      utils.hackathon.myRegistrations.invalidate();
+      utils.team.mySubmission.invalidate();
+      setError("");
+      setSuccessMessage(
+        "Project submitted. Judging is in person: your team presents to judges for each challenge, and the event's Judging tab shows where and when.",
+      );
+      setProjectSubmitted(true);
+    },
+    onError: (err) => setError(err.message),
+  });
+
+  // Leaving or disbanding a team refuses while a submission stands and tells
+  // the user to withdraw it first, so there has to be a way to do that.
+  const withdrawProject = trpc.team.withdrawProject.useMutation({
+    onSuccess: () => {
+      utils.hackathon.myRegistrations.invalidate();
+      utils.team.mySubmission.invalidate();
+      setError("");
+      setProjectSubmitted(false);
+      setConfirmWithdraw(false);
+      setSuccessMessage(
+        "Submission withdrawn. It is back to draft and no longer entered for judging.",
+      );
+    },
+    onError: (err) => {
+      setConfirmWithdraw(false);
+      setError(err.message);
+    },
+  });
+
+  // Still submittable: until 12 hours after the event ends. The default pick
+  // and the dropdown use the same rule; defaulting to myRegs[0] could select
+  // a past edition the dropdown did not even list.
+  const isActiveReg = (reg: NonNullable<typeof myRegs>[number]) =>
+    reg.hackathon.endDate
+      ? new Date(
+          new Date(reg.hackathon.endDate).getTime() + 12 * 60 * 60 * 1000,
+        // oxlint-disable-next-line react/purity
+        ) >= new Date()
+      : true;
+
+  if (!selectedHackathonId && myRegs && myRegs.length > 0) {
+    const firstReg = myRegs.find(isActiveReg);
+    if (firstReg) {
+      setSelectedHackathonId(firstReg.hackathonId);
+    }
+  }
+
+  // Fill the form from the existing submission, once per selected event.
+  // Clearing when there is none matters as much as filling: the form used to
+  // keep the previous event's answers after switching, so a submit could file
+  // one hackathon's project against another.
+  if (
+    selectedHackathonId &&
+    !mySubmission.isPending &&
+    prefilledFor !== selectedHackathonId
+  ) {
+    const p = mySubmission.data;
+    setProjectName(p?.name ?? "");
+    setProjectDesc(p?.description ?? "");
+    setGithubUrl(p?.githubUrl ?? "");
+    setVideoUrl(p?.videoUrl ?? "");
+    setDemoUrl(p?.demoUrl ?? "");
+    setTracks(p?.tracks ?? []);
+    setChallenges(p?.challenges ?? []);
+    setIsCreateX(p?.isCreateX ?? false);
+    setPrefilledFor(selectedHackathonId);
+  }
+
+  if (status === "loading" || loadingRegs) {
+    return <LoadingScreen message="Loading…" />;
+  }
+
+  if (!session) {
+    router.push(loginHref());
+    return null;
+  }
+
+  const activeRegs = myRegs?.filter(isActiveReg) || [];
+  // One live event is already named by the kicker; the picker earns its place
+  // only when there is something to choose.
+  const showEventPicker =
+    activeRegs.length > 1 ||
+    !activeRegs.some((r) => r.hackathonId === selectedHackathonId);
+
+  // A teammate reads what was filed; a row of dimmed buttons says it badly.
+  const filedChips = (picked: string[]) =>
+    picked.length > 0 ? (
+      picked.map((v) => (
+        <span key={v} className={chip(true)}>
+          {v}
+        </span>
+      ))
+    ) : (
+      <p className="text-[13px] text-[var(--text-muted)]">None picked</p>
+    );
+
+  return (
+    <main className={page}>
+      <Link
+        href="/dashboard"
+        className="inline-flex min-h-11 items-center text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+      >
+        ← Dashboard
+      </Link>
+
+      <header className="mt-2">
+        {currentReg && <p className={kicker}>{currentReg.hackathon.name}</p>}
+        <h1 className={`mt-1 ${pageTitle}`}>Submit your project</h1>
+      </header>
+
+      {!myRegs || myRegs.length === 0 ? (
+        <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
+          <p className={body}>
+            Once you register for a hackathon, you can submit your project
+            here.
+          </p>
+          <Link href="/hackathons" className={`mt-4 ${btnPrimary}`}>
+            Browse hackathons
+          </Link>
+        </section>
+      ) : (
+        <div className="mt-10 grid grid-cols-1 gap-10 border-t border-[var(--border-subtle)] pt-8 lg:grid-cols-12">
+          {/* Context and team */}
+          <aside className="space-y-8 lg:col-span-4">
+            {showEventPicker && (
+              <div>
+                <label htmlFor="event-context" className={fieldLabel}>
+                  Hackathon
+                </label>
+                <select
+                  id="event-context"
+                  className={`${input} min-h-11`}
+                  value={selectedHackathonId}
+                  onChange={(e) => {
+                    setSelectedHackathonId(e.target.value);
+                    setError("");
+                    setSuccessMessage("");
+                    setProjectSubmitted(false);
+                    setConfirmWithdraw(false);
+                  }}
+                >
+                  <option value="" disabled>
+                    Select a hackathon…
+                  </option>
+                  {activeRegs.map((r) => (
+                    <option key={r.hackathonId} value={r.hackathonId}>
+                      {r.hackathon.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            <div
+              className={
+                showEventPicker
+                  ? "border-t border-[var(--border-subtle)] pt-6"
+                  : undefined
+              }
+            >
+              <h2 className="text-[13px] font-medium text-[var(--text-muted)]">
+                {currentReg?.team ? "Your team" : "Team"}
+              </h2>
+              {currentReg?.team ? (
+                <>
+                  <p className={`mt-1 ${itemTitle}`}>{currentReg.team.name}</p>
+                  <p className="mt-1 text-[13px] text-[var(--text-muted)]">
+                    {currentReg.team.currentMembers} of{" "}
+                    {currentReg.team.maxMembers} members ·{" "}
+                    {readOnly
+                      ? `${captainName ?? "your captain"} submits for the team`
+                      : "you're the captain"}
+                  </p>
+                </>
+              ) : (
+                <p className={`mt-1 ${body}`}>
+                  {admitted
+                    ? "You're submitting solo. Create a team or join one from the event's Teams tab."
+                    : "You can create or join a team once you have been accepted."}
+                </p>
+              )}
+              {currentReg && (currentReg.team || admitted) && (
+                <Link
+                  href={`${hackathonPath}?tab=TEAMS`}
+                  className={`mt-3 ${textLink}`}
+                >
+                  {currentReg.team ? "Manage team" : "Create or join a team"}
+                </Link>
+              )}
+            </div>
+          </aside>
+
+          {/* Project submission */}
+          <section className="border-t border-[var(--border-subtle)] pt-8 lg:col-span-8 lg:border-t-0 lg:pt-0">
+            <div className="mb-8 space-y-4 empty:hidden">
+              {/* Once the project is in judging, the team's times and rooms
+                  live on the hackathon's Judging tab. */}
+              {mySubmission.data?.inJudging && (
+                <p className="border-l-2 border-accent pl-3 text-[15px] text-[var(--text-primary)]">
+                  Your project is in judging. Your team presents to judges for
+                  each challenge it entered, and the{" "}
+                  <Link
+                    href={`${hackathonPath}?tab=JUDGING`}
+                    className="font-semibold underline decoration-accent decoration-2 underline-offset-[5px]"
+                  >
+                    Judging tab
+                  </Link>{" "}
+                  shows where and when once organisers publish the schedule.
+                </p>
+              )}
+
+              {/* Admission, said before the form is filled in. Acceptance
+                  lets you form a team; submitting needs the badge scan,
+                  because judging happens in person. */}
+              {currentReg && currentReg.registrationStatus !== "checked_in" && (
+                <p className="border-l-2 border-[var(--warning)] pl-3 text-[15px] text-[var(--text-primary)]">
+                  {currentReg.registrationStatus === "approved"
+                    ? "You're accepted. Check in at the event before submitting: find a volunteer and have your badge scanned."
+                    : currentReg.registrationStatus === "pending"
+                      ? "Your registration is still being reviewed. You can form a team once you have been accepted."
+                      : currentReg.registrationStatus === "waitlisted"
+                        ? "You're on the waitlist. If a seat opens, you'll be accepted and can submit."
+                        : "Your registration wasn't accepted, so you can't submit to this hackathon."}
+                </p>
+              )}
+
+              {/* The window this form is gated on, said before it is filled
+                  in. Without it an attendee wrote a full description and
+                  learned it was refused only on submit. */}
+              {submissionWindow.data && (
+                <p
+                  className={`border-l-2 pl-3 text-[15px] text-[var(--text-primary)] ${
+                    submissionWindow.data.isOpen
+                      ? "border-accent"
+                      : "border-[var(--warning)]"
+                  }`}
+                >
+                  {submissionWindow.data.cancelled ? (
+                    "This hackathon has been cancelled, so nothing can be submitted."
+                  ) : submissionWindow.data.notYetOpen ? (
+                    <>
+                      Submission opens{" "}
+                      <Moment at={submissionWindow.data.opensAt} />. The form is
+                      here early so you can see what it asks for.
+                    </>
+                  ) : !submissionWindow.data.isOpen ? (
+                    <>
+                      Submission closed{" "}
+                      <Moment at={submissionWindow.data.closesAt} />.
+                    </>
+                  ) : !hasSubmitted ? (
+                    <>
+                      Submissions close{" "}
+                      <Moment at={submissionWindow.data.closesAt} />.
+                    </>
+                  ) : submissionWindow.data.canEditExisting ? (
+                    <>
+                      {readOnly
+                        ? "Your team can edit its entry"
+                        : "You can edit your entry"}{" "}
+                      until <Moment at={submissionWindow.data.editsCloseAt} />.
+                    </>
+                  ) : (
+                    <>
+                      Edits closed{" "}
+                      <Moment at={submissionWindow.data.editsCloseAt} />, so
+                      your entry stands as filed.
+                    </>
+                  )}
+                </p>
+              )}
+            </div>
+
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (readOnly) return;
+                submitProject.mutate({
+                  hackathonId: selectedHackathonId,
+                  teamId: currentReg?.team?.id,
+                  name: projectName,
+                  description: projectDesc,
+                  githubUrl,
+                  demoUrl,
+                  videoUrl,
+                  tracks,
+                  challenges,
+                  isCreateX,
+                });
+              }}
+              className="space-y-10"
+            >
+              {/* Name & Desc */}
+              <div className="space-y-5">
+                <div>
+                  <label htmlFor="project-name" className={fieldLabel}>
+                    Project name{" "}
+                    <span className="font-normal text-[var(--text-muted)]">
+                      (required)
+                    </span>
+                  </label>
+                  <input
+                    id="project-name"
+                    type="text"
+                    required
+                    readOnly={readOnly}
+                    value={projectName}
+                    onChange={(e) => setProjectName(e.target.value)}
+                    placeholder="e.g. Transit delay predictor"
+                    className={`${input} ${readOnlyField}`}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="project-description" className={fieldLabel}>
+                    Description{" "}
+                    <span className="font-normal text-[var(--text-muted)]">
+                      (required)
+                    </span>
+                  </label>
+                  <textarea
+                    id="project-description"
+                    required
+                    readOnly={readOnly}
+                    value={projectDesc}
+                    onChange={(e) => setProjectDesc(e.target.value)}
+                    placeholder="Explain the problem you solved and how you built it…"
+                    rows={5}
+                    className={`resize-none ${input} ${readOnlyField} [field-sizing:content] min-h-[8.5rem]`}
+                  />
+                </div>
+              </div>
+
+              {/* Tracks, challenges and CreateX — what judge assignment
+                  routes on. Rendered only when the organisers configured
+                  them, so an event without tracks shows nothing rather
+                  than an empty box. */}
+              {(availableTracks.length > 0 ||
+                availableChallenges.length > 0) && (
+                <div className="border-t border-[var(--border-subtle)] pt-6">
+                  <h3 className={itemTitle}>Tracks and challenges</h3>
+                  {!readOnly && (
+                    <p className={`mt-1 ${body}`}>
+                      Your project presents to judges for each challenge you
+                      pick, so pick everything you are competing for.
+                    </p>
+                  )}
+
+                  {availableTracks.length > 0 && (
+                    <div className="mt-5">
+                      <p className={fieldLabel}>Tracks</p>
+                      <div className="flex flex-wrap gap-2">
+                        {readOnly
+                          ? filedChips(tracks)
+                          : availableTracks.map((track) => (
+                              <button
+                                key={track}
+                                type="button"
+                                onClick={() => toggle(track, tracks, setTracks)}
+                                aria-pressed={tracks.includes(track)}
+                                className={chip(tracks.includes(track))}
+                              >
+                                {track}
+                              </button>
+                            ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {availableChallenges.length > 0 && (
+                    <div className="mt-5">
+                      <p className={fieldLabel}>Sponsor challenges</p>
+                      <div className="flex flex-wrap gap-2">
+                        {readOnly
+                          ? filedChips(challenges)
+                          : availableChallenges.map((challenge) => (
+                              <button
+                                key={challenge}
+                                type="button"
+                                onClick={() =>
+                                  toggle(challenge, challenges, setChallenges)
+                                }
+                                aria-pressed={challenges.includes(challenge)}
+                                className={chip(challenges.includes(challenge))}
+                              >
+                                {challenge}
+                              </button>
+                            ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {readOnly ? (
+                    isCreateX && (
+                      <p className={`mt-6 ${body}`}>
+                        Entered for the CreateX entrepreneurship prize.
+                      </p>
+                    )
+                  ) : (
+                    <label
+                      htmlFor="is-createx"
+                      className="mt-6 flex min-h-11 cursor-pointer items-start gap-3 py-2.5 text-[15px] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
+                    >
+                      <input
+                        id="is-createx"
+                        type="checkbox"
+                        checked={isCreateX}
+                        onChange={(e) => setIsCreateX(e.target.checked)}
+                        className="mt-0.5 h-5 w-5 min-h-0! min-w-0! shrink-0 cursor-pointer accent-[var(--accent)]"
+                      />
+                      We are competing for the CreateX entrepreneurship prize
+                    </label>
+                  )}
+                </div>
+              )}
+
+              {/* Links */}
+              <div className="border-t border-[var(--border-subtle)] pt-6">
+                <h3 className={itemTitle}>Links</h3>
+
+                <div className="mt-4 space-y-5">
+                  <div>
+                    <label htmlFor="github-url" className={fieldLabel}>
+                      GitHub repository
+                    </label>
+                    <input
+                      id="github-url"
+                      type="url"
+                      readOnly={readOnly}
+                      value={githubUrl}
+                      onChange={(e) => setGithubUrl(e.target.value)}
+                      placeholder="https://github.com/…"
+                      className={`${input} ${readOnlyField}`}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="video-url" className={fieldLabel}>
+                      Demo video
+                    </label>
+                    <input
+                      id="video-url"
+                      type="url"
+                      readOnly={readOnly}
+                      value={videoUrl}
+                      onChange={(e) => setVideoUrl(e.target.value)}
+                      placeholder="https://youtube.com/…"
+                      className={`${input} ${readOnlyField}`}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="demo-url" className={fieldLabel}>
+                      Live demo URL
+                    </label>
+                    <input
+                      id="demo-url"
+                      type="url"
+                      readOnly={readOnly}
+                      value={demoUrl}
+                      onChange={(e) => setDemoUrl(e.target.value)}
+                      placeholder="https://…"
+                      className={`${input} ${readOnlyField}`}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-4 border-t border-[var(--border-subtle)] pt-6 empty:hidden">
+                {/* Feedback lands beside the button that was tapped, not in
+                    the notices above the form. */}
+                {error && (
+                  <p
+                    role="alert"
+                    className="border-l-2 border-[var(--danger)] pl-3 text-[15px] text-[var(--danger)]"
+                  >
+                    {error}
+                  </p>
+                )}
+
+                {successMessage && (
+                  <div
+                    role="status"
+                    className="space-y-2 border-l-2 border-[var(--success)] pl-3"
+                  >
+                    <p className="text-[15px] font-semibold text-[var(--text-primary)]">
+                      {successMessage}
+                    </p>
+                    {/* A withdrawn project is out of judging, so only a
+                        submit points there. */}
+                    {projectSubmitted ? (
+                      <Link
+                        href={`${hackathonPath}?tab=JUDGING`}
+                        className={textLink}
+                      >
+                        Go to Judging
+                      </Link>
+                    ) : (
+                      <Link href="/dashboard" className={textLink}>
+                        Back to dashboard
+                      </Link>
+                    )}
+                  </div>
+                )}
+
+                {hasSubmitted && !successMessage && (
+                  <p className="text-[13px] text-[var(--text-muted)]">
+                    {readOnly
+                      ? "Your team has submitted."
+                      : "You've already submitted. Saving replaces your current entry."}
+                  </p>
+                )}
+
+                {!readOnly && (
+                  <button
+                    type="submit"
+                    disabled={submitProject.isPending}
+                    className={`${btnPrimary} w-full sm:w-auto`}
+                  >
+                    {submitProject.isPending
+                      ? "Submitting…"
+                      : hasSubmitted
+                        ? "Save changes"
+                        : "Submit project"}
+                  </button>
+                )}
+
+                {hasSubmitted && !readOnly && !confirmWithdraw && (
+                  <div className="border-t border-[var(--border-subtle)] pt-4">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setError("");
+                        setSuccessMessage("");
+                        setConfirmWithdraw(true);
+                      }}
+                      className={btnDanger}
+                    >
+                      Withdraw submission
+                    </button>
+                  </div>
+                )}
+
+                {confirmWithdraw && (
+                  <div className="flex w-full flex-col gap-3 border-t border-[var(--border-subtle)] pt-4">
+                    <p className={body}>
+                      Withdraw your submission? It goes back to draft and is no
+                      longer entered for judging.
+                    </p>
+                    <div className="flex flex-wrap gap-3">
+                      <button
+                        type="button"
+                        onClick={() =>
+                          withdrawProject.mutate({
+                            hackathonId: selectedHackathonId,
+                          })
+                        }
+                        disabled={withdrawProject.isPending}
+                        className={btnDanger}
+                      >
+                        {withdrawProject.isPending
+                          ? "Withdrawing…"
+                          : "Withdraw"}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setConfirmWithdraw(false)}
+                        disabled={withdrawProject.isPending}
+                        className={btnSecondary}
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </form>
+          </section>
+        </div>
+      )}
+    </main>
+  );
+}
+
+export default function SubmitPortalPage() {
+  return (
+    <Suspense fallback={<LoadingScreen message="Loading…" />}>
+      <SubmitPortalContent />
+    </Suspense>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/submit/page.tsx b/sites/mainweb/app/(portal)/submit/page.tsx
index c73a669b..8f14d3b1 100644
--- a/sites/mainweb/app/(portal)/submit/page.tsx
+++ b/sites/mainweb/app/(portal)/submit/page.tsx
@@ -1,764 +1,53 @@
-"use client";
-
-import { useSession } from "next-auth/react";
-import { loginHref } from "@/lib/safe-callback";
-import { trpc } from "@/lib/trpc";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Suspense, useState } from "react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import Link from "next/link";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  chip,
-  fieldLabel,
-  input,
-  itemTitle,
-  kicker,
-  page,
-  pageTitle,
-  textLink,
-} from "@/components/portal/ui";
-
-/**
- * Deadlines are rendered in the event's own time zone, not the viewer's. Half
- * the field is remote, and a submission deadline shown in the wrong zone is the
- * one rendering mistake that costs someone their entry.
- */
-const formatMoment = (moment: Date) =>
-  moment.toLocaleString("en-US", {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    timeZoneName: "short",
-    timeZone: "America/New_York",
-  });
-
-/** A deadline that never breaks across lines: "EST." alone on a line is unreadable. */
-const Moment = ({ at }: { at: Date }) => (
-  <span className="whitespace-nowrap font-semibold">{formatMoment(at)}</span>
-);
-
-/** A teammate's view of the form: filed values read as values, not empty fields. */
-const readOnlyField =
-  "read-only:bg-transparent read-only:border-[var(--border-subtle)]";
-
-function SubmitPortalContent() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const urlHackathonId = searchParams.get("id");
-
-  const utils = trpc.useUtils();
-
-  // Context & State
-  const [selectedHackathonId, setSelectedHackathonId] = useState<string>(
-    urlHackathonId || "",
-  );
-  // The id can come straight from the URL or the picker, so it is encoded
-  // wherever it becomes part of a link path.
-  const hackathonPath = `/hackathons/${encodeURIComponent(selectedHackathonId)}`;
-  const [confirmWithdraw, setConfirmWithdraw] = useState(false);
-
-  const [projectName, setProjectName] = useState("");
-  const [projectDesc, setProjectDesc] = useState("");
-  const [githubUrl, setGithubUrl] = useState("");
-  const [videoUrl, setVideoUrl] = useState("");
-  const [demoUrl, setDemoUrl] = useState("");
-  // Judge routing filters on exactly these three. A submission without them
-  // reaches no track judge and no sponsor judge at all.
-  const [tracks, setTracks] = useState<string[]>([]);
-  const [challenges, setChallenges] = useState<string[]>([]);
-  const [isCreateX, setIsCreateX] = useState(false);
-
-  const [error, setError] = useState("");
-  const [successMessage, setSuccessMessage] = useState("");
-  const [projectSubmitted, setProjectSubmitted] = useState(false);
-  // Which hackathon the form below has already been filled from, so a
-  // background refetch cannot overwrite what someone is part-way through
-  // typing.
-  const [prefilledFor, setPrefilledFor] = useState("");
-
-  // Queries
-  const { data: myRegs, isLoading: loadingRegs } =
-    trpc.hackathon.myRegistrations.useQuery(undefined, {
-      enabled: !!session,
-      // An accepted attendee gets checked in at the venue, which is what
-      // unlocks the form. Poll for it only on the event's days, so the page
-      // updates without a reload and idle tabs stay quiet. Day granularity on
-      // the viewer's clock, as the event page does: a badge scanned before
-      // doors open still counts.
-      refetchInterval: (query) => {
-        const reg = query.state.data?.find(
-          (r) => r.hackathonId === selectedHackathonId,
-        );
-        if (reg?.registrationStatus !== "approved") return false;
-        const startOfDay = (d: Date | string) =>
-          new Date(d).setHours(0, 0, 0, 0);
-        const today = startOfDay(new Date());
-        const started = startOfDay(reg.hackathon.startDate) <= today;
-        const ended =
-          !!reg.hackathon.endDate && today > startOfDay(reg.hackathon.endDate);
-        return started && !ended ? 30_000 : false;
-      },
-    });
-
-  // The project a submit would overwrite — the team's entry, or the solo one
-  // this participant filed. Reading it from the team alone leaves every solo
-  // hacker staring at a blank form over a live submission.
-  const mySubmission = trpc.team.mySubmission.useQuery(
-    { hackathonId: selectedHackathonId },
-    { enabled: !!session && !!selectedHackathonId },
-  );
-
-  // The event's own track and challenge lists. Offering free text instead
-  // would be worse than offering nothing: judge assignment matches these
-  // strings exactly, so a typo silently removes a project from a judge's pool.
-  const { data: hackathonDetail } = trpc.hackathon.getById.useQuery(
-    { id: selectedHackathonId },
-    { enabled: !!session && !!selectedHackathonId },
-  );
-
-  // The window the submit mutation gates on. The page never queried it, so the
-  // refusal only ever arrived after the form was filled in.
-  const submissionWindow = trpc.team.submissionWindow.useQuery(
-    { hackathonId: selectedHackathonId },
-    { enabled: !!session && !!selectedHackathonId },
-  );
-
-  const availableTracks = hackathonDetail?.tracks ?? [];
-  const availableChallenges = hackathonDetail?.challenges ?? [];
-
-  const toggle = (
-    value: string,
-    current: string[],
-    set: (next: string[]) => void,
-  ) =>
-    set(
-      current.includes(value)
-        ? current.filter((v) => v !== value)
-        : [...current, value],
-    );
-
-  // We get the specific registration / team context based on selected hackathon
-  const currentReg = myRegs?.find((r) => r.hackathonId === selectedHackathonId);
-  // Same gate as TeamsTab: forming a team needs acceptance, and the server
-  // refuses anyone else, so the controls are not offered until then.
-  const admitted =
-    currentReg?.registrationStatus === "approved" ||
-    currentReg?.registrationStatus === "checked_in";
-  // A withdrawn project stays as a draft row, so the row alone is not a
-  // submission.
-  const hasSubmitted =
-    (!!mySubmission.data && mySubmission.data.status !== "draft") ||
-    currentReg?.hasSubmittedProject ||
-    projectSubmitted;
-  // submitProject and withdrawProject refuse everyone but the captain, so
-  // teammates see the entry but cannot change it.
-  const readOnly =
-    !!currentReg?.team && currentReg.team.captainId !== session?.user?.id;
-  // The team list already carries the captain; it is read only to name them.
-  const teamRoster = trpc.team.list.useQuery(
-    { hackathonId: selectedHackathonId },
-    { enabled: readOnly && !!selectedHackathonId },
-  );
-  const captainName = teamRoster.data?.find(
-    (t) => t.id === currentReg?.team?.id,
-  )?.captain?.name;
-
-  // Mutations
-  const submitProject = trpc.team.submitProject.useMutation({
-    onSuccess: () => {
-      utils.hackathon.myRegistrations.invalidate();
-      utils.team.mySubmission.invalidate();
-      setError("");
-      setSuccessMessage(
-        "Project submitted. Judging is in person: your team presents to judges for each challenge, and the event's Judging tab shows where and when.",
-      );
-      setProjectSubmitted(true);
-    },
-    onError: (err) => setError(err.message),
-  });
-
-  // Leaving or disbanding a team refuses while a submission stands and tells
-  // the user to withdraw it first, so there has to be a way to do that.
-  const withdrawProject = trpc.team.withdrawProject.useMutation({
-    onSuccess: () => {
-      utils.hackathon.myRegistrations.invalidate();
-      utils.team.mySubmission.invalidate();
-      setError("");
-      setProjectSubmitted(false);
-      setConfirmWithdraw(false);
-      setSuccessMessage(
-        "Submission withdrawn. It is back to draft and no longer entered for judging.",
-      );
-    },
-    onError: (err) => {
-      setConfirmWithdraw(false);
-      setError(err.message);
-    },
-  });
-
-  // Still submittable: until 12 hours after the event ends. The default pick
-  // and the dropdown use the same rule; defaulting to myRegs[0] could select
-  // a past edition the dropdown did not even list.
-  const isActiveReg = (reg: NonNullable<typeof myRegs>[number]) =>
-    reg.hackathon.endDate
-      ? new Date(
-          new Date(reg.hackathon.endDate).getTime() + 12 * 60 * 60 * 1000,
-        // oxlint-disable-next-line react/purity
-        ) >= new Date()
-      : true;
-
-  if (!selectedHackathonId && myRegs && myRegs.length > 0) {
-    const firstReg = myRegs.find(isActiveReg);
-    if (firstReg) {
-      setSelectedHackathonId(firstReg.hackathonId);
-    }
-  }
-
-  // Fill the form from the existing submission, once per selected event.
-  // Clearing when there is none matters as much as filling: the form used to
-  // keep the previous event's answers after switching, so a submit could file
-  // one hackathon's project against another.
-  if (
-    selectedHackathonId &&
-    !mySubmission.isPending &&
-    prefilledFor !== selectedHackathonId
-  ) {
-    const p = mySubmission.data;
-    setProjectName(p?.name ?? "");
-    setProjectDesc(p?.description ?? "");
-    setGithubUrl(p?.githubUrl ?? "");
-    setVideoUrl(p?.videoUrl ?? "");
-    setDemoUrl(p?.demoUrl ?? "");
-    setTracks(p?.tracks ?? []);
-    setChallenges(p?.challenges ?? []);
-    setIsCreateX(p?.isCreateX ?? false);
-    setPrefilledFor(selectedHackathonId);
-  }
-
-  if (status === "loading" || loadingRegs) {
-    return <LoadingScreen message="Loading…" />;
-  }
-
-  if (!session) {
-    router.push(loginHref());
-    return null;
-  }
-
-  const activeRegs = myRegs?.filter(isActiveReg) || [];
-  // One live event is already named by the kicker; the picker earns its place
-  // only when there is something to choose.
-  const showEventPicker =
-    activeRegs.length > 1 ||
-    !activeRegs.some((r) => r.hackathonId === selectedHackathonId);
-
-  // A teammate reads what was filed; a row of dimmed buttons says it badly.
-  const filedChips = (picked: string[]) =>
-    picked.length > 0 ? (
-      picked.map((v) => (
-        <span key={v} className={chip(true)}>
-          {v}
-        </span>
-      ))
-    ) : (
-      <p className="text-[13px] text-[var(--text-muted)]">None picked</p>
-    );
-
-  return (
-    <main className={page}>
-      <Link
-        href="/dashboard"
-        className="inline-flex min-h-11 items-center text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
-      >
-        ← Dashboard
-      </Link>
-
-      <header className="mt-2">
-        {currentReg && <p className={kicker}>{currentReg.hackathon.name}</p>}
-        <h1 className={`mt-1 ${pageTitle}`}>Submit your project</h1>
-      </header>
-
-      {!myRegs || myRegs.length === 0 ? (
-        <section className="mt-10 border-t border-[var(--border-subtle)] pt-6">
-          <p className={body}>
-            Once you register for a hackathon, you can submit your project
-            here.
-          </p>
-          <Link href="/hackathons" className={`mt-4 ${btnPrimary}`}>
-            Browse hackathons
-          </Link>
-        </section>
-      ) : (
-        <div className="mt-10 grid grid-cols-1 gap-10 border-t border-[var(--border-subtle)] pt-8 lg:grid-cols-12">
-          {/* Context and team */}
-          <aside className="space-y-8 lg:col-span-4">
-            {showEventPicker && (
-              <div>
-                <label htmlFor="event-context" className={fieldLabel}>
-                  Hackathon
-                </label>
-                <select
-                  id="event-context"
-                  className={`${input} min-h-11`}
-                  value={selectedHackathonId}
-                  onChange={(e) => {
-                    setSelectedHackathonId(e.target.value);
-                    setError("");
-                    setSuccessMessage("");
-                    setProjectSubmitted(false);
-                    setConfirmWithdraw(false);
-                  }}
-                >
-                  <option value="" disabled>
-                    Select a hackathon…
-                  </option>
-                  {activeRegs.map((r) => (
-                    <option key={r.hackathonId} value={r.hackathonId}>
-                      {r.hackathon.name}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            )}
-
-            <div
-              className={
-                showEventPicker
-                  ? "border-t border-[var(--border-subtle)] pt-6"
-                  : undefined
-              }
-            >
-              <h2 className="text-[13px] font-medium text-[var(--text-muted)]">
-                {currentReg?.team ? "Your team" : "Team"}
-              </h2>
-              {currentReg?.team ? (
-                <>
-                  <p className={`mt-1 ${itemTitle}`}>{currentReg.team.name}</p>
-                  <p className="mt-1 text-[13px] text-[var(--text-muted)]">
-                    {currentReg.team.currentMembers} of{" "}
-                    {currentReg.team.maxMembers} members ·{" "}
-                    {readOnly
-                      ? `${captainName ?? "your captain"} submits for the team`
-                      : "you're the captain"}
-                  </p>
-                </>
-              ) : (
-                <p className={`mt-1 ${body}`}>
-                  {admitted
-                    ? "You're submitting solo. Create a team or join one from the event's Teams tab."
-                    : "You can create or join a team once you have been accepted."}
-                </p>
-              )}
-              {currentReg && (currentReg.team || admitted) && (
-                <Link
-                  href={`${hackathonPath}?tab=TEAMS`}
-                  className={`mt-3 ${textLink}`}
-                >
-                  {currentReg.team ? "Manage team" : "Create or join a team"}
-                </Link>
-              )}
-            </div>
-          </aside>
-
-          {/* Project submission */}
-          <section className="border-t border-[var(--border-subtle)] pt-8 lg:col-span-8 lg:border-t-0 lg:pt-0">
-            <div className="mb-8 space-y-4 empty:hidden">
-              {/* Once the project is in judging, the team's times and rooms
-                  live on the hackathon's Judging tab. */}
-              {mySubmission.data?.inJudging && (
-                <p className="border-l-2 border-accent pl-3 text-[15px] text-[var(--text-primary)]">
-                  Your project is in judging. Your team presents to judges for
-                  each challenge it entered, and the{" "}
-                  <Link
-                    href={`${hackathonPath}?tab=JUDGING`}
-                    className="font-semibold underline decoration-accent decoration-2 underline-offset-[5px]"
-                  >
-                    Judging tab
-                  </Link>{" "}
-                  shows where and when once organisers publish the schedule.
-                </p>
-              )}
-
-              {/* Admission, said before the form is filled in. Acceptance
-                  lets you form a team; submitting needs the badge scan,
-                  because judging happens in person. */}
-              {currentReg && currentReg.registrationStatus !== "checked_in" && (
-                <p className="border-l-2 border-[var(--warning)] pl-3 text-[15px] text-[var(--text-primary)]">
-                  {currentReg.registrationStatus === "approved"
-                    ? "You're accepted. Check in at the event before submitting: find a volunteer and have your badge scanned."
-                    : currentReg.registrationStatus === "pending"
-                      ? "Your registration is still being reviewed. You can form a team once you have been accepted."
-                      : currentReg.registrationStatus === "waitlisted"
-                        ? "You're on the waitlist. If a seat opens, you'll be accepted and can submit."
-                        : "Your registration wasn't accepted, so you can't submit to this hackathon."}
-                </p>
-              )}
-
-              {/* The window this form is gated on, said before it is filled
-                  in. Without it an attendee wrote a full description and
-                  learned it was refused only on submit. */}
-              {submissionWindow.data && (
-                <p
-                  className={`border-l-2 pl-3 text-[15px] text-[var(--text-primary)] ${
-                    submissionWindow.data.isOpen
-                      ? "border-accent"
-                      : "border-[var(--warning)]"
-                  }`}
-                >
-                  {submissionWindow.data.cancelled ? (
-                    "This hackathon has been cancelled, so nothing can be submitted."
-                  ) : submissionWindow.data.notYetOpen ? (
-                    <>
-                      Submission opens{" "}
-                      <Moment at={submissionWindow.data.opensAt} />. The form is
-                      here early so you can see what it asks for.
-                    </>
-                  ) : !submissionWindow.data.isOpen ? (
-                    <>
-                      Submission closed{" "}
-                      <Moment at={submissionWindow.data.closesAt} />.
-                    </>
-                  ) : !hasSubmitted ? (
-                    <>
-                      Submissions close{" "}
-                      <Moment at={submissionWindow.data.closesAt} />.
-                    </>
-                  ) : submissionWindow.data.canEditExisting ? (
-                    <>
-                      {readOnly
-                        ? "Your team can edit its entry"
-                        : "You can edit your entry"}{" "}
-                      until <Moment at={submissionWindow.data.editsCloseAt} />.
-                    </>
-                  ) : (
-                    <>
-                      Edits closed{" "}
-                      <Moment at={submissionWindow.data.editsCloseAt} />, so
-                      your entry stands as filed.
-                    </>
-                  )}
-                </p>
-              )}
-            </div>
-
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                if (readOnly) return;
-                submitProject.mutate({
-                  hackathonId: selectedHackathonId,
-                  teamId: currentReg?.team?.id,
-                  name: projectName,
-                  description: projectDesc,
-                  githubUrl,
-                  demoUrl,
-                  videoUrl,
-                  tracks,
-                  challenges,
-                  isCreateX,
-                });
-              }}
-              className="space-y-10"
-            >
-              {/* Name & Desc */}
-              <div className="space-y-5">
-                <div>
-                  <label htmlFor="project-name" className={fieldLabel}>
-                    Project name{" "}
-                    <span className="font-normal text-[var(--text-muted)]">
-                      (required)
-                    </span>
-                  </label>
-                  <input
-                    id="project-name"
-                    type="text"
-                    required
-                    readOnly={readOnly}
-                    value={projectName}
-                    onChange={(e) => setProjectName(e.target.value)}
-                    placeholder="e.g. Transit delay predictor"
-                    className={`${input} ${readOnlyField}`}
-                  />
-                </div>
-                <div>
-                  <label htmlFor="project-description" className={fieldLabel}>
-                    Description{" "}
-                    <span className="font-normal text-[var(--text-muted)]">
-                      (required)
-                    </span>
-                  </label>
-                  <textarea
-                    id="project-description"
-                    required
-                    readOnly={readOnly}
-                    value={projectDesc}
-                    onChange={(e) => setProjectDesc(e.target.value)}
-                    placeholder="Explain the problem you solved and how you built it…"
-                    rows={5}
-                    className={`resize-none ${input} ${readOnlyField} [field-sizing:content] min-h-[8.5rem]`}
-                  />
-                </div>
-              </div>
-
-              {/* Tracks, challenges and CreateX — what judge assignment
-                  routes on. Rendered only when the organisers configured
-                  them, so an event without tracks shows nothing rather
-                  than an empty box. */}
-              {(availableTracks.length > 0 ||
-                availableChallenges.length > 0) && (
-                <div className="border-t border-[var(--border-subtle)] pt-6">
-                  <h3 className={itemTitle}>Tracks and challenges</h3>
-                  {!readOnly && (
-                    <p className={`mt-1 ${body}`}>
-                      Your project presents to judges for each challenge you
-                      pick, so pick everything you are competing for.
-                    </p>
-                  )}
-
-                  {availableTracks.length > 0 && (
-                    <div className="mt-5">
-                      <p className={fieldLabel}>Tracks</p>
-                      <div className="flex flex-wrap gap-2">
-                        {readOnly
-                          ? filedChips(tracks)
-                          : availableTracks.map((track) => (
-                              <button
-                                key={track}
-                                type="button"
-                                onClick={() => toggle(track, tracks, setTracks)}
-                                aria-pressed={tracks.includes(track)}
-                                className={chip(tracks.includes(track))}
-                              >
-                                {track}
-                              </button>
-                            ))}
-                      </div>
-                    </div>
-                  )}
-
-                  {availableChallenges.length > 0 && (
-                    <div className="mt-5">
-                      <p className={fieldLabel}>Sponsor challenges</p>
-                      <div className="flex flex-wrap gap-2">
-                        {readOnly
-                          ? filedChips(challenges)
-                          : availableChallenges.map((challenge) => (
-                              <button
-                                key={challenge}
-                                type="button"
-                                onClick={() =>
-                                  toggle(challenge, challenges, setChallenges)
-                                }
-                                aria-pressed={challenges.includes(challenge)}
-                                className={chip(challenges.includes(challenge))}
-                              >
-                                {challenge}
-                              </button>
-                            ))}
-                      </div>
-                    </div>
-                  )}
-
-                  {readOnly ? (
-                    isCreateX && (
-                      <p className={`mt-6 ${body}`}>
-                        Entered for the CreateX entrepreneurship prize.
-                      </p>
-                    )
-                  ) : (
-                    <label
-                      htmlFor="is-createx"
-                      className="mt-6 flex min-h-11 cursor-pointer items-start gap-3 py-2.5 text-[15px] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
-                    >
-                      <input
-                        id="is-createx"
-                        type="checkbox"
-                        checked={isCreateX}
-                        onChange={(e) => setIsCreateX(e.target.checked)}
-                        className="mt-0.5 h-5 w-5 min-h-0! min-w-0! shrink-0 cursor-pointer accent-[var(--accent)]"
-                      />
-                      We are competing for the CreateX entrepreneurship prize
-                    </label>
-                  )}
-                </div>
-              )}
-
-              {/* Links */}
-              <div className="border-t border-[var(--border-subtle)] pt-6">
-                <h3 className={itemTitle}>Links</h3>
-
-                <div className="mt-4 space-y-5">
-                  <div>
-                    <label htmlFor="github-url" className={fieldLabel}>
-                      GitHub repository
-                    </label>
-                    <input
-                      id="github-url"
-                      type="url"
-                      readOnly={readOnly}
-                      value={githubUrl}
-                      onChange={(e) => setGithubUrl(e.target.value)}
-                      placeholder="https://github.com/…"
-                      className={`${input} ${readOnlyField}`}
-                    />
-                  </div>
-                  <div>
-                    <label htmlFor="video-url" className={fieldLabel}>
-                      Demo video
-                    </label>
-                    <input
-                      id="video-url"
-                      type="url"
-                      readOnly={readOnly}
-                      value={videoUrl}
-                      onChange={(e) => setVideoUrl(e.target.value)}
-                      placeholder="https://youtube.com/…"
-                      className={`${input} ${readOnlyField}`}
-                    />
-                  </div>
-                  <div>
-                    <label htmlFor="demo-url" className={fieldLabel}>
-                      Live demo URL
-                    </label>
-                    <input
-                      id="demo-url"
-                      type="url"
-                      readOnly={readOnly}
-                      value={demoUrl}
-                      onChange={(e) => setDemoUrl(e.target.value)}
-                      placeholder="https://…"
-                      className={`${input} ${readOnlyField}`}
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div className="space-y-4 border-t border-[var(--border-subtle)] pt-6 empty:hidden">
-                {/* Feedback lands beside the button that was tapped, not in
-                    the notices above the form. */}
-                {error && (
-                  <p
-                    role="alert"
-                    className="border-l-2 border-[var(--danger)] pl-3 text-[15px] text-[var(--danger)]"
-                  >
-                    {error}
-                  </p>
-                )}
-
-                {successMessage && (
-                  <div
-                    role="status"
-                    className="space-y-2 border-l-2 border-[var(--success)] pl-3"
-                  >
-                    <p className="text-[15px] font-semibold text-[var(--text-primary)]">
-                      {successMessage}
-                    </p>
-                    {/* A withdrawn project is out of judging, so only a
-                        submit points there. */}
-                    {projectSubmitted ? (
-                      <Link
-                        href={`${hackathonPath}?tab=JUDGING`}
-                        className={textLink}
-                      >
-                        Go to Judging
-                      </Link>
-                    ) : (
-                      <Link href="/dashboard" className={textLink}>
-                        Back to dashboard
-                      </Link>
-                    )}
-                  </div>
-                )}
-
-                {hasSubmitted && !successMessage && (
-                  <p className="text-[13px] text-[var(--text-muted)]">
-                    {readOnly
-                      ? "Your team has submitted."
-                      : "You've already submitted. Saving replaces your current entry."}
-                  </p>
-                )}
-
-                {!readOnly && (
-                  <button
-                    type="submit"
-                    disabled={submitProject.isPending}
-                    className={`${btnPrimary} w-full sm:w-auto`}
-                  >
-                    {submitProject.isPending
-                      ? "Submitting…"
-                      : hasSubmitted
-                        ? "Save changes"
-                        : "Submit project"}
-                  </button>
-                )}
-
-                {hasSubmitted && !readOnly && !confirmWithdraw && (
-                  <div className="border-t border-[var(--border-subtle)] pt-4">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setError("");
-                        setSuccessMessage("");
-                        setConfirmWithdraw(true);
-                      }}
-                      className={btnDanger}
-                    >
-                      Withdraw submission
-                    </button>
-                  </div>
-                )}
-
-                {confirmWithdraw && (
-                  <div className="flex w-full flex-col gap-3 border-t border-[var(--border-subtle)] pt-4">
-                    <p className={body}>
-                      Withdraw your submission? It goes back to draft and is no
-                      longer entered for judging.
-                    </p>
-                    <div className="flex flex-wrap gap-3">
-                      <button
-                        type="button"
-                        onClick={() =>
-                          withdrawProject.mutate({
-                            hackathonId: selectedHackathonId,
-                          })
-                        }
-                        disabled={withdrawProject.isPending}
-                        className={btnDanger}
-                      >
-                        {withdrawProject.isPending
-                          ? "Withdrawing…"
-                          : "Withdraw"}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => setConfirmWithdraw(false)}
-                        disabled={withdrawProject.isPending}
-                        className={btnSecondary}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </form>
-          </section>
-        </div>
-      )}
-    </main>
-  );
-}
-
-export default function SubmitPortalPage() {
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import SubmitPage from "./SubmitPage";
+
+const GRACE_MS = 12 * 60 * 60 * 1000;
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Promise<{ id?: string | string[] }>;
+}) {
+  const { id: rawId } = await searchParams;
+  const urlId = typeof rawId === "string" ? rawId : "";
   return (
-    <Suspense fallback={<LoadingScreen message="Loading…" />}>
-      <SubmitPortalContent />
-    </Suspense>
+    <PrefetchedPage
+      reads={async (c) => {
+        const myRegs = c.hackathon.myRegistrations();
+        // The client picks the event named in the URL, else the first one
+        // still open to submissions; read the same event it will ask about.
+        let hackathonId = urlId;
+        if (!hackathonId) {
+          const regs = await myRegs.catch(() => []);
+          const now = Date.now();
+          hackathonId =
+            regs.find(
+              (r) =>
+                !r.hackathon.endDate ||
+                new Date(r.hackathon.endDate).getTime() + GRACE_MS >= now,
+            )?.hackathonId ?? "";
+        }
+        return [
+          ["hackathon.myRegistrations", undefined, myRegs],
+          ...(hackathonId
+            ? ([
+                [
+                  "team.mySubmission",
+                  { hackathonId },
+                  c.team.mySubmission({ hackathonId }),
+                ],
+                ["hackathon.getById", { id: hackathonId }, c.hackathon.getById({ id: hackathonId })],
+                [
+                  "team.submissionWindow",
+                  { hackathonId },
+                  c.team.submissionWindow({ hackathonId }),
+                ],
+              ] as const)
+            : []),
+        ];
+      }}
+    >
+      <SubmitPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/app/(portal)/subteams/SubteamsPage.tsx b/sites/mainweb/app/(portal)/subteams/SubteamsPage.tsx
new file mode 100644
index 00000000..a004e1a8
--- /dev/null
+++ b/sites/mainweb/app/(portal)/subteams/SubteamsPage.tsx
@@ -0,0 +1,402 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { LoadingScreen } from "@/components/portal/LoadingScreen";
+import {
+  SubteamApplicationChip,
+  shortDate,
+} from "@/components/portal/subteams/chips";
+import {
+  body,
+  btnDanger,
+  btnPrimary,
+  btnSecondary,
+  fieldLabel,
+  input,
+  itemTitle,
+  meta,
+  object,
+  page,
+  pageDek,
+  pageTitle,
+  sectionTitle,
+} from "@/components/portal/ui";
+import { trpc } from "@/lib/trpc";
+import { loginHref } from "@/lib/safe-callback";
+import type { RouterOutputs } from "@query/api";
+
+type OpenSubteam = RouterOutputs["subteam"]["list"][number];
+type MyApplication = RouterOutputs["subteam"]["myApplications"][number];
+
+const errorText = "text-sm text-[var(--danger)]";
+const quietAction =
+  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
+const inlineLink =
+  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
+const listRow = "border-b border-[var(--border-subtle)] py-5";
+const quote = `${body} whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`;
+
+// Mirrors the router's limits, so the browser stops the typing rather than the
+// server bouncing the whole form.
+const MAX_ANSWER = 2000;
+const MAX_NOTE = 1000;
+
+function ApplyForm({
+  subteam,
+  onDone,
+}: {
+  subteam: OpenSubteam;
+  onDone: () => void;
+}) {
+  const utils = trpc.useUtils();
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+  const [note, setNote] = useState("");
+
+  const join = trpc.subteam.requestToJoin.useMutation({
+    onSuccess: async () => {
+      onDone();
+      // Applying moves a subteam from one list to the other; refreshing one
+      // alone renders it twice.
+      await Promise.all([
+        utils.subteam.list.invalidate(),
+        utils.subteam.myApplications.invalidate(),
+      ]);
+    },
+  });
+
+  const missing = subteam.questions.some(
+    (question) => question.required && !answers[question.id]?.trim(),
+  );
+
+  return (
+    <form
+      className="mt-5 space-y-5 border-t border-[var(--border-subtle)] pt-5"
+      onSubmit={(event) => {
+        event.preventDefault();
+        join.mutate({
+          subteamId: subteam.id,
+          answers: subteam.questions.map((question) => ({
+            questionId: question.id,
+            answer: (answers[question.id] ?? "").trim(),
+          })),
+          note: note.trim() || undefined,
+        });
+      }}
+    >
+      {subteam.questions.map((question) => {
+        const id = `answer-${subteam.id}-${question.id}`;
+        return (
+          <div key={question.id}>
+            <label htmlFor={id} className={fieldLabel}>
+              {question.prompt}
+              {!question.required && (
+                <span className="font-normal text-[var(--text-subtle)]">
+                  {" "}
+                  (optional)
+                </span>
+              )}
+            </label>
+            <textarea
+              id={id}
+              rows={3}
+              required={question.required}
+              maxLength={MAX_ANSWER}
+              value={answers[question.id] ?? ""}
+              onChange={(event) =>
+                setAnswers((prev) => ({
+                  ...prev,
+                  [question.id]: event.target.value,
+                }))
+              }
+              className={input}
+            />
+          </div>
+        );
+      })}
+
+      <div>
+        <label htmlFor={`note-${subteam.id}`} className={fieldLabel}>
+          Anything else we should know?{" "}
+          <span className="font-normal text-[var(--text-subtle)]">
+            (optional)
+          </span>
+        </label>
+        <textarea
+          id={`note-${subteam.id}`}
+          rows={2}
+          maxLength={MAX_NOTE}
+          value={note}
+          onChange={(event) => setNote(event.target.value)}
+          className={input}
+        />
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <button
+          type="submit"
+          disabled={join.isPending || missing}
+          className={btnPrimary}
+        >
+          {join.isPending ? "Sending…" : "Send application"}
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            join.reset();
+            onDone();
+          }}
+          className={btnSecondary}
+        >
+          Cancel
+        </button>
+      </div>
+
+      {join.error && (
+        <p aria-live="polite" className={errorText}>
+          {join.error.message}
+        </p>
+      )}
+    </form>
+  );
+}
+
+function SubteamCard({
+  subteam,
+  canApply,
+}: {
+  subteam: OpenSubteam;
+  canApply: boolean;
+}) {
+  const [writing, setWriting] = useState(false);
+
+  return (
+    <li className={`${object} p-5`}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <h3 className={itemTitle}>{subteam.name}</h3>
+          {subteam.summary && (
+            <p className="mt-1 text-[15px] leading-relaxed text-[var(--text-secondary)]">
+              {subteam.summary}
+            </p>
+          )}
+        </div>
+
+        {subteam.myStatus ? (
+          <SubteamApplicationChip status={subteam.myStatus} />
+        ) : (
+          !writing &&
+          canApply && (
+            <button
+              type="button"
+              onClick={() => setWriting(true)}
+              className={`${btnSecondary} shrink-0`}
+            >
+              Apply
+            </button>
+          )
+        )}
+      </div>
+
+      {subteam.description && (
+        <div className="mt-4">
+          <p className={meta}>What you would do</p>
+          <p className={`${body} mt-1 whitespace-pre-line`}>
+            {subteam.description}
+          </p>
+        </div>
+      )}
+
+      {writing && (
+        <ApplyForm subteam={subteam} onDone={() => setWriting(false)} />
+      )}
+    </li>
+  );
+}
+
+function ApplicationRow({ application }: { application: MyApplication }) {
+  const utils = trpc.useUtils();
+  const [confirm, setConfirm] = useState(false);
+
+  const withdraw = trpc.subteam.withdraw.useMutation({
+    onSuccess: async () => {
+      await Promise.all([
+        utils.subteam.list.invalidate(),
+        utils.subteam.myApplications.invalidate(),
+      ]);
+    },
+  });
+
+  return (
+    <li className={listRow}>
+      <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="text-[15px] font-semibold text-[var(--text-primary)]">
+              {application.subteamName}
+            </h3>
+            <SubteamApplicationChip status={application.status} />
+          </div>
+          <p className={`${meta} mt-1`}>
+            Applied {shortDate(application.appliedAt)}
+            {application.subteamArchivedAt !== null ? " · archived" : ""}
+          </p>
+          {application.decisionNote && (
+            <p className={`${quote} mt-3`}>{application.decisionNote}</p>
+          )}
+          {application.answers.length > 0 && (
+            <details className="mt-3">
+              <summary className={`${quietAction} cursor-pointer`}>
+                Your answers
+              </summary>
+              <dl className="mt-3 space-y-3">
+                {application.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>
+            </details>
+          )}
+        </div>
+
+        {/* Only while nobody has decided: after that it is the admins' record. */}
+        {application.status === "pending" &&
+          (confirm ? (
+            <span className="flex flex-wrap items-center gap-3">
+              <span className="text-sm text-[var(--text-muted)]">
+                Withdraw your application?
+              </span>
+              <button
+                type="button"
+                disabled={withdraw.isPending}
+                onClick={() => {
+                  withdraw.mutate({ applicationId: application.id });
+                  setConfirm(false);
+                }}
+                className={btnDanger}
+              >
+                Withdraw
+              </button>
+              <button
+                type="button"
+                onClick={() => setConfirm(false)}
+                className={btnSecondary}
+              >
+                Cancel
+              </button>
+            </span>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setConfirm(true)}
+              className={`${quietAction} shrink-0`}
+            >
+              Withdraw
+            </button>
+          ))}
+      </div>
+
+      {withdraw.error && (
+        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
+      )}
+    </li>
+  );
+}
+
+export default function SubteamsPage() {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  // Queries wait on the session, so a signed-out visitor otherwise sits on
+  // the loading screen forever.
+  useEffect(() => {
+    if (status === "unauthenticated") router.push(loginHref());
+  }, [status, router]);
+
+  const open = trpc.subteam.list.useQuery(undefined, { enabled: !!session });
+  const mine = trpc.subteam.myApplications.useQuery(undefined, {
+    enabled: !!session,
+  });
+  const memberStatus = trpc.member.checkStatus.useQuery(undefined, {
+    enabled: !!session,
+  });
+
+  if (status === "loading" || open.isPending || mine.isPending) {
+    return <LoadingScreen />;
+  }
+
+  const subteams = open.data ?? [];
+  const applications = mine.data ?? [];
+  const canApply = !!memberStatus.data?.isActive;
+  const loadError = open.error ?? mine.error;
+
+  return (
+    <div className={page}>
+      <Link
+        href="/dashboard"
+        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
+      >
+        ← Dashboard
+      </Link>
+
+      <header className="mt-6">
+        <h1 className={pageTitle}>Subteams</h1>
+        <p className={pageDek}>
+          The groups that run the club. Pick one you want to help with and tell
+          us a little about yourself.
+        </p>
+      </header>
+
+      {loadError && (
+        <p className={`${errorText} mt-6`}>
+          {loadError.message} Refresh the page to try again.
+        </p>
+      )}
+
+      {!canApply && memberStatus.isSuccess && (
+        <p className={`${meta} mt-6`}>
+          Applying needs an active membership.{" "}
+          <Link href="/dashboard" className={inlineLink}>
+            Become a member
+          </Link>
+        </p>
+      )}
+
+      <section className="mt-10">
+        <h2 className={sectionTitle}>Taking applications</h2>
+        {subteams.length > 0 ? (
+          <ul className="mt-5 space-y-4">
+            {subteams.map((subteam) => (
+              <SubteamCard
+                key={subteam.id}
+                subteam={subteam}
+                canApply={canApply}
+              />
+            ))}
+          </ul>
+        ) : (
+          <p className={`${body} mt-3 max-w-xl`}>
+            No subteams are taking applications right now. Check back at the
+            start of the semester, when most of them open.
+          </p>
+        )}
+      </section>
+
+      {applications.length > 0 && (
+        <section className="mt-12">
+          <h2 className={sectionTitle}>Your applications</h2>
+          <ul className="mt-4 border-t border-[var(--border-subtle)]">
+            {applications.map((application) => (
+              <ApplicationRow key={application.id} application={application} />
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+}
diff --git a/sites/mainweb/app/(portal)/subteams/page.tsx b/sites/mainweb/app/(portal)/subteams/page.tsx
index a004e1a8..adf12234 100644
--- a/sites/mainweb/app/(portal)/subteams/page.tsx
+++ b/sites/mainweb/app/(portal)/subteams/page.tsx
@@ -1,402 +1,16 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useSession } from "next-auth/react";
-import { LoadingScreen } from "@/components/portal/LoadingScreen";
-import {
-  SubteamApplicationChip,
-  shortDate,
-} from "@/components/portal/subteams/chips";
-import {
-  body,
-  btnDanger,
-  btnPrimary,
-  btnSecondary,
-  fieldLabel,
-  input,
-  itemTitle,
-  meta,
-  object,
-  page,
-  pageDek,
-  pageTitle,
-  sectionTitle,
-} from "@/components/portal/ui";
-import { trpc } from "@/lib/trpc";
-import { loginHref } from "@/lib/safe-callback";
-import type { RouterOutputs } from "@query/api";
-
-type OpenSubteam = RouterOutputs["subteam"]["list"][number];
-type MyApplication = RouterOutputs["subteam"]["myApplications"][number];
-
-const errorText = "text-sm text-[var(--danger)]";
-const quietAction =
-  "text-sm font-semibold text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)] disabled:opacity-50";
-const inlineLink =
-  "font-semibold text-[var(--text-primary)] underline decoration-accent underline-offset-4 hover:decoration-[var(--text-primary)]";
-const listRow = "border-b border-[var(--border-subtle)] py-5";
-const quote = `${body} whitespace-pre-line border-l-2 border-[var(--border-medium)] pl-3`;
-
-// Mirrors the router's limits, so the browser stops the typing rather than the
-// server bouncing the whole form.
-const MAX_ANSWER = 2000;
-const MAX_NOTE = 1000;
-
-function ApplyForm({
-  subteam,
-  onDone,
-}: {
-  subteam: OpenSubteam;
-  onDone: () => void;
-}) {
-  const utils = trpc.useUtils();
-  const [answers, setAnswers] = useState<Record<string, string>>({});
-  const [note, setNote] = useState("");
-
-  const join = trpc.subteam.requestToJoin.useMutation({
-    onSuccess: async () => {
-      onDone();
-      // Applying moves a subteam from one list to the other; refreshing one
-      // alone renders it twice.
-      await Promise.all([
-        utils.subteam.list.invalidate(),
-        utils.subteam.myApplications.invalidate(),
-      ]);
-    },
-  });
-
-  const missing = subteam.questions.some(
-    (question) => question.required && !answers[question.id]?.trim(),
-  );
+import { PrefetchedPage } from "@/components/portal/PrefetchedPage";
+import SubteamsPage from "./SubteamsPage";
 
+export default function Page() {
   return (
-    <form
-      className="mt-5 space-y-5 border-t border-[var(--border-subtle)] pt-5"
-      onSubmit={(event) => {
-        event.preventDefault();
-        join.mutate({
-          subteamId: subteam.id,
-          answers: subteam.questions.map((question) => ({
-            questionId: question.id,
-            answer: (answers[question.id] ?? "").trim(),
-          })),
-          note: note.trim() || undefined,
-        });
-      }}
+    <PrefetchedPage
+      reads={(c) => [
+        ["subteam.list", undefined, c.subteam.list()],
+        ["subteam.myApplications", undefined, c.subteam.myApplications()],
+        ["member.checkStatus", undefined, c.member.checkStatus()],
+      ]}
     >
-      {subteam.questions.map((question) => {
-        const id = `answer-${subteam.id}-${question.id}`;
-        return (
-          <div key={question.id}>
-            <label htmlFor={id} className={fieldLabel}>
-              {question.prompt}
-              {!question.required && (
-                <span className="font-normal text-[var(--text-subtle)]">
-                  {" "}
-                  (optional)
-                </span>
-              )}
-            </label>
-            <textarea
-              id={id}
-              rows={3}
-              required={question.required}
-              maxLength={MAX_ANSWER}
-              value={answers[question.id] ?? ""}
-              onChange={(event) =>
-                setAnswers((prev) => ({
-                  ...prev,
-                  [question.id]: event.target.value,
-                }))
-              }
-              className={input}
-            />
-          </div>
-        );
-      })}
-
-      <div>
-        <label htmlFor={`note-${subteam.id}`} className={fieldLabel}>
-          Anything else we should know?{" "}
-          <span className="font-normal text-[var(--text-subtle)]">
-            (optional)
-          </span>
-        </label>
-        <textarea
-          id={`note-${subteam.id}`}
-          rows={2}
-          maxLength={MAX_NOTE}
-          value={note}
-          onChange={(event) => setNote(event.target.value)}
-          className={input}
-        />
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        <button
-          type="submit"
-          disabled={join.isPending || missing}
-          className={btnPrimary}
-        >
-          {join.isPending ? "Sending…" : "Send application"}
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            join.reset();
-            onDone();
-          }}
-          className={btnSecondary}
-        >
-          Cancel
-        </button>
-      </div>
-
-      {join.error && (
-        <p aria-live="polite" className={errorText}>
-          {join.error.message}
-        </p>
-      )}
-    </form>
-  );
-}
-
-function SubteamCard({
-  subteam,
-  canApply,
-}: {
-  subteam: OpenSubteam;
-  canApply: boolean;
-}) {
-  const [writing, setWriting] = useState(false);
-
-  return (
-    <li className={`${object} p-5`}>
-      <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0 flex-1">
-          <h3 className={itemTitle}>{subteam.name}</h3>
-          {subteam.summary && (
-            <p className="mt-1 text-[15px] leading-relaxed text-[var(--text-secondary)]">
-              {subteam.summary}
-            </p>
-          )}
-        </div>
-
-        {subteam.myStatus ? (
-          <SubteamApplicationChip status={subteam.myStatus} />
-        ) : (
-          !writing &&
-          canApply && (
-            <button
-              type="button"
-              onClick={() => setWriting(true)}
-              className={`${btnSecondary} shrink-0`}
-            >
-              Apply
-            </button>
-          )
-        )}
-      </div>
-
-      {subteam.description && (
-        <div className="mt-4">
-          <p className={meta}>What you would do</p>
-          <p className={`${body} mt-1 whitespace-pre-line`}>
-            {subteam.description}
-          </p>
-        </div>
-      )}
-
-      {writing && (
-        <ApplyForm subteam={subteam} onDone={() => setWriting(false)} />
-      )}
-    </li>
-  );
-}
-
-function ApplicationRow({ application }: { application: MyApplication }) {
-  const utils = trpc.useUtils();
-  const [confirm, setConfirm] = useState(false);
-
-  const withdraw = trpc.subteam.withdraw.useMutation({
-    onSuccess: async () => {
-      await Promise.all([
-        utils.subteam.list.invalidate(),
-        utils.subteam.myApplications.invalidate(),
-      ]);
-    },
-  });
-
-  return (
-    <li className={listRow}>
-      <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="text-[15px] font-semibold text-[var(--text-primary)]">
-              {application.subteamName}
-            </h3>
-            <SubteamApplicationChip status={application.status} />
-          </div>
-          <p className={`${meta} mt-1`}>
-            Applied {shortDate(application.appliedAt)}
-            {application.subteamArchivedAt !== null ? " · archived" : ""}
-          </p>
-          {application.decisionNote && (
-            <p className={`${quote} mt-3`}>{application.decisionNote}</p>
-          )}
-          {application.answers.length > 0 && (
-            <details className="mt-3">
-              <summary className={`${quietAction} cursor-pointer`}>
-                Your answers
-              </summary>
-              <dl className="mt-3 space-y-3">
-                {application.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>
-            </details>
-          )}
-        </div>
-
-        {/* Only while nobody has decided: after that it is the admins' record. */}
-        {application.status === "pending" &&
-          (confirm ? (
-            <span className="flex flex-wrap items-center gap-3">
-              <span className="text-sm text-[var(--text-muted)]">
-                Withdraw your application?
-              </span>
-              <button
-                type="button"
-                disabled={withdraw.isPending}
-                onClick={() => {
-                  withdraw.mutate({ applicationId: application.id });
-                  setConfirm(false);
-                }}
-                className={btnDanger}
-              >
-                Withdraw
-              </button>
-              <button
-                type="button"
-                onClick={() => setConfirm(false)}
-                className={btnSecondary}
-              >
-                Cancel
-              </button>
-            </span>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setConfirm(true)}
-              className={`${quietAction} shrink-0`}
-            >
-              Withdraw
-            </button>
-          ))}
-      </div>
-
-      {withdraw.error && (
-        <p className={`${errorText} mt-3`}>{withdraw.error.message}</p>
-      )}
-    </li>
-  );
-}
-
-export default function SubteamsPage() {
-  const { data: session, status } = useSession();
-  const router = useRouter();
-  // Queries wait on the session, so a signed-out visitor otherwise sits on
-  // the loading screen forever.
-  useEffect(() => {
-    if (status === "unauthenticated") router.push(loginHref());
-  }, [status, router]);
-
-  const open = trpc.subteam.list.useQuery(undefined, { enabled: !!session });
-  const mine = trpc.subteam.myApplications.useQuery(undefined, {
-    enabled: !!session,
-  });
-  const memberStatus = trpc.member.checkStatus.useQuery(undefined, {
-    enabled: !!session,
-  });
-
-  if (status === "loading" || open.isPending || mine.isPending) {
-    return <LoadingScreen />;
-  }
-
-  const subteams = open.data ?? [];
-  const applications = mine.data ?? [];
-  const canApply = !!memberStatus.data?.isActive;
-  const loadError = open.error ?? mine.error;
-
-  return (
-    <div className={page}>
-      <Link
-        href="/dashboard"
-        className="text-[13px] text-[var(--text-subtle)] transition-colors hover:text-[var(--text-primary)]"
-      >
-        ← Dashboard
-      </Link>
-
-      <header className="mt-6">
-        <h1 className={pageTitle}>Subteams</h1>
-        <p className={pageDek}>
-          The groups that run the club. Pick one you want to help with and tell
-          us a little about yourself.
-        </p>
-      </header>
-
-      {loadError && (
-        <p className={`${errorText} mt-6`}>
-          {loadError.message} Refresh the page to try again.
-        </p>
-      )}
-
-      {!canApply && memberStatus.isSuccess && (
-        <p className={`${meta} mt-6`}>
-          Applying needs an active membership.{" "}
-          <Link href="/dashboard" className={inlineLink}>
-            Become a member
-          </Link>
-        </p>
-      )}
-
-      <section className="mt-10">
-        <h2 className={sectionTitle}>Taking applications</h2>
-        {subteams.length > 0 ? (
-          <ul className="mt-5 space-y-4">
-            {subteams.map((subteam) => (
-              <SubteamCard
-                key={subteam.id}
-                subteam={subteam}
-                canApply={canApply}
-              />
-            ))}
-          </ul>
-        ) : (
-          <p className={`${body} mt-3 max-w-xl`}>
-            No subteams are taking applications right now. Check back at the
-            start of the semester, when most of them open.
-          </p>
-        )}
-      </section>
-
-      {applications.length > 0 && (
-        <section className="mt-12">
-          <h2 className={sectionTitle}>Your applications</h2>
-          <ul className="mt-4 border-t border-[var(--border-subtle)]">
-            {applications.map((application) => (
-              <ApplicationRow key={application.id} application={application} />
-            ))}
-          </ul>
-        </section>
-      )}
-    </div>
+      <SubteamsPage />
+    </PrefetchedPage>
   );
 }
diff --git a/sites/mainweb/components/admin/hackathons/AttendeesTab.tsx b/sites/mainweb/components/admin/hackathons/AttendeesTab.tsx
index 523026d3..658212ef 100644
--- a/sites/mainweb/components/admin/hackathons/AttendeesTab.tsx
+++ b/sites/mainweb/components/admin/hackathons/AttendeesTab.tsx
@@ -49,6 +49,11 @@ import { AttendeeStats } from "./AttendeeStats";
 import { StatusBadge } from "@/components/hackathon/StatusBadge";
 import type { RegistrationStatus } from "./attendee-status";
 import type { HackathonStatus } from "./constants";
+import { venueFormat } from "@/lib/venue-time";
+import { useIsClient } from "@/lib/use-is-client";
+
+// What toLocaleString() prints in en-US, on the venue's clock.
+const DATE_TIME = { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "2-digit", second: "2-digit" } as const;
 
 export function AttendeesTab({
   hackathonId,
@@ -61,6 +66,7 @@ export function AttendeesTab({
 }) {
   const utils = trpc.useUtils();
   const readOnly = useReadOnly();
+  const isClient = useIsClient();
 
   const [page, setPage] = useState(0);
   const [searchQuery, setSearchQuery] = useState("");
@@ -497,7 +503,11 @@ export function AttendeesTab({
 
   return (
     <div className="space-y-8">
-      <RegistrationControls hackathonId={hackathonId} status={status} />
+      {/* Its deadline and inputs are in the organiser's own time zone, which
+          the server does not know: drawn after hydration so both agree. */}
+      {isClient && (
+        <RegistrationControls hackathonId={hackathonId} status={status} />
+      )}
 
       {announced ? (
         <section className={sectionRule}>
@@ -855,9 +865,7 @@ export function AttendeesTab({
                           {attendee.attendanceConfirmedAt ? (
                             <span
                               className={statusPill("success")}
-                              title={new Date(
-                                attendee.attendanceConfirmedAt,
-                              ).toLocaleString()}
+                              title={venueFormat(attendee.attendanceConfirmedAt, DATE_TIME)}
                             >
                               Confirmed
                             </span>
@@ -880,13 +888,9 @@ export function AttendeesTab({
                       {attendee.acceptanceEmailSentAt ? (
                         <span
                           className="tabular-nums text-[var(--text-muted)]"
-                          title={new Date(
-                            attendee.acceptanceEmailSentAt,
-                          ).toLocaleString()}
+                          title={venueFormat(attendee.acceptanceEmailSentAt, DATE_TIME)}
                         >
-                          {new Date(
-                            attendee.acceptanceEmailSentAt,
-                          ).toLocaleDateString()}
+                          {venueFormat(attendee.acceptanceEmailSentAt)}
                         </span>
                       ) : attendee.registrationStatus === "approved" ? (
                         <span className={statusPill("warning")}>
@@ -919,7 +923,7 @@ export function AttendeesTab({
                         )
                       }
                     >
-                      {new Date(attendee.registeredAt).toLocaleDateString()}
+                      {venueFormat(attendee.registeredAt)}
                     </td>
                     <td
                       className="px-3 py-3 text-right"
diff --git a/sites/mainweb/components/admin/hackathons/HackathonBans.tsx b/sites/mainweb/components/admin/hackathons/HackathonBans.tsx
index 922eef2e..d06303e4 100644
--- a/sites/mainweb/components/admin/hackathons/HackathonBans.tsx
+++ b/sites/mainweb/components/admin/hackathons/HackathonBans.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { trpc } from "@/lib/trpc";
+import { venueFormat } from "@/lib/venue-time";
 import { READ_ONLY_TITLE, useReadOnly } from "@/lib/use-portal-context";
 import {
   body,
@@ -163,7 +164,7 @@ export function HackathonBans() {
                   <p className={`mt-1 ${body}`}>{b.reason}</p>
                   <p className={`mt-1 ${meta}`}>
                     Banned{" "}
-                    {new Date(b.createdAt).toLocaleDateString(undefined, {
+                    {venueFormat(b.createdAt, {
                       month: "short",
                       day: "numeric",
                       year: "numeric",
diff --git a/sites/mainweb/components/admin/hackathons/HackathonCard.tsx b/sites/mainweb/components/admin/hackathons/HackathonCard.tsx
index fb67de5c..095c7fc1 100644
--- a/sites/mainweb/components/admin/hackathons/HackathonCard.tsx
+++ b/sites/mainweb/components/admin/hackathons/HackathonCard.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { venueFormat } from "@/lib/venue-time";
 import React from "react";
 import Link from "next/link";
 import { trpc } from "@/lib/trpc";
@@ -111,8 +112,7 @@ export function HackathonCard({
             <div className="min-w-0 sm:border-l sm:border-[var(--border-subtle)] sm:pl-8">
               <dt className={label}>Dates</dt>
               <dd className="mt-1 text-[15px] tabular-nums text-[var(--text-primary)]">
-                {new Date(hackathon.startDate).toLocaleDateString()} –{" "}
-                {new Date(hackathon.endDate).toLocaleDateString()}
+                {venueFormat(hackathon.startDate)} – {venueFormat(hackathon.endDate)}
               </dd>
             </div>
             <div className="min-w-0 sm:border-l sm:border-[var(--border-subtle)] sm:pl-8">
diff --git a/sites/mainweb/components/admin/judging/shared.tsx b/sites/mainweb/components/admin/judging/shared.tsx
index 18a6ea7e..bd352526 100644
--- a/sites/mainweb/components/admin/judging/shared.tsx
+++ b/sites/mainweb/components/admin/judging/shared.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { venueFormat } from "@/lib/venue-time";
 import type { RouterOutputs } from "@query/api";
 import { trpc } from "@/lib/trpc";
 import { fieldHint, fieldLabel, input } from "@/components/portal/ui";
@@ -57,7 +58,7 @@ export const MODE_HINT = {
 } as const;
 
 export const shortTime = (value: Date | string) =>
-  new Date(value).toLocaleString("en-US", {
+  venueFormat(value, {
     month: "short",
     day: "numeric",
     hour: "numeric",
diff --git a/sites/mainweb/components/portal/PrefetchedPage.tsx b/sites/mainweb/components/portal/PrefetchedPage.tsx
index 5a4c131d..65f62e6f 100644
--- a/sites/mainweb/components/portal/PrefetchedPage.tsx
+++ b/sites/mainweb/components/portal/PrefetchedPage.tsx
@@ -10,20 +10,27 @@ import type { PortalCaller, Prefetch } from "@/lib/portal-bootstrap.server";
  * client page's react-query cache, so its content ships with the HTML instead
  * of after hydration plus a fetch. The client page is unchanged: its useQuery
  * calls find the data already in the cache. With no session it renders the
- * page as-is and the page redirects or signs in as it always did.
+ * page as-is and the page redirects or signs in as it always did. A page whose
+ * later reads depend on its first can return its reads from an async function.
  */
 export async function PrefetchedPage({
   reads,
   children,
 }: {
-  reads: (caller: PortalCaller) => readonly Prefetch[];
+  reads: (
+    caller: PortalCaller,
+  ) => readonly Prefetch[] | Promise<readonly Prefetch[]>;
   children: React.ReactNode;
 }) {
   // A failed session lookup renders the page as before; it fetches for itself.
   const signedIn = await getPortalCaller().catch(() => null);
   if (!signedIn) return children;
+  // A reads function that throws costs the prefetch, not the page.
+  const entries = await Promise.resolve()
+    .then(() => reads(signedIn.caller))
+    .catch(() => []);
   return (
-    <HydrationBoundary state={await dehydratePrefetched(reads(signedIn.caller))}>
+    <HydrationBoundary state={await dehydratePrefetched(entries)}>
       {children}
     </HydrationBoundary>
   );