diff --git a/src/app/(core)/v/[slug]/loading.tsx b/src/app/(core)/v/[slug]/loading.tsx
new file mode 100644
index 0000000..de4c766
--- /dev/null
+++ b/src/app/(core)/v/[slug]/loading.tsx
@@ -0,0 +1,11 @@
+// Static placeholder in the same layout as the player page (no animation)
+export default function Loading() {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-8 px-4 pb-4 sm:flex-row sm:px-8 sm:pb-8">
+      <div className="aspect-video w-full bg-zinc-950 sm:w-auto sm:flex-1" />
+      <div className="flex flex-col gap-2 text-sm text-zinc-500 sm:w-[26rem]">
+        Loading markers
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(core)/v/[slug]/page.tsx b/src/app/(core)/v/[slug]/page.tsx
index a5c2bfd..8cc659e 100644
--- a/src/app/(core)/v/[slug]/page.tsx
+++ b/src/app/(core)/v/[slug]/page.tsx
@@ -1,34 +1,82 @@
 import { auth } from "@clerk/nextjs/server";
-import {
-  getTwitchTokenFromClerk,
-  getVodWithMarkers,
-} from "~/utils/twitch-server";
+import type { Metadata } from "next";
+import { ButtonLink } from "~/app/_components/common/button";
+import { SignInButton } from "~/app/_components/signin";
+import { EXPORT_BUFFER_SECONDS, MAX_BUFFER_SECONDS } from "~/utils/markers";
+import { getVodWithMarkers } from "~/utils/twitch-server";
 import { VodPlayer } from "./player";
-import Script from "next/script";
 
-export const dynamic = "force-dynamic";
+export const metadata: Metadata = { title: "VOD markers | MarkerThing" };
 
-// I do the revalidate 0 here because "force-dynamic" doesn't actually work
-// See: https://github.com/vercel/next.js/issues/47273
-export const revalidate = 60;
+const Notice = (props: { title: string; children: React.ReactNode }) => (
+  <div className="m-auto flex max-w-md flex-col items-center gap-4 p-8 text-center">
+    <h1 className="text-xl font-semibold">{props.title}</h1>
+    {props.children}
+  </div>
+);
 
 export default async function VodPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ slug: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
 }) {
-  const { slug } = await params;
-  const self = await auth();
-  if (!self || !self.userId) return <div>You have to be signed in</div>;
+  const [{ slug }, query, self] = await Promise.all([
+    params,
+    searchParams,
+    auth(),
+  ]);
 
-  const token = await getTwitchTokenFromClerk(self.userId);
+  if (!self.userId) {
+    return (
+      <Notice title="Sign in to see markers">
+        <SignInButton />
+      </Notice>
+    );
+  }
 
-  const vodDetails = await getVodWithMarkers(slug, token);
+  const result = await getVodWithMarkers(slug, self.userId);
+
+  if (result.status === "not-found") {
+    return (
+      <Notice title="VOD not found">
+        <p>This VOD does not exist, or Twitch deleted it.</p>
+        <ButtonLink href="/">Go home</ButtonLink>
+      </Notice>
+    );
+  }
+
+  if (result.status === "creator-not-connected") {
+    return (
+      <Notice title="Markers not available">
+        <p>
+          {result.rejected
+            ? `${result.creator} needs to sign in to MarkerThing again.`
+            : `${result.creator} has not signed in to MarkerThing yet.`}
+        </p>
+        <ButtonLink href="/">Go home</ButtonLink>
+      </Notice>
+    );
+  }
+
+  // A repeated param (?offset=1&offset=2) arrives as an array. Use the first.
+  const param = (key: string) => [query[key]].flat()[0];
+  const buffer = Number(param("buffer"));
 
   return (
-    <>
-      <Script src="https://player.twitch.tv/js/embed/v1.js" async />
-      <VodPlayer id={slug} vod={vodDetails} />
-    </>
+    <VodPlayer
+      vod={result.vod}
+      initial={{
+        offset: param("offset") ?? "",
+        buffer:
+          Number.isInteger(buffer) &&
+          buffer >= 0 &&
+          buffer <= MAX_BUFFER_SECONDS
+            ? buffer
+            : EXPORT_BUFFER_SECONDS,
+        numbered: param("numbered") === "1",
+      }}
+    />
   );
 }
