diff --git a/CHANGELOG.md b/CHANGELOG.md
index d461102..8837bcc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,13 @@ This file records what changes **in the product** – process and session state
 ## [Unreleased]
 
 ### Added
+- Visual design for the pilot UI, implemented from the Claude Design prototype "RequestFlow A": warm
+  neutral palette with one blue accent, IBM Plex Sans/Mono (self-hosted via `@fontsource`, no
+  third-party requests), a header with company, name and role, a start page with open work, and a
+  two-column review page – fields, positions and documents on the left, the selected value with its
+  source and the decision in a sticky panel on the right. Status is always labelled (⚠ for values that
+  need attention); colours are design tokens (WCAG AA). Login and upload errors are announced as alerts;
+  after an upload the message links to the new request; invitation links can be copied.
 - Observability: structured JSON logs (pino) with IDs and codes only, correlated by the request id from web
   through worker to the AI service; `/api/health` also shows whether the AI service is reachable and how
   many jobs are waiting.
diff --git a/package.json b/package.json
index 7f1282e..25eb039 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "3.1138.0",
     "@better-auth/drizzle-adapter": "1.7.5",
+    "@fontsource/ibm-plex-mono": "5.3.0",
+    "@fontsource/ibm-plex-sans": "5.3.0",
     "better-auth": "1.7.5",
     "drizzle-orm": "0.45.3",
     "next": "16.3.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d92ecd4..cf50eae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,12 @@ importers:
       '@better-auth/drizzle-adapter':
         specifier: 1.7.5
         version: 1.7.5(@better-auth/core@1.7.5(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.2)(better-call@1.4.0(zod@4.6.5))(jose@6.2.12)(kysely@0.29.6)(nanostores@1.5.3))(@better-auth/utils@0.4.2)(drizzle-orm@0.45.3(@types/pg@8.23.1)(kysely@0.29.6)(pg@8.23.0))
