diff --git a/crates/server/static/style.css b/crates/server/static/style.css
index 7bf3c83..cb763da 100644
--- a/crates/server/static/style.css
+++ b/crates/server/static/style.css
@@ -1,186 +1,925 @@
-/* FC CI Dashboard Styles */
+/* FC CI — Design System v2 */
 
+/* ================================================================
+   Color Tokens
+   ================================================================ */
 :root {
-  --bg: #fafafa;
-  --fg: #1a1a1a;
-  --border: #ddd;
-  --accent: #2563eb;
-  --muted: #6b7280;
-  --card-bg: #fff;
-  --green: #16a34a;
-  --red: #dc2626;
-  --yellow: #ca8a04;
-  --gray: #6b7280;
+  /* Neutral scale (warm gray) */
+  --gray-50:  #fafafa;
+  --gray-100: #f4f4f5;
+  --gray-200: #e4e4e7;
+  --gray-300: #d4d4d8;
+  --gray-400: #a1a1aa;
+  --gray-500: #71717a;
+  --gray-600: #52525b;
+  --gray-700: #3f3f46;
+  --gray-800: #27272a;
+  --gray-900: #18181b;
+  --gray-950: #09090b;
+
+  /* Accent — indigo */
+  --accent-50:  #eef2ff;
+  --accent-100: #e0e7ff;
+  --accent-200: #c7d2fe;
+  --accent-400: #818cf8;
+  --accent-500: #6366f1;
+  --accent-600: #4f46e5;
+  --accent-700: #4338ca;
+
+  /* Semantic */
+  --green-500: #22c55e;
+  --green-600: #16a34a;
+  --green-50:  #f0fdf4;
+  --red-500:   #ef4444;
+  --red-600:   #dc2626;
+  --red-50:    #fef2f2;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-50:  #fffbeb;
+  --sky-500:   #0ea5e9;
+  --sky-50:    #f0f9ff;
+
+  /* Light theme surfaces */
+  --bg:             #ffffff;
+  --bg-subtle:      var(--gray-50);
+  --surface:        #ffffff;
+  --surface-hover:  var(--gray-50);
+  --surface-raised: #ffffff;
+  --border:         var(--gray-200);
+  --border-subtle:  var(--gray-100);
+
+  /* Light theme text */
+  --fg:       var(--gray-900);
+  --fg-secondary: var(--gray-600);
+  --fg-muted: var(--gray-500);
+  --fg-faint: var(--gray-400);
+
+  /* Light theme accent */
+  --accent:       var(--accent-600);
+  --accent-hover: var(--accent-700);
+  --accent-bg:    var(--accent-50);
+  --accent-fg:    var(--accent-600);
+
+  /* Light theme semantic backgrounds */
+  --green-bg:  var(--green-50);
+  --green-fg:  var(--green-600);
+  --red-bg:    var(--red-50);
+  --red-fg:    var(--red-600);
+  --amber-bg:  var(--amber-50);
+  --amber-fg:  var(--amber-600);
+  --sky-bg:    var(--sky-50);
+  --sky-fg:    var(--sky-500);
+
+  /* Shadows */
+  --shadow-xs: 0 1px 2px rgb(0 0 0 / .04);
+  --shadow-sm: 0 1px 3px rgb(0 0 0 / .06), 0 1px 2px rgb(0 0 0 / .04);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .06), 0 2px 4px -2px rgb(0 0 0 / .04);
+
+  /* Shape */
+  --radius-sm: 6px;
+  --radius:    8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
 }
 
-* { margin: 0; padding: 0; box-sizing: border-box; }
+/* ================================================================
+   Dark Theme
+   ================================================================ */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:             var(--gray-950);
+    --bg-subtle:      var(--gray-900);
+    --surface:        var(--gray-900);
+    --surface-hover:  var(--gray-800);
+    --surface-raised: var(--gray-800);
+    --border:         var(--gray-800);
+    --border-subtle:  var(--gray-900);
+
+    --fg:          var(--gray-50);
+    --fg-secondary: var(--gray-400);
+    --fg-muted:    var(--gray-500);
+    --fg-faint:    var(--gray-600);
+
+    --accent:       var(--accent-400);
+    --accent-hover: var(--accent-200);
+    --accent-bg:    rgb(99 102 241 / .12);
+    --accent-fg:    var(--accent-400);
+
+    --green-bg: rgb(34 197 94 / .12);
+    --green-fg: var(--green-500);
+    --red-bg:   rgb(239 68 68 / .12);
+    --red-fg:   var(--red-500);
+    --amber-bg: rgb(245 158 11 / .12);
+    --amber-fg: var(--amber-500);
+    --sky-bg:   rgb(14 165 233 / .12);
+    --sky-fg:   var(--sky-500);
+
+    --shadow-xs: 0 1px 2px rgb(0 0 0 / .2);
+    --shadow-sm: 0 1px 3px rgb(0 0 0 / .3), 0 1px 2px rgb(0 0 0 / .2);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .2);
+  }
+}
+
+/* ================================================================
+   Reset & Base
+   ================================================================ */
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html { height: 100%; }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  background: var(--bg);
-  color: var(--fg);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
+  font-size: 14px;
   line-height: 1.6;
+  color: var(--fg);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
 }
 
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color .1s;
+}
+a:hover { color: var(--accent-hover); }
 
+code, pre {
+  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 0.8125em;
+}
 code {
-  background: #f3f4f6;
-  padding: 0.1em 0.3em;
-  border-radius: 3px;
-  font-size: 0.9em;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  padding: .1em .35em;
+  border-radius: 4px;
+}
+pre {
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: .75rem 1rem;
+  overflow-x: auto;
 }
 
+/* ================================================================
+   Layout
+   ================================================================ */
+.page-main {
+  flex: 1;
+  width: 100%;
+  padding-bottom: 2rem;
+}
+
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 1.5rem 1.5rem 0;
+}
+
+/* ================================================================
+   Navigation
+   ================================================================ */
 .navbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
   display: flex;
   align-items: center;
-  gap: 2rem;
-  padding: 0.75rem 1.5rem;
-  background: var(--card-bg);
+  gap: 0.5rem;
+  height: 3.25rem;
+  padding: 0 1.5rem;
+  background: var(--surface);
   border-bottom: 1px solid var(--border);
