diff --git a/apps/agent-forge/e2e/a11y.spec.ts b/apps/agent-forge/e2e/a11y.spec.ts
index a3a396e0..38a0b9b5 100644
--- a/apps/agent-forge/e2e/a11y.spec.ts
+++ b/apps/agent-forge/e2e/a11y.spec.ts
@@ -140,6 +140,8 @@ const ITEM_H1: Record<string, string> = {
   '/prompts/e2e-prompt?diff=1,2': 'e2e-prompt',
   '/prompts/:name': 'e2e-prompt',
   '/hub/:namespace': 'e2e-namespace',
+  '/evals/queues/:id': 'support-review',
+  '/evals/evaluators/:id': 'answered',
 };
 for (const { label, path } of SCANS) {
   test(`${label} keeps the landmarks and passes axe`, async ({ page }) => {
@@ -246,7 +248,7 @@ test('the axe scans see the stubbed daemon data, not the down state', async ({ p
     ['/hub', 'e2e-namespace'],
     ['/hub/e2e-namespace', 'order-policy'],
     ['/evals/queues', 'support-review'],
-    ['/evals/queues/e2e-queue', 'lookup_order'],
+    ['/evals/queues/e2e-queue', 'Where is my order?'],
   ]) {
     await page.goto(`/?token=e2e-studio-token#${path}`);
     await expect(main.getByText(text).first(), path).toBeVisible();
diff --git a/apps/agent-forge/e2e/docShots.spec.ts b/apps/agent-forge/e2e/docShots.spec.ts
index e6a94e74..dfd5bfa2 100644
--- a/apps/agent-forge/e2e/docShots.spec.ts
+++ b/apps/agent-forge/e2e/docShots.spec.ts
@@ -393,7 +393,7 @@ test('datasets: one dataset with its examples', async ({ page }) => {
 
 test('evaluators: the rule list', async ({ page }) => {
   await open(page, '/evals/evaluators');
-  await expect(rows(page)).toHaveCount(2);
+  await expect(page.getByRole('main').locator('.ev-card')).toHaveCount(2);
   await expect(page.getByRole('switch', { name: 'answered enabled' })).toBeChecked();
   await shoot(page, 'evaluators');
 });
@@ -1214,3 +1214,140 @@ test('x-threads: detail at 375 wide', async ({ page }) => {
   await shoot(page, 'x-thread-narrow');
   await page.screenshot({ path: path.join(OUT, 'studio-x-thread-narrow-full.png'), fullPage: true });
 });
+
+// --- Evaluators and annotation queues (x- shots, P7) -------------------------
+
+const RULES = [
+  { rule_id: 'e2e-evaluator', name: 'answered', enabled: true, filter: { agent_id: 'e2e-agent', status: 'ok' }, sample_rate: 1, kind: 'code', config: { source: '(trace) => (trace.output ? 1 : 0)' } },
+  { rule_id: 'e2e-judge', name: 'polite', enabled: false, filter: {}, sample_rate: 0.5, kind: 'judge', config: { model: 'openai/gpt-4o-mini', rubric: 'Is the reply polite? Score 1 when it is courteous and calm, 0 otherwise.' } },
+  { rule_id: 'x-refund', name: 'refund-policy-cited', enabled: true, filter: { name_contains: 'refund' }, sample_rate: 0.25, kind: 'judge', config: { model: 'anthropic/claude-haiku', rubric: 'Does the reply cite the refund policy?' } },
+  { rule_id: 'x-tools', name: 'tool-calls-under-budget-for-every-order-lookup-in-the-support-fleet', enabled: true, filter: { status: 'error' }, sample_rate: 0.1, kind: 'code', config: { source: '(trace) => trace.observations.length < 12 ? 1 : 0' } },
+].map((r) => ({ created_at: NOW - 30 * HOUR, updated_at: NOW - 30 * HOUR, ...r }));
+
+const QUEUES = [
+  { queue_id: 'e2e-queue', name: 'support-review', rubric: [{ name: 'helpfulness', min: 0, max: 5 }, { name: 'tone', min: 1, max: 3 }], counts: { pending: 1, done: 2, skipped: 0 } },
+  { queue_id: 'x-refunds', name: 'refund-escalations', rubric: [{ name: 'correct', min: 0, max: 1 }, { name: 'policy cited', min: 0, max: 1 }, { name: 'empathy', min: 1, max: 5 }], counts: { pending: 14, done: 41, skipped: 3 } },
+  { queue_id: 'x-new', name: 'multilingual-greetings-weekly-spot-check', rubric: [{ name: 'fluency' }], counts: { pending: 25, done: 0, skipped: 0 } },
+  { queue_id: 'x-done', name: 'october-regressions', rubric: [{ name: 'fixed', min: 0, max: 1 }], counts: { pending: 0, done: 57, skipped: 4 } },
+].map((q, i) => ({ created_at: NOW - (i + 1) * 26 * HOUR, ...q }));
+
+async function evaluatorList(page: Page, list: unknown[]) {
+  await page.route('**/observe/api/v1/evaluators?**', (route) =>
+    route.request().method() === 'GET' ? json(route, { evaluators: list, total: list.length, limit: 50, offset: 0 }) : route.fallback(),
+  );
+}
+
+async function queueList(page: Page, list: unknown[]) {
+  await page.route('**/observe/api/v1/queues?**', (route) =>
+    route.request().method() === 'GET' ? json(route, { queues: list, total: list.length, limit: 50, offset: 0 }) : route.fallback(),
+  );
+}
+
+const main = (page: Page) => page.getByRole('main');
+
+test('evals x: evaluators grid', async ({ page }) => {
+  await evaluatorList(page, RULES);
+  await open(page, '/evals/evaluators');
+  await expect(main(page).getByRole('switch', { name: 'polite enabled' })).toBeVisible();
+  await shoot(page, 'x-evals-evaluators-grid');
+});
+
+test('evals x: evaluators empty', async ({ page }) => {
+  await evaluatorList(page, []);
+  await open(page, '/evals/evaluators');
+  await expect(main(page).locator('.empty-state')).toBeVisible();
+  await shoot(page, 'x-evals-evaluators-empty');
+});
+
+test('evals x: new evaluator form (code rule)', async ({ page }) => {
+  await open(page, '/evals/evaluators');
+  await page.getByRole('button', { name: 'New evaluator' }).first().click();
+  await expect(page.getByRole('form', { name: 'New evaluator' })).toBeVisible();
+  await shoot(page, 'x-evals-evaluator-new-code');
+});
+
+test('evals x: new evaluator form (LLM judge)', async ({ page }) => {
+  // A stored provider key enables the judge option (no real key is sent anywhere: the route answers in the browser).
+  await page.route('**/settings/providers', (route) =>
+    route.request().method() === 'GET'
+      ? json(route, [
+          { provider: 'openai', hasKey: true, masked: '<your-key>', envKey: false },
+          { provider: 'anthropic', hasKey: false, masked: null, envKey: false },
+        ])
+      : route.fallback(),
+  );
+  await open(page, '/evals/evaluators');
+  await page.getByRole('button', { name: 'New evaluator' }).first().click();
+  const form = page.getByRole('form', { name: 'New evaluator' });
+  await form.getByRole('radio', { name: 'LLM judge' }).check();
+  await form.locator('[name="evaluator-name"]').fill('helpful');
+  await form.locator('[name="evaluator-model"]').fill('gpt-4o-mini');
+  await form.locator('[name="evaluator-rubric"]').fill('Score 1 when the reply answers the customer question with the order status, 0 otherwise.');
+  await shoot(page, 'x-evals-evaluator-new-judge');
+});
+
+test('evals x: evaluator edit view (code rule)', async ({ page }) => {
+  await open(page, '/evals/evaluators/e2e-evaluator');
+  await expect(page.getByRole('form', { name: 'Edit evaluator' })).toBeVisible();
+  await shoot(page, 'x-evals-evaluator-edit-code');
+});
+
+test('evals x: evaluator edit view (LLM judge)', async ({ page }) => {
+  await page.route('**/observe/api/v1/evaluators/e2e-judge', (route) =>
+    route.request().method() === 'GET' ? json(route, { evaluator: RULES[1] }) : route.fallback(),
+  );
+  await open(page, '/evals/evaluators/e2e-judge');
+  await expect(page.locator('[name="evaluator-rubric"]')).toBeVisible();
+  await shoot(page, 'x-evals-evaluator-edit-judge');
+});
+
+test('evals x: queues list', async ({ page }) => {
+  await queueList(page, QUEUES);
+  await open(page, '/evals/queues');
+  await expect(main(page).getByText('refund-escalations').first()).toBeVisible();
+  await shoot(page, 'x-evals-queues-list');
+});
+
+test('evals x: queues empty', async ({ page }) => {
+  await queueList(page, []);
+  await open(page, '/evals/queues');
+  await expect(main(page).locator('.empty-state')).toBeVisible();
+  await shoot(page, 'x-evals-queues-empty');
+});
+
+test('evals x: new queue form with rubric rows', async ({ page }) => {
+  await queueList(page, QUEUES);
+  await open(page, '/evals/queues');
+  const toggle = page.getByRole('button', { name: 'New queue' });
+  if (await toggle.count()) await toggle.first().click();
+  const form = page.getByRole('form', { name: 'New annotation queue' });
+  await form.locator('[name="queue-name"]').fill('billing-review');
+  await form.locator('[name="rubric-name-0"]').fill('correct');
+  await form.locator('[name="rubric-min-0"]').fill('0');
+  await form.locator('[name="rubric-max-0"]').fill('1');
+  await form.getByRole('button', { name: /Add rubric (row|entry)/ }).click();
+  await form.locator('[name="rubric-name-1"]').fill('empathy');
+  await form.locator('[name="rubric-description-1"]').fill('Did the reply acknowledge the problem?');
+  await form.locator('[name="rubric-min-1"]').fill('1');
+  await form.locator('[name="rubric-max-1"]').fill('5');
+  await shoot(page, 'x-evals-queues-new');
+});
+
+test('evals x: queue review at 375 wide', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 800 });
+  await open(page, '/evals/queues/e2e-queue');
+  await expect(page.locator('[data-review-trace="e2e-trace"]')).toBeVisible();
+  await shoot(page, 'x-evals-queue-review-375');
+  await page.getByRole('form', { name: 'Scores' }).getByRole('button', { name: 'Skip' }).scrollIntoViewIfNeeded();
+  await shoot(page, 'x-evals-queue-review-375-rubric');
+});
+
+test('evals x: queue review, queue is empty', async ({ page }) => {
+  await page.route('**/observe/api/v1/queues/e2e-queue/next', (route) => route.fulfill({ status: 204 }));
+  await page.route('**/observe/api/v1/queues/e2e-queue', (route) =>
+    json(route, { queue: { ...QUEUES[0], counts: { pending: 0, done: 2, skipped: 1 } } }),
+  );
+  await open(page, '/evals/queues/e2e-queue');
+  await expect(main(page).getByText('Queue is empty')).toBeVisible();
+  await shoot(page, 'x-evals-queue-empty');
+});
diff --git a/apps/agent-forge/e2e/revamp.spec.ts b/apps/agent-forge/e2e/revamp.spec.ts
index 89c9bf1d..e4390fc9 100644
--- a/apps/agent-forge/e2e/revamp.spec.ts
+++ b/apps/agent-forge/e2e/revamp.spec.ts
@@ -208,9 +208,11 @@ const CONTROLS: Record<string, (main: Locator, page: Page) => Promise<void>> = {
     await expect(main.getByRole('combobox', { name: 'State' })).toHaveValue('true');
     await expect(main.getByRole('switch', { name: 'answered enabled' })).toBeChecked();
   },
-  '/evals/evaluators/:id': async (main) => {
+  '/evals/evaluators/:id': async (main, page) => {
     await expect(main.getByRole('textbox', { name: 'Trace id' })).toHaveValue('e2e-trace');
-    await expect(main.getByRole('link', { name: 'All evaluators' })).toHaveAttribute('href', '#/evals/evaluators?kind=code&enabled=true');
+    // The way back is the header breadcrumb (the screen header sits outside <main>).
+    const crumbs = page.getByRole('navigation', { name: 'Breadcrumb' });
+    await expect(crumbs.getByRole('link', { name: 'Evaluators' })).toHaveAttribute('href', '#/evals/evaluators?kind=code&enabled=true');
   },
   '/prompts/:name': async (main) => {
     await expect(main.getByRole('combobox', { name: 'Compare version A' })).toHaveValue('1');
@@ -323,6 +325,8 @@ test('queue review at 1280px: a trace tree row name never wraps one letter per l
   await page.setViewportSize({ width: 1280, height: 800 });
   await page.goto(`${APP}#/evals/queues/e2e-queue`);
   await expect(page.locator('[data-review-trace="e2e-trace"]')).toBeVisible();
+  // The review opens on the root step's messages; the tree is the Trace view.
+  await page.getByRole('group', { name: 'Item view' }).getByRole('button', { name: 'Trace' }).click();
   const names = page.locator('[data-review-trace="e2e-trace"] .run-name');
   await expect(names.first()).toBeVisible();
   for (const name of await names.all()) {
diff --git a/apps/agent-forge/src/screens/datasets/DatasetsScreen.tsx b/apps/agent-forge/src/screens/datasets/DatasetsScreen.tsx
index 0510356c..cb8d8213 100644
--- a/apps/agent-forge/src/screens/datasets/DatasetsScreen.tsx
+++ b/apps/agent-forge/src/screens/datasets/DatasetsScreen.tsx
@@ -19,9 +19,9 @@ import { fmtInt } from '../../observe/format';
 import { Card } from '../../ui/Card';
 import { TablePager } from '../../ui/DataTable';
 import { EmptyState } from '../../ui/EmptyState';
-import { Skeleton } from '../../ui/Skeleton';
 import { useToast } from '../../ui/Toast';
 import { EvalsHeader } from '../evals/EvalsTabs';
+import { GridSkeleton } from '../evals/GridSkeleton';
 import { DatasetDetail } from './DatasetDetail';
 import { DATASETS_PAGE_SIZE, datasetPath, datasetsPath, parseOffset } from './datasetsUrl';
 
@@ -149,27 +149,6 @@ function DatasetCard({ dataset: d }: { dataset: ObserveDataset }) {
   );
 }
 
-/** The grid's first-load placeholder: six skeleton cards and one status line. */
-function GridSkeleton() {
-  return (
-    <div className="ds-grid-loading">
-      <span role="status" className="visually-hidden">
-        Loading datasets
-      </span>
-      <ul className="ds-grid" aria-hidden="true">
-        {Array.from({ length: 6 }, (_, i) => (
-          <li key={i} className="ds-card ds-card-skeleton">
-            <Skeleton width={28} height={28} radius="var(--radius)" />
-            <Skeleton width="55%" height={12} />
-            <Skeleton width="85%" height={10} />
-            <Skeleton width="40%" height={10} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
 function NewDatasetButton({ open, onClick }: { open: boolean; onClick: () => void }) {
   return (
     <button type="button" className="btn btn-primary" aria-expanded={open} aria-controls={open ? FORM_ID : undefined} onClick={onClick}>
@@ -263,7 +242,7 @@ function DatasetList() {
         />
       )}
       <ObserveError error={list.error} />
-      {list.loading && !list.data && <GridSkeleton />}
+      {list.loading && !list.data && <GridSkeleton label="Loading datasets" />}
       {list.data && (
         <DatasetGrid datasets={list.data.datasets} total={list.data.total} offset={offset} creating={creating} onNew={() => setCreating(true)} />
       )}
diff --git a/apps/agent-forge/src/screens/datasets/datasets.css b/apps/agent-forge/src/screens/datasets/datasets.css
index 8140553b..e7b925c2 100644
--- a/apps/agent-forge/src/screens/datasets/datasets.css
+++ b/apps/agent-forge/src/screens/datasets/datasets.css
@@ -1,26 +1,9 @@
 /*
  * Datasets (#/evals/datasets, #/evals/datasets/:name) and the trace header's "Add to dataset". Tokens only.
- * The `ds-*` rules are the Datasets screens'; the `datasets-*` ones are shared with the Evaluators and
- * Annotation queue screens and the trace header's dialogs.
+ * The `ds-*` rules here are the Datasets screens' own (the page and card grid they share with Evaluators and
+ * Annotation queues live in ../evals/evals.css); the `datasets-*` ones are small shared bits (notes, field
+ * labels, inline errors) and the trace header's dialogs.
  */
-.datasets-screen {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-width: 0;
-  padding: 12px 16px;
-  color: var(--text);
-}
-.datasets-title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-.datasets-title code {
-  font-family: var(--font-mono);
-  font-size: 13px;
-}
 .datasets-section-title {
   margin: 0;
   font-size: 13px;
@@ -31,23 +14,6 @@
   font-size: 13px;
   color: var(--text-muted);
 }
-.datasets-new,
-.dataset-example {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 0;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--surface);
-}
-.datasets-new-fields {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 8px;
-}
 .datasets-field {
   display: flex;
   flex-direction: column;
@@ -56,9 +22,6 @@
   font-size: 12px;
   color: var(--text-muted);
 }
-.datasets-field-wide {
-  flex: 1 1 240px;
-}
 .datasets-field input,
 .datasets-field select {
   min-width: 0;
@@ -103,25 +66,7 @@
   gap: 8px;
 }
 
-/* ---------- Datasets screens (ds-*) ---------- */
-.ds-screen {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-content: start;
-  gap: var(--space-4);
-  flex: none;
-  min-width: 0;
-  padding: var(--space-5) var(--page-gutter) var(--space-8);
-  color: var(--text);
-}
-.ds-mono {
-  font-family: var(--font-mono);
-  font-size: 12px;
-}
-.ds-faint {
-  color: var(--text-faint);
-}
-
+/* ---------- Datasets screens (ds-*; the shared card grid and page lives in ../evals/evals.css) ---------- */
 /* New dataset: a card above the grid. */
 .ds-new {
   gap: var(--space-3);
@@ -139,17 +84,6 @@
   align-items: flex-end;
   gap: var(--space-3);
 }
-.ds-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 0;
-}
-.ds-field-label {
-  font-size: var(--fs-meta);
-  font-weight: 500;
-  color: var(--text);
-}
 .ds-new-name {
   flex: 1 1 200px;
   max-width: 280px;
@@ -163,114 +97,6 @@
   margin-left: auto;
 }
 
-/* The grid: auto-fill cards; each card is one link. */
-.ds-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
-  gap: var(--space-3);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.ds-card {
-  display: flex;
-  min-width: 0;
-}
-.ds-card-link {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  min-width: 0;
-  padding: var(--space-4);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  color: var(--text);
-  text-decoration: none;
-  transition:
-    border-color var(--dur-fast) var(--ease),
-    background-color var(--dur-fast) var(--ease);
-}
-.ds-card-link:hover {
-  border-color: var(--border-strong);
-}
-.ds-card-link:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-.ds-card-top {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  min-width: 0;
-}
-.ds-card-icon {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--radius);
-  background: var(--accent-soft);
-  color: var(--accent);
-}
-.ds-card-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--fs-body);
-  font-weight: 600;
-}
-.ds-card-desc {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  overflow: hidden;
-  min-height: calc(2 * 1.5em);
-  font-size: var(--fs-table);
-  line-height: 1.5;
-  color: var(--text-muted);
-}
-.ds-card-desc-none {
-  color: var(--text-faint);
-  font-style: italic;
-}
-.ds-card-meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-1) var(--space-4);
-  margin-top: auto;
-  padding-top: var(--space-3);
-  border-top: 1px solid var(--border);
-  font-size: var(--fs-meta);
-  color: var(--text-muted);
-  font-variant-numeric: tabular-nums;
-}
-.ds-card-stat {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
-}
-.ds-card-stat svg {
-  color: var(--text-faint);
-}
-.ds-card-skeleton {
-  flex-direction: column;
-  gap: var(--space-3);
-  min-height: 132px;
-  padding: var(--space-4);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-}
-
 /* Dataset detail: the examples card, and the opened example beside it on wide screens. */
 .ds-detail {
   display: grid;
@@ -314,8 +140,3 @@
   gap: var(--space-4);
   padding: var(--space-4) var(--space-5);
 }
-@media (prefers-reduced-motion: reduce) {
-  .ds-card-link {
-    transition: none;
-  }
-}
diff --git a/apps/agent-forge/src/screens/evals/GridSkeleton.tsx b/apps/agent-forge/src/screens/evals/GridSkeleton.tsx
new file mode 100644
index 00000000..f6250322
--- /dev/null
+++ b/apps/agent-forge/src/screens/evals/GridSkeleton.tsx
@@ -0,0 +1,26 @@
+/**
+ * The first-load placeholder of an Evaluations card grid (`ds-grid`, see
+ * evals.css): six skeleton cards and one visually hidden status line.
+ */
+import { Skeleton } from '../../ui/Skeleton';
+
+/** Six shimmer cards; `label` is the status text screen readers hear ("Loading evaluators"). */
+export function GridSkeleton({ label }: { label: string }) {
+  return (
+    <div className="ds-grid-loading">
+      <span role="status" className="visually-hidden">
+        {label}
+      </span>
+      <ul className="ds-grid" aria-hidden="true">
+        {Array.from({ length: 6 }, (_, i) => (
+          <li key={i} className="ds-card ds-card-skeleton">
+            <Skeleton width={28} height={28} radius="var(--radius)" />
+            <Skeleton width="55%" height={12} />
+            <Skeleton width="85%" height={10} />
+            <Skeleton width="40%" height={10} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/apps/agent-forge/src/screens/evals/evals.css b/apps/agent-forge/src/screens/evals/evals.css
index 9f8005d7..075a57d9 100644
--- a/apps/agent-forge/src/screens/evals/evals.css
+++ b/apps/agent-forge/src/screens/evals/evals.css
@@ -69,9 +69,155 @@
   outline-offset: 2px;
 }
 
+/* ---------- The Evaluations page and card grid (ds-*), shared by Datasets, Evaluators and Annotation queues ---------- */
+.ds-screen {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
+  gap: var(--space-4);
+  flex: none;
+  min-width: 0;
+  padding: var(--space-5) var(--page-gutter) var(--space-8);
+  color: var(--text);
+}
+.ds-mono {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+/* A link drawn as a button (Back to queues, All evaluators) never shows the link underline. */
+.ds-screen a.btn {
+  text-decoration: none;
+}
+.ds-faint {
+  color: var(--text-faint);
+}
+
+.ds-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.ds-field-label {
+  font-size: var(--fs-meta);
+  font-weight: 500;
+  color: var(--text);
+}
+/* The grid: auto-fill cards; a card is one link (.ds-card-link), or a surface (.ds-card-surface) holding a link and its own controls. */
+.ds-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
+  gap: var(--space-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ds-card {
+  display: flex;
+  min-width: 0;
+}
+.ds-card-link,
+.ds-card-surface {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+  padding: var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  color: var(--text);
+  text-decoration: none;
+  transition:
+    border-color var(--dur-fast) var(--ease),
+    background-color var(--dur-fast) var(--ease);
+}
+.ds-card-link:hover,
+.ds-card-surface:hover {
+  border-color: var(--border-strong);
+}
+.ds-card-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.ds-card-top {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.ds-card-icon {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.ds-card-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--fs-body);
+  font-weight: 600;
+}
+.ds-card-desc {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  min-height: calc(2 * 1.5em);
+  font-size: var(--fs-table);
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+.ds-card-desc-none {
+  color: var(--text-faint);
+  font-style: italic;
+}
+.ds-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1) var(--space-4);
+  margin-top: auto;
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--border);
+  font-size: var(--fs-meta);
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ds-card-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+.ds-card-stat svg {
+  color: var(--text-faint);
+}
+.ds-card-skeleton {
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 132px;
+  padding: var(--space-4);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .evals-trace-link,
-  .evals-tabs .evals-tab {
+  .evals-tabs .evals-tab,
+  .ds-card-link,
+  .ds-card-surface {
     transition: none;
   }
 }
diff --git a/apps/agent-forge/src/screens/evaluators/EvaluatorCard.tsx b/apps/agent-forge/src/screens/evaluators/EvaluatorCard.tsx
new file mode 100644
index 00000000..beaccc11
--- /dev/null
+++ b/apps/agent-forge/src/screens/evaluators/EvaluatorCard.tsx
@@ -0,0 +1,96 @@
+/**
+ * One online evaluator rule as a card in the Evaluators grid: the kind icon,
+ * the name (the link to the rule's edit view, stretched over the card), the
+ * enabled switch (outside the link), the target filter, the sample rate and
+ * the last-run counts.
+ */
+import { Activity, Clock, Code2, Sparkles } from 'lucide-react';
+import { useId } from 'react';
+import type { ObserveEvaluator } from '../../observe/types';
+import { fmtDateTime, fmtInt } from '../../observe/format';
+import { filterSummary, type RuleRuns } from './evaluatorsUrl';
+
+/** The visible label per rule kind. */
+export const KIND_LABEL: Record<ObserveEvaluator['kind'], string> = { code: 'Code', judge: 'LLM judge' };
+
+/** The icon per rule kind: a code function, or an LLM judge. */
+export const KIND_ICON = { code: Code2, judge: Sparkles } as const;
+
+/** The enabled switch: a native checkbox with `role="switch"`, named "<rule> enabled". */
+function EnabledSwitch({ rule, on, onFlip }: { rule: ObserveEvaluator; on: boolean; onFlip: (next: boolean) => void }) {
+  return (
+    <label className="ev-switch-field">
+      <span className="ev-switch-state" aria-hidden="true">
+        {on ? 'On' : 'Off'}
+      </span>
+      <input
+        className="ev-switch"
+        type="checkbox"
+        role="switch"
+        aria-label={`${rule.name} enabled`}
+        checked={on}
+        onChange={(e) => onFlip(e.target.checked)}
+      />
+    </label>
+  );
+}
+
+interface EvaluatorCardProps {
+  rule: ObserveEvaluator;
+  /** The edit view's hash path (carrying the list's filters). */
+  href: string;
+  runs: RuleRuns | undefined;
+  /** The online-score read hit its cap: the 24h count is a floor (`N+`). */
+  capped: boolean;
+  on: boolean;
+  onFlip: (next: boolean) => void;
+}
+
+/** One rule card; the name is the link, and its hit area covers the card (except the switch). */
+export function EvaluatorCard({ rule, href, runs, capped, on, onFlip }: EvaluatorCardProps) {
+  const id = useId();
+  const Icon = KIND_ICON[rule.kind];
+  const target = filterSummary(rule.filter);
+  const count = runs?.runs24h ?? 0;
+  return (
+    <li className="ds-card">
+      <div className={on ? 'ds-card-surface ev-card' : 'ds-card-surface ev-card ev-card-off'}>
+        <div className="ds-card-top">
+          <span className={`ds-card-icon ev-icon ev-icon-${rule.kind}`} aria-hidden="true">
+            <Icon size={16} strokeWidth={1.75} />
+          </span>
+          <span className="ev-card-heading">
+            <a className="ev-card-name" href={`#${href}`} title={rule.name} aria-describedby={`${id}-kind ${id}-facts`}>
+              {rule.name}
+            </a>
+            <span className="ev-card-kind" id={`${id}-kind`}>
+              {KIND_LABEL[rule.kind]}
+            </span>
+          </span>
+          <EnabledSwitch rule={rule} on={on} onFlip={onFlip} />
+        </div>
+        <dl className="ev-card-facts" id={`${id}-facts`}>
+          <div className="ev-card-fact ev-card-target">
+            <dt className="overline">Target</dt>
+            <dd title={target}>{target}</dd>
+          </div>
+          <div className="ev-card-fact ev-card-sample">
+            <dt className="overline">Sample rate</dt>
+            <dd>{String(rule.sample_rate)}</dd>
+          </div>
+        </dl>
+        <div className="ds-card-meta">
+          <span className="ds-card-stat ev-card-runs">
+            <span className={count > 0 ? 'ev-dot ev-dot-on' : 'ev-dot'} aria-hidden="true" />
+            <Activity size={14} strokeWidth={1.75} aria-hidden="true" />
+            <span className="ev-runs-count">{`${fmtInt(count)}${capped ? '+' : ''}`}</span> runs (24h)
+          </span>
+          <span className="ds-card-stat ev-card-last">
+            <Clock size={14} strokeWidth={1.75} aria-hidden="true" />
+            {runs ? `Last run ${fmtDateTime(runs.lastRun)}` : 'Never run'}
+          </span>
+        </div>
+      </div>
+    </li>
+  );
+}
diff --git a/apps/agent-forge/src/screens/evaluators/EvaluatorDetail.tsx b/apps/agent-forge/src/screens/evaluators/EvaluatorDetail.tsx
index 396836a0..7a312330 100644
--- a/apps/agent-forge/src/screens/evaluators/EvaluatorDetail.tsx
+++ b/apps/agent-forge/src/screens/evaluators/EvaluatorDetail.tsx
@@ -7,16 +7,21 @@
  * the daemon), showing the value and comment; no score is written.
  * `?trace=` prefills the trace id.
  */
-import { useState, type FormEvent } from 'react';
+import { useState, type FormEvent, type ReactNode } from 'react';
+import { FlaskConical, Trash2 } from 'lucide-react';
 import { navigate } from '../../router/router';
 import { useRoute } from '../../router/useRoute';
 import { ObserveDaemonDown, ObserveError } from '../../observe/chrome';
 import { ObserveApiError, observeClient } from '../../observe/observeClient';
 import type { NewEvaluator, ObserveEvaluator, ObserveEvaluatorTestResult } from '../../observe/types';
 import { useAgents, useDaemonDown, useEvaluator } from '../../observe/useObserve';
+import { Card } from '../../ui/Card';
 import { EmptyState } from '../../ui/EmptyState';
+import { SkeletonRows } from '../../ui/Skeleton';
 import { useToast } from '../../ui/Toast';
+import { EvalsHeader } from '../evals/EvalsTabs';
 import { useProviderKeys } from '../playground/ModelPicker';
+import { KIND_LABEL } from './EvaluatorCard';
 import { draftFrom, evaluatorPatch } from './evaluatorDraft';
 import { EvaluatorForm } from './EvaluatorForm';
 import { evaluatorsPath, parseListState } from './evaluatorsUrl';
@@ -47,15 +52,25 @@ function TestOnTrace({ rule, prefill }: { rule: ObserveEvaluator; prefill: strin
   };
 
   return (
-    <form className="datasets-new" aria-label="Test on trace" onSubmit={(e) => void run(e)}>
-      <h3 className="datasets-section-title">Test on trace</h3>
-      <p className="datasets-note">Runs this rule once on one trace. No score is written.</p>
-      <div className="datasets-new-fields">
-        <label className="datasets-field datasets-field-wide">
-          <span>Trace id</span>
-          <input name="test-trace-id" type="text" value={traceId} onChange={(e) => setTraceId(e.target.value)} />
+    <form className="card ev-test" aria-label="Test on trace" onSubmit={(e) => void run(e)}>
+      <div className="ev-test-head">
+        <h3 className="card-title">Test on trace</h3>
+        <p className="card-description">Runs this rule once on one trace. No score is written.</p>
+      </div>
+      <div className="ev-test-fields">
+        <label className="ds-field ev-grow">
+          <span className="ds-field-label">Trace id</span>
+          <input
+            className="input ev-mono-input"
+            name="test-trace-id"
+            type="text"
+            value={traceId}
+            placeholder="Paste a trace id"
+            onChange={(e) => setTraceId(e.target.value)}
+          />
         </label>
         <button type="submit" className="btn" disabled={running || traceId.trim() === ''}>
+          <FlaskConical aria-hidden="true" />
           Test
         </button>
       </div>
@@ -65,7 +80,7 @@ function TestOnTrace({ rule, prefill }: { rule: ObserveEvaluator; prefill: strin
         </p>
       )}
       {result && (
-        <dl className="evaluators-result" aria-label="Test result">
+        <dl className="ev-result" aria-label="Test result">
           <dt>Value</dt>
           <dd>{result.value === null ? 'null' : String(result.value)}</dd>
           <dt>Comment</dt>
@@ -106,7 +121,7 @@ function EditRule({ rule, back, onSaved }: { rule: ObserveEvaluator; back: strin
   };
 
   return (
-    <>
+    <div className="ev-detail">
       <EvaluatorForm
         // A save re-reads the rule: a new `updated_at` restarts the form from it.
         key={rule.updated_at}
@@ -117,35 +132,59 @@ function EditRule({ rule, back, onSaved }: { rule: ObserveEvaluator; back: strin
         submitLabel="Save changes"
         onSubmit={save}
         actions={
-          <button type="button" className="btn btn-ghost" onClick={() => void remove()}>
+          <button type="button" className="btn btn-ghost btn-danger-text" onClick={() => void remove()}>
+            <Trash2 aria-hidden="true" />
             Delete
           </button>
         }
       />
       <TestOnTrace rule={rule} prefill={query.get('trace') ?? ''} />
-    </>
+    </div>
   );
 }
 
+/** The edit view while the rule loads: a card of skeleton lines. */
+const LoadingRule = () => (
+  <Card title="General">
+    <SkeletonRows rows={4} />
+  </Card>
+);
+
 /** `#/evals/evaluators/:id`; an unknown rule shows an empty state with the way back. */
 export function EvaluatorDetail({ ruleId }: { ruleId: string }) {
   const { query } = useRoute();
   const [refreshKey, setRefreshKey] = useState(0);
   const rule = useEvaluator(ruleId, refreshKey);
   const back = evaluatorsPath(parseListState(query));
-  const backLink = <a href={`#${back}`}>All evaluators</a>;
-  if (useDaemonDown(false, [rule])) return <ObserveDaemonDown />;
-  let body;
-  if (rule.loading && !rule.data) body = <p className="datasets-note">Loading evaluator...</p>;
+  const down = useDaemonDown(false, [rule]);
+  const name = rule.data?.name ?? ruleId;
+  let body: ReactNode;
+  if (down) body = <ObserveDaemonDown />;
+  else if (rule.loading && !rule.data) body = <LoadingRule />;
   else if (rule.error) body = <ObserveError error={rule.error} />;
-  else if (!rule.data) body = <EmptyState title="Evaluator not found" hint={`No evaluator '${ruleId}'.`} action={backLink} />;
+  else if (!rule.data)
+    body = (
+      <Card as="div">
+        <EmptyState
+          title="Evaluator not found"
+          hint={`No evaluator '${ruleId}'.`}
+          action={
+            <a className="btn" href={`#${back}`}>
+              All evaluators
+            </a>
+          }
+        />
+      </Card>
+    );
   else body = <EditRule rule={rule.data} back={back} onSaved={() => setRefreshKey((k) => k + 1)} />;
   return (
     <>
-      <nav className="datasets-nav" aria-label="Breadcrumb">
-        {backLink}
-      </nav>
-      <h2 className="datasets-title">Evaluator {rule.data ? <code>{rule.data.name}</code> : null}</h2>
+      <EvalsHeader
+        title={name}
+        description={rule.data ? `${KIND_LABEL[rule.data.kind]} evaluator, scoring live traces as they arrive` : undefined}
+        breadcrumbs={[{ label: 'Evaluations', href: '#/evals/scores' }, { label: 'Evaluators', href: `#${back}` }, { label: name }]}
+      />
+      <h2 className="visually-hidden">Evaluator {rule.data?.name}</h2>
       {body}
     </>
   );
diff --git a/apps/agent-forge/src/screens/evaluators/EvaluatorForm.tsx b/apps/agent-forge/src/screens/evaluators/EvaluatorForm.tsx
index 4081377e..4b6ea627 100644
--- a/apps/agent-forge/src/screens/evaluators/EvaluatorForm.tsx
+++ b/apps/agent-forge/src/screens/evaluators/EvaluatorForm.tsx
@@ -1,18 +1,21 @@
 /**
- * The evaluator form the list's "New evaluator" and the edit view share:
- * name, kind (`code` with a function textarea, or `judge` with a model and a
- * rubric), the trace filter (agent, status, name contains), the sample rate
- * and the enabled flag. A judge needs a provider key, stored in Studio's
- * settings or set as the provider's env var where Studio runs (judges run
- * with either): without one the judge option is disabled, with a hint that
- * links Settings.
- * A failed save (a taken name is the daemon's 409) shows inline.
+ * The evaluator form the list's "New evaluator" and the edit view share, one
+ * card per section: General (name, enabled, kind), Logic (`code`: the function
+ * in a mono editor; `judge`: a model and the rubric) and Sampling (the trace
+ * filter - agent, status, name contains - and the sample rate), over a footer
+ * that sticks to the bottom of the screen with the save actions. A judge needs
+ * a provider key, stored in Studio's settings or set as the provider's env var
+ * where Studio runs (judges run with either): without one the judge option is
+ * disabled, with a hint that links Settings.
+ * A failed save (a taken name is the daemon's 409) shows inline in the footer.
  */
-import { useState, type FormEvent, type ReactNode } from 'react';
+import { useId, useState, type FormEvent, type ReactNode } from 'react';
 import type { ProviderKeyStatus } from '../../../shared/wireTypes';
 import { ObserveApiError } from '../../observe/observeClient';
 import type { NewEvaluator, ObserveAgentRow } from '../../observe/types';
+import { Card } from '../../ui/Card';
 import { MOCK_PROVIDER, defaultProvider, providerOptions } from '../playground/request';
+import { KIND_ICON } from './EvaluatorCard';
 import { draftProblem, toNewEvaluator, type EvaluatorDraft } from './evaluatorDraft';
 
 type SetField = <K extends keyof EvaluatorDraft>(field: K, value: EvaluatorDraft[K]) => void;
@@ -26,6 +29,54 @@ const saveError = (error: unknown): string =>
 /** The providers a judge can run on: a key stored in Settings or the provider's env var (`envKey`) both count. */
 const judgeKeys = (keys: readonly ProviderKeyStatus[]): ProviderKeyStatus[] => keys.map((k) => ({ ...k, hasKey: k.hasKey || k.envKey }));
 
+const KINDS: { kind: EvaluatorDraft['kind']; title: string; description: string }[] = [
+  { kind: 'code', title: 'Code', description: 'A JavaScript function of the trace returns the score.' },
+  { kind: 'judge', title: 'LLM judge', description: 'A model grades the trace against your rubric.' },
+];
+
+/** One kind as a radio card: the native radio, the kind icon, its title (the radio's name) and a line on what it does. */
+function KindOption({
+  option,
+  checked,
+  disabled,
+  describedBy,
+  onChoose,
+}: {
+  option: (typeof KINDS)[number];
+  checked: boolean;
+  disabled: boolean;
+  describedBy?: string;
+  onChoose: () => void;
+}) {
+  const id = useId();
+  const Icon = KIND_ICON[option.kind];
+  return (
+    <label className="ev-kind-option">
+      <span className={`ds-card-icon ev-icon ev-icon-${option.kind}`} aria-hidden="true">
+        <Icon size={16} strokeWidth={1.75} />
+      </span>
+      <span className="ev-kind-text">
+        <span className="ev-kind-title" id={`${id}-title`}>
+          {option.title}
+        </span>
+        <span className="ev-kind-desc" id={`${id}-desc`}>
+          {option.description}
+        </span>
+      </span>
+      <input
+        type="radio"
+        name="evaluator-kind"
+        value={option.kind}
+        checked={checked}
+        disabled={disabled}
+        aria-labelledby={`${id}-title`}
+        aria-describedby={describedBy ?? `${id}-desc`}
+        onChange={onChoose}
+      />
+    </label>
+  );
+}
+
 function KindField({
   draft,
   choose,
@@ -36,26 +87,25 @@ function KindField({
   judgeAllowed: boolean;
 }) {
   return (
-    <fieldset className="evaluators-kind">
-      <legend>Kind</legend>
-      <label>
-        <input type="radio" name="evaluator-kind" value="code" checked={draft.kind === 'code'} onChange={() => choose('code')} />
-        Code
-      </label>
-      <label>
-        <input
-          type="radio"
-          name="evaluator-kind"
-          value="judge"
-          checked={draft.kind === 'judge'}
-          disabled={!judgeAllowed}
-          aria-describedby={judgeAllowed ? undefined : 'evaluator-judge-hint'}
-          onChange={() => choose('judge')}
-        />
-        LLM judge
-      </label>
+    <fieldset className="ev-kind">
+      <legend className="ev-legend overline">Kind</legend>
+      <div className="ev-kind-options">
+        {KINDS.map((option) => {
+          const blocked = option.kind === 'judge' && !judgeAllowed;
+          return (
+            <KindOption
+              key={option.kind}
+              option={option}
+              checked={draft.kind === option.kind}
+              disabled={blocked}
+              describedBy={blocked ? 'evaluator-judge-hint' : undefined}
+              onChoose={() => choose(option.kind)}
+            />
+          );
+        })}
+      </div>
       {!judgeAllowed && (
-        <p id="evaluator-judge-hint" className="datasets-note">
+        <p id="evaluator-judge-hint" className="ev-hint">
           Add a provider key in <a href="#/settings">Settings</a> to use judge evaluators.
         </p>
       )}
@@ -63,36 +113,83 @@ function KindField({
   );
 }
 
-function FilterFields({ draft, set, agents }: { draft: EvaluatorDraft; set: SetField; agents: ObserveAgentRow[] }) {
-  const known = agents.some((a) => a.agent_id === draft.agentId);
+function GeneralCard({
+  draft,
+  set,
+  choose,
+  judgeAllowed,
+}: {
+  draft: EvaluatorDraft;
+  set: SetField;
+  choose: (kind: EvaluatorDraft['kind']) => void;
+  judgeAllowed: boolean;
+}) {
   return (
-    <fieldset className="evaluators-filter">
-      <legend>Runs on traces where</legend>
-      <label className="datasets-field">
-        <span>Agent</span>
-        <select name="evaluator-agent" value={draft.agentId} onChange={(e) => set('agentId', e.target.value)}>
-          <option value="">Any agent</option>
-          {draft.agentId && !known && <option value={draft.agentId}>{draft.agentId}</option>}
-          {agents.map((a) => (
-            <option key={a.agent_id} value={a.agent_id}>
-              {a.name ?? a.agent_id.slice(0, 8)}
-            </option>
-          ))}
-        </select>
-      </label>
-      <label className="datasets-field">
-        <span>Status</span>
-        <select name="evaluator-status" value={draft.status} onChange={(e) => set('status', e.target.value as EvaluatorDraft['status'])}>
-          <option value="">Any status</option>
-          <option value="ok">ok</option>
-          <option value="error">error</option>
-        </select>
-      </label>
-      <label className="datasets-field datasets-field-wide">
-        <span>Name contains</span>
-        <input name="evaluator-name-contains" type="text" value={draft.nameContains} onChange={(e) => set('nameContains', e.target.value)} />
-      </label>
-    </fieldset>
+    <Card title="General" description="What the rule is called, and whether it runs">
+      <div className="ev-form-body">
+        <div className="ev-row">
+          <label className="ds-field ev-grow">
+            <span className="ds-field-label">Name</span>
+            <input
+              className="input"
+              name="evaluator-name"
+              type="text"
+              value={draft.name}
+              placeholder="e.g. answered"
+              onChange={(e) => set('name', e.target.value)}
+            />
+          </label>
+          <label className="ev-enabled">
+            <input
+              className="ev-switch"
+              name="evaluator-enabled"
+              type="checkbox"
+              role="switch"
+              checked={draft.enabled}
+              onChange={(e) => set('enabled', e.target.checked)}
+            />
+            Enabled
+          </label>
+        </div>
+        <KindField draft={draft} choose={choose} judgeAllowed={judgeAllowed} />
+      </div>
+    </Card>
+  );
+}
+
+/** A labelled mono editor surface: the label is its header bar, `tag` a decorative language note. */
+function Editor({
+  label,
+  tag,
+  name,
+  value,
+  placeholder,
+  onChange,
+}: {
+  label: ReactNode;
+  tag: string;
+  name: string;
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="ev-editor">
+      <span className="ev-editor-bar">
+        <span className="ev-editor-label">{label}</span>
+        <span className="ev-editor-tag overline" aria-hidden="true">
+          {tag}
+        </span>
+      </span>
+      <textarea
+        name={name}
+        className="ev-editor-text"
+        spellCheck={false}
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </label>
   );
 }
 
@@ -102,10 +199,10 @@ function JudgeFields({ draft, set, keys }: { draft: EvaluatorDraft; set: SetFiel
   const isMock = draft.provider === MOCK_PROVIDER;
   return (
     <>
-      <div className="datasets-new-fields">
-        <label className="datasets-field">
-          <span>Provider</span>
-          <select name="evaluator-provider" value={draft.provider} onChange={(e) => set('provider', e.target.value)}>
+      <div className="ev-row">
+        <label className="ds-field ev-provider">
+          <span className="ds-field-label">Provider</span>
+          <select className="select" name="evaluator-provider" value={draft.provider} onChange={(e) => set('provider', e.target.value)}>
             {options.map((p) => (
               <option key={p} value={p}>
                 {p}
@@ -114,9 +211,10 @@ function JudgeFields({ draft, set, keys }: { draft: EvaluatorDraft; set: SetFiel
             <option value="">custom (provider/model)</option>
           </select>
         </label>
-        <label className="datasets-field datasets-field-wide">
-          <span>Model</span>
+        <label className="ds-field ev-grow">
+          <span className="ds-field-label">Model</span>
           <input
+            className="input"
             name="evaluator-model"
             type="text"
             value={isMock ? '' : draft.model}
@@ -126,23 +224,138 @@ function JudgeFields({ draft, set, keys }: { draft: EvaluatorDraft; set: SetFiel
           />
         </label>
       </div>
-      <label className="datasets-field">
-        <span>Rubric</span>
-        <textarea
-          name="evaluator-rubric"
-          className="evaluators-text"
-          rows={5}
-          value={draft.rubric}
-          placeholder="Score 1 when the reply answers the question, 0 otherwise."
-          onChange={(e) => set('rubric', e.target.value)}
-        />
-      </label>
+      <Editor
+        label="Rubric"
+        tag="Prompt"
+        name="evaluator-rubric"
+        value={draft.rubric}
+        placeholder="Score 1 when the reply answers the question, 0 otherwise."
+        onChange={(value) => set('rubric', value)}
+      />
     </>
   );
 }
 
+function LogicCard({ draft, set, keys }: { draft: EvaluatorDraft; set: SetField; keys: readonly ProviderKeyStatus[] }) {
+  const code = draft.kind === 'code';
+  return (
+    <Card
+      title="Logic"
+      description={code ? 'The function every sampled trace is scored by' : 'The model and rubric every sampled trace is graded by'}
+    >
+      <div className="ev-form-body">
+        {code ? (
+          <Editor
+            label={<>Function (trace) =&gt; number | {'{ value, comment }'}</>}
+            tag="JavaScript"
+            name="evaluator-source"
+            value={draft.source}
+            onChange={(value) => set('source', value)}
+          />
+        ) : (
+          <JudgeFields draft={draft} set={set} keys={keys} />
+        )}
+      </div>
+    </Card>
+  );
+}
+
+function SamplingCard({ draft, set, agents }: { draft: EvaluatorDraft; set: SetField; agents: ObserveAgentRow[] }) {
+  const known = agents.some((a) => a.agent_id === draft.agentId);
+  return (
+    <Card title="Sampling" description="Which finished traces the rule scores">
+      <div className="ev-form-body">
+        <fieldset className="ev-filter-set">
+          <legend className="ev-legend overline">Runs on traces where</legend>
+          <div className="ev-row">
+            <label className="ds-field ev-select-field">
+              <span className="ds-field-label">Agent</span>
+              <select className="select" name="evaluator-agent" value={draft.agentId} onChange={(e) => set('agentId', e.target.value)}>
+                <option value="">Any agent</option>
+                {draft.agentId && !known && <option value={draft.agentId}>{draft.agentId}</option>}
+                {agents.map((a) => (
+                  <option key={a.agent_id} value={a.agent_id}>
+                    {a.name ?? a.agent_id.slice(0, 8)}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="ds-field ev-select-field">
+              <span className="ds-field-label">Status</span>
+              <select
+                className="select"
+                name="evaluator-status"
+                value={draft.status}
+                onChange={(e) => set('status', e.target.value as EvaluatorDraft['status'])}
+              >
+                <option value="">Any status</option>
+                <option value="ok">ok</option>
+                <option value="error">error</option>
+              </select>
+            </label>
+            <label className="ds-field ev-grow">
+              <span className="ds-field-label">Name contains</span>
+              <input
+                className="input"
+                name="evaluator-name-contains"
+                type="text"
+                value={draft.nameContains}
+                onChange={(e) => set('nameContains', e.target.value)}
+              />
+            </label>
+          </div>
+        </fieldset>
+        <label className="ds-field ev-rate">
+          <span className="ds-field-label">Sample rate (0-1)</span>
+          <input
+            className="input"
+            name="evaluator-sample-rate"
+            type="number"
+            min={0}
+            max={1}
+            step="any"
+            value={draft.sampleRate}
+            onChange={(e) => set('sampleRate', e.target.value)}
+          />
+        </label>
+      </div>
+    </Card>
+  );
+}
+
+/** The sticky footer: why the draft can't be saved yet (or the save error), then the actions. */
+function FormFooter({
+  problem,
+  error,
+  actions,
+  submit,
+}: {
+  problem: string | undefined;
+  error: string | undefined;
+  actions: ReactNode;
+  submit: ReactNode;
+}) {
+  return (
+    <div className="ev-form-footer">
+      <div className="ev-form-status">
+        {error ? (
+          <p className="datasets-form-error" role="alert">
+            {error}
+          </p>
+        ) : (
+          problem && <span className="ev-hint">{problem}</span>
+        )}
+      </div>
+      <div className="ev-form-actions">
+        {actions}
+        {submit}
+      </div>
+    </div>
+  );
+}
+
 interface EvaluatorFormProps {
-  /** The form's accessible name and heading. */
+  /** The form's accessible name. */
   title: string;
   initial: EvaluatorDraft;
   keys: readonly ProviderKeyStatus[];
@@ -150,7 +363,7 @@ interface EvaluatorFormProps {
   submitLabel: string;
   /** Saves the rule; a rejection shows inline. Resolving `true` resets the form to `initial`. */
   onSubmit: (body: NewEvaluator) => Promise<boolean>;
-  /** Extra buttons beside the submit (the edit view's Delete). */
+  /** Extra buttons beside the submit (the edit view's Delete, the new form's Cancel). */
   actions?: ReactNode;
 }
 
@@ -182,59 +395,20 @@ export function EvaluatorForm({ title, initial, keys, agents, submitLabel, onSub
   };
 
   return (
-    <form className="datasets-new evaluators-form" aria-label={title} onSubmit={(e) => void submit(e)}>
-      <h3 className="datasets-section-title">{title}</h3>
-      <div className="datasets-new-fields">
-        <label className="datasets-field datasets-field-wide">
-          <span>Name</span>
-          <input name="evaluator-name" type="text" value={draft.name} placeholder="e.g. answered" onChange={(e) => set('name', e.target.value)} />
-        </label>
-        <label className="datasets-field">
-          <span>Sample rate (0-1)</span>
-          <input
-            name="evaluator-sample-rate"
-            type="number"
-            min={0}
-            max={1}
-            step="any"
-            value={draft.sampleRate}
-            onChange={(e) => set('sampleRate', e.target.value)}
-          />
-        </label>
-        <label className="evaluators-check">
-          <input name="evaluator-enabled" type="checkbox" checked={draft.enabled} onChange={(e) => set('enabled', e.target.checked)} />
-          Enabled
-        </label>
-      </div>
-      <KindField draft={draft} choose={choose} judgeAllowed={judgeAllowed} />
-      {draft.kind === 'code' ? (
-        <label className="datasets-field">
-          <span>Function (trace) =&gt; number | {'{ value, comment }'}</span>
-          <textarea
-            name="evaluator-source"
-            className="evaluators-text evaluators-code"
-            rows={8}
-            spellCheck={false}
-            value={draft.source}
-            onChange={(e) => set('source', e.target.value)}
-          />
-        </label>
-      ) : (
-        <JudgeFields draft={draft} set={set} keys={usable} />
-      )}
-      <FilterFields draft={draft} set={set} agents={agents} />
-      <div className="queues-form-actions">
-        {problem && <span className="datasets-note">{problem}</span>}
-        {actions}
-        <button type="submit" className="btn" disabled={saving || problem !== undefined}>
-          {submitLabel}
-        </button>
-      </div>
-      {error && (
-        <p className="datasets-form-error" role="alert">
-          {error}
-        </p>
-      )}
+    <form className="ev-form" aria-label={title} onSubmit={(e) => void submit(e)}>
+      <GeneralCard draft={draft} set={set} choose={choose} judgeAllowed={judgeAllowed} />
+      <LogicCard draft={draft} set={set} keys={usable} />
+      <SamplingCard draft={draft} set={set} agents={agents} />
+      <FormFooter
+        problem={problem}
+        error={error}
+        actions={actions}
+        submit={
+          <button type="submit" className="btn btn-primary" disabled={saving || problem !== undefined}>
+            {submitLabel}
+          </button>
+        }
+      />
     </form>
   );
 }
diff --git a/apps/agent-forge/src/screens/evaluators/EvaluatorsScreen.tsx b/apps/agent-forge/src/screens/evaluators/EvaluatorsScreen.tsx
index 006b0c7c..02eed5fd 100644
--- a/apps/agent-forge/src/screens/evaluators/EvaluatorsScreen.tsx
+++ b/apps/agent-forge/src/screens/evaluators/EvaluatorsScreen.tsx
@@ -1,5 +1,5 @@
 /**
- * `#/evals/evaluators` - the online evaluator rules (`GET /api/v1/evaluators`,
+ * `#/evals/evaluators` - the online evaluator rules as a card grid (`GET /api/v1/evaluators`,
  * `?kind=`/`?enabled=` filters and `?offset=` paging in the URL) with an
  * enabled switch per rule and its last-run counts, plus "New evaluator" - and
  * `#/evals/evaluators/:id`, one rule's edit view (see `EvaluatorDetail.tsx`).
@@ -11,23 +11,25 @@
  * scores under its own name). Past that cap the 24h count is a floor (`N+`).
  */
 import '../datasets/datasets.css';
-import '../queues/queues.css';
 import './evaluators.css';
 import { useMemo, useState } from 'react';
+import { Plus, Sparkles, X } from 'lucide-react';
 import { matchRoute, navigate } from '../../router/router';
 import { useRoute } from '../../router/useRoute';
 import { useAgents, useDaemonDown, useDaemonHealth, useEvaluators, useOnlineScores } from '../../observe/useObserve';
 import { ObserveDaemonDown, ObserveError } from '../../observe/chrome';
 import { observeClient } from '../../observe/observeClient';
-import type { NewEvaluator, ObserveEvaluator } from '../../observe/types';
-import { fmtDateTime, fmtInt } from '../../observe/format';
-import { DataTable, type Column } from '../../ui/DataTable';
+import type { NewEvaluator, ObserveEvaluator, ObserveEvaluatorList } from '../../observe/types';
+import { fmtInt } from '../../observe/format';
+import { Card } from '../../ui/Card';
+import { TablePager } from '../../ui/DataTable';
 import { EmptyState } from '../../ui/EmptyState';
 import { useToast } from '../../ui/Toast';
-import { Clip } from '../listFilters';
 import { EvalsHeader } from '../evals/EvalsTabs';
+import { GridSkeleton } from '../evals/GridSkeleton';
 import { useProviderKeys } from '../playground/ModelPicker';
 import { blankDraft } from './evaluatorDraft';
+import { EvaluatorCard } from './EvaluatorCard';
 import { EvaluatorDetail } from './EvaluatorDetail';
 import { EvaluatorForm } from './EvaluatorForm';
 import {
@@ -35,7 +37,6 @@ import {
   ONLINE_SCORES_CAP,
   evaluatorPath,
   evaluatorsPath,
-  filterSummary,
   groupOnlineRuns,
   parseListState,
   runsCapped,
@@ -43,6 +44,10 @@ import {
   type RuleRuns,
 } from './evaluatorsUrl';
 
+/** The list header's description (also over the daemon-down state). */
+const EVALUATORS_DESCRIPTION = 'Rules that score live traces as they arrive';
+const FORM_ID = 'new-evaluator-form';
+
 /** The enabled switches' optimistic state: a flip shows at once, a failed `PUT` flips it back with an error toast. */
 function useEnabledSwitch() {
   const toast = useToast();
@@ -60,50 +65,15 @@ function useEnabledSwitch() {
   return { isEnabled, flip };
 }
 
-function EnabledSwitch({ rule, on, onFlip }: { rule: ObserveEvaluator; on: boolean; onFlip: (next: boolean) => void }) {
-  return (
-    <label className="evaluators-switch">
-      <input type="checkbox" role="switch" aria-label={`${rule.name} enabled`} checked={on} onChange={(e) => onFlip(e.target.checked)} />
-      <span aria-hidden="true">{on ? 'On' : 'Off'}</span>
-    </label>
-  );
-}
-
-function columns(
-  runs: Map<string, RuleRuns>,
-  capped: boolean,
-  enabled: ReturnType<typeof useEnabledSwitch>
-): Column<ObserveEvaluator>[] {
-  return [
-    { key: 'name', header: 'Name', width: 200, render: (r) => <Clip text={r.name} /> },
-    { key: 'kind', header: 'Kind', width: 80, render: (r) => r.kind },
-    { key: 'filter', header: 'Filter', width: 220, hideBelow: 720, render: (r) => <Clip text={filterSummary(r.filter)} /> },
-    { key: 'sample', header: 'Sample rate', align: 'right', width: 100, hideBelow: 720, render: (r) => String(r.sample_rate) },
-    {
-      key: 'enabled',
-      header: 'Enabled',
-      width: 90,
-      render: (r) => <EnabledSwitch rule={r} on={enabled.isEnabled(r)} onFlip={(next) => void enabled.flip(r, next)} />,
-    },
-    { key: 'last', header: 'Last run', width: 140, render: (r) => fmtDateTime(runs.get(r.name)?.lastRun) },
-    {
-      key: 'runs',
-      header: 'Runs (24h)',
-      align: 'right',
-      width: 100,
-      render: (r) => `${fmtInt(runs.get(r.name)?.runs24h ?? 0)}${capped ? '+' : ''}`,
-    },
-  ];
-}
-
 /** The list's Kind and State selects; a change rewrites the URL (back to page one). */
 function ListFilters({ state }: { state: EvaluatorListState }) {
   const go = (next: Partial<EvaluatorListState>) => navigate(evaluatorsPath({ ...state, ...next, offset: 0 }), { replace: true });
   return (
-    <div className="evaluators-filters" role="group" aria-label="Filters">
-      <label className="datasets-field">
+    <div className="ev-filters" role="group" aria-label="Filters">
+      <label className="ev-filter">
         <span>Kind</span>
         <select
+          className="select"
           value={state.kind ?? ''}
           onChange={(e) => go({ kind: (e.target.value || undefined) as EvaluatorListState['kind'] })}
         >
@@ -112,9 +82,10 @@ function ListFilters({ state }: { state: EvaluatorListState }) {
           <option value="judge">judge</option>
         </select>
       </label>
-      <label className="datasets-field">
+      <label className="ev-filter">
         <span>State</span>
         <select
+          className="select"
           value={state.enabled === undefined ? '' : String(state.enabled)}
           onChange={(e) => go({ enabled: e.target.value === '' ? undefined : e.target.value === 'true' })}
         >
@@ -127,41 +98,136 @@ function ListFilters({ state }: { state: EvaluatorListState }) {
   );
 }
 
-/** "New evaluator": a button that opens the shared form; a create closes it and refreshes the list. */
-function NewEvaluator({ onCreated }: { onCreated: () => void }) {
+function NewEvaluatorButton({ open, onClick }: { open: boolean; onClick: () => void }) {
+  return (
+    <button type="button" className="btn btn-primary" aria-expanded={open} aria-controls={open ? FORM_ID : undefined} onClick={onClick}>
+      <Plus aria-hidden="true" />
+      New evaluator
+    </button>
+  );
+}
+
+/** "New evaluator": the shared form under a title row; a create closes it and refreshes the list. */
+function NewEvaluator({ onCreated, onClose }: { onCreated: () => void; onClose: () => void }) {
   const toast = useToast();
   const keys = useProviderKeys();
   const agents = useAgents();
-  const [open, setOpen] = useState(false);
-  if (!open)
-    return (
-      <div className="queues-form-actions">
-        <button type="button" className="btn" onClick={() => setOpen(true)}>
-          New evaluator
-        </button>
-      </div>
-    );
   const create = async (body: NewEvaluator) => {
     await observeClient.createEvaluator(body);
     toast.show({ tone: 'success', message: `Created evaluator ${body.name}.` });
-    setOpen(false);
     onCreated();
     return false;
   };
   return (
-    <EvaluatorForm
-      title="New evaluator"
-      initial={blankDraft(keys)}
-      keys={keys}
-      agents={agents.data ?? []}
-      submitLabel="Create evaluator"
-      onSubmit={create}
-      actions={
-        <button type="button" className="btn btn-ghost" onClick={() => setOpen(false)}>
-          Cancel
+    <div className="ev-new" id={FORM_ID}>
+      <div className="ev-new-head">
+        <h3 className="ev-new-title">New evaluator</h3>
+        <button type="button" className="btn btn-ghost btn-icon btn-sm" aria-label="Close new evaluator" onClick={onClose}>
+          <X aria-hidden="true" />
         </button>
-      }
-    />
+      </div>
+      <EvaluatorForm
+        title="New evaluator"
+        initial={blankDraft(keys)}
+        keys={keys}
+        agents={agents.data ?? []}
+        submitLabel="Create evaluator"
+        onSubmit={create}
+        actions={
+          <button type="button" className="btn btn-ghost" onClick={onClose}>
+            Cancel
+          </button>
+        }
+      />
+    </div>
+  );
+}
+
+/** The last-run counts per rule, from one capped read of the newest online scores. */
+function useRuleRuns(refreshKey: number) {
+  const online = useOnlineScores(ONLINE_SCORES_CAP, refreshKey);
+  const counts = useMemo(() => {
+    const now = Date.now();
+    const scores = online.data ?? [];
+    return { runs: groupOnlineRuns(scores, now), capped: runsCapped(scores, now) };
+  }, [online.data]);
+  return { online, ...counts };
+}
+
+const EMPTY_HINT = 'Create one with New evaluator: a code function or an LLM judge that scores new traces as they finish (source online).';
+const FILTERED_HINT = 'Change the Kind or State filter to see more rules.';
+
+interface EvaluatorGridProps {
+  data: ObserveEvaluatorList;
+  state: EvaluatorListState;
+  runs: Map<string, RuleRuns>;
+  capped: boolean;
+  enabled: ReturnType<typeof useEnabledSwitch>;
+  /** The New evaluator form is open: the empty state drops its own button. */
+  creating: boolean;
+  onNew: () => void;
+}
+
+/** No rules on page one: a filtered list says so, an empty one offers New evaluator. */
+function NoEvaluators({ filtered, creating, onNew }: { filtered: boolean; creating: boolean; onNew: () => void }) {
+  if (filtered)
+    return (
+      <Card as="div">
+        <EmptyState
+          icon={Sparkles}
+          title="No evaluators match these filters"
+          hint={FILTERED_HINT}
+          action={
+            <button type="button" className="btn btn-ghost" onClick={() => navigate(evaluatorsPath({ offset: 0 }), { replace: true })}>
+              Clear filters
+            </button>
+          }
+        />
+      </Card>
+    );
+  return (
+    <Card as="div">
+      {creating ? (
+        <EmptyState icon={Sparkles} title="No evaluators yet" hint={EMPTY_HINT} />
+      ) : (
+        <EmptyState icon={Sparkles} title="No evaluators yet" hint={EMPTY_HINT} action={<NewEvaluatorButton open={false} onClick={onNew} />} />
+      )}
+    </Card>
+  );
+}
+
+/** The loaded grid (or its empty state) and, past one page, the pager. */
+function EvaluatorGrid({ data, state, runs, capped, enabled, creating, onNew }: EvaluatorGridProps) {
+  if (data.evaluators.length === 0 && state.offset === 0)
+    return <NoEvaluators filtered={state.kind !== undefined || state.enabled !== undefined} creating={creating} onNew={onNew} />;
+  return (
+    <>
+      {data.evaluators.length === 0 ? (
+        <p className="datasets-note">No evaluators on this page.</p>
+      ) : (
+        <ul className="ds-grid" aria-label="Evaluators">
+          {data.evaluators.map((rule) => (
+            <EvaluatorCard
+              key={rule.rule_id}
+              rule={rule}
+              href={evaluatorPath(rule.rule_id, state)}
+              runs={runs.get(rule.name)}
+              capped={capped}
+              on={enabled.isEnabled(rule)}
+              onFlip={(next) => void enabled.flip(rule, next)}
+            />
+          ))}
+        </ul>
+      )}
+      {(state.offset > 0 || data.total > EVALUATORS_PAGE_SIZE) && (
+        <TablePager
+          offset={state.offset}
+          limit={EVALUATORS_PAGE_SIZE}
+          total={data.total}
+          onChange={(next) => navigate(evaluatorsPath({ ...state, offset: next }), { replace: true })}
+        />
+      )}
+    </>
   );
 }
 
@@ -169,57 +235,76 @@ function EvaluatorList() {
   const route = useRoute();
   const state = parseListState(route.query);
   const [refreshKey, setRefreshKey] = useState(0);
+  const [creating, setCreating] = useState(false);
   const list = useEvaluators({ limit: EVALUATORS_PAGE_SIZE, offset: state.offset, kind: state.kind, enabled: state.enabled }, refreshKey);
-  const online = useOnlineScores(ONLINE_SCORES_CAP, refreshKey);
+  const { online, runs, capped } = useRuleRuns(refreshKey);
   const enabled = useEnabledSwitch();
-  const { runs, capped } = useMemo(() => {
-    const now = Date.now();
-    const scores = online.data ?? [];
-    return { runs: groupOnlineRuns(scores, now), capped: runsCapped(scores, now) };
-  }, [online.data]);
-  if (useDaemonDown(false, [list, online])) return <ObserveDaemonDown />;
+  const down = useDaemonDown(false, [list, online]);
+  const data = list.data;
+  const created = () => {
+    setCreating(false);
+    setRefreshKey((k) => k + 1);
+  };
+  const header = (
+    <EvalsHeader
+      description={EVALUATORS_DESCRIPTION}
+      actions={down ? undefined : <NewEvaluatorButton open={creating} onClick={() => setCreating((v) => !v)} />}
+    />
+  );
+  if (down)
+    return (
+      <>
+        {header}
+        <ObserveDaemonDown />
+      </>
+    );
   return (
     <>
+      {header}
       <h2 className="visually-hidden">Evaluators</h2>
-      <NewEvaluator onCreated={() => setRefreshKey((k) => k + 1)} />
-      <ListFilters state={state} />
+      {creating && <NewEvaluator onClose={() => setCreating(false)} onCreated={created} />}
+      <div className="ev-toolbar">
+        <ListFilters state={state} />
+        {data && (
+          <span className="ev-count">
+            {fmtInt(data.total)} {data.total === 1 ? 'rule' : 'rules'}
+          </span>
+        )}
+      </div>
       <ObserveError error={list.error} />
-      <DataTable
-        id="evaluators"
-        columns={columns(runs, capped, enabled)}
-        rows={list.data?.evaluators ?? []}
-        rowKey={(r) => r.rule_id}
-        onRowOpen={(r) => navigate(evaluatorPath(r.rule_id, state))}
-        page={{
-          offset: state.offset,
-          limit: EVALUATORS_PAGE_SIZE,
-          total: list.data?.total ?? 0,
-          onChange: (next) => navigate(evaluatorsPath({ ...state, offset: next }), { replace: true }),
-        }}
-        loading={list.loading && !list.data}
-        empty={
-          <EmptyState
-            title={state.kind || state.enabled !== undefined ? 'No evaluators match these filters' : 'No evaluators yet'}
-            hint="Create one above: a code function or an LLM judge that scores new traces as they finish (source online)."
-          />
-        }
-      />
+      {list.loading && !data && <GridSkeleton label="Loading evaluators" />}
+      {data && (
+        <EvaluatorGrid
+          data={data}
+          state={state}
+          runs={runs}
+          capped={capped}
+          enabled={enabled}
+          creating={creating}
+          onNew={() => setCreating(true)}
+        />
+      )}
     </>
   );
 }
 
-/** `#/evals/evaluators` and `#/evals/evaluators/:id`, under the Evaluations tabs and behind the daemon-down state. */
+/** `#/evals/evaluators` and `#/evals/evaluators/:id`, under the Evaluations header and behind the daemon-down state. */
 export function EvaluatorsScreen() {
   const { path } = useRoute();
   const health = useDaemonHealth();
   const detail = matchRoute(`#${path}`, ['/evals/evaluators/:id']);
   let body;
-  if (health.down) body = <ObserveDaemonDown />;
+  if (health.down)
+    body = (
+      <>
+        <EvalsHeader description={EVALUATORS_DESCRIPTION} />
+        <ObserveDaemonDown />
+      </>
+    );
   else if (detail) body = <EvaluatorDetail key={detail.params.id} ruleId={detail.params.id} />;
   else body = <EvaluatorList />;
   return (
-    <section className="datasets-screen" aria-label="Evaluators">
-      <EvalsHeader description="Rules that score live traces as they arrive" />
+    <section className="ds-screen" aria-label="Evaluators">
       {body}
     </section>
   );
diff --git a/apps/agent-forge/src/screens/evaluators/__tests__/EvaluatorsScreen.test.tsx b/apps/agent-forge/src/screens/evaluators/__tests__/EvaluatorsScreen.test.tsx
index 0e78a427..cbb3f748 100644
--- a/apps/agent-forge/src/screens/evaluators/__tests__/EvaluatorsScreen.test.tsx
+++ b/apps/agent-forge/src/screens/evaluators/__tests__/EvaluatorsScreen.test.tsx
@@ -176,25 +176,52 @@ afterEach(() => {
 });
 
 describe('EvaluatorsScreen list', () => {
-  it('renders one row per rule with its kind, filter, sample rate, switch and last-run counts', async () => {
+  it('renders one card per rule with its kind, target filter, sample rate, switch and last-run counts', async () => {
     const container = await mountAt('#/evals/evaluators');
-    const rows = [...container.querySelectorAll('tbody tr')];
-    expect(rows).toHaveLength(2);
-    const cells = (row: Element) => [...row.querySelectorAll('td')].map((td) => td.textContent);
-    const [first, second] = rows.map(cells);
-    expect(first.slice(0, 4)).toEqual(['answered', 'code', 'agent=support-bot, status=ok', '0.5']);
-    expect(first[6]).toBe('2');
-    expect(first[5]).not.toBe('-');
-    expect(second.slice(0, 4)).toEqual(['polite', 'judge', 'All traces', '1']);
-    expect(second[6]).toBe('0');
+    const cards = [...container.querySelectorAll('.ds-grid .ev-card')];
+    expect(cards).toHaveLength(2);
+    const text = (card: Element, selector: string) => card.querySelector(selector)?.textContent;
+    const facts = (card: Element) => [
+      text(card, '.ev-card-name'),
+      text(card, '.ev-card-kind'),
+      text(card, '.ev-card-target dd'),
+      text(card, '.ev-card-sample dd'),
+    ];
+    const [first, second] = cards;
+    expect(facts(first)).toEqual(['answered', 'Code', 'agent=support-bot, status=ok', '0.5']);
+    expect(text(first, '.ev-runs-count')).toBe('2');
+    expect(text(first, '.ev-card-last')).toMatch(/^Last run /);
+    expect(first.querySelector('.ev-icon-code')).not.toBeNull();
+    expect(facts(second)).toEqual(['polite', 'LLM judge', 'All traces', '1']);
+    expect(text(second, '.ev-runs-count')).toBe('0');
+    expect(text(second, '.ev-card-last')).toMatch(/^Last run /);
+    expect(second.querySelector('.ev-icon-judge')).not.toBeNull();
     const switches = [...container.querySelectorAll('input[role="switch"]')] as HTMLInputElement[];
     expect(switches.map((s) => [s.getAttribute('aria-label'), s.checked])).toEqual([
       ['answered enabled', true],
       ['polite enabled', false],
     ]);
+    // The switch is never inside the card's link.
+    expect(switches.every((s) => s.closest('a') === null)).toBe(true);
     expect(container.querySelector('nav[aria-label="Evaluations"] [aria-current="page"]')?.textContent).toBe('Evaluators');
   });
 
+  it('shows the empty state with New evaluator when there are no rules', async () => {
+    rules = [];
+    const container = await mountAt('#/evals/evaluators');
+    expect(container.querySelector('.empty-state')?.textContent).toContain('No evaluators yet');
+    expect(buttonNamed(container.querySelector('.empty-state') as HTMLElement, 'New evaluator')).toBeDefined();
+    expect(buttonNamed(container, 'Clear filters')).toBeUndefined();
+  });
+
+  it('offers Clear filters when the filters match nothing', async () => {
+    rules = [];
+    const container = await mountAt('#/evals/evaluators?kind=judge');
+    expect(container.querySelector('.empty-state')?.textContent).toContain('No evaluators match these filters');
+    await click(buttonNamed(container, 'Clear filters')!);
+    expect(window.location.hash).toBe('#/evals/evaluators');
+  });
+
   it('reads the last-run counts in one online-score request, not one per rule', async () => {
     await mountAt('#/evals/evaluators');
     const reads = calls.filter((c) => c.path === '/api/v1/scores');
@@ -215,10 +242,10 @@ describe('EvaluatorsScreen list', () => {
     expect(window.location.hash).toBe('#/evals/evaluators?enabled=false');
   });
 
-  it('opens the edit view on row open, carrying the list filters', async () => {
+  it('links each card to the edit view, carrying the list filters', async () => {
     const container = await mountAt('#/evals/evaluators?kind=code');
-    act(() => (container.querySelector('tbody tr') as HTMLElement).click());
-    expect(window.location.hash).toBe('#/evals/evaluators/r1?kind=code');
+    const link = container.querySelector('.ev-card-name') as HTMLAnchorElement;
+    expect(link.getAttribute('href')).toBe('#/evals/evaluators/r1?kind=code');
   });
 
   it('toggles a rule with PUT {enabled}, optimistically', async () => {
@@ -266,7 +293,7 @@ describe('New evaluator', () => {
       }),
     ]);
     expect(container.querySelector('form[aria-label="New evaluator"]')).toBeNull();
-    expect(container.querySelectorAll('tbody tr')).toHaveLength(3);
+    expect(container.querySelectorAll('.ds-grid .ev-card')).toHaveLength(3);
   });
 
   it('creates a judge rule with provider/model and rubric when Studio has a provider key', async () => {
diff --git a/apps/agent-forge/src/screens/evaluators/evaluators.css b/apps/agent-forge/src/screens/evaluators/evaluators.css
index bee4b0ef..aadb6746 100644
--- a/apps/agent-forge/src/screens/evaluators/evaluators.css
+++ b/apps/agent-forge/src/screens/evaluators/evaluators.css
@@ -1,75 +1,496 @@
-/* Evaluators (#/evals/evaluators, #/evals/evaluators/:id). Builds on datasets.css and queues.css; tokens only. */
-.evaluators-filters {
+/* Evaluators (#/evals/evaluators, #/evals/evaluators/:id). The page and card grid (ds-*) live in ../evals/evals.css; tokens only. */
+
+/* ---------- List: filters toolbar and rule cards ---------- */
+.ev-toolbar {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2) var(--space-4);
+  min-width: 0;
 }
-.evaluators-kind,
-.evaluators-filter {
+.ev-filters {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 8px 16px;
+  align-items: center;
+  gap: var(--space-2) var(--space-4);
   min-width: 0;
+}
+.ev-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  font-size: var(--fs-meta);
+  font-weight: 500;
+  color: var(--text-muted);
+}
+.ev-filter .select {
+  width: auto;
+  min-width: 140px;
+  max-width: 100%;
+}
+.ev-count {
+  font-size: var(--fs-meta);
+  color: var(--text-faint);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The card is a surface; its name link stretches over it, and the switch sits above that link. */
+.ev-card {
+  position: relative;
+  gap: var(--space-3);
+}
+.ev-icon-code {
+  background: var(--info-soft);
+  color: var(--info);
+}
+.ev-icon-judge {
+  background: var(--violet-soft);
+  color: var(--violet);
+}
+.ev-card-heading {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.ev-card-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+  font-size: var(--fs-body);
+  font-weight: 600;
+  line-height: 1.4;
+  text-decoration: none;
+}
+.ev-card-name::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-lg);
+}
+.ev-card-name:focus-visible {
+  outline: none;
+}
+.ev-card-name:focus-visible::after {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.ev-card-kind {
+  font-size: var(--fs-meta);
+  color: var(--text-muted);
+}
+.ev-card-off .ds-card-icon {
+  opacity: 0.6;
+}
+.ev-switch-field {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  align-self: flex-start;
+  padding-top: 4px;
+  cursor: pointer;
+}
+.ev-switch-state {
+  min-width: 2ch;
+  font-size: var(--fs-meta);
+  color: var(--text-muted);
+  text-align: right;
+}
+.ev-card-facts {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-4);
   margin: 0;
-  padding: 8px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  font-size: 13px;
 }
-.evaluators-kind legend,
-.evaluators-filter legend {
-  padding: 0 4px;
+.ev-card-fact {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.ev-card-fact dd {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
   font-size: 12px;
-  color: var(--text-muted);
+  color: var(--text);
+}
+/* Above the stretched name link, so the truncated target's tooltip shows on hover. */
+.ev-card-target dd {
+  position: relative;
+  z-index: 1;
+}
+.ev-card-sample dd {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.ev-card-sample dt {
+  text-align: right;
+}
+.ev-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-faint);
+  flex: none;
+}
+.ev-dot-on {
+  background: var(--success);
+  box-shadow: 0 0 0 3px var(--success-soft);
+}
+
+/* A native checkbox drawn as a switch (role="switch"); the knob is the one allowed #fff. */
+.ev-switch {
+  appearance: none;
+  position: relative;
+  flex: none;
+  width: 32px;
+  height: 18px;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-full);
+  background: var(--border-strong);
+  cursor: pointer;
+  transition:
+    background-color var(--dur) var(--ease),
+    border-color var(--dur) var(--ease);
+}
+.ev-switch::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--dur) var(--ease);
+}
+.ev-switch:checked {
+  background: var(--accent-solid);
+  border-color: var(--accent-solid);
+}
+.ev-switch:checked::after {
+  transform: translateX(14px);
+}
+.ev-switch:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* ---------- New evaluator: a titled stack of the form's cards above the grid ---------- */
+.ev-new {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.ev-new-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.ev-new-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+/* ---------- The form: General / Logic / Sampling cards over a sticky footer ---------- */
+.ev-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+.ev-form-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+.ev-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--space-3);
+  min-width: 0;
 }
-.evaluators-kind label,
-.evaluators-check,
-.evaluators-switch {
+.ev-grow {
+  flex: 1 1 220px;
+}
+.ev-provider {
+  flex: 0 1 200px;
+}
+.ev-select-field {
+  flex: 0 1 180px;
+}
+.ev-rate {
+  max-width: 160px;
+}
+.ev-enabled {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  font-size: 13px;
+  gap: var(--space-2);
+  min-height: 32px;
+  font-size: var(--fs-table);
+  font-weight: 500;
+  color: var(--text);
+  cursor: pointer;
+}
+.ev-kind,
+.ev-filter-set {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.ev-legend {
+  padding: 0;
+  margin-bottom: var(--space-2);
+}
+.ev-kind-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+  gap: var(--space-3);
+}
+.ev-kind-option {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  min-width: 0;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  cursor: pointer;
+  transition:
+    border-color var(--dur-fast) var(--ease),
+    background-color var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
+}
+.ev-kind-option:hover {
+  background: var(--surface-2);
+}
+.ev-kind-option:has(input:checked) {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
+  box-shadow: 0 0 0 1px var(--accent);
+}
+.ev-kind-option:has(input:focus-visible) {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.ev-kind-option:has(input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.ev-kind-option:has(input:disabled):hover {
+  background: var(--surface);
+}
+.ev-kind-option input {
+  flex: none;
+  margin: 4px 0 0 auto;
+  accent-color: var(--accent);
+  cursor: inherit;
+}
+.ev-kind-option input:focus-visible {
+  outline: none;
+}
+.ev-kind-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.ev-kind-title {
+  font-size: var(--fs-body);
+  font-weight: 600;
   color: var(--text);
 }
-.evaluators-kind .datasets-note {
-  flex-basis: 100%;
+.ev-kind-desc {
+  font-size: var(--fs-meta);
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+.ev-hint {
+  margin: 0;
+  font-size: var(--fs-meta);
+  color: var(--text-muted);
 }
-.evaluators-kind a {
+.ev-hint a {
   color: var(--accent);
 }
-.evaluators-text {
+
+/* The mono editor surface: its label is the header bar. */
+.ev-editor {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  transition:
+    border-color var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
+}
+.ev-editor:focus-within {
+  border-color: var(--accent);
+  box-shadow: var(--ring);
+}
+.ev-editor-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-height: 32px;
+  padding: 0 var(--space-3);
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-3);
+}
+.ev-editor-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.ev-editor-tag {
+  flex: none;
+}
+.ev-editor-text {
   box-sizing: border-box;
   width: 100%;
-  min-width: 0;
-  padding: 6px 8px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
+  min-height: 220px;
+  padding: var(--space-3) var(--space-4);
+  border: 0;
+  background: transparent;
   color: var(--text);
-  font: inherit;
-  font-size: 13px;
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  tab-size: 2;
+  white-space: pre;
+  overflow: auto;
   resize: vertical;
 }
-.evaluators-code {
+.ev-editor-text[name='evaluator-rubric'] {
+  min-height: 160px;
+  white-space: pre-wrap;
+}
+.ev-editor-text::placeholder {
+  color: var(--text-faint);
+  opacity: 1;
+}
+.ev-editor-text:focus {
+  outline: none;
+}
+
+/* The footer: a flat bar stuck to the bottom of the scroll container, the width of the form column; the form scrolls under it. */
+.ev-form-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2) var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: 0 -8px 16px -12px color-mix(in srgb, var(--text) 22%, transparent);
+}
+.ev-form-status {
+  flex: 1 1 200px;
+  min-width: 0;
+}
+.ev-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-left: auto;
+}
+
+/* ---------- Edit view: the form beside Test on trace on wide screens ---------- */
+.ev-detail {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+@media (min-width: 1180px) {
+  .ev-detail {
+    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
+  }
+  .ev-detail > .ev-test {
+    position: sticky;
+    top: var(--space-4);
+  }
+}
+.ev-test {
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
+}
+.ev-test-head .card-description {
+  margin-top: 2px;
+}
+.ev-test-fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--space-2);
+}
+.ev-mono-input {
   font-family: var(--font-mono);
-  font-size: 12px;
-  white-space: pre;
-  overflow-x: auto;
+  font-size: 12.5px;
 }
-.evaluators-result {
+.ev-result {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
-  gap: 4px 12px;
+  gap: 6px var(--space-3);
   margin: 0;
-  font-size: 13px;
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  font-size: var(--fs-table);
 }
-.evaluators-result dt {
+.ev-result dt {
   color: var(--text-muted);
 }
-.evaluators-result dd {
+.ev-result dd {
   margin: 0;
   font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
   overflow-wrap: anywhere;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ev-switch,
+  .ev-switch::after,
+  .ev-kind-option,
+  .ev-editor {
+    transition: none;
+  }
+}
diff --git a/apps/agent-forge/src/screens/queues/NewQueueForm.tsx b/apps/agent-forge/src/screens/queues/NewQueueForm.tsx
index 57d52a3c..15b48c03 100644
--- a/apps/agent-forge/src/screens/queues/NewQueueForm.tsx
+++ b/apps/agent-forge/src/screens/queues/NewQueueForm.tsx
@@ -1,14 +1,20 @@
 /**
- * "New annotation queue": a name plus a rubric editor - one row per score
- * (name, optional description, optional min/max), at least one row. Success
- * posts `POST /api/v1/queues { name, rubric }` and refreshes the list; a 409
- * (taken name) or a 400 (say min above max) shows inline.
+ * "New annotation queue", a card opened from the list header: a name plus a
+ * rubric editor - one bordered row per score (name, optional description,
+ * optional min/max), at least one row. Success posts
+ * `POST /api/v1/queues { name, rubric }` and hands back to the list (which
+ * closes the card and refreshes); a 409 (taken name) or a 400 (say min above
+ * max) shows inline.
  */
 import { useRef, useState, type FormEvent } from 'react';
+import { Plus, Trash2, X } from 'lucide-react';
 import { ObserveApiError, observeClient } from '../../observe/observeClient';
 import type { ObserveRubricEntry } from '../../observe/types';
 import { useToast } from '../../ui/Toast';
 
+/** The form's element id, for the header button's `aria-controls`. */
+export const NEW_QUEUE_FORM_ID = 'new-queue-form';
+
 /** One rubric row as typed: every field a string, `id` only keys the React row. */
 interface RubricDraft {
   id: number;
@@ -45,11 +51,11 @@ const createError = (error: unknown): string =>
     ? 'Could not create: a queue with that name exists.'
     : `Could not create the queue: ${(error as Error).message}`;
 
-const FIELDS: { field: DraftField; label: string; type: 'text' | 'number'; wide?: boolean }[] = [
-  { field: 'name', label: 'Score name', type: 'text' },
-  { field: 'description', label: 'Description (optional)', type: 'text', wide: true },
-  { field: 'min', label: 'Min', type: 'number' },
-  { field: 'max', label: 'Max', type: 'number' },
+const FIELDS: { field: DraftField; label: string; type: 'text' | 'number'; size: 'name' | 'wide' | 'bound'; placeholder?: string }[] = [
+  { field: 'name', label: 'Score name', type: 'text', size: 'name', placeholder: 'e.g. helpfulness' },
+  { field: 'description', label: 'Description (optional)', type: 'text', size: 'wide', placeholder: 'What the reviewer judges' },
+  { field: 'min', label: 'Min', type: 'number', size: 'bound' },
+  { field: 'max', label: 'Max', type: 'number', size: 'bound' },
 ];
 
 function RubricRow({
@@ -66,29 +72,37 @@ function RubricRow({
   canRemove: boolean;
 }) {
   return (
-    <div className="queues-rubric-row">
-      {FIELDS.map(({ field, label, type, wide }) => (
-        <label key={field} className={`datasets-field${wide ? ' datasets-field-wide' : ' queues-field-narrow'}`}>
-          <span>{label}</span>
-          <input
-            name={`rubric-${field}-${index}`}
-            type={type}
-            step={type === 'number' ? 'any' : undefined}
-            value={row[field]}
-            onChange={(e) => onChange(field, e.target.value)}
-          />
-        </label>
-      ))}
+    <li className="qu-rubric-row">
+      <span className="qu-rubric-index" aria-hidden="true">
+        {index + 1}
+      </span>
+      <div className="qu-rubric-fields">
+        {FIELDS.map(({ field, label, type, size, placeholder }) => (
+          <label key={field} className={`ds-field qu-rubric-${size}`}>
+            <span className="ds-field-label">{label}</span>
+            <input
+              className="input"
+              name={`rubric-${field}-${index}`}
+              type={type}
+              step={type === 'number' ? 'any' : undefined}
+              value={row[field]}
+              placeholder={placeholder}
+              onChange={(e) => onChange(field, e.target.value)}
+            />
+          </label>
+        ))}
+      </div>
       <button
         type="button"
-        className="btn btn-ghost"
+        className="btn btn-ghost btn-icon btn-sm qu-rubric-remove"
         aria-label={`Remove rubric row ${index + 1}`}
+        title="Remove"
         disabled={!canRemove}
         onClick={onRemove}
       >
-        Remove
+        <Trash2 aria-hidden="true" />
       </button>
-    </div>
+    </li>
   );
 }
 
@@ -102,12 +116,11 @@ function useRubricRows() {
       setRows((all) => all.map((row) => (row.id === id ? { ...row, [field]: value } : row))),
     add: () => setRows((all) => [...all, blankRow(nextId.current++)]),
     remove: (id: number) => setRows((all) => (all.length > 1 ? all.filter((row) => row.id !== id) : all)),
-    reset: () => setRows([blankRow(nextId.current++)]),
   };
 }
 
-/** The "New annotation queue" form; `onCreated` runs after a successful create. */
-export function NewQueueForm({ onCreated }: { onCreated: () => void }) {
+/** The "New annotation queue" card; `onCreated` runs after a successful create, `onCancel` closes it. */
+export function NewQueueForm({ onCreated, onCancel }: { onCreated: () => void; onCancel: () => void }) {
   const toast = useToast();
   const rubric = useRubricRows();
   const [name, setName] = useState('');
@@ -124,49 +137,68 @@ export function NewQueueForm({ onCreated }: { onCreated: () => void }) {
     try {
       await observeClient.createQueue({ name: target, rubric: toRubric(rubric.rows) });
       toast.show({ tone: 'success', message: `Created queue ${target}.` });
-      setName('');
-      rubric.reset();
       onCreated();
     } catch (failure) {
       setError(createError(failure));
-    } finally {
       setSaving(false);
     }
   };
 
   return (
-    <form className="datasets-new" aria-label="New annotation queue" onSubmit={(e) => void submit(e)}>
-      <h3 className="datasets-section-title">New annotation queue</h3>
-      <label className="datasets-field">
-        <span>Name</span>
-        <input name="queue-name" type="text" value={name} placeholder="e.g. support-review" onChange={(e) => setName(e.target.value)} />
-      </label>
-      <fieldset className="queues-rubric">
-        <legend>Rubric (one row per score)</legend>
-        {rubric.rows.map((row, index) => (
-          <RubricRow
-            key={row.id}
-            row={row}
-            index={index}
-            onChange={(field, value) => rubric.update(row.id, field, value)}
-            onRemove={() => rubric.remove(row.id)}
-            canRemove={rubric.rows.length > 1}
-          />
-        ))}
-      </fieldset>
-      <div className="queues-form-actions">
-        <button type="button" className="btn btn-ghost" onClick={rubric.add}>
-          Add rubric row
-        </button>
-        <button type="submit" className="btn" disabled={saving || !ready}>
-          Create queue
+    <form id={NEW_QUEUE_FORM_ID} className="card qu-new" aria-label="New annotation queue" onSubmit={(e) => void submit(e)}>
+      <div className="qu-new-head">
+        <div className="card-heading">
+          <h3 className="card-title">New annotation queue</h3>
+          <p className="card-description">Name the queue and the scores a reviewer gives each trace.</p>
+        </div>
+        <button type="button" className="btn btn-ghost btn-icon btn-sm" aria-label="Close new queue" onClick={onCancel}>
+          <X aria-hidden="true" />
         </button>
       </div>
+      <label className="ds-field qu-new-name">
+        <span className="ds-field-label">Name</span>
+        <input
+          className="input"
+          name="queue-name"
+          type="text"
+          value={name}
+          placeholder="e.g. support-review"
+          autoFocus
+          onChange={(e) => setName(e.target.value)}
+        />
+      </label>
+      <fieldset className="qu-rubric">
+        <legend className="qu-legend overline">Rubric (one row per score)</legend>
+        <ol className="qu-rubric-rows">
+          {rubric.rows.map((row, index) => (
+            <RubricRow
+              key={row.id}
+              row={row}
+              index={index}
+              onChange={(field, value) => rubric.update(row.id, field, value)}
+              onRemove={() => rubric.remove(row.id)}
+              canRemove={rubric.rows.length > 1}
+            />
+          ))}
+        </ol>
+        <button type="button" className="btn btn-ghost btn-sm qu-rubric-add" onClick={rubric.add}>
+          <Plus aria-hidden="true" />
+          Add rubric entry
+        </button>
+      </fieldset>
       {error && (
         <p className="datasets-form-error" role="alert">
           {error}
         </p>
       )}
+      <div className="qu-new-actions">
+        <button type="button" className="btn btn-ghost" onClick={onCancel}>
+          Cancel
+        </button>
+        <button type="submit" className="btn btn-primary" disabled={saving || !ready}>
+          Create queue
+        </button>
+      </div>
     </form>
   );
 }
diff --git a/apps/agent-forge/src/screens/queues/ProgressBar.tsx b/apps/agent-forge/src/screens/queues/ProgressBar.tsx
new file mode 100644
index 00000000..4326f146
--- /dev/null
+++ b/apps/agent-forge/src/screens/queues/ProgressBar.tsx
@@ -0,0 +1,27 @@
+/**
+ * A queue's progress as one thin bar: the reviewed (done) share in the accent,
+ * then the skipped share in a quiet tone, over the remaining track.
+ */
+interface ProgressBarProps {
+  done: number;
+  skipped: number;
+  total: number;
+  /** With a label the bar is a `role="progressbar"` (finished = done + skipped); without one it is decorative. */
+  label?: string;
+}
+
+const pct = (part: number, total: number) => `${total > 0 ? (part / total) * 100 : 0}%`;
+
+/** The bar; it reads as complete only once nothing is pending. */
+export function ProgressBar({ done, skipped, total, label }: ProgressBarProps) {
+  const a11y = label
+    ? { role: 'progressbar', 'aria-label': label, 'aria-valuemin': 0, 'aria-valuemax': total, 'aria-valuenow': done + skipped }
+    : { 'aria-hidden': true };
+  const complete = total > 0 && done + skipped >= total;
+  return (
+    <span className={complete ? 'qu-bar qu-bar-complete' : 'qu-bar'} {...a11y}>
+      <span className="qu-bar-done" style={{ width: pct(done, total) }} />
+      <span className="qu-bar-skipped" style={{ width: pct(skipped, total) }} />
+    </span>
+  );
+}
diff --git a/apps/agent-forge/src/screens/queues/QueueReview.tsx b/apps/agent-forge/src/screens/queues/QueueReview.tsx
index f2127e23..9224eeac 100644
--- a/apps/agent-forge/src/screens/queues/QueueReview.tsx
+++ b/apps/agent-forge/src/screens/queues/QueueReview.tsx
@@ -1,56 +1,95 @@
 /**
  * `#/evals/queues/:id` - one annotation queue's review view. It reads the
  * queue (name, rubric, counts) and its next pending item
- * (`GET /api/v1/queues/:id/next`); a 204 is the "Queue is empty" state. An
- * item shows its trace in the shared TraceViewer (the selected step is local
- * state, not the URL) beside the rubric's score form; finishing an item
- * re-reads the queue and its next item.
+ * (`GET /api/v1/queues/:id/next`); a 204 is the "Queue is empty" state. The
+ * top strip shows "n of m" and the done/skipped/pending counts over a progress
+ * bar. An item shows on the left - its root step's input and output as
+ * messages, or (the Messages | Trace toggle, local state) the whole trace in
+ * the shared TraceViewer (the selected step is local state too) - beside the
+ * rubric's score card; finishing an item re-reads the queue and its next item.
  */
-import { useMemo, useState } from 'react';
+import { useMemo, useState, type ReactNode } from 'react';
+import { ArrowUpRight, CheckCheck } from 'lucide-react';
 import { ObserveDaemonDown, ObserveError } from '../../observe/chrome';
 import { nestObservations } from '../../observe/tree';
-import type { ObserveQueue, ObserveQueueItem } from '../../observe/types';
+import type { ObserveObservationRow, ObserveQueue, ObserveQueueItem, ObserveTraceDetail } from '../../observe/types';
 import { useDaemonDown, useNextQueueItem, useQueue, useTraceDetail } from '../../observe/useObserve';
+import { fmtInt } from '../../observe/format';
+import { Card } from '../../ui/Card';
 import { EmptyState } from '../../ui/EmptyState';
+import { MessageView } from '../../ui/MessageView';
+import { SkeletonRows } from '../../ui/Skeleton';
 import { TraceViewer, type TraceViewMode } from '../../ui/run/TraceViewer';
 import { displayName, isRunning } from '../../ui/run/rows';
 import { useNow } from '../../ui/run/useNow';
-import { fmtInt } from '../../observe/format';
+import '../../ui/filterBar.css';
+import { EvalsHeader } from '../evals/EvalsTabs';
+import { ProgressBar } from './ProgressBar';
 import { RubricForm } from './RubricForm';
 
-const BackLink = () => <a href="#/evals/queues">Back to queues</a>;
+const BackLink = () => (
+  <a className="btn" href="#/evals/queues">
+    Back to queues
+  </a>
+);
 
+/** "Item n of m" (n = finished + 1) over the bar, with the pending / done / skipped counts. */
 function Progress({ counts }: { counts: ObserveQueue['counts'] }) {
+  const { pending, done, skipped } = counts;
+  const finished = done + skipped;
+  const total = finished + pending;
+  let position: ReactNode;
+  if (total === 0) position = 'No items yet';
+  else if (pending === 0) position = `All ${fmtInt(total)} finished`;
+  else
+    position = (
+      <>
+        Item <b>{fmtInt(finished + 1)}</b> of {fmtInt(total)}
+      </>
+    );
   return (
-    <p className="queues-progress" aria-label="Queue progress">
-      <span>{fmtInt(counts.pending)} pending</span>
-      <span>{fmtInt(counts.done)} done</span>
-      <span>{fmtInt(counts.skipped)} skipped</span>
-    </p>
+    <div className="qu-progress" role="group" aria-label="Queue progress">
+      <div className="qu-progress-row">
+        <span className="qu-position">{position}</span>
+        <span className="qu-counts">
+          <span>{fmtInt(pending)} pending</span>
+          <span>{fmtInt(done)} done</span>
+          <span>{fmtInt(skipped)} skipped</span>
+        </span>
+      </div>
+      <ProgressBar done={done} skipped={skipped} total={total} label="Items finished" />
+    </div>
   );
 }
 
-/** One item: its trace (TraceViewer, local selection) and the score form. */
-function ReviewItem({ queue, item, onDone }: { queue: ObserveQueue; item: ObserveQueueItem; onDone: () => void }) {
-  const trace = useTraceDetail(item.trace_id);
-  const down = useDaemonDown(false, [trace]);
+type ItemView = 'messages' | 'trace';
+const VIEWS: { view: ItemView; label: string }[] = [
+  { view: 'messages', label: 'Messages' },
+  { view: 'trace', label: 'Trace' },
+];
+
+function ViewToggle({ view, onView }: { view: ItemView; onView: (view: ItemView) => void }) {
+  return (
+    <div className="segmented" role="group" aria-label="Item view">
+      {VIEWS.map(({ view: v, label }) => (
+        <button key={v} type="button" className="seg-btn" aria-pressed={view === v} onClick={() => onView(v)}>
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** The trace on the left: the root step's input and output, or the whole trace. */
+function ItemTrace({ trace, root, view }: { trace: ObserveTraceDetail; root: ObserveObservationRow | undefined; view: ItemView }) {
   const [obsId, setObsId] = useState<string | null>(null);
   const [mode, setMode] = useState<TraceViewMode>('tree');
-  const observations = trace.data?.observations;
-  const root = useMemo(() => (observations ? nestObservations(observations)[0]?.row : undefined), [observations]);
   const now = useNow(root !== undefined && isRunning(root));
-
-  let body;
-  if (down) body = <ObserveDaemonDown />;
-  else if (trace.error) body = <ObserveError error={trace.error} />;
-  else if (trace.loading && !trace.data) body = <p className="datasets-note">Loading trace...</p>;
-  else if (!trace.data)
-    body = <EmptyState title="Trace not found" hint="The trace may have been pruned. Skip it to move on." />;
-  else
-    body = (
+  if (view === 'trace')
+    return (
       <TraceViewer
-        observations={trace.data.observations}
-        scores={trace.data.scores}
+        observations={trace.observations}
+        scores={trace.scores}
         selectedObsId={obsId}
         onSelect={setObsId}
         mode={mode}
@@ -58,17 +97,44 @@ function ReviewItem({ queue, item, onDone }: { queue: ObserveQueue; item: Observ
         now={now}
       />
     );
+  if (!root) return <p className="datasets-note">This trace has no steps.</p>;
+  return (
+    <div className="qu-messages">
+      <MessageView value={root.input} label="Input" />
+      <MessageView value={root.output} label="Output" />
+    </div>
+  );
+}
+
+/** One item: its trace (Messages | Trace) and the score card. */
+function ReviewItem({ queue, item, onDone }: { queue: ObserveQueue; item: ObserveQueueItem; onDone: () => void }) {
+  const trace = useTraceDetail(item.trace_id);
+  const down = useDaemonDown(false, [trace]);
+  const [view, setView] = useState<ItemView>('messages');
+  const observations = trace.data?.observations;
+  const root = useMemo(() => (observations ? nestObservations(observations)[0]?.row : undefined), [observations]);
+
+  let body: ReactNode;
+  if (down) body = <ObserveDaemonDown />;
+  else if (trace.error) body = <ObserveError error={trace.error} />;
+  else if (trace.loading && !trace.data) body = <SkeletonRows rows={5} />;
+  else if (!trace.data) body = <EmptyState title="Trace not found" hint="The trace may have been pruned. Skip it to move on." />;
+  else body = <ItemTrace trace={trace.data} root={root} view={view} />;
 
   return (
-    <div className="queues-review" data-review-trace={item.trace_id}>
-      <section className="queues-review-trace" aria-label="Trace under review">
-        <h3 className="datasets-section-title">
-          {root ? displayName(root) : 'Trace'}{' '}
-          <a href={`#/traces/${encodeURIComponent(item.trace_id)}`} title={item.trace_id}>
+    <div className="qu-review" data-review-trace={item.trace_id}>
+      <section className="card qu-item" aria-label="Trace under review">
+        <div className="qu-item-head">
+          <h3 className="card-title qu-item-title" title={root ? displayName(root) : undefined}>
+            {root ? displayName(root) : 'Trace'}
+          </h3>
+          <a className="evals-trace-link" href={`#/traces/${encodeURIComponent(item.trace_id)}`} title={`Open trace ${item.trace_id}`}>
             {item.trace_id.slice(0, 12)}
+            <ArrowUpRight size={12} strokeWidth={1.75} aria-hidden="true" />
           </a>
-        </h3>
-        {body}
+          <ViewToggle view={view} onView={setView} />
+        </div>
+        <div className={view === 'trace' ? 'qu-item-body qu-item-body-trace' : 'qu-item-body'}>{body}</div>
       </section>
       <RubricForm queue={queue} item={item} onDone={onDone} />
     </div>
@@ -76,16 +142,33 @@ function ReviewItem({ queue, item, onDone }: { queue: ObserveQueue; item: Observ
 }
 
 const EmptyQueue = () => (
-  <EmptyState
-    title="Queue is empty"
-    hint="Every item has been reviewed or skipped. Add traces to the queue to review more."
-    action={
-      <span className="queues-empty-links">
-        <BackLink />
-        <a href="#/traces">Go to Traces</a>
-      </span>
-    }
-  />
+  <Card as="div">
+    <EmptyState
+      icon={CheckCheck}
+      title="Queue is empty"
+      hint="Every item has been reviewed or skipped. Add traces to the queue to review more."
+      action={
+        <span className="qu-empty-links">
+          <BackLink />
+          <a className="btn btn-ghost" href="#/traces">
+            Go to Traces
+          </a>
+        </span>
+      }
+    />
+  </Card>
+);
+
+/** The review area while the queue or its next item loads. */
+const LoadingReview = ({ label }: { label: string }) => (
+  <div className="qu-review" aria-label={label} role="group">
+    <Card as="div">
+      <SkeletonRows rows={6} />
+    </Card>
+    <Card as="div">
+      <SkeletonRows rows={4} />
+    </Card>
+  </div>
 );
 
 /** The queue and its next item; `finished` hides the item just completed until the re-read lands. */
@@ -106,24 +189,35 @@ function useReview(queueId: string) {
 /** `#/evals/queues/:id`; an unknown queue shows an empty state with the way back. */
 export function QueueReview({ queueId }: { queueId: string }) {
   const { queue, next, down, item, advance, waiting } = useReview(queueId);
-  if (down) return <ObserveDaemonDown />;
   const data = queue.data;
-  let body;
-  if (queue.loading && !data) body = <p className="datasets-note">Loading queue...</p>;
+  const name = data?.name ?? queueId;
+  const header = (
+    <EvalsHeader
+      title={name}
+      description={data ? 'Score each trace against the queue rubric' : undefined}
+      breadcrumbs={[{ label: 'Evaluations', href: '#/evals/scores' }, { label: 'Annotation queues', href: '#/evals/queues' }, { label: name }]}
+    />
+  );
+  let body: ReactNode;
+  if (down) body = <ObserveDaemonDown />;
+  else if (queue.loading && !data) body = <LoadingReview label="Loading queue" />;
   else if (queue.error) body = <ObserveError error={queue.error} />;
-  else if (!data) body = <EmptyState title="Queue not found" hint={`No annotation queue '${queueId}'.`} action={<BackLink />} />;
+  else if (!data)
+    body = (
+      <Card as="div">
+        <EmptyState title="Queue not found" hint={`No annotation queue '${queueId}'.`} action={<BackLink />} />
+      </Card>
+    );
   else if (next.error) body = <ObserveError error={next.error} />;
   else if (item) body = <ReviewItem key={item.item_id} queue={data} item={item} onDone={() => advance(item.item_id)} />;
-  else if (waiting) body = <p className="datasets-note">Loading the next item...</p>;
+  else if (waiting) body = <LoadingReview label="Loading the next item" />;
   else body = <EmptyQueue />;
 
   return (
     <>
-      <nav className="datasets-nav" aria-label="Breadcrumb">
-        <BackLink />
-      </nav>
-      <h2 className="datasets-title">Review {data ? <code>{data.name}</code> : null}</h2>
-      {data && <Progress counts={data.counts} />}
+      {header}
+      <h2 className="visually-hidden">Review {name}</h2>
+      {data && !down && <Progress counts={data.counts} />}
       {body}
     </>
   );
diff --git a/apps/agent-forge/src/screens/queues/QueuesScreen.tsx b/apps/agent-forge/src/screens/queues/QueuesScreen.tsx
index 9283987c..a161c74f 100644
--- a/apps/agent-forge/src/screens/queues/QueuesScreen.tsx
+++ b/apps/agent-forge/src/screens/queues/QueuesScreen.tsx
@@ -1,83 +1,194 @@
 /**
  * `#/evals/queues` - the annotation queue list (`GET /api/v1/queues`, paged
- * server-side, `?offset=` in the URL) with a "New annotation queue" form -
- * and `#/evals/queues/:id`, one queue's review view (see `QueueReview.tsx`).
- * Both sit under the Evaluations tabs and behind the daemon-down state, which
- * keeps the URL and swaps the screen back in by itself once the daemon is back.
+ * server-side, `?offset=` in the URL) as a card grid, with a "New annotation
+ * queue" form opened from the header - and `#/evals/queues/:id`, one queue's
+ * review view (see `QueueReview.tsx`). Both sit under the Evaluations header
+ * tabs and behind the daemon-down state, which keeps the URL and swaps the
+ * screen back in by itself once the daemon is back.
  */
 import '../datasets/datasets.css';
 import './queues.css';
-import { useState } from 'react';
+import { useId, useState } from 'react';
+import { CalendarDays, Inbox, ListChecks, Plus } from 'lucide-react';
 import { matchRoute, navigate } from '../../router/router';
 import { useRoute } from '../../router/useRoute';
 import { useDaemonDown, useDaemonHealth, useQueues } from '../../observe/useObserve';
 import { ObserveDaemonDown, ObserveError } from '../../observe/chrome';
-import type { ObserveQueue } from '../../observe/types';
-import { fmtDateTime, fmtInt } from '../../observe/format';
-import { DataTable, type Column } from '../../ui/DataTable';
+import type { ObserveQueue, ObserveQueueList, ObserveRubricEntry } from '../../observe/types';
+import { fmtInt } from '../../observe/format';
+import { Card } from '../../ui/Card';
+import { TablePager } from '../../ui/DataTable';
 import { EmptyState } from '../../ui/EmptyState';
-import { Clip } from '../listFilters';
 import { EvalsHeader } from '../evals/EvalsTabs';
+import { GridSkeleton } from '../evals/GridSkeleton';
 import { parseOffset } from '../datasets/datasetsUrl';
-import { NewQueueForm } from './NewQueueForm';
+import { NewQueueForm, NEW_QUEUE_FORM_ID } from './NewQueueForm';
+import { ProgressBar } from './ProgressBar';
 import { QueueReview } from './QueueReview';
-import { QUEUES_PAGE_SIZE, queuePath, queuesPath } from './queuesUrl';
+import { QUEUES_PAGE_SIZE, queuePath, queuesPath, rubricRange } from './queuesUrl';
 
-const COLUMNS: Column<ObserveQueue>[] = [
-  { key: 'name', header: 'Name', width: 240, render: (q) => <Clip text={q.name} /> },
-  { key: 'pending', header: 'Pending', align: 'right', width: 90, render: (q) => fmtInt(q.counts.pending) },
-  { key: 'done', header: 'Done', align: 'right', width: 90, render: (q) => fmtInt(q.counts.done) },
-  { key: 'skipped', header: 'Skipped', align: 'right', width: 90, render: (q) => fmtInt(q.counts.skipped) },
-  { key: 'created', header: 'Created', width: 150, hideBelow: 720, render: (q) => fmtDateTime(q.created_at) },
-];
+const DESCRIPTION = 'Traces queued for human review against a rubric';
+/** Rubric chips shown per card before a "+n" chip. */
+const MAX_CHIPS = 4;
+
+/** A created date as "Oct 20, 2026". */
+const fmtDate = (ms: number) => new Date(ms).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+
+function RubricChips({ rubric }: { rubric: ObserveRubricEntry[] }) {
+  if (rubric.length === 0) return <span className="qu-chips qu-chips-none">No rubric</span>;
+  const shown = rubric.slice(0, MAX_CHIPS);
+  return (
+    <span className="qu-chips">
+      {shown.map((entry) => (
+        <span key={entry.name} className="qu-chip" title={entry.description ?? entry.name}>
+          <span className="qu-chip-name">{entry.name}</span>
+          <span className="qu-chip-range">{rubricRange(entry)}</span>
+        </span>
+      ))}
+      {rubric.length > shown.length && <span className="qu-chip qu-chip-more">+{rubric.length - shown.length}</span>}
+    </span>
+  );
+}
+
+/** One queue as a card; the whole card is the link to its review view. */
+function QueueCard({ queue: q }: { queue: ObserveQueue }) {
+  const id = useId();
+  const { pending, done, skipped } = q.counts;
+  const total = pending + done + skipped;
+  return (
+    <li className="ds-card">
+      <a
+        className="ds-card-link qu-card"
+        href={`#${queuePath(q.queue_id)}`}
+        aria-labelledby={`${id}-name`}
+        aria-describedby={`${id}-rubric ${id}-progress ${id}-meta`}
+      >
+        <span className="ds-card-top">
+          <span className="ds-card-icon" aria-hidden="true">
+            <ListChecks size={16} strokeWidth={1.75} />
+          </span>
+          <span className="ds-card-name" id={`${id}-name`} title={q.name}>
+            {q.name}
+          </span>
+        </span>
+        <span id={`${id}-rubric`}>
+          <RubricChips rubric={q.rubric} />
+        </span>
+        <span className="qu-card-progress" id={`${id}-progress`}>
+          <ProgressBar done={done} skipped={skipped} total={total} />
+          <span className="qu-card-progress-text">
+            <span className="qu-reviewed">
+              <b>{fmtInt(done)}</b> reviewed of {fmtInt(total)}
+            </span>
+            {skipped > 0 && <span className="qu-skipped">{fmtInt(skipped)} skipped</span>}
+          </span>
+        </span>
+        <span className="ds-card-meta" id={`${id}-meta`}>
+          <span className="ds-card-stat qu-pending">
+            <Inbox size={14} strokeWidth={1.75} aria-hidden="true" />
+            {fmtInt(pending)} pending
+          </span>
+          <span className="ds-card-stat">
+            <CalendarDays size={14} strokeWidth={1.75} aria-hidden="true" />
+            Created {fmtDate(q.created_at)}
+          </span>
+        </span>
+      </a>
+    </li>
+  );
+}
+
+function NewQueueButton({ open, onClick }: { open: boolean; onClick: () => void }) {
+  return (
+    <button type="button" className="btn btn-primary" aria-expanded={open} aria-controls={open ? NEW_QUEUE_FORM_ID : undefined} onClick={onClick}>
+      <Plus aria-hidden="true" />
+      New queue
+    </button>
+  );
+}
+
+const EMPTY_HINT = 'Create one with New queue and a rubric, then add traces to it (POST /api/v1/queues/:id/items) to review them here.';
+
+/** The loaded grid (or its empty state) and, past one page, the pager. */
+function QueueGrid({ data, offset, creating, onNew }: { data: ObserveQueueList; offset: number; creating: boolean; onNew: () => void }) {
+  if (data.queues.length === 0 && offset === 0)
+    return (
+      <Card as="div">
+        {creating ? (
+          <EmptyState icon={ListChecks} title="No annotation queues yet" hint={EMPTY_HINT} />
+        ) : (
+          <EmptyState icon={ListChecks} title="No annotation queues yet" hint={EMPTY_HINT} action={<NewQueueButton open={false} onClick={onNew} />} />
+        )}
+      </Card>
+    );
+  return (
+    <>
+      {data.queues.length === 0 ? (
+        <p className="datasets-note">No queues on this page.</p>
+      ) : (
+        <ul className="ds-grid" aria-label="Annotation queues">
+          {data.queues.map((q) => (
+            <QueueCard key={q.queue_id} queue={q} />
+          ))}
+        </ul>
+      )}
+      {(offset > 0 || data.total > QUEUES_PAGE_SIZE) && (
+        <TablePager offset={offset} limit={QUEUES_PAGE_SIZE} total={data.total} onChange={(next) => navigate(queuesPath(next), { replace: true })} />
+      )}
+    </>
+  );
+}
 
 function QueueList() {
   const route = useRoute();
   const offset = parseOffset(route.query);
   const [refreshKey, setRefreshKey] = useState(0);
+  const [creating, setCreating] = useState(false);
   const list = useQueues({ limit: QUEUES_PAGE_SIZE, offset }, refreshKey);
-  if (useDaemonDown(false, [list])) return <ObserveDaemonDown />;
+  const down = useDaemonDown(false, [list]);
+  const created = () => {
+    setCreating(false);
+    setRefreshKey((k) => k + 1);
+  };
+  const header = (
+    <EvalsHeader description={DESCRIPTION} actions={down ? undefined : <NewQueueButton open={creating} onClick={() => setCreating((v) => !v)} />} />
+  );
+  if (down)
+    return (
+      <>
+        {header}
+        <ObserveDaemonDown />
+      </>
+    );
   return (
     <>
+      {header}
       <h2 className="visually-hidden">Annotation queues</h2>
-      <NewQueueForm onCreated={() => setRefreshKey((k) => k + 1)} />
+      {creating && <NewQueueForm onCancel={() => setCreating(false)} onCreated={created} />}
       <ObserveError error={list.error} />
-      <DataTable
-        id="queues"
-        columns={COLUMNS}
-        rows={list.data?.queues ?? []}
-        rowKey={(q) => q.queue_id}
-        onRowOpen={(q) => navigate(queuePath(q.queue_id))}
-        page={{
-          offset,
-          limit: QUEUES_PAGE_SIZE,
-          total: list.data?.total ?? 0,
-          onChange: (next) => navigate(queuesPath(next), { replace: true }),
-        }}
-        loading={list.loading && !list.data}
-        empty={
-          <EmptyState
-            title="No annotation queues yet"
-            hint="Create one above with a rubric, then add traces to it (POST /api/v1/queues/:id/items) to review them here."
-          />
-        }
-      />
+      {list.loading && !list.data && <GridSkeleton label="Loading annotation queues" />}
+      {list.data && <QueueGrid data={list.data} offset={offset} creating={creating} onNew={() => setCreating(true)} />}
     </>
   );
 }
 
-/** `#/evals/queues` and `#/evals/queues/:id`, under the Evaluations tabs and behind the daemon-down state. */
+/** `#/evals/queues` and `#/evals/queues/:id`, under the Evaluations header and behind the daemon-down state. */
 export function QueuesScreen() {
   const { path } = useRoute();
   const health = useDaemonHealth();
   const review = matchRoute(`#${path}`, ['/evals/queues/:id']);
   let body;
-  if (health.down) body = <ObserveDaemonDown />;
+  if (health.down)
+    body = (
+      <>
+        <EvalsHeader description={DESCRIPTION} />
+        <ObserveDaemonDown />
+      </>
+    );
   else if (review) body = <QueueReview key={review.params.id} queueId={review.params.id} />;
   else body = <QueueList />;
   return (
-    <section className="datasets-screen" aria-label="Annotation queues">
-      <EvalsHeader description="Traces queued for human review against a rubric" />
+    <section className="ds-screen" aria-label="Annotation queues">
       {body}
     </section>
   );
diff --git a/apps/agent-forge/src/screens/queues/RubricForm.tsx b/apps/agent-forge/src/screens/queues/RubricForm.tsx
index d2582e72..02cb9de7 100644
--- a/apps/agent-forge/src/screens/queues/RubricForm.tsx
+++ b/apps/agent-forge/src/screens/queues/RubricForm.tsx
@@ -1,20 +1,24 @@
 /**
- * The review view's score form: one numeric input per rubric entry (its
- * min/max as the input's bounds; blank means "not scored" and is left out)
- * with an optional comment each, then `Submit` and `Skip`.
+ * The review view's score card: per rubric entry a numeric input (its min/max
+ * as the input's bounds; blank means "not scored" and is left out), quick-pick
+ * score buttons when the bounds are a small whole-number range, and an
+ * optional comment; then `Skip` and `Submit & next`, with their keys shown.
  *
- * Keys: Enter submits unless focus is in a textarea or on a control Enter
- * already means something to (a button, a link, a select); inside the form's
- * own inputs the browser's implicit submit does it. `S` skips unless the user
- * is typing (input, textarea, select, contenteditable).
+ * Keys: Enter submits unless focus is on a control Enter already means
+ * something to (a button, a link, a select); inside the form's own inputs the
+ * browser's implicit submit does it, and in a comment Enter submits too
+ * (Shift+Enter is a new line). `S` skips unless the user is typing (input,
+ * textarea, select, contenteditable).
  */
-import { useEffect, useId, useRef, useState, type FormEvent } from 'react';
+import { useEffect, useId, useRef, useState, type FormEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { isEditableTarget } from '../../canvas/isEditableTarget';
 import { ObserveApiError, observeClient } from '../../observe/observeClient';
 import type { NewQueueScore, ObserveQueue, ObserveQueueItem } from '../../observe/types';
 import { useToast } from '../../ui/Toast';
+import { rubricRange } from './queuesUrl';
 
-type Drafts = Record<string, { value: string; comment: string }>;
+type Drafts = Record<string, Draft>;
+type Draft = { value: string; comment: string };
 
 /** Controls where a plain Enter already has a meaning of its own (an input's is the form's implicit submit). */
 const ENTER_OWNERS = 'a[href], button, input, select, textarea, summary, [contenteditable=""], [contenteditable="true"], [role="button"], [role="link"], [role="tab"], [role="option"], [role="menuitem"], [role="treeitem"]';
@@ -68,50 +72,98 @@ function useComplete(queue: ObserveQueue, item: ObserveQueueItem, onDone: () =>
   return { busy, complete };
 }
 
+/** Whole-number score buttons for an entry bounded by a small integer range (at most 11 values), else none. */
+function scoreChoices(entry: ObserveQueue['rubric'][number]): number[] {
+  const { min, max } = entry;
+  if (min === undefined || max === undefined || !Number.isInteger(min) || !Number.isInteger(max)) return [];
+  if (max < min || max - min > 10) return [];
+  return Array.from({ length: max - min + 1 }, (_, i) => min + i);
+}
+
+/** In a comment, Enter submits the form (Shift+Enter keeps the new line). */
+function submitOnEnter(e: ReactKeyboardEvent<HTMLTextAreaElement>) {
+  if (e.key !== 'Enter' || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey || e.nativeEvent.isComposing) return;
+  e.preventDefault();
+  e.currentTarget.form?.requestSubmit();
+}
+
+/** The quick-pick buttons; picking the chosen value again clears it (back to "not scored"). */
+function ScoreChoices({ name, choices, draft, onChange }: { name: string; choices: number[]; draft: Draft; onChange: (next: Draft) => void }) {
+  return (
+    <div className="qu-choices" role="group" aria-label={`${name} score`}>
+      {choices.map((v) => {
+        const on = draft.value.trim() !== '' && Number(draft.value) === v;
+        return (
+          <button
+            key={v}
+            type="button"
+            className="qu-choice"
+            aria-pressed={on}
+            onClick={() => onChange({ ...draft, value: on ? '' : String(v) })}
+          >
+            {v}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
 function ScoreField({
   entry,
   draft,
   onChange,
 }: {
   entry: ObserveQueue['rubric'][number];
-  draft: { value: string; comment: string };
-  onChange: (next: { value: string; comment: string }) => void;
+  draft: Draft;
+  onChange: (next: Draft) => void;
 }) {
-  const hintId = useId();
+  const id = useId();
+  const choices = scoreChoices(entry);
   return (
-    <div className="queues-score">
-      <label className="datasets-field">
-        <span>{entry.name}</span>
+    <div className="qu-score">
+      <div className="qu-score-head">
+        <label className="qu-score-name" htmlFor={`${id}-value`}>
+          {entry.name}
+        </label>
+        <span className="qu-score-range" aria-hidden="true">
+          {rubricRange(entry)}
+        </span>
         <input
+          id={`${id}-value`}
+          className="input qu-score-input"
           name={`score-${entry.name}`}
           type="number"
           step="any"
           min={entry.min}
           max={entry.max}
           value={draft.value}
-          aria-describedby={entry.description ? hintId : undefined}
+          placeholder="-"
+          aria-describedby={entry.description ? `${id}-hint` : undefined}
           onChange={(e) => onChange({ ...draft, value: e.target.value })}
         />
-      </label>
+      </div>
       {entry.description && (
-        <p id={hintId} className="datasets-note">
+        <p id={`${id}-hint`} className="qu-score-desc">
           {entry.description}
         </p>
       )}
-      <input
-        className="queues-comment"
+      {choices.length > 0 && <ScoreChoices name={entry.name} choices={choices} draft={draft} onChange={onChange} />}
+      <textarea
+        className="textarea qu-comment"
         name={`comment-${entry.name}`}
-        type="text"
+        rows={2}
         aria-label={`Comment on ${entry.name} (optional)`}
-        placeholder="Comment (optional)"
+        placeholder="Comment (optional), Shift+↵ for a new line"
         value={draft.comment}
+        onKeyDown={submitOnEnter}
         onChange={(e) => onChange({ ...draft, comment: e.target.value })}
       />
     </div>
   );
 }
 
-/** The score form for one item; `onDone` loads the next item after a submit, a skip or a 409. */
+/** The score card for one item; `onDone` loads the next item after a submit, a skip or a 409. */
 export function RubricForm({ queue, item, onDone }: { queue: ObserveQueue; item: ObserveQueueItem; onDone: () => void }) {
   const [drafts, setDrafts] = useState<Drafts>({});
   const { busy, complete } = useComplete(queue, item, onDone);
@@ -137,27 +189,34 @@ export function RubricForm({ queue, item, onDone }: { queue: ObserveQueue; item:
     void complete({ scores: toScores(queue, drafts) });
   };
 
+  const count = queue.rubric.length;
   return (
-    <form ref={form} className="queues-rubric-form" aria-label="Scores" onSubmit={submit}>
-      <h3 className="datasets-section-title">Scores</h3>
-      {queue.rubric.length === 0 && <p className="datasets-note">This queue has no rubric: Submit marks the trace reviewed with no scores.</p>}
-      {queue.rubric.map((entry) => (
-        <ScoreField
-          key={entry.name}
-          entry={entry}
-          draft={drafts[entry.name] ?? { value: '', comment: '' }}
-          onChange={(next) => setDrafts((all) => ({ ...all, [entry.name]: next }))}
-        />
-      ))}
-      <div className="queues-form-actions">
-        <button type="button" className="btn btn-ghost" disabled={busy} onClick={skip} aria-keyshortcuts="S">
+    <form ref={form} className="card qu-rubric-card" aria-label="Scores" onSubmit={submit}>
+      <div className="qu-rubric-head">
+        <h3 className="card-title">Scores</h3>
+        <p className="card-description">{count === 1 ? '1 score; blank ones are left out' : `${count} scores; blank ones are left out`}</p>
+      </div>
+      <div className="qu-rubric-body">
+        {count === 0 && <p className="datasets-note">This queue has no rubric: Submit marks the trace reviewed with no scores.</p>}
+        {queue.rubric.map((entry) => (
+          <ScoreField
+            key={entry.name}
+            entry={entry}
+            draft={drafts[entry.name] ?? { value: '', comment: '' }}
+            onChange={(next) => setDrafts((all) => ({ ...all, [entry.name]: next }))}
+          />
+        ))}
+      </div>
+      <div className="qu-rubric-footer">
+        <button type="button" className="btn qu-skip" disabled={busy} onClick={skip} aria-keyshortcuts="S">
           Skip
+          <kbd aria-hidden="true">S</kbd>
         </button>
-        <button type="submit" className="btn" disabled={busy} aria-keyshortcuts="Enter">
-          Submit
+        <button type="submit" className="btn btn-primary qu-submit" disabled={busy} aria-keyshortcuts="Enter">
+          Submit &amp; next
+          <kbd aria-hidden="true">↵</kbd>
         </button>
       </div>
-      <p className="datasets-note queues-keys">Enter submits, S skips.</p>
     </form>
   );
 }
diff --git a/apps/agent-forge/src/screens/queues/__tests__/QueuesScreen.test.tsx b/apps/agent-forge/src/screens/queues/__tests__/QueuesScreen.test.tsx
index f23abc65..a7fef18c 100644
--- a/apps/agent-forge/src/screens/queues/__tests__/QueuesScreen.test.tsx
+++ b/apps/agent-forge/src/screens/queues/__tests__/QueuesScreen.test.tsx
@@ -125,11 +125,20 @@ async function mountAt(hash: string) {
   return container;
 }
 
-const buttonNamed = (container: HTMLElement, name: string) =>
-  [...container.querySelectorAll('button')].find((b) => b.textContent?.trim() === name || b.getAttribute('aria-label') === name);
+/** A button's name: its aria-label, else its text without aria-hidden parts (the kbd hints). */
+function nameOf(button: HTMLButtonElement): string {
+  const label = button.getAttribute('aria-label');
+  if (label) return label;
+  const copy = button.cloneNode(true) as HTMLElement;
+  copy.querySelectorAll('[aria-hidden="true"]').forEach((el) => el.remove());
+  return copy.textContent?.trim() ?? '';
+}
+
+const buttonNamed = (container: HTMLElement, name: string) => [...container.querySelectorAll('button')].find((b) => nameOf(b) === name);
 
-function type(input: HTMLInputElement, value: string) {
-  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!;
+function type(input: HTMLInputElement | HTMLTextAreaElement, value: string) {
+  const proto = input instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  const setter = Object.getOwnPropertyDescriptor(proto, 'value')!.set!;
   act(() => {
     setter.call(input, value);
     input.dispatchEvent(new Event('input', { bubbles: true }));
@@ -163,11 +172,15 @@ describe('queue paths', () => {
 });
 
 describe('QueuesScreen list', () => {
-  it('renders one row per queue with its counts, under the Evaluations tabs', async () => {
+  it('renders one card per queue with its rubric chips and counts, under the Evaluations tabs', async () => {
     const container = await mountAt('#/evals/queues');
-    const row = container.querySelector('tbody tr')!;
-    expect(row.textContent).toContain('support-review');
-    expect([...row.querySelectorAll('td')].slice(1, 4).map((td) => td.textContent)).toEqual(['2', '3', '1']);
+    const card = container.querySelector('.ds-grid .qu-card')!;
+    expect(card.textContent).toContain('support-review');
+    expect([...card.querySelectorAll('.qu-chip')].map((c) => c.textContent)).toEqual(['helpfulness0–5', 'tone1–3']);
+    // pending / done / skipped: 2 / 3 / 1.
+    expect(card.querySelector('.qu-pending')?.textContent).toBe('2 pending');
+    expect(card.querySelector('.qu-reviewed')?.textContent).toBe('3 reviewed of 6');
+    expect(card.querySelector('.qu-skipped')?.textContent).toBe('1 skipped');
     expect(container.querySelector('nav[aria-label="Evaluations"] [aria-current="page"]')?.textContent).toBe('Annotation queues');
     const list = calls.find((c) => c.path === '/api/v1/queues')!;
     expect(list.query.get('limit')).toBe('50');
@@ -177,21 +190,23 @@ describe('QueuesScreen list', () => {
     queues = [];
     const container = await mountAt('#/evals/queues');
     expect(container.textContent).toContain('No annotation queues yet');
+    expect(buttonNamed(container.querySelector('.empty-state') as HTMLElement, 'New queue')).toBeDefined();
   });
 
-  it('opens the review view on row open', async () => {
+  it('links each card to its review view', async () => {
     const container = await mountAt('#/evals/queues');
-    act(() => (container.querySelector('tbody tr') as HTMLElement).click());
-    expect(window.location.hash).toBe('#/evals/queues/q1');
+    expect(container.querySelector('.qu-card')?.getAttribute('href')).toBe('#/evals/queues/q1');
   });
 
   it('creates a queue with its rubric rows (blank fields left out) and shows a 409 inline', async () => {
     const container = await mountAt('#/evals/queues');
+    expect(container.querySelector('form[aria-label="New annotation queue"]')).toBeNull();
+    await act(async () => buttonNamed(container, 'New queue')!.click());
     const form = container.querySelector('form[aria-label="New annotation queue"]') as HTMLFormElement;
     type(form.querySelector('input[name="queue-name"]') as HTMLInputElement, 'support-review');
     type(form.querySelector('input[name="rubric-name-0"]') as HTMLInputElement, 'accuracy');
     expect(buttonNamed(container, 'Remove rubric row 1')!.disabled).toBe(true);
-    await act(async () => buttonNamed(container, 'Add rubric row')!.click());
+    await act(async () => buttonNamed(container, 'Add rubric entry')!.click());
     type(form.querySelector('input[name="rubric-name-1"]') as HTMLInputElement, 'tone');
     type(form.querySelector('input[name="rubric-description-1"]') as HTMLInputElement, 'Polite?');
     type(form.querySelector('input[name="rubric-min-1"]') as HTMLInputElement, '1');
@@ -208,11 +223,13 @@ describe('QueuesScreen list', () => {
       name: 'fresh',
       rubric: [{ name: 'accuracy' }, { name: 'tone', description: 'Polite?', min: 1, max: 3 }],
     });
-    expect(container.querySelector('tbody')!.textContent).toContain('fresh');
+    expect(container.querySelector('.ds-grid')!.textContent).toContain('fresh');
+    expect(container.querySelector('form[aria-label="New annotation queue"]')).toBeNull();
   });
 
   it('keeps Create disabled while a rubric row has no name', async () => {
     const container = await mountAt('#/evals/queues');
+    await act(async () => buttonNamed(container, 'New queue')!.click());
     type(container.querySelector('input[name="queue-name"]') as HTMLInputElement, 'fresh');
     expect(buttonNamed(container, 'Create queue')!.disabled).toBe(true);
   });
@@ -228,13 +245,53 @@ describe('QueuesScreen review', () => {
     expect(scoreInput(container, 'tone').min).toBe('1');
     expect(container.textContent).toContain('Did it answer the question?');
     expect(container.querySelector('[aria-label="Queue progress"]')?.textContent).toMatch(/2 pending.*3 done.*1 skipped/);
+    // n of m: n = done + skipped + 1, m = done + skipped + pending.
+    expect(container.querySelector('.qu-position')?.textContent).toBe('Item 5 of 6');
+    expect(container.querySelector('[role="progressbar"]')?.getAttribute('aria-valuenow')).toBe('4');
+    // Messages is the default view: the root step's input and output.
+    expect(buttonNamed(container, 'Messages')!.getAttribute('aria-pressed')).toBe('true');
+    expect([...container.querySelectorAll('.mv-body')].map((b) => b.textContent)).toEqual(['"hello"', '"hi"']);
+  });
+
+  it('switches the item to the whole trace and back', async () => {
+    const container = await mountAt('#/evals/queues/q1');
+    expect(buttonNamed(container, 'Tree')).toBeUndefined();
+    await act(async () => buttonNamed(container, 'Trace')!.click());
+    expect(buttonNamed(container, 'Trace')!.getAttribute('aria-pressed')).toBe('true');
+    expect(buttonNamed(container, 'Tree')).toBeDefined();
+    await act(async () => buttonNamed(container, 'Messages')!.click());
+    expect(container.querySelectorAll('.mv-body')).toHaveLength(2);
+  });
+
+  it('a score button sets the value and picking it again clears it', async () => {
+    const container = await mountAt('#/evals/queues/q1');
+    const tone = container.querySelector('[role="group"][aria-label="tone score"]') as HTMLElement;
+    expect([...tone.querySelectorAll('button')].map((b) => b.textContent)).toEqual(['1', '2', '3']);
+    await act(async () => buttonNamed(tone, '2')!.click());
+    expect(scoreInput(container, 'tone').value).toBe('2');
+    expect(buttonNamed(tone, '2')!.getAttribute('aria-pressed')).toBe('true');
+    await act(async () => buttonNamed(tone, '2')!.click());
+    expect(scoreInput(container, 'tone').value).toBe('');
+  });
+
+  it('Enter in a comment submits; Shift+Enter does not', async () => {
+    const container = await mountAt('#/evals/queues/q1');
+    const comment = container.querySelector('textarea[name="comment-tone"]') as HTMLTextAreaElement;
+    type(scoreInput(container, 'tone'), '3');
+    await act(async () => {
+      comment.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', shiftKey: true, bubbles: true, cancelable: true }));
+    });
+    await flush();
+    expect(completes()).toHaveLength(0);
+    await press('Enter', comment);
+    expect(completes()[0].body).toEqual({ scores: [{ name: 'tone', value: 3 }] });
   });
 
   it('Submit posts only the scored entries (with comments) and loads the next item', async () => {
     const container = await mountAt('#/evals/queues/q1');
     type(scoreInput(container, 'helpfulness'), '4');
-    type(container.querySelector('input[name="comment-helpfulness"]') as HTMLInputElement, 'solid');
-    await act(async () => buttonNamed(container, 'Submit')!.click());
+    type(container.querySelector('textarea[name="comment-helpfulness"]') as HTMLTextAreaElement, 'solid');
+    await act(async () => buttonNamed(container, 'Submit & next')!.click());
     await flush();
     expect(completes()).toHaveLength(1);
     expect(completes()[0].path).toBe('/api/v1/queues/q1/items/i1/complete');
@@ -268,6 +325,7 @@ describe('QueuesScreen review', () => {
 
   it('Enter on a button leaves the button alone (no submit)', async () => {
     const container = await mountAt('#/evals/queues/q1');
+    await act(async () => buttonNamed(container, 'Trace')!.click());
     await press('Enter', buttonNamed(container, 'Tree')!);
     expect(completes()).toHaveLength(0);
   });
@@ -285,7 +343,7 @@ describe('QueuesScreen review', () => {
   it('on a 409 (finished elsewhere) toasts and loads the next item', async () => {
     completeStatus = 409;
     const container = await mountAt('#/evals/queues/q1');
-    await act(async () => buttonNamed(container, 'Submit')!.click());
+    await act(async () => buttonNamed(container, 'Submit & next')!.click());
     await flush();
     expect(document.body.textContent).toContain('already finished');
     expect(reviewedTrace(container)).toBe('trace-2');
diff --git a/apps/agent-forge/src/screens/queues/queues.css b/apps/agent-forge/src/screens/queues/queues.css
index 2d24f667..148a89db 100644
--- a/apps/agent-forge/src/screens/queues/queues.css
+++ b/apps/agent-forge/src/screens/queues/queues.css
@@ -1,97 +1,402 @@
-/* Annotation queues (#/evals/queues, #/evals/queues/:id). Builds on datasets.css; tokens only. */
-.queues-rubric {
+/* Annotation queues (#/evals/queues, #/evals/queues/:id). The page and card grid (ds-*) live in ../evals/evals.css; tokens only. */
+
+/* ---------- Queue cards ---------- */
+.qu-card {
+  gap: var(--space-3);
+}
+.qu-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+.qu-chips-none {
+  font-size: var(--fs-meta);
+  font-style: italic;
+  color: var(--text-faint);
+}
+.qu-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--surface-2);
+  font-size: var(--fs-meta);
+  color: var(--text);
+  white-space: nowrap;
+}
+.qu-chip-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.qu-chip-range {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-faint);
+  font-variant-numeric: tabular-nums;
+}
+.qu-chip-more {
+  color: var(--text-muted);
+}
+.qu-card-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: auto;
+}
+.qu-card-progress-text {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--space-1) var(--space-3);
+  font-size: var(--fs-meta);
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.qu-reviewed b {
+  font-weight: 600;
+  color: var(--text);
+}
+.qu-skipped {
+  color: var(--text-faint);
+}
+.qu-card .ds-card-meta {
+  margin-top: 0;
+}
+
+/* The progress bar: done in the accent, skipped in a quiet tone, the rest the track. */
+.qu-bar {
+  display: flex;
+  width: 100%;
+  height: 6px;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--surface-3);
+}
+.qu-bar-done {
+  background: var(--accent-solid);
+  transition: width var(--dur) var(--ease);
+}
+.qu-bar-complete .qu-bar-done {
+  background: var(--success);
+}
+.qu-bar-skipped {
+  background: color-mix(in srgb, var(--text-faint) 55%, transparent);
+  transition: width var(--dur) var(--ease);
+}
+
+/* ---------- New annotation queue ---------- */
+.qu-new {
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+}
+.qu-new-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+.qu-new-name {
+  max-width: 360px;
+}
+.qu-rubric {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  align-items: flex-start;
+  gap: var(--space-2);
   min-width: 0;
   margin: 0;
-  padding: 8px;
+  padding: 0;
+  border: 0;
+}
+.qu-legend {
+  padding: 0;
+  margin-bottom: var(--space-2);
+}
+.qu-rubric-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  align-self: stretch;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.qu-rubric-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--space-3);
+  min-width: 0;
+  padding: var(--space-3);
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: var(--radius);
+  background: var(--surface-2);
 }
-.queues-rubric legend {
-  padding: 0 4px;
-  font-size: 12px;
+.qu-rubric-index {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-bottom: 5px;
+  border-radius: var(--radius-full);
+  background: var(--surface-3);
   color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
 }
-.queues-rubric-row {
+.qu-rubric-fields {
+  flex: 1;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
-  gap: 8px;
+  gap: var(--space-2) var(--space-3);
+  min-width: 0;
+}
+.qu-rubric-name {
+  flex: 1 1 160px;
 }
-.queues-field-narrow {
-  flex: 0 1 120px;
+.qu-rubric-wide {
+  flex: 3 1 220px;
 }
-.queues-form-actions {
+.qu-rubric-bound {
+  flex: 0 1 88px;
+}
+.qu-rubric-remove {
+  margin-bottom: 2px;
+}
+.qu-new-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 8px;
+  gap: var(--space-2);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border);
+}
+
+/* ---------- Review ---------- */
+.qu-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
 }
-.queues-progress {
+.qu-progress-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 12px;
-  margin: 0;
-  font-size: 13px;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-1) var(--space-4);
+  font-size: var(--fs-table);
+  font-variant-numeric: tabular-nums;
+}
+.qu-position {
+  color: var(--text-muted);
+}
+.qu-position b {
+  font-weight: 600;
+  color: var(--text);
+}
+.qu-counts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-3);
+  font-size: var(--fs-meta);
   color: var(--text-muted);
 }
-.queues-empty-links {
+.qu-empty-links {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: 16px;
+  justify-content: center;
+  gap: var(--space-2);
 }
 
-/* Review: the trace beside the score form; stacked on narrow screens. */
-.queues-review {
+/* The item beside the sticky score card; stacked (item, then scores) below 1100px. */
+.qu-review {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
-  gap: 12px;
+  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
+  gap: var(--space-4);
   align-items: start;
   min-width: 0;
 }
-@media (max-width: 900px) {
-  .queues-review {
+.qu-review > .qu-rubric-card {
+  position: sticky;
+  top: var(--space-4);
+}
+@media (max-width: 1100px) {
+  .qu-review {
     grid-template-columns: minmax(0, 1fr);
   }
+  .qu-review > .qu-rubric-card {
+    position: static;
+  }
+}
+.qu-item {
+  min-width: 0;
 }
-.queues-review-trace {
+.qu-item-head {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) var(--space-3);
+  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
+  border-bottom: 1px solid var(--border);
+}
+.qu-item-title {
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.queues-review-trace h3 a {
-  font-family: var(--font-mono);
-  font-weight: 400;
+.qu-item-head .segmented {
+  margin-left: auto;
+}
+.qu-item-body {
+  min-width: 0;
+  padding: var(--space-4) var(--space-5);
+}
+.qu-item-body-trace {
+  padding: var(--space-3);
 }
-.queues-rubric-form {
+.qu-messages {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+/* The score card: header, one block per rubric entry, the footer actions. */
+.qu-rubric-card {
   min-width: 0;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--surface);
 }
-.queues-score {
+.qu-rubric-head {
+  padding: var(--space-4) var(--space-5) var(--space-3);
+  border-bottom: 1px solid var(--border);
+}
+.qu-rubric-body {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--space-5);
+  padding: var(--space-4) var(--space-5);
 }
-.queues-score .datasets-field input,
-.queues-comment {
+.qu-score {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
   min-width: 0;
-  padding: 4px 8px;
+}
+.qu-score-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.qu-score-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  color: var(--text);
+}
+.qu-score-range {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-faint);
+}
+.qu-score-input {
+  width: 72px;
+  margin-left: auto;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.qu-score-desc {
+  margin: 0;
+  font-size: var(--fs-meta);
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+/* Quick-pick scores: one segmented row, the picked value in the accent. */
+.qu-choices {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
   border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+}
+.qu-choice {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  font-family: var(--font-ui);
+  font-size: var(--fs-table);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition:
+    background-color var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+.qu-choice:hover {
+  background: var(--surface);
   color: var(--text);
-  font: inherit;
-  font-size: 13px;
 }
-.queues-keys {
-  font-size: 12px;
+.qu-choice[aria-pressed='true'] {
+  background: var(--accent-solid);
+  color: var(--on-accent);
+  box-shadow: var(--shadow-sm);
+}
+.qu-choice:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+.qu-comment {
+  min-height: 52px;
+  font-family: var(--font-ui);
+  font-size: var(--fs-table);
+}
+.qu-rubric-footer {
+  display: flex;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-5) var(--space-4);
+  border-top: 1px solid var(--border);
+}
+.qu-skip {
+  flex: 1;
+  justify-content: center;
+}
+.qu-submit {
+  flex: 2;
+  justify-content: center;
+}
+.qu-rubric-footer kbd {
+  margin-left: var(--space-1);
+}
+.qu-submit kbd {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--on-accent) 18%, transparent);
+  color: var(--on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .qu-bar-done,
+  .qu-bar-skipped,
+  .qu-choice {
+    transition: none;
+  }
 }
diff --git a/apps/agent-forge/src/screens/queues/queuesUrl.ts b/apps/agent-forge/src/screens/queues/queuesUrl.ts
index fd63c3b6..2e0424ca 100644
--- a/apps/agent-forge/src/screens/queues/queuesUrl.ts
+++ b/apps/agent-forge/src/screens/queues/queuesUrl.ts
@@ -6,6 +6,7 @@
  * - `#/evals/queues/:id` - the review view for one queue (`:id` is the
  *   URL-encoded `queue_id`). The trace step selected there stays local state.
  */
+import type { ObserveRubricEntry } from '../../observe/types';
 
 /** Queues per list page, requested from the daemon (`limit`). */
 export const QUEUES_PAGE_SIZE = 50;
@@ -15,3 +16,11 @@ export const queuesPath = (offset?: number): string => (offset ? `/evals/queues?
 
 /** The hash path of one queue's review view. */
 export const queuePath = (queueId: string): string => `/evals/queues/${encodeURIComponent(queueId)}`;
+
+/** A rubric entry's bounds in a few characters: `0–5`, `≥ 1`, `≤ 10`, or `any` when unbounded. */
+export function rubricRange(entry: ObserveRubricEntry): string {
+  if (entry.min !== undefined && entry.max !== undefined) return `${entry.min}–${entry.max}`;
+  if (entry.min !== undefined) return `≥ ${entry.min}`;
+  if (entry.max !== undefined) return `≤ ${entry.max}`;
+  return 'any';
+}