diff --git a/web/src/app/dashboard/backfill/page.tsx b/web/src/app/dashboard/backfill/page.tsx
index 89e92bc..4f7d91d 100644
--- a/web/src/app/dashboard/backfill/page.tsx
+++ b/web/src/app/dashboard/backfill/page.tsx
@@ -5,7 +5,9 @@ import { useCallback, useEffect, useState } from "react";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import { createBackfillJob, getBackfillJobs, getLexicons } from "@/lib/api";
 import type { BackfillJob } from "@/types/backfill";
+import { CheckCircle2, Circle, Loader2 } from "lucide-react";
 import { SiteHeader } from "@/components/site-header";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Combobox,
@@ -27,6 +29,12 @@ import {
 } from "@/components/ui/responsive-dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import {
   Table,
   TableBody,
@@ -36,10 +44,55 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
+const STAGES = [
+  "pending",
+  "discovering_repos",
+  "resolving_pds",
+  "fetching_records",
+  "completed",
+  "failed",
+] as const;
+
+const STAGE_LABELS: Record<string, string> = {
+  pending: "Pending",
+  discovering_repos: "Discovering repos",
+  resolving_pds: "Resolving PDS",
+  fetching_records: "Fetching records",
+  completed: "Completed",
+  failed: "Failed",
+};
+
+function stageBadge(stage: string) {
+  switch (stage) {
+    case "completed":
+      return (
+        <Badge className="bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-500/25 border-emerald-500/20">
+          completed
+        </Badge>
+      );
+    case "failed":
+      return <Badge variant="destructive">failed</Badge>;
+    case "pending":
+      return <Badge variant="secondary">pending</Badge>;
+    default:
+      return (
+        <Badge className="bg-blue-500/15 text-blue-700 dark:text-blue-400 hover:bg-blue-500/25 border-blue-500/20">
+          {STAGE_LABELS[stage] ?? stage}
+        </Badge>
+      );
+  }
+}
+
+function stageIndex(stage: string): number {
+  const idx = STAGES.indexOf(stage as (typeof STAGES)[number]);
+  return idx === -1 ? 0 : idx;
+}
+
 export default function BackfillPage() {
   const { hasPermission } = useCurrentUser();
   const [jobs, setJobs] = useState<BackfillJob[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
 
   const load = useCallback(() => {
     getBackfillJobs()
@@ -51,12 +104,13 @@ export default function BackfillPage() {
     load();
   }, [load]);
 
-  // Auto-refresh every 5 seconds
   useEffect(() => {
     const interval = setInterval(load, 5000);
     return () => clearInterval(interval);
   }, [load]);
 
+  const selectedJob = jobs.find((j) => j.id === selectedJobId) ?? null;
+
   return (
     <>
       <SiteHeader title="Backfill" />
@@ -93,7 +147,11 @@ export default function BackfillPage() {
                 </TableRow>
               )}
               {jobs.map((job) => (
-                <TableRow key={job.id}>
+                <TableRow
+                  key={job.id}
+                  className="cursor-pointer"
+                  onClick={() => setSelectedJobId(job.id)}
+                >
                   <TableCell className="font-mono text-xs">
                     {job.id.slice(0, 8)}
                   </TableCell>
@@ -103,9 +161,7 @@ export default function BackfillPage() {
                   <TableCell className="font-mono text-sm">
                     {job.did ?? "All"}
                   </TableCell>
-                  <TableCell className="tabular-nums">
-                    <StageDisplay job={job} />
-                  </TableCell>
+                  <TableCell>{stageBadge(job.stage)}</TableCell>
                   <TableCell>
                     {job.started_at
                       ? new Date(job.started_at).toLocaleString()
@@ -116,53 +172,165 @@ export default function BackfillPage() {
             </TableBody>
           </Table>
         </div>
+
+        <Sheet
+          open={selectedJob != null}
+          onOpenChange={(open) => {
+            if (!open) setSelectedJobId(null);
+          }}
+        >
+          <SheetContent className="sm:max-w-xl overflow-hidden flex flex-col">
+            {selectedJob && <JobDetail job={selectedJob} />}
+          </SheetContent>
+        </Sheet>
       </div>
     </>
   );
 }
 
-function StageDisplay({ job }: { job: BackfillJob }) {
-  const repos = job.total_repos?.toLocaleString() ?? "0";
-  const processed = job.processed_repos?.toLocaleString() ?? "0";
-  const records = job.total_records?.toLocaleString() ?? "0";
+function JobDetail({ job }: { job: BackfillJob }) {
+  const current = stageIndex(job.stage);
 
-  switch (job.stage) {
-    case "pending":
-      return <span className="text-muted-foreground">Pending</span>;
-    case "discovering_repos":
-      return (
-        <span>
-          Discovering repos…
-          <br /> {repos} found
-        </span>
-      );
-    case "resolving_pds":
-      return (
-        <span>
-          Resolving PDS… ({processed} / {repos})
-        </span>
-      );
-    case "fetching_records":
-      return (
-        <span>
-          Fetching records… ({processed} / {repos} repos, {records} records)
-        </span>
-      );
-    case "completed":
-      return (
-        <span>
-          Completed — {repos} repos, {records} records
-        </span>
-      );
-    case "failed":
-      return (
-        <span className="text-destructive">
-          Failed{job.error ? ` — ${job.error}` : ""}
+  return (
+    <>
+      <SheetHeader>
+        <SheetTitle className="flex items-center gap-2">
+          <span className="font-mono text-sm">Backfill Details</span>
+        </SheetTitle>
+      </SheetHeader>
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 flex flex-col gap-4">
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div className="col-span-2">
+            <span className="text-muted-foreground">Job ID</span>
+            <p className="font-mono text-xs break-all">{job.id}</p>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Collection</span>
+            <p className="font-mono text-xs">{job.collection ?? "All"}</p>
+          </div>
+          <div>
+            <span className="text-muted-foreground">DID</span>
+            <p className="font-mono text-xs break-all">{job.did ?? "All"}</p>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Created</span>
+            <p className="text-xs">
+              {new Date(job.created_at).toLocaleString()}
+            </p>
+          </div>
+          <div>
+            <span className="text-muted-foreground">Started</span>
+            <p className="text-xs">
+              {job.started_at
+                ? new Date(job.started_at).toLocaleString()
+                : "--"}
+            </p>
+          </div>
+          {job.completed_at && (
+            <div>
+              <span className="text-muted-foreground">Completed</span>
+              <p className="text-xs">
+                {new Date(job.completed_at).toLocaleString()}
+              </p>
+            </div>
+          )}
+        </div>
+
+        {job.error && (
+          <div>
+            <span className="text-muted-foreground text-sm">Error</span>
+            <div className="bg-destructive/10 text-destructive mt-1 rounded-md p-3 font-mono text-xs whitespace-pre-wrap">
+              {job.error}
+            </div>
+          </div>
+        )}
+
+        <div>
+          <span className="text-muted-foreground text-sm">Progress</span>
+          <div className="mt-1 rounded-md border divide-y">
+            <ProgressRow
+              label="Discovering repos"
+              active={job.stage === "discovering_repos"}
+              reached={current >= stageIndex("discovering_repos")}
+              value={job.total_repos?.toLocaleString()}
+              suffix="repos found"
+            />
+            <ProgressRow
+              label="Resolving PDS"
+              active={job.stage === "resolving_pds"}
+              reached={current >= stageIndex("resolving_pds")}
+              value={
+                current >= stageIndex("resolving_pds")
+                  ? `${job.processed_repos?.toLocaleString() ?? "0"} / ${job.total_repos?.toLocaleString() ?? "0"}`
+                  : undefined
+              }
+              suffix="resolved"
+            />
+            <ProgressRow
+              label="Fetching records"
+              active={job.stage === "fetching_records"}
+              reached={current >= stageIndex("fetching_records")}
+              value={
+                current >= stageIndex("fetching_records")
+                  ? `${job.processed_repos?.toLocaleString() ?? "0"} / ${job.total_repos?.toLocaleString() ?? "0"} repos`
+                  : undefined
+              }
+              suffix={
+                current >= stageIndex("fetching_records")
+                  ? `${job.total_records?.toLocaleString() ?? "0"} records`
+                  : undefined
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function ProgressRow({
+  label,
+  active,
+  reached,
+  value,
+  suffix,
+}: {
+  label: string;
+  active: boolean;
+  reached: boolean;
+  value?: string;
+  suffix?: string;
+}) {
+  const done = reached && !active;
+
+  return (
+    <div
+      className={`flex items-center gap-2 px-3 py-2 text-sm ${
+        active
+          ? "bg-blue-500/5"
+          : reached
+            ? ""
+            : "text-muted-foreground opacity-50"
+      }`}
+    >
+      <span className="shrink-0">
+        {active ? (
+          <Loader2 className="size-4 animate-spin text-blue-500" />
+        ) : done ? (
+          <CheckCircle2 className="size-4 text-emerald-500" />
+        ) : (
+          <Circle className="size-4" />
+        )}
+      </span>
+      <span className={`flex-1 ${active ? "font-medium" : ""}`}>{label}</span>
+      {reached && value && (
+        <span className="tabular-nums text-xs text-muted-foreground">
+          {value}
+          {suffix ? ` · ${suffix}` : ""}
         </span>
-      );
-    default:
-      return <span className="text-muted-foreground">{job.stage}</span>;
-  }
+      )}
+    </div>
+  );
 }
 
 function CreateDialog({ onSuccess }: { onSuccess: () => void }) {