+  box-shadow: var(--shadow-xs);
 }
 
 .nav-brand a {
   font-weight: 700;
-  font-size: 1.1rem;
+  font-size: 0.9375rem;
+  color: var(--fg);
+  letter-spacing: -.02em;
+  margin-right: 0.5rem;
+}
+.nav-brand a:hover { color: var(--fg); }
+
+.nav-links {
+  display: flex;
+  gap: 1px;
+  flex: 1;
+}
+.nav-links a {
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  padding: 0 .625rem;
+  border-radius: var(--radius-sm);
+  font-size: .8125rem;
+  font-weight: 500;
+  color: var(--fg-secondary);
+  transition: color .1s, background .1s;
+}
+.nav-links a:hover {
+  color: var(--fg);
+  background: var(--surface-hover);
+}
+.nav-links a.active {
+  color: var(--accent-fg);
+  background: var(--accent-bg);
+}
+
+.nav-auth {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+  font-size: .8125rem;
+}
+.nav-auth .auth-user { color: var(--fg-muted); }
+.nav-auth form { display: inline; }
+.nav-auth button {
+  background: none;
+  border: none;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: .8125rem;
+  font-family: inherit;
+}
+.nav-auth button:hover { color: var(--accent-hover); }
+
+/* ================================================================
+   Footer
+   ================================================================ */
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.75rem;
+  border-top: 1px solid var(--border);
+  color: var(--fg-faint);
+  font-size: .75rem;
+  margin-top: auto;
+}
+
+/* ================================================================
+   Typography
+   ================================================================ */
+h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -.03em;
+  margin-bottom: 1.25rem;
+  color: var(--fg);
+}
+h2 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -.01em;
+  margin: 1.75rem 0 .75rem;
+  color: var(--fg);
+}
+h2:first-child { margin-top: 0; }
+h3 {
+  font-size: .875rem;
+  font-weight: 600;
+  margin: 1rem 0 .5rem;
   color: var(--fg);
 }
 
-.nav-links { display: flex; gap: 1rem; }
-.nav-links a { color: var(--muted); font-size: 0.9rem; }
-.nav-links a:hover { color: var(--fg); }
-
-.container {
-  max-width: 1100px;
-  margin: 1.5rem auto;
-  padding: 0 1rem;
+/* ================================================================
+   Cards
+   ================================================================ */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs);
+  overflow: hidden;
+}
+.card-header {
+  padding: .75rem 1rem;
+  border-bottom: 1px solid var(--border);
+  font-weight: 600;
+  font-size: .8125rem;
+  color: var(--fg-secondary);
+}
+.card-body {
+  padding: 1rem;
 }
 
-h1 { margin-bottom: 1rem; font-size: 1.5rem; }
-h2 { margin: 1.5rem 0 0.75rem; font-size: 1.2rem; }
+/* ================================================================
+   Dashboard Grid
+   ================================================================ */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
 
+/* ================================================================
+   Stats
+   ================================================================ */
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 0.75rem;
+  gap: .5rem;
   margin-bottom: 1.5rem;
 }
-
 .stat-card {
-  background: var(--card-bg);
+  background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 1rem;
-  text-align: center;
+  border-radius: var(--radius);
+  padding: .875rem 1rem;
+  box-shadow: var(--shadow-xs);
+}
+.stat-value {
+  font-size: 1.625rem;
+  font-weight: 700;
+  letter-spacing: -.03em;
+  line-height: 1.2;
+  color: var(--fg);
+}
+.stat-label {
+  font-size: .6875rem;
+  font-weight: 500;
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  margin-top: .25rem;
 }
 
-.stat-value { font-size: 1.75rem; font-weight: 700; }
-.stat-label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.stat-value-green  { color: var(--green-fg); }
+.stat-value-red    { color: var(--red-fg); }
+.stat-value-yellow { color: var(--amber-fg); }
+
+.success-rate {
+  display: inline-flex;
+  align-items: center;
+  padding: .125em .5em;
+  border-radius: 999px;
+  font-size: .8125rem;
+  font-weight: 700;
+}
+.success-rate-high { background: var(--green-bg); color: var(--green-fg); }
+.success-rate-mid  { background: var(--amber-bg); color: var(--amber-fg); }
+.success-rate-low  { background: var(--red-bg);   color: var(--red-fg); }
+
+/* ================================================================
+   Tables
+   ================================================================ */
+.table-wrap {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xs);
+  overflow: hidden;
+}
 
 table {
   width: 100%;
   border-collapse: collapse;
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  overflow: hidden;
+  font-size: .8125rem;
 }
-
 th, td {
-  padding: 0.5rem 0.75rem;
+  padding: .5625rem .75rem;
   text-align: left;
-  border-bottom: 1px solid var(--border);
-  font-size: 0.9rem;
+  border-bottom: 1px solid var(--border-subtle);
 }
-
 th {
-  background: #f9fafb;
+  background: var(--bg-subtle);
   font-weight: 600;
-  font-size: 0.8rem;
+  font-size: .6875rem;
   text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--muted);
+  letter-spacing: .04em;
+  color: var(--fg-muted);
+  border-bottom-color: var(--border);
 }
-
 tbody tr:last-child td { border-bottom: none; }