diff --git a/src/app/(core)/v/[slug]/player.tsx b/src/app/(core)/v/[slug]/player.tsx
index 23dc719..d37282b 100644
--- a/src/app/(core)/v/[slug]/player.tsx
+++ b/src/app/(core)/v/[slug]/player.tsx
@@ -1,223 +1,478 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import Script from "next/script";
+import { useEffect, useMemo, useRef, useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
-import { Button } from "~/app/_components/common/button";
-import { Card } from "~/app/_components/common/card";
-import { TextInput } from "~/app/_components/common/text-input";
 import {
   buildSegments,
-  EXPORT_BUFFER_SECONDS,
+  findMarkedOffset,
+  formatClipNumber,
   formatSeconds,
+  MAX_BUFFER_SECONDS,
+  numberLabels,
   parseOffsetValue,
   parseTwitchDuration,
   toCsv,
   toYouTubeChapters,
+  type Segment,
 } from "~/utils/markers";
 import type { VOD } from "~/utils/twitch-server";
-import { Player } from "~/utils/types/twitch-player";
-
-const initializePlayer = (
-  id: string,
-  callback: (player: Player) => void
-): (() => void) => {
-  // cleanup for previous player for effect bs
-  const clearCurrent = () => {
-    const playerElement = document.getElementById("vod-player");
-    if (playerElement) {
-      playerElement.innerHTML = "";
-    }
-  };
+import type { Player } from "~/utils/types/twitch-player";
 
-  if (!(window as any).Twitch) {
-    const timeout = setTimeout(() => initializePlayer(id, callback), 100);
-    return () => {
-      clearTimeout(timeout);
-      clearCurrent();
-    };
-  }
+// Settings that live in the URL, so a refresh or a shared link keeps them
+export type VodSettings = { offset: string; buffer: number; numbered: boolean };
 
-  const options = {
-    width: "100%",
-    height: "100%",
-    video: id,
-    autoplay: false,
-  };
-  const player = new (window as any).Twitch!.Player(
-    "vod-player",
-    options
-  ) as Player;
+function setUrlParam(key: string, value: string | undefined) {
+  const url = new URL(window.location.href);
+  if (value) url.searchParams.set(key, value);
+  else url.searchParams.delete(key);
+  window.history.replaceState(null, "", url);
+}
 
-  callback(player);
+// "1:05:12" or "5:12"
+const formatClock = (totalSeconds: number) => {
+  const [h, m, s] = formatSeconds(totalSeconds).split(":").map(Number);
+  const ss = String(s).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+};
 
-  return clearCurrent;
+// "1h 20m", "10m 8s" or "45s"
+const formatLength = (totalSeconds: number) => {
+  const [h, m, s] = formatSeconds(totalSeconds).split(":").map(Number);
+  if (h) return `${h}h ${m}m`;
+  if (m) return s ? `${m}m ${s}s` : `${m}m`;
+  return `${s}s`;
 };
 
-export const VodPlayer = (props: { id: string; vod: VOD }) => {
-  const [player, setPlayer] = useState<Player | null>(null);
+// Small square checkbox: outlined when off, solid white when on
+const checkboxClasses =
+  "h-3 w-3 shrink-0 appearance-none border border-zinc-600 checked:border-zinc-400 checked:bg-zinc-400";
 
-  useEffect(() => {
-    const cleanup = initializePlayer(props.id, setPlayer);
+// Plain text actions. Disabled ones fade out and cannot be clicked.
+const actionClasses =
+  "whitespace-nowrap text-zinc-400 hover:text-white disabled:pointer-events-none disabled:text-zinc-700 aria-disabled:pointer-events-none aria-disabled:text-zinc-700";
 
-    return cleanup;
-  }, [props.id]);
+const PlayIcon = () => (
+  <svg viewBox="0 0 10 10" className="h-2 w-2 fill-current">
+    <path d="M1 0.5v9l8-4.5z" />
+  </svg>
+);
 
-  const [offset, setOffset] = useState<{
-    presentational: string;
-    totalSeconds: number;
-  }>({
-    presentational: "0",
-    totalSeconds: 0,
-  });
+// Copy chapters and download CSV for one export target
+const ExportRow = (props: {
+  title: string;
+  chapters: string;
+  csv: string;
+  fileName: string;
+  disabled?: boolean;
+  // Small color key that matches the timeline strip
+  marker?: React.ReactNode;
+  children?: React.ReactNode;
+}) => (
+  <div className="flex items-center gap-4">
+    <span className="mr-auto flex items-center gap-2">
+      {props.marker}
+      {props.title}
+      {props.children}
+    </span>
+    <button
+      type="button"
+      disabled={props.disabled}
+      className={actionClasses}
+      onClick={() => {
+        navigator.clipboard.writeText(props.chapters).then(
+          () => toast.success("Copied YouTube chapters"),
+          () => toast.error("Could not copy to the clipboard")
+        );
+      }}
+    >
+      Copy chapters
+    </button>
+    {/* No href while disabled, so the link cannot be clicked or keyboard activated */}
+    <a
+      href={
+        props.disabled
+          ? undefined
+          : `data:text/csv;charset=utf-8,${encodeURIComponent(props.csv)}`
+      }
+      download={props.fileName}
+      aria-disabled={props.disabled}
+      className={actionClasses}
+    >
+      Download CSV
+    </a>
+  </div>
+);
 
-  const segments = useMemo(
+export const VodPlayer = (props: { vod: VOD; initial: VodSettings }) => {
+  const { vod } = props;
+  const videoSeconds = parseTwitchDuration(vod.duration);
+
+  const playerRef = useRef<Player | null>(null);
+  const [scriptReady, setScriptReady] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+
+  const [buffer, setBuffer] = useState(props.initial.buffer);
+  const [numbered, setNumbered] = useState(props.initial.numbered);
+  const [excluded, setExcluded] = useState<ReadonlySet<string>>(new Set());
+  const [renamed, setRenamed] = useState<Record<string, string>>({});
+  const [editingId, setEditingId] = useState<string>();
+
+  // Times in the list always match the Twitch VOD
+  const vodSegments = useMemo(
     () =>
       buildSegments({
-        markers: props.vod.markers,
-        videoSeconds: parseTwitchDuration(props.vod.duration),
-        offsetSeconds: offset.totalSeconds,
+        markers: vod.markers,
+        videoSeconds,
+        bufferSeconds: buffer,
       }),
-    [props.vod, offset.totalSeconds]
+    [vod.markers, videoSeconds, buffer]
   );
+  // The clips you marked. The fake intro only labels chapters, so it is not
+  // listed or exported. toYouTubeChapters adds its own Intro chapter.
+  const clips = vodSegments.filter((s) => s.type === "start" && !s.isIntro);
+
+  // An OFFSET marker fills in the camera start, unless the URL has one
+  const markedOffset = findMarkedOffset(vodSegments);
+  const [cameraInput, setCameraInput] = useState(
+    props.initial.offset ||
+      (markedOffset === undefined ? "" : formatClock(markedOffset))
+  );
+  const cameraSeconds =
+    cameraInput.trim() === "" ? undefined : parseOffsetValue(cameraInput);
+  const cameraInvalid =
+    cameraInput.trim() !== "" && cameraSeconds === undefined;
+
+  const cameraSegments = useMemo(
+    () =>
+      cameraSeconds === undefined
+        ? []
+        : buildSegments({
+            markers: vod.markers,
+            videoSeconds,
+            offsetSeconds: cameraSeconds,
+            bufferSeconds: buffer,
+          }),
+    [vod.markers, videoSeconds, cameraSeconds, buffer]
+  );
+
+  // A cleared rename falls back to the marker's own label
+  const labelOf = (clip: Segment) => renamed[clip.id]?.trim() || clip.label;
+
+  // Export data only changes with these inputs, not with the 1s playhead poll
+  const exports = useMemo(() => {
+    // The checked clips, with renames and optional "01 " numbers
+    const pick = (segments: Segment[]) =>
+      segments
+        .filter((s) => s.type === "start" && !s.isIntro && !excluded.has(s.id))
+        .map((s) => ({ ...s, label: renamed[s.id]?.trim() || s.label }));
+    const vodClips = pick(vodSegments);
+    const cameraClips = pick(cameraSegments);
+    const order = vodClips.map((clip) => clip.id);
+    const toFileCsv = (picked: Segment[]) =>
+      toCsv(numbered ? numberLabels(picked, order) : picked);
+
+    return {
+      count: vodClips.length,
+      numbers: new Map(
+        order.map((id, i) => [id, formatClipNumber(i + 1, order.length)])
+      ),
+      vod: { chapters: toYouTubeChapters(vodClips), csv: toFileCsv(vodClips) },
+      camera: {
+        chapters: toYouTubeChapters(cameraClips),
+        csv: toFileCsv(cameraClips),
+      },
+    };
+  }, [vodSegments, cameraSegments, excluded, renamed, numbered]);
+
+  // A clip is playing from its padded start until the next clip takes over
+  const activeId = clips.findLast(
+    (clip) =>
+      Math.max(clip.vodStart - buffer, 0) <= currentTime &&
+      currentTime < clip.vodEnd
+  )?.id;
+
+  useEffect(() => {
+    if (!scriptReady || !window.Twitch) return;
+
+    const player = new window.Twitch.Player("vod-player", {
+      width: "100%",
+      height: "100%",
+      video: vod.id,
+      autoplay: false,
+    });
+    playerRef.current = player;
+
+    // The embed has no time update event, so poll to track the playhead
+    const interval = setInterval(
+      () => setCurrentTime(Math.floor(player.getCurrentTime())),
+      1000
+    );
+
+    return () => {
+      clearInterval(interval);
+      playerRef.current = null;
+      document.getElementById("vod-player")?.replaceChildren();
+    };
+  }, [scriptReady, vod.id]);
+
+  const seek = (clip: Segment) => {
+    const time = Math.max(clip.vodStart - buffer, 0);
+    playerRef.current?.seek(time);
+    setCurrentTime(time);
+  };
+
+  const updateCamera = (value: string) => {
+    setCameraInput(value);
+    const trimmed = value.trim();
+    if (trimmed === "" || parseOffsetValue(trimmed) !== undefined) {
+      setUrlParam("offset", trimmed || undefined);
+    }
+  };
+
+  const toggleClip = (id: string) =>
+    setExcluded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  const percent = (seconds: number) =>
+    `${(Math.min(seconds, videoSeconds) / (videoSeconds || 1)) * 100}%`;
+  const fileDate = vod.created_at.replaceAll(":", "-");
+
+  // Only shown when it helps: a bad value, or no value yet
+  const cameraNote = cameraInvalid
+    ? "Use H:MM:SS, MM:SS or seconds"
+    : cameraSeconds === undefined
+    ? "Seek to where your camera starts, or add /marker OFFSET when you start recording"
+    : markedOffset !== undefined && cameraSeconds === markedOffset
+    ? "From your OFFSET marker"
+    : undefined;
 
   return (
-    <div className="grid min-h-0 flex-1 grid-rows-3 items-start gap-4 overflow-y-hidden p-4 sm:grid-cols-3 sm:grid-rows-1 sm:gap-8 sm:p-8">
-      {/* Toast Container */}
+    <div className="flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto px-4 pb-4 pt-2 sm:flex-row sm:overflow-hidden sm:px-8 sm:pb-8">
+      <Script
+        src="https://player.twitch.tv/js/embed/v1.js"
+        onReady={() => setScriptReady(true)}
+      />
       <Toaster
-        toastOptions={{
-          className: "rounded-lg bg-gray-850 text-gray-50 shadow-md",
-        }}
+        toastOptions={{ className: "rounded-none bg-zinc-900 text-white" }}
       />
-      {/* Video Player */}
-      <div className="row-span-1 flex w-full flex-col overflow-hidden rounded-lg border border-gray-950 bg-gray-950 shadow-md sm:col-span-2">
-        <div id="vod-player" className="aspect-video w-full !rounded-lg" />
-      </div>
 
-      {/* Timestamps */}
-      <Card className="row-span-2 flex h-full min-h-0 flex-col gap-2 p-4 shadow-md sm:col-span-1 sm:row-span-1">
-        <div className="flex flex-wrap items-center justify-between gap-1.5 ">
-          <h1 className="flex items-center gap-1.5 text-lg font-semibold ">
-            <span>Timestamps</span>
-          </h1>
-          <div className="flex items-center gap-1.5">
-            <Button
-              onClick={() => {
-                navigator.clipboard.writeText(toYouTubeChapters(segments));
-                toast.success("Copied YouTube chapters to clipboard!");
-              }}
-            >
-              {`YT Chapters`}
-            </Button>
-            <a
-              className="relative inline-flex items-center rounded border border-gray-700 bg-gray-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-gray-750 hover:text-gray-100"
-              href={`data:text/csv;charset=utf-8,${encodeURIComponent(
-                toCsv(segments)
-              )}`}
-              {...{
-                download: `${props.vod.created_at.replaceAll(
-                  ":",
-                  "-"
-                )} VOD MARKERS${
-                  offset.totalSeconds ? ` - ${offset.totalSeconds}s` : ""
-                }.csv`,
+      {/* Video */}
+      <div className="flex min-w-0 flex-col sm:flex-1">
+        <div id="vod-player" className="aspect-video w-full bg-zinc-950" />
+
+        {/* Clips on the stream timeline. Gaps are time no clip covers. */}
+        <div className="relative h-2 w-full bg-zinc-950">
+          {clips.map((clip) => (
+            <button
+              key={clip.id}
+              type="button"
+              title={`${labelOf(clip)} (${formatClock(clip.vodStart)})`}
+              onClick={() => seek(clip)}
+              className={`absolute inset-y-0 border-l border-black ${
+                clip.id === activeId
+                  ? "bg-white"
+                  : excluded.has(clip.id)
+                  ? "bg-zinc-900"
+                  : "bg-zinc-600 hover:bg-zinc-400"
+              }`}
+              style={{
+                left: percent(clip.vodStart),
+                width: percent(clip.vodEnd - clip.vodStart),
               }}
-            >
-              {`Download CSV`}
-            </a>
-          </div>
+            />
+          ))}
+          {cameraSeconds !== undefined && (
+            <div
+              title="Camera starts"
+              className="pointer-events-none absolute -inset-y-1 w-0.5 bg-pink-500"
+              style={{ left: percent(cameraSeconds) }}
+            />
+          )}
+          <div
+            className="pointer-events-none absolute -inset-y-1 w-0.5 bg-white"
+            style={{ left: percent(currentTime) }}
+          />
         </div>
-        <div className="mb-2 flex flex-col">
-          <label
-            htmlFor="offset"
-            className="block text-sm font-medium leading-6 text-gray-200"
+
+        <h1 className="mt-4 text-lg font-semibold">{vod.title}</h1>
+        <div className="mt-1 flex gap-3 text-sm text-zinc-500">
+          <Link href={`/${vod.user_login}`} className="hover:text-white">
+            {vod.user_name}
+          </Link>
+          <span>{vod.created_at.slice(0, 10)}</span>
+          <span>{formatLength(videoSeconds)}</span>
+          <a
+            href={vod.url}
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-white"
           >
-            {`Offset`}
-          </label>
-          <TextInput
-            type="text"
-            value={offset.presentational}
-            onChange={(e) =>
-              setOffset((prev) => ({ ...prev, presentational: e.target.value }))
-            }
-            onBlur={(e) =>
-              setOffset((prev) => ({
-                ...prev,
-                totalSeconds: parseOffsetValue(e.target.value) ?? 0,
-              }))
-            }
+            Twitch ↗
+          </a>
+        </div>
+      </div>
+
+      {/* Export and clips */}
+      <div className="flex min-h-0 shrink-0 flex-col text-sm sm:w-[26rem]">
+        <div className="flex flex-col gap-3">
+          <ExportRow
+            title="VOD"
+            chapters={exports.vod.chapters}
+            csv={exports.vod.csv}
+            fileName={`${fileDate} VOD MARKERS.csv`}
           />
-          <p className="mt-1 text-xs text-gray-300">
-            Accepts HH:MM:SS, MM:SS or SS
-          </p>
+          <div className="flex flex-col gap-1">
+            <ExportRow
+              title="Camera"
+              marker={<span className="h-1.5 w-1.5 bg-pink-500" />}
+              chapters={exports.camera.chapters}
+              csv={exports.camera.csv}
+              fileName={`${fileDate} CAMERA MARKERS.csv`}
+              disabled={cameraSeconds === undefined}
+            >
+              <span className="hidden text-zinc-500 sm:inline">from</span>
+              <input
+                value={cameraInput}
+                onChange={(e) => updateCamera(e.target.value)}
+                placeholder="0:00"
+                aria-invalid={cameraInvalid}
+                aria-label="Camera recording start"
+                className={`w-16 border-b bg-transparent tabular-nums outline-none placeholder:text-zinc-700 focus:border-white ${
+                  cameraInvalid ? "border-red-500" : "border-zinc-700"
+                }`}
+              />
+            </ExportRow>
+            <div className="flex items-start gap-4 text-zinc-500">
+              <span className="mr-auto">{cameraNote}</span>
+              <button
+                type="button"
+                className={`${actionClasses} shrink-0`}
+                onClick={() =>
+                  updateCamera(
+                    formatClock(playerRef.current?.getCurrentTime() ?? 0)
+                  )
+                }
+              >
+                Use player time
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center gap-6 text-zinc-400">
+            <label className="flex items-center gap-2">
+              Padding
+              <input
+                type="number"
+                min={0}
+                max={MAX_BUFFER_SECONDS}
+                value={buffer}
+                onChange={(e) => {
+                  const value = Math.floor(Number(e.target.value));
+                  if (!Number.isFinite(value)) return;
+                  const clamped = Math.min(
+                    Math.max(value, 0),
+                    MAX_BUFFER_SECONDS
+                  );
+                  setBuffer(clamped);
+                  setUrlParam("buffer", String(clamped));
+                }}
+                className="w-10 border-b border-zinc-700 bg-transparent text-right tabular-nums text-white outline-none focus:border-white"
+              />
+              s
+            </label>
+            <label className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={numbered}
+                onChange={(e) => {
+                  setNumbered(e.target.checked);
+                  setUrlParam("numbered", e.target.checked ? "1" : undefined);
+                }}
+                className={checkboxClasses}
+              />
+              Number file names
+            </label>
+          </div>
         </div>
 
-        {props.vod && (
-          <ul className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto rounded-lg border border-gray-950/25 bg-gray-950/25 p-2 shadow-inner">
-            {segments
-              .filter((s) => s.type !== "end")
-              .map((marker, index) => {
-                return (
-                  <li key={`${marker.startTime}-${index}`}>
-                    <button
-                      className="w-full"
-                      onClick={() => {
-                        if (marker.type === "start") {
-                          // Seek in the VOD itself, with the same lead-in as the export
-                          player?.seek(
-                            Math.max(marker.vodStart - EXPORT_BUFFER_SECONDS, 0)
-                          );
-                        }
-
-                        if (marker.type === "offset") {
-                          const offset = parseOffsetValue(marker.label);
-                          if (offset) {
-                            setOffset({
-                              presentational: marker.label,
-                              totalSeconds: offset,
-                            });
-                          }
-                        }
-                      }}
-                    >
-                      <Card className="flex animate-fade-in-down flex-col gap-4 p-4 text-left">
-                        <div className="flex justify-between break-words">
-                          {`${marker.label}`}
-                          <div className="flex flex-col gap-0.5">
-                            <div className="font-mono text-right text-xs text-gray-400">
-                              {`${formatSeconds(
-                                marker.startTime
-                              )} - ${formatSeconds(marker.endTime)}`}
-                            </div>
-                            <div className="font-mono text-right text-xs text-gray-400">
-                              {`(${formatSeconds(
-                                marker.endTime - marker.startTime
-                              )})`}
-                            </div>
-                          </div>
-                        </div>
-                        <div className="flex items-center justify-between text-gray-300">
-                          <div
-                            className={`-m-2 rounded-full px-2 py-1 text-sm font-bold ${
-                              marker.type === "start"
-                                ? "bg-green-800 text-white"
-                                : marker.type === "end"
-                                ? "bg-red-800 text-white"
-                                : marker.type === "offset"
-                                ? "bg-blue-800 text-white"
-                                : "bg-gray-800 text-white"
-                            }`}
-                          >
-                            {marker.type}
-                          </div>
-                        </div>
-                      </Card>
-                    </button>
-                  </li>
-                );
-              })}
-          </ul>
-        )}
-      </Card>
+        <div className="mt-6 flex items-baseline justify-between border-t border-zinc-900 pt-4">
+          <h2 className="font-semibold">Clips</h2>
+          <span className="tabular-nums text-zinc-500">{`${exports.count} of ${clips.length}`}</span>
+        </div>
+
+        <ol className="-mx-2 mt-2 min-h-0 flex-1 overflow-y-auto">
+          {clips.map((clip) => {
+            const included = !excluded.has(clip.id);
+            return (
+              <li
+                key={clip.id}
+                className={`flex items-center gap-3 px-2 py-1.5 ${
+                  clip.id === activeId ? "bg-zinc-900" : ""
+                }`}
+              >
+                <input
+                  type="checkbox"
+                  checked={included}
+                  onChange={() => toggleClip(clip.id)}
+                  aria-label={`Export ${clip.label}`}
+                  className={checkboxClasses}
+                />
+                {numbered && (
+                  <span className="w-5 tabular-nums text-zinc-500">
+                    {exports.numbers.get(clip.id)}
+                  </span>
+                )}
+                {editingId === clip.id ? (
+                  <input
+                    autoFocus
+                    value={renamed[clip.id] ?? clip.label}
+                    onChange={(e) =>
+                      setRenamed((prev) => ({
+                        ...prev,
+                        [clip.id]: e.target.value,
+                      }))
+                    }
+                    onBlur={() => setEditingId(undefined)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") setEditingId(undefined);
+                    }}
+                    aria-label="Clip name"
+                    className="min-w-0 flex-1 border-b border-white bg-transparent outline-none"
+                  />
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setEditingId(clip.id)}
+                    title="Click to rename"
+                    className={`min-w-0 flex-1 text-left ${
+                      included ? "text-white" : "text-zinc-600"
+                    }`}
+                  >
+                    {labelOf(clip)}
+                  </button>
+                )}
+                <span className="tabular-nums text-zinc-600">
+                  {formatLength(clip.vodEnd - clip.vodStart)}
+                </span>
+                <button
+                  type="button"
+                  onClick={() => seek(clip)}
+                  title="Play from here"
+                  className="flex w-[4.5rem] items-center justify-end gap-1.5 tabular-nums text-zinc-400 hover:text-white"
+                >
+                  <PlayIcon />
+                  {formatClock(clip.vodStart)}
+                </button>
+              </li>
+            );
+          })}
+        </ol>
+      </div>
     </div>
   );
 };
diff --git a/src/app/_components/about.mdx b/src/app/_components/about.mdx
index 6706a20..88fcb41 100644
--- a/src/app/_components/about.mdx
+++ b/src/app/_components/about.mdx
@@ -14,13 +14,14 @@ I wanted a better way to manage the markers from my streams. I use them as refer
 ### My workflow:
 
 - Stream on Twitch, record vod + footage on camera
+  - When I start the camera recording, I add \`/marker OFFSET\`, so MarkerThing knows where the camera footage starts
 - During stream, create new markers using \`/marker (name of marker)\` command
   - Forgot to mark something? Start the name with a rewind, like \`/marker -2 (name of marker)\` to go back 2 minutes, or \`-30s\` for 30 seconds
   - Lose track of time? Add the [OBS embed](/embed) to see your current marker and how long it has been going
 - End of stream, download CSVs from MarkerThing
-  - I make a second offset CSV for my camera footage, since I start recording it after I start the stream
+  - One CSV for the VOD, and one for the camera recording. The camera CSV uses the OFFSET marker, or a start time I set from the player
 - Open LosslessCut, drag VOD in, drag CSV in, "export"
-- ^ again, with camera recordings + offset CSV
+- ^ again, with the camera recording + camera CSV
 
 This workflow takes me ~3 minutes, and it enables my team to quickly grab 5+ videos worth of content after every stream.
 
diff --git a/src/app/_components/error-page.tsx b/src/app/_components/error-page.tsx
index 54d3f85..06edd7e 100644
--- a/src/app/_components/error-page.tsx
+++ b/src/app/_components/error-page.tsx
@@ -10,7 +10,7 @@ export const ErrorPage = () => {
           An error occurred
         </h1>
         <p className="mt-6 text-base leading-7 text-gray-600">
-          Sorry, we couldn’t find the page you’re looking for.
+          Something went wrong while loading this page. Try again in a moment.
         </p>
         <div className="mt-10 flex items-center justify-center gap-x-6">
           <ButtonLink href="/" variant="primary">
diff --git a/src/app/_components/vods.tsx b/src/app/_components/vods.tsx
index 22b97d8..838500d 100644
--- a/src/app/_components/vods.tsx
+++ b/src/app/_components/vods.tsx
@@ -1,5 +1,7 @@
 import {
+  dropAppAccessToken,
   generateTwitchRequestHeaders,
+  getAppAccessToken,
   getTwitchUserId,
 } from "~/utils/twitch-server";
 import Link from "next/link";
@@ -7,18 +9,6 @@ import Image from "next/image";
 import { auth } from "@clerk/nextjs/server";
 import { ButtonLink } from "./common/button";
 
-const getTwitchClientCredentials = async () => {
-  const response = await fetch(
-    `https://id.twitch.tv/oauth2/token?client_id=${process.env.TWITCH_CLIENT_ID}&client_secret=${process.env.TWITCH_CLIENT_SECRET}&grant_type=client_credentials`,
-    {
-      method: "POST",
-      redirect: "follow",
-    }
-  ).then((response) => response.json());
-
-  return response.access_token as string;
-};
-
 function sendTwitchAPIRequest(path: string, title: string, creds: string) {
   return fetch(`https://api.twitch.tv${path}`, {
     method: "GET",
@@ -107,8 +97,15 @@ export const VODs = async (props: { username: string; after?: string }) => {
   const self = await auth();
   if (!self) throw new Error("you shouldn't be here");
 
-  const creds = await getTwitchClientCredentials();
-  const twitchUserId = await getTwitchUserId(props.username, creds);
+  // After a failed Twitch request, drop the cached app token in case Twitch
+  // revoked it, so the next page load gets a new one
+  const creds = await getAppAccessToken();
+  const twitchUserId = await getTwitchUserId(props.username, creds).catch(
+    (error) => {
+      dropAppAccessToken();
+      throw error;
+    }
+  );
   if (!twitchUserId) return <VodEmptyState />;
 
   // Twitch keeps past broadcasts for 60 days at most, so the max page size of
@@ -135,12 +132,14 @@ export const VODs = async (props: { username: string; after?: string }) => {
   ]);
 
   if (vodResult.status === "rejected") {
+    dropAppAccessToken();
     throw new Error(vodResult.reason.message);
   }
 
   // A failed live check only means the live VOD is not filtered out, so log
   // it and still show the list.
   if (streamResult.status === "rejected") {
+    dropAppAccessToken();
     console.error("Live stream check failed:", streamResult.reason);
   }
 
diff --git a/src/app/globals.css b/src/app/globals.css
index 24ae8ce..80020e5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -15,7 +15,7 @@ body {
 }
 
 body {
-  @apply bg-gray-900 text-gray-100;
+  @apply bg-black text-white;
 }
 
 a {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 31947a9..3eb8430 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -39,10 +39,7 @@ export default async function RootLayout({
           },
         }}
       >
-        <body
-          className="overscroll-none bg-landing"
-          style={{ backgroundImage: `url(/background.svg)` }}
-        >
+        <body className="overscroll-none">
           <div className="flex h-screen w-full grow flex-col">{children}</div>
         </body>
       </ClerkProvider>
diff --git a/src/utils/markers.test.ts b/src/utils/markers.test.ts
index cb1e1fd..2a13ca4 100644
--- a/src/utils/markers.test.ts
+++ b/src/utils/markers.test.ts
@@ -1,7 +1,9 @@
 import { describe, expect, it } from "vitest";
 import {
   buildSegments,
+  findMarkedOffset,
   formatSeconds,
+  numberLabels,
   parseMarkerLabel,
   parseOffsetValue,
   parseRewind,
@@ -11,6 +13,7 @@ import {
 } from "./markers";
 
 const marker = (position_seconds: number, description: string) => ({
+  id: `m${position_seconds}`,
   position_seconds,
   description,
 });
@@ -91,6 +94,7 @@ describe("buildSegments", () => {
 
     expect(segments).toEqual([
       {
+        id: "intro",
         type: "start",
         label: "Intro",
         vodStart: 0,
@@ -100,6 +104,7 @@ describe("buildSegments", () => {
         isIntro: true,
       },
       {
+        id: "m600",
         type: "start",
         label: "Chrome",
         vodStart: 600,
@@ -108,6 +113,7 @@ describe("buildSegments", () => {
         endTime: 910,
       },
       {
+        id: "m900",
         type: "end",
         label: "Chrome",
         vodStart: 900,
@@ -116,6 +122,7 @@ describe("buildSegments", () => {
         endTime: 1210,
       },
       {
+        id: "m1200",
         type: "start",
         label: "React",
         vodStart: 1200,
@@ -163,6 +170,7 @@ describe("buildSegments", () => {
 
     expect(segments).toEqual([
       {
+        id: "m300",
         type: "offset",
         label: "00:06:40",
         vodStart: 300,
@@ -171,6 +179,7 @@ describe("buildSegments", () => {
         endTime: 0,
       },
       {
+        id: "m400",
         type: "start",
         label: "On camera",
         vodStart: 400,
@@ -221,6 +230,32 @@ describe("exports", () => {
     );
   });
 
+  it("numbers labels so exported files sort in order", () => {
+    const clips = segments.filter((s) => s.type === "start" && !s.isIntro);
+    expect(numberLabels(clips).map((s) => s.label)).toEqual([
+      '01 React, Vue, and "Svelte"',
+      "02 Late night",
+    ]);
+    // A clip keeps its number when an export leaves earlier clips out
+    const order = clips.map((s) => s.id);
+    expect(numberLabels(clips.slice(1), order)[0]!.label).toBe("02 Late night");
+  });
+
+  it("finds the camera start from an OFFSET marker", () => {
+    const offsetFrom = (description: string) =>
+      findMarkedOffset(
+        buildSegments({
+          markers: [marker(300, description)],
+          videoSeconds: 1000,
+        })
+      );
+
+    expect(offsetFrom("OFFSET 00:08:20")).toBe(500);
+    expect(offsetFrom("OFFSET")).toBe(300);
+    expect(offsetFrom("OFFSET 40:61")).toBeUndefined();
+    expect(offsetFrom("Chrome")).toBeUndefined();
+  });
+
   it("adds an Intro chapter when the offset skips early clips", () => {
     const offsetSegments = buildSegments({
       markers: [
diff --git a/src/utils/markers.ts b/src/utils/markers.ts
index 81cf996..14fe7d6 100644
--- a/src/utils/markers.ts
+++ b/src/utils/markers.ts
@@ -4,15 +4,22 @@
 // "Talking about Chrome"        starts a clip
 // "START: Talking about Chrome" same as above ("START" and "START OF" work too)
 // "END: Talking about Chrome"   ends the previous clip ("END" and "END OF" work too)
-// "OFFSET 00:40:31"             offset for camera footage (00-40-31 works too)
+// "OFFSET"                      camera recording starts here
+// "OFFSET 00:40:31"             camera starts 40:31 into the stream (00-40-31 works too)
 // "-2 Talking about Chrome"     starts 2 minutes before the marker was placed
 // "-30s Talking about Chrome"   starts 30 seconds before the marker was placed
 
-export type TwitchMarker = { position_seconds: number; description: string };
+export type TwitchMarker = {
+  id: string;
+  position_seconds: number;
+  description: string;
+};
 
 export type MarkerType = "start" | "end" | "offset";
 
 export type Segment = {
+  // Twitch marker ID, or "intro" for the fake intro clip
+  id: string;
   type: MarkerType;
   label: string;
   // Position in the VOD, for seeking
@@ -27,6 +34,7 @@ export type Segment = {
 
 // Seconds of padding on each side of an exported clip
 export const EXPORT_BUFFER_SECONDS = 10;
+export const MAX_BUFFER_SECONDS = 600;
 
 // A tag only counts as a whole word: "END: x", "End of x", "END x" or "END".
 // "Endgame talk" and "Startup ideas" are plain labels.
@@ -112,6 +120,7 @@ export function buildSegments(opts: {
     .map((marker) => {
       const { rewindSeconds, description } = parseRewind(marker.description);
       return {
+        id: marker.id,
         vodStart: Math.max(marker.position_seconds - rewindSeconds, 0),
         ...parseMarkerLabel(description),
       };
@@ -129,6 +138,7 @@ export function buildSegments(opts: {
     : [
         ...markers.filter((m) => m.vodStart === 0),
         {
+          id: "intro",
           vodStart: 0,
           type: "start" as const,
           label: "Intro",
@@ -154,6 +164,33 @@ export function buildSegments(opts: {
 const toCsvField = (value: string) =>
   /[",\r\n]/.test(value) ? `"${value.replaceAll('"', '""')}"` : value;
 
+// Prefixes labels with "01 ", "02 "... so exported files sort in order.
+// `order` lists every clip ID, so a clip keeps its number in every export.
+export function numberLabels<T extends { id: string; label: string }>(
+  clips: T[],
+  order: string[] = clips.map((clip) => clip.id)
+): T[] {
+  return clips.map((clip) => ({
+    ...clip,
+    label: `${formatClipNumber(order.indexOf(clip.id) + 1, order.length)} ${
+      clip.label
+    }`,
+  }));
+}
+
+// "01", "02"... padded to fit the total
+export const formatClipNumber = (n: number, total: number) =>
+  String(n).padStart(Math.max(2, String(total).length), "0");
+
+// Where the camera recording starts, from the first OFFSET marker.
+// "OFFSET 00:40:31" gives the time. A bare "OFFSET" uses its own position.
+// Anything else ("OFFSET 40:61") is ignored, so a typo does not look valid.
+export function findMarkedOffset(segments: Segment[]): number | undefined {
+  const marker = segments.find((s) => s.type === "offset");
+  if (!marker) return undefined;
+  return marker.label === "" ? marker.vodStart : parseOffsetValue(marker.label);
+}
+
 // CSV for LosslessCut: "start,end,label" per clip, in seconds.
 // Only clips you marked. The fake intro is left out.
 export function toCsv(segments: Segment[]): string {
diff --git a/src/utils/twitch-server.test.ts b/src/utils/twitch-server.test.ts
index 7333644..26a488d 100644
--- a/src/utils/twitch-server.test.ts
+++ b/src/utils/twitch-server.test.ts
@@ -1,55 +1,124 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { getVodWithMarkers } from "./twitch-server";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-// The creator has signed in before, so Clerk has their Twitch token
+// Fake Clerk: which Clerk users exist, and the Twitch token each one holds
+const clerk = vi.hoisted(() => {
+  const state = {
+    creators: { creator: "creator-id" } as Record<string, string>,
+    tokens: {} as Record<string, string>,
+  };
+  const users = {
+    getUserOauthAccessToken: async (userId: string) => ({
+      data: state.tokens[userId] ? [{ token: state.tokens[userId] }] : [],
+    }),
+    getUserList: vi.fn(async ({ username }: { username: string[] }) => ({
+      data: state.creators[username[0]!]
+        ? [{ id: state.creators[username[0]!] }]
+        : [],
+    })),
+  };
+  return { state, users };
+});
 vi.mock("@clerk/nextjs/server", () => ({
-  clerkClient: async () => ({
-    users: {
-      getUserList: async () => ({ data: [{ id: "creator" }] }),
-      getUserOauthAccessToken: async () => ({
-        data: [{ token: "creator-token" }],
-      }),
-    },
-  }),
+  clerkClient: async () => ({ users: clerk.users }),
 }));
 
-const vod = {
-  created_at: "2026-09-24T00:00:00Z",
-  duration: "1h0m0s",
-  user_login: "creator",
-};
+import { getVodWithMarkers } from "./twitch-server";
+
+const video = { id: "v1", user_login: "creator", user_name: "Creator" };
+const marker = (id: string) => ({
+  id,
+  position_seconds: 60,
+  description: id,
+  created_at: "2026-09-23T17:00:00Z",
+});
+
+// Fake Twitch: only "creator-token" can read markers. They come back in
+// 2 pages, grouped by the user who placed them (the creator and an editor).
+const twitch = vi.fn(async (url: string, init?: RequestInit) => {
+  const json = (body: unknown, status = 200) =>
+    new Response(JSON.stringify(body), { status });
 
-// Stubs the videos request, then the markers request
-const stubTwitch = (markersResponse: Response) =>
-  vi.stubGlobal(
-    "fetch",
-    vi
-      .fn()
-      .mockResolvedValueOnce(Response.json({ data: [vod] }))
-      .mockResolvedValueOnce(markersResponse)
-  );
-
-afterEach(() => {
-  vi.unstubAllGlobals();
+  if (url.startsWith("https://id.twitch.tv/oauth2/token")) {
+    return json({ access_token: "app-token", expires_in: 3600 });
+  }
+  if (url.includes("/videos?id=v1")) return json({ data: [video] });
+  if (url.includes("/videos?")) return json({ data: [] });
+
+  const auth = new Headers(init?.headers).get("Authorization");
+  if (auth === "Bearer broken-token") return json({}, 500);
+  if (auth !== "Bearer creator-token") return json({}, 403);
+  if (!url.includes("after=")) {
+    return json({
+      data: [
+        { videos: [{ markers: [marker("m1")] }] },
+        { videos: [{ markers: [marker("m2")] }] },
+      ],
+      pagination: { cursor: "page-2" },
+    });
+  }
+  return json({
+    data: [{ videos: [{ markers: [marker("m3")] }] }],
+    pagination: {},
+  });
 });
 
+beforeEach(() => {
+  process.env.TWITCH_CLIENT_ID = "client-id";
+  process.env.TWITCH_CLIENT_SECRET = "client-secret";
+  clerk.state.creators = { creator: "creator-id" };
+  clerk.state.tokens = { "creator-id": "creator-token" };
+  clerk.users.getUserList.mockClear();
+  vi.stubGlobal("fetch", twitch);
+});
+
+const markerIds = async (viewerId: string) => {
+  const result = await getVodWithMarkers("v1", viewerId);
+  return result.status === "ok" ? result.vod.markers.map((m) => m.id) : result;
+};
+
 describe("getVodWithMarkers", () => {
-  it("throws when the markers request fails", async () => {
-    stubTwitch(
-      Response.json({ error: "Unauthorized", status: 401 }, { status: 401 })
-    );
+  it("uses the owner's own token and reads every page and user", async () => {
+    expect(await markerIds("creator-id")).toEqual(["m1", "m2", "m3"]);
+    expect(clerk.users.getUserList).not.toHaveBeenCalled();
+  });
 
-    await expect(getVodWithMarkers("123", "viewer-token")).rejects.toThrow(
-      "Twitch markers request failed: 401"
-    );
+  it("falls back to the creator's token for other viewers", async () => {
+    clerk.state.tokens["viewer-id"] = "viewer-token";
+
+    expect(await markerIds("viewer-id")).toEqual(["m1", "m2", "m3"]);
+    expect(clerk.users.getUserList).toHaveBeenCalledWith({
+      username: ["creator"],
+    });
   });
 
-  it("gives no markers when Twitch sends an empty videos list", async () => {
-    stubTwitch(Response.json({ data: [{ videos: [] }] }));
+  it("tells a creator who never signed in from one who must sign in again", async () => {
+    clerk.state.creators = {};
+    expect(await markerIds("viewer-id")).toEqual({
+      status: "creator-not-connected",
+      creator: "Creator",
+      rejected: false,
+    });
+
+    clerk.state.creators = { creator: "creator-id" };
+    clerk.state.tokens = { "creator-id": "revoked-token" };
+    expect(await markerIds("viewer-id")).toEqual({
+      status: "creator-not-connected",
+      creator: "Creator",
+      rejected: true,
+    });
+  });
+
+  it("throws when Twitch fails, instead of showing no markers", async () => {
+    clerk.state.tokens = { "creator-id": "broken-token" };
+
+    await expect(getVodWithMarkers("v1", "creator-id")).rejects.toThrow(
+      "Twitch markers request failed: 500"
+    );
+  });
 
-    await expect(getVodWithMarkers("123", "viewer-token")).resolves.toEqual({
-      ...vod,
-      markers: [],
+  it("returns not-found for a VOD Twitch does not have", async () => {
+    expect(await getVodWithMarkers("gone", "creator-id")).toEqual({
+      status: "not-found",
     });
   });
 });
diff --git a/src/utils/twitch-server.ts b/src/utils/twitch-server.ts
index 64000af..f7ec2ad 100644
--- a/src/utils/twitch-server.ts
+++ b/src/utils/twitch-server.ts
@@ -1,15 +1,54 @@
 import { clerkClient } from "@clerk/nextjs/server";
-import { parseMarkerLabel, parseRewind } from "./markers";
+import { parseMarkerLabel, parseRewind, type TwitchMarker } from "./markers";
+
+const TWITCH_API = "https://api.twitch.tv/helix";
 
 export const generateTwitchRequestHeaders = (accessToken: string) => {
   const headers = new Headers();
   headers.append("Client-ID", process.env.TWITCH_CLIENT_ID!);
-  headers.append("Accept", "application/vnd.twitchtv.v5+json");
   headers.append("Authorization", `Bearer ${accessToken}`);
 
   return headers;
 };
 
+// App access token for public Twitch data. Tokens last for weeks, so each
+// server instance keeps one until it is close to expiry.
+let appToken: { value: string; expiresAt: number } | undefined;
+
+export const getAppAccessToken = async () => {
+  if (appToken && appToken.expiresAt > Date.now() + 60_000) {
+    return appToken.value;
+  }
+
+  const response = await fetch("https://id.twitch.tv/oauth2/token", {
+    method: "POST",
+    body: new URLSearchParams({
+      client_id: process.env.TWITCH_CLIENT_ID!,
+      client_secret: process.env.TWITCH_CLIENT_SECRET!,
+      grant_type: "client_credentials",
+    }),
+  });
+  if (!response.ok) {
+    throw new Error(`Twitch app token request failed: ${response.status}`);
+  }
+
+  const json = (await response.json()) as {
+    access_token: string;
+    expires_in: number;
+  };
+  appToken = {
+    value: json.access_token,
+    expiresAt: Date.now() + json.expires_in * 1000,
+  };
+  return appToken.value;
+};
+
+// Twitch can revoke an app token early (for example after a secret rotation).
+// Call this after a failed request so the next one mints a new token.
+export const dropAppAccessToken = () => {
+  appToken = undefined;
+};
+
 export const getTwitchUserId = async (userName: string, token: string) => {
   const response = await fetch(
     `https://api.twitch.tv/helix/users?${new URLSearchParams({
@@ -30,90 +69,149 @@ export const getTwitchUserId = async (userName: string, token: string) => {
   return result.data?.[0]?.id ?? null;
 };
 
-export type VOD = {
+type TwitchVideo = {
+  id: string;
+  user_login: string;
+  user_name: string;
+  title: string;
   created_at: string;
-  markers: {
-    id: string;
-    created_at: string;
-    description: string;
-    position_seconds: number;
-    URL: string;
-  }[];
-  duration: string;
+  url: string;
+  duration: string; // "8h32m12s"
 };
 
-// Used for VOD markers and the live topic embed
-const getValidTokenForCreator = async (creatorName: string) => {
-  // Get token for the input displayName IF THEY HAVE SIGNED IN BEFORE
-  const clerk = await clerkClient();
-  const response = await clerk.users.getUserList({
-    username: [creatorName],
-  });
+export type VOD = TwitchVideo & { markers: TwitchMarker[] };
 
-  const creatorFoundInClerk = response.data[0];
+const getVideo = async (vodId: string) => {
+  const request = async () =>
+    fetch(`${TWITCH_API}/videos?id=${encodeURIComponent(vodId)}`, {
+      headers: generateTwitchRequestHeaders(await getAppAccessToken()),
+      next: { revalidate: 60 },
+    });
 
-  // Early escape if we don't find this user in Clerk
-  if (!creatorFoundInClerk) {
-    throw new Error("User not found in Clerk");
+  let response = await request();
+  if (response.status === 401) {
+    dropAppAccessToken();
+    response = await request();
+  }
+  // Twitch sends 400 for malformed IDs and 404 for deleted VODs
+  if (response.status === 400 || response.status === 404) return undefined;
+  if (!response.ok) {
+    throw new Error(`Twitch videos request failed: ${response.status}`);
   }
 
-  return await getTwitchTokenFromClerk(creatorFoundInClerk.id);
+  const json = (await response.json()) as { data: TwitchVideo[] };
+  return json.data[0];
 };
 
-// Loads a VOD and its markers. Markers are read with the creator's stored
-// token, so any signed-in user can view a connected creator's markers.
-// Throws on Twitch errors, so a failed request is not read as "no markers".
-export const getVodWithMarkers = async (vodId: string, token: string) => {
-  const vodResponse = await fetch(
-    `https://api.twitch.tv/helix/videos?id=${vodId}`,
-    {
-      method: "GET",
-      headers: generateTwitchRequestHeaders(token),
-      redirect: "follow",
-      cache: "no-store",
-    }
-  );
-  if (!vodResponse.ok) {
-    throw new Error(`Twitch videos request failed: ${vodResponse.status}`);
-  }
+type MarkersPage = {
+  // One entry per user who placed markers (the broadcaster and editors)
+  data: { videos: { markers: TwitchMarker[] }[] }[];
+  pagination: { cursor?: string };
+};
 
-  const vodData = (await vodResponse.json()) as {
-    data?: (Omit<VOD, "markers"> & { user_login: string })[];
-  };
-  const vod = vodData.data?.[0];
+// 50 pages of 100 is far more markers than a stream has. The cap only
+// guards against a cursor that never ends.
+const MAX_MARKER_PAGES = 50;
 
-  if (!vod) throw new Error("could not find vod data or user login");
+// Only the VOD owner and their editors can read markers.
+// Returns undefined when this token's user is not one of them.
+const getMarkers = async (vodId: string, token: string) => {
+  const markers: TwitchMarker[] = [];
+  let cursor: string | undefined;
+  let pages = 0;
 
-  const tokenForMarkers = await getValidTokenForCreator(vod.user_login);
+  do {
+    const params = new URLSearchParams({ video_id: vodId, first: "100" });
+    if (cursor) params.set("after", cursor);
 
-  const markersResponse = await fetch(
-    `https://api.twitch.tv/helix/streams/markers?video_id=${vodId}&first=100`,
-    {
-      method: "GET",
-      headers: generateTwitchRequestHeaders(tokenForMarkers),
-      next: { revalidate: 60 },
+    const response = await fetch(`${TWITCH_API}/streams/markers?${params}`, {
+      headers: generateTwitchRequestHeaders(token),
+      cache: "no-store",
+    });
+    if (response.status === 401 || response.status === 403) return undefined;
+    if (!response.ok) {
+      throw new Error(`Twitch markers request failed: ${response.status}`);
     }
-  );
-  if (!markersResponse.ok) {
-    throw new Error(`Twitch markers request failed: ${markersResponse.status}`);
-  }
 
-  const markersData = (await markersResponse.json()) as TwitchMarkersResponse;
-  const markers = markersData.data?.[0]?.videos?.[0]?.markers ?? [];
+    const page = (await response.json()) as MarkersPage;
+    const pageMarkers = page.data.flatMap((user) =>
+      user.videos.flatMap((video) => video.markers)
+    );
+    markers.push(...pageMarkers);
+    cursor = pageMarkers.length > 0 ? page.pagination.cursor : undefined;
+    pages++;
+  } while (cursor && pages < MAX_MARKER_PAGES);
 
-  return { ...vod, markers };
+  return markers;
 };
 
+// The user's Twitch token, from the OAuth connection they signed in with
 export const getTwitchTokenFromClerk = async (clerkUserId: string) => {
-  if (!clerkUserId) throw new Error("unauthorized");
   const clerk = await clerkClient();
   const response = await clerk.users.getUserOauthAccessToken(
     clerkUserId,
     "twitch"
   );
-  const token = response.data[0].token;
+  return response.data[0]?.token;
+};
 
-  return token;
+// The creator's Twitch token, if they have signed in to MarkerThing before
+const getCreatorToken = async (creatorLogin: string) => {
+  const clerk = await clerkClient();
+  const response = await clerk.users.getUserList({
+    username: [creatorLogin],
+  });
+  const creator = response.data[0];
+  if (!creator) return undefined;
+
+  return getTwitchTokenFromClerk(creator.id);
+};
+
+export type VodResult =
+  | { status: "ok"; vod: VOD }
+  | { status: "not-found" }
+  // `rejected` means the creator signed in before, but Twitch refused their token
+  | { status: "creator-not-connected"; creator: string; rejected: boolean };
+
+// Loads a VOD and its markers for the signed-in viewer.
+// The viewer's own token works for their VODs (and channels they edit), which
+// skips the creator lookup in the common case.
+export const getVodWithMarkers = async (
+  vodId: string,
+  viewerClerkId: string
+): Promise<VodResult> => {
+  const [video, viewerToken] = await Promise.all([
+    getVideo(vodId),
+    getTwitchTokenFromClerk(viewerClerkId),
+  ]);
+  if (!video) return { status: "not-found" };
+
+  const viewerMarkers = viewerToken
+    ? await getMarkers(vodId, viewerToken)
+    : undefined;
+  if (viewerMarkers) {
+    return { status: "ok", vod: { ...video, markers: viewerMarkers } };
+  }
+
+  const creatorToken = await getCreatorToken(video.user_login);
+  if (!creatorToken) {
+    return {
+      status: "creator-not-connected",
+      creator: video.user_name,
+      rejected: false,
+    };
+  }
+
+  const markers = await getMarkers(vodId, creatorToken);
+  if (!markers) {
+    return {
+      status: "creator-not-connected",
+      creator: video.user_name,
+      rejected: true,
+    };
+  }
+
+  return { status: "ok", vod: { ...video, markers } };
 };
 
 export type LiveTopic = {
@@ -123,8 +221,10 @@ export type LiveTopic = {
   startedAt: number;
 };
 
+type LiveMarker = TwitchMarker & { created_at: string };
+
 type TwitchMarkersResponse = {
-  data?: { videos?: { markers?: VOD["markers"] }[] }[];
+  data?: { videos?: { markers?: LiveMarker[] }[] }[];
   pagination?: { cursor?: string };
 };
 
@@ -146,7 +246,8 @@ const fetchTwitchLive = async <T>(path: string, token: string) => {
 export const getLiveTopic = async (
   creatorName: string
 ): Promise<LiveTopic | null> => {
-  const token = await getValidTokenForCreator(creatorName);
+  const token = await getCreatorToken(creatorName);
+  if (!token) throw new Error("Creator has not signed in to MarkerThing");
   const userId = await getTwitchUserId(creatorName, token);
   if (!userId) return null;
 
@@ -159,7 +260,7 @@ export const getLiveTopic = async (
 
   // Markers come oldest first, max 100 per page, so walk to the last page.
   // The page cap is only a guard against a bad cursor loop.
-  const markers: VOD["markers"] = [];
+  const markers: LiveMarker[] = [];
   let cursor: string | undefined;
   for (let page = 0; page < 10; page++) {
     const res = await fetchTwitchLive<TwitchMarkersResponse>(
diff --git a/src/utils/types/twitch-player.d.ts b/src/utils/types/twitch-player.d.ts
index c36337e..aa11507 100644
--- a/src/utils/types/twitch-player.d.ts
+++ b/src/utils/types/twitch-player.d.ts
@@ -147,3 +147,10 @@ export class Player {
    */
   addEventListener(event: string, callback: () => void): void;
 }
+
+declare global {
+  interface Window {
+    // Set by https://player.twitch.tv/js/embed/v1.js
+    Twitch?: { Player: typeof Player };
+  }
+}