diff --git a/src/web/setup.rs b/src/web/setup.rs
index 7266bb6a0..58723b0da 100644
--- a/src/web/setup.rs
+++ b/src/web/setup.rs
@@ -111,46 +111,201 @@ async fn setup_page() -> Html<&'static str> {
 /// launch with no console to print it on. Blank is a server that looks
 /// finished: the lobby loads, the interview starts, and nothing ever joins.
 const SETUP_PAGE: &str = r#"<!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8">
-<title>codetrial Setup</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CodeTrial - Setup</title>
 <style>
-  body { font-family: system-ui, sans-serif; max-width: 32rem; margin: 2rem auto; padding: 0 1rem; }
-  label { display: block; margin-top: 1rem; font-weight: 600; }
-  input { display: block; width: 100%; margin-top: .25rem; padding: .4rem; box-sizing: border-box; }
-  small { display: block; color: #555; margin-top: .15rem; }
-  button { margin-top: 1.5rem; padding: .5rem 1rem; }
-  #status { margin-top: 1rem; white-space: pre-wrap; }
-  #status.error { color: #b00020; }
-  #status.ok { color: #0a7a2f; }
+  :root {
+    color-scheme: light;
+    --page: #f6f6f9;
+    --surface: #ffffff;
+    --ink: #171d2d;
+    --sub: #4f5b73;
+    --hairline: #e3e5ec;
+    --control-border: #858fa3;
+    --accent: #6e2bf0;
+    --accent-fill: #6e2bf0;
+    --accent-deep: #5520c4;
+    --accent-ink: #5520c4;
+    --practice-tint: #f3edff;
+    --practice-tint-edge: #ddd0fb;
+    --good: #137b56;
+    --critical: #c52d43;
+    --shadow-card: 0 1px 2px rgb(23 29 45 / 4%), 0 8px 24px rgb(23 29 45 / 6%);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+      --page: #11110f;
+      --surface: #1b1b18;
+      --ink: #f6f3ea;
+      --sub: #b7b2a5;
+      --hairline: #2d2b26;
+      --control-border: #8a8473;
+      --accent: #a291ff;
+      --accent-fill: #744ce6;
+      --accent-deep: #6437d2;
+      --accent-ink: #ab9eff;
+      --practice-tint: color-mix(in oklch, var(--accent-fill) 16%, var(--surface));
+      --practice-tint-edge: #473983;
+      --good: #24b47e;
+      --critical: #ff6b6b;
+      --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 24%);
+    }
+  }
+  * { box-sizing: border-box; }
+  body {
+    min-height: 100vh;
+    margin: 0;
+    background: var(--page);
+    color: var(--ink);
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  main { width: min(100%, 52rem); margin: 0 auto; padding: 2.5rem 1.25rem; }
+  header { margin-bottom: 2rem; }
+  .brand { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
+  .hero { margin-bottom: 2rem; }
+  .badge {
+    display: inline-block;
+    margin-bottom: 1rem;
+    padding: 0.375rem 0.875rem;
+    border: 1px solid var(--practice-tint-edge);
+    border-radius: 999px;
+    background: var(--practice-tint);
+    color: var(--accent-ink);
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+  h1 {
+    margin: 0;
+    font-size: clamp(2rem, 5vw, 3.25rem);
+    line-height: 1.1;
+    letter-spacing: -0.035em;
+  }
+  .lead { margin: 0.875rem 0 0; color: var(--sub); font-size: 1.125rem; line-height: 1.55; }
+  form {
+    padding: 1.5rem;
+    border: 1px solid var(--hairline);
+    border-radius: 20px;
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+  }
+  fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
+  fieldset + fieldset { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
+  legend { padding: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
+  .requirement {
+    margin-left: 0.5rem;
+    color: var(--accent-ink);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .group-note { margin: 0.5rem 0 1.25rem; color: var(--sub); line-height: 1.5; }
+  .field + .field, .field-row { margin-top: 1rem; }
+  .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
+  .field-row > .field + .field { margin-top: 0; }
+  label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; }
+  input {
+    display: block;
+    width: 100%;
+    min-height: 2.5rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--control-border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--ink);
+    font: inherit;
+  }
+  small { display: block; margin-top: 0.375rem; color: var(--sub); font-size: 0.8125rem; line-height: 1.5; }
+  a { color: var(--accent-ink); }
+  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+  .action-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem 1rem;
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--hairline);
+  }
+  button {
+    min-height: 2.75rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    background: var(--accent-fill);
+    color: #ffffff;
+    cursor: pointer;
+    font: inherit;
+    font-weight: 700;
+    transition: background 120ms ease;
+  }
+  button:not(:disabled):hover { background: var(--accent-deep); }
+  button:disabled { cursor: not-allowed; opacity: 0.6; }
+  #status { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+  #status.error { color: var(--critical); }
+  #status.ok { color: var(--good); }
+  @media (max-width: 600px) {
+    main { padding: 1.25rem; }
+    header { margin-bottom: 1.25rem; }
+    .hero { margin-bottom: 1.5rem; }
+    .lead { font-size: 1rem; }
+    form { padding: 1.25rem; }
+    .field-row { grid-template-columns: minmax(0, 1fr); }
+    input { font-size: 1rem; }
+    .action-row { align-items: stretch; }
+    .action-row button { width: 100%; }
+  }
 </style>
 </head>
 <body>
-<h1>Setup</h1>
-<p>Enter your LiveKit and Google credentials to get started.</p>
-<form id="setup-form">
-  <label for="livekitUrl">LiveKit URL</label>
-  <input id="livekitUrl" name="livekitUrl" type="text" placeholder="wss://your-project.livekit.cloud" required>
-  <small>From your project at <a href="https://cloud.livekit.io" target="_blank" rel="noopener">cloud.livekit.io</a>.</small>
-
-  <label for="livekitApiKey">LiveKit API Key</label>
-  <input id="livekitApiKey" name="livekitApiKey" type="text" required>
-
-  <label for="livekitApiSecret">LiveKit API Secret</label>
-  <input id="livekitApiSecret" name="livekitApiSecret" type="password" required>
-  <small>Both come from the same project's Keys page.</small>
-
-  <label for="googleApiKey">Google API Key</label>
-  <input id="googleApiKey" name="googleApiKey" type="password">
-  <small>From <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener">aistudio.google.com</a>.
-  Optional, and what it decides is whether this server hosts the interviewer. Without it
-  the app still loads and an interview still starts, but nobody joins the room: something
-  running elsewhere would have to.</small>
-
-  <button id="submit" type="submit">Save and continue</button>
-</form>
-<div id="status"></div>
+<main>
+  <header><div class="brand">CODETRIAL</div></header>
+  <section class="hero" aria-labelledby="setup-title">
+    <span class="badge">First-time setup</span>
+    <h1 id="setup-title">Set up CodeTrial</h1>
+    <p class="lead">Connect your services to start practicing live technical interviews.</p>
+  </section>
+  <form id="setup-form">
+    <fieldset>
+      <legend>LiveKit credentials <span class="requirement">Required</span></legend>
+      <p class="group-note">Use the URL and keys from the same LiveKit project.</p>
+      <div class="field">
+        <label for="livekitUrl">LiveKit URL</label>
+        <input id="livekitUrl" name="livekitUrl" type="text" placeholder="wss://your-project.livekit.cloud" required>
+        <small>Find it at <a href="https://cloud.livekit.io" target="_blank" rel="noopener">cloud.livekit.io</a>.</small>
+      </div>
+      <div class="field-row">
+        <div class="field">
+          <label for="livekitApiKey">LiveKit API Key</label>
+          <input id="livekitApiKey" name="livekitApiKey" type="text" required>
+        </div>
+        <div class="field">
+          <label for="livekitApiSecret">LiveKit API Secret</label>
+          <input id="livekitApiSecret" name="livekitApiSecret" type="password" required>
+        </div>
+      </div>
+      <small>Find both on the project's Keys page.</small>
+    </fieldset>
+    <fieldset>
+      <legend>Google AI <span class="requirement">Optional</span></legend>
+      <p class="group-note">Add a key if this server will host the interviewer.</p>
+      <div class="field">
+        <label for="googleApiKey">Google API Key</label>
+        <input id="googleApiKey" name="googleApiKey" type="password">
+        <small>Get a key from <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener">aistudio.google.com</a>.</small>
+        <small>Without a key, the app still loads and an interview can start, but an interviewer running elsewhere must join the room.</small>
+      </div>
+    </fieldset>
+    <div class="action-row">
+      <button id="submit" type="submit">Save and continue</button>
+      <div id="status" role="status" aria-live="polite"></div>
+    </div>
+  </form>
+</main>
 <script>
   const form = document.getElementById('setup-form');
   const status = document.getElementById('status');
diff --git a/tests/browser/setup-page.test.js b/tests/browser/setup-page.test.js
new file mode 100644
index 000000000..abbd0b26a
--- /dev/null
+++ b/tests/browser/setup-page.test.js
@@ -0,0 +1,164 @@
+// Run with: node --test tests/browser/setup-page.test.js
+// The setup page is embedded in Rust, so serve that exact HTML to Chromium.
+
+import { after, before, test } from "node:test";
+import assert from "node:assert/strict";
+
+import { launchChromium, read, startStaticServer } from "./source.js";
+
+const source = read("src/web/setup.rs");
+const start = source.indexOf('const SETUP_PAGE: &str = r#"');
+assert.notEqual(start, -1, "setup page constant exists");
+const htmlStart = start + 'const SETUP_PAGE: &str = r#"'.length;
+const htmlEnd = source.indexOf('"#;', htmlStart);
+assert.notEqual(htmlEnd, -1, "setup page constant ends");
+const html = source.slice(htmlStart, htmlEnd);
+const lobbyCss = read("web/styles.css");
+const paletteTokens = [
+  ...new Set([...html.matchAll(/^\s+(--[a-z-]+):/gm)].map((match) => match[1])),
+];
+assert.ok(paletteTokens.length > 0, "setup palette tokens exist");
+
+let browser = null;
+let server = null;
+let base = "";
+let submissions = [];
+
+before(async () => {
+  browser = await launchChromium();
+  if (!browser) return;
+  ({ server, base } = await startStaticServer({
+    handle: async (request, response, url) => {
+      if (url.pathname === "/setup") {
+        response.setHeader("content-type", "text/html");
+        response.end(html);
+        return true;
+      }
+      if (url.pathname === "/api/setup") {
+        let body = "";
+        for await (const chunk of request) body += chunk;
+        submissions.push(JSON.parse(body));
+        response.statusCode = 400;
+        response.setHeader("content-type", "application/json");
+        response.end(
+          JSON.stringify({ error: "Check the LiveKit credentials" }),
+        );
+        return true;
+      }
+      return false;
+    },
+  }));
+});
+
+after(async () => {
+  await browser?.close();
+  await new Promise((closed) => (server ? server.close(closed) : closed()));
+});
+
+test("setup palette stays aligned with the lobby", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  for (const colorScheme of ["light", "dark"]) {
+    const setupPage = await browser.newPage({ colorScheme });
+    const lobbyPage = await browser.newPage({ colorScheme });
+    t.after(() => Promise.all([setupPage.close(), lobbyPage.close()]));
+    await setupPage.goto(`${base}/setup`);
+    await lobbyPage.setContent('<body class="practice-page"></body>');
+    await lobbyPage.addStyleTag({ content: lobbyCss });
+
+    const tokensOn = (page, selector) =>
+      page.locator(selector).evaluate((element, names) => {
+        const style = getComputedStyle(element);
+        return Object.fromEntries(
+          names.map((name) => [name, style.getPropertyValue(name)]),
+        );
+      }, paletteTokens);
+    const setupTokens = await tokensOn(setupPage, ":root");
+    const lobbyTokens = await tokensOn(lobbyPage, ".practice-page");
+    for (const name of paletteTokens) {
+      const compact = (value) => value.replace(/\s+/g, "");
+      assert.equal(
+        compact(setupTokens[name]),
+        compact(lobbyTokens[name]),
+        `${colorScheme} ${name} differs from the lobby`,
+      );
+    }
+  }
+});
+
+test("setup shows distinct credential groups without narrow-screen overflow", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  for (const colorScheme of ["light", "dark"]) {
+    const page = await browser.newPage({
+      viewport: { width: 320, height: 800 },
+      colorScheme,
+    });
+    t.after(() => page.close());
+    await page.goto(`${base}/setup`);
+    assert.equal(await page.locator("fieldset").count(), 2);
+    assert.match(
+      await page.locator("fieldset").first().innerText(),
+      /Required/i,
+    );
+    assert.match(
+      await page.locator("fieldset").last().innerText(),
+      /Optional/i,
+    );
+    assert.equal(await page.locator("input:required").count(), 3);
+    assert.equal(await page.locator("#googleApiKey:required").count(), 0);
+    assert.equal(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= window.innerWidth,
+      ),
+      true,
+      `${colorScheme} setup overflows a 320px viewport`,
+    );
+    const button = page.locator("#submit");
+    const bodyColor = await page
+      .locator("body")
+      .evaluate((el) => getComputedStyle(el).backgroundColor);
+    assert.equal(
+      bodyColor,
+      colorScheme === "light" ? "rgb(246, 246, 249)" : "rgb(17, 17, 15)",
+    );
+    assert.equal(
+      await button.evaluate((el) => getComputedStyle(el).backgroundColor),
+      colorScheme === "light" ? "rgb(110, 43, 240)" : "rgb(116, 76, 230)",
+    );
+  }
+});
+
+test("setup validates required fields and preserves retry after server error", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+  submissions = [];
+  const page = await browser.newPage();
+  t.after(() => page.close());
+  await page.goto(`${base}/setup`);
+  assert.notEqual(
+    await page
+      .locator("#status")
+      .evaluate((element) => getComputedStyle(element).display),
+    "none",
+    "the live status region is present before its first update",
+  );
+  await page.locator("#submit").click();
+  assert.equal(submissions.length, 0, "empty required fields block submission");
+
+  await page.locator("#livekitUrl").fill("wss://example.livekit.cloud");
+  await page.locator("#livekitApiKey").fill("key");
+  await page.locator("#livekitApiSecret").fill("secret");
+  await page.locator("#submit").click();
+  await page.locator("#status.error").waitFor();
+  assert.equal(
+    await page.locator("#status").innerText(),
+    "Check the LiveKit credentials",
+  );
+  assert.equal(await page.locator("#submit").isEnabled(), true);
+  assert.deepEqual(submissions, [
+    {
+      livekitUrl: "wss://example.livekit.cloud",
+      livekitApiKey: "key",
+      livekitApiSecret: "secret",
+      googleApiKey: "",
+    },
+  ]);
+});
diff --git a/tests/cli.rs b/tests/cli.rs
index d34785be7..1916bed6d 100644
--- a/tests/cli.rs
+++ b/tests/cli.rs
@@ -1093,9 +1093,12 @@ fn setup_page_renders_a_form_with_all_four_credential_fields() {
     }
     assert!(response.contains("/api/setup"), "{response}");
 
-    // What leaving the optional field blank buys. The only other place that
-    // says it is a console this launch does not have.
-    assert!(response.contains("nobody joins the room"), "{response}");
+    // The setup page explains what happens when the optional key is blank: an
+    // interviewer hosted elsewhere still needs to join the room.
+    assert!(
+        response.contains("an interviewer running elsewhere must join the room"),
+        "{response}"
+    );
 }
 
 /// Accept, validate, write: the mocks answer as working credentials would,