-tbody tr:hover { background: #f9fafb; }
+tbody tr:hover { background: var(--surface-hover); }
 
+.table-responsive { overflow-x: auto; }
+
+/* ================================================================
+   Badges / Status
+   ================================================================ */
 .badge {
-  display: inline-block;
-  padding: 0.15em 0.5em;
-  border-radius: 4px;
-  font-size: 0.8rem;
+  display: inline-flex;
+  align-items: center;
+  height: 1.375rem;
+  padding: 0 .5rem;
+  border-radius: 999px;
+  font-size: .6875rem;
   font-weight: 600;
   text-transform: capitalize;
+  white-space: nowrap;
 }
 
-.badge-completed { background: #dcfce7; color: var(--green); }
-.badge-failed { background: #fee2e2; color: var(--red); }
-.badge-running { background: #fef9c3; color: var(--yellow); }
-.badge-pending { background: #f3f4f6; color: var(--gray); }
-.badge-cancelled { background: #f3f4f6; color: var(--gray); }
+.badge-completed { background: var(--green-bg); color: var(--green-fg); }
+.badge-failed    { background: var(--red-bg);   color: var(--red-fg); }
+.badge-running   { background: var(--amber-bg); color: var(--amber-fg); }
+.badge-pending   { background: var(--sky-bg);   color: var(--sky-fg); }
+.badge-cancelled { background: var(--bg-subtle); color: var(--fg-faint); }
 
-.empty { color: var(--muted); font-style: italic; }
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: .25rem;
+}
+.status-dot-green  { background: var(--green-fg); }
+.status-dot-red    { background: var(--red-fg); }
+.status-dot-yellow { background: var(--amber-fg); }
+.status-dot-gray   { background: var(--fg-faint); }
 
-.pagination {
+.step-success { color: var(--green-fg); font-weight: 600; }
+.step-failure { color: var(--red-fg); font-weight: 600; }
+
+.empty {
+  color: var(--fg-muted);
+  font-size: .8125rem;
+  padding: 2.5rem 1.5rem;
+  text-align: center;
+  background: var(--surface);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-lg);
+}
+.empty-title {
+  font-size: .875rem;
+  font-weight: 600;
+  color: var(--fg-secondary);
+  margin-bottom: .25rem;
+}
+.empty-hint {
+  color: var(--fg-faint);
+  font-size: .75rem;
+  margin-top: .375rem;
+}
+
+/* ================================================================
+   Quick Actions
+   ================================================================ */
+.quick-actions {
+  display: flex;
+  gap: .5rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+.quick-actions a {
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  padding: 0 .75rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: .8125rem;
+  font-weight: 500;
+  color: var(--fg-secondary);
+  transition: border-color .1s, color .1s;
+}
+.quick-actions a:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ================================================================
+   Queue Summary
+   ================================================================ */
+.queue-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: .75rem;
+  height: 2rem;
+  padding: 0 .75rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: .8125rem;
+  margin-bottom: 1rem;
+}
+
+/* ================================================================
+   Breadcrumbs
+   ================================================================ */
+.breadcrumbs {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  margin-top: 1rem;
-  font-size: 0.9rem;
-  color: var(--muted);
+  gap: .3rem;
+  margin-bottom: 1rem;
+  font-size: .8125rem;
+  color: var(--fg-muted);
+}
+.breadcrumbs a { color: var(--fg-muted); }
+.breadcrumbs a:hover { color: var(--accent); }
+.breadcrumbs .sep { color: var(--fg-faint); }
+.breadcrumbs .current { color: var(--fg); font-weight: 600; }
+
+/* ================================================================
+   Detail Grid (key-value)
+   ================================================================ */
+.detail-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: .375rem 1rem;
+  margin-bottom: 1.25rem;
+  font-size: .8125rem;
+}
+.detail-grid dt { font-weight: 500; color: var(--fg-muted); }
+.detail-grid dd { color: var(--fg); word-break: break-all; }
+
+/* ================================================================
+   Tabs
+   ================================================================ */
+.tab-nav {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 1rem;
+}
+.tab-nav a {
+  display: inline-flex;
+  align-items: center;
+  height: 2.25rem;
+  padding: 0 .875rem;
+  font-size: .8125rem;
+  font-weight: 500;
+  color: var(--fg-muted);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color .1s, border-color .1s;
+}
+.tab-nav a:hover { color: var(--fg); }
+.tab-nav a.active {
+  color: var(--accent-fg);
+  border-bottom-color: var(--accent);
+  font-weight: 600;
 }
 
+/* ================================================================
+   Filter Form
+   ================================================================ */
 .filter-form {
   display: flex;
-  gap: 1rem;
-  align-items: end;
+  gap: .625rem;
+  align-items: flex-end;
   margin-bottom: 1rem;
   flex-wrap: wrap;
 }
-
 .filter-form label {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.85rem;
-  color: var(--muted);
+  gap: .1875rem;
+  font-size: .75rem;
+  font-weight: 500;
+  color: var(--fg-muted);
 }
-
 .filter-form select,
-.filter-form input {
-  padding: 0.35rem 0.5rem;
+.filter-form input[type="text"] {
+  height: 2rem;
+  padding: 0 .5rem;
   border: 1px solid var(--border);
-  border-radius: 4px;
-  font-size: 0.9rem;
+  border-radius: var(--radius-sm);
+  font-size: .8125rem;
+  font-family: inherit;
+  background: var(--surface);
+  color: var(--fg);
+}
+.filter-form select:focus,
+.filter-form input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-bg);
 }
-
 .filter-form button {
-  padding: 0.4rem 1rem;
+  height: 2rem;
+  padding: 0 .875rem;
   background: var(--accent);
   color: #fff;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: 0.9rem;
+  font-size: .8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  transition: opacity .1s;
 }
-
 .filter-form button:hover { opacity: 0.9; }
 
-.footer {
-  text-align: center;
-  padding: 2rem 1rem;
-  color: var(--muted);
-  font-size: 0.8rem;
-  border-top: 1px solid var(--border);
-  margin-top: 3rem;
+/* ================================================================
+   Pagination
+   ================================================================ */
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  margin-top: 1rem;
+  font-size: .8125rem;
+  color: var(--fg-muted);
+}
+.pagination a {
+  display: inline-flex;
+  align-items: center;
+  height: 1.75rem;
+  padding: 0 .625rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: .8125rem;
+  color: var(--fg-secondary);
+  transition: border-color .1s, color .1s;
+}
+.pagination a:hover {
+  border-color: var(--accent);
+  color: var(--accent);
 }
 
-@media (max-width: 768px) {
-  .navbar { flex-direction: column; gap: 0.5rem; }
-  .stats-grid { grid-template-columns: repeat(2, 1fr); }
-  .filter-form { flex-direction: column; }
-  table { font-size: 0.85rem; }
-  th, td { padding: 0.35rem 0.5rem; }
+/* ================================================================
+   Forms
+   ================================================================ */
+.form-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+  max-width: 480px;
+  box-shadow: var(--shadow-xs);
+}
+
+.form-group { margin-bottom: .75rem; }
+.form-group label {
+  display: block;
+  font-size: .75rem;
+  font-weight: 600;
+  color: var(--fg-secondary);
+  margin-bottom: .25rem;
+}
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: .4375rem .625rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: .8125rem;
+  font-family: inherit;
+  background: var(--bg);
+  color: var(--fg);
+  transition: border-color .1s, box-shadow .1s;
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-bg);
+}
+.form-group textarea { min-height: 56px; resize: vertical; }
+
+.form-group input[type="checkbox"] {
+  width: auto;
+  margin-right: .375rem;
+  accent-color: var(--accent);
+}
+
+/* ================================================================
+   Buttons
+   ================================================================ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.125rem;
+  padding: 0 1rem;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: .8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  transition: opacity .1s;
+  white-space: nowrap;
+  text-decoration: none;
+}
+.btn:hover { opacity: 0.9; color: #fff; }
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.btn-danger { background: var(--red-fg); }
+.btn-outline {
+  background: transparent;
+  color: var(--fg-secondary);
+  border: 1px solid var(--border);
+}
+.btn-outline:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.btn-small {
+  height: 1.625rem;
+  padding: 0 .5rem;
+  font-size: .75rem;
+}
+.btn-ghost {
+  background: transparent;
+  color: var(--fg-muted);
+  border: none;
+}
+.btn-ghost:hover { color: var(--fg); }
+
+.btn-full { width: 100%; }
+.btn + .btn { margin-left: .375rem; }
+
+/* ================================================================
+   Flash Messages
+   ================================================================ */
+.flash-message {
+  padding: .625rem .875rem;
+  border: 1px solid;
+  border-radius: var(--radius);
+  margin-bottom: .75rem;
+  font-size: .8125rem;
+  line-height: 1.5;
+}
+.flash-error {
+  background: var(--red-bg);
+  border-color: var(--red-fg);
+  color: var(--red-fg);
+}
+.flash-success {
+  background: var(--green-bg);
+  border-color: var(--green-fg);
+  color: var(--green-fg);
+}
+
+/* ================================================================
+   Details / Accordion
+   ================================================================ */
+details { margin-bottom: .75rem; }
+details summary {
+  cursor: pointer;
+  font-weight: 600;
+  font-size: .8125rem;
+  color: var(--accent-fg);
+  padding: .375rem 0;
+  user-select: none;
+}
+details summary:hover { color: var(--accent-hover); }
+
+/* ================================================================
+   Wizard Steps
+   ================================================================ */
+#wizard {
+  max-width: 720px;
+  margin: 0 auto;
+}
+.wizard-step h2 {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}
+.wizard-step h2::before {
+  display: none;
+}
+.wizard-hint {
+  color: var(--fg-muted);
+  font-size: .875rem;
+  margin-bottom: 1rem;
+}
+.wizard-actions {
+  display: flex;
+  gap: .375rem;
+  margin-top: 1rem;
+}
+.form-status { margin-top: .75rem; }
+.form-card-wide {
+  max-width: 640px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* ================================================================
+   Action Bars
+   ================================================================ */
+.action-bar {
+  margin-bottom: 1rem;
+}
+
+/* ================================================================
+   Utility Classes
+   ================================================================ */
+.text-muted { color: var(--fg-muted); }
+.text-sm    { font-size: .8125rem; }
+.text-center { text-align: center; }
+.inline-input {
+  width: 100%;
+  padding: .25rem .4rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-size: .85rem;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: inherit;
+}
+.inline-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-bg);
+}
+.outputs-detail { margin-top: .75rem; }
+.outputs-list {
+  margin: .5rem 0 0 1.5rem;
+  font-size: .85rem;
+  line-height: 1.6;
+}
+
+/* ================================================================
+   Loading Spinner
+   ================================================================ */
+.spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin .6s linear infinite;
+  vertical-align: middle;
+  margin-right: .375rem;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ================================================================
+   Login Page
+   ================================================================ */
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 2rem;
+}
+.login-card {
+  width: 100%;
+  max-width: 380px;
+}
+.login-card h1 {
+  text-align: center;
+  margin-bottom: .25rem;
+}
+.login-subtitle {
+  text-align: center;
+  color: var(--fg-muted);
+  font-size: .875rem;
+  margin-bottom: 1.5rem;
+}
+.login-form { max-width: 100%; }
+
+/* ================================================================
+   Section Headers
+   ================================================================ */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 1.5rem 0 .75rem;
+}
+.section-header h2 {
+  margin: 0;
+}
+
+/* ================================================================
+   Responsive
+   ================================================================ */
+@media (max-width: 768px) {
+  .navbar {
+    gap: .5rem;
+    flex-wrap: wrap;
+    height: auto;
+    padding: .5rem 1rem;
+  }
+  .nav-links { gap: 0; overflow-x: auto; }
+  .container { padding: 1rem; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .dashboard-grid { grid-template-columns: 1fr; }
+  .filter-form { flex-direction: column; align-items: stretch; }
+  th, td { padding: .375rem .5rem; }
+  .form-card { max-width: 100%; }
+}
+
+@media (max-width: 480px) {
+  .stats-grid { grid-template-columns: 1fr 1fr; }
+  .quick-actions { flex-direction: column; }
+  .quick-actions a { justify-content: center; }
 }
diff --git a/crates/server/templates/admin.html b/crates/server/templates/admin.html
index d0f5884..15f14db 100644
--- a/crates/server/templates/admin.html
+++ b/crates/server/templates/admin.html
@@ -51,8 +51,12 @@
   </div>
 </details>
 {% if api_keys.is_empty() %}
-<p class="empty">No API keys.</p>
+<div class="empty">
+  <div class="empty-title">No API keys</div>
+  <div class="empty-hint">Create an API key above to enable API access.</div>
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Name</th><th>Role</th><th>Created</th><th>Last Used</th>{% if is_admin %}<th>Actions</th>{% endif %}</tr>
@@ -71,6 +75,7 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 {% endif %}
 
@@ -103,8 +108,12 @@
 </details>
 {% endif %}
 {% if builders.is_empty() %}
-<p class="empty">No remote builders configured.</p>
+<div class="empty">
+  <div class="empty-title">No remote builders configured</div>
+  <div class="empty-hint">Remote builders distribute builds across multiple machines.</div>
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Name</th><th>SSH URI</th><th>Systems</th><th>Max Jobs</th><th>Enabled</th>{% if is_admin %}<th>Actions</th>{% endif %}</tr>
@@ -127,6 +136,7 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 {% endblock %}
 {% block scripts %}
@@ -144,22 +154,29 @@ document.getElementById('create-key-form')?.addEventListener('submit', async (e)
         role: document.getElementById('key-role').value,
       }),
     });