+      '@fontsource/ibm-plex-mono':
+        specifier: 5.3.0
+        version: 5.3.0
+      '@fontsource/ibm-plex-sans':
+        specifier: 5.3.0
+        version: 5.3.0
       better-auth:
         specifier: 1.7.5
         version: 1.7.5(drizzle-kit@0.31.11)(drizzle-orm@0.45.3(@types/pg@8.23.1)(kysely@0.29.6)(pg@8.23.0))(next@16.3.6(@babel/core@7.29.7)(@playwright/test@1.63.0)(@types/node@24.13.6)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(pg@8.23.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(vitest@5.0.1(@types/node@24.13.6)(vite@8.3.0(@types/node@24.13.6)(esbuild@0.28.2)(tsx@4.23.15)))
@@ -813,6 +819,12 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@fontsource/ibm-plex-mono@5.3.0':
+    resolution: {integrity: sha512-eTgnZjZEGk1QtD3ZstF+Vclo2HLAni8YMy34/DxllwZvyz1lR/1RF/xTiAquOBO7MvqBx8D2Ig2WCPMVfdZu7Q==}
+
+  '@fontsource/ibm-plex-sans@5.3.0':
+    resolution: {integrity: sha512-CbE4CbbEEZJX860XyUiRpsksXIQR8Rp2XDva2VO53NJox9tVNtusrysd2x5YkUEY3ErQ66W1IiiQL8/wihhw5w==}
+
   '@humanfs/core@0.19.2':
     resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
     engines: {node: '>=18.18.0'}
@@ -3980,6 +3992,10 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@fontsource/ibm-plex-mono@5.3.0': {}
+
+  '@fontsource/ibm-plex-sans@5.3.0': {}
+
   '@humanfs/core@0.19.2':
     dependencies:
       '@humanfs/types': 0.15.0
diff --git a/src/app/_components/app-header.tsx b/src/app/_components/app-header.tsx
new file mode 100644
index 0000000..8361a87
--- /dev/null
+++ b/src/app/_components/app-header.tsx
@@ -0,0 +1,61 @@
+import Link from "next/link";
+import { unstable_rethrow } from "next/navigation";
+import { getRuntime, requestActor } from "@/app/_server/runtime";
+import { getCompany, type Actor } from "@/features/identity";
+import { logEvent } from "@/features/observability";
+import { SignOutButton } from "./auth-form";
+import { NavLink } from "./nav-link";
+
+export const ROLE_LABEL = { admin: "Administration", clerk: "Sachbearbeitung" } as const;
+
+async function signedIn(): Promise<{ actor: Actor; companyName: string | undefined } | null> {
+  try {
+    const actor = await requestActor();
+    if (!actor) return null;
+    const company = await getCompany(getRuntime().database.db, actor.companyId);
+    return { actor, companyName: company?.name };
+  } catch (error) {
+    unstable_rethrow(error); // Next.js control flow (dynamic rendering, redirects) is not a failure.
+    // The header must never take a page down (e.g. database unreachable): render no header.
+    logEvent("error", "app_header.failed", {}, { code: error instanceof Error ? error.name : "unknown" });
+    return null;
+  }
+}
+
+/** The brand mark + name – also used above the sign-in cards. */
+export function Brand({ className }: { className?: string }) {
+  return (
+    <Link href="/" className={className ? `brand ${className}` : "brand"}>
+      <span className="brand-mark" aria-hidden="true" />
+      RequestFlow
+    </Link>
+  );
+}
+
+// App shell (#52, design prototype A): only for signed-in users – sign-in pages show the brand in the
+// card instead. Navigation mirrors the server-side permissions; it hides links, it never grants access.
+export async function AppHeader() {
+  const session = await signedIn();
+  if (!session) return null;
+  const { actor, companyName } = session;
+  return (
+    <header className="app-header">
+      <div className="app-header-inner">
+        <Brand />
+        <nav className="app-nav" aria-label="Hauptnavigation">
+          <NavLink href="/requests">Anfragen</NavLink>
+          {actor.role === "admin" && <NavLink href="/users" also={["/invite"]}>Benutzer</NavLink>}
+        </nav>
+        <div className="account">
+          <div className="account-who">
+            <div className="account-company">{companyName}</div>
+            <div className="account-person">
+              {actor.name ? `${actor.name} · ` : ""}Rolle: {ROLE_LABEL[actor.role]}
+            </div>
+          </div>
+          <SignOutButton />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/app/_components/auth-form.tsx b/src/app/_components/auth-form.tsx
index 06df4af..e697ab9 100644
--- a/src/app/_components/auth-form.tsx
+++ b/src/app/_components/auth-form.tsx
@@ -8,12 +8,14 @@ import { useState, type FormEvent } from "react";
 export function AuthForm({ mode, invitationId }: { mode: "sign-in" | "sign-up"; invitationId?: string }) {
   const router = useRouter();
   const [message, setMessage] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
   const [busy, setBusy] = useState(false);
 
   async function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     setBusy(true);
     setMessage(null);
+    setFailed(false);
     const form = new FormData(event.currentTarget);
     const body = {
       email: String(form.get("email") ?? ""),
@@ -30,12 +32,14 @@ export function AuthForm({ mode, invitationId }: { mode: "sign-in" | "sign-up";
       if (response.ok) {
         router.push("/");
         router.refresh();
+        return;
       }
-      else if (response.status === 429) setMessage("Zu viele Versuche – bitte später erneut versuchen.");
-      else setMessage("Anmeldung fehlgeschlagen. Bitte E-Mail und Passwort prüfen.");
+      setFailed(true);
+      setMessage(response.status === 429 ? "Zu viele Versuche – bitte später erneut versuchen." : "Anmeldung fehlgeschlagen. Bitte E-Mail und Passwort prüfen.");
       return;
     }
     // Same answer for invited and uninvited addresses (no enumeration).
+    setFailed(!response.ok);
     setMessage(
       response.ok
         ? "Falls für diese Adresse eine Einladung vorliegt, ist das Konto jetzt angelegt. Bitte anmelden."
@@ -44,22 +48,20 @@ export function AuthForm({ mode, invitationId }: { mode: "sign-in" | "sign-up";
   }
 
   return (
-    <form onSubmit={submit} aria-busy={busy}>
+    <form onSubmit={submit} aria-busy={busy} className="auth-form">
+      {message && <div role={failed ? "alert" : "status"}>{message}</div>}
       {mode === "sign-up" && (
-        <p>
-          <label htmlFor="name">Name</label>
-          <br />
+        <label className="field" htmlFor="name">
+          <span>Name</span>
           <input id="name" name="name" required autoComplete="name" />
-        </p>
+        </label>
       )}
-      <p>
-        <label htmlFor="email">E-Mail</label>
-        <br />
+      <label className="field" htmlFor="email">
+        <span>E-Mail</span>
         <input id="email" name="email" type="email" required autoComplete="email" />
-      </p>
-      <p>
-        <label htmlFor="password">Passwort</label>
-        <br />
+      </label>
+      <label className="field" htmlFor="password">
+        <span>Passwort</span>
         <input
           id="password"
           name="password"
@@ -67,12 +69,17 @@ export function AuthForm({ mode, invitationId }: { mode: "sign-in" | "sign-up";
           required
           minLength={12}
           autoComplete={mode === "sign-in" ? "current-password" : "new-password"}
+          aria-describedby={mode === "sign-up" ? "password-hint" : undefined}
         />
-      </p>
-      <button type="submit" disabled={busy}>
+      </label>
+      {mode === "sign-up" && (
+        <span id="password-hint" className="field-hint">
+          Mindestens 12 Zeichen
+        </span>
+      )}
+      <button type="submit" className="btn-primary btn-large" disabled={busy}>
         {mode === "sign-in" ? "Anmelden" : "Konto anlegen"}
       </button>
-      {message && <p role="status">{message}</p>}
     </form>
   );
 }
diff --git a/src/app/_components/copy-button.tsx b/src/app/_components/copy-button.tsx
new file mode 100644
index 0000000..2816f59
--- /dev/null
+++ b/src/app/_components/copy-button.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useState } from "react";
+
+/** Copies a text (e.g. an invitation link) to the clipboard; the label confirms it. */
+export function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+    } catch {
+      setCopied(false); // Clipboard blocked (e.g. insecure context): the link stays selectable.
+    }
+  }
+  return (
+    <button type="button" onClick={copy} aria-live="polite">
+      {copied ? "Kopiert" : "Kopieren"}
+    </button>
+  );
+}
diff --git a/src/app/_components/nav-link.tsx b/src/app/_components/nav-link.tsx
new file mode 100644
index 0000000..b72653e
--- /dev/null
+++ b/src/app/_components/nav-link.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+
+/** Navigation link that marks the current section with `aria-current="page"` (styled, and announced). */
+export function NavLink({ href, also = [], children }: { href: string; also?: string[]; children: ReactNode }) {
+  const pathname = usePathname();
+  const current = [href, ...also].some((path) => pathname === path || pathname.startsWith(`${path}/`));
+  return (
+    <Link href={href} aria-current={current ? "page" : undefined}>
+      {children}
+    </Link>
+  );
+}
diff --git a/src/app/_server/runtime.ts b/src/app/_server/runtime.ts
index 243f4f6..7ecef70 100644
--- a/src/app/_server/runtime.ts
+++ b/src/app/_server/runtime.ts
@@ -1,3 +1,5 @@
+import { headers } from "next/headers";
+import { cache } from "react";
 import { loadConfig, type AppConfig } from "@/config/env";
 import { createDatabase, type DatabaseHandle } from "@/db";
 import { createJobQueue } from "@/db/job-queue-client";
@@ -49,3 +51,9 @@ export async function currentActor(headers: Headers): Promise<Actor | null> {
   const { auth, database } = getRuntime();
   return getActor(auth, database.db, headers);
 }
+
+/**
+ * The signed-in actor of the page being rendered, looked up once per request and shared by the app
+ * header (layout) and the page (#52). Server actions and route handlers keep calling `currentActor`.
+ */
+export const requestActor = cache(async (): Promise<Actor | null> => currentActor(await headers()));
diff --git a/src/app/components.css b/src/app/components.css
new file mode 100644
index 0000000..4a410e0
--- /dev/null
+++ b/src/app/components.css
@@ -0,0 +1,292 @@
+/* Pilot design system (#52), part 2: status tags, tables, request list, users, invitations,
+ * responsive rules. Tokens live in globals.css; the review page has its own review.css. */
+
+/* ---------- Status tags (always with text – colour only supports it) ---------- */
+
+.badge,
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 7px;
+  border-radius: 2px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  white-space: nowrap;
+}
+/* Field status */
+.badge-found {
+  background: var(--ok-bg);
+  color: var(--ok-text);
+}
+.badge-missing {
+  background: var(--grey-bg);
+  color: var(--grey-text);
+}
+.badge-corrected {
+  background: var(--blue-bg);
+  color: var(--blue-text);
+}
+.badge-uncertain,
+.badge-unverified {
+  background: var(--warn-bg);
+  color: var(--warn-text);
+  box-shadow: inset 0 0 0 1px var(--warn-line);
+}
+/* Request and user status */
+.pill-neutral {
+  background: var(--grey-bg);
+  color: var(--grey-text);
+}
+.pill-info {
+  background: var(--blue-bg);
+  color: var(--blue-text);
+}
+.pill-warn {
+  background: var(--warn-bg);
+  color: var(--warn-text);
+  box-shadow: inset 0 0 0 1px var(--warn-line);
+}
+.pill-success {
+  background: var(--ok-bg);
+  color: var(--ok-text);
+}
+.pill-danger {
+  background: var(--err-bg);
+  color: var(--err-text);
+}
+
+/* ---------- Tables ---------- */
+
+.table-wrap {
+  overflow-x: auto;
+  /* Containing block for the absolutely positioned .visually-hidden labels inside cells – without
+     it they escape the scroll container and widen the page on narrow screens. */
+  position: relative;
+}
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+th,
+td {
+  text-align: left;
+  vertical-align: top;
+  padding: 12px;
+  border-bottom: 1px solid var(--rule);
+}
+thead th {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+th:first-child,
+td:first-child {
+  padding-left: 20px;
+}
+th:last-child,
+td:last-child {
+  padding-right: 20px;
+}
+tbody th {
+  font-weight: 500;
+}
+.num {
+  text-align: right;
+}
+.nowrap {
+  white-space: nowrap;
+}
+.empty {
+  padding: 48px 20px;
+  text-align: center;
+  color: var(--muted);
+}
+
+/* ---------- Request list ---------- */
+
+.upload {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.upload-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.dropzone {
+  flex: 1;
+  min-width: min(280px, 100%);
+  border: 1px dashed var(--control-border);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+  background: var(--bg);
+}
+.dropzone label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+  margin-bottom: 6px;
+}
+.upload [role="status"],
+.upload [role="alert"] {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.toolbar {
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  flex-wrap: wrap;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.toolbar select {
+  font-size: 13px;
+  padding: 7px 10px;
+  min-width: 180px;
+}
+.toolbar .check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  padding-bottom: 8px;
+  cursor: pointer;
+}
+.toolbar .count {
+  margin-left: auto;
+  font-size: 13px;
+  color: var(--muted);
+  padding-bottom: 7px;
+}
+.requests-table {
+  min-width: 1080px;
+}
+.requests-table td {
+  font-size: 13px;
+}
+.requests-table .subject {
+  font-size: 14px;
+}
+.requests-table .subject a {
+  font-weight: 500;
+}
+.requests-table .error-text {
+  max-width: 300px;
+  text-wrap: pretty;
+  color: var(--text-2);
+}
+.requests-table .mono {
+  color: var(--text-2);
+  white-space: nowrap;
+}
+tr.row-error {
+  background: var(--error-row);
+}
+.status-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+}
+.stage {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* ---------- Users and invitations ---------- */
+
+.users-table {
+  min-width: 860px;
+}
+.users-table td,
+.users-table th {
+  vertical-align: middle;
+}
+.users-table select {
+  font-size: 13px;
+  padding: 6px 8px;
+}
+.inline-form {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.invite-row {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+  padding: 11px 20px;
+  border-bottom: 1px solid var(--rule);
+  font-size: 13.5px;
+}
+.invite-row:last-child {
+  border-bottom: 0;
+}
+.invite-form {
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.invite-form .card-pad {
+  padding: 22px;
+  gap: 16px;
+}
+.invite-done {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid #b9d6bc;
+  padding: 18px 20px;
+}
+.copy-row {
+  display: flex;
+  gap: 8px;
+}
+.copy-row code {
+  flex: 1;
+  min-width: 0;
+  background: var(--surface);
+  border: 1px solid #b9d6bc;
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  color: var(--text);
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 720px) {
+  .app-header-inner {
+    padding: 0 16px;
+    gap: 0 20px;
+  }
+  .app-nav a {
+    min-height: 44px;
+  }
+  .account {
+    margin-left: 0;
+    width: 100%;
+    justify-content: space-between;
+    padding-bottom: 10px;
+  }
+  .account-who {
+    text-align: left;
+  }
+  main {
+    padding: 20px 16px 48px;
+  }
+  .toolbar .count {
+    margin-left: 0;
+  }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 46a705a..917b0ed 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,16 +1,444 @@
-/* Minimal pilot styles: readable, keyboard-visible, status never by colour alone. */
-body { font-family: system-ui, sans-serif; margin: 0 auto; max-width: 72rem; padding: 1rem; line-height: 1.5; }
-table { border-collapse: collapse; width: 100%; }
-th, td { border-bottom: 1px solid #ccc; padding: 0.4rem; text-align: left; vertical-align: top; }
-:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
-.badge { border-radius: 0.3rem; padding: 0.1rem 0.4rem; font-size: 0.9em; white-space: nowrap; }
-.badge-found { background: #e6f4ea; color: #1e4620; }
-.badge-missing { background: #eee; color: #333; }
-.badge-corrected { background: #e8eefc; color: #1a2f66; }
-.badge-uncertain, .badge-unverified { background: #fff3cd; color: #5c3c00; font-weight: 700; border: 1px solid #b58100; }
-tr.attention, td.attention { background: #fffaf0; }
-.source { border: 1px solid #ccc; border-radius: 0.4rem; padding: 0.5rem 1rem; margin-top: 1rem; }
-.source-lines li.cited { background: #fff8c5; }
-.line-label { color: #555; font-size: 0.85em; }
-mark { background: #ffd33d; }
-.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/*
+ * Pilot design system (#52), part 1: tokens, base, app shell, surfaces, messages, forms and buttons.
+ * Implements the Claude Design prototype "RequestFlow A": warm neutrals, one blue accent, IBM Plex
+ * (self-hosted via @fontsource – no third-party requests), 3 px radii.
+ * Rules that are not style: status is never shown by colour alone, the focus outline stays visible,
+ * every text/background pair meets WCAG AA (≥ 4.5:1), form field borders ≥ 3:1 (button borders are
+ * decorative – their text identifies them).
+ */
+:root {
+  --bg: #f6f5f1;
+  --surface: #fffefb;
+  --header: #efede7;
+  --border: #dcd9d1;
+  --rule: #ebe8e1;
+  --text: #1d1c1a; /* 16.9:1 on --surface */
+  --text-2: #3d3b37; /* 11.1:1 */
+  --muted: #6b6860; /* 5.5:1 on --surface, 4.75:1 on --header, 4.7:1 on --selected */
+  --brand: #1f4fa3; /* 7.7:1 on --surface; white on brand 7.8:1 */
+  --brand-hover: #163a7a;
+  --control-border: #c9c5bb; /* buttons, dropzone (decorative – the label identifies them) */
+  --input-border: #8e8a80; /* form field boundaries 3.4:1 (WCAG 1.4.11) */
+  --danger: #7a1d12; /* 10.4:1 on --surface */
+  --danger-border: #d9a79f;
+  --ok-bg: #e3f0e4;
+  --ok-text: #1f4a24; /* 8.7:1 */
+  --warn-bg: #fdf0cc;
+  --warn-text: #5c3c00; /* 8.8:1 */
+  --warn-line: #b58100;
+  --grey-bg: #ecebe7;
+  --grey-text: #3d3b37; /* 9.4:1 */
+  --blue-bg: #e6ebf7;
+  --blue-text: #1a2f66; /* 10.7:1 */
+  --err-bg: #fbe6e3;
+  --err-text: #7a1d12; /* 8.7:1 */
+  --attention: #fffaf0;
+  --selected: #e7edf8;
+  --error-row: #fdf6f4;
+  --cited: #fff8c5;
+  --mark: #ffd33d;
+  --radius: 3px;
+  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  /* The sticky header must not cover the focused element (WCAG 2.4.11). */
+  scroll-padding-top: 5rem;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--brand);
+  text-underline-offset: 2px;
+}
+a:hover {
+  color: var(--brand-hover);
+}
+
+:focus-visible {
+  outline: 3px solid var(--brand);
+  outline-offset: 2px;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+h1 {
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  text-wrap: pretty;
+}
+h2 {
+  font-size: 15px;
+  font-weight: 600;
+}
+small,
+.muted {
+  color: var(--muted);
+}
+.mono {
+  font-family: var(--mono);
+  font-size: 12.5px;
+}
+code {
+  font-family: var(--mono);
+  font-size: 12.5px;
+}
+
+/* ---------- App shell ---------- */
+
+.app-header {
+  background: var(--header);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.app-header-inner {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 0 28px;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+  gap: 36px;
+  flex-wrap: wrap;
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-weight: 700;
+  font-size: 16px;
+  letter-spacing: -0.01em;
+  color: var(--text);
+  text-decoration: none;
+}
+.brand:hover {
+  color: var(--text);
+}
+.brand-mark {
+  width: 13px;
+  height: 13px;
+  background: var(--brand);
+  border-radius: var(--radius);
+}
+.app-nav {
+  display: flex;
+  gap: 6px;
+  align-self: stretch;
+}
+.app-nav a {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+  text-decoration: none;
+}
+.app-nav a[aria-current="page"] {
+  font-weight: 600;
+  box-shadow: inset 0 -2px 0 var(--brand);
+}
+.account {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+.account-who {
+  text-align: right;
+  line-height: 1.3;
+}
+.account-company {
+  font-size: 13px;
+  font-weight: 600;
+}
+.account-person {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+main {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 28px 28px 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.page-head {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.page-head > :last-child:not(:first-child) {
+  margin-left: auto;
+}
+.back {
+  font-size: 13px;
+}
+
+/* ---------- Surfaces ---------- */
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.card-pad {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.card-title {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+.card-title span {
+  font-size: 12.5px;
+  color: var(--muted);
+}
+.card-note {
+  padding: 12px 20px;
+  font-size: 12.5px;
+  color: var(--muted);
+}
+.tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+.tile {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--text);
+  text-decoration: none;
+}
+.tile:hover {
+  color: var(--text);
+  border-color: var(--brand);
+}
+.tile strong {
+  font-size: 17px;
+  font-weight: 600;
+}
+.tile span {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* Sign-in pages: no app header, brand above the card. */
+.auth {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+.auth-inner {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.auth-brand {
+  font-size: 18px;
+}
+.auth-brand .brand-mark {
+  width: 14px;
+  height: 14px;
+}
+.auth .card {
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.auth h1 {
+  font-size: 20px;
+}
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.auth-foot {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* ---------- Messages (role-based, so every message is styled without extra markup) ---------- */
+
+[role="status"],
+[role="alert"],
+[role="note"],
+.callout {
+  border-radius: var(--radius);
+  padding: 11px 14px;
+  font-size: 13.5px;
+}
+[role="status"] {
+  background: var(--ok-bg);
+  color: var(--ok-text);
+}
+[role="alert"] {
+  background: var(--err-bg);
+  color: var(--err-text);
+}
+[role="note"],
+.callout-warn {
+  background: var(--warn-bg);
+  color: var(--warn-text);
+}
+.callout-info {
+  background: var(--blue-bg);
+  color: var(--blue-text);
+}
+.callout-grey {
+  background: var(--grey-bg);
+  color: var(--grey-text);
+}
+
+/* ---------- Forms and buttons ---------- */
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.field > span:first-child,
+.label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+.field-hint {
+  font-size: 12px;
+  color: var(--muted);
+}
+input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]),
+select {
+  font: inherit;
+  font-size: 14px;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--input-border);
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  max-width: 100%;
+}
+input[type="file"] {
+  font: inherit;
+  font-size: 13px;
+  max-width: 100%;
+}
+input[type="checkbox"] {
+  accent-color: var(--brand);
+}
+button {
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius);
+  padding: 8px 14px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+button:hover {
+  border-color: var(--muted);
+}
+button:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+button.btn-primary,
+a.btn-link {
+  background: var(--brand);
+  border: 1px solid var(--brand);
+  color: #fff;
+  font-weight: 600;
+}
+button.btn-primary:hover,
+a.btn-link:hover {
+  background: var(--brand-hover);
+  border-color: var(--brand-hover);
+  color: #fff;
+}
+a.btn-link {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius);
+  padding: 8px 14px;
+  font-size: 13px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+button.btn-large {
+  font-size: 14px;
+  padding: 10px 14px;
+}
+button.btn-danger {
+  color: var(--danger);
+  border-color: var(--danger-border);
+  font-weight: 600;
+}
+button.btn-danger:hover {
+  border-color: var(--danger);
+}
+button.btn-small {
+  font-size: 12.5px;
+  padding: 5px 10px;
+}
+.divider {
+  height: 1px;
+  background: var(--rule);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/src/app/invite/page.tsx b/src/app/invite/page.tsx
index 00ffdb9..9ed28a7 100644
--- a/src/app/invite/page.tsx
+++ b/src/app/invite/page.tsx
@@ -1,15 +1,17 @@
+import Link from "next/link";
 import { headers } from "next/headers";
 import { notFound, redirect } from "next/navigation";
 import { z } from "zod";
-import { currentActor, getRuntime } from "@/app/_server/runtime";
+import { CopyButton } from "@/app/_components/copy-button";
+import { currentActor, getRuntime, requestActor } from "@/app/_server/runtime";
 import { authorize, AuthorizationError, inviteUser, COMPANY_ROLES, type Actor } from "@/features/identity";
 
 export const dynamic = "force-dynamic";
 
 const inviteInput = z.object({ email: z.email().max(254), role: z.enum(COMPANY_ROLES) });
 
-async function adminOrNotFound(): Promise<Actor> {
-  const actor = await currentActor(await headers());
+// The page passes the per-request cached actor (shared with the app header); the action reads its own.
+async function adminOrNotFound(actor: Actor | null): Promise<Actor> {
   if (!actor) redirect("/login");
   try {
     authorize(actor, "users.invite");
@@ -24,7 +26,7 @@ async function adminOrNotFound(): Promise<Actor> {
 // server-side on render AND in the action. The admin hands the link over to the invited person.
 async function invite(formData: FormData) {
   "use server";
-  const actor = await adminOrNotFound();
+  const actor = await adminOrNotFound(await currentActor(await headers()));
   const input = inviteInput.safeParse({ email: formData.get("email"), role: formData.get("role") });
   if (!input.success) redirect("/invite?error=input");
   const { invitationId } = await inviteUser(getRuntime().database.db, actor, input.data);
@@ -32,34 +34,48 @@ async function invite(formData: FormData) {
 }
 
 export default async function InvitePage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
-  await adminOrNotFound();
+  await adminOrNotFound(await requestActor());
   const params = await searchParams;
   const link = params.invitation ? `${getRuntime().config.auth.baseURL}/signup?invitation=${encodeURIComponent(params.invitation)}` : null;
   return (
     <main>
+      <Link href="/users" className="back">
+        ← Benutzer
+      </Link>
       <h1>Mitarbeitende einladen</h1>
-      {link && (
-        <p role="status">
-          Einladung angelegt (7 Tage gültig). Diesen Link an die eingeladene Person weitergeben: <code>{link}</code>
-        </p>
-      )}
-      {params.error && <p role="alert">Bitte eine gültige E-Mail-Adresse und Rolle angeben.</p>}
-      <form action={invite}>
-        <p>
-          <label htmlFor="email">E-Mail</label>
-          <br />
-          <input id="email" name="email" type="email" required maxLength={254} />
-        </p>
-        <p>
-          <label htmlFor="role">Rolle</label>
-          <br />
-          <select id="role" name="role" defaultValue="clerk">
-            <option value="clerk">Sachbearbeitung</option>
-            <option value="admin">Administration</option>
-          </select>
-        </p>
-        <button type="submit">Einladen</button>
-      </form>
+      <div className="invite-form">
+        <section className="card card-pad" aria-label="Einladung">
+          {params.error && <p role="alert">Bitte eine gültige E-Mail-Adresse und Rolle angeben.</p>}
+          <form action={invite} className="auth-form">
+            <label className="field" htmlFor="email">
+              <span>E-Mail</span>
+              <input id="email" name="email" type="email" required maxLength={254} placeholder="vorname.nachname@example.com" />
+            </label>
+            <label className="field" htmlFor="role">
+              <span>Rolle</span>
+              <select id="role" name="role" defaultValue="clerk">
+                <option value="clerk">Sachbearbeitung</option>
+                <option value="admin">Administration</option>
+              </select>
+            </label>
+            <div>
+              <button type="submit" className="btn-primary btn-large">
+                Einladen
+              </button>
+            </div>
+          </form>
+        </section>
+        {link && (
+          <section role="status" className="invite-done">
+            <strong>Einladung angelegt (7 Tage gültig).</strong>
+            <span>Diesen Link selbst an die eingeladene Person weitergeben. Eine E-Mail wird nicht verschickt.</span>
+            <div className="copy-row">
+              <code>{link}</code>
+              <CopyButton text={link} />
+            </div>
+          </section>
+        )}
+      </div>
     </main>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c04de8e..57193eb 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,16 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import { AppHeader } from "./_components/app-header";
+// Self-hosted IBM Plex (Latin subset, only the weights the design uses) – no third-party requests.
+import "@fontsource/ibm-plex-sans/latin-400.css";
+import "@fontsource/ibm-plex-sans/latin-500.css";
+import "@fontsource/ibm-plex-sans/latin-600.css";
+import "@fontsource/ibm-plex-sans/latin-700.css";
+import "@fontsource/ibm-plex-mono/latin-400.css";
+import "@fontsource/ibm-plex-mono/latin-500.css";
 import "./globals.css";
+import "./components.css";
+import "./review.css";
 
 export const metadata: Metadata = {
   title: "RequestFlow",
@@ -10,7 +20,10 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="de">
-      <body>{children}</body>
+      <body>
+        <AppHeader />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index ddb9ef5..3d483b5 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,14 +1,20 @@
 import Link from "next/link";
+import { Brand } from "@/app/_components/app-header";
 import { AuthForm } from "@/app/_components/auth-form";
 
 export default function LoginPage() {
   return (
-    <main>
-      <h1>Anmelden</h1>
-      <AuthForm mode="sign-in" />
-      <p>
-        Eingeladen worden? <Link href="/signup">Konto anlegen</Link>
-      </p>
+    <main className="auth">
+      <div className="auth-inner">
+        <Brand className="auth-brand" />
+        <div className="card">
+          <h1>Anmelden</h1>
+          <AuthForm mode="sign-in" />
+        </div>
+        <p className="auth-foot">
+          Eingeladen? <Link href="/signup">Konto anlegen</Link>
+        </p>
+      </div>
     </main>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 25e5aeb..87e7134 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,41 +1,55 @@
 import Link from "next/link";
-import { headers } from "next/headers";
-import { SignOutButton } from "@/app/_components/auth-form";
-import { currentActor, getRuntime } from "@/app/_server/runtime";
-import { getCompany } from "@/features/identity";
+import { Brand } from "@/app/_components/app-header";
+import { getRuntime, requestActor } from "@/app/_server/runtime";
+import { listRequests } from "@/features/requests";
 
 export const dynamic = "force-dynamic";
 
+// Start page (#52, design prototype A): entry tiles; the request tile shows what needs work.
 export default async function HomePage() {
-  const actor = await currentActor(await headers());
+  const actor = await requestActor();
   if (!actor) {
     return (
-      <main>
-        <h1>RequestFlow</h1>
-        <p>Angebotsanfragen erfassen, neben der Quelle prüfen und genau einmal ans ERP übergeben.</p>
-        <p>
-          <Link href="/login">Anmelden</Link> · <Link href="/signup">Konto mit Einladung anlegen</Link>
-        </p>
-        <p>Pilot – alle Daten sind synthetisch.</p>
+      <main className="auth">
+        <div className="auth-inner">
+          <Brand className="auth-brand" />
+          <div className="card">
+            <h1>RequestFlow</h1>
+            <p className="muted">Angebotsanfragen erfassen, neben der Quelle prüfen und genau einmal ans ERP übergeben.</p>
+            <p>
+              <Link href="/login">Anmelden</Link> · <Link href="/signup">Konto mit Einladung anlegen</Link>
+            </p>
+          </div>
+          <p className="auth-foot">Pilot – alle Daten sind synthetisch.</p>
+        </div>
       </main>
     );
   }
-  const company = await getCompany(getRuntime().database.db, actor.companyId);
+  // Pilot volumes (20–50 requests a day): counting the tenant's list in memory is enough.
+  const requests = await getRuntime().tenancy.withTenant(actor.companyId, (tx) => listRequests(tx, {}));
+  const count = (status: string) => requests.filter((request) => request.status === status).length;
+  const stats = requests.length ? `${count("REVIEW")} zur Prüfung · ${count("ERROR")} mit Fehler · ${requests.length} insgesamt` : "Noch keine Anfragen";
   return (
     <main>
-      <h1>RequestFlow</h1>
-      <p>
-        Firma: <strong>{company?.name}</strong> · Rolle: {actor.role === "admin" ? "Administration" : "Sachbearbeitung"}
-      </p>
-      <p>
-        <Link href="/requests">Anfragen</Link>
-      </p>
-      {actor.role === "admin" && (
-        <p>
-          <Link href="/users">Benutzer verwalten</Link> · <Link href="/invite">Mitarbeitende einladen</Link>
-        </p>
-      )}
-      <SignOutButton />
+      <h1>Start</h1>
+      <nav className="tiles" aria-label="Bereiche">
+        <Link href="/requests" className="tile">
+          <strong>Anfragen</strong>
+          <span>{stats}</span>
+        </Link>
+        {actor.role === "admin" && (
+          <>
+            <Link href="/users" className="tile">
+              <strong>Benutzer verwalten</strong>
+              <span>Rollen ändern, Zugänge deaktivieren</span>
+            </Link>
+            <Link href="/invite" className="tile">
+              <strong>Mitarbeitende einladen</strong>
+              <span>Einladungslink erzeugen, 7 Tage gültig</span>
+            </Link>
+          </>
+        )}
+      </nav>
     </main>
   );
 }
diff --git a/src/app/requests/[id]/page.tsx b/src/app/requests/[id]/page.tsx
index cb011e1..1548659 100644
--- a/src/app/requests/[id]/page.tsx
+++ b/src/app/requests/[id]/page.tsx
@@ -1,73 +1,23 @@
 import Link from "next/link";
-import { headers } from "next/headers";
 import { notFound, redirect } from "next/navigation";
-import { currentActor, getRuntime } from "@/app/_server/runtime";
-import { duplicateDecidable, loadReview, REJECTION_REASON_MAX, type ReviewField, type ReviewStatus } from "@/features/review";
-import { requestStatusLabel } from "../status-labels";
+import { getRuntime, requestActor } from "@/app/_server/runtime";
+import { duplicateDecidable, loadReview, REJECTION_REASON_MAX, type ReviewField } from "@/features/review";
+import { StatusPill } from "../status-pill";
 import { DONE_MESSAGES, ERROR_MESSAGES, messageFor } from "./messages";
 import { approveAction, confirmNotDuplicateAction, correctFieldAction, rejectAction, rejectAsDuplicateAction } from "./actions";
+import { DocumentList, needsAttention, Source, STATUS_LABEL, StatusBadge } from "./review-parts";
 
 export const dynamic = "force-dynamic";
 
 const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-
-const ATTACHMENT_ERROR: Record<string, string> = {
-  unsupported_media_type: "Format nicht unterstützt",
-  document_unparseable: "Datei beschädigt oder unlesbar",
-  document_too_long: "zu umfangreich",
-  nesting_too_deep: "zu tief verschachtelt",
-  too_many_attachments: "zu viele Anhänge",
-  not_attached_by_value: "nur verlinkt, nicht angehängt",
-  budget_exceeded: "Verarbeitungsgrenze der Nachricht erreicht",
-};
-
-const STATUS_LABEL: Record<ReviewStatus, string> = {
-  corrected: "korrigiert",
-  found: "belegt",
-  uncertain: "unsicher",
-  missing: "fehlt",
-  unverified: "nicht bestätigt",
+const dateFormat = new Intl.DateTimeFormat("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", timeZone: "Europe/Berlin" });
+const NO_FIELDS: Record<string, string> = {
+  NEW: "Die Anfrage wartet auf die Verarbeitung. Erkannte Angaben erscheinen danach hier.",
+  PROCESSING: "Die Dokumente werden gerade ausgewertet.",
 };
 
-function StatusBadge({ status }: { status: ReviewStatus }) {
-  // Uncertain and unverified are the ones a clerk must look at: prominent colour + text, never colour only.
-  return (
-    <span className={`badge badge-${status}`} data-testid={`status-${status}`}>
-      {status === "unverified" || status === "uncertain" ? "⚠ " : ""}
-      {STATUS_LABEL[status]}
-    </span>
-  );
-}
-
-function Source({ field }: { field: ReviewField }) {
-  if (!field.source) return <p>Für diesen Wert gibt es keine Fundstelle.</p>;
-  const { source } = field;
-  return (
-    <section aria-labelledby="source-heading" className="source">
-      <h3 id="source-heading">
-        Quelle: {source.filename} – {source.heading}
-      </h3>
-      {source.ocr && (
-        <p role="note">
-          <strong>⚠ Texterkennung (OCR):</strong> Der Text stammt aus einem gescannten Dokument – bitte mit dem Original vergleichen.
-        </p>
-      )}
-      {field.corrected && <p>Fundstelle des erkannten Werts „{field.extractedValue ?? "–"}“ – der aktuelle Wert wurde manuell korrigiert.</p>}
-      <ol className="source-lines">
-        {source.lines.map((line) => (
-          <li key={line.segmentId} className={line.cited ? "cited" : undefined} aria-current={line.cited ? "true" : undefined}>
-            <span className="line-label">{line.label}</span>{" "}
-            {line.parts.map((part, index) => (part.mark ? <mark key={index}>{part.text}</mark> : <span key={index}>{part.text}</span>))}
-          </li>
-        ))}
-      </ol>
-      <p>
-        <a href={`/api/documents/${source.documentId}`}>Original öffnen</a>
-      </p>
-    </section>
-  );
-}
-
+// Review page (#8, #25), layout after design prototype A (#52): fields, positions and documents on the
+// left; the selected value with its source and the decision in a sticky panel on the right.
 export default async function RequestPage({
   params,
   searchParams,
@@ -75,7 +25,7 @@ export default async function RequestPage({
   params: Promise<{ id: string }>;
   searchParams: Promise<Record<string, string | undefined>>;
 }) {
-  const actor = await currentActor(await headers());
+  const actor = await requestActor();
   if (!actor) redirect("/login");
   const { id } = await params;
   if (!UUID.test(id)) notFound();
@@ -83,43 +33,69 @@ export default async function RequestPage({
   if (!view) notFound();
   const { request, fields, lineItems, documents, skippedDocuments, documentNotes, exportRecord } = view;
   const query = await searchParams;
-  // `?field=<key>` selects a header field, `?field=<key>&item=<n>` a line-item field (#25).
+  // `?field=<key>` selects a header field, `?field=<key>&item=<n>` a line-item field (#25). Without a (valid)
+  // selection the panel shows the first value that needs attention – header fields first, then positions –
+  // else the first header field.
   const selectedItem = query.item !== undefined && /^\d{1,4}$/.test(query.item) ? Number(query.item) : null;
-  const selected =
+  const requested: ReviewField | undefined =
     selectedItem === null
       ? fields.find((field) => field.key === query.field)
       : lineItems.find((item) => item.itemIndex === selectedItem)?.fields.find((field) => field.key === query.field);
+  const selected = requested ?? fields.find(needsAttention) ?? lineItems.flatMap((item) => item.fields).find(needsAttention) ?? fields[0];
+  const isSelected = (field: ReviewField) => selected !== undefined && selected.key === field.key && selected.itemIndex === field.itemIndex;
   const inReview = request.status === "REVIEW";
   // Decidable before approval and not while a worker holds the request (status machine, #27).
   const canDecideDuplicate = duplicateDecidable(request);
   const done = messageFor(DONE_MESSAGES, query.done);
   const error = messageFor(ERROR_MESSAGES, query.error);
+  const openItems = lineItems.reduce((count, item) => count + item.fields.filter(needsAttention).length, fields.filter(needsAttention).length);
+  // The anchor brings the panel into view on narrow screens, where it sits below the tables.
+  const fieldHref = (field: ReviewField) =>
+    field.itemIndex === null
+      ? `/requests/${request.id}?field=${field.key}#selected-heading`
+      : `/requests/${request.id}?field=${field.key}&item=${field.itemIndex}#selected-heading`;
 
   return (
     <main>
-      <p>
-        <Link href="/requests">← Anfragen</Link>
-      </p>
-      <h1>{request.subject ?? "(ohne Betreff)"}</h1>
-      <p>
-        Status: <strong data-testid="request-status">{requestStatusLabel(request.status)}</strong>
-      </p>
+      <Link href="/requests" className="back">
+        ← Anfragen
+      </Link>
+      <div className="review-head">
+        <h1>{request.subject ?? "(ohne Betreff)"}</h1>
+        <div className="review-meta">
+          <StatusPill status={request.status} testId="request-status" />
+          {exportRecord?.erpReference && (
+            <span className="erp">
+              ERP-Referenz <strong data-testid="erp-reference">{exportRecord.erpReference}</strong>
+            </span>
+          )}
+          {inReview && openItems > 0 && (
+            <span className="attention-tag">⚠ {openItems === 1 ? "1 Wert braucht Aufmerksamkeit" : `${openItems} Werte brauchen Aufmerksamkeit`}</span>
+          )}
+          <span>Eingang {dateFormat.format(request.createdAt)}</span>
+        </div>
+      </div>
       {done && <p role="status">{done}</p>}
       {error && <p role="alert">{error}</p>}
-      {request.status === "ERROR" && request.errorMessage && <p role="alert">Fehler: {request.errorMessage}</p>}
-      {request.status === "REJECTED" && request.rejectionReason && <p>Abgelehnt: {request.rejectionReason}</p>}
-      {exportRecord?.erpReference && (
-        <p>
-          ERP-Referenz: <strong data-testid="erp-reference">{exportRecord.erpReference}</strong>
+      {request.status === "ERROR" && request.errorMessage && (
+        <p role="alert">
+          <strong>Fehler:</strong> {request.errorMessage}
+        </p>
+      )}
+      {request.status === "REJECTED" && request.rejectionReason && (
+        <p className="callout callout-grey">
+          <strong>Abgelehnt:</strong> {request.rejectionReason}
         </p>
       )}
-      {request.status === "APPROVED" && exportRecord?.lastError && (
-        <p role="status">
-          Export wird wiederholt ({exportRecord.attempts} Versuche bisher): {exportRecord.lastError}
+      {request.status === "APPROVED" && (
+        <p className="callout callout-info">
+          {exportRecord?.lastError
+            ? `Export wird wiederholt (${exportRecord.attempts} Versuche bisher): ${exportRecord.lastError}`
+            : "Freigegeben – der Export ist eingeplant."}
         </p>
       )}
       {request.possibleDuplicate && request.duplicateOfId && (
-        <section aria-labelledby="duplicate-heading" className="attention" data-testid="duplicate-banner">
+        <section aria-labelledby="duplicate-heading" className="duplicate" data-testid="duplicate-banner">
           <h2 id="duplicate-heading">Mögliches Duplikat</h2>
           <p>
             Gleiche E-Mail oder gleiche Dateien wie <Link href={`/requests/${request.duplicateOfId}`}>diese Anfrage</Link>.
@@ -128,174 +104,207 @@ export default async function RequestPage({
           </p>
           {request.duplicateDecision === null && canDecideDuplicate && (
             <>
-              <form action={confirmNotDuplicateAction}>
-                <input type="hidden" name="requestId" value={request.id} />
-                <button type="submit">Kein Duplikat – weiter bearbeiten</button>
-              </form>
-              <form action={rejectAsDuplicateAction}>
-                <input type="hidden" name="requestId" value={request.id} />
-                <label>
-                  Grund <input name="reason" required maxLength={REJECTION_REASON_MAX} defaultValue="Duplikat einer bestehenden Anfrage" />
-                </label>{" "}
-                <button type="submit">Als Duplikat ablehnen</button>
-              </form>
+              <div className="duplicate-actions">
+                <form action={confirmNotDuplicateAction}>
+                  <input type="hidden" name="requestId" value={request.id} />
+                  <button type="submit">Kein Duplikat – weiter bearbeiten</button>
+                </form>
+                <span className="sep" aria-hidden="true" />
+                <form action={rejectAsDuplicateAction}>
+                  <input type="hidden" name="requestId" value={request.id} />
+                  <label className="field">
+                    <span>Grund</span>
+                    <input name="reason" required maxLength={REJECTION_REASON_MAX} defaultValue="Duplikat einer bestehenden Anfrage" />
+                  </label>
+                  <button type="submit" className="btn-danger">
+                    Als Duplikat ablehnen
+                  </button>
+                </form>
+              </div>
+              <p className="duplicate-hint">Solange nicht entschieden ist, kann die Anfrage nicht freigegeben werden.</p>
             </>
           )}
         </section>
       )}
 
-      {fields.length > 0 && (
-        <>
-          <h2>Erkannte Angaben</h2>
-          <table>
-            <thead>
-              <tr>
-                <th scope="col">Feld</th>
-                <th scope="col">Wert</th>
-                <th scope="col">Status</th>
-                <th scope="col">Quelle</th>
-                {inReview && <th scope="col">Korrektur</th>}
-              </tr>
-            </thead>
-            <tbody>
-              {fields.map((field) => (
-                <tr key={field.key} className={field.reviewStatus === "unverified" || field.reviewStatus === "uncertain" ? "attention" : undefined}>
-                  <th scope="row">{field.label}</th>
-                  <td data-testid={`value-${field.key}`}>
-                    {field.value ?? "–"}
-                    {field.corrected && <small> (korrigiert; erkannt: {field.extractedValue ?? "–"})</small>}
-                  </td>
-                  <td>
-                    <StatusBadge status={field.reviewStatus} />
-                    {field.corrected && <small> (erkannt: {STATUS_LABEL[field.status]})</small>}
-                  </td>
-                  <td>{field.source ? <Link href={`/requests/${request.id}?field=${field.key}`}>Quelle anzeigen</Link> : "–"}</td>
-                  {inReview && (
-                    <td>
-                      <form action={correctFieldAction}>
-                        <input type="hidden" name="requestId" value={request.id} />
-                        <input type="hidden" name="field" value={field.key} />
-                        <label>
-                          <span className="visually-hidden">Neuer Wert für {field.label}</span>
-                          <input name="value" defaultValue={field.value ?? ""} maxLength={500} />
-                        </label>{" "}
-                        <button type="submit">Speichern</button>
-                      </form>
-                    </td>
-                  )}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          {selected && selected.itemIndex === null && <Source field={selected} />}
-        </>
-      )}
+      <div className="review-grid">
+        <div className="review-main">
+          {fields.length > 0 ? (
+            <>
+              <section className="card" aria-labelledby="fields-heading">
+                <h2 id="fields-heading" className="card-title">
+                  Erkannte Angaben
+                </h2>
+                <div className="table-wrap">
+                  <table className="fields-table">
+                    <thead>
+                      <tr>
+                        <th scope="col">Feld</th>
+                        <th scope="col">Wert</th>
+                        <th scope="col">Status</th>
+                        <th scope="col">Quelle</th>
+                        {inReview && <th scope="col">Korrektur</th>}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {fields.map((field) => (
+                        <tr key={field.key} className={isSelected(field) ? "selected" : needsAttention(field) ? "attention" : undefined}>
+                          <th scope="row">{field.label}</th>
+                          <td data-testid={`value-${field.key}`}>
+                            {field.value === null ? <span className="muted">–</span> : <Link href={fieldHref(field)} className="value-link" aria-current={isSelected(field) ? "true" : undefined}>
+                                {field.value}
+                              </Link>}
+                            {field.corrected && <div className="field-hint">erkannt: {field.extractedValue ?? "–"}</div>}
+                          </td>
+                          <td className="nowrap">
+                            <StatusBadge status={field.reviewStatus} />
+                            {field.corrected && <div className="field-hint">erkannt: {STATUS_LABEL[field.status]}</div>}
+                          </td>
+                          <td className="source-col">{field.source ? <Link href={fieldHref(field)}>Quelle anzeigen</Link> : <span className="muted">–</span>}</td>
+                          {inReview && (
+                            <td className="correct">
+                              <form action={correctFieldAction} className="inline-form">
+                                <input type="hidden" name="requestId" value={request.id} />
+                                <input type="hidden" name="field" value={field.key} />
+                                <label>
+                                  <span className="visually-hidden">Neuer Wert für {field.label}</span>
+                                  <input name="value" defaultValue={field.value ?? ""} maxLength={500} />
+                                </label>
+                                <button type="submit" className="btn-small">
+                                  Speichern
+                                </button>
+                              </form>
+                            </td>
+                          )}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </section>
 
-      {lineItems.length > 0 && (
-        <>
-          <h2>Positionen</h2>
-          <table data-testid="line-items">
-            <thead>
-              <tr>
-                <th scope="col">Pos.</th>
-                {lineItems[0]!.fields.map((field) => (
-                  <th scope="col" key={field.key}>
-                    {field.label}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {lineItems.map((item) => (
-                <tr key={item.itemIndex}>
-                  <th scope="row">{item.itemIndex + 1}</th>
-                  {item.fields.map((field) => (
-                    <td
-                      key={field.key}
-                      data-testid={`item-${item.itemIndex}-${field.key}`}
-                      className={field.reviewStatus === "unverified" || field.reviewStatus === "uncertain" ? "attention" : undefined}
-                    >
-                      {/* The accessible name contains the visible value (WCAG 2.5.3 label in name). */}
-                      <Link
-                        href={`/requests/${request.id}?field=${field.key}&item=${item.itemIndex}`}
-                        aria-label={`Position ${item.itemIndex + 1}, ${field.label}: ${field.value ?? "–"}`}
-                      >
-                        {field.value ?? "–"}
-                      </Link>{" "}
-                      <StatusBadge status={field.reviewStatus} />
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          {selected && selected.itemIndex !== null && (
-            <section aria-labelledby="item-field-heading">
-              <h3 id="item-field-heading">
-                Position {selected.itemIndex + 1}: {selected.label}
-              </h3>
-              <p>
-                Wert: <strong data-testid="selected-item-value">{selected.value ?? "–"}</strong> <StatusBadge status={selected.reviewStatus} />
-                {selected.corrected && <small> (erkannt: {selected.extractedValue ?? "–"}, {STATUS_LABEL[selected.status]})</small>}
-              </p>
-              {inReview && (
-                <form action={correctFieldAction}>
+              {lineItems.length > 0 && (
+                <section className="card" aria-labelledby="items-heading">
+                  <div className="card-title">
+                    <h2 id="items-heading">Positionen</h2>
+                    <span>Wert anklicken für Fundstelle und Korrektur</span>
+                  </div>
+                  <div className="table-wrap">
+                    <table className="items-table" data-testid="line-items">
+                      <thead>
+                        <tr>
+                          <th scope="col">Pos.</th>
+                          {lineItems[0]!.fields.map((field) => (
+                            <th scope="col" key={field.key}>
+                              {field.label}
+                            </th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {lineItems.map((item) => (
+                          <tr key={item.itemIndex}>
+                            <th scope="row" className="mono">
+                              {item.itemIndex + 1}
+                            </th>
+                            {item.fields.map((field) => (
+                              <td key={field.key} data-testid={`item-${item.itemIndex}-${field.key}`} className={needsAttention(field) ? "attention" : undefined}>
+                                {/* The accessible name contains the visible value (WCAG 2.5.3 label in name). */}
+                                <Link
+                                  href={fieldHref(field)}
+                                  className="item-cell"
+                                  aria-current={isSelected(field) ? "true" : undefined}
+                                  aria-label={`Position ${item.itemIndex + 1}, ${field.label}: ${field.value ?? "–"}`}
+                                >
+                                  <span>{field.value ?? "–"}</span>
+                                  <StatusBadge status={field.reviewStatus} />
+                                </Link>
+                              </td>
+                            ))}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </section>
+              )}
+            </>
+          ) : (
+            <section className="card card-pad muted">{NO_FIELDS[request.status] ?? "Es liegen keine erkannten Angaben vor."}</section>
+          )}
+
+          <section className="card" aria-labelledby="documents-heading">
+            <h2 id="documents-heading" className="card-title">
+              Dokumente
+            </h2>
+            <DocumentList documents={documents} skippedDocuments={skippedDocuments} documentNotes={documentNotes} />
+          </section>
+        </div>
+
+        <aside className="review-aside" aria-label="Fundstelle und Entscheidung">
+          {selected && (
+            <section className="card panel" aria-labelledby="selected-heading">
+              <div>
+                <span className="label">{selected.itemIndex === null ? "Erkannte Angabe" : `Position ${selected.itemIndex + 1}`}</span>
+                <h2 id="selected-heading" className="big">
+                  {selected.label}
+                </h2>
+              </div>
+              <div>
+                <div className="panel-value">
+                  <strong data-testid={selected.itemIndex === null ? undefined : "selected-item-value"}>{selected.value ?? "–"}</strong>
+                  <StatusBadge status={selected.reviewStatus} />
+                </div>
+                {selected.corrected && (
+                  <p className="field-hint">
+                    erkannt: {selected.extractedValue ?? "–"} ({STATUS_LABEL[selected.status]})
+                  </p>
+                )}
+              </div>
+              {inReview && selected.itemIndex !== null && (
+                <form action={correctFieldAction} className="field">
                   <input type="hidden" name="requestId" value={request.id} />
                   <input type="hidden" name="field" value={selected.key} />
                   <input type="hidden" name="item" value={selected.itemIndex} />
-                  <label>
-                    Neuer Wert für Position {selected.itemIndex + 1}, {selected.label}{" "}
-                    <input name="value" defaultValue={selected.value ?? ""} maxLength={500} />
-                  </label>{" "}
-                  <button type="submit">Speichern</button>
+                  <label htmlFor="item-correction" className="label">
+                    Neuer Wert<span className="visually-hidden"> für Position {selected.itemIndex + 1}, {selected.label}</span>
+                  </label>
+                  <div className="correction-row">
+                    <input id="item-correction" name="value" defaultValue={selected.value ?? ""} maxLength={500} />
+                    <button type="submit">Speichern</button>
+                  </div>
+                  <span className="field-hint">Wird mit altem und neuem Wert, Person und Zeit protokolliert.</span>
                 </form>
               )}
+              <div className="divider" />
               <Source field={selected} />
             </section>
           )}
-        </>
-      )}
-
-      {inReview && (
-        <section aria-labelledby="decision-heading">
-          <h2 id="decision-heading">Entscheidung</h2>
-          <form action={approveAction}>
-            <input type="hidden" name="requestId" value={request.id} />
-            <button type="submit">Freigeben</button>
-          </form>
-          <form action={rejectAction}>
-            <input type="hidden" name="requestId" value={request.id} />
-            <label>
-              Grund der Ablehnung <input name="reason" required maxLength={REJECTION_REASON_MAX} />
-            </label>{" "}
-            <button type="submit">Ablehnen</button>
-          </form>
-        </section>
-      )}
-
-      <h2>Dokumente</h2>
-      <ul>
-        {documents.map((document) => {
-          const skipped = skippedDocuments.find((entry) => entry.documentId === document.id);
-          const notes = documentNotes.find((entry) => entry.documentId === document.id);
-          return (
-            <li key={document.id}>
-              <a href={`/api/documents/${document.id}`}>{document.filename}</a> ({Math.ceil(document.sizeBytes / 1024)} KB)
-              {skipped && <small> – nicht automatisch ausgewertet</small>}
-              {notes && notes.warnings.includes("ocr_pages_skipped") && <small> – nur die ersten Scan-Seiten wurden per Texterkennung gelesen</small>}
-              {notes && notes.failedAttachments.length > 0 && (
-                <ul>
-                  {notes.failedAttachments.map((attachment, index) => (
-                    <li key={index} role="note">
-                      ⚠ Anhang „{attachment.name ?? `Nr. ${index + 1}`}“ konnte nicht gelesen werden ({ATTACHMENT_ERROR[attachment.error ?? ""] ?? "unbekannter Grund"}) – bitte im Original prüfen.
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </li>
-          );
-        })}
-      </ul>
+          {inReview && (
+            <section className="card panel decision" aria-labelledby="decision-heading">
+              <h2 id="decision-heading">Entscheidung</h2>
+              <form action={approveAction}>
+                <input type="hidden" name="requestId" value={request.id} />
+                <button type="submit" className="btn-primary btn-large">
+                  Freigeben
+                </button>
+                <span className="field-hint">Die Anfrage wird danach genau einmal ans ERP übergeben.</span>
+              </form>
+              <div className="divider" />
+              <form action={rejectAction}>
+                <input type="hidden" name="requestId" value={request.id} />
+                <label className="field">
+                  <span>Grund der Ablehnung (Pflicht)</span>
+                  <input name="reason" required maxLength={REJECTION_REASON_MAX} />
+                </label>
+                <button type="submit" className="btn-danger">
+                  Ablehnen
+                </button>
+              </form>
+            </section>
+          )}
+        </aside>
+      </div>
     </main>
   );
 }
diff --git a/src/app/requests/[id]/review-parts.tsx b/src/app/requests/[id]/review-parts.tsx
new file mode 100644
index 0000000..e0c343f
--- /dev/null
+++ b/src/app/requests/[id]/review-parts.tsx
@@ -0,0 +1,94 @@
+import type { ReviewField, ReviewStatus, ReviewView } from "@/features/review";
+
+// Presentational parts of the review page (#8, #23, #25), styled after design prototype A (#52).
+
+const ATTACHMENT_ERROR: Record<string, string> = {
+  unsupported_media_type: "Format nicht unterstützt",
+  document_unparseable: "Datei beschädigt oder unlesbar",
+  document_too_long: "zu umfangreich",
+  nesting_too_deep: "zu tief verschachtelt",
+  too_many_attachments: "zu viele Anhänge",
+  not_attached_by_value: "nur verlinkt, nicht angehängt",
+  budget_exceeded: "Verarbeitungsgrenze der Nachricht erreicht",
+};
+
+export const STATUS_LABEL: Record<ReviewStatus, string> = {
+  corrected: "korrigiert",
+  found: "belegt",
+  uncertain: "unsicher",
+  missing: "fehlt",
+  unverified: "nicht bestätigt",
+};
+
+export const needsAttention = (field: ReviewField): boolean => field.reviewStatus === "unverified" || field.reviewStatus === "uncertain";
+
+export function StatusBadge({ status }: { status: ReviewStatus }) {
+  // Uncertain and unverified are the ones a clerk must look at: warning sign + outlined tag, never colour only.
+  return (
+    <span className={`badge badge-${status}`} data-testid={`status-${status}`}>
+      {status === "unverified" || status === "uncertain" ? "⚠ " : ""}
+      {STATUS_LABEL[status]}
+    </span>
+  );
+}
+
+/** Source of the selected value: document, heading and the cited lines with the value marked. */
+export function Source({ field }: { field: ReviewField }) {
+  if (!field.source) return <p className="muted">Für diesen Wert gibt es keine Fundstelle.</p>;
+  const { source } = field;
+  return (
+    <section aria-labelledby="source-heading" className="panel-source">
+      <div className="source-head">
+        <span className="label">Quelle</span>
+        <strong id="source-heading">
+          {source.filename} – {source.heading}
+        </strong>
+      </div>
+      {source.ocr && (
+        <p role="note">
+          <strong>⚠ Texterkennung (OCR):</strong> Der Text stammt aus einem gescannten Dokument – bitte mit dem Original vergleichen.
+        </p>
+      )}
+      {field.corrected && <p className="field-hint">Fundstelle des erkannten Werts „{field.extractedValue ?? "–"}“ – der aktuelle Wert wurde manuell korrigiert.</p>}
+      <ol className="source-lines">
+        {source.lines.map((line) => (
+          <li key={line.segmentId} className={line.cited ? "cited" : undefined} aria-current={line.cited ? "true" : undefined}>
+            <span className="line-label">{line.label}</span>
+            <span className="line-text">
+              {line.parts.map((part, index) => (part.mark ? <mark key={index}>{part.text}</mark> : <span key={index}>{part.text}</span>))}
+            </span>
+          </li>
+        ))}
+      </ol>
+      <a href={`/api/documents/${source.documentId}`}>Original öffnen</a>
+    </section>
+  );
+}
+
+type DocumentsProps = Pick<ReviewView, "documents" | "skippedDocuments" | "documentNotes">;
+
+export function DocumentList({ documents, skippedDocuments, documentNotes }: DocumentsProps) {
+  return (
+    <div>
+      {documents.map((document) => {
+        const skipped = skippedDocuments.find((entry) => entry.documentId === document.id);
+        const notes = documentNotes.find((entry) => entry.documentId === document.id);
+        return (
+          <div key={document.id} className="doc-row">
+            <div>
+              <a href={`/api/documents/${document.id}`}>{document.filename}</a>
+              <span className="mono muted">{Math.ceil(document.sizeBytes / 1024)} KB</span>
+            </div>
+            {skipped && <div className="doc-note">⚠ Nicht automatisch ausgewertet.</div>}
+            {notes && notes.warnings.includes("ocr_pages_skipped") && <div className="doc-note">⚠ Nur die ersten Scan-Seiten wurden per Texterkennung gelesen.</div>}
+            {notes?.failedAttachments.map((attachment, index) => (
+              <div key={index} role="note" className="doc-note">
+                ⚠ Anhang „{attachment.name ?? `Nr. ${index + 1}`}“ konnte nicht gelesen werden ({ATTACHMENT_ERROR[attachment.error ?? ""] ?? "unbekannter Grund"}) – bitte im Original prüfen.
+              </div>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/requests/page.tsx b/src/app/requests/page.tsx
index 017185f..b1c540a 100644
--- a/src/app/requests/page.tsx
+++ b/src/app/requests/page.tsx
@@ -1,17 +1,17 @@
 import Link from "next/link";
-import { headers } from "next/headers";
 import { redirect } from "next/navigation";
-import { currentActor, getRuntime } from "@/app/_server/runtime";
+import { getRuntime, requestActor } from "@/app/_server/runtime";
 import { listExportRecords } from "@/features/export";
 import { listRequests, type RequestFilter } from "@/features/requests";
 import { reprocessAction } from "./actions";
 import { requestRowView } from "./row-view";
-import { REQUEST_STATUS_LABEL, requestStatusLabel } from "./status-labels";
+import { REQUEST_STATUS_LABEL } from "./status-labels";
+import { StatusPill } from "./status-pill";
 import { UploadForm } from "./upload-form";
 
 export const dynamic = "force-dynamic";
 
-const dateFormat = new Intl.DateTimeFormat("de-DE", { dateStyle: "short", timeStyle: "short", timeZone: "Europe/Berlin" });
+const dateFormat = new Intl.DateTimeFormat("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", timeZone: "Europe/Berlin" });
 const STAGE_LABEL: Record<string, string> = { processing: "Verarbeitung", export: "Export" };
 const MESSAGES: Record<string, string> = {
   reprocessed: "Erneut eingeplant.",
@@ -28,7 +28,7 @@ function filterOf(query: Record<string, string | undefined>): RequestFilter {
 
 // Request list (#26): status, attempts, last error with its stage, next retry; reprocess for ERROR.
 export default async function RequestsPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
-  const actor = await currentActor(await headers());
+  const actor = await requestActor();
   if (!actor) redirect("/login");
   const query = await searchParams;
   const filter = filterOf(query);
@@ -42,84 +42,105 @@ export default async function RequestsPage({ searchParams }: { searchParams: Pro
   return (
     <main>
       <h1>Anfragen</h1>
-      <UploadForm />
       {done && <p role="status">{done}</p>}
       {error && <p role="alert">{error}</p>}
-      <form method="get" aria-label="Filter">
-        <label>
-          Status{" "}
-          <select name="status" defaultValue={filter.status ?? ""}>
-            <option value="">alle</option>
-            {Object.entries(REQUEST_STATUS_LABEL).map(([value, label]) => (
-              <option key={value} value={value}>
-                {label}
-              </option>
-            ))}
-          </select>
-        </label>{" "}
-        <label>
-          <input type="checkbox" name="duplicate" value="1" defaultChecked={filter.possibleDuplicate === true} /> nur mögliche Duplikate
-        </label>{" "}
-        <button type="submit">Filtern</button>
-      </form>
-      {requests.length === 0 ? (
-        <p>{filter.status || filter.possibleDuplicate ? "Keine Anfragen für diesen Filter." : "Noch keine Anfragen."}</p>
-      ) : (
-        <table>
-          <thead>
-            <tr>
-              <th scope="col">Eingang</th>
-              <th scope="col">Betreff</th>
-              <th scope="col">Status</th>
-              <th scope="col">Versuche</th>
-              <th scope="col">Letzter Fehler</th>
-              <th scope="col">Nächster Versuch</th>
-              <th scope="col">Hinweis</th>
-              <th scope="col">Aktion</th>
-            </tr>
-          </thead>
-          <tbody>
-            {requests.map((request) => {
-              const row = requestRowView(request, exports.get(request.id));
-              return (
-                <tr key={request.id} data-testid={`request-${request.id}`}>
-                  <td>{dateFormat.format(request.createdAt)}</td>
-                  <td>
-                    <Link href={`/requests/${request.id}`}>{request.subject ?? "(ohne Betreff)"}</Link>
-                  </td>
-                  <td>
-                    {requestStatusLabel(request.status)}
-                    {request.status === "ERROR" && row.stage ? ` (${STAGE_LABEL[row.stage]})` : ""}
-                  </td>
-                  <td>{row.attempts > 0 ? row.attempts : "–"}</td>
-                  {/* The stage appears once: in the status for ERROR, as a prefix while retrying. */}
-                  <td>{row.error ? `${request.status !== "ERROR" && row.stage ? `${STAGE_LABEL[row.stage]}: ` : ""}${row.error}` : "–"}</td>
-                  <td>{row.nextRetryAt ? dateFormat.format(row.nextRetryAt) : "–"}</td>
-                  <td>
-                    {request.possibleDuplicate
-                      ? request.duplicateDecision === "distinct"
-                        ? "Duplikat geprüft: eigenständig"
-                        : request.duplicateDecision === "duplicate"
-                          ? "Als Duplikat abgelehnt"
-                          : "Mögliches Duplikat – Entscheidung offen"
-                      : ""}
-                  </td>
-                  <td>
-                    {request.status === "ERROR" && (
-                      <form action={reprocessAction}>
-                        <input type="hidden" name="requestId" value={request.id} />
-                        <button type="submit" aria-label={`Erneut verarbeiten: ${request.subject ?? "(ohne Betreff)"}`}>
-                          Erneut verarbeiten
-                        </button>
-                      </form>
-                    )}
-                  </td>
+      <section className="card card-pad" aria-label="Anfrage hochladen">
+        <UploadForm />
+      </section>
+      <section className="card" aria-label="Anfragenliste">
+        <form method="get" aria-label="Filter" className="toolbar">
+          <label className="field">
+            <span>Status</span>
+            <select name="status" defaultValue={filter.status ?? ""}>
+              <option value="">alle</option>
+              {Object.entries(REQUEST_STATUS_LABEL).map(([value, label]) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="check">
+            <input type="checkbox" name="duplicate" value="1" defaultChecked={filter.possibleDuplicate === true} />
+            nur mögliche Duplikate
+          </label>
+          <button type="submit">Filtern</button>
+          <span className="count">{requests.length === 1 ? "1 Anfrage" : `${requests.length} Anfragen`}</span>
+        </form>
+        {requests.length === 0 ? (
+          <p className="empty">
+            {filter.status || filter.possibleDuplicate ? "Keine Anfragen für diesen Filter." : "Noch keine Anfragen. Laden Sie oben eine E-Mail oder Dateien hoch."}
+          </p>
+        ) : (
+          <div className="table-wrap">
+            <table className="requests-table">
+              <thead>
+                <tr>
+                  <th scope="col">Eingang</th>
+                  <th scope="col">Betreff</th>
+                  <th scope="col">Status</th>
+                  <th scope="col" className="num">
+                    Versuche
+                  </th>
+                  <th scope="col">Letzter Fehler</th>
+                  <th scope="col">Nächster Versuch</th>
+                  <th scope="col">Duplikat</th>
+                  <th scope="col">
+                    <span className="visually-hidden">Aktion</span>
+                  </th>
                 </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      )}
+              </thead>
+              <tbody>
+                {requests.map((request) => {
+                  const row = requestRowView(request, exports.get(request.id));
+                  const duplicate = !request.possibleDuplicate
+                    ? null
+                    : request.duplicateDecision === "distinct"
+                      ? "als eigenständig geprüft"
+                      : request.duplicateDecision === "duplicate"
+                        ? "als Duplikat abgelehnt"
+                        : "Entscheidung offen";
+                  return (
+                    <tr key={request.id} data-testid={`request-${request.id}`} className={request.status === "ERROR" ? "row-error" : undefined}>
+                      <td className="mono">{dateFormat.format(request.createdAt)}</td>
+                      <td className="subject">
+                        <Link href={`/requests/${request.id}`}>{request.subject ?? "(ohne Betreff)"}</Link>
+                      </td>
+                      <td>
+                        <div className="status-cell">
+                          <StatusPill status={request.status} />
+                          {request.status === "ERROR" && row.stage && <span className="stage">Stufe: {STAGE_LABEL[row.stage]}</span>}
+                        </div>
+                      </td>
+                      <td className="num mono">{row.attempts > 0 ? row.attempts : "–"}</td>
+                      {/* The stage appears once: in the status for ERROR, as a prefix while retrying. */}
+                      <td className="error-text">{row.error ? `${request.status !== "ERROR" && row.stage ? `${STAGE_LABEL[row.stage]}: ` : ""}${row.error}` : "–"}</td>
+                      <td className="mono">{row.nextRetryAt ? dateFormat.format(row.nextRetryAt) : "–"}</td>
+                      <td>
+                        {duplicate === "Entscheidung offen" ? (
+                          <span className="pill pill-warn">Mögliches Duplikat – Entscheidung offen</span>
+                        ) : (
+                          (duplicate ?? <span className="muted">–</span>)
+                        )}
+                      </td>
+                      <td className="num">
+                        {request.status === "ERROR" && (
+                          <form action={reprocessAction}>
+                            <input type="hidden" name="requestId" value={request.id} />
+                            <button type="submit" className="btn-small" aria-label={`Erneut verarbeiten: ${request.subject ?? "(ohne Betreff)"}`}>
+                              Erneut verarbeiten
+                            </button>
+                          </form>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
     </main>
   );
 }
diff --git a/src/app/requests/status-pill.tsx b/src/app/requests/status-pill.tsx
new file mode 100644
index 0000000..8570a74
--- /dev/null
+++ b/src/app/requests/status-pill.tsx
@@ -0,0 +1,20 @@
+import { requestStatusLabel } from "./status-labels";
+
+// Colour tone per request status (#52). The label text is always shown – colour only supports it.
+const TONE: Record<string, string> = {
+  NEW: "neutral",
+  PROCESSING: "info",
+  REVIEW: "warn",
+  APPROVED: "success",
+  EXPORTED: "success",
+  REJECTED: "neutral",
+  ERROR: "danger",
+};
+
+export function StatusPill({ status, testId }: { status: string; testId?: string }) {
+  return (
+    <span className={`pill pill-${TONE[status] ?? "neutral"}`} data-testid={testId}>
+      {requestStatusLabel(status)}
+    </span>
+  );
+}
diff --git a/src/app/requests/upload-form.tsx b/src/app/requests/upload-form.tsx
index 3fe7e1e..95305b5 100644
--- a/src/app/requests/upload-form.tsx
+++ b/src/app/requests/upload-form.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, type FormEvent } from "react";
 
@@ -8,6 +9,8 @@ import { useState, type FormEvent } from "react";
 export function UploadForm() {
   const router = useRouter();
   const [message, setMessage] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [openId, setOpenId] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
   async function submit(event: FormEvent<HTMLFormElement>) {
@@ -15,30 +18,44 @@ export function UploadForm() {
     const formElement = event.currentTarget;
     setBusy(true);
     setMessage(null);
+    setFailed(false);
+    setOpenId(null);
     const response = await fetch("/api/requests", { method: "POST", body: new FormData(formElement) });
     setBusy(false);
     if (response.ok) {
-      const result = (await response.json()) as { possibleDuplicate: boolean };
-      setMessage(result.possibleDuplicate ? "Anfrage angelegt – möglicherweise ein Duplikat, bitte prüfen." : "Anfrage angelegt.");
+      const result = (await response.json()) as { requestId: string; possibleDuplicate: boolean };
+      setMessage(result.possibleDuplicate ? "Anfrage angelegt – möglicherweise ein Duplikat, bitte prüfen." : "Anfrage angelegt. Die Verarbeitung startet automatisch.");
+      setOpenId(result.requestId);
       formElement.reset();
       router.refresh();
       return;
     }
     const body = (await response.json().catch(() => null)) as { error?: { title?: string } } | null;
+    setFailed(true);
     setMessage(body?.error?.title ?? "Upload fehlgeschlagen.");
   }
 
   return (
-    <form onSubmit={submit} aria-busy={busy}>
-      <p>
-        <label htmlFor="files">E-Mail (.eml, .msg) oder Dateien (.pdf, .xlsx, .docx)</label>
-        <br />
-        <input id="files" name="files" type="file" multiple required accept=".eml,.msg,.pdf,.xlsx,.docx" />
-      </p>
-      <button type="submit" disabled={busy}>
-        {busy ? "Wird hochgeladen …" : "Anfrage hochladen"}
-      </button>
-      {message && <p role="status">{message}</p>}
+    <form onSubmit={submit} aria-busy={busy} className="upload">
+      <div>
+        <h2>Anfrage hochladen</h2>
+        <p className="muted">E-Mail oder die Dateien einer Anfrage, auch mehrere zusammen</p>
+      </div>
+      <div className="upload-row">
+        <div className="dropzone">
+          <label htmlFor="files">E-Mail (.eml, .msg) oder Dateien (.pdf, .xlsx, .docx)</label>
+          <input id="files" name="files" type="file" multiple required accept=".eml,.msg,.pdf,.xlsx,.docx" />
+        </div>
+        <button type="submit" className="btn-primary" disabled={busy}>
+          {busy ? "Wird hochgeladen …" : "Anfrage hochladen"}
+        </button>
+      </div>
+      {message && (
+        <div role={failed ? "alert" : "status"}>
+          <span>{message}</span>
+          {!failed && openId && <Link href={`/requests/${openId}`}>Anfrage öffnen</Link>}
+        </div>
+      )}
     </form>
   );
 }
diff --git a/src/app/review.css b/src/app/review.css
new file mode 100644
index 0000000..7ea38ee
--- /dev/null
+++ b/src/app/review.css
@@ -0,0 +1,297 @@
+/* Pilot design system (#52), part 3: the review page – two columns (fields, positions, documents |
+ * sticky source panel and decision), collapsing to one column on narrow screens. */
+
+.review-head {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.review-meta {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 13px;
+  color: var(--muted);
+}
+.review-meta .erp {
+  color: var(--text);
+}
+.review-meta .erp strong {
+  font-family: var(--mono);
+  font-weight: 500;
+}
+.attention-tag {
+  background: var(--warn-bg);
+  color: var(--warn-text);
+  border: 1px solid var(--warn-line);
+  border-radius: 2px;
+  padding: 1px 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* Duplicate banner */
+.duplicate {
+  background: var(--attention);
+  border: 1px solid var(--warn-line);
+  border-radius: var(--radius);
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.duplicate h2 {
+  color: var(--warn-text);
+}
+.duplicate-actions {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+.duplicate-actions form {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+.duplicate-actions .sep {
+  width: 1px;
+  align-self: stretch;
+  background: #e2cf9f;
+}
+.duplicate-actions .field {
+  min-width: min(260px, 100%);
+  max-width: 420px;
+  flex: 1;
+}
+.duplicate-actions input {
+  font-size: 13px;
+}
+.duplicate-hint {
+  font-size: 12.5px;
+  color: var(--warn-text);
+}
+
+/* Layout */
+.review-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+.review-main {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0;
+}
+.review-aside {
+  position: sticky;
+  top: 78px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* Header fields */
+.fields-table td,
+.fields-table th {
+  padding-top: 11px;
+  padding-bottom: 11px;
+}
+.fields-table thead th {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+.fields-table tr.attention {
+  background: var(--attention);
+}
+.fields-table tr.selected {
+  background: var(--selected);
+}
+.value-link {
+  color: var(--text);
+  text-decoration: none;
+  text-wrap: pretty;
+}
+.value-link:hover {
+  color: var(--brand);
+  text-decoration: underline;
+}
+.fields-table .correct input {
+  font-size: 13px;
+  padding: 6px 8px;
+  width: 11rem;
+}
+.fields-table .source-col {
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+/* Positions */
+.items-table {
+  min-width: 640px;
+}
+.items-table td {
+  padding: 4px;
+}
+.items-table td:first-child {
+  padding: 10px 8px 10px 20px;
+  color: var(--muted);
+  width: 36px;
+}
+.item-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 6px 8px;
+  border-radius: var(--radius);
+  color: var(--text);
+  text-decoration: none;
+  font-size: 13.5px;
+}
+.item-cell:hover {
+  color: var(--text);
+  background: var(--bg);
+}
+td.attention .item-cell {
+  background: var(--attention);
+}
+.item-cell[aria-current="true"] {
+  background: var(--selected);
+  box-shadow: inset 0 0 0 1.5px var(--brand);
+}
+
+/* Documents */
+.doc-row {
+  padding: 11px 20px;
+  border-bottom: 1px solid var(--rule);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.doc-row:last-child {
+  border-bottom: 0;
+}
+.doc-row > div {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+}
+.doc-row a {
+  font-weight: 500;
+}
+.doc-note,
+.doc-note[role="note"] {
+  font-size: 12.5px;
+  color: var(--warn-text);
+  background: none;
+  padding: 0;
+}
+.panel-source {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.panel-source a {
+  font-size: 13px;
+}
+
+/* Aside: selected value, correction, source */
+.panel {
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.panel h2.big {
+  font-size: 17px;
+}
+.panel-value {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.panel-value strong {
+  font-size: 15px;
+  font-weight: 600;
+}
+.correction-row {
+  display: flex;
+  gap: 8px;
+}
+.correction-row input {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+}
+.source-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.source-head strong {
+  font-weight: 600;
+  font-size: 13.5px;
+  word-break: break-word;
+}
+.source-lines {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius);
+  background: var(--bg);
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+.source-lines li {
+  display: flex;
+  gap: 8px;
+  padding: 6px 10px;
+}
+.source-lines li + li {
+  border-top: 1px solid var(--rule);
+}
+.source-lines li.cited {
+  background: var(--cited);
+  font-weight: 500;
+}
+.line-label {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--muted);
+  min-width: 52px;
+  flex-shrink: 0;
+  padding-top: 1px;
+}
+.line-text {
+  word-break: break-word;
+}
+mark {
+  background: var(--mark);
+  color: var(--text);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+.decision form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.decision input {
+  font-size: 13px;
+}
+
+@media (max-width: 960px) {
+  .review-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .review-aside {
+    position: static;
+  }
+}
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 9f049f1..3203143 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -1,23 +1,29 @@
 import Link from "next/link";
+import { Brand } from "@/app/_components/app-header";
 import { AuthForm } from "@/app/_components/auth-form";
 
 // Invite-only: the link from the invitation carries its id (`/signup?invitation=<id>`).
 export default async function SignupPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
   const { invitation } = await searchParams;
   return (
-    <main>
-      <h1>Konto anlegen</h1>
-      {invitation ? (
-        <>
-          <p>Verwenden Sie die E-Mail-Adresse, an die die Einladung ging.</p>
-          <AuthForm mode="sign-up" invitationId={invitation} />
-        </>
-      ) : (
-        <p role="alert">Ein Konto kann nur über einen Einladungslink angelegt werden. Bitte wenden Sie sich an Ihre Administration.</p>
-      )}
-      <p>
-        <Link href="/login">Zur Anmeldung</Link>
-      </p>
+    <main className="auth">
+      <div className="auth-inner">
+        <Brand className="auth-brand" />
+        <div className="card">
+          <h1>Konto anlegen</h1>
+          {invitation ? (
+            <>
+              <p className="muted">Verwenden Sie die E-Mail-Adresse, an die die Einladung ging.</p>
+              <AuthForm mode="sign-up" invitationId={invitation} />
+            </>
+          ) : (
+            <p>Ein Konto kann nur über einen Einladungslink angelegt werden. Bitte wenden Sie sich an die Administration Ihrer Firma.</p>
+          )}
+        </div>
+        <p className="auth-foot">
+          <Link href="/login">Zur Anmeldung</Link>
+        </p>
+      </div>
     </main>
   );
 }
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index 6468a99..ab33073 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -1,7 +1,6 @@
 import Link from "next/link";
-import { headers } from "next/headers";
 import { notFound, redirect } from "next/navigation";
-import { currentActor, getRuntime } from "@/app/_server/runtime";
+import { getRuntime, requestActor } from "@/app/_server/runtime";
 import { AuthorizationError, listCompanyUsers } from "@/features/identity";
 import { changeRoleAction, deactivateAction, reactivateAction } from "./actions";
 
@@ -19,12 +18,12 @@ const ERRORS: Record<string, string> = {
   input: "Bitte eine gültige Rolle wählen.",
   self: "Den eigenen Zugang können Sie nicht deaktivieren – das muss ein anderer Admin tun.",
 };
-const dateFormat = new Intl.DateTimeFormat("de-DE", { dateStyle: "short", timeZone: "Europe/Berlin" });
+const dateFormat = new Intl.DateTimeFormat("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", timeZone: "Europe/Berlin" });
 const pick = (table: Record<string, string>, code: string | undefined) => (code !== undefined && Object.hasOwn(table, code) ? table[code] : undefined);
 
 // User management for company admins (#30). Clerks get 404 – server-side, on render and in every action.
 export default async function UsersPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
-  const actor = await currentActor(await headers());
+  const actor = await requestActor();
   if (!actor) redirect("/login");
   let view: Awaited<ReturnType<typeof listCompanyUsers>>;
   try {
@@ -39,66 +38,87 @@ export default async function UsersPage({ searchParams }: { searchParams: Promis
 
   return (
     <main>
-      <p>
-        <Link href="/">← Start</Link>
-      </p>
-      <h1>Benutzer</h1>
+      <div className="page-head">
+        <h1>Benutzer</h1>
+        <Link href="/invite" className="btn-link">
+          Person einladen
+        </Link>
+      </div>
       {done && <p role="status">{done}</p>}
       {error && <p role="alert">{error}</p>}
-      <p>
-        <Link href="/invite">Person einladen</Link>
-      </p>
-      <table>
-        <thead>
-          <tr>
-            <th scope="col">Name</th>
-            <th scope="col">E-Mail</th>
-            <th scope="col">Rolle</th>
-            <th scope="col">Status</th>
-            <th scope="col">Aktionen</th>
-          </tr>
-        </thead>
-        <tbody>
-          {view.users.map((user) => (
-            <tr key={user.userId} data-testid={`user-${user.email}`}>
-              <th scope="row">{user.name}</th>
-              <td>{user.email}</td>
-              <td>
-                <form action={changeRoleAction}>
-                  <input type="hidden" name="userId" value={user.userId} />
-                  <label>
-                    <span className="visually-hidden">Rolle von {user.email}</span>
-                    <select name="role" defaultValue={user.role}>
-                      <option value="clerk">{ROLE_LABEL.clerk}</option>
-                      <option value="admin">{ROLE_LABEL.admin}</option>
-                    </select>
-                  </label>{" "}
-                  <button type="submit">Rolle speichern</button>
-                </form>
-              </td>
-              <td>{user.active ? "aktiv" : "deaktiviert"}</td>
-              <td>
-                <form action={user.active ? deactivateAction : reactivateAction}>
-                  <input type="hidden" name="userId" value={user.userId} />
-                  <button type="submit">{user.active ? "Deaktivieren" : "Reaktivieren"}</button>
-                </form>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      <h2>Offene Einladungen</h2>
-      {view.invitations.length === 0 ? (
-        <p>Keine offenen Einladungen.</p>
-      ) : (
-        <ul>
-          {view.invitations.map((invitation) => (
-            <li key={invitation.id}>
-              {invitation.email} – {ROLE_LABEL[invitation.role] ?? invitation.role}, gültig bis {dateFormat.format(invitation.expiresAt)}
-            </li>
-          ))}
-        </ul>
-      )}
+      <section className="card" aria-label="Benutzerliste">
+        <div className="table-wrap">
+          <table className="users-table">
+            <thead>
+              <tr>
+                <th scope="col">Name</th>
+                <th scope="col">E-Mail</th>
+                <th scope="col">Status</th>
+                <th scope="col">Rolle</th>
+                <th scope="col" className="num">
+                  Zugang
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {view.users.map((user) => (
+                <tr key={user.userId} data-testid={`user-${user.email}`}>
+                  <th scope="row">
+                    {user.name}
+                    {user.userId === actor.userId && <span className="muted"> (Sie)</span>}
+                  </th>
+                  <td className="muted">{user.email}</td>
+                  <td>
+                    <span className={user.active ? "pill pill-success" : "pill pill-neutral"}>{user.active ? "aktiv" : "deaktiviert"}</span>
+                  </td>
+                  <td>
+                    <form action={changeRoleAction} className="inline-form">
+                      <input type="hidden" name="userId" value={user.userId} />
+                      <label>
+                        <span className="visually-hidden">Rolle von {user.email}</span>
+                        <select name="role" defaultValue={user.role}>
+                          <option value="clerk">{ROLE_LABEL.clerk}</option>
+                          <option value="admin">{ROLE_LABEL.admin}</option>
+                        </select>
+                      </label>
+                      <button type="submit" className="btn-small">
+                        Rolle speichern
+                      </button>
+                    </form>
+                  </td>
+                  <td className="num">
+                    <form action={user.active ? deactivateAction : reactivateAction}>
+                      <input type="hidden" name="userId" value={user.userId} />
+                      <button type="submit" className={user.active ? "btn-danger btn-small" : "btn-small"}>
+                        {user.active ? "Deaktivieren" : "Reaktivieren"}
+                      </button>
+                    </form>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <p className="card-note">Der letzte aktive Admin kann nicht herabgestuft oder deaktiviert werden. Niemand kann sich selbst deaktivieren.</p>
+      </section>
+      <section className="card" aria-labelledby="invitations-heading">
+        <h2 id="invitations-heading" className="card-title">
+          Offene Einladungen
+        </h2>
+        {view.invitations.length === 0 ? (
+          <p className="card-note">Keine offenen Einladungen.</p>
+        ) : (
+          view.invitations.map((invitation) => (
+            <div key={invitation.id} className="invite-row">
+              <span>{invitation.email}</span>
+              <span className="muted">{ROLE_LABEL[invitation.role] ?? invitation.role}</span>
+              <span className="muted">
+                gültig bis <span className="mono">{dateFormat.format(invitation.expiresAt)}</span>
+              </span>
+            </div>
+          ))
+        )}
+      </section>
     </main>
   );
 }
diff --git a/src/features/identity/actor.ts b/src/features/identity/actor.ts
index b37759c..e97be89 100644
--- a/src/features/identity/actor.ts
+++ b/src/features/identity/actor.ts
@@ -23,5 +23,5 @@ export async function getActor(auth: Auth, db: Database, headers: Headers): Prom
   if (!membership || !isCompanyRole(membership.role)) return null;
   const active = session.session.activeOrganizationId;
   if (active && active !== membership.companyId) return null;
-  return { userId: session.user.id, companyId: membership.companyId, role: membership.role };
+  return { userId: session.user.id, companyId: membership.companyId, role: membership.role, name: session.user.name };
 }
diff --git a/src/features/identity/authorize.ts b/src/features/identity/authorize.ts
index d817c61..d397f26 100644
--- a/src/features/identity/authorize.ts
+++ b/src/features/identity/authorize.ts
@@ -8,6 +8,8 @@ export interface Actor {
   userId: string;
   companyId: string;
   role: CompanyRole;
+  /** Display name from the session – for the UI only, never for authorization. */
+  name?: string;
 }
 
 export type Action = "requests.process" | "users.invite" | "users.manage";