diff --git a/apps/examlense/frontend/src/components/shared/ExamModeRedirect.tsx b/apps/examlense/frontend/src/components/shared/ExamModeRedirect.tsx
new file mode 100644
index 0000000..576c6d9
--- /dev/null
+++ b/apps/examlense/frontend/src/components/shared/ExamModeRedirect.tsx
@@ -0,0 +1,22 @@
+import { Navigate } from "react-router-dom";
+import {
+  examModePath,
+  examModeSlug,
+  type Exam,
+  type ExamModeSlug,
+} from "@/lib/exam/exam-helpers";
+
+/**
+ * Returns a `<Navigate replace>` to the exam's canonical mode when `exam`'s
+ * status doesn't belong in `expected`, else `null`. Call it AFTER the loading
+ * and `!exam` guards so `exam` is known to be present.
+ *
+ * Routing keeps each exam in the single mode its status maps to (see
+ * `examModeSlug`); visiting another mode's URL redirects instead of silently
+ * transitioning the exam.
+ */
+export function examModeRedirect(exam: Exam, expected: ExamModeSlug) {
+  return examModeSlug(exam.status) !== expected ? (
+    <Navigate to={examModePath(exam.id, exam.status)} replace />
+  ) : null;
+}
diff --git a/apps/examlense/frontend/src/components/shared/ModelLogo.tsx b/apps/examlense/frontend/src/components/shared/ModelLogo.tsx
index e86e35f..2f816ee 100644
--- a/apps/examlense/frontend/src/components/shared/ModelLogo.tsx
+++ b/apps/examlense/frontend/src/components/shared/ModelLogo.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils/utils";
-import { solverModelMeta } from "@/lib/exam/solver-model-meta";
+import { modelMeta } from "@/lib/exam/model-meta";
 
 interface Props {
   modelId: string;
@@ -12,7 +12,7 @@ interface Props {
  * logo is mapped. Callers own the surrounding chip/container.
  */
 export const ModelLogo = ({ modelId, className }: Props) => {
-  const meta = solverModelMeta(modelId);
+  const meta = modelMeta(modelId);
 
   if (meta?.logoSrc) {
     return (
diff --git a/apps/examlense/frontend/src/components/shared/chrome/InlineTitle.tsx b/apps/examlense/frontend/src/components/shared/chrome/InlineTitle.tsx
index 1871c6c..c404465 100644
--- a/apps/examlense/frontend/src/components/shared/chrome/InlineTitle.tsx
+++ b/apps/examlense/frontend/src/components/shared/chrome/InlineTitle.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
 import { Pencil } from "lucide-react";
 import { Input } from "@/components/ui/input";
+import { useClickToEdit } from "@/hooks/ui/use-click-to-edit";
 
 interface Props {
   value: string;
@@ -8,15 +8,13 @@ interface Props {
 }
 
 export const InlineTitle = ({ value, onSave }: Props) => {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(value);
-  useEffect(() => setDraft(value), [value]);
+  const { editing, startEditing, inputProps } = useClickToEdit(value, onSave);
 
   if (!editing) {
     return (
       <button
         type="button"
-        onClick={() => setEditing(true)}
+        onClick={startEditing}
         className="group flex max-w-full items-center gap-1.5 text-left font-body text-base font-semibold leading-tight text-hestia-text transition-colors hover:text-hestia-primary"
       >
         <span className="truncate">
@@ -36,20 +34,7 @@ export const InlineTitle = ({ value, onSave }: Props) => {
   }
   return (
     <Input
-      autoFocus
-      value={draft}
-      onChange={(e) => setDraft(e.target.value)}
-      onBlur={() => {
-        onSave(draft.trim());
-        setEditing(false);
-      }}
-      onKeyDown={(e) => {
-        if (e.key === "Enter") (e.target as HTMLInputElement).blur();
-        if (e.key === "Escape") {
-          setDraft(value);
-          setEditing(false);
-        }
-      }}
+      {...inputProps}
       className="h-auto border-hestia-border bg-transparent py-1 font-body text-base font-semibold"
     />
   );
diff --git a/apps/examlense/frontend/src/components/shared/exam-content/BlockActionsMenu.tsx b/apps/examlense/frontend/src/components/shared/exam-content/BlockActionsMenu.tsx
new file mode 100644
index 0000000..5298a9d
--- /dev/null
+++ b/apps/examlense/frontend/src/components/shared/exam-content/BlockActionsMenu.tsx
@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import { MoreVertical } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface Props {
+  /** aria-label for the "…" trigger (e.g. "Task actions"). */
+  ariaLabel: string;
+  /** Invoked when the destructive item is chosen (usually opens a confirm). */
+  onDelete: () => void;
+  /** Destructive item copy (defaults to "Delete"). */
+  deleteLabel?: string;
+  /** Extra menu items rendered above the delete item (a separator is auto-added). */
+  children?: ReactNode;
+}
+
+/**
+ * The "…" actions dropdown shared by the editable block cards. Renders any
+ * extra items, then a separator (only when extras exist), then the destructive
+ * delete item.
+ */
+export const BlockActionsMenu = ({
+  ariaLabel,
+  onDelete,
+  deleteLabel = "Delete",
+  children,
+}: Props) => (
+  <DropdownMenu>
+    <DropdownMenuTrigger
+      aria-label={ariaLabel}
+      className="rounded-hestia-sm p-1 text-hestia-text-muted hover:bg-hestia-primary-muted/40 hover:text-hestia-text"
+    >
+      <MoreVertical size={16} />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      {children}
+      {children && <DropdownMenuSeparator />}
+      <DropdownMenuItem
+        onClick={onDelete}
+        className="text-hestia-danger focus:text-hestia-danger"
+      >
+        {deleteLabel}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
diff --git a/apps/examlense/frontend/src/components/shared/exam-content/ConfirmDeleteDialog.tsx b/apps/examlense/frontend/src/components/shared/exam-content/ConfirmDeleteDialog.tsx
new file mode 100644
index 0000000..a1f9e72
--- /dev/null
+++ b/apps/examlense/frontend/src/components/shared/exam-content/ConfirmDeleteDialog.tsx
@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  description: ReactNode;
+  onConfirm: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Confirm-button copy (defaults to "Delete"). */
+  confirmLabel?: string;
+}
+
+/**
+ * Destructive-confirm AlertDialog scaffold shared by the editor's delete/convert
+ * prompts. The confirm button carries the danger styling so every destructive
+ * action reads the same.
+ */
+export const ConfirmDeleteDialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  confirmLabel = "Delete",
+}: Props) => (
+  <AlertDialog open={open} onOpenChange={onOpenChange}>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{title}</AlertDialogTitle>
+        <AlertDialogDescription>{description}</AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction
+          onClick={onConfirm}
+          className="bg-hestia-danger text-white hover:bg-hestia-danger/90"
+        >
+          {confirmLabel}
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+);
diff --git a/apps/examlense/frontend/src/components/shared/exam-content/MarkdownEditField.tsx b/apps/examlense/frontend/src/components/shared/exam-content/MarkdownEditField.tsx
new file mode 100644
index 0000000..25871d6
--- /dev/null
+++ b/apps/examlense/frontend/src/components/shared/exam-content/MarkdownEditField.tsx
@@ -0,0 +1,74 @@
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils/utils";
+import {
+  MarkdownView,
+  markdownSurfaceClassName,
+  markdownTextareaClassName,
+} from "@/components/shared/exam-content/MarkdownView";
+import type { InlineTextEdit } from "@/hooks/ui/use-inline-text-edit";
+
+interface Props {
+  field: InlineTextEdit;
+  placeholder: string;
+  /** aria-label for the read-view click target. */
+  ariaLabel: string;
+  rows?: number;
+  /** Extra classes appended to the textarea's markdown class. */
+  textareaClassName?: string;
+  /** Class for the read-view click target (defaults to the bordered surface). */
+  readViewClassName?: string;
+  /** Class forwarded to MarkdownView in the read view. */
+  markdownClassName?: string;
+  hint?: string;
+}
+
+/**
+ * The textarea ↔ MarkdownView toggle shared by the editable task and context
+ * cards. Editing (or a blank value) shows the textarea plus a "Markdown
+ * supported" hint; otherwise a click-to-edit rendered-markdown surface.
+ */
+export const MarkdownEditField = ({
+  field,
+  placeholder,
+  ariaLabel,
+  rows = 2,
+  textareaClassName,
+  readViewClassName = markdownSurfaceClassName,
+  markdownClassName,
+  hint = "Code blocks and snippets (Markdown) supported",
+}: Props) => {
+  const { editing, isEmpty, enterEdit, textareaRef, textareaProps, value } = field;
+
+  if (editing || isEmpty) {
+    return (
+      <>
+        <Textarea
+          ref={textareaRef}
+          {...textareaProps}
+          placeholder={placeholder}
+          rows={rows}
+          className={cn(markdownTextareaClassName, textareaClassName)}
+        />
+        <p className="mt-1 text-xs text-hestia-text-muted">{hint}</p>
+      </>
+    );
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={enterEdit}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          enterEdit();
+        }
+      }}
+      aria-label={ariaLabel}
+      className={readViewClassName}
+    >
+      <MarkdownView content={value} className={markdownClassName} />
+    </div>
+  );
+};
diff --git a/apps/examlense/frontend/src/hooks/data/use-exam-bundle.ts b/apps/examlense/frontend/src/hooks/data/use-exam-bundle.ts
new file mode 100644
index 0000000..73fd8c2
--- /dev/null
+++ b/apps/examlense/frontend/src/hooks/data/use-exam-bundle.ts
@@ -0,0 +1,26 @@
+import { useExam, useTasks } from "@/hooks/data/use-exam";
+import { useSections, useSectionBlocks } from "@/hooks/data/use-sections";
+
+/**
+ * The four exam-scoped queries every route page opens together
+ * (`ExamEdit`, `GradingView`, `ExamResults`). Returns the resolved data plus a
+ * combined loading flag so pages don't re-declare the same fetch boilerplate.
+ *
+ * Deliberately excludes `useTaskAnswers`/`useTaskGrades` (only Grading + Results
+ * need them, and they build their own lookup maps) and `useSectionFigures`
+ * (keyed by block id, not exam id).
+ */
+export function useExamBundle(id: string | undefined) {
+  const exam = useExam(id);
+  const tasks = useTasks(id);
+  const sections = useSections(id);
+  const blocks = useSectionBlocks(id);
+  return {
+    exam: exam.data,
+    tasks: tasks.data,
+    sections: sections.data,
+    blocks: blocks.data,
+    isLoading:
+      exam.isLoading || tasks.isLoading || sections.isLoading || blocks.isLoading,
+  };
+}
diff --git a/apps/examlense/frontend/src/hooks/data/use-exam-realtime.ts b/apps/examlense/frontend/src/hooks/data/use-exam-realtime.ts
new file mode 100644
index 0000000..246c6a4
--- /dev/null
+++ b/apps/examlense/frontend/src/hooks/data/use-exam-realtime.ts
@@ -0,0 +1,32 @@
+import { useEffect, useRef } from "react";
+import { subscribeExam, type ExamEventHandlers } from "@/lib/api/sse";
+
+/**
+ * Subscribe to one exam's SSE stream for the lifetime of the component,
+ * invoking the latest handlers without re-subscribing on every render. Wraps
+ * the subscribe + cache-invalidation effect that ExamEdit and GradingView
+ * otherwise duplicate. (The evaluation-progress channel keeps its own wrapper
+ * in `use-exam-progress`.)
+ */
+export function useExamRealtime(
+  id: string | undefined,
+  handlers: ExamEventHandlers,
+) {
+  const handlersRef = useRef(handlers);
+  handlersRef.current = handlers;
+
+  // Re-subscribe only when the exam or the set of active channels changes —
+  // handler identity is read through the ref, so inline closures are fine.
+  const hasExam = !!handlers.onExam;
+  const hasProgress = !!handlers.onProgress;
+  const hasTasks = !!handlers.onTasks;
+
+  useEffect(() => {
+    if (!id) return;
+    return subscribeExam(id, {
+      onExam: hasExam ? () => handlersRef.current.onExam?.() : undefined,
+      onProgress: hasProgress ? () => handlersRef.current.onProgress?.() : undefined,
+      onTasks: hasTasks ? () => handlersRef.current.onTasks?.() : undefined,
+    });
+  }, [id, hasExam, hasProgress, hasTasks]);
+}
diff --git a/apps/examlense/frontend/src/hooks/ui/use-click-to-edit.ts b/apps/examlense/frontend/src/hooks/ui/use-click-to-edit.ts
new file mode 100644
index 0000000..2b8202e
--- /dev/null
+++ b/apps/examlense/frontend/src/hooks/ui/use-click-to-edit.ts
@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Click-to-edit title state machine shared by InlineTitle and SectionTitleInput:
+ * a resting affordance flips to an input that commits the trimmed draft on blur
+ * / Enter and reverts on Escape. The commit guard (e.g. skip if unchanged) is
+ * left to the caller's `onSave`.
+ */
+export function useClickToEdit(value: string, onSave: (next: string) => void) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  useEffect(() => setDraft(value), [value]);
+
+  return {
+    editing,
+    startEditing: () => setEditing(true),
+    inputProps: {
+      value: draft,
+      autoFocus: true,
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
+        setDraft(e.target.value),
+      onBlur: () => {
+        onSave(draft.trim());
+        setEditing(false);
+      },
+      onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") (e.target as HTMLInputElement).blur();
+        if (e.key === "Escape") {
+          setDraft(value);
+          setEditing(false);
+        }
+      },
+    },
+  };
+}
diff --git a/apps/examlense/frontend/src/hooks/ui/use-inline-text-edit.ts b/apps/examlense/frontend/src/hooks/ui/use-inline-text-edit.ts
new file mode 100644
index 0000000..c2b9f78
--- /dev/null
+++ b/apps/examlense/frontend/src/hooks/ui/use-inline-text-edit.ts
@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState } from "react";
+import { useAutosizeTextarea } from "@/hooks/ui/use-autosize-textarea";
+import { useDebouncedCallback } from "@/hooks/ui/use-debounced-callback";
+
+interface InlineTextEditOptions {
+  /** Source-of-truth value (e.g. task.prompt / block.content). */
+  value: string;
+  /** Persist a committed value. Debounced on keystroke, flushed on blur. */
+  onCommit: (value: string) => void;
+  debounceMs?: number;
+}
+
+export interface InlineTextEdit {
+  /** Local mirror of the text (fast typing without cascading re-renders). */
+  value: string;
+  editing: boolean;
+  /** Enter edit mode and focus the textarea with the caret at the end. */
+  enterEdit: () => void;
+  /** True while the local mirror is blank (forces the editor open). */
+  isEmpty: boolean;
+  textareaRef: ReturnType<typeof useAutosizeTextarea<HTMLTextAreaElement>>;
+  textareaProps: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onBlur: () => void;
+  };
+}
+
+/**
+ * Click-to-edit text field state machine shared by the editable task and
+ * context cards: a debounced local mirror, an `editing` toggle that starts open
+ * when the value is blank, a focus-caret-on-enter effect, and a blur handler
+ * that flushes the pending patch and closes edit mode once non-empty.
+ */
+export function useInlineTextEdit({
+  value: source,
+  onCommit,
+  debounceMs = 250,
+}: InlineTextEditOptions): InlineTextEdit {
+  const [value, setValue] = useState(source);
+  useEffect(() => setValue(source), [source]);
+
+  const textareaRef = useAutosizeTextarea<HTMLTextAreaElement>(value);
+  const [editing, setEditing] = useState(() => (source ?? "").trim() === "");
+  const justEnteredEdit = useRef(false);
+
+  useEffect(() => {
+    if (editing && justEnteredEdit.current) {
+      justEnteredEdit.current = false;
+      const el = textareaRef.current;
+      if (el) {
+        el.focus();
+        const len = el.value.length;
+        try {
+          el.setSelectionRange(len, len);
+        } catch {
+          /* noop */
+        }
+      }
+    }
+  }, [editing, textareaRef]);
+
+  const debounced = useDebouncedCallback(
+    (next: string) => onCommit(next),
+    debounceMs,
+  );
+
+  const enterEdit = () => {
+    justEnteredEdit.current = true;
+    setEditing(true);
+  };
+
+  return {
+    value,
+    editing,
+    enterEdit,
+    isEmpty: value.trim() === "",
+    textareaRef,
+    textareaProps: {
+      value,
+      onChange: (e) => {
+        setValue(e.target.value);
+        debounced(e.target.value);
+      },
+      onBlur: () => {
+        debounced.flush();
+        if (value !== source) onCommit(value);
+        if (value.trim() !== "") setEditing(false);
+      },
+    },
+  };
+}
diff --git a/apps/examlense/frontend/src/hooks/ui/use-section-groups.test.ts b/apps/examlense/frontend/src/hooks/ui/use-section-groups.test.ts
new file mode 100644
index 0000000..3e37c0e
--- /dev/null
+++ b/apps/examlense/frontend/src/hooks/ui/use-section-groups.test.ts
@@ -0,0 +1,83 @@
+import { describe, it, expect } from "vitest";
+import { computeSectionGroups, computeTaskLetters } from "./use-section-groups";
+import { figureLabelsForBlocks, type Section, type SectionBlock, type Task } from "@/lib/exam/exam-helpers";
+
+const section = (id: string, position: number, name = ""): Section =>
+  ({ id, position, name }) as Section;
+
+const task = (id: string, position: number, sectionId: string | null): Task =>
+  ({ id, position, section_id: sectionId, created_at: `2024-01-0${position + 1}` }) as Task;
+
+const figure = (id: string, position: number, sectionId: string): SectionBlock =>
+  ({ id, position, section_id: sectionId, kind: "figure", created_at: "2024-01-01" }) as SectionBlock;
+
+describe("computeSectionGroups", () => {
+  const sections = [section("s2", 2), section("s1", 1), section("empty", 3)];
+  const tasks = [
+    task("t2", 1, "s1"),
+    task("t1", 0, "s1"),
+    task("t3", 0, "s2"),
+    task("orphan", 0, null),
+  ];
+  const blocks = [figure("f1", 2, "s1")];
+
+  it("orders sections by position and assigns index-based slugs", () => {
+    const grouped = computeSectionGroups(sections, tasks, blocks, true);
+    // s1 (pos 1) → section-1, s2 (pos 2) → section-2, empty (pos 3) → section-3, orphan last.
+    expect(grouped.map((g) => g.slug)).toEqual([
+      "section-1",
+      "section-2",
+      "section-3",
+      "section-unassigned",
+    ]);
+    expect(grouped[0].section?.id).toBe("s1");
+    expect(grouped[3].section).toBeNull();
+  });
+
+  it("includeEmpty:false drops sections with no items and keeps the orphan bucket", () => {
+    const grouped = computeSectionGroups(sections, tasks, blocks, false);
+    // "empty" section has no items → dropped; orphan has a task → kept.
+    expect(grouped.map((g) => g.slug)).toEqual([
+      "section-1",
+      "section-2",
+      "section-unassigned",
+    ]);
+  });
+
+  it("interleaves tasks and blocks by position within a section", () => {
+    const grouped = computeSectionGroups(sections, tasks, blocks, true);
+    const s1 = grouped[0];
+    // s1 items by position: t1 (0), t2 (1), f1 (2).
+    expect(s1.items.map((it) => it.position)).toEqual([0, 1, 2]);
+    expect(s1.items[2].kind).toBe("figure");
+  });
+});
+
+describe("computeTaskLetters", () => {
+  const sections = [section("s1", 1), section("s2", 2)];
+  const tasks = [
+    task("t2", 1, "s1"),
+    task("t1", 0, "s1"),
+    task("t3", 0, "s2"),
+    task("orphan", 0, null),
+  ];
+
+  it("assigns per-section letter labels ordered by task position", () => {
+    const grouped = computeSectionGroups(sections, tasks, [], true);
+    const letters = computeTaskLetters(grouped);
+    // s1 tasks by position: t1 (0) → a, t2 (1) → b.
+    expect(letters.get("t1")).toBe("a");
+    expect(letters.get("t2")).toBe("b");
+    // First (only) task in s2 and in the orphan bucket → a.
+    expect(letters.get("t3")).toBe("a");
+    expect(letters.get("orphan")).toBe("a");
+  });
+});
+
+describe("figureLabelsForBlocks (shared by useSectionGroups)", () => {
+  it("labels figures as Figure {sectionNumber}.{index}", () => {
+    const sections = [section("s1", 1)];
+    const blocks = [figure("f1", 2, "s1")];
+    expect(figureLabelsForBlocks(sections, blocks).get("f1")).toBe("Figure 1.1");
+  });
+});
diff --git a/apps/examlense/frontend/src/hooks/ui/use-section-groups.ts b/apps/examlense/frontend/src/hooks/ui/use-section-groups.ts
new file mode 100644
index 0000000..c645595
--- /dev/null
+++ b/apps/examlense/frontend/src/hooks/ui/use-section-groups.ts
@@ -0,0 +1,162 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  figureLabelsForBlocks,
+  letterLabel,
+  mergeSectionItems,
+  sectionIndexSlug,
+  UNASSIGNED_SLUG,
+  type BlockItem,
+  type Section,
+  type SectionBlock,
+  type Task,
+} from "@/lib/exam/exam-helpers";
+
+export interface SectionGroup {
+  section: Section | null;
+  tasks: Task[];
+  items: BlockItem[];
+  slug: string;
+}
+
+interface SectionGroupsOptions {
+  /**
+   * When true (editor), every section is kept even if empty and the orphan
+   * bucket is appended only when it holds tasks. When false (grading), groups
+   * with no items are dropped entirely.
+   */
+  includeEmpty: boolean;
+}
+
+/**
+ * Group tasks + blocks by section. Pure (no hooks) so it can be unit-tested;
+ * `useSectionGroups` memoizes it. Sections keep their sorted order and get an
+ * index-based slug; unassigned tasks fall into a trailing "orphan" group. When
+ * `includeEmpty` is false, groups with no items are dropped.
+ */
+export function computeSectionGroups(
+  sections: Section[] | undefined,
+  tasks: Task[] | undefined,
+  blocks: SectionBlock[] | undefined,
+  includeEmpty: boolean,
+): SectionGroup[] {
+  const sortedSections = (sections ?? [])
+    .slice()
+    .sort((a, b) => a.position - b.position);
+  const tasksBySection = new Map<string | null, Task[]>();
+  for (const task of tasks ?? []) {
+    const key = task.section_id ?? null;
+    const arr = tasksBySection.get(key) ?? [];
+    arr.push(task);
+    tasksBySection.set(key, arr);
+  }
+  const blocksBySection = new Map<string, SectionBlock[]>();
+  for (const block of blocks ?? []) {
+    const arr = blocksBySection.get(block.section_id) ?? [];
+    arr.push(block);
+    blocksBySection.set(block.section_id, arr);
+  }
+
+  const groups: SectionGroup[] = [];
+  sortedSections.forEach((s, index) => {
+    const sectionTasks = tasksBySection.get(s.id) ?? [];
+    const sectionBlocks = blocksBySection.get(s.id) ?? [];
+    groups.push({
+      section: s,
+      tasks: sectionTasks,
+      items: mergeSectionItems(sectionTasks, sectionBlocks),
+      slug: sectionIndexSlug(index),
+    });
+  });
+
+  const orphan = tasksBySection.get(null) ?? [];
+  if (orphan.length > 0) {
+    groups.push({
+      section: null,
+      tasks: orphan,
+      items: mergeSectionItems(orphan, []),
+      slug: UNASSIGNED_SLUG,
+    });
+  }
+
+  return includeEmpty ? groups : groups.filter((g) => g.items.length > 0);
+}
+
+/** Per-task letter labels (a, b, c…) within each section, ordered by position. */
+export function computeTaskLetters(grouped: SectionGroup[]): Map<string, string> {
+  const m = new Map<string, string>();
+  grouped.forEach((g) => {
+    g.tasks
+      .slice()
+      .sort((a, b) => a.position - b.position)
+      .forEach((task, i) => m.set(task.id, letterLabel(i)));
+  });
+  return m;
+}
+
+/**
+ * Group an exam's tasks + blocks by section for the editor and grading views.
+ * Returns the grouping plus the per-task letter labels and the figure display
+ * labels that both views derive from it.
+ */
+export function useSectionGroups(
+  sections: Section[] | undefined,
+  tasks: Task[] | undefined,
+  blocks: SectionBlock[] | undefined,
+  { includeEmpty }: SectionGroupsOptions,
+): {
+  grouped: SectionGroup[];
+  taskLetterById: Map<string, string>;
+  figureLabels: Map<string, string>;
+} {
+  const grouped = useMemo(
+    () => computeSectionGroups(sections, tasks, blocks, includeEmpty),
+    [tasks, sections, blocks, includeEmpty],
+  );
+
+  const taskLetterById = useMemo(() => computeTaskLetters(grouped), [grouped]);
+
+  const figureLabels = useMemo(
+    () => figureLabelsForBlocks(sections, blocks),
+    [sections, blocks],
+  );
+
+  return { grouped, taskLetterById, figureLabels };
+}
+
+interface CurrentSectionIdOptions {
+  /**
+   * When true, an out-of-range current id resets to "" (empty) instead of the
+   * first group — the editor uses this to keep the intro slide visible until
+   * the user picks a section.
+   */
+  introGate?: boolean;
+}
+
+/**
+ * Track the carousel's current section slug, bootstrapped from the URL hash
+ * and re-validated whenever the grouping changes (a deleted section falls back
+ * to the first group, or to "" when the editor's intro is still pending).
+ */
+export function useCurrentSectionId(
+  grouped: SectionGroup[],
+  { introGate = false }: CurrentSectionIdOptions = {},
+): [string, (id: string) => void] {
+  const [currentId, setCurrentId] = useState<string>(() => {
+    if (typeof window === "undefined") return "";
+    return window.location.hash.replace(/^#/, "");
+  });
+
+  useEffect(() => {
+    // Keep the current id (e.g. a hash deep-link) untouched while the grouping
+    // is still empty during initial load.
+    if (grouped.length === 0) return;
+    const validIds = new Set(grouped.map((g) => g.slug));
+    setCurrentId((prev) => {
+      if (validIds.has(prev)) return prev;
+      if (introGate) return "";
+      return grouped[0]?.slug ?? "";
+    });
+  }, [grouped, introGate]);
+
+  return [currentId, setCurrentId];
+}
diff --git a/apps/examlense/frontend/src/lib/exam/exam-helpers.ts b/apps/examlense/frontend/src/lib/exam/exam-helpers.ts
index 6880db6..02b39c0 100644
--- a/apps/examlense/frontend/src/lib/exam/exam-helpers.ts
+++ b/apps/examlense/frontend/src/lib/exam/exam-helpers.ts
@@ -266,6 +266,16 @@ export const figureLabelsForBlocks = (
   return out;
 };
 
+/** Carousel/hash slug for the orphan ("Unassigned tasks") bucket. */
+export const UNASSIGNED_SLUG = "section-unassigned";
+
+/**
+ * Index-based carousel/hash slug for a real section: 1-based position in the
+ * sorted section list. Shared by the editor and grading views so their
+ * deep-link hashes stay in lockstep.
+ */
+export const sectionIndexSlug = (index: number) => `section-${index + 1}`;
+
 /**
  * Build a URL-hash-safe slug for a section. Used by the editor + grading
  * + results sidebars to deep-link to a specific section.
diff --git a/apps/examlense/frontend/src/lib/exam/exam-status.ts b/apps/examlense/frontend/src/lib/exam/exam-status.ts
new file mode 100644
index 0000000..a8c75fe
--- /dev/null
+++ b/apps/examlense/frontend/src/lib/exam/exam-status.ts
@@ -0,0 +1,80 @@
+import {
+  CheckCircle2,
+  FileText,
+  Gavel,
+  Loader2,
+  Sparkles,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import type { Exam } from "./exam-helpers";
+
+type ExamStatus = Exam["status"];
+
+export interface ExamStatusMeta {
+  /** User-facing badge label. */
+  label: string;
+  /** Badge chip classes (background + text). */
+  className: string;
+  Icon: LucideIcon;
+  /** Whether the icon spins (in-progress states). */
+  spin: boolean;
+  /** Lifecycle order for the Status-column sort. */
+  rank: number;
+}
+
+const DRAFT_META: ExamStatusMeta = {
+  label: "Draft",
+  className: "border border-hestia-border text-hestia-text-muted",
+  Icon: FileText,
+  spin: false,
+  rank: 2,
+};
+
+/**
+ * Single source of truth for how each exam status renders (badge) and sorts
+ * (Status column). Both the dashboard badge and the table sort read from here
+ * so the mapping — including the `ready`→Draft collapse — can't drift.
+ *
+ * `failed` is surfaced separately (a warning affordance on the row, its own
+ * card variant), so in the badge it deliberately keeps the neutral "Draft"
+ * appearance; only its `rank` distinguishes it, sorting failed exams last.
+ */
+export const EXAM_STATUS_META: Record<ExamStatus, ExamStatusMeta> = {
+  parsing: {
+    label: "Parsing",
+    className: "bg-hestia-primary/10 text-hestia-primary",
+    Icon: Loader2,
+    spin: true,
+    rank: 0,
+  },
+  evaluating: {
+    label: "Evaluating",
+    className: "bg-hestia-success/10 text-hestia-success",
+    Icon: Sparkles,
+    spin: false,
+    rank: 1,
+  },
+  draft: DRAFT_META,
+  // `ready` (editable draft ready to send) collapses into Draft for display.
+  ready: DRAFT_META,
+  grading: {
+    label: "Grading",
+    className: "bg-hestia-accent/10 text-hestia-accent",
+    Icon: Gavel,
+    spin: false,
+    rank: 3,
+  },
+  finished: {
+    label: "Finished",
+    className: "bg-hestia-success/10 text-hestia-success",
+    Icon: CheckCircle2,
+    spin: false,
+    rank: 4,
+  },
+  // Neutral badge appearance (see note above); sorts last.
+  failed: { ...DRAFT_META, rank: 5 },
+};
+
+/** Resolve status metadata, collapsing any unknown state to Draft. */
+export const examStatusMeta = (status: ExamStatus): ExamStatusMeta =>
+  EXAM_STATUS_META[status] ?? DRAFT_META;
diff --git a/apps/examlense/frontend/src/lib/exam/solver-model-meta.ts b/apps/examlense/frontend/src/lib/exam/model-meta.ts
similarity index 74%
rename from apps/examlense/frontend/src/lib/exam/solver-model-meta.ts
rename to apps/examlense/frontend/src/lib/exam/model-meta.ts
index c750f6b..5acfc6c 100644
--- a/apps/examlense/frontend/src/lib/exam/solver-model-meta.ts
+++ b/apps/examlense/frontend/src/lib/exam/model-meta.ts
@@ -1,16 +1,16 @@
 /**
- * Presentation metadata (provider label + logo) for solver models, shared by
- * the create-exam solver picker and the results overview. The behavioral
+ * Presentation metadata (provider label + logo) for LLM models, shared by the
+ * create-exam parser/solver pickers and the results overview. The behavioral
  * catalog lives in `llm-models.ts`; this is display-only.
  */
 
-export interface SolverModelMeta {
+export interface ModelMeta {
   provider: string;
   name: string;
   logoSrc: string;
 }
 
-export const SOLVER_MODEL_META: Record<string, SolverModelMeta> = {
+export const MODEL_META: Record<string, ModelMeta> = {
   "gemini-2.5-flash": {
     provider: "Google",
     name: "Gemini Flash",
@@ -43,7 +43,7 @@ export const SOLVER_MODEL_META: Record<string, SolverModelMeta> = {
   },
 };
 
-export const SOLVER_MODEL_ORDER = [
+export const MODEL_ORDER = [
   "gemini-2.5-flash",
   "gpt-5.5",
   "claude-opus-4-8",
@@ -51,5 +51,4 @@ export const SOLVER_MODEL_ORDER = [
   "qwen3.6-35b-a3b",
 ];
 
-export const solverModelMeta = (id: string): SolverModelMeta | undefined =>
-  SOLVER_MODEL_META[id];
+export const modelMeta = (id: string): ModelMeta | undefined => MODEL_META[id];
diff --git a/apps/examlense/frontend/src/lib/grading/grading.ts b/apps/examlense/frontend/src/lib/grading/grading.ts
index ab181cc..1308e6b 100644
--- a/apps/examlense/frontend/src/lib/grading/grading.ts
+++ b/apps/examlense/frontend/src/lib/grading/grading.ts
@@ -102,6 +102,19 @@ export const scoreRollup = (
   return { count: tasks.length, earned, max, pct: max > 0 ? Math.round((earned / max) * 100) : 0 };
 };
 
+/** Compact "{count} tasks · {earned}/{max} ({pct}%)" label for a score rollup. */
+export const formatScoreSummary = ({
+  count,
+  earned,
+  max,
+  pct,
+}: {
+  count: number;
+  earned: number;
+  max: number;
+  pct: number;
+}): string => `${count} tasks · ${earned}/${max} (${pct}%)`;
+
 export interface GoalRollup {
   goalId: number;
   count: number;
diff --git a/apps/examlense/frontend/src/lib/utils/utils.ts b/apps/examlense/frontend/src/lib/utils/utils.ts
index a5ef193..a6c0b88 100644
--- a/apps/examlense/frontend/src/lib/utils/utils.ts
+++ b/apps/examlense/frontend/src/lib/utils/utils.ts
@@ -1,6 +1,15 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { WheelEvent } from "react";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Blur a number input on wheel scroll so scrolling the page doesn't silently
+ * change its value. Wire to `onWheel` on `<input type="number">`.
+ */
+export const preventNumberWheelChange = (event: WheelEvent<HTMLInputElement>) => {
+  event.currentTarget.blur();
+};
diff --git a/apps/examlense/frontend/src/pages/admin/components/MetricsTable.tsx b/apps/examlense/frontend/src/pages/admin/components/MetricsTable.tsx
new file mode 100644
index 0000000..0170ca5
--- /dev/null
+++ b/apps/examlense/frontend/src/pages/admin/components/MetricsTable.tsx
@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils/utils";
+
+export interface MetricsColumn<T> {
+  header: string;
+  align?: "left" | "right";
+  cell: (row: T) => ReactNode;
+}
+
+/**
+ * "By model" style breakdown table shared by the admin review panels: a titled
+ * card wrapping a bordered table driven by column defs, so each panel supplies
+ * its own columns/cells while the scaffold (borders, spacing, tabular numbers)
+ * stays consistent.
+ */
+export function MetricsTable<T>({
+  title,
+  columns,
+  rows,
+  getRowKey,
+}: {
+  title: string;
+  columns: MetricsColumn<T>[];
+  rows: T[];
+  getRowKey: (row: T) => string;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="font-body text-lg">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-hestia-border text-left text-xs text-hestia-text-muted">
+              {columns.map((col) => (
+                <th
+                  key={col.header}
+                  className={cn(
+                    "pb-hestia-2 font-medium",
+                    col.align === "right" && "text-right",
+                  )}
+                >
+                  {col.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr
+                key={getRowKey(row)}
+                className="border-b border-hestia-border/40 last:border-0"
+              >
+                {columns.map((col) => (
+                  <td
+                    key={col.header}
+                    className={cn(
+                      "py-hestia-2 text-hestia-text",
+                      col.align === "right" && "text-right tabular-nums",
+                    )}
+                  >
+                    {col.cell(row)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/examlense/frontend/src/pages/admin/components/PanelMessage.tsx b/apps/examlense/frontend/src/pages/admin/components/PanelMessage.tsx
new file mode 100644
index 0000000..a571c03
--- /dev/null
+++ b/apps/examlense/frontend/src/pages/admin/components/PanelMessage.tsx
@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+
+/** Muted single-line status message for admin panel loading / empty states. */
+export const PanelMessage = ({ children }: { children: ReactNode }) => (
+  <p className="text-sm text-hestia-text-muted">{children}</p>
+);
diff --git a/apps/examlense/frontend/src/pages/admin/components/ParseSurveyPanel.tsx b/apps/examlense/frontend/src/pages/admin/components/ParseSurveyPanel.tsx
index 02d63c2..3163edd 100644
--- a/apps/examlense/frontend/src/pages/admin/components/ParseSurveyPanel.tsx
+++ b/apps/examlense/frontend/src/pages/admin/components/ParseSurveyPanel.tsx
@@ -1,15 +1,15 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { parserModelLabel } from "@/lib/exam/llm-models";
 import {
   useParseSurvey,
   useParseSurveyByModel,
   type ParseSurveyRow,
 } from "@/hooks/data/use-parse-survey";
+import { StatCardGrid } from "./StatCardGrid";
+import { PanelMessage } from "./PanelMessage";
+import { MetricsTable, type MetricsColumn } from "./MetricsTable";
 
 type Aspect = "speed" | "content_correctness" | "structure";
 
-const modelLabel = (id: string) => parserModelLabel(id);
-
 const average = (rows: ParseSurveyRow[], aspect: Aspect) => {
   const values = rows.map((r) => r[aspect]).filter((v): v is number => v != null);
   if (values.length === 0) return null;
@@ -23,11 +23,11 @@ const ParseSurveyPanel = () => {
   const { data: byModel } = useParseSurveyByModel();
 
   if (isLoading || !rows) {
-    return <p className="text-sm text-hestia-text-muted">Loading…</p>;
+    return <PanelMessage>Loading…</PanelMessage>;
   }
 
   if (rows.length === 0) {
-    return <p className="text-sm text-hestia-text-muted">No survey responses yet.</p>;
+    return <PanelMessage>No survey responses yet.</PanelMessage>;
   }
 
   const stats = [
@@ -37,55 +37,30 @@ const ParseSurveyPanel = () => {
     { label: "Avg exam structure", value: formatAvg(average(rows, "structure")) },
   ];
 
+  type ByModelRow = NonNullable<typeof byModel>[number];
+  const columns: MetricsColumn<ByModelRow>[] = [
+    { header: "Model", cell: (m) => parserModelLabel(m.model_id) },
+    { header: "Responses", align: "right", cell: (m) => m.responses },
+    { header: "Avg speed", align: "right", cell: (m) => formatAvg(m.avg_speed) },
+    {
+      header: "Avg content correctness",
+      align: "right",
+      cell: (m) => formatAvg(m.avg_content_correctness),
+    },
+    { header: "Avg exam structure", align: "right", cell: (m) => formatAvg(m.avg_structure) },
+  ];
+
   return (
     <div className="space-y-hestia-5">
-      <div className="grid grid-cols-2 gap-hestia-3 lg:grid-cols-4">
-        {stats.map((s) => (
-          <Card key={s.label}>
-            <CardContent className="p-hestia-4">
-              <p className="text-xs font-medium text-hestia-text-muted">{s.label}</p>
-              <p className="mt-1 font-body text-2xl font-bold tabular-nums text-hestia-text">{s.value}</p>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+      <StatCardGrid stats={stats} className="grid-cols-2 lg:grid-cols-4" />
 
       {byModel && byModel.length > 0 && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="font-body text-lg">By model</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-hestia-border text-left text-xs text-hestia-text-muted">
-                  <th className="pb-hestia-2 font-medium">Model</th>
-                  <th className="pb-hestia-2 text-right font-medium">Responses</th>
-                  <th className="pb-hestia-2 text-right font-medium">Avg speed</th>
-                  <th className="pb-hestia-2 text-right font-medium">Avg content correctness</th>
-                  <th className="pb-hestia-2 text-right font-medium">Avg exam structure</th>
-                </tr>
-              </thead>
-              <tbody>
-                {byModel.map((m) => (
-                  <tr key={m.model_id} className="border-b border-hestia-border/40 last:border-0">
-                    <td className="py-hestia-2 text-hestia-text">{modelLabel(m.model_id)}</td>
-                    <td className="py-hestia-2 text-right tabular-nums text-hestia-text">{m.responses}</td>
-                    <td className="py-hestia-2 text-right tabular-nums text-hestia-text">
-                      {formatAvg(m.avg_speed)}
-                    </td>
-                    <td className="py-hestia-2 text-right tabular-nums text-hestia-text">
-                      {formatAvg(m.avg_content_correctness)}
-                    </td>
-                    <td className="py-hestia-2 text-right tabular-nums text-hestia-text">
-                      {formatAvg(m.avg_structure)}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </CardContent>
-        </Card>
+        <MetricsTable
+          title="By model"
+          columns={columns}
+          rows={byModel}
+          getRowKey={(m) => m.model_id}
+        />
       )}
     </div>
   );
diff --git a/apps/examlense/frontend/src/pages/admin/components/ParsingMetricsPanel.tsx b/apps/examlense/frontend/src/pages/admin/components/ParsingMetricsPanel.tsx
index 528c50c..b3df6c4 100644
--- a/apps/examlense/frontend/src/pages/admin/components/ParsingMetricsPanel.tsx
+++ b/apps/examlense/frontend/src/pages/admin/components/ParsingMetricsPanel.tsx
@@ -1,9 +1,9 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { parserModelLabel } from "@/lib/exam/llm-models";
 import { pdfModeLabel } from "@/lib/exam/labels";
 import { useParsingMetrics } from "@/hooks/data/use-parsing-metrics";
-
-const modelLabel = (id: string) => parserModelLabel(id);
+import { StatCardGrid } from "./StatCardGrid";
+import { PanelMessage } from "./PanelMessage";
+import { MetricsTable, type MetricsColumn } from "./MetricsTable";
 
 const formatDuration = (ms: number) => {
   if (ms < 1000) return `${ms} ms`;
@@ -21,7 +21,7 @@ const ParsingMetricsPanel = () => {
   const { data: metrics, isLoading } = useParsingMetrics();
 
   if (isLoading || !metrics) {
-    return <p className="text-sm text-hestia-text-muted">Loading…</p>;
+    return <PanelMessage>Loading…</PanelMessage>;
   }
 
   const stats = [
@@ -32,57 +32,35 @@ const ParsingMetricsPanel = () => {
     { label: "P95 duration", value: formatDuration(metrics.p95DurationMs) },
   ];
 
+  type ByModelRow = (typeof metrics.byModel)[number];
+  const columns: MetricsColumn<ByModelRow>[] = [
+    {
+      header: "Model",
+      cell: (m) => (
+        <>
+          {parserModelLabel(m.modelId)}
+          <span className="mt-0.5 block text-xs text-hestia-text-muted">
+            {pdfModeLabel(m.pdfMode)}
+          </span>
+        </>
+      ),
+    },
+    { header: "Total", align: "right", cell: (m) => m.total },
+    { header: "Success rate", align: "right", cell: (m) => rate(m.succeeded, m.total) },
+    { header: "Time / page", align: "right", cell: (m) => formatDuration(m.avgMsPerPage) },
+    { header: "Tokens / page", align: "right", cell: (m) => formatTokens(m.avgTokensPerPage) },
+  ];
+
   return (
     <div className="space-y-hestia-5">
-      <div className="grid grid-cols-2 gap-hestia-3 sm:grid-cols-3 lg:grid-cols-5">
-        {stats.map((s) => (
-          <Card key={s.label}>
-            <CardContent className="p-hestia-4">
-              <p className="text-xs font-medium text-hestia-text-muted">{s.label}</p>
-              <p className="mt-1 font-body text-2xl font-bold tabular-nums text-hestia-text">{s.value}</p>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+      <StatCardGrid stats={stats} className="grid-cols-2 sm:grid-cols-3 lg:grid-cols-5" />
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="font-body text-lg">By model</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-hestia-border text-left text-xs text-hestia-text-muted">
-                <th className="pb-hestia-2 font-medium">Model</th>
-                <th className="pb-hestia-2 text-right font-medium">Total</th>
-                <th className="pb-hestia-2 text-right font-medium">Success rate</th>
-                <th className="pb-hestia-2 text-right font-medium">Time / page</th>
-                <th className="pb-hestia-2 text-right font-medium">Tokens / page</th>
-              </tr>
-            </thead>
-            <tbody>
-              {metrics.byModel.map((m) => (
-                <tr key={`${m.modelId}:${m.pdfMode}`} className="border-b border-hestia-border/40 last:border-0">
-                  <td className="py-hestia-2 text-hestia-text">
-                    {modelLabel(m.modelId)}
-                    <span className="mt-0.5 block text-xs text-hestia-text-muted">{pdfModeLabel(m.pdfMode)}</span>
-                  </td>
-                  <td className="py-hestia-2 text-right tabular-nums text-hestia-text">{m.total}</td>
-                  <td className="py-hestia-2 text-right tabular-nums text-hestia-text">
-                    {rate(m.succeeded, m.total)}
-                  </td>
-                  <td className="py-hestia-2 text-right tabular-nums text-hestia-text">
-                    {formatDuration(m.avgMsPerPage)}
-                  </td>
-                  <td className="py-hestia-2 text-right tabular-nums text-hestia-text">
-                    {formatTokens(m.avgTokensPerPage)}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </CardContent>
-      </Card>
+      <MetricsTable
+        title="By model"
+        columns={columns}
+        rows={metrics.byModel}
+        getRowKey={(m) => `${m.modelId}:${m.pdfMode}`}
+      />
     </div>
   );
 };
diff --git a/apps/examlense/frontend/src/pages/admin/components/StatCardGrid.tsx b/apps/examlense/frontend/src/pages/admin/components/StatCardGrid.tsx
new file mode 100644
index 0000000..efb225f
--- /dev/null
+++ b/apps/examlense/frontend/src/pages/admin/components/StatCardGrid.tsx
@@ -0,0 +1,32 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils/utils";
+
+export interface Stat {
+  label: string;
+  value: string;
+}
+
+/**
+ * Responsive grid of headline stat cards shared by the admin review panels.
+ * `className` supplies the grid column layout (it differs per panel).
+ */
+export const StatCardGrid = ({
+  stats,
+  className,
+}: {
+  stats: Stat[];
+  className?: string;
+}) => (
+  <div className={cn("grid gap-hestia-3", className)}>
+    {stats.map((s) => (
+      <Card key={s.label}>
+        <CardContent className="p-hestia-4">
+          <p className="text-xs font-medium text-hestia-text-muted">{s.label}</p>
+          <p className="mt-1 font-body text-2xl font-bold tabular-nums text-hestia-text">
+            {s.value}
+          </p>
+        </CardContent>
+      </Card>
+    ))}
+  </div>
+);
diff --git a/apps/examlense/frontend/src/pages/exam-edit/ExamEdit.tsx b/apps/examlense/frontend/src/pages/exam-edit/ExamEdit.tsx
index ea53b19..d494daa 100644
--- a/apps/examlense/frontend/src/pages/exam-edit/ExamEdit.tsx
+++ b/apps/examlense/frontend/src/pages/exam-edit/ExamEdit.tsx
@@ -1,15 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link, useParams, Navigate, useNavigate } from "react-router-dom";
 import { useQueryClient } from "@tanstack/react-query";
-import {
-  FileText,
-  ArrowLeft,
-  ListChecks,
-  ListTodo,
-  NotebookPen,
-  Image as ImageIcon,
-  Plus,
-} from "lucide-react";
+import { ArrowLeft, Plus } from "lucide-react";
 import {
   DndContext,
   PointerSensor,
@@ -27,35 +19,22 @@ import {
 } from "@dnd-kit/sortable";
 import {
   patchExam as apiPatchExam,
-  patchTask as apiPatchTask,
-  createTask as apiCreateTask,
-  deleteTask as apiDeleteTask,
-  patchSection as apiPatchSection,
-  createSection as apiCreateSection,
-  deleteSection as apiDeleteSection,
-  patchBlock as apiPatchBlock,
-  createBlock as apiCreateBlock,
-  deleteBlock as apiDeleteBlock,
-  deleteTasksBySection,
-  deleteBlocksBySection,
   listAnswers,
   cancelExam,
 } from "@/lib/api/api-client";
-import { subscribeExam } from "@/lib/api/sse";
-import { useExam, useTasks, examKey, tasksKey } from "@/hooks/data/use-exam";
-import { useSections, useSectionBlocks, sectionsKey, blocksKey } from "@/hooks/data/use-sections";
+import { examKey, tasksKey } from "@/hooks/data/use-exam";
+import { sectionsKey, blocksKey } from "@/hooks/data/use-sections";
+import { useExamBundle } from "@/hooks/data/use-exam-bundle";
+import { useExamRealtime } from "@/hooks/data/use-exam-realtime";
+import { useExamMutations } from "@/pages/exam-edit/use-exam-mutations";
 import { SaveStatusProvider, useSaveStatus, SaveIndicator } from "@/pages/exam-edit/components/SaveStatus";
 import { useToast } from "@/hooks/ui/use-toast";
 import { examLearningGoalsKey } from "@/hooks/data/use-learning-goals";
-import { TaskCard } from "@/pages/exam-edit/components/TaskCard";
-import { ContextBlockCard } from "@/pages/exam-edit/components/ContextBlockCard";
-import { FigureBlockCard } from "@/pages/exam-edit/components/FigureBlockCard";
 import { AddTaskInline } from "@/pages/exam-edit/components/AddTaskInline";
 import { SectionLayout } from "@/components/shared/exam-content/SectionLayout";
 import { SectionTitleInput } from "@/pages/exam-edit/components/SectionTitleInput";
 import { useItemCollapseState } from "@/hooks/ui/use-item-collapse-state";
-import { BlockRow } from "@/pages/exam-edit/components/BlockRow";
-import { SortableItem } from "@/pages/exam-edit/components/SortableItem";
+import { BlockItem as BlockItemComponent } from "@/pages/exam-edit/components/BlockItem";
 import { ExamEditFooter } from "@/pages/exam-edit/components/ExamEditFooter";
 import { ScoreNeededIndicator } from "@/pages/exam-edit/components/ScoreNeededIndicator";
 import { InlineTitle } from "@/components/shared/chrome/InlineTitle";
@@ -68,94 +47,60 @@ import { IntroSlide } from "@/pages/exam-edit/components/IntroSlide";
 import { ManualIntroSlide } from "@/pages/exam-edit/components/ManualIntroSlide";
 import { useSectionConfirmations } from "@/hooks/data/use-section-confirmations";
 import {
-  convertTaskType,
   examModePath,
   examModeSlug,
-  figureLabelsForBlocks,
   isSectionReady,
   itemId,
-  letterLabel,
-  mergeSectionItems,
   totalPoints,
   type BlockItem,
   type Exam,
   type Section,
-  type SectionBlock,
   type Task,
   type TaskType,
 } from "@/lib/exam/exam-helpers";
-import { TASK_TYPE_LABELS } from "@/lib/exam/labels";
-import { Badge } from "@/components/ui/badge";
+import {
+  useSectionGroups,
+  useCurrentSectionId,
+} from "@/hooks/ui/use-section-groups";
 import {
   SectionSidebar,
   useEditSectionEntries,
   type SectionEntry,
 } from "@/components/shared/exam-content/SectionSidebar";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-
-const taskTypeIcon = (type: TaskType) => {
-  switch (type) {
-    case "single_choice":
-      return ListTodo;
-    case "multiple_choice":
-      return ListChecks;
-    case "text":
-    default:
-      return NotebookPen;
-  }
-};
-
-const sectionIndexSlug = (index: number) => `section-${index + 1}`;
+import { ConfirmDeleteDialog } from "@/components/shared/exam-content/ConfirmDeleteDialog";
 
 const ExamEditInner = () => {
   const { id } = useParams<{ id: string }>();
   const qc = useQueryClient();
   const { toast } = useToast();
   const { setSaving, setSaved, setError } = useSaveStatus();
-  const { data: exam, isLoading: examLoading } = useExam(id);
-  const { data: tasks, isLoading: tasksLoading } = useTasks(id);
-  const { data: sections, isLoading: sectionsLoading } = useSections(id);
-  const { data: blocks, isLoading: blocksLoading } = useSectionBlocks(id);
-  const isLoading =
-    examLoading || tasksLoading || sectionsLoading || blocksLoading;
+  const { exam, tasks, sections, blocks, isLoading } = useExamBundle(id);
 
   const solverModelId =
     exam?.solver_model ?? DEFAULT_SOLVER_MODEL_ID;
 
   // Keep the exam in sync if its status changes server-side (e.g. background
   // evaluation flips it back to a non-evaluating state).
-  useEffect(() => {
-    if (!id) return;
+  useExamRealtime(id, {
     // The SSE `exam` event carries no payload, so we can't diff status here.
     // Invalidate the exam and its child collections together: when the
     // background pipeline transitions out of a long-running phase
     // (parsing/evaluating/grading), the child collections were empty at first
     // load, and refetching them renders the freshly created
     // sections/tasks/blocks without a manual refresh.
-    return subscribeExam(id, {
-      onExam: () => {
-        qc.invalidateQueries({ queryKey: examKey(id) });
-        qc.invalidateQueries({ queryKey: tasksKey(id) });
-        qc.invalidateQueries({ queryKey: sectionsKey(id) });
-        qc.invalidateQueries({ queryKey: blocksKey(id) });
-      },
-      // Learning goals were generated in the background — refresh the tasks
-      // (they carry the goal ids) and the resolved-goal cache.
-      onTasks: () => {
-        qc.invalidateQueries({ queryKey: tasksKey(id) });
-        qc.invalidateQueries({ queryKey: examLearningGoalsKey(id) });
-      },
-    });
-  }, [id, qc]);
+    onExam: () => {
+      qc.invalidateQueries({ queryKey: examKey(id) });
+      qc.invalidateQueries({ queryKey: tasksKey(id) });
+      qc.invalidateQueries({ queryKey: sectionsKey(id) });
+      qc.invalidateQueries({ queryKey: blocksKey(id) });
+    },
+    // Learning goals were generated in the background — refresh the tasks
+    // (they carry the goal ids) and the resolved-goal cache.
+    onTasks: () => {
+      qc.invalidateQueries({ queryKey: tasksKey(id) });
+      qc.invalidateQueries({ queryKey: examLearningGoalsKey(id) });
+    },
+  });
 
   // Per-section user-confirmation state. Confirming a section dispatches a
   // background solve-section call so the LLM answers are ready by the time
@@ -193,46 +138,6 @@ const ExamEditInner = () => {
   // indicator to place itself relative to the visible area.
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  const sectionIdForTask = useCallback(
-    (taskId: string): string | null => {
-      const t = (tasks ?? []).find((tk) => tk.id === taskId);
-      return t?.section_id ?? null;
-    },
-    [tasks],
-  );
-
-  const sectionIdForBlock = useCallback(
-    (blockId: string): string | null => {
-      const b = (blocks ?? []).find((bk) => bk.id === blockId);
-      return b?.section_id ?? null;
-    },
-    [blocks],
-  );
-
-  // Unconfirm the given section (if confirmed) before performing an edit.
-  // Centralised so every mutation path keeps the confirmation/answer state
-  // honest: confirmation is a commit point, any edit reopens it.
-  const unconfirmIfNeeded = useCallback(
-    async (sectionId: string | null | undefined) => {
-      if (sectionId && confirmApiRef.current.isConfirmed(sectionId)) {
-        await confirmApiRef.current.unconfirm(sectionId);
-      }
-    },
-    [],
-  );
-
-  const patchExam = async (patch: Partial<Exam>) => {
-    if (!id || !exam) return;
-    setSaving();
-    qc.setQueryData(examKey(id), { ...exam, ...patch });
-    try {
-      await apiPatchExam(id, patch as Record<string, unknown>);
-      setSaved();
-    } catch {
-      setError();
-    }
-  };
-
   const sendToEvaluation = async () => {
     if (!id || !exam) return;
     evaluationStartedRef.current = true;
@@ -302,347 +207,13 @@ const ExamEditInner = () => {
     });
   };
 
-  const patchTask = async (taskId: string, patch: Partial<Task>) => {
-    if (!id) return;
-    await unconfirmIfNeeded(sectionIdForTask(taskId));
-    setSaving();
-    qc.setQueryData<Task[]>(tasksKey(id), (prev) =>
-      (prev ?? []).map((t) => (t.id === taskId ? { ...t, ...patch } : t)),
-    );
-    try {
-      await apiPatchTask(taskId, patch as Record<string, unknown>);
-      setSaved();
-    } catch {
-      setError();
-    }
-  };
-
-  const addTask = async (
-    type: TaskType,
-    afterPosition: number,
-    sectionId: string | null,
-  ) => {
-    if (!id) return;
-    await unconfirmIfNeeded(sectionId);
-    setSaving();
-    markPendingAdd();
-    try {
-      await apiCreateTask({
-        exam_id: id,
-        position: afterPosition + 1,
-        type,
-        section_id: sectionId,
-        options:
-          type === "text"
-            ? null
-            : [
-                { id: crypto.randomUUID(), text: "", is_correct: false },
-                { id: crypto.randomUUID(), text: "", is_correct: false },
-              ],
-      });
-      setSaved();
-      qc.invalidateQueries({ queryKey: tasksKey(id) });
-    } catch {
-      setError();
-    }
-  };
-
-  const deleteTask = async (taskId: string) => {
-    if (!id) return;
-    await unconfirmIfNeeded(sectionIdForTask(taskId));
-    setSaving();
-    qc.setQueryData<Task[]>(tasksKey(id), (prev) =>
-      (prev ?? []).filter((t) => t.id !== taskId),
-    );
-    try {
-      await apiDeleteTask(taskId);
-      setSaved();
-    } catch {
-      setError();
-    }
-  };
-
-  const duplicateTask = async (task: Task) => {
-    if (!id) return;
-    await unconfirmIfNeeded(task.section_id);
-    setSaving();
-    try {
-      await apiCreateTask({
-        exam_id: id,
-        position: task.position + 1,
-        type: task.type,
-        prompt: task.prompt,
-        options: task.options ?? null,
-        reference_answer: task.reference_answer,
-        section: task.section,
-        points: task.points,
-        section_id: task.section_id,
-      });
-      setSaved();
-      qc.invalidateQueries({ queryKey: tasksKey(id) });
-    } catch {
-      setError();
-    }
-  };
-
-  const patchSection = async (sectionId: string, patch: Partial<Section>) => {
-    if (!id) return;
-    // Confirmation toggles flow through useSectionConfirmations and bypass
-    // this helper, so any patchSection call here is a user-initiated edit
-    // and should reopen the section.
-    if (!("confirmed_at" in patch)) {
-      await unconfirmIfNeeded(sectionId);
-    }
-    setSaving();
-    qc.setQueryData<Section[]>(sectionsKey(id), (prev) =>
-      (prev ?? []).map((s) => (s.id === sectionId ? { ...s, ...patch } : s)),
-    );
-    try {
-      await apiPatchSection(sectionId, patch as Record<string, unknown>);
-      setSaved();
-    } catch {
-      setError();
-    }
-  };
-
-  const patchBlock = async (
-    blockId: string,
-    patch: Partial<SectionBlock>,
-  ) => {
-    if (!id) return;
-    await unconfirmIfNeeded(sectionIdForBlock(blockId));
-    setSaving();
-    qc.setQueryData<SectionBlock[]>(blocksKey(id), (prev) =>
-      (prev ?? []).map((b) => (b.id === blockId ? { ...b, ...patch } : b)),
-    );
-    try {
-      await apiPatchBlock(blockId, patch as Record<string, unknown>);
-      setSaved();
-    } catch {
-      setError();
-    }
-  };
-
-  const addContextBlock = async (
-    afterPosition: number,
-    sectionId: string,
-  ) => {
-    if (!id) return;
-    await unconfirmIfNeeded(sectionId);
-    setSaving();
-    markPendingAdd();
-    try {
-      await apiCreateBlock({
-        exam_id: id,
-        section_id: sectionId,
-        position: afterPosition + 1,
-        content: "",
-      });
-      setSaved();
-      qc.invalidateQueries({ queryKey: blocksKey(id) });
-      qc.invalidateQueries({ queryKey: tasksKey(id) });
-    } catch (error) {
-      console.error("addContextBlock", error);
-      setError();
-    }
-  };
-
-  const addFigureBlock = async (
-    afterPosition: number,
-    sectionId: string,
-  ) => {
-    if (!id) return;
-    await unconfirmIfNeeded(sectionId);
-    setSaving();
-    markPendingAdd();
-    try {
-      await apiCreateBlock({
-        exam_id: id,
-        section_id: sectionId,
-        position: afterPosition + 1,
-        content: "",
-        kind: "figure",
-      });
-      setSaved();
-      qc.invalidateQueries({ queryKey: blocksKey(id) });
-      qc.invalidateQueries({ queryKey: tasksKey(id) });
-    } catch {
-      setError();
-    }
-  };
-
-  const deleteBlock = async (blockId: string) => {
-    if (!id) return;
-    await unconfirmIfNeeded(sectionIdForBlock(blockId));
-    setSaving();
-    qc.setQueryData<SectionBlock[]>(blocksKey(id), (prev) =>
-      (prev ?? []).filter((b) => b.id !== blockId),
-    );
-    try {
-      await apiDeleteBlock(blockId);
-      setSaved();
-    } catch {
-      setError();
-    }
-  };
-
-  const addSection = async (afterPosition?: number) => {
-    if (!id) return;
-    setSaving();
-    // The backend's create-section is transactional and shifts later sections
-    // down itself, so we just hand it the target position (append falls past
-    // the end, where nothing needs shifting).
-    const position =
-      afterPosition != null ? afterPosition + 1 : (sections?.length ?? 0) + 1;
-    try {
-      await apiCreateSection({ exam_id: id, name: "", position });
-      setSaved();
-      qc.invalidateQueries({ queryKey: sectionsKey(id) });
-    } catch {
-      setError();
-    }
-  };
-
-  const deleteSection = async (sectionId: string) => {
-    if (!id) return;
-    setSaving();
-    // Delete tasks, blocks, then the section itself
-    try {
-      await deleteTasksBySection(id, sectionId);
-      await deleteBlocksBySection(id, sectionId);
-      await apiDeleteSection(sectionId);
-      setSaved();
-      qc.invalidateQueries({ queryKey: sectionsKey(id) });
-      qc.invalidateQueries({ queryKey: tasksKey(id) });
-      qc.invalidateQueries({ queryKey: blocksKey(id) });
-    } catch {
-      setError();
-    }
-  };
-
-  /**
-   * Persist a new ordering of items within a section. Assigns sequential
-   * positions (0, 1, 2, ...) and writes only the rows whose position changed.
-   * Cache is updated optimistically so the UI does not flicker.
-   */
-  const persistReorder = async (newOrder: BlockItem[]) => {
-    if (!id) return;
-    // Items in a single reorder all belong to the same section (the call
-    // originates from one section's DndContext). Take the section id from
-    // the first item that exposes one and reopen its confirmation.
-    const firstWithSection = newOrder.find(
-      (it) =>
-        (it.kind === "task" && it.task.section_id) ||
-        it.kind === "context" ||
-        it.kind === "figure",
-    );
-    const reorderSectionId =
-      firstWithSection?.kind === "task"
-        ? firstWithSection.task.section_id
-        : firstWithSection?.kind === "context" || firstWithSection?.kind === "figure"
-          ? firstWithSection.block.section_id
-          : null;
-    await unconfirmIfNeeded(reorderSectionId);
-    setSaving();
-
-    const taskUpdates: Array<{ id: string; position: number }> = [];
-    const blockUpdates: Array<{ id: string; position: number }> = [];
-
-    newOrder.forEach((item, idx) => {
-      if (item.kind === "task" && item.task.position !== idx) {
-        taskUpdates.push({ id: item.task.id, position: idx });
-      }
-      if (
-        (item.kind === "context" || item.kind === "figure") &&
-        item.block.position !== idx
-      ) {
-        blockUpdates.push({ id: item.block.id, position: idx });
-      }
-    });
-
-    // Optimistic cache update
-    if (taskUpdates.length > 0) {
-      const map = new Map(taskUpdates.map((u) => [u.id, u.position]));
-      qc.setQueryData<Task[]>(tasksKey(id), (prev) =>
-        (prev ?? []).map((t) =>
-          map.has(t.id) ? { ...t, position: map.get(t.id)! } : t,
-        ),
-      );
-    }
-    if (blockUpdates.length > 0) {
-      const map = new Map(blockUpdates.map((u) => [u.id, u.position]));
-      qc.setQueryData<SectionBlock[]>(blocksKey(id), (prev) =>
-        (prev ?? []).map((b) =>
-          map.has(b.id) ? { ...b, position: map.get(b.id)! } : b,
-        ),
-      );
-    }
-
-    try {
-      await Promise.all([
-        ...taskUpdates.map((u) => apiPatchTask(u.id, { position: u.position })),
-        ...blockUpdates.map((u) => apiPatchBlock(u.id, { position: u.position })),
-      ]);
-      setSaved();
-    } catch {
-      setError();
-      qc.invalidateQueries({ queryKey: tasksKey(id) });
-      qc.invalidateQueries({ queryKey: blocksKey(id) });
-    }
-  };
-
-  // Group tasks + context blocks by section_id (preserving section order; unassigned tasks go last)
-  const grouped = useMemo(() => {
-    const sortedSections = (sections ?? [])
-      .slice()
-      .sort((a, b) => a.position - b.position);
-    const tasksBySection = new Map<string | null, Task[]>();
-    for (const task of tasks ?? []) {
-      const key = task.section_id ?? null;
-      const arr = tasksBySection.get(key) ?? [];
-      arr.push(task);
-      tasksBySection.set(key, arr);
-    }
-    const blocksBySection = new Map<string, SectionBlock[]>();
-    for (const block of blocks ?? []) {
-      const arr = blocksBySection.get(block.section_id) ?? [];
-      arr.push(block);
-      blocksBySection.set(block.section_id, arr);
-    }
-
-    const groups: Array<{
-      section: Section | null;
-      tasks: Task[];
-      items: BlockItem[];
-      slug: string;
-    }> = [];
-    for (const [index, s] of sortedSections.entries()) {
-      const sectionTasks = tasksBySection.get(s.id) ?? [];
-      const sectionBlocks = blocksBySection.get(s.id) ?? [];
-      groups.push({
-        section: s,
-        tasks: sectionTasks,
-        items: mergeSectionItems(sectionTasks, sectionBlocks),
-        slug: sectionIndexSlug(index),
-      });
-    }
-    const orphan = tasksBySection.get(null) ?? [];
-    if (orphan.length > 0) {
-      orphan.sort((a, b) => a.position - b.position);
-      groups.push({
-        section: null,
-        tasks: orphan,
-        items: mergeSectionItems(orphan, []),
-        slug: "section-unassigned",
-      });
-    }
-    return groups;
-  }, [tasks, sections, blocks]);
-
-  // Auto-generated labels for figure blocks: "Figure {section}.{index}".
-  const figureLabels = useMemo(
-    () => figureLabelsForBlocks(sections, blocks),
-    [sections, blocks],
+  // Group tasks + context blocks by section (editor keeps empty sections).
+  // taskLetterById → a/b/c labels; figureLabels → "Figure {section}.{index}".
+  const { grouped, taskLetterById, figureLabels } = useSectionGroups(
+    sections,
+    tasks,
+    blocks,
+    { includeEmpty: true },
   );
 
   // Last position used inside a given section (across tasks + blocks).
@@ -660,11 +231,11 @@ const ExamEditInner = () => {
   // proactively; this catches readiness-only changes that the wrappers
   // could miss (e.g. an external/realtime update).
   //
-  // Gate on both queries having actually returned: on first load `sections`
-  // can settle before `tasks`, which would briefly make every section look
-  // empty and unconfirm the entire exam.
+  // Gate on the bundle having fully loaded: on first load `sections` can settle
+  // before `tasks`, which would briefly make every section look empty and
+  // unconfirm the entire exam.
   useEffect(() => {
-    if (tasksLoading || sectionsLoading) return;
+    if (isLoading) return;
     if (!tasks || !sections) return;
     for (const g of grouped) {
       const sid = g.section?.id;
@@ -674,7 +245,7 @@ const ExamEditInner = () => {
         void confirmApiRef.current.unconfirm(sid);
       }
     }
-  }, [grouped, tasks, sections, tasksLoading, sectionsLoading]);
+  }, [grouped, tasks, sections, isLoading]);
 
   const [pendingDeleteSection, setPendingDeleteSection] = useState<{
     id: string;
@@ -697,24 +268,10 @@ const ExamEditInner = () => {
     setIntroComplete(localStorage.getItem(introKey) === "1");
   }, [introKey, showInlineIntro]);
 
-  const [currentSectionId, setCurrentSectionId] = useState<string>(() => {
-    if (typeof window !== "undefined") {
-      const hashed = window.location.hash.replace(/^#/, "");
-      if (hashed) return hashed;
-    }
-    return "";
+  const [currentSectionId, setCurrentSectionId] = useCurrentSectionId(grouped, {
+    introGate: showInlineIntro && !introComplete,
   });
 
-  useEffect(() => {
-    if (grouped.length === 0) return;
-    const validIds = new Set(grouped.map((g) => g.slug));
-    setCurrentSectionId((prev) => {
-      if (validIds.has(prev)) return prev;
-      if (showInlineIntro && !introComplete) return "";
-      return grouped[0]?.slug ?? "";
-    });
-  }, [grouped, introComplete, showInlineIntro]);
-
   const markIntroComplete = useCallback(() => {
     if (introKey) localStorage.setItem(introKey, "1");
     setIntroComplete(true);
@@ -725,7 +282,7 @@ const ExamEditInner = () => {
       if (showInlineIntro && !introComplete) markIntroComplete();
       setCurrentSectionId(slug);
     },
-    [introComplete, markIntroComplete, showInlineIntro],
+    [introComplete, markIntroComplete, showInlineIntro, setCurrentSectionId],
   );
 
   // Auto-expand newly created blocks. We only treat ids as "new" right
@@ -765,6 +322,30 @@ const ExamEditInner = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, allBlockCollapseIds.join("|")]);
 
+  // CRUD/mutation layer (optimistic writes + save-status + unconfirm-on-edit).
+  const {
+    patchExam,
+    patchTask,
+    addTask,
+    deleteTask,
+    duplicateTask,
+    patchSection,
+    patchBlock,
+    addContextBlock,
+    addFigureBlock,
+    deleteBlock,
+    addSection,
+    deleteSection,
+    persistReorder,
+  } = useExamMutations(id, {
+    exam,
+    tasks,
+    blocks,
+    sections,
+    confirmApiRef,
+    markPendingAdd,
+  });
+
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
@@ -782,174 +363,21 @@ const ExamEditInner = () => {
       void persistReorder(newOrder);
     };
 
-  // Pure UI labels: a, b, c... per task within its section. Computed in
-  // render — no memoization, no callbacks, no cache churn.
-  const taskLetterById = (() => {
-    const counts = new Map<string | null, number>();
-    const out = new Map<string, string>();
-    const sorted = (tasks ?? []).slice().sort((a, b) => a.position - b.position);
-    for (const task of sorted) {
-      const key = task.section_id ?? null;
-      const i = counts.get(key) ?? 0;
-      out.set(task.id, letterLabel(i));
-      counts.set(key, i + 1);
-    }
-    return out;
-  })();
-
-  /**
-   * Render a single block. When collapsed → lightweight TOC row. When
-   * expanded → full editor card. Both paths share the same SortableItem so
-   * DnD reordering works regardless of expansion state.
-   */
-  const renderBlockItem = (item: BlockItem) => {
-    const id = itemId(item);
-    const expanded = !collapseApi.isCollapsed(id);
-    const onToggle = () => collapseApi.toggle(id);
-    const scrollTargetId =
-      item.kind === "task" ? `task-${item.task.id}` : undefined;
-
-    return (
-      <div key={id} id={scrollTargetId}>
-      <SortableItem id={id}>
-        {({ setNodeRef, style, isDragging, dragHandleProps }) => {
-          if (!expanded) {
-            // Build the row label + subtitle per block kind.
-            let label: ReactNode = "";
-            let subtitle: ReactNode = null;
-            let points: number | null | undefined;
-            let missingScore = false;
-            let badgeText = "";
-            let leadingIcon: ReactNode;
-            if (item.kind === "task") {
-              const TaskTypeIcon = taskTypeIcon(item.task.type);
-              const letter = taskLetterById.get(item.task.id) ?? "";
-              const prompt = item.task.prompt?.trim() ?? "";
-              label = letter
-                ? `${letter})`
-                : "Untitled task";
-              subtitle = prompt ? (
-                <p className="text-sm leading-relaxed text-hestia-text-muted line-clamp-2">
-                  {prompt}
-                </p>
-              ) : (
-                <p className="text-sm italic text-hestia-text-muted/70">
-                  Enter the task question…
-                </p>
-              );
-              points = item.task.points ?? null;
-              missingScore =
-                item.task.points == null || item.task.points <= 0;
-              badgeText = TASK_TYPE_LABELS[item.task.type];
-              leadingIcon = (
-                <TaskTypeIcon
-                  size={14}
-                  className="text-hestia-text-muted"
-                  aria-hidden
-                />
-              );
-            } else if (item.kind === "figure") {
-              label = figureLabels.get(item.block.id) ?? "Figure";
-              badgeText = "Figure";
-              leadingIcon = (
-                <ImageIcon
-                  size={14}
-                  className="text-hestia-text-muted"
-                  aria-hidden
-                />
-              );
-            } else {
-              label = "Context";
-              badgeText = "Context";
-              leadingIcon = (
-                <FileText
-                  size={14}
-                  className="text-hestia-text-muted"
-                  aria-hidden
-                />
-              );
-            }
-            return (
-              <BlockRow
-                kind={item.kind}
-                label={label}
-                subtitle={subtitle}
-                points={points}
-                missingScore={missingScore}
-                leadingIcon={leadingIcon}
-                badge={
-                  <Badge
-                    variant="secondary"
-                    className="bg-hestia-primary-muted/30 text-hestia-text-muted"
-                  >
-                    {badgeText}
-                  </Badge>
-                }
-                onToggle={onToggle}
-                setNodeRef={setNodeRef}
-                style={style}
-                isDragging={isDragging}
-                dragHandleProps={dragHandleProps}
-              />
-            );
-          }
-
-          // Expanded: render the full editor card. Its own header chevron
-          // toggles back to the collapsed row via the shared collapseApi.
-          if (item.kind === "context") {
-            return (
-              <ContextBlockCard
-                block={item.block}
-                onToggleCollapsed={onToggle}
-                onPatch={(patch) => patchBlock(item.block.id, patch)}
-                onDelete={() => deleteBlock(item.block.id)}
-                setNodeRef={setNodeRef}
-                style={style}
-                isDragging={isDragging}
-                dragHandleProps={dragHandleProps}
-              />
-            );
-          }
-          if (item.kind === "figure") {
-            return (
-              <FigureBlockCard
-                block={item.block}
-                examId={exam!.id}
-                displayLabel={
-                  figureLabels.get(item.block.id) ?? "Figure"
-                }
-                onToggleCollapsed={onToggle}
-                onDelete={() => deleteBlock(item.block.id)}
-                setNodeRef={setNodeRef}
-                style={style}
-                isDragging={isDragging}
-                dragHandleProps={dragHandleProps}
-              />
-            );
-          }
-          return (
-            <TaskCard
-              task={item.task}
-              label={taskLetterById.get(item.task.id) ?? ""}
-              collapsed={false}
-              onToggleCollapsed={onToggle}
-              onPatch={(patch) => patchTask(item.task.id, patch)}
-              onDelete={() => deleteTask(item.task.id)}
-              onDuplicate={() => duplicateTask(item.task)}
-              onConvert={(toType) =>
-                patchTask(item.task.id, convertTaskType(item.task, toType))
-              }
-              setNodeRef={setNodeRef}
-              style={style}
-              isDragging={isDragging}
-              dragHandleProps={dragHandleProps}
-            />
-          );
-        }}
-      </SortableItem>
-      </div>
-    );
-  };
+  const renderBlockItem = (item: BlockItem) => (
+    <BlockItemComponent
+      key={itemId(item)}
+      item={item}
+      collapseApi={collapseApi}
+      figureLabels={figureLabels}
+      taskLetterById={taskLetterById}
+      examId={exam!.id}
+      onPatchBlock={patchBlock}
+      onDeleteBlock={deleteBlock}
+      onPatchTask={patchTask}
+      onDeleteTask={deleteTask}
+      onDuplicateTask={duplicateTask}
+    />
+  );
 
   const confirmedSectionIds = useMemo(() => {
     const set = new Set<string>();
@@ -989,34 +417,21 @@ const ExamEditInner = () => {
     );
   }, [grouped, confirmApi]);
 
-  // Scroll-and-expand jump used by the footer progress button.
-  const handleJumpToTask = useCallback(
-    (taskId: string) => {
+  // Expand the target task and scroll it into view. `focusScore` also focuses
+  // the score input after the scroll settles — used by the "Score needs to be
+  // set" wayfinding indicator; the plain jump drives the footer progress button.
+  const jumpToTask = useCallback(
+    (taskId: string, { focusScore = false }: { focusScore?: boolean } = {}) => {
       const id = `task:${taskId}`;
       if (collapseApi.isCollapsed(id)) {
         collapseApi.setManyCollapsed([id], false);
       }
       // Defer to next frame so the expanded card is in the DOM.
-      requestAnimationFrame(() => {
-        const el = document.getElementById(`task-${taskId}`);
-        el?.scrollIntoView({ behavior: "smooth", block: "center" });
-      });
-    },
-    [collapseApi],
-  );
-
-  // Like handleJumpToTask, but also focuses the score input — used by the
-  // "Score needs to be set" wayfinding indicator.
-  const handleGoToScore = useCallback(
-    (taskId: string) => {
-      const id = `task:${taskId}`;
-      if (collapseApi.isCollapsed(id)) {
-        collapseApi.setManyCollapsed([id], false);
-      }
       requestAnimationFrame(() => {
         document
           .getElementById(`task-${taskId}`)
           ?.scrollIntoView({ behavior: "smooth", block: "center" });
+        if (!focusScore) return;
         // Focus after the smooth scroll settles so the caret lands cleanly.
         window.setTimeout(() => {
           const input = document.getElementById(
@@ -1077,7 +492,7 @@ const ExamEditInner = () => {
       findNextUnconfirmed(idx + 1, grouped.length) ??
       findNextUnconfirmed(0, idx);
     if (nextSlug) setCurrentSectionId(nextSlug);
-  }, [confirmApi, currentGroup, currentSectionRealId, grouped]);
+  }, [confirmApi, currentGroup, currentSectionRealId, grouped, setCurrentSectionId]);
 
   if (isLoading) {
     return <EditorLoadingView />;
@@ -1211,7 +626,7 @@ const ExamEditInner = () => {
             <ScoreNeededIndicator
               scrollRef={scrollRef}
               targetTaskId={nextUnscoredTaskId}
-              onGoToScore={handleGoToScore}
+              onGoToScore={(taskId) => jumpToTask(taskId, { focusScore: true })}
             />
           )}
         </main>
@@ -1224,43 +639,27 @@ const ExamEditInner = () => {
         currentSectionTasks={currentSectionTasks}
         taskLetterById={taskLetterById}
         allSectionsReady={allSectionsReady}
-        onJumpToTask={handleJumpToTask}
+        onJumpToTask={jumpToTask}
         onAdvanceSection={handleAdvanceSection}
         startSolvingOpen={startSolvingOpen}
         onStartSolvingOpenChange={setStartSolvingOpen}
       />
 
-      <AlertDialog
+      <ConfirmDeleteDialog
         open={pendingDeleteSection != null}
         onOpenChange={(open) => {
           if (!open) setPendingDeleteSection(null);
         }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Delete this section?
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              Tasks in this section will become unassigned.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={(ev) => {
-                ev.preventDefault();
-                const target = pendingDeleteSection;
-                setPendingDeleteSection(null);
-                if (target) void deleteSection(target.id);
-              }}
-              className="bg-hestia-danger text-white hover:bg-hestia-danger/90"
-            >
-              Delete section
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        title="Delete this section?"
+        description="Tasks in this section will become unassigned."
+        onConfirm={(ev) => {
+          ev.preventDefault();
+          const target = pendingDeleteSection;
+          setPendingDeleteSection(null);
+          if (target) void deleteSection(target.id);
+        }}
+        confirmLabel="Delete section"
+      />
     </div>
   );
 };
diff --git a/apps/examlense/frontend/src/pages/exam-edit/components/BlockItem.tsx b/apps/examlense/frontend/src/pages/exam-edit/components/BlockItem.tsx
new file mode 100644
index 0000000..2d7c8a5
--- /dev/null
+++ b/apps/examlense/frontend/src/pages/exam-edit/components/BlockItem.tsx
@@ -0,0 +1,226 @@
+import { type ReactNode } from "react";
+import {
+  FileText,
+  Image as ImageIcon,
+  ListChecks,
+  ListTodo,
+  NotebookPen,
+} from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { BlockRow } from "@/pages/exam-edit/components/BlockRow";
+import { SortableItem } from "@/pages/exam-edit/components/SortableItem";
+import { TaskCard } from "@/pages/exam-edit/components/TaskCard";
+import { ContextBlockCard } from "@/pages/exam-edit/components/ContextBlockCard";
+import { FigureBlockCard } from "@/pages/exam-edit/components/FigureBlockCard";
+import { TASK_TYPE_LABELS } from "@/lib/exam/labels";
+import {
+  convertTaskType,
+  itemId,
+  type BlockItem as BlockItemType,
+  type SectionBlock,
+  type Task,
+  type TaskType,
+} from "@/lib/exam/exam-helpers";
+
+const taskTypeIcon = (type: TaskType) => {
+  switch (type) {
+    case "single_choice":
+      return ListTodo;
+    case "multiple_choice":
+      return ListChecks;
+    case "text":
+    default:
+      return NotebookPen;
+  }
+};
+
+interface RowDescriptor {
+  label: ReactNode;
+  subtitle: ReactNode;
+  points: number | null | undefined;
+  missingScore: boolean;
+  badgeText: string;
+  leadingIcon: ReactNode;
+}
+
+/**
+ * Pure description of a block's collapsed TOC row (label / subtitle / points /
+ * badge / leading icon), keyed off the block kind.
+ */
+function blockRowDescriptor(
+  item: BlockItemType,
+  {
+    figureLabels,
+    taskLetterById,
+  }: { figureLabels: Map<string, string>; taskLetterById: Map<string, string> },
+): RowDescriptor {
+  if (item.kind === "task") {
+    const TaskTypeIcon = taskTypeIcon(item.task.type);
+    const letter = taskLetterById.get(item.task.id) ?? "";
+    const prompt = item.task.prompt?.trim() ?? "";
+    return {
+      label: letter ? `${letter})` : "Untitled task",
+      subtitle: prompt ? (
+        <p className="text-sm leading-relaxed text-hestia-text-muted line-clamp-2">
+          {prompt}
+        </p>
+      ) : (
+        <p className="text-sm italic text-hestia-text-muted/70">
+          Enter the task question…
+        </p>
+      ),
+      points: item.task.points ?? null,
+      missingScore: item.task.points == null || item.task.points <= 0,
+      badgeText: TASK_TYPE_LABELS[item.task.type],
+      leadingIcon: (
+        <TaskTypeIcon size={14} className="text-hestia-text-muted" aria-hidden />
+      ),
+    };
+  }
+  if (item.kind === "figure") {
+    return {
+      label: figureLabels.get(item.block.id) ?? "Figure",
+      subtitle: null,
+      points: undefined,
+      missingScore: false,
+      badgeText: "Figure",
+      leadingIcon: (
+        <ImageIcon size={14} className="text-hestia-text-muted" aria-hidden />
+      ),
+    };
+  }
+  return {
+    label: "Context",
+    subtitle: null,
+    points: undefined,
+    missingScore: false,
+    badgeText: "Context",
+    leadingIcon: (
+      <FileText size={14} className="text-hestia-text-muted" aria-hidden />
+    ),
+  };
+}
+
+interface Props {
+  item: BlockItemType;
+  collapseApi: {
+    isCollapsed: (id: string) => boolean;
+    toggle: (id: string) => void;
+  };
+  figureLabels: Map<string, string>;
+  taskLetterById: Map<string, string>;
+  examId: string;
+  onPatchBlock: (blockId: string, patch: Partial<SectionBlock>) => void;
+  onDeleteBlock: (blockId: string) => void;
+  onPatchTask: (taskId: string, patch: Partial<Task>) => void;
+  onDeleteTask: (taskId: string) => void;
+  onDuplicateTask: (task: Task) => void;
+}
+
+/**
+ * A single sortable block. Collapsed → lightweight TOC row; expanded → the full
+ * editor card. Both share the same SortableItem so DnD works in either state.
+ */
+export const BlockItem = ({
+  item,
+  collapseApi,
+  figureLabels,
+  taskLetterById,
+  examId,
+  onPatchBlock,
+  onDeleteBlock,
+  onPatchTask,
+  onDeleteTask,
+  onDuplicateTask,
+}: Props) => {
+  const id = itemId(item);
+  const expanded = !collapseApi.isCollapsed(id);
+  const onToggle = () => collapseApi.toggle(id);
+  const scrollTargetId =
+    item.kind === "task" ? `task-${item.task.id}` : undefined;
+
+  return (
+    <div id={scrollTargetId}>
+      <SortableItem id={id}>
+        {({ setNodeRef, style, isDragging, dragHandleProps }) => {
+          if (!expanded) {
+            const row = blockRowDescriptor(item, { figureLabels, taskLetterById });
+            return (
+              <BlockRow
+                kind={item.kind}
+                label={row.label}
+                subtitle={row.subtitle}
+                points={row.points}
+                missingScore={row.missingScore}
+                leadingIcon={row.leadingIcon}
+                badge={
+                  <Badge
+                    variant="secondary"
+                    className="bg-hestia-primary-muted/30 text-hestia-text-muted"
+                  >
+                    {row.badgeText}
+                  </Badge>
+                }
+                onToggle={onToggle}
+                setNodeRef={setNodeRef}
+                style={style}
+                isDragging={isDragging}
+                dragHandleProps={dragHandleProps}
+              />
+            );
+          }
+
+          // Expanded: render the full editor card. Its own header chevron
+          // toggles back to the collapsed row via the shared collapseApi.
+          if (item.kind === "context") {
+            return (
+              <ContextBlockCard
+                block={item.block}
+                onToggleCollapsed={onToggle}
+                onPatch={(patch) => onPatchBlock(item.block.id, patch)}
+                onDelete={() => onDeleteBlock(item.block.id)}
+                setNodeRef={setNodeRef}
+                style={style}
+                isDragging={isDragging}
+                dragHandleProps={dragHandleProps}
+              />
+            );
+          }
+          if (item.kind === "figure") {
+            return (
+              <FigureBlockCard
+                block={item.block}
+                examId={examId}
+                displayLabel={figureLabels.get(item.block.id) ?? "Figure"}
+                onToggleCollapsed={onToggle}
+                onDelete={() => onDeleteBlock(item.block.id)}
+                setNodeRef={setNodeRef}
+                style={style}
+                isDragging={isDragging}
+                dragHandleProps={dragHandleProps}
+              />
+            );
+          }
+          return (
+            <TaskCard
+              task={item.task}
+              label={taskLetterById.get(item.task.id) ?? ""}
+              collapsed={false}
+              onToggleCollapsed={onToggle}
+              onPatch={(patch) => onPatchTask(item.task.id, patch)}
+              onDelete={() => onDeleteTask(item.task.id)}
+              onDuplicate={() => onDuplicateTask(item.task)}
+              onConvert={(toType) =>
+                onPatchTask(item.task.id, convertTaskType(item.task, toType))
+              }
+              setNodeRef={setNodeRef}
+              style={style}
+              isDragging={isDragging}
+              dragHandleProps={dragHandleProps}
+            />
+          );
+        }}
+      </SortableItem>
+    </div>
+  );
+};
diff --git a/apps/examlense/frontend/src/pages/exam-edit/components/ContextBlockCard.tsx b/apps/examlense/frontend/src/pages/exam-edit/components/ContextBlockCard.tsx
index 63fa79b..827ce31 100644
--- a/apps/examlense/frontend/src/pages/exam-edit/components/ContextBlockCard.tsx
+++ b/apps/examlense/frontend/src/pages/exam-edit/components/ContextBlockCard.tsx
@@ -1,29 +1,11 @@
-import { useEffect, useRef, useState, type CSSProperties, type HTMLAttributes } from "react";
-import { MoreVertical } from "lucide-react";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { useAutosizeTextarea } from "@/hooks/ui/use-autosize-textarea";
-import { useDebouncedCallback } from "@/hooks/ui/use-debounced-callback";
-import { cn } from "@/lib/utils/utils";
+import { useState, type CSSProperties, type HTMLAttributes } from "react";
+import { useInlineTextEdit } from "@/hooks/ui/use-inline-text-edit";
 import type { SectionBlock } from "@/lib/exam/exam-helpers";
-import { MarkdownView, markdownTextareaClassName } from "@/components/shared/exam-content/MarkdownView";
+import { MarkdownEditField } from "@/components/shared/exam-content/MarkdownEditField";
 import { BlockHeader } from "@/components/shared/exam-content/BlockHeader";
 import { BlockCard } from "@/components/shared/exam-content/BlockCard";
+import { BlockActionsMenu } from "@/components/shared/exam-content/BlockActionsMenu";
+import { ConfirmDeleteDialog } from "@/components/shared/exam-content/ConfirmDeleteDialog";
 
 interface Props {
   block: SectionBlock;
@@ -47,37 +29,10 @@ export const ContextBlockCard = ({
   isDragging,
 }: Props) => {
   const [confirmDelete, setConfirmDelete] = useState(false);
-  const [content, setContent] = useState(block.content);
-  const [editing, setEditing] = useState(() => block.content.trim() === "");
-  useEffect(() => setContent(block.content), [block.id, block.content]);
-  const contentRef = useAutosizeTextarea<HTMLTextAreaElement>(content);
-  const justEnteredEdit = useRef(false);
-
-  useEffect(() => {
-    if (editing && justEnteredEdit.current) {
-      justEnteredEdit.current = false;
-      const el = contentRef.current;
-      if (el) {
-        el.focus();
-        const len = el.value.length;
-        try {
-          el.setSelectionRange(len, len);
-        } catch {
-          /* noop */
-        }
-      }
-    }
-  }, [editing, contentRef]);
-
-  const debouncedPatch = useDebouncedCallback(
-    (value: string) => onPatch({ content: value }),
-    250,
-  );
-
-  const enterEdit = () => {
-    justEnteredEdit.current = true;
-    setEditing(true);
-  };
+  const field = useInlineTextEdit({
+    value: block.content,
+    onCommit: (content) => onPatch({ content }),
+  });
 
   const header = (
     <BlockHeader
@@ -88,7 +43,11 @@ export const ContextBlockCard = ({
       quietControls
       dragAlwaysVisible
       actionsMenu={
-        <ContextActionsMenu setConfirmDelete={setConfirmDelete} />
+        <BlockActionsMenu
+          ariaLabel="Context actions"
+          onDelete={() => setConfirmDelete(true)}
+          deleteLabel="Delete context block"
+        />
       }
       dragHandleProps={dragHandleProps}
     />
@@ -96,48 +55,17 @@ export const ContextBlockCard = ({
 
   const body = (
     <div>
-      {editing || content.trim() === "" ? (
-        <>
-          <Textarea
-            ref={contentRef}
-            value={content}
-            onChange={(e) => {
-              setContent(e.target.value);
-              debouncedPatch(e.target.value);
-            }}
-            onBlur={() => {
-              debouncedPatch.flush();
-              if (content !== block.content) onPatch({ content });
-              if (content.trim() !== "") setEditing(false);
-            }}
-            placeholder="Context for the tasks below: instructions, definitions, references…"
-            rows={2}
-            className={markdownTextareaClassName}
-          />
-          <p className="mt-1 text-xs text-hestia-text-muted">
-            Code blocks and snippets (Markdown) supported
-          </p>
-        </>
-      ) : (
-        <div
-          role="button"
-          tabIndex={0}
-          onClick={enterEdit}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              enterEdit();
-            }
-          }}
-          aria-label="Context for the tasks below: instructions, definitions, references…"
-          // Card-less read view: the context flows on the section background;
-          // a soft tint on hover (and a ring on keyboard focus) hints that
-          // it is editable. The field box only appears while editing.
-          className="-mx-hestia-2 cursor-text rounded-hestia-sm px-hestia-2 py-1 transition-colors hover:bg-hestia-primary-muted/25 focus:outline-none focus-visible:ring-2 focus-visible:ring-hestia-primary/40"
-        >
-          <MarkdownView content={content} className="text-hestia-text/90" />
-        </div>
-      )}
+      <MarkdownEditField
+        field={field}
+        placeholder="Context for the tasks below: instructions, definitions, references…"
+        ariaLabel="Context for the tasks below: instructions, definitions, references…"
+        rows={2}
+        // Card-less read view: the context flows on the section background;
+        // a soft tint on hover (and a ring on keyboard focus) hints that
+        // it is editable. The field box only appears while editing.
+        readViewClassName="-mx-hestia-2 cursor-text rounded-hestia-sm px-hestia-2 py-1 transition-colors hover:bg-hestia-primary-muted/25 focus:outline-none focus-visible:ring-2 focus-visible:ring-hestia-primary/40"
+        markdownClassName="text-hestia-text/90"
+      />
     </div>
   );
 
@@ -152,48 +80,13 @@ export const ContextBlockCard = ({
         body={body}
       />
 
-      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete this context block?</AlertDialogTitle>
-            <AlertDialogDescription>
-              Any figures attached to it will also be removed.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={onDelete}
-              className="bg-hestia-danger text-white hover:bg-hestia-danger/90"
-            >
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDeleteDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title="Delete this context block?"
+        description="Any figures attached to it will also be removed."
+        onConfirm={onDelete}
+      />
     </>
   );
 };
-
-const ContextActionsMenu = ({
-  setConfirmDelete,
-}: {
-  setConfirmDelete: (v: boolean) => void;
-}) => (
-  <DropdownMenu>
-    <DropdownMenuTrigger
-      aria-label="Context actions"
-      className="rounded-hestia-sm p-1 text-hestia-text-muted hover:bg-hestia-primary-muted/40 hover:text-hestia-text"
-    >
-      <MoreVertical size={16} />
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end">
-      <DropdownMenuItem
-        onClick={() => setConfirmDelete(true)}
-        className="text-hestia-danger focus:text-hestia-danger"
-      >
-        Delete context block
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-);
diff --git a/apps/examlense/frontend/src/pages/exam-edit/components/FigureBlockCard.tsx b/apps/examlense/frontend/src/pages/exam-edit/components/FigureBlockCard.tsx
index 6a00ae6..fc6ec1f 100644
--- a/apps/examlense/frontend/src/pages/exam-edit/components/FigureBlockCard.tsx
+++ b/apps/examlense/frontend/src/pages/exam-edit/components/FigureBlockCard.tsx
@@ -1,22 +1,6 @@
 import { useRef, useState, type CSSProperties, type HTMLAttributes } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { MoreVertical, ImagePlus, Loader2, Trash2 } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
+import { ImagePlus, Loader2, Trash2 } from "lucide-react";
 import { uploadFigure, deleteFigure } from "@/lib/api/api-client";
 import { useFigureUrl } from "@/hooks/data/use-figure-url";
 import { useSectionFigures, figuresKey } from "@/hooks/data/use-sections";
@@ -25,6 +9,8 @@ import { cn } from "@/lib/utils/utils";
 import type { SectionBlock, SectionFigure } from "@/lib/exam/exam-helpers";
 import { BlockHeader } from "@/components/shared/exam-content/BlockHeader";
 import { BlockCard } from "@/components/shared/exam-content/BlockCard";
+import { BlockActionsMenu } from "@/components/shared/exam-content/BlockActionsMenu";
+import { ConfirmDeleteDialog } from "@/components/shared/exam-content/ConfirmDeleteDialog";
 
 const MAX_BYTES = 5 * 1024 * 1024;
 const MIME = ["image/png", "image/jpeg", "image/webp", "image/gif"];
@@ -122,7 +108,11 @@ export const FigureBlockCard = ({
       quietControls
       dragAlwaysVisible
       actionsMenu={
-        <FigureActionsMenu setConfirmDelete={setConfirmDelete} />
+        <BlockActionsMenu
+          ariaLabel="Figure actions"
+          onDelete={() => setConfirmDelete(true)}
+          deleteLabel="Delete figure block"
+        />
       }
       dragHandleProps={dragHandleProps}
     />
@@ -188,25 +178,13 @@ export const FigureBlockCard = ({
         body={body}
       />
 
-      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete this figure block?</AlertDialogTitle>
-            <AlertDialogDescription>
-              The image attached to it will also be removed.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={onDelete}
-              className="bg-hestia-danger text-white hover:bg-hestia-danger/90"
-            >
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDeleteDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title="Delete this figure block?"
+        description="The image attached to it will also be removed."
+        onConfirm={onDelete}
+      />
     </>
   );
 };
@@ -259,26 +237,3 @@ const FigureThumb = ({
     </div>
   );
 };
-
-const FigureActionsMenu = ({
-  setConfirmDelete,
-}: {
-  setConfirmDelete: (v: boolean) => void;
-}) => (
-  <DropdownMenu>
-    <DropdownMenuTrigger
-      aria-label="Figure actions"
-      className="rounded-hestia-sm p-1 text-hestia-text-muted hover:bg-hestia-primary-muted/40 hover:text-hestia-text"
-    >
-      <MoreVertical size={16} />
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end">
-      <DropdownMenuItem
-        onClick={() => setConfirmDelete(true)}
-        className="text-hestia-danger focus:text-hestia-danger"
-      >
-        Delete figure block
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-);
diff --git a/apps/examlense/frontend/src/pages/exam-edit/components/SectionTitleInput.tsx b/apps/examlense/frontend/src/pages/exam-edit/components/SectionTitleInput.tsx
index fbc8d32..bfd4f86 100644
--- a/apps/examlense/frontend/src/pages/exam-edit/components/SectionTitleInput.tsx
+++ b/apps/examlense/frontend/src/pages/exam-edit/components/SectionTitleInput.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from "react";
 import { Pencil } from "lucide-react";
 import type { Section } from "@/lib/exam/exam-helpers";
+import { useClickToEdit } from "@/hooks/ui/use-click-to-edit";
 
 interface Props {
   section: Section;
@@ -13,35 +13,17 @@ interface Props {
  * inline input that commits on blur / Enter and reverts on Escape.
  */
 export const SectionTitleInput = ({ section, onPatch }: Props) => {
-  const [editing, setEditing] = useState(false);
-  const [name, setName] = useState(section.name);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => setName(section.name), [section.id, section.name]);
-
-  const flush = () => {
-    const next = name.trim();
-    if (next !== section.name) onPatch({ name: next });
-  };
+  const { editing, startEditing, inputProps } = useClickToEdit(
+    section.name,
+    (next) => {
+      if (next !== section.name) onPatch({ name: next });
+    },
+  );
 
   if (editing) {
     return (
       <input
-        ref={inputRef}
-        autoFocus
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-        onBlur={() => {
-          flush();
-          setEditing(false);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") (e.target as HTMLInputElement).blur();
-          if (e.key === "Escape") {
-            setName(section.name);
-            setEditing(false);
-          }
-        }}
+        {...inputProps}
         placeholder="Section name (e.g. Part A)"
         className="w-full bg-transparent font-body text-base font-semibold text-hestia-text placeholder:font-normal placeholder:text-hestia-text-muted/35 focus:outline-none"
       />
@@ -51,7 +33,7 @@ export const SectionTitleInput = ({ section, onPatch }: Props) => {
   return (
     <button
       type="button"
-      onClick={() => setEditing(true)}
+      onClick={startEditing}
       className="group flex max-w-full items-center gap-1.5 text-left font-body text-base font-semibold leading-tight text-hestia-text transition-colors hover:text-hestia-primary"
     >
       <span className="truncate">
diff --git a/apps/examlense/frontend/src/pages/exam-edit/components/TaskCard.tsx b/apps/examlense/frontend/src/pages/exam-edit/components/TaskCard.tsx
index ebc941d..f3772db 100644
--- a/apps/examlense/frontend/src/pages/exam-edit/components/TaskCard.tsx
+++ b/apps/examlense/frontend/src/pages/exam-edit/components/TaskCard.tsx
@@ -1,7 +1,6 @@
-import { useEffect, useRef, useState, type CSSProperties, type HTMLAttributes } from "react";
+import { useState, type CSSProperties, type HTMLAttributes } from "react";
 import {
   GripVertical,
-  MoreVertical,
   Trash2,
   AlertTriangle,
   ChevronDown,
@@ -11,41 +10,23 @@ import {
 import { Badge } from "@/components/ui/badge";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
   DropdownMenuPortal,
-  DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { TASK_TYPE_LABELS } from "@/lib/exam/labels";
-import { useAutosizeTextarea } from "@/hooks/ui/use-autosize-textarea";
-import { useDebouncedCallback } from "@/hooks/ui/use-debounced-callback";
-import { cn } from "@/lib/utils/utils";
-import {
-  MarkdownView,
-  markdownSurfaceClassName,
-  markdownTextareaClassName,
-} from "@/components/shared/exam-content/MarkdownView";
+import { useInlineTextEdit } from "@/hooks/ui/use-inline-text-edit";
+import { cn, preventNumberWheelChange } from "@/lib/utils/utils";
+import { MarkdownEditField } from "@/components/shared/exam-content/MarkdownEditField";
 import { BlockHeader } from "@/components/shared/exam-content/BlockHeader";
 import { BlockCard } from "@/components/shared/exam-content/BlockCard";
+import { BlockActionsMenu } from "@/components/shared/exam-content/BlockActionsMenu";
+import { ConfirmDeleteDialog } from "@/components/shared/exam-content/ConfirmDeleteDialog";
 import {
   TASK_TYPES,
   mcWarning,
@@ -55,10 +36,6 @@ import {
   type TaskType,
 } from "@/lib/exam/exam-helpers";
 
-const preventNumberWheelChange = (event: React.WheelEvent<HTMLInputElement>) => {
-  event.currentTarget.blur();
-};
-
 interface Props {
   task: Task;
   /** Letter label within the section (e.g. "a", "b"). */
@@ -93,40 +70,13 @@ export const TaskCard = ({
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [pendingConvert, setPendingConvert] = useState<TaskType | null>(null);
 
-  // Local mirror for fast typing; flush via onPatch on change
-  const [prompt, setPrompt] = useState(task.prompt);
-  useEffect(() => setPrompt(task.prompt), [task.id, task.prompt]);
-  const promptRef = useAutosizeTextarea<HTMLTextAreaElement>(prompt);
-  const [editingPrompt, setEditingPrompt] = useState(() => (task.prompt ?? "").trim() === "");
-  const justEnteredPromptEdit = useRef(false);
-
-  useEffect(() => {
-    if (editingPrompt && justEnteredPromptEdit.current) {
-      justEnteredPromptEdit.current = false;
-      const el = promptRef.current;
-      if (el) {
-        el.focus();
-        const len = el.value.length;
-        try {
-          el.setSelectionRange(len, len);
-        } catch {
-          /* noop */
-        }
-      }
-    }
-  }, [editingPrompt, promptRef]);
-
-  const enterPromptEdit = () => {
-    justEnteredPromptEdit.current = true;
-    setEditingPrompt(true);
-  };
-
-  // Debounce text-field patches so each keystroke does NOT cascade into a
-  // full editor re-render (which would recompute a/b/c labels for every task).
-  const debouncedPatchPrompt = useDebouncedCallback(
-    (value: string) => onPatch({ prompt: value }),
-    250,
-  );
+  // Local mirror + click-to-edit machine for the prompt. Debounced patches
+  // keep each keystroke from cascading into a full editor re-render (which
+  // would recompute a/b/c labels for every task).
+  const field = useInlineTextEdit({
+    value: task.prompt,
+    onCommit: (prompt) => onPatch({ prompt }),
+  });
 
   const hasEmptyPrompt = (task.prompt ?? "").trim() === "";
 
@@ -236,7 +186,24 @@ export const TaskCard = ({
           </Popover>
         }
         actionsMenu={
-          <TaskActionsMenu {...{ task, onDuplicate, onConvert, setConfirmDelete }} />
+          <BlockActionsMenu
+            ariaLabel="Task actions"
+            onDelete={() => setConfirmDelete(true)}
+          >
+            <DropdownMenuItem onClick={onDuplicate}>Duplicate</DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>Convert type</DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  {TASK_TYPES.filter((tp) => tp !== task.type).map((tp) => (
+                    <DropdownMenuItem key={tp} onClick={() => onConvert(tp)}>
+                      {TASK_TYPE_LABELS[tp]}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </BlockActionsMenu>
         }
         dragHandleProps={dragHandleProps}
       />
@@ -251,45 +218,13 @@ export const TaskCard = ({
         <WarningBanner text="No task description added." />
       )}
 
-      {editingPrompt || prompt.trim() === "" ? (
-        <>
-          <Textarea
-            ref={promptRef}
-            value={prompt}
-            onChange={(e) => {
-              setPrompt(e.target.value);
-              debouncedPatchPrompt(e.target.value);
-            }}
-            onBlur={() => {
-              debouncedPatchPrompt.flush();
-              if (prompt !== task.prompt) onPatch({ prompt });
-              if (prompt.trim() !== "") setEditingPrompt(false);
-            }}
-            placeholder="Enter the task question…"
-            rows={2}
-            className={cn(markdownTextareaClassName, "max-h-[550px] overflow-y-auto")}
-          />
-          <p className="mt-1 text-xs text-hestia-text-muted">
-            Code blocks and snippets (Markdown) supported
-          </p>
-        </>
-      ) : (
-        <div
-          role="button"
-          tabIndex={0}
-          onClick={enterPromptEdit}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              enterPromptEdit();
-            }
-          }}
-          aria-label="Enter the task question…"
-          className={markdownSurfaceClassName}
-        >
-          <MarkdownView content={prompt} />
-        </div>
-      )}
+      <MarkdownEditField
+        field={field}
+        placeholder="Enter the task question…"
+        ariaLabel="Enter the task question…"
+        rows={2}
+        textareaClassName="max-h-[550px] overflow-y-auto"
+      />
 
       {task.type === "text" ? null : task.type === "single_choice" ? (
         <div className="mt-hestia-3">
@@ -347,100 +282,35 @@ export const TaskCard = ({
         body={body}
       />
 
-      <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete this task?</AlertDialogTitle>
-            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={onDelete}
-              className="bg-hestia-danger text-white hover:bg-hestia-danger/90"
-            >
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDeleteDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title="Delete this task?"
+        description="This action cannot be undone."
+        onConfirm={onDelete}
+      />
 
-      <AlertDialog
+      <ConfirmDeleteDialog
         open={pendingConvert !== null}
         onOpenChange={(open) => {
           if (!open) setPendingConvert(null);
         }}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Change task type?</AlertDialogTitle>
-            <AlertDialogDescription>
-              {pendingConvert === "text"
-                ? "Switching to a free-text task will remove all answer options and correctness settings. This cannot be undone."
-                : "Switching from a free-text task to a choice task will discard the current free-text answer setup. This cannot be undone."}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                if (pendingConvert) onConvert(pendingConvert);
-                setPendingConvert(null);
-              }}
-              className="bg-hestia-danger text-white hover:bg-hestia-danger/90"
-            >
-              Change type
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        title="Change task type?"
+        description={
+          pendingConvert === "text"
+            ? "Switching to a free-text task will remove all answer options and correctness settings. This cannot be undone."
+            : "Switching from a free-text task to a choice task will discard the current free-text answer setup. This cannot be undone."
+        }
+        onConfirm={() => {
+          if (pendingConvert) onConvert(pendingConvert);
+          setPendingConvert(null);
+        }}
+        confirmLabel="Change type"
+      />
     </>
   );
 };
 
-const TaskActionsMenu = ({
-  task,
-  onDuplicate,
-  onConvert,
-  setConfirmDelete,
-}: {
-  task: Task;
-  onDuplicate: () => void;
-  onConvert: (toType: TaskType) => void;
-  setConfirmDelete: (v: boolean) => void;
-}) => (
-  <DropdownMenu>
-    <DropdownMenuTrigger
-      aria-label="Task actions"
-      className="rounded-hestia-sm p-1 text-hestia-text-muted hover:bg-hestia-primary-muted/40 hover:text-hestia-text"
-    >
-      <MoreVertical size={16} />
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end">
-      <DropdownMenuItem onClick={onDuplicate}>Duplicate</DropdownMenuItem>
-      <DropdownMenuSub>
-        <DropdownMenuSubTrigger>Convert type</DropdownMenuSubTrigger>
-        <DropdownMenuPortal>
-          <DropdownMenuSubContent>
-            {TASK_TYPES.filter((tp) => tp !== task.type).map((tp) => (
-              <DropdownMenuItem key={tp} onClick={() => onConvert(tp)}>
-                {TASK_TYPE_LABELS[tp]}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuSubContent>
-        </DropdownMenuPortal>
-      </DropdownMenuSub>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem
-        onClick={() => setConfirmDelete(true)}
-        className="text-hestia-danger focus:text-hestia-danger"
-      >
-        Delete
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-);
-
 const WarningBanner = ({ text }: { text: string }) => (
   <div className="mt-hestia-3 flex items-start gap-2 rounded-hestia-sm border-l-4 border-hestia-warning bg-hestia-warning/10 px-hestia-3 py-2 text-xs text-hestia-text">
     <AlertTriangle size={14} className="mt-0.5 text-hestia-warning shrink-0" />
diff --git a/apps/examlense/frontend/src/pages/exam-edit/use-exam-mutations.ts b/apps/examlense/frontend/src/pages/exam-edit/use-exam-mutations.ts
new file mode 100644
index 0000000..3b8f12d
--- /dev/null
+++ b/apps/examlense/frontend/src/pages/exam-edit/use-exam-mutations.ts
@@ -0,0 +1,377 @@
+import { type MutableRefObject } from "react";
+import { useQueryClient, type QueryKey } from "@tanstack/react-query";
+import {
+  patchExam as apiPatchExam,
+  patchTask as apiPatchTask,
+  createTask as apiCreateTask,
+  deleteTask as apiDeleteTask,
+  patchSection as apiPatchSection,
+  createSection as apiCreateSection,
+  deleteSection as apiDeleteSection,
+  patchBlock as apiPatchBlock,
+  createBlock as apiCreateBlock,
+  deleteBlock as apiDeleteBlock,
+  deleteTasksBySection,
+  deleteBlocksBySection,
+} from "@/lib/api/api-client";
+import { examKey, tasksKey } from "@/hooks/data/use-exam";
+import { sectionsKey, blocksKey } from "@/hooks/data/use-sections";
+import { useSaveStatus } from "@/pages/exam-edit/components/SaveStatus";
+import { useSectionConfirmations } from "@/hooks/data/use-section-confirmations";
+import type {
+  BlockItem,
+  Exam,
+  Section,
+  SectionBlock,
+  Task,
+  TaskType,
+} from "@/lib/exam/exam-helpers";
+
+interface ExamMutationDeps {
+  exam: Exam | undefined;
+  tasks: Task[] | undefined;
+  blocks: SectionBlock[] | undefined;
+  sections: Section[] | undefined;
+  /** Latest section-confirmation API (read via a ref so edit closures stay stable). */
+  confirmApiRef: MutableRefObject<ReturnType<typeof useSectionConfirmations>>;
+  /** Flag an Add action so the newly created block auto-expands (see ExamEdit). */
+  markPendingAdd: () => void;
+}
+
+/**
+ * The editor's CRUD/mutation layer, extracted from ExamEdit. Every mutator
+ * shares the same envelope — optionally `unconfirmIfNeeded` → `setSaving()` →
+ * optimistic cache write → `try { await api; setSaved() } catch { setError() }`.
+ * A handful of paths deliberately deviate (add-paths invalidate instead of
+ * optimistically writing; `patchExam` skips unconfirm; `patchSection` skips it
+ * when toggling `confirmed_at`); those keep their bespoke bodies.
+ */
+export function useExamMutations(
+  id: string | undefined,
+  { exam, tasks, blocks, sections, confirmApiRef, markPendingAdd }: ExamMutationDeps,
+) {
+  const qc = useQueryClient();
+  const { setSaving, setSaved, setError } = useSaveStatus();
+
+  const sectionIdForTask = (taskId: string): string | null => {
+    const t = (tasks ?? []).find((tk) => tk.id === taskId);
+    return t?.section_id ?? null;
+  };
+
+  const sectionIdForBlock = (blockId: string): string | null => {
+    const b = (blocks ?? []).find((bk) => bk.id === blockId);
+    return b?.section_id ?? null;
+  };
+
+  // Unconfirm the given section (if confirmed) before performing an edit.
+  // Centralised so every mutation path keeps the confirmation/answer state
+  // honest: confirmation is a commit point, any edit reopens it.
+  const unconfirmIfNeeded = async (sectionId: string | null | undefined) => {
+    if (sectionId && confirmApiRef.current.isConfirmed(sectionId)) {
+      await confirmApiRef.current.unconfirm(sectionId);
+    }
+  };
+
+  // The plain envelope: flip the save indicator, run the work, settle status.
+  const withSaveStatus = async (fn: () => Promise<void>) => {
+    setSaving();
+    try {
+      await fn();
+      setSaved();
+    } catch {
+      setError();
+    }
+  };
+
+  // Optimistically map over a cached list query.
+  const optimisticListUpdate = <T,>(
+    key: QueryKey,
+    updater: (prev: T[]) => T[],
+  ) => {
+    qc.setQueryData<T[]>(key, (prev) => updater(prev ?? []));
+  };
+
+  const patchExam = async (patch: Partial<Exam>) => {
+    if (!id || !exam) return;
+    await withSaveStatus(async () => {
+      qc.setQueryData(examKey(id), { ...exam, ...patch });
+      await apiPatchExam(id, patch as Record<string, unknown>);
+    });
+  };
+
+  const patchTask = async (taskId: string, patch: Partial<Task>) => {
+    if (!id) return;
+    await unconfirmIfNeeded(sectionIdForTask(taskId));
+    await withSaveStatus(async () => {
+      optimisticListUpdate<Task>(tasksKey(id), (prev) =>
+        prev.map((t) => (t.id === taskId ? { ...t, ...patch } : t)),
+      );
+      await apiPatchTask(taskId, patch as Record<string, unknown>);
+    });
+  };
+
+  const addTask = async (
+    type: TaskType,
+    afterPosition: number,
+    sectionId: string | null,
+  ) => {
+    if (!id) return;
+    await unconfirmIfNeeded(sectionId);
+    setSaving();
+    markPendingAdd();
+    try {
+      await apiCreateTask({
+        exam_id: id,
+        position: afterPosition + 1,
+        type,
+        section_id: sectionId,
+        options:
+          type === "text"
+            ? null
+            : [
+                { id: crypto.randomUUID(), text: "", is_correct: false },
+                { id: crypto.randomUUID(), text: "", is_correct: false },
+              ],
+      });
+      setSaved();
+      qc.invalidateQueries({ queryKey: tasksKey(id) });
+    } catch {
+      setError();
+    }
+  };
+
+  const deleteTask = async (taskId: string) => {
+    if (!id) return;
+    await unconfirmIfNeeded(sectionIdForTask(taskId));
+    await withSaveStatus(async () => {
+      optimisticListUpdate<Task>(tasksKey(id), (prev) =>
+        prev.filter((t) => t.id !== taskId),
+      );
+      await apiDeleteTask(taskId);
+    });
+  };
+
+  const duplicateTask = async (task: Task) => {
+    if (!id) return;
+    await unconfirmIfNeeded(task.section_id);
+    setSaving();
+    try {
+      await apiCreateTask({
+        exam_id: id,
+        position: task.position + 1,
+        type: task.type,
+        prompt: task.prompt,
+        options: task.options ?? null,
+        reference_answer: task.reference_answer,
+        section: task.section,
+        points: task.points,
+        section_id: task.section_id,
+      });
+      setSaved();
+      qc.invalidateQueries({ queryKey: tasksKey(id) });
+    } catch {
+      setError();
+    }
+  };
+
+  const patchSection = async (sectionId: string, patch: Partial<Section>) => {
+    if (!id) return;
+    // Confirmation toggles flow through useSectionConfirmations and bypass
+    // this helper, so any patchSection call here is a user-initiated edit
+    // and should reopen the section.
+    if (!("confirmed_at" in patch)) {
+      await unconfirmIfNeeded(sectionId);
+    }
+    await withSaveStatus(async () => {
+      optimisticListUpdate<Section>(sectionsKey(id), (prev) =>
+        prev.map((s) => (s.id === sectionId ? { ...s, ...patch } : s)),
+      );
+      await apiPatchSection(sectionId, patch as Record<string, unknown>);
+    });
+  };
+
+  const patchBlock = async (blockId: string, patch: Partial<SectionBlock>) => {
+    if (!id) return;
+    await unconfirmIfNeeded(sectionIdForBlock(blockId));
+    await withSaveStatus(async () => {
+      optimisticListUpdate<SectionBlock>(blocksKey(id), (prev) =>
+        prev.map((b) => (b.id === blockId ? { ...b, ...patch } : b)),
+      );
+      await apiPatchBlock(blockId, patch as Record<string, unknown>);
+    });
+  };
+
+  const addContextBlock = async (afterPosition: number, sectionId: string) => {
+    if (!id) return;
+    await unconfirmIfNeeded(sectionId);
+    setSaving();
+    markPendingAdd();
+    try {
+      await apiCreateBlock({
+        exam_id: id,
+        section_id: sectionId,
+        position: afterPosition + 1,
+        content: "",
+      });
+      setSaved();
+      qc.invalidateQueries({ queryKey: blocksKey(id) });
+      qc.invalidateQueries({ queryKey: tasksKey(id) });
+    } catch (error) {
+      console.error("addContextBlock", error);
+      setError();
+    }
+  };
+
+  const addFigureBlock = async (afterPosition: number, sectionId: string) => {
+    if (!id) return;
+    await unconfirmIfNeeded(sectionId);
+    setSaving();
+    markPendingAdd();
+    try {
+      await apiCreateBlock({
+        exam_id: id,
+        section_id: sectionId,
+        position: afterPosition + 1,
+        content: "",
+        kind: "figure",
+      });
+      setSaved();
+      qc.invalidateQueries({ queryKey: blocksKey(id) });
+      qc.invalidateQueries({ queryKey: tasksKey(id) });
+    } catch {
+      setError();
+    }
+  };
+
+  const deleteBlock = async (blockId: string) => {
+    if (!id) return;
+    await unconfirmIfNeeded(sectionIdForBlock(blockId));
+    await withSaveStatus(async () => {
+      optimisticListUpdate<SectionBlock>(blocksKey(id), (prev) =>
+        prev.filter((b) => b.id !== blockId),
+      );
+      await apiDeleteBlock(blockId);
+    });
+  };
+
+  const addSection = async (afterPosition?: number) => {
+    if (!id) return;
+    setSaving();
+    // The backend's create-section is transactional and shifts later sections
+    // down itself, so we just hand it the target position (append falls past
+    // the end, where nothing needs shifting).
+    const position =
+      afterPosition != null ? afterPosition + 1 : (sections?.length ?? 0) + 1;
+    try {
+      await apiCreateSection({ exam_id: id, name: "", position });
+      setSaved();
+      qc.invalidateQueries({ queryKey: sectionsKey(id) });
+    } catch {
+      setError();
+    }
+  };
+
+  const deleteSection = async (sectionId: string) => {
+    if (!id) return;
+    setSaving();
+    // Delete tasks, blocks, then the section itself
+    try {
+      await deleteTasksBySection(id, sectionId);
+      await deleteBlocksBySection(id, sectionId);
+      await apiDeleteSection(sectionId);
+      setSaved();
+      qc.invalidateQueries({ queryKey: sectionsKey(id) });
+      qc.invalidateQueries({ queryKey: tasksKey(id) });
+      qc.invalidateQueries({ queryKey: blocksKey(id) });
+    } catch {
+      setError();
+    }
+  };
+
+  /**
+   * Persist a new ordering of items within a section. Assigns sequential
+   * positions (0, 1, 2, ...) and writes only the rows whose position changed.
+   * Cache is updated optimistically so the UI does not flicker.
+   */
+  const persistReorder = async (newOrder: BlockItem[]) => {
+    if (!id) return;
+    // Items in a single reorder all belong to the same section (the call
+    // originates from one section's DndContext). Take the section id from
+    // the first item that exposes one and reopen its confirmation.
+    const firstWithSection = newOrder.find(
+      (it) =>
+        (it.kind === "task" && it.task.section_id) ||
+        it.kind === "context" ||
+        it.kind === "figure",
+    );
+    const reorderSectionId =
+      firstWithSection?.kind === "task"
+        ? firstWithSection.task.section_id
+        : firstWithSection?.kind === "context" || firstWithSection?.kind === "figure"
+          ? firstWithSection.block.section_id
+          : null;
+    await unconfirmIfNeeded(reorderSectionId);
+    setSaving();
+
+    const taskUpdates: Array<{ id: string; position: number }> = [];
+    const blockUpdates: Array<{ id: string; position: number }> = [];
+
+    newOrder.forEach((item, idx) => {
+      if (item.kind === "task" && item.task.position !== idx) {
+        taskUpdates.push({ id: item.task.id, position: idx });
+      }
+      if (
+        (item.kind === "context" || item.kind === "figure") &&
+        item.block.position !== idx
+      ) {
+        blockUpdates.push({ id: item.block.id, position: idx });
+      }
+    });
+
+    // Optimistic cache update
+    if (taskUpdates.length > 0) {
+      const map = new Map(taskUpdates.map((u) => [u.id, u.position]));
+      qc.setQueryData<Task[]>(tasksKey(id), (prev) =>
+        (prev ?? []).map((t) =>
+          map.has(t.id) ? { ...t, position: map.get(t.id)! } : t,
+        ),
+      );
+    }
+    if (blockUpdates.length > 0) {
+      const map = new Map(blockUpdates.map((u) => [u.id, u.position]));
+      qc.setQueryData<SectionBlock[]>(blocksKey(id), (prev) =>
+        (prev ?? []).map((b) =>
+          map.has(b.id) ? { ...b, position: map.get(b.id)! } : b,
+        ),
+      );
+    }
+
+    try {
+      await Promise.all([
+        ...taskUpdates.map((u) => apiPatchTask(u.id, { position: u.position })),
+        ...blockUpdates.map((u) => apiPatchBlock(u.id, { position: u.position })),
+      ]);
+      setSaved();
+    } catch {
+      setError();
+      qc.invalidateQueries({ queryKey: tasksKey(id) });
+      qc.invalidateQueries({ queryKey: blocksKey(id) });
+    }
+  };
+
+  return {
+    patchExam,
+    patchTask,
+    addTask,
+    deleteTask,
+    duplicateTask,
+    patchSection,
+    patchBlock,
+    addContextBlock,
+    addFigureBlock,
+    deleteBlock,
+    addSection,
+    deleteSection,
+    persistReorder,
+  };
+}
diff --git a/apps/examlense/frontend/src/pages/exam-grading/GradeRoute.tsx b/apps/examlense/frontend/src/pages/exam-grading/GradeRoute.tsx
index 3bdab24..2f3473e 100644
--- a/apps/examlense/frontend/src/pages/exam-grading/GradeRoute.tsx
+++ b/apps/examlense/frontend/src/pages/exam-grading/GradeRoute.tsx
@@ -1,29 +1,22 @@
-import { useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useExam } from "@/hooks/data/use-exam";
-import { examModePath, examModeSlug } from "@/lib/exam/exam-helpers";
 import { GradingView } from "@/pages/exam-grading/GradingView";
 import { EditorLoadingView } from "@/components/shared/exam-content/EditorLoadingView";
+import { examModeRedirect } from "@/components/shared/ExamModeRedirect";
 
 const GradeRoute = () => {
   const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
   const { data: exam, isLoading } = useExam(id);
 
+  if (isLoading) return <EditorLoadingView />;
+  if (!exam) return null;
   // Grading is only valid while the exam's status is `grading`. Any other status
   // redirects to that status's canonical mode — visiting /grade never moves the
   // exam into grading (a finished exam is re-opened only via an explicit action).
-  useEffect(() => {
-    if (!isLoading && exam && examModeSlug(exam.status) !== "grade") {
-      navigate(examModePath(exam.id, exam.status), { replace: true });
-    }
-  }, [exam, isLoading, navigate]);
-
-  if (isLoading) return <EditorLoadingView />;
-  if (!exam) return null;
-  if (examModeSlug(exam.status) !== "grade") return null;
+  const redirect = examModeRedirect(exam, "grade");
+  if (redirect) return redirect;
 
   return <GradingView examId={exam.id} />;
 };
 
-export default GradeRoute;
\ No newline at end of file
+export default GradeRoute;
diff --git a/apps/examlense/frontend/src/pages/exam-grading/GradingView.tsx b/apps/examlense/frontend/src/pages/exam-grading/GradingView.tsx
index edd6a57..c81c9c9 100644
--- a/apps/examlense/frontend/src/pages/exam-grading/GradingView.tsx
+++ b/apps/examlense/frontend/src/pages/exam-grading/GradingView.tsx
@@ -3,12 +3,12 @@ import { useNavigate } from "react-router-dom";
 import { ClipboardCheck, CheckCircle2 } from "lucide-react";
 import { patchExam } from "@/lib/api/api-client";
 import { useQueryClient } from "@tanstack/react-query";
-import { useExam, useTasks, tasksKey } from "@/hooks/data/use-exam";
-import { useSections, useSectionBlocks } from "@/hooks/data/use-sections";
+import { tasksKey } from "@/hooks/data/use-exam";
+import { useExamBundle } from "@/hooks/data/use-exam-bundle";
 import { useTaskAnswers } from "@/hooks/data/use-task-answers";
 import { useTaskGrades } from "@/hooks/data/use-task-grades";
 import { useExamLearningGoals, examLearningGoalsKey } from "@/hooks/data/use-learning-goals";
-import { subscribeExam } from "@/lib/api/sse";
+import { useExamRealtime } from "@/hooks/data/use-exam-realtime";
 import type { LearningGoalResponse } from "@/lib/learning-goals/learning-goals";
 import { type TaskGoalDisplay } from "@/components/shared/exam-content/read-only/ReadOnlyTaskCard";
 import { ReadOnlyQuestionBlock } from "@/pages/exam-grading/components/ReadOnlyQuestionBlock";
@@ -28,14 +28,11 @@ import {
   SectionCarousel,
   type CarouselSlide,
 } from "@/components/shared/exam-content/SectionCarousel";
+import { type Task } from "@/lib/exam/exam-helpers";
 import {
-  figureLabelsForBlocks,
-  letterLabel,
-  mergeSectionItems,
-  type Section,
-  type SectionBlock,
-  type Task,
-} from "@/lib/exam/exam-helpers";
+  useSectionGroups,
+  useCurrentSectionId,
+} from "@/hooks/ui/use-section-groups";
 import {
   effectiveScore,
   examTotals,
@@ -62,24 +59,19 @@ interface Props {
 export const GradingView = ({ examId }: Props) => {
   const navigate = useNavigate();
   const qc = useQueryClient();
-  const { data: exam, isLoading: examLoading } = useExam(examId);
-  const { data: tasks, isLoading: tasksLoading } = useTasks(examId);
-  const { data: sections, isLoading: sectionsLoading } = useSections(examId);
-  const { data: blocks, isLoading: blocksLoading } = useSectionBlocks(examId);
+  const { exam, tasks, sections, blocks, isLoading } = useExamBundle(examId);
   const { data: answers } = useTaskAnswers(examId);
   const { data: grades } = useTaskGrades(examId);
   const { data: learningGoals, isError: goalsError } = useExamLearningGoals(examId);
 
   // Learning goals can finish generating while this view is open — refresh
   // the tasks (goal ids) and resolved goals on the backend's `tasks` event.
-  useEffect(() => {
-    return subscribeExam(examId, {
-      onTasks: () => {
-        qc.invalidateQueries({ queryKey: tasksKey(examId) });
-        qc.invalidateQueries({ queryKey: examLearningGoalsKey(examId) });
-      },
-    });
-  }, [examId, qc]);
+  useExamRealtime(examId, {
+    onTasks: () => {
+      qc.invalidateQueries({ queryKey: tasksKey(examId) });
+      qc.invalidateQueries({ queryKey: examLearningGoalsKey(examId) });
+    },
+  });
 
   const goalsById = useMemo(() => {
     const m = new Map<number, LearningGoalResponse>();
@@ -156,60 +148,15 @@ export const GradingView = ({ examId }: Props) => {
     }
   };
 
-  const grouped = useMemo(() => {
-    const sortedSections = (sections ?? []).slice().sort((a, b) => a.position - b.position);
-    const allSections: (Section | null)[] = [...sortedSections, null];
-    const taskList = tasks ?? [];
-    const blockList = blocks ?? [];
-    const sectionIndexById = new Map<string, number>();
-    sortedSections.forEach((s, i) => sectionIndexById.set(s.id, i));
-    return allSections
-      .map((sec) => {
-        const sId = sec?.id ?? null;
-        const sectionTasks = taskList.filter((tk) => (tk.section_id ?? null) === sId);
-        const sectionBlocks: SectionBlock[] = sec
-          ? blockList.filter((b) => b.section_id === sec.id)
-          : [];
-        const slug = sec
-          ? `section-${(sectionIndexById.get(sec.id) ?? 0) + 1}`
-          : "section-unassigned";
-        return {
-          section: sec,
-          tasks: sectionTasks,
-          items: mergeSectionItems(sectionTasks, sectionBlocks),
-          slug,
-        };
-      })
-      .filter((g) => g.items.length > 0);
-  }, [tasks, sections, blocks]);
-
-  const taskLetterById = useMemo(() => {
-    const m = new Map<string, string>();
-    grouped.forEach((g) => {
-      g.tasks
-        .slice()
-        .sort((a, b) => a.position - b.position)
-        .forEach((task, i) => m.set(task.id, letterLabel(i)));
-    });
-    return m;
-  }, [grouped]);
-
-  const figureLabels = useMemo(
-    () => figureLabelsForBlocks(sections, blocks),
-    [sections, blocks],
+  // Group tasks + blocks by section (grading drops sections with no items).
+  const { grouped, taskLetterById, figureLabels } = useSectionGroups(
+    sections,
+    tasks,
+    blocks,
+    { includeEmpty: false },
   );
 
-  const [currentId, setCurrentId] = useState(() => {
-    if (typeof window === "undefined") return "";
-    return window.location.hash.replace(/^#/, "");
-  });
-
-  useEffect(() => {
-    const validIds = new Set(grouped.map((g) => g.slug));
-    if (!currentId || !validIds.has(currentId)) {
-      setCurrentId(grouped[0]?.slug ?? "");
-    }
-  }, [grouped, currentId]);
+  const [currentId, setCurrentId] = useCurrentSectionId(grouped);
 
   const sectionEntries = useGradingSectionEntries(
     sections ?? [],
@@ -294,7 +241,7 @@ export const GradingView = ({ examId }: Props) => {
     };
   });
 
-  if (examLoading || tasksLoading || sectionsLoading || blocksLoading) {
+  if (isLoading) {
     return <EditorLoadingView />;
   }
   if (!exam) return null;
diff --git a/apps/examlense/frontend/src/pages/exam-grading/components/TaskGradingPanel.tsx b/apps/examlense/frontend/src/pages/exam-grading/components/TaskGradingPanel.tsx
index 5ddf669..3d61c5f 100644
--- a/apps/examlense/frontend/src/pages/exam-grading/components/TaskGradingPanel.tsx
+++ b/apps/examlense/frontend/src/pages/exam-grading/components/TaskGradingPanel.tsx
@@ -10,14 +10,10 @@ import { autoGradeChoiceTask, type TaskAnswer, type TaskGrade } from "@/lib/grad
 import { MarkdownView } from "@/components/shared/exam-content/MarkdownView";
 import { BlockCard } from "@/components/shared/exam-content/BlockCard";
 import type { Task } from "@/lib/exam/exam-helpers";
-import { cn } from "@/lib/utils/utils";
+import { cn, preventNumberWheelChange } from "@/lib/utils/utils";
 import { solveTask } from "@/lib/api/api-solve";
 import { GRADE_SOURCE_LABELS } from "@/lib/exam/labels";
 
-const preventNumberWheelChange = (event: React.WheelEvent<HTMLInputElement>) => {
-  event.currentTarget.blur();
-};
-
 /** Grading increment shared by the slider and the number input. */
 const SCORE_STEP = 0.5;
 /** Only draw slider tick marks when the count stays readable. */
diff --git a/apps/examlense/frontend/src/pages/exam-results/ExamResults.tsx b/apps/examlense/frontend/src/pages/exam-results/ExamResults.tsx
index 37146c6..50aa40f 100644
--- a/apps/examlense/frontend/src/pages/exam-results/ExamResults.tsx
+++ b/apps/examlense/frontend/src/pages/exam-results/ExamResults.tsx
@@ -1,10 +1,10 @@
 import { useMemo, useState } from "react";
-import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useQueryClient } from "@tanstack/react-query";
 import { BarChart3, CheckCircle2, GraduationCap, ListChecks, PencilLine, Table2 } from "lucide-react";
-import { useExam, useTasks, examKey } from "@/hooks/data/use-exam";
+import { examKey } from "@/hooks/data/use-exam";
+import { useExamBundle } from "@/hooks/data/use-exam-bundle";
 import { patchExam } from "@/lib/api/api-client";
-import { useSections, useSectionBlocks } from "@/hooks/data/use-sections";
 import { useTaskAnswers } from "@/hooks/data/use-task-answers";
 import { useTaskGrades } from "@/hooks/data/use-task-grades";
 import { EditorLoadingView } from "@/components/shared/exam-content/EditorLoadingView";
@@ -15,6 +15,7 @@ import { TaskBreakdownTable } from "@/pages/exam-results/components/TaskBreakdow
 import { TaskScoreBarChart } from "@/pages/exam-results/components/TaskScoreBarChart";
 import { LearningGoalsCard } from "@/pages/exam-results/components/LearningGoalsCard";
 import { AllTasksList } from "@/pages/exam-results/components/AllTasksList";
+import { ScoreBar } from "@/pages/exam-results/components/ScoreBar";
 import {
   ResultsSidebar,
   type ResultsViewItem,
@@ -28,7 +29,8 @@ import {
   type TaskAnswer,
   type TaskGrade,
 } from "@/lib/grading/grading";
-import { examModePath, examModeSlug, letterLabel } from "@/lib/exam/exam-helpers";
+import { letterLabel } from "@/lib/exam/exam-helpers";
+import { examModeRedirect } from "@/components/shared/ExamModeRedirect";
 
 type ResultView = "overview" | "learningGoals" | "details" | "allTasks";
 
@@ -43,10 +45,7 @@ const ExamResults = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const qc = useQueryClient();
-  const { data: exam, isLoading: examLoading } = useExam(id);
-  const { data: tasks, isLoading: tasksLoading } = useTasks(id!);
-  const { data: sections, isLoading: sectionsLoading } = useSections(id!);
-  const { data: blocks } = useSectionBlocks(id!);
+  const { exam, tasks, sections, blocks, isLoading } = useExamBundle(id);
   const { data: answers } = useTaskAnswers(id!);
   const { data: grades } = useTaskGrades(id!);
 
@@ -86,13 +85,12 @@ const ExamResults = () => {
     return m;
   }, [tasks, sections]);
 
-  if (examLoading || tasksLoading || sectionsLoading) return <EditorLoadingView />;
+  if (isLoading) return <EditorLoadingView />;
   if (!exam) return null;
   // Results are only valid for a finished exam; other statuses redirect to their
   // canonical mode rather than showing (potentially incomplete) final results.
-  if (examModeSlug(exam.status) !== "results") {
-    return <Navigate to={examModePath(exam.id, exam.status)} replace />;
-  }
+  const redirect = examModeRedirect(exam, "results");
+  if (redirect) return redirect;
 
   const pct = totals.max > 0 ? (totals.earned / totals.max) * 100 : 0;
 
@@ -219,12 +217,7 @@ const ExamResults = () => {
               {totals.earned}
               <span className="text-hestia-text-muted"> / {totals.max}</span>
             </span>
-            <div className="hidden h-1.5 w-32 overflow-hidden rounded-full bg-hestia-border/40 sm:block">
-              <div
-                className="h-full rounded-full bg-hestia-primary transition-all"
-                style={{ width: `${pct}%` }}
-              />
-            </div>
+            <ScoreBar pct={pct} className="hidden w-32 sm:block" />
           </div>
         }
         right={<ChromeUtilityCluster />}
diff --git a/apps/examlense/frontend/src/pages/exam-results/components/AllTasksList.tsx b/apps/examlense/frontend/src/pages/exam-results/components/AllTasksList.tsx
index ed81dd2..0ccf5d6 100644
--- a/apps/examlense/frontend/src/pages/exam-results/components/AllTasksList.tsx
+++ b/apps/examlense/frontend/src/pages/exam-results/components/AllTasksList.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { ReadOnlyContextBlock } from "@/components/shared/exam-content/read-only/ReadOnlyContextBlock";
 import { ReadOnlyFigureBlock } from "@/components/shared/exam-content/read-only/ReadOnlyFigureBlock";
 import { ReadOnlyTaskCard } from "@/components/shared/exam-content/read-only/ReadOnlyTaskCard";
@@ -22,11 +22,11 @@ import {
 } from "@/lib/exam/exam-helpers";
 import {
   effectiveScore,
+  scoreRollup,
   type TaskAnswer,
   type TaskGrade,
 } from "@/lib/grading/grading";
-import { SCORE_FILL_CLASS, scoreTier } from "@/lib/grading/score-color";
-import { cn } from "@/lib/utils/utils";
+import { ScoreBar } from "./ScoreBar";
 
 interface Props {
   tasks: Task[];
@@ -63,11 +63,7 @@ export const AllTasksList = ({
         const title =
           sec?.name?.trim() ||
           (sec ? "Untitled section" : "Unassigned tasks");
-        const earned = secTasks.reduce((sum, tk) => {
-          const eff = effectiveScore(tk, gradesById.get(tk.id), answersById.get(tk.id));
-          return sum + (eff.score ?? 0);
-        }, 0);
-        const max = secTasks.reduce((sum, tk) => sum + (tk.points ?? 0), 0);
+        const { earned, max } = scoreRollup(secTasks, gradesById, answersById);
         return {
           slug,
           title,
@@ -112,12 +108,12 @@ export const AllTasksList = ({
     if (typeof window === "undefined") return "";
     return window.location.hash.replace(/^#/, "");
   });
-  useEffect(() => {
-    const validIds = new Set(grouped.map((g) => g.slug));
-    if (!currentSlug || !validIds.has(currentSlug)) {
-      setCurrentSlug(grouped[0]?.slug ?? "");
-    }
-  }, [grouped, currentSlug]);
+  // Resolve the effective section during render rather than syncing state via an
+  // effect: fall back to the first section whenever the stored slug is empty or
+  // points at a section that no longer exists.
+  const activeSlug = grouped.some((g) => g.slug === currentSlug)
+    ? currentSlug
+    : grouped[0]?.slug ?? "";
 
   const slides: CarouselSlide[] = grouped.map((g) => {
     const letterById = new Map<string, string>();
@@ -217,15 +213,7 @@ export const AllTasksList = ({
                         {maxPoints}
                       </span>
                     </div>
-                    <div className="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-hestia-border/40">
-                      <div
-                        className={cn(
-                          "h-full rounded-full transition-all",
-                          SCORE_FILL_CLASS[scoreTier(pct)],
-                        )}
-                        style={{ width: `${Math.round(pct * 100)}%` }}
-                      />
-                    </div>
+                    <ScoreBar pct={pct * 100} tone="tier" className="mt-1" />
                   </div>
                 </div>
               );
@@ -258,7 +246,7 @@ export const AllTasksList = ({
     <div className="flex min-h-0 min-w-0 flex-1">
       <SectionSidebar
         entries={sectionEntries}
-        currentSectionId={currentSlug}
+        currentSectionId={activeSlug}
         onSelectSection={setCurrentSlug}
       />
       <div className="relative flex min-w-0 flex-1 flex-col">
@@ -266,7 +254,7 @@ export const AllTasksList = ({
           <div className="mx-auto w-full max-w-[900px] px-hestia-6 pb-hestia-8 pt-hestia-5">
             <SectionCarousel
               slides={slides}
-              currentId={currentSlug}
+              currentId={activeSlug}
               onChange={setCurrentSlug}
             />
           </div>
diff --git a/apps/examlense/frontend/src/pages/exam-results/components/ByQuestionTypeCard.tsx b/apps/examlense/frontend/src/pages/exam-results/components/ByQuestionTypeCard.tsx
index 1165c60..1c182a5 100644
--- a/apps/examlense/frontend/src/pages/exam-results/components/ByQuestionTypeCard.tsx
+++ b/apps/examlense/frontend/src/pages/exam-results/components/ByQuestionTypeCard.tsx
@@ -1,7 +1,8 @@
 import type { Task } from "@/lib/exam/exam-helpers";
 import type { TaskGrade, TaskAnswer } from "@/lib/grading/grading";
-import { effectiveScore } from "@/lib/grading/grading";
+import { formatScoreSummary, scoreRollup } from "@/lib/grading/grading";
 import { TASK_TYPE_LABELS } from "@/lib/exam/labels";
+import { RollupRow } from "./RollupRow";
 
 interface Props {
   tasks: Task[];
@@ -11,15 +12,16 @@ interface Props {
 
 export const ByQuestionTypeCard = ({ tasks, grades, answers }: Props) => {
   const types = ["single_choice", "multiple_choice", "text"] as const;
-  const rows = types.map((type) => {
-    const filtered = tasks.filter((tk) => tk.type === type);
-    const max = filtered.reduce((s, tk) => s + (tk.points ?? 0), 0);
-    const earned = filtered.reduce((s, tk) => {
-      const eff = effectiveScore(tk, grades.get(tk.id), answers.get(tk.id));
-      return s + (eff.score ?? 0);
-    }, 0);
-    return { type, count: filtered.length, earned, max };
-  }).filter((r) => r.count > 0);
+  const rows = types
+    .map((type) => ({
+      type,
+      ...scoreRollup(
+        tasks.filter((tk) => tk.type === type),
+        grades,
+        answers,
+      ),
+    }))
+    .filter((r) => r.count > 0);
 
   return (
     <div className="hestia-card">
@@ -27,30 +29,15 @@ export const ByQuestionTypeCard = ({ tasks, grades, answers }: Props) => {
         By Question Type
       </h2>
       <div className="space-y-hestia-2">
-        {rows.map((r) => {
-          const pct = r.max > 0 ? Math.round((r.earned / r.max) * 100) : 0;
-          return (
-            <div key={r.type} className="flex items-center justify-between gap-hestia-3">
-              <div className="min-w-0 flex-1">
-                <div className="flex items-baseline justify-between">
-                  <span className="text-sm font-medium text-hestia-text">
-                    {TASK_TYPE_LABELS[r.type]}
-                  </span>
-                  <span className="text-xs tabular-nums text-hestia-text-muted">
-                    {r.count} tasks · {r.earned}/{r.max} ({pct}%)
-                  </span>
-                </div>
-                <div className="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-hestia-border/40">
-                  <div
-                    className="h-full rounded-full bg-hestia-primary transition-all"
-                    style={{ width: `${pct}%` }}
-                  />
-                </div>
-              </div>
-            </div>
-          );
-        })}
+        {rows.map((r) => (
+          <RollupRow
+            key={r.type}
+            label={TASK_TYPE_LABELS[r.type]}
+            meta={formatScoreSummary(r)}
+            pct={r.pct}
+          />
+        ))}
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/apps/examlense/frontend/src/pages/exam-results/components/FiguresComparisonCard.tsx b/apps/examlense/frontend/src/pages/exam-results/components/FiguresComparisonCard.tsx
index ce8563f..4235445 100644
--- a/apps/examlense/frontend/src/pages/exam-results/components/FiguresComparisonCard.tsx
+++ b/apps/examlense/frontend/src/pages/exam-results/components/FiguresComparisonCard.tsx
@@ -1,6 +1,7 @@
 import type { Task, SectionBlock } from "@/lib/exam/exam-helpers";
 import type { TaskGrade, TaskAnswer } from "@/lib/grading/grading";
-import { effectiveScore } from "@/lib/grading/grading";
+import { formatScoreSummary, scoreRollup } from "@/lib/grading/grading";
+import { RollupRow } from "./RollupRow";
 
 interface Props {
   tasks: Task[];
@@ -18,17 +19,8 @@ export const FiguresComparisonCard = ({ tasks, blocks, grades, answers }: Props)
   const withFigures = tasks.filter((tk) => tk.section_id && sectionsWithFigures.has(tk.section_id));
   const withoutFigures = tasks.filter((tk) => !tk.section_id || !sectionsWithFigures.has(tk.section_id));
 
-  const calc = (list: Task[]) => {
-    const max = list.reduce((s, tk) => s + (tk.points ?? 0), 0);
-    const earned = list.reduce((s, tk) => {
-      const eff = effectiveScore(tk, grades.get(tk.id), answers.get(tk.id));
-      return s + (eff.score ?? 0);
-    }, 0);
-    return { count: list.length, earned, max, pct: max > 0 ? Math.round((earned / max) * 100) : 0 };
-  };
-
-  const fig = calc(withFigures);
-  const noFig = calc(withoutFigures);
+  const fig = scoreRollup(withFigures, grades, answers);
+  const noFig = scoreRollup(withoutFigures, grades, answers);
 
   if (fig.count === 0 || noFig.count === 0) return null;
 
@@ -44,24 +36,14 @@ export const FiguresComparisonCard = ({ tasks, blocks, grades, answers }: Props)
       </h2>
       <div className="space-y-hestia-2">
         {items.map((item) => (
-          <div key={item.label} className="flex items-center justify-between gap-hestia-3">
-            <div className="min-w-0 flex-1">
-              <div className="flex items-baseline justify-between">
-                <span className="text-sm font-medium text-hestia-text">{item.label}</span>
-                <span className="text-xs tabular-nums text-hestia-text-muted">
-                  {item.count} tasks · {item.earned}/{item.max} ({item.pct}%)
-                </span>
-              </div>
-              <div className="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-hestia-border/40">
-                <div
-                  className="h-full rounded-full bg-hestia-primary transition-all"
-                  style={{ width: `${item.pct}%` }}
-                />
-              </div>
-            </div>
-          </div>
+          <RollupRow
+            key={item.label}
+            label={item.label}
+            meta={formatScoreSummary(item)}
+            pct={item.pct}
+          />
         ))}
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/apps/examlense/frontend/src/pages/exam-results/components/LearningGoalsCard.tsx b/apps/examlense/frontend/src/pages/exam-results/components/LearningGoalsCard.tsx
index 6ec47f5..9474a1d 100644
--- a/apps/examlense/frontend/src/pages/exam-results/components/LearningGoalsCard.tsx
+++ b/apps/examlense/frontend/src/pages/exam-results/components/LearningGoalsCard.tsx
@@ -2,11 +2,12 @@ import { useMemo } from "react";
 import { Target } from "lucide-react";
 import type { Task } from "@/lib/exam/exam-helpers";
 import type { TaskGrade, TaskAnswer } from "@/lib/grading/grading";
-import { goalRollup, scoreRollup } from "@/lib/grading/grading";
+import { formatScoreSummary, goalRollup, scoreRollup } from "@/lib/grading/grading";
 import { Badge } from "@/components/ui/badge";
 import { useExamLearningGoals } from "@/hooks/data/use-learning-goals";
 import type { LearningGoalResponse } from "@/lib/learning-goals/learning-goals";
 import { BLOOM_LABELS, SOLO_LABELS } from "@/lib/exam/labels";
+import { ScoreBar } from "./ScoreBar";
 
 interface Props {
   tasks: Task[];
@@ -80,7 +81,7 @@ export const LearningGoalsCard = ({ tasks, grades, answers, examId }: Props) =>
                 {goal.text}
               </span>
               <span className="shrink-0 text-xs tabular-nums text-hestia-text-muted">
-                {count} tasks · {earned}/{max} ({pct}%)
+                {formatScoreSummary({ count, earned, max, pct })}
               </span>
             </div>
             <div className="mt-1 flex flex-wrap items-center gap-hestia-1">
@@ -95,12 +96,7 @@ export const LearningGoalsCard = ({ tasks, grades, answers, examId }: Props) =>
                 </Badge>
               )}
             </div>
-            <div className="mt-hestia-2 h-1.5 w-full overflow-hidden rounded-full bg-hestia-border/40">
-              <div
-                className="h-full rounded-full bg-hestia-primary transition-all"
-                style={{ width: `${pct}%` }}
-              />
-            </div>
+            <ScoreBar pct={pct} className="mt-hestia-2" />
           </div>
         ))}
 
@@ -111,7 +107,7 @@ export const LearningGoalsCard = ({ tasks, grades, answers, examId }: Props) =>
                 Unassigned tasks
               </span>
               <span className="shrink-0 text-xs tabular-nums text-hestia-text-muted">
-                {unassigned.count} tasks · {unassigned.earned}/{unassigned.max} ({unassigned.pct}%)
+                {formatScoreSummary(unassigned)}
               </span>
             </div>
           </div>
diff --git a/apps/examlense/frontend/src/pages/exam-results/components/OverallScoreCard.tsx b/apps/examlense/frontend/src/pages/exam-results/components/OverallScoreCard.tsx
deleted file mode 100644
index 9b866a7..0000000
--- a/apps/examlense/frontend/src/pages/exam-results/components/OverallScoreCard.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-interface Props {
-  earned: number;
-  max: number;
-}
-
-export const OverallScoreCard = ({ earned, max }: Props) => {
-  const pct = max > 0 ? Math.round((earned / max) * 100) : 0;
-
-  return (
-    <div className="hestia-card flex flex-col items-center gap-hestia-3 py-hestia-6">
-      <h2 className="hestia-eyebrow text-hestia-text-muted">
-        Overall Score
-      </h2>
-      <div className="relative flex h-32 w-32 items-center justify-center">
-        <svg viewBox="0 0 36 36" className="h-full w-full -rotate-90">
-          <circle
-            cx="18" cy="18" r="15.9"
-            fill="none"
-            stroke="hsl(var(--border))"
-            strokeWidth="2.5"
-          />
-          <circle
-            cx="18" cy="18" r="15.9"
-            fill="none"
-            stroke="hsl(var(--primary))"
-            strokeWidth="2.5"
-            strokeDasharray={`${pct} ${100 - pct}`}
-            strokeLinecap="round"
-            className="transition-all duration-700"
-          />
-        </svg>
-        <span className="absolute text-2xl font-bold tabular-nums text-hestia-text">
-          {pct}%
-        </span>
-      </div>
-      <p className="text-lg font-semibold tabular-nums text-hestia-text">
-        {earned} <span className="text-hestia-text-muted">/ {max}</span>
-      </p>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/apps/examlense/frontend/src/pages/exam-results/components/RollupRow.tsx b/apps/examlense/frontend/src/pages/exam-results/components/RollupRow.tsx
new file mode 100644
index 0000000..c170a22
--- /dev/null
+++ b/apps/examlense/frontend/src/pages/exam-results/components/RollupRow.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { ScoreBar } from "./ScoreBar";
+
+interface Props {
+  label: ReactNode;
+  /** Right-aligned summary text — see `formatScoreSummary`. */
+  meta: string;
+  /** Percentage 0–100 for the bar. */
+  pct: number;
+}
+
+/**
+ * One "label · summary + progress bar" row, shared by the aggregate results
+ * cards (by question type, figures vs. no figures) so their layout can't drift.
+ */
+export const RollupRow = ({ label, meta, pct }: Props) => (
+  <div className="flex items-center justify-between gap-hestia-3">
+    <div className="min-w-0 flex-1">
+      <div className="flex items-baseline justify-between">
+        <span className="text-sm font-medium text-hestia-text">{label}</span>
+        <span className="text-xs tabular-nums text-hestia-text-muted">{meta}</span>
+      </div>
+      <ScoreBar pct={pct} className="mt-1" />
+    </div>
+  </div>
+);
diff --git a/apps/examlense/frontend/src/pages/exam-results/components/ScoreBar.tsx b/apps/examlense/frontend/src/pages/exam-results/components/ScoreBar.tsx
new file mode 100644
index 0000000..b3ca60e
--- /dev/null
+++ b/apps/examlense/frontend/src/pages/exam-results/components/ScoreBar.tsx
@@ -0,0 +1,36 @@
+import { cn } from "@/lib/utils/utils";
+import { SCORE_FILL_CLASS, scoreTier } from "@/lib/grading/score-color";
+
+interface Props {
+  /** Fill percentage, 0–100. */
+  pct: number;
+  /**
+   * `primary` — solid brand fill (neutral aggregate bars).
+   * `tier` — performance color from the shared `scoreTier` thresholds.
+   */
+  tone?: "primary" | "tier";
+  /** Extra classes on the track (e.g. a width or visibility override). */
+  className?: string;
+}
+
+/**
+ * The thin track + fill progress bar used across the results dashboard. Single
+ * source so every score bar stays visually identical; `tone="tier"` routes the
+ * fill color through `lib/grading/score-color` instead of the solid brand color.
+ */
+export const ScoreBar = ({ pct, tone = "primary", className }: Props) => (
+  <div
+    className={cn(
+      "h-1.5 w-full overflow-hidden rounded-full bg-hestia-border/40",
+      className,
+    )}
+  >
+    <div
+      className={cn(
+        "h-full rounded-full transition-all",
+        tone === "tier" ? SCORE_FILL_CLASS[scoreTier(pct / 100)] : "bg-hestia-primary",
+      )}
+      style={{ width: `${pct}%` }}
+    />
+  </div>
+);
diff --git a/apps/examlense/frontend/src/pages/exam-results/components/TaskBreakdownTable.tsx b/apps/examlense/frontend/src/pages/exam-results/components/TaskBreakdownTable.tsx
index c323c75..04d0299 100644
--- a/apps/examlense/frontend/src/pages/exam-results/components/TaskBreakdownTable.tsx
+++ b/apps/examlense/frontend/src/pages/exam-results/components/TaskBreakdownTable.tsx
@@ -23,13 +23,18 @@ export const TaskBreakdownTable = ({ tasks, grades, answers, labelById }: Props)
     return tasks.map((tk) => {
       const eff = effectiveScore(tk, grades.get(tk.id), answers.get(tk.id));
       const pts = tk.points ?? 0;
+      const pct = pts > 0 ? Math.round(((eff.score ?? 0) / pts) * 100) : 0;
       return {
         id: tk.id,
         label: labelById.get(tk.id) ?? "",
         type: tk.type,
         points: pts,
         score: eff.score ?? 0,
-        pct: pts > 0 ? Math.round(((eff.score ?? 0) / pts) * 100) : 0,
+        pct,
+        // Deliberately binary (perfect / zeroed), not the 80/50 performance
+        // tiers — a per-task table flags only aced and failed tasks.
+        isPerfect: pct === 100,
+        isZeroed: pct === 0 && pts > 0,
       };
     });
   }, [tasks, grades, answers, labelById]);
@@ -81,8 +86,8 @@ export const TaskBreakdownTable = ({ tasks, grades, answers, labelById }: Props)
               key={r.id}
               className={cn(
                 "border-b border-hestia-border/50",
-                r.pct === 100 && "bg-hestia-success/5",
-                r.pct === 0 && r.points > 0 && "bg-hestia-danger/5",
+                r.isPerfect && "bg-hestia-success/5",
+                r.isZeroed && "bg-hestia-danger/5",
               )}
             >
               <td className="py-1.5 font-medium tabular-nums text-hestia-text">{r.label}</td>
@@ -91,8 +96,8 @@ export const TaskBreakdownTable = ({ tasks, grades, answers, labelById }: Props)
               <td className="py-1.5 text-right tabular-nums font-semibold text-hestia-text">{r.score}</td>
               <td className={cn(
                 "py-1.5 text-right tabular-nums font-semibold",
-                r.pct === 100 && "text-hestia-success",
-                r.pct === 0 && r.points > 0 && "text-hestia-danger",
+                r.isPerfect && "text-hestia-success",
+                r.isZeroed && "text-hestia-danger",
                 r.pct > 0 && r.pct < 100 && "text-hestia-text",
               )}>
                 {r.pct}%
diff --git a/apps/examlense/frontend/src/pages/exams/components/ExamStatusBadge.tsx b/apps/examlense/frontend/src/pages/exams/components/ExamStatusBadge.tsx
index 5cc3e4b..e035c7a 100644
--- a/apps/examlense/frontend/src/pages/exams/components/ExamStatusBadge.tsx
+++ b/apps/examlense/frontend/src/pages/exams/components/ExamStatusBadge.tsx
@@ -1,59 +1,13 @@
-import { CheckCircle2, FileText, Gavel, Loader2, Sparkles } from "lucide-react";
 import type { Exam } from "@/lib/exam/exam-helpers";
+import { examStatusMeta } from "@/lib/exam/exam-status";
 
 /**
- * Unified status badge shown on every exam card in the dashboard. Covers the
- * five user-facing statuses: Parsing, Draft, Evaluating, Grading, Finished.
- * The DB still also has `ready` (= editable draft that's ready to send) and
- * `failed` (handled separately on its own card variant); `ready` collapses
- * into "Draft" for display.
+ * Unified status badge shown on every exam row in the dashboard. Appearance and
+ * labels come from the shared `EXAM_STATUS_META` table (`lib/exam/exam-status`),
+ * where `ready` and `failed` collapse into the neutral "Draft" chip.
  */
 export const ExamStatusBadge = ({ status }: { status: Exam["status"] }) => {
-  // Map DB status -> visible badge. `ready` and any unknown future state
-  // collapse to "Draft" so the dashboard never shows a blank chip.
-  const variant = (() => {
-    switch (status) {
-      case "parsing":
-        return {
-          label: "Parsing",
-          className: "bg-hestia-primary/10 text-hestia-primary",
-          Icon: Loader2,
-          spin: true,
-        };
-      case "evaluating":
-        return {
-          label: "Evaluating",
-          className: "bg-hestia-success/10 text-hestia-success",
-          Icon: Sparkles,
-          spin: false,
-        };
-      case "grading":
-        return {
-          label: "Grading",
-          className: "bg-hestia-accent/10 text-hestia-accent",
-          Icon: Gavel,
-          spin: false,
-        };
-      case "finished":
-        return {
-          label: "Finished",
-          className: "bg-hestia-success/10 text-hestia-success",
-          Icon: CheckCircle2,
-          spin: false,
-        };
-      case "draft":
-      case "ready":
-      default:
-        return {
-          label: "Draft",
-          className: "border border-hestia-border text-hestia-text-muted",
-          Icon: FileText,
-          spin: false,
-        };
-    }
-  })();
-
-  const { Icon, label, className, spin } = variant;
+  const { Icon, label, className, spin } = examStatusMeta(status);
   const isEvaluating = status === "evaluating";
   return (
     <span
@@ -72,4 +26,4 @@ export const ExamStatusBadge = ({ status }: { status: Exam["status"] }) => {
       {label}
     </span>
   );
-};
\ No newline at end of file
+};
diff --git a/apps/examlense/frontend/src/pages/exams/components/ExamsTable.tsx b/apps/examlense/frontend/src/pages/exams/components/ExamsTable.tsx
index 09f6126..f4c1a23 100644
--- a/apps/examlense/frontend/src/pages/exams/components/ExamsTable.tsx
+++ b/apps/examlense/frontend/src/pages/exams/components/ExamsTable.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
 import type { ExamListItem } from "@/lib/api/api-client";
 import { fuzzyMatch } from "@/lib/utils/fuzzy";
 import { progressSortValue } from "@/lib/exam/exam-progress";
+import { EXAM_STATUS_META } from "@/lib/exam/exam-status";
 import {
   Table,
   TableBody,
@@ -27,17 +28,6 @@ const PAGE_SIZE = 10;
 type SortKey = "title" | "status" | "progress" | "created";
 type SortDir = "asc" | "desc";
 
-/** Lifecycle order used when sorting by Status. */
-const STATUS_RANK: Record<ExamListItem["status"], number> = {
-  parsing: 0,
-  evaluating: 1,
-  draft: 2,
-  ready: 2,
-  grading: 3,
-  finished: 4,
-  failed: 5,
-};
-
 /** Default direction when a column is first selected. */
 const DEFAULT_DIR: Record<SortKey, SortDir> = {
   title: "asc",
@@ -51,7 +41,7 @@ const compare = (a: ExamListItem, b: ExamListItem, key: SortKey): number => {
     case "title":
       return (a.title || "Untitled exam").localeCompare(b.title || "Untitled exam");
     case "status":
-      return STATUS_RANK[a.status] - STATUS_RANK[b.status];
+      return EXAM_STATUS_META[a.status].rank - EXAM_STATUS_META[b.status].rank;
     case "progress":
       return progressSortValue(a) - progressSortValue(b);
     case "created":
@@ -128,6 +118,7 @@ export const ExamsTable = ({
       setSortKey(key);
       setSortDir(DEFAULT_DIR[key]);
     }
+    setPage(1);
   };
 
   const filtered = useMemo(() => {
@@ -141,16 +132,19 @@ export const ExamsTable = ({
 
   const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
 
-  // Reset to the first page whenever the result set is re-shaped, and keep the
-  // current page in range if the filtered set shrinks.
-  useEffect(() => {
+  // Reset to the first page when the Title search (a prop) changes — adjusted
+  // during render rather than in an effect. Sort changes reset the page in
+  // `onSort`.
+  const [prevQuery, setPrevQuery] = useState(query);
+  if (query !== prevQuery) {
+    setPrevQuery(query);
     setPage(1);
-  }, [query, sortKey, sortDir]);
-  useEffect(() => {
-    setPage((p) => Math.min(p, totalPages));
-  }, [totalPages]);
+  }
 
-  const pageStart = (page - 1) * PAGE_SIZE;
+  // Clamp during render so a shrinking result set can't strand us past the last
+  // page; the stored `page` is corrected lazily rather than via an effect.
+  const safePage = Math.min(page, totalPages);
+  const pageStart = (safePage - 1) * PAGE_SIZE;
   const pageRows = filtered.slice(pageStart, pageStart + PAGE_SIZE);
 
   return (
@@ -191,19 +185,19 @@ export const ExamsTable = ({
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setPage((p) => Math.max(1, p - 1));
+                  setPage(Math.max(1, safePage - 1));
                 }}
-                className={cn(page === 1 && "pointer-events-none opacity-50")}
+                className={cn(safePage === 1 && "pointer-events-none opacity-50")}
               />
             </PaginationItem>
-            {pageItems(page, totalPages).map((item, i) => (
+            {pageItems(safePage, totalPages).map((item, i) => (
               <PaginationItem key={`${item}-${i}`}>
                 {item === "…" ? (
                   <span className="flex h-9 w-9 items-center justify-center text-hestia-text-muted">…</span>
                 ) : (
                   <PaginationLink
                     href="#"
-                    isActive={item === page}
+                    isActive={item === safePage}
                     onClick={(e) => {
                       e.preventDefault();
                       setPage(item);
@@ -219,9 +213,9 @@ export const ExamsTable = ({
                 href="#"
                 onClick={(e) => {
                   e.preventDefault();
-                  setPage((p) => Math.min(totalPages, p + 1));
+                  setPage(Math.min(totalPages, safePage + 1));
                 }}
-                className={cn(page === totalPages && "pointer-events-none opacity-50")}
+                className={cn(safePage === totalPages && "pointer-events-none opacity-50")}
               />
             </PaginationItem>
           </PaginationContent>
diff --git a/apps/examlense/frontend/src/pages/exams/start-exam/ModelPickerList.tsx b/apps/examlense/frontend/src/pages/exams/start-exam/ModelPickerList.tsx
new file mode 100644
index 0000000..f7242e3
--- /dev/null
+++ b/apps/examlense/frontend/src/pages/exams/start-exam/ModelPickerList.tsx
@@ -0,0 +1,116 @@
+import { Check } from "lucide-react";
+
+import { ModelLogo } from "@/components/shared/ModelLogo";
+import type { LlmModel } from "@/lib/exam/llm-models";
+import { MODEL_META, MODEL_ORDER } from "@/lib/exam/model-meta";
+import { cn } from "@/lib/utils/utils";
+
+interface ModelPickerListProps {
+  /** Raw catalog from `useParserModels()` / `useSolverModels()`. */
+  models: LlmModel[];
+  /** Whether a given model id is currently selected. */
+  selected: (id: string) => boolean;
+  /** Called when a model option is activated. */
+  onSelect: (id: string) => void;
+  /** Message shown when no known models are available. */
+  emptyLabel: string;
+}
+
+/**
+ * Shared model-option list for the create-exam parser (multi-select) and solver
+ * (single-select) steps. Selection-shape-agnostic: callers decide what
+ * "selected" means and what activating an option does. Filters to models with
+ * display metadata and sorts by the canonical `MODEL_ORDER`.
+ */
+export const ModelPickerList = ({
+  models,
+  selected,
+  onSelect,
+  emptyLabel,
+}: ModelPickerListProps) => {
+  const known = models
+    .filter((m) => MODEL_META[m.id])
+    .sort((a, b) => MODEL_ORDER.indexOf(a.id) - MODEL_ORDER.indexOf(b.id));
+
+  if (known.length === 0) {
+    return (
+      <p className="rounded-hestia-md border border-hestia-border bg-hestia-bg/40 px-hestia-3 py-hestia-3 text-xs text-hestia-text-muted">
+        {emptyLabel}
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid gap-hestia-2">
+      {known.map((m) => (
+        <ModelOptionButton
+          key={m.id}
+          model={m}
+          selected={selected(m.id)}
+          onSelect={() => onSelect(m.id)}
+        />
+      ))}
+    </div>
+  );
+};
+
+function ModelOptionButton({
+  model,
+  selected,
+  onSelect,
+}: {
+  model: LlmModel;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  const meta = MODEL_META[model.id] ?? {
+    provider: "Model",
+    name: model.label,
+    logoSrc: "",
+  };
+
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onSelect}
+      className={cn(
+        "group relative flex min-h-[56px] w-full items-center justify-between gap-hestia-3 rounded-hestia-md border bg-hestia-surface px-hestia-3 py-hestia-2 text-left shadow-hestia-sm transition-all hover:border-hestia-primary/60 hover:shadow-hestia-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hestia-primary focus-visible:ring-offset-2 focus-visible:ring-offset-hestia-bg",
+        selected
+          ? "border-hestia-primary bg-hestia-primary-muted/20 ring-1 ring-hestia-primary/35"
+          : "border-hestia-border",
+      )}
+    >
+      <span className="flex min-w-0 items-center gap-hestia-2">
+        <span
+          className={cn(
+            "inline-flex h-9 w-12 shrink-0 items-center justify-center rounded-hestia-md border border-hestia-border bg-hestia-bg/70 px-1.5 py-1",
+            selected ? "ring-1 ring-hestia-primary/30" : "",
+          )}
+          aria-hidden="true"
+        >
+          <ModelLogo modelId={model.id} />
+        </span>
+        <span className="block min-w-0">
+          <span className="block truncate text-sm font-semibold text-hestia-text">
+            {meta.name}
+          </span>
+          <span className="mt-0.5 block text-xs font-medium text-hestia-text-muted">
+            {meta.provider}
+          </span>
+        </span>
+      </span>
+      <span
+        className={cn(
+          "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-hestia-full border transition-colors",
+          selected
+            ? "border-hestia-primary bg-hestia-primary text-white"
+            : "border-hestia-border text-transparent group-hover:text-hestia-text-muted",
+        )}
+        aria-hidden="true"
+      >
+        <Check size={14} />
+      </span>
+    </button>
+  );
+}
diff --git a/apps/examlense/frontend/src/pages/exams/start-exam/ParserModelStep.tsx b/apps/examlense/frontend/src/pages/exams/start-exam/ParserModelStep.tsx
index f99de12..6653aa9 100644
--- a/apps/examlense/frontend/src/pages/exams/start-exam/ParserModelStep.tsx
+++ b/apps/examlense/frontend/src/pages/exams/start-exam/ParserModelStep.tsx
@@ -1,8 +1,8 @@
-import { Check, Zap } from "lucide-react";
+import { Zap } from "lucide-react";
 
 import { Switch } from "@/components/ui/switch";
 import { useParserModels } from "@/lib/api/api-models";
-import { cn } from "@/lib/utils/utils";
+import { ModelPickerList } from "./ModelPickerList";
 
 interface Props {
   selectedIds: string[];
@@ -11,54 +11,6 @@ interface Props {
   onFastModeChange: (enabled: boolean) => void;
 }
 
-const MODEL_META: Record<
-  string,
-  {
-    provider: string;
-    name: string;
-    logoSrc: string;
-  }
-> = {
-  "gemini-2.5-flash": {
-    provider: "Google",
-    name: "Gemini Flash",
-    logoSrc:
-      "https://commons.wikimedia.org/wiki/Special:Redirect/file/Google_Gemini_icon_2025.svg",
-  },
-  "claude-opus-4-8": {
-    provider: "Anthropic",
-    name: "Claude",
-    logoSrc:
-      "https://commons.wikimedia.org/wiki/Special:Redirect/file/Claude_AI_symbol.svg",
-  },
-  "gpt-5.5": {
-    provider: "OpenAI",
-    name: "GPT",
-    logoSrc:
-      "https://commons.wikimedia.org/wiki/Special:Redirect/file/OpenAI_logo_2025_%28symbol%29.svg",
-  },
-  "qwen3.6-35b-a3b": {
-    provider: "GWDG",
-    name: "Qwen 3.6",
-    logoSrc:
-      "https://commons.wikimedia.org/wiki/Special:Redirect/file/Qwen_logo.svg",
-  },
-  "mistral-large-3-675b-instruct-2512": {
-    provider: "GWDG",
-    name: "Mistral Large",
-    logoSrc:
-      "https://commons.wikimedia.org/wiki/Special:Redirect/file/Mistral_AI_logo_%282025%E2%80%93%29.svg",
-  },
-};
-
-const MODEL_ORDER = [
-  "gemini-2.5-flash",
-  "gpt-5.5",
-  "claude-opus-4-8",
-  "mistral-large-3-675b-instruct-2512",
-  "qwen3.6-35b-a3b",
-];
-
 /**
  * PDF flow step: pick one or more parser models. Each selected model parses the
  * same PDF into its own exam so the author can compare them on the dashboard.
@@ -70,9 +22,6 @@ export const ParserModelStep = ({
   onFastModeChange,
 }: Props) => {
   const { data: parserCatalog } = useParserModels();
-  const parserModels = (parserCatalog?.models ?? [])
-    .filter((m) => MODEL_META[m.id])
-    .sort((a, b) => MODEL_ORDER.indexOf(a.id) - MODEL_ORDER.indexOf(b.id));
 
   const toggle = (id: string) =>
     onChange(
@@ -103,84 +52,12 @@ export const ParserModelStep = ({
         />
       </div>
 
-      {parserModels.length === 0 ? (
-        <p className="rounded-hestia-md border border-hestia-border bg-hestia-bg/40 px-hestia-3 py-hestia-3 text-xs text-hestia-text-muted">
-          No parser models available.
-        </p>
-      ) : (
-        <div className="grid gap-hestia-2">
-          {parserModels.map((m) => {
-            const selected = selectedIds.includes(m.id);
-            const meta = MODEL_META[m.id] ?? {
-              provider: "Model",
-              name: m.label,
-              logoSrc: "",
-            };
-
-            return (
-              <button
-                key={m.id}
-                type="button"
-                aria-pressed={selected}
-                onClick={() => toggle(m.id)}
-                className={cn(
-                  "group relative flex min-h-[56px] w-full items-center justify-between gap-hestia-3 rounded-hestia-md border bg-hestia-surface px-hestia-3 py-hestia-2 text-left shadow-hestia-sm transition-all hover:border-hestia-primary/60 hover:shadow-hestia-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hestia-primary focus-visible:ring-offset-2 focus-visible:ring-offset-hestia-bg",
-                  selected
-                    ? "border-hestia-primary bg-hestia-primary-muted/20 ring-1 ring-hestia-primary/35"
-                    : "border-hestia-border",
-                )}
-              >
-                <span className="flex min-w-0 items-center gap-hestia-2">
-                  <span
-                    className={cn(
-                      "inline-flex h-9 w-12 shrink-0 items-center justify-center rounded-hestia-md border border-hestia-border bg-hestia-bg/70 px-1.5 py-1",
-                      selected ? "ring-1 ring-hestia-primary/30" : "",
-                    )}
-                    aria-hidden="true"
-                  >
-                    {meta.logoSrc ? (
-                      <img
-                        src={meta.logoSrc}
-                        alt=""
-                        className={cn(
-                          "max-h-full max-w-full object-contain",
-                          m.id === "gpt-5.5" ? "dark:brightness-0 dark:invert" : "",
-                        )}
-                        loading="lazy"
-                        referrerPolicy="no-referrer"
-                      />
-                    ) : (
-                      <span className="text-xs font-bold text-hestia-primary">
-                        {meta.name.slice(0, 1)}
-                      </span>
-                    )}
-                  </span>
-                  <span className="block min-w-0">
-                    <span className="block truncate text-sm font-semibold text-hestia-text">
-                      {meta.name}
-                    </span>
-                    <span className="mt-0.5 block text-xs font-medium text-hestia-text-muted">
-                      {meta.provider}
-                    </span>
-                  </span>
-                </span>
-                <span
-                  className={cn(
-                    "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-hestia-full border transition-colors",
-                    selected
-                      ? "border-hestia-primary bg-hestia-primary text-white"
-                      : "border-hestia-border text-transparent group-hover:text-hestia-text-muted",
-                  )}
-                  aria-hidden="true"
-                >
-                  <Check size={14} />
-                </span>
-              </button>
-            );
-          })}
-        </div>
-      )}
-
+      <ModelPickerList
+        models={parserCatalog?.models ?? []}
+        selected={(id) => selectedIds.includes(id)}
+        onSelect={toggle}
+        emptyLabel="No parser models available."
+      />
     </div>
   );
 };
diff --git a/apps/examlense/frontend/src/pages/exams/start-exam/SolverModelStep.tsx b/apps/examlense/frontend/src/pages/exams/start-exam/SolverModelStep.tsx
index d30e770..e3d9d7c 100644
--- a/apps/examlense/frontend/src/pages/exams/start-exam/SolverModelStep.tsx
+++ b/apps/examlense/frontend/src/pages/exams/start-exam/SolverModelStep.tsx
@@ -1,12 +1,5 @@
-import { Check } from "lucide-react";
-
 import { useSolverModels } from "@/lib/api/api-models";
-import { cn } from "@/lib/utils/utils";
-import { ModelLogo } from "@/components/shared/ModelLogo";
-import {
-  SOLVER_MODEL_META as MODEL_META,
-  SOLVER_MODEL_ORDER as MODEL_ORDER,
-} from "@/lib/exam/solver-model-meta";
+import { ModelPickerList } from "./ModelPickerList";
 
 interface Props {
   value: string;
@@ -19,74 +12,15 @@ interface Props {
  */
 export const SolverModelStep = ({ value, onChange }: Props) => {
   const { data: solverCatalog } = useSolverModels();
-  const solverModels = (solverCatalog?.models ?? [])
-    .filter((m) => MODEL_META[m.id])
-    .sort((a, b) => MODEL_ORDER.indexOf(a.id) - MODEL_ORDER.indexOf(b.id));
 
   return (
     <div className="space-y-hestia-2">
-      {solverModels.length === 0 ? (
-        <p className="rounded-hestia-md border border-hestia-border bg-hestia-bg/40 px-hestia-3 py-hestia-3 text-xs text-hestia-text-muted">
-          No solver models available.
-        </p>
-      ) : (
-        <div className="grid gap-hestia-2">
-          {solverModels.map((m) => {
-            const selected = value === m.id;
-            const meta = MODEL_META[m.id] ?? {
-              provider: "Model",
-              name: m.label,
-              logoSrc: "",
-            };
-
-            return (
-              <button
-                key={m.id}
-                type="button"
-                aria-pressed={selected}
-                onClick={() => onChange(m.id)}
-                className={cn(
-                  "group relative flex min-h-[56px] w-full items-center justify-between gap-hestia-3 rounded-hestia-md border bg-hestia-surface px-hestia-3 py-hestia-2 text-left shadow-hestia-sm transition-all hover:border-hestia-primary/60 hover:shadow-hestia-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hestia-primary focus-visible:ring-offset-2 focus-visible:ring-offset-hestia-bg",
-                  selected
-                    ? "border-hestia-primary bg-hestia-primary-muted/20 ring-1 ring-hestia-primary/35"
-                    : "border-hestia-border",
-                )}
-              >
-                <span className="flex min-w-0 items-center gap-hestia-2">
-                  <span
-                    className={cn(
-                      "inline-flex h-9 w-12 shrink-0 items-center justify-center rounded-hestia-md border border-hestia-border bg-hestia-bg/70 px-1.5 py-1",
-                      selected ? "ring-1 ring-hestia-primary/30" : "",
-                    )}
-                    aria-hidden="true"
-                  >
-                    <ModelLogo modelId={m.id} />
-                  </span>
-                  <span className="block min-w-0">
-                    <span className="block truncate text-sm font-semibold text-hestia-text">
-                      {meta.name}
-                    </span>
-                    <span className="mt-0.5 block text-xs font-medium text-hestia-text-muted">
-                      {meta.provider}
-                    </span>
-                  </span>
-                </span>
-                <span
-                  className={cn(
-                    "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-hestia-full border transition-colors",
-                    selected
-                      ? "border-hestia-primary bg-hestia-primary text-white"
-                      : "border-hestia-border text-transparent group-hover:text-hestia-text-muted",
-                  )}
-                  aria-hidden="true"
-                >
-                  <Check size={14} />
-                </span>
-              </button>
-            );
-          })}
-        </div>
-      )}
+      <ModelPickerList
+        models={solverCatalog?.models ?? []}
+        selected={(id) => id === value}
+        onSelect={onChange}
+        emptyLabel="No solver models available."
+      />
     </div>
   );
 };