-    const data = await res.json();
+    const data = await res.json().catch(() => ({}));
     if (res.ok) {
-      msg.innerHTML = '<div class="flash-message flash-success">Key created: <code>' + data.key + '</code><br>Copy this now, it will not be shown again.</div>';
+      msg.innerHTML = '<div class="flash-message flash-success">Key created: <code>' + escapeHtml(data.key || '') + '</code><br>Copy this now, it will not be shown again.</div>';
       setTimeout(() => window.location.reload(), 5000);
     } else {
-      msg.innerHTML = '<div class="flash-message flash-error">' + (data.error || 'Error') + '</div>';
+      throw new Error(data.error || data.message || 'Unknown error');
     }
-  } catch(e) {
-    msg.innerHTML = '<div class="flash-message flash-error">Request failed</div>';
+  } catch(err) {
+    showError(msg, err.message);
   }
 });
 async function deleteKey(id) {
   if (!confirm('Delete this API key?')) return;
-  const res = await fetch('/api/v1/api-keys/' + id, { method: 'DELETE' });
-  if (res.ok) window.location.reload();
-  else alert('Failed to delete key');
+  try {
+    const res = await fetch('/api/v1/api-keys/' + id, { method: 'DELETE' });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Failed to delete key');
+    }
+    window.location.reload();
+  } catch(err) {
+    alert(escapeHtml(err.message));
+  }
 }
 document.getElementById('create-builder-form')?.addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -175,30 +192,43 @@ document.getElementById('create-builder-form')?.addEventListener('submit', async
         max_jobs: parseInt(document.getElementById('builder-maxjobs').value) || 4,
       }),
     });
-    if (res.ok) {
-      window.location.reload();
-    } else {
-      const data = await res.json();
-      msg.innerHTML = '<div class="flash-message flash-error">' + (data.error || 'Error') + '</div>';
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(data.error || data.message || 'Unknown error');
     }
-  } catch(e) {
-    msg.innerHTML = '<div class="flash-message flash-error">Request failed</div>';
+    window.location.reload();
+  } catch(err) {
+    showError(msg, err.message);
   }
 });
 async function toggleBuilder(id, enable) {
-  const res = await fetch('/api/v1/admin/builders/' + id, {
-    method: 'PUT',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({ enabled: enable }),
-  });
-  if (res.ok) window.location.reload();
-  else alert('Failed to update builder');
+  try {
+    const res = await fetch('/api/v1/admin/builders/' + id, {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ enabled: enable }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Failed to update builder');
+    }
+    window.location.reload();
+  } catch(err) {
+    alert(escapeHtml(err.message));
+  }
 }
 async function deleteBuilder(id) {
   if (!confirm('Delete this builder?')) return;
-  const res = await fetch('/api/v1/admin/builders/' + id, { method: 'DELETE' });
-  if (res.ok) window.location.reload();
-  else alert('Failed to delete builder');
+  try {
+    const res = await fetch('/api/v1/admin/builders/' + id, { method: 'DELETE' });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Failed to delete builder');
+    }
+    window.location.reload();
+  } catch(err) {
+    alert(escapeHtml(err.message));
+  }
 }
 </script>
 {% endif %}
diff --git a/crates/server/templates/base.html b/crates/server/templates/base.html
index 5633143..12d7bbd 100644
--- a/crates/server/templates/base.html
+++ b/crates/server/templates/base.html
@@ -4,377 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% block title %}FC CI{% endblock %}</title>
-  <style>
-/* FC CI Dashboard Styles */
-
-:root {
-  --bg: #fafafa;
-  --fg: #1a1a1a;
-  --border: #ddd;
-  --accent: #2563eb;
-  --muted: #6b7280;
-  --card-bg: #fff;
-  --green: #16a34a;
-  --red: #dc2626;
-  --yellow: #ca8a04;
-  --gray: #6b7280;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #111827;
-    --fg: #f3f4f6;
-    --border: #374151;
-    --accent: #60a5fa;
-    --muted: #9ca3af;
-    --card-bg: #1f2937;
-    --green: #4ade80;
-    --red: #f87171;
-    --yellow: #fbbf24;
-    --gray: #9ca3af;
-  }
-
-  code { background: #374151; }
-  th { background: #1f2937; }
-  tbody tr:hover { background: #1f2937; }
-
-  .badge-completed { background: #064e3b; color: var(--green); }
-  .badge-failed { background: #450a0a; color: var(--red); }
-  .badge-running { background: #422006; color: var(--yellow); }
-  .badge-pending { background: #1f2937; color: var(--gray); }
-  .badge-cancelled { background: #1f2937; color: var(--gray); }
-
-  .flash-error { background: #450a0a; border-color: var(--red); color: var(--red); }
-  .flash-success { background: #064e3b; border-color: var(--green); color: var(--green); }
-}
-
-* { margin: 0; padding: 0; box-sizing: border-box; }
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  background: var(--bg);
-  color: var(--fg);
-  line-height: 1.6;
-}
-
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-
-code {
-  background: #f3f4f6;
-  padding: 0.1em 0.3em;
-  border-radius: 3px;
-  font-size: 0.9em;
-}
-
-.navbar {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-  padding: 0.75rem 1.5rem;
-  background: var(--card-bg);
-  border-bottom: 1px solid var(--border);
-}
-
-.nav-brand a {
-  font-weight: 700;
-  font-size: 1.1rem;
-  color: var(--fg);
-}
-
-.nav-links { display: flex; gap: 1rem; flex: 1; }
-.nav-links a { color: var(--muted); font-size: 0.9rem; }
-.nav-links a:hover { color: var(--fg); }
-
-.nav-auth { display: flex; gap: 0.75rem; align-items: center; font-size: 0.85rem; }
-.nav-auth .auth-user { color: var(--muted); }
-.nav-auth a { color: var(--accent); }
-.nav-auth form { display: inline; }
-.nav-auth button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; }
-.nav-auth button:hover { text-decoration: underline; }
-
-.container {
-  max-width: 1100px;
-  margin: 1.5rem auto;
-  padding: 0 1rem;
-}
-
-h1 { margin-bottom: 1rem; font-size: 1.5rem; }
-h2 { margin: 1.5rem 0 0.75rem; font-size: 1.2rem; }
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.stat-card {
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 1rem;
-  text-align: center;
-}
-
-.stat-value { font-size: 1.75rem; font-weight: 700; }
-.stat-label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-th, td {
-  padding: 0.5rem 0.75rem;
-  text-align: left;
-  border-bottom: 1px solid var(--border);
-  font-size: 0.9rem;
-}
-
-th {
-  background: #f9fafb;
-  font-weight: 600;
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--muted);
-}
-
-tbody tr:last-child td { border-bottom: none; }
-tbody tr:hover { background: #f9fafb; }
-
-.badge {
-  display: inline-block;
-  padding: 0.15em 0.5em;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: capitalize;
-}
-
-.badge-completed { background: #dcfce7; color: var(--green); }
-.badge-failed { background: #fee2e2; color: var(--red); }
-.badge-running { background: #fef9c3; color: var(--yellow); }
-.badge-pending { background: #f3f4f6; color: var(--gray); }
-.badge-cancelled { background: #f3f4f6; color: var(--gray); }
-
-.empty { color: var(--muted); font-style: italic; }
-
-.pagination {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-top: 1rem;
-  font-size: 0.9rem;
-  color: var(--muted);
-}
-
-.filter-form {
-  display: flex;
-  gap: 1rem;
-  align-items: end;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
-}
-
-.filter-form label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.filter-form select,
-.filter-form input {
-  padding: 0.35rem 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  font-size: 0.9rem;
-  background: var(--card-bg);
-  color: var(--fg);
-}
-
-.filter-form button {
-  padding: 0.4rem 1rem;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9rem;
-}
-
-.filter-form button:hover { opacity: 0.9; }
-
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  margin-bottom: 1rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.breadcrumbs a { color: var(--accent); }
-.breadcrumbs .sep { color: var(--muted); }
-.breadcrumbs .current { color: var(--fg); font-weight: 600; }
-
-.detail-grid {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.35rem 1rem;
-  margin-bottom: 1.5rem;
-  font-size: 0.9rem;
-}
-
-.detail-grid dt { font-weight: 600; color: var(--muted); }
-.detail-grid dd { color: var(--fg); }
-
-.step-success { color: var(--green); font-weight: 600; }
-.step-failure { color: var(--red); font-weight: 600; }
-
-.tab-nav {
-  display: flex;
-  gap: 0;
-  border-bottom: 2px solid var(--border);
-  margin-bottom: 1rem;
-}
-
-.tab-nav a {
-  padding: 0.5rem 1rem;
-  color: var(--muted);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
-  font-size: 0.9rem;
-}
-
-.tab-nav a:hover { color: var(--fg); text-decoration: none; }
-.tab-nav a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
-
-.queue-summary {
-  display: inline-flex;
-  gap: 1rem;
-  font-size: 0.9rem;
-  margin-bottom: 1rem;
-  padding: 0.5rem 1rem;
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-}
-
-/* Form styles */
-.form-card {
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  max-width: 500px;
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-group label {
-  display: block;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--muted);
-  margin-bottom: 0.25rem;
-}
-
-.form-group input,
-.form-group select,
-.form-group textarea {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  font-size: 0.9rem;
-  background: var(--bg);
-  color: var(--fg);
-}
-
-.form-group textarea { min-height: 60px; resize: vertical; }
-
-.btn {
-  display: inline-block;
-  padding: 0.5rem 1.25rem;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9rem;
-}
-
-.btn:hover { opacity: 0.9; text-decoration: none; }
-
-.btn-danger {
-  background: var(--red);
-}
-
-.btn-small {
-  padding: 0.25rem 0.75rem;
-  font-size: 0.8rem;
-}
-
-.flash-message {
-  padding: 0.75rem 1rem;
-  border: 1px solid;
-  border-radius: 4px;
-  margin-bottom: 1rem;
-  font-size: 0.9rem;
-}
-
-.flash-error {
-  background: #fef2f2;
-  border-color: var(--red);
-  color: var(--red);
-}
-
-.flash-success {
-  background: #f0fdf4;
-  border-color: var(--green);
-  color: var(--green);
-}
-
-details {
-  margin-bottom: 1rem;
-}
-
-details summary {
-  cursor: pointer;
-  font-weight: 600;
-  color: var(--accent);
-  font-size: 0.9rem;
-  padding: 0.5rem 0;
-}
-
-.footer {
-  text-align: center;
-  padding: 2rem 1rem;
-  color: var(--muted);
-  font-size: 0.8rem;
-  border-top: 1px solid var(--border);
-  margin-top: 3rem;
-}
-
-@media (max-width: 768px) {
-  .navbar { flex-direction: column; gap: 0.5rem; }
-  .stats-grid { grid-template-columns: repeat(2, 1fr); }
-  .filter-form { flex-direction: column; }
-  table { font-size: 0.85rem; }
-  th, td { padding: 0.35rem 0.5rem; }
-}
-  </style>
+  <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
   <nav class="navbar">
@@ -391,13 +21,25 @@ details summary {
       {% block auth %}{% endblock %}
     </div>
   </nav>
-  <main class="container">
-    {% block breadcrumbs %}{% endblock %}
-    {% block content %}{% endblock %}
+  <main class="page-main">
+    <div class="container">
+      {% block breadcrumbs %}{% endblock %}
+      {% block content %}{% endblock %}
+    </div>
   </main>
   <footer class="footer">
     <p>FC CI &mdash; Nix-based continuous integration</p>
   </footer>
+  <script>
+  function escapeHtml(s) {
+    var d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+  }
+  function showError(el, msg) {
+    el.innerHTML = '<div class="flash-message flash-error">' + escapeHtml(msg) + '</div>';
+  }
+  </script>
   {% block scripts %}{% endblock %}
 </body>
 </html>
diff --git a/crates/server/templates/build.html b/crates/server/templates/build.html
index bc9cadd..ff421cd 100644
--- a/crates/server/templates/build.html
+++ b/crates/server/templates/build.html
@@ -55,8 +55,9 @@
 
 <h2>Build Steps</h2>
 {% if steps.is_empty() %}
-<p class="empty">No steps recorded.</p>
+<div class="empty">No steps recorded.</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>#</th><th>Command</th><th>Exit</th><th>Started</th><th>Completed</th></tr>
@@ -73,12 +74,14 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 
 <h2>Build Products</h2>
 {% if products.is_empty() %}
-<p class="empty">No products recorded.</p>
+<div class="empty">No products recorded.</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Name</th><th>Path</th><th>Size</th></tr>
@@ -93,5 +96,6 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 {% endblock %}
diff --git a/crates/server/templates/builds.html b/crates/server/templates/builds.html
index adc94a2..2730a2a 100644
--- a/crates/server/templates/builds.html
+++ b/crates/server/templates/builds.html
@@ -17,8 +17,12 @@
 </form>
 
 {% if builds.is_empty() %}
-<p class="empty">No builds match filters.</p>
+<div class="empty">
+  <div class="empty-title">No builds match filters</div>
+  <div class="empty-hint">Try adjusting the filters above or wait for builds to be queued.</div>
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Job</th><th>Status</th><th>System</th><th>Created</th></tr>
@@ -34,7 +38,8 @@
     {% endfor %}
   </tbody>
 </table>
-{% endif %}
+</div>
+{% if total_pages > 1 %}
 <div class="pagination">
   {% if has_prev %}
   <a href="/builds?offset={{ prev_offset }}&limit={{ limit }}&status={{ filter_status }}&system={{ filter_system }}&job_name={{ filter_job }}">&laquo; Previous</a>
@@ -44,4 +49,6 @@
   <a href="/builds?offset={{ next_offset }}&limit={{ limit }}&status={{ filter_status }}&system={{ filter_system }}&job_name={{ filter_job }}">Next &raquo;</a>
   {% endif %}
 </div>
+{% endif %}
+{% endif %}
 {% endblock %}
diff --git a/crates/server/templates/channels.html b/crates/server/templates/channels.html
index 53529eb..e4f1f51 100644
--- a/crates/server/templates/channels.html
+++ b/crates/server/templates/channels.html
@@ -3,8 +3,12 @@
 {% block content %}
 <h1>Channels</h1>
 {% if channels.is_empty() %}
-<p class="empty">No channels configured.</p>
+<div class="empty">
+  <div class="empty-title">No channels configured</div>
+  <div class="empty-hint">Channels track successful evaluations for stable release tracking.</div>
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Name</th><th>Current Evaluation</th><th>Updated</th></tr>
@@ -26,5 +30,6 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 {% endblock %}
diff --git a/crates/server/templates/evaluation.html b/crates/server/templates/evaluation.html
index c90e604..1b0de62 100644
--- a/crates/server/templates/evaluation.html
+++ b/crates/server/templates/evaluation.html
@@ -40,8 +40,9 @@
 
 <h2>Builds</h2>
 {% if builds.is_empty() %}
-<p class="empty">No builds for this evaluation.</p>
+<div class="empty">No builds for this evaluation.</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Job</th><th>Status</th><th>System</th><th>Created</th></tr>
@@ -57,5 +58,6 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 {% endblock %}
diff --git a/crates/server/templates/evaluations.html b/crates/server/templates/evaluations.html
index 922ffe0..3329fdd 100644
--- a/crates/server/templates/evaluations.html
+++ b/crates/server/templates/evaluations.html
@@ -3,8 +3,12 @@
 {% block content %}
 <h1>Evaluations</h1>
 {% if evals.is_empty() %}
-<p class="empty">No evaluations yet.</p>
+<div class="empty">
+  <div class="empty-title">No evaluations yet</div>
+  <div class="empty-hint">Evaluations will appear here once a jobset is evaluated.</div>
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Commit</th><th>Project</th><th>Jobset</th><th>Status</th><th>Time</th></tr>
@@ -21,7 +25,8 @@
     {% endfor %}
   </tbody>
 </table>
-{% endif %}
+</div>
+{% if total_pages > 1 %}
 <div class="pagination">
   {% if has_prev %}
   <a href="/evaluations?offset={{ prev_offset }}&limit={{ limit }}">&laquo; Previous</a>
@@ -31,4 +36,6 @@
   <a href="/evaluations?offset={{ next_offset }}&limit={{ limit }}">Next &raquo;</a>
   {% endif %}
 </div>
+{% endif %}
+{% endif %}
 {% endblock %}
diff --git a/crates/server/templates/home.html b/crates/server/templates/home.html
index f5507c5..f769a30 100644
--- a/crates/server/templates/home.html
+++ b/crates/server/templates/home.html
@@ -17,84 +17,132 @@
     <div class="stat-label">Total Builds</div>
   </div>
   <div class="stat-card">
-    <div class="stat-value">{{ completed_builds }}</div>
+    <div class="stat-value stat-value-green">{{ completed_builds }}</div>
     <div class="stat-label">Completed</div>
   </div>
   <div class="stat-card">
-    <div class="stat-value">{{ failed_builds }}</div>
+    <div class="stat-value stat-value-red">{{ failed_builds }}</div>
     <div class="stat-label">Failed</div>
   </div>
   <div class="stat-card">
-    <div class="stat-value">{{ running_builds }}</div>
+    <div class="stat-value stat-value-yellow">{{ running_builds }}</div>
     <div class="stat-label">Running</div>
   </div>
   <div class="stat-card">
     <div class="stat-value">{{ pending_builds }}</div>
     <div class="stat-label">Pending</div>
   </div>
+  {% if total_builds > 0 %}
+  <div class="stat-card">
+    {% let rate = completed_builds * 100 / total_builds %}
+    <div class="stat-value">
+      {% if rate >= 80 %}
+      <span class="success-rate success-rate-high">{{ rate }}%</span>
+      {% else if rate >= 50 %}
+      <span class="success-rate success-rate-mid">{{ rate }}%</span>
+      {% else %}
+      <span class="success-rate success-rate-low">{{ rate }}%</span>
+      {% endif %}
+    </div>
+    <div class="stat-label">Success Rate</div>
+  </div>
+  {% endif %}
 </div>
 
-<p class="queue-summary">
-  <a href="/queue">Queue: {{ pending_builds }} pending, {{ running_builds }} running</a>
-</p>
-
-{% if !projects.is_empty() %}
-<h2>Projects Overview</h2>
-<table>
-  <thead>
-    <tr><th>Project</th><th>Jobsets</th><th>Last Eval</th><th>Time</th></tr>
-  </thead>
-  <tbody>
-    {% for p in projects %}
-    <tr>
-      <td><a href="/project/{{ p.id }}">{{ p.name }}</a></td>
-      <td>{{ p.jobset_count }}</td>
-      <td><span class="badge badge-{{ p.last_eval_class }}">{{ p.last_eval_status }}</span></td>
-      <td>{{ p.last_eval_time }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
+{% if is_admin %}
+<div class="quick-actions">
+  <a href="/projects/new">New Project</a>
+  <a href="/admin">Admin Panel</a>
+  <a href="/queue">Build Queue</a>
+</div>
 {% endif %}
 
-<h2>Recent Builds</h2>
-{% if recent_builds.is_empty() %}
-<p class="empty">No builds yet.</p>
-{% else %}
-<table>
-  <thead>
-    <tr><th>Job</th><th>Status</th><th>System</th><th>Created</th></tr>
-  </thead>
-  <tbody>
-    {% for b in recent_builds %}
-    <tr>
-      <td><a href="/build/{{ b.id }}">{{ b.job_name }}</a></td>
-      <td><span class="badge badge-{{ b.status_class }}">{{ b.status_text }}</span></td>
-      <td>{{ b.system }}</td>
-      <td>{{ b.created_at }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% endif %}
+<div class="dashboard-grid">
+  <div>
+    <h2>Recent Builds</h2>
+    {% if recent_builds.is_empty() %}
+    <div class="empty">
+      <div class="empty-title">No builds yet</div>
+      <div class="empty-hint">Builds will appear here once an evaluation triggers them.</div>
+    </div>
+    {% else %}
+    <div class="table-wrap">
+    <table>
+      <thead>
+        <tr><th>Job</th><th>Status</th><th>System</th><th>Created</th></tr>
+      </thead>
+      <tbody>
+        {% for b in recent_builds %}
+        <tr>
+          <td><a href="/build/{{ b.id }}">{{ b.job_name }}</a></td>
+          <td><span class="badge badge-{{ b.status_class }}">{{ b.status_text }}</span></td>
+          <td>{{ b.system }}</td>
+          <td>{{ b.created_at }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    </div>
+    {% endif %}
 
-<h2>Recent Evaluations</h2>
-{% if recent_evals.is_empty() %}
-<p class="empty">No evaluations yet.</p>
-{% else %}
-<table>
-  <thead>
-    <tr><th>Commit</th><th>Status</th><th>Time</th></tr>
-  </thead>
-  <tbody>
-    {% for e in recent_evals %}
-    <tr>
-      <td><a href="/evaluation/{{ e.id }}">{{ e.commit_short }}</a></td>
-      <td><span class="badge badge-{{ e.status_class }}">{{ e.status_text }}</span></td>
-      <td>{{ e.time }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% endif %}
+    <h2>Recent Evaluations</h2>
+    {% if recent_evals.is_empty() %}
+    <div class="empty">
+      <div class="empty-title">No evaluations yet</div>
+      <div class="empty-hint">The evaluator will poll configured jobsets automatically.</div>
+    </div>
+    {% else %}
+    <div class="table-wrap">
+    <table>
+      <thead>
+        <tr><th>Commit</th><th>Status</th><th>Time</th></tr>
+      </thead>
+      <tbody>
+        {% for e in recent_evals %}
+        <tr>
+          <td><a href="/evaluation/{{ e.id }}">{{ e.commit_short }}</a></td>
+          <td><span class="badge badge-{{ e.status_class }}">{{ e.status_text }}</span></td>
+          <td>{{ e.time }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    </div>
+    {% endif %}
+  </div>
+
+  <div>
+    <h2>Projects</h2>
+    {% if projects.is_empty() %}
+    <div class="empty">
+      <div class="empty-title">No projects yet</div>
+      {% if is_admin %}
+      <div class="empty-hint"><a href="/projects/new">Create a project</a> to get started.</div>
+      {% endif %}
+    </div>
+    {% else %}
+    <div class="table-wrap">
+    <table>
+      <thead>
+        <tr><th>Project</th><th>Jobsets</th><th>Last Eval</th><th>Time</th></tr>
+      </thead>
+      <tbody>
+        {% for p in projects %}
+        <tr>
+          <td><a href="/project/{{ p.id }}">{{ p.name }}</a></td>
+          <td>{{ p.jobset_count }}</td>
+          <td><span class="badge badge-{{ p.last_eval_class }}">{{ p.last_eval_status }}</span></td>
+          <td>{{ p.last_eval_time }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    </div>
+    {% endif %}
+
+    <p class="queue-summary">
+      <a href="/queue">Queue: {{ pending_builds }} pending, {{ running_builds }} running</a>
+    </p>
+  </div>
+</div>
 {% endblock %}
diff --git a/crates/server/templates/jobset.html b/crates/server/templates/jobset.html
index 10f4f5b..abffaf7 100644
--- a/crates/server/templates/jobset.html
+++ b/crates/server/templates/jobset.html
@@ -42,8 +42,12 @@
 
 <h2>Recent Evaluations</h2>
 {% if eval_summaries.is_empty() %}
-<p class="empty">No evaluations yet.</p>
+<div class="empty">
+  <div class="empty-title">No evaluations yet</div>
+  <div class="empty-hint">The evaluator will poll this jobset based on the check interval.</div>
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Commit</th><th>Status</th><th>Succeeded</th><th>Failed</th><th>Pending</th><th>Time</th></tr>
@@ -61,5 +65,6 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 {% endblock %}
diff --git a/crates/server/templates/login.html b/crates/server/templates/login.html
index 3a2d609..709bf79 100644
--- a/crates/server/templates/login.html
+++ b/crates/server/templates/login.html
@@ -1,19 +1,24 @@
 {% extends "base.html" %}
 {% block title %}Login - FC CI{% endblock %}
 {% block content %}
-<h1>Login</h1>
-<div class="form-card">
-  {% match error %}
-    {% when Some with (msg) %}
-    <div class="flash-message flash-error">{{ msg }}</div>
-    {% when None %}
-  {% endmatch %}
-  <form method="POST" action="/login">
-    <div class="form-group">
-      <label for="api_key">API Key</label>
-      <input type="password" id="api_key" name="api_key" placeholder="fc_..." required>
+<div class="login-container">
+  <div class="login-card">
+    <h1>FC CI</h1>
+    <p class="login-subtitle">Sign in with your API key</p>
+    {% match error %}
+      {% when Some with (msg) %}
+      <div class="flash-message flash-error">{{ msg }}</div>
+      {% when None %}
+    {% endmatch %}
+    <div class="form-card login-form">
+      <form method="POST" action="/login">
+        <div class="form-group">
+          <label for="api_key">API Key</label>
+          <input type="password" id="api_key" name="api_key" placeholder="fc_..." required autocomplete="current-password">
+        </div>
+        <button type="submit" class="btn btn-full">Sign in</button>
+      </form>
     </div>
-    <button type="submit" class="btn">Login</button>
-  </form>
+  </div>
 </div>
 {% endblock %}
diff --git a/crates/server/templates/project.html b/crates/server/templates/project.html
index a5736ef..ae52a08 100644
--- a/crates/server/templates/project.html
+++ b/crates/server/templates/project.html
@@ -25,7 +25,7 @@
 <p><strong>Created:</strong> {{ project.created_at.format("%Y-%m-%d %H:%M") }}</p>
 
 {% if is_admin %}
-<div style="margin-top: 0.5rem;">
+<div class="action-bar">
   <button class="btn btn-danger btn-small" onclick="deleteProject()">Delete Project</button>
 </div>
 {% endif %}
@@ -56,8 +56,14 @@
 {% endif %}
 
 {% if jobsets.is_empty() %}
-<p class="empty">No jobsets configured.</p>
+<div class="empty">
+  <div class="empty-title">No jobsets configured</div>
+  {% if is_admin %}
+  <div class="empty-hint">Add a jobset above to start evaluating this project.</div>
+  {% endif %}
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Name</th><th>Expression</th><th>Flake</th><th>Enabled</th><th>Interval</th></tr>
@@ -74,12 +80,14 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 
 <h2>Recent Evaluations</h2>
 {% if recent_evals.is_empty() %}
-<p class="empty">No evaluations yet.</p>
+<div class="empty">No evaluations yet for this project.</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Commit</th><th>Status</th><th>Time</th></tr>
@@ -94,6 +102,7 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 {% endblock %}
 {% block scripts %}
@@ -112,21 +121,27 @@ document.getElementById('create-jobset-form')?.addEventListener('submit', async
         flake_mode: document.getElementById('js-flake').checked,
       }),
     });
-    if (res.ok) {
-      window.location.reload();
-    } else {
-      const err = await res.json();
-      msg.innerHTML = '<div class="flash-message flash-error">' + (err.error || 'Error') + '</div>';
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Unknown error');
     }
-  } catch(e) {
-    msg.innerHTML = '<div class="flash-message flash-error">Request failed</div>';
+    window.location.reload();
+  } catch(err) {
+    showError(msg, err.message);
   }
 });
 async function deleteProject() {
   if (!confirm('Delete this project and all its data?')) return;
-  const res = await fetch('/api/v1/projects/{{ project.id }}', { method: 'DELETE' });
-  if (res.ok) window.location.href = '/projects';
-  else alert('Failed to delete project');
+  try {
+    const res = await fetch('/api/v1/projects/{{ project.id }}', { method: 'DELETE' });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Failed to delete project');
+    }
+    window.location.href = '/projects';
+  } catch(err) {
+    alert(escapeHtml(err.message));
+  }
 }
 </script>
 {% endif %}
diff --git a/crates/server/templates/projects.html b/crates/server/templates/projects.html
index a5c1a1e..87dc9f8 100644
--- a/crates/server/templates/projects.html
+++ b/crates/server/templates/projects.html
@@ -12,8 +12,9 @@
 <h1>Projects</h1>
 
 {% if is_admin %}
+<p class="action-bar"><a href="/projects/new" class="btn">New Project (Setup Wizard)</a></p>
 <details>
-  <summary>New Project</summary>
+  <summary>Quick create (no probe)</summary>
   <div class="form-card">
     <form id="create-project-form">
       <div class="form-group">
@@ -36,8 +37,16 @@
 {% endif %}
 
 {% if projects.is_empty() %}
-<p class="empty">No projects yet.</p>
+<div class="empty">
+  <div class="empty-title">No projects yet</div>
+  {% if is_admin %}
+  <div class="empty-hint">Create a project using the button above to get started.</div>
+  {% else %}
+  <div class="empty-hint">Projects will appear here once an administrator creates them.</div>
+  {% endif %}
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Name</th><th>Repository</th><th>Created</th></tr>
@@ -52,7 +61,8 @@
     {% endfor %}
   </tbody>
 </table>
-{% endif %}
+</div>
+{% if total_pages > 1 %}
 <div class="pagination">
   {% if has_prev %}
   <a href="/projects?offset={{ prev_offset }}&limit={{ limit }}">&laquo; Previous</a>
@@ -62,6 +72,8 @@
   <a href="/projects?offset={{ next_offset }}&limit={{ limit }}">Next &raquo;</a>
   {% endif %}
 </div>
+{% endif %}
+{% endif %}
 {% endblock %}
 {% block scripts %}
 {% if is_admin %}
@@ -79,14 +91,13 @@ document.getElementById('create-project-form')?.addEventListener('submit', async
         description: document.getElementById('project-desc').value || null,
       }),
     });
-    if (res.ok) {
-      window.location.reload();
-    } else {
-      const err = await res.json();
-      msg.innerHTML = '<div class="flash-message flash-error">' + (err.error || 'Error') + '</div>';
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Unknown error');
     }
-  } catch(e) {
-    msg.innerHTML = '<div class="flash-message flash-error">Request failed</div>';
+    window.location.reload();
+  } catch(err) {
+    showError(msg, err.message);
   }
 });
 </script>
diff --git a/crates/server/templates/queue.html b/crates/server/templates/queue.html
index 4581741..8e3af12 100644
--- a/crates/server/templates/queue.html
+++ b/crates/server/templates/queue.html
@@ -11,8 +11,12 @@
 
 <h2>Running ({{ running_count }})</h2>
 {% if running_builds.is_empty() %}
-<p class="empty">No builds currently running.</p>
+<div class="empty">
+  <div class="empty-title">No builds currently running</div>
+  <div class="empty-hint">Running builds will appear here when the queue runner picks them up.</div>
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Job</th><th>System</th><th>Started</th></tr>
@@ -27,12 +31,17 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 
 <h2>Pending ({{ pending_count }})</h2>
 {% if pending_builds.is_empty() %}
-<p class="empty">No builds pending.</p>
+<div class="empty">
+  <div class="empty-title">No builds pending</div>
+  <div class="empty-hint">Pending builds appear after an evaluation discovers new derivations to build.</div>
+</div>
 {% else %}
+<div class="table-wrap">
 <table>
   <thead>
     <tr><th>Job</th><th>System</th><th>Created</th></tr>
@@ -47,5 +56,6 @@
     {% endfor %}
   </tbody>
 </table>
+</div>
 {% endif %}
 {% endblock %}