From ebcc4bb572ffbc58325191de523d731aec0679ad Mon Sep 17 00:00:00 2001
From: Excel <folylolyboyz@gmail.com>
Date: Sun, 14 Jun 2026 04:09:32 +0530
Subject: [PATCH] style: api client design overhaul

---
 src/components/ApiClient/ApiClientLayout.tsx | 134 ++++----
 src/components/ApiClient/JobRunner.tsx       | 242 ++++++--------
 src/components/ApiClient/ResultsGallery.tsx  | 324 +++++++++----------
 src/components/ApiClient/ServerSettings.tsx  | 218 ++++++-------
 src/components/ApiClient/TemplateManager.tsx | 278 ++++++++--------
 5 files changed, 544 insertions(+), 652 deletions(-)

diff --git a/src/components/ApiClient/ApiClientLayout.tsx b/src/components/ApiClient/ApiClientLayout.tsx
index 28e9b75..84ed722 100644
--- a/src/components/ApiClient/ApiClientLayout.tsx
+++ b/src/components/ApiClient/ApiClientLayout.tsx
@@ -5,14 +5,7 @@ import { TemplateManager } from "./TemplateManager"
 import { JobRunner } from "./JobRunner"
 import { ResultsGallery } from "./ResultsGallery"
 
-type ApiTab = "server" | "templates" | "jobs" | "results"
-
-const tabs: { key: ApiTab; label: string; icon: string }[] = [
-  { key: "server", label: "Server", icon: "dns" },
-  { key: "templates", label: "Templates", icon: "description" },
-  { key: "jobs", label: "Jobs", icon: "play_circle" },
-  { key: "results", label: "Results", icon: "analytics" },
-]
+type ApiSection = "server" | "templates" | "jobs" | "results"
 
 interface EBProps {
   children: ReactNode
@@ -51,74 +44,85 @@ class SafeWrap extends Component<EBProps, EBState> {
   }
 }
 
-function Sidebar({ active, onChange }: { active: ApiTab; onChange: (t: ApiTab) => void }) {
-  const setActiveTab = (tab: ApiTab) => {
-    if (tab === "jobs" || tab === "results") {
-      // Auto-activate works in both directions
-    }
-    onChange(tab)
-  }
+const sections: { key: ApiSection; label: string; icon: string }[] = [
+  { key: "server", label: "Server", icon: "dns" },
+  { key: "templates", label: "Templates", icon: "description" },
+  { key: "jobs", label: "Jobs", icon: "play_circle" },
+  { key: "results", label: "Results", icon: "analytics" },
+]
 
+function LeftPanel({ active, onChange }: { active: ApiSection; onChange: (s: ApiSection) => void }) {
+  const runs = useApiStore((s) => s.runs)
   return (
-    <aside className="w-64 h-full flex flex-col bg-surface-soft border-r-2 border-hairline pt-8 pb-4 shrink-0">
-      <div className="px-6 mb-8">
-        <h1 className="text-display-sm font-serif text-primary leading-tight">Admin Console</h1>
-        <p className="text-caption text-muted mt-1">Local Instance</p>
+    <aside className="w-[260px] bg-surface-card border-r border-hairline flex flex-col shrink-0">
+      <div className="px-4 py-3 border-b border-hairline flex items-center justify-between gap-2">
+        <h2 className="text-caption-uppercase text-muted tracking-widest flex items-center gap-2 min-w-0">
+          <span className="material-symbols-outlined text-[16px] text-primary shrink-0">api</span>
+          <span className="truncate">API Client</span>
+        </h2>
+        <span className="text-caption text-muted-soft">{sections.length}</span>
       </div>
 
-      <nav className="flex-1 space-y-1">
-        {tabs.map((t) => {
-          const isActive = active === t.key
+      <div className="px-3 py-3 border-b border-hairline-soft">
+        <button
+          onClick={() => onChange("jobs")}
+          className="w-full flex items-center justify-center gap-2 px-3 py-2 bg-primary text-on-primary rounded-lg text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all shadow-sm"
+        >
+          <span className="material-symbols-outlined text-[18px]">add</span>
+          New Job
+        </button>
+      </div>
+
+      <nav className="flex-1 overflow-y-auto py-1">
+        {sections.map((sec) => {
+          const isActive = active === sec.key
+          const count = sec.key === "results" ? runs.length : undefined
           return (
-            <button
-              key={t.key}
-              onClick={() => setActiveTab(t.key)}
-              className={`w-full flex items-center gap-3 px-6 py-3 text-left transition-all ${
-                isActive
-                  ? "bg-surface-cream-strong text-primary font-bold border-r-4 border-primary"
-                  : "text-muted hover:text-ink hover:bg-surface-card hover:translate-y-[-1px] active:scale-[0.98]"
-              }`}
-            >
-              <span className="material-symbols-outlined" style={{ fontVariationSettings: isActive ? "'FILL' 1" : undefined }}>
-                {t.icon}
-              </span>
-              <span className="text-nav">{t.label}</span>
-            </button>
+            <div key={sec.key} className="group">
+              <button
+                onClick={() => onChange(sec.key)}
+                className={`w-full flex items-center justify-between px-4 py-2.5 text-left transition-all ${
+                  isActive
+                    ? "border-l-[3px] border-primary bg-primary/[0.06]"
+                    : "border-l-[3px] border-transparent hover:bg-surface-cream-strong/30"
+                }`}
+              >
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className={`material-symbols-outlined text-[16px] shrink-0 ${isActive ? "text-primary" : "text-muted-soft"}`}>
+                    {sec.icon}
+                  </span>
+                  <span className={`text-title-sm truncate ${isActive ? "text-ink font-medium" : "text-body"}`}>
+                    {sec.label}
+                  </span>
+                </div>
+                {count !== undefined && (
+                  <span className="text-caption text-muted-soft">{count}</span>
+                )}
+              </button>
+            </div>
           )
         })}
       </nav>
 
-      <div className="px-6 mt-4">
-        <button
-          onClick={() => setActiveTab("jobs")}
-          className="w-full bg-primary text-on-primary py-3 px-4 flex items-center justify-center gap-2 border-2 border-primary hover:bg-primary-active hover:shadow-sm transition-all active:scale-[0.98]"
-        >
-          <span className="material-symbols-outlined">add</span>
-          <span className="text-button">New Job</span>
-        </button>
-      </div>
-
-      <div className="mt-auto border-t border-hairline pt-4 space-y-1">
-        <button
-          onClick={() => setActiveTab("server")}
-          className="w-full flex items-center gap-3 px-6 py-2 text-left text-muted hover:text-ink hover:bg-surface-card transition-all"
-        >
-          <span className="material-symbols-outlined text-[20px]">settings</span>
-          <span className="text-body-sm">Settings</span>
-        </button>
+      <div className="px-4 py-2.5 border-t border-hairline bg-surface-cream-strong/20 flex justify-between items-center">
+        <span className="text-caption text-muted-soft">
+          <span className="font-medium text-body">{runs.length}</span> runs
+        </span>
+        <span className="text-caption text-muted-soft">
+          <span className="font-medium text-body">{useApiStore.getState().templates.length}</span> templates
+        </span>
       </div>
     </aside>
   )
 }
 
 export function ApiClientLayout() {
-  const [activeTab, setActiveTab] = useState<ApiTab>("server")
+  const [active, setActive] = useState<ApiSection>("server")
   const setActiveRunId = useApiStore((s) => s.setActiveRunId)
 
-  const handleChange = (tab: ApiTab) => {
-    setActiveTab(tab)
-    if (tab === "results") {
-      // Keep last run selected if any
+  const handleChange = (section: ApiSection) => {
+    setActive(section)
+    if (section === "results") {
       const runs = useApiStore.getState().runs
       if (runs.length > 0 && !useApiStore.getState().activeRunId) {
         setActiveRunId(runs[runs.length - 1].id)
@@ -128,17 +132,17 @@ export function ApiClientLayout() {
 
   const content = {
     server: <ServerSettings />,
-    templates: <TemplateManager onNewJob={() => setActiveTab("jobs")} />,
-    jobs: <JobRunner onViewResults={() => setActiveTab("results")} />,
-    results: <ResultsGallery onNewJob={() => setActiveTab("jobs")} />,
-  }[activeTab]
+    templates: <TemplateManager onNewJob={() => handleChange("jobs")} />,
+    jobs: <JobRunner onViewResults={() => handleChange("results")} />,
+    results: <ResultsGallery onNewJob={() => handleChange("jobs")} />,
+  }[active]
 
   return (
     <div className="flex h-full bg-canvas text-ink">
-      <Sidebar active={activeTab} onChange={handleChange} />
+      <LeftPanel active={active} onChange={handleChange} />
       <main className="flex-1 overflow-auto custom-scrollbar">
         <div className="max-w-[1000px] mx-auto px-8 py-8 pb-12">
-          <SafeWrap name={activeTab}>{content}</SafeWrap>
+          <SafeWrap name={active}>{content}</SafeWrap>
         </div>
       </main>
     </div>
diff --git a/src/components/ApiClient/JobRunner.tsx b/src/components/ApiClient/JobRunner.tsx
index 0b58793..0b1547a 100644
--- a/src/components/ApiClient/JobRunner.tsx
+++ b/src/components/ApiClient/JobRunner.tsx
@@ -42,7 +42,6 @@ export function JobRunner({ onViewResults }: JobRunnerProps) {
   const [selectedTemplateId, setSelectedTemplateId] = useState<string>("")
   const [scannedPaths, setScannedPaths] = useState<string[]>([])
   const [mode, setMode] = useState<"sync" | "async">("async")
-  const [outputFormat, setOutputFormat] = useState<"json" | "csv" | "both">("json")
   const [statusMsg, setStatusMsg] = useState("")
   const [submitting, setSubmitting] = useState(false)
   const pollRefs = useRef<Record<string, boolean>>({})
@@ -196,164 +195,121 @@ export function JobRunner({ onViewResults }: JobRunnerProps) {
   }
 
   return (
-    <div className="space-y-10">
-      <header className="mb-8">
-        <span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Workflow Runner</span>
-        <h2 className="text-display-sm font-serif text-ink mb-2">New Grading Job</h2>
-        <p className="text-body-lg text-body max-w-2xl">
-          Initialize a high-precision optical mark recognition task. Configure your template, ingest scanned documents, and define the processing mode.
-        </p>
-      </header>
+    <div className="space-y-6">
+      <div className="mb-2">
+        <h2 className="text-display-sm font-serif text-ink mb-1">New Grading Job</h2>
+        <p className="text-body-md text-muted max-w-2xl">Configure the template, upload scanned sheets, and start the OMR grading process.</p>
+      </div>
 
-      <div className="space-y-8">
-        {/* Step 1: Select Template */}
-        <section className="bg-surface-card border-2 border-surface-cream-strong p-6 shadow-sm border-l-4 border-l-primary">
-          <div className="flex items-start justify-between mb-6">
-            <div>
-              <h3 className="text-title-lg font-medium text-ink mb-1">01. Select Template</h3>
-              <p className="text-body-sm text-muted">Choose the structural layout for the OMR processing engine.</p>
-            </div>
-            <span className="material-symbols-outlined text-primary">description</span>
-          </div>
-          <div className="relative max-w-md">
-            <select
-              value={selectedTemplateId}
-              onChange={(e) => setSelectedTemplateId(e.target.value)}
-              className="w-full h-12 px-4 bg-canvas border-2 border-surface-cream-strong focus:border-primary focus:ring-0 appearance-none text-body-md transition-colors"
+      <Panel title="01. Select Template" icon="description">
+        <div className="relative max-w-md">
+          <select
+            value={selectedTemplateId}
+            onChange={(e) => setSelectedTemplateId(e.target.value)}
+            className="w-full h-10 px-3 bg-canvas border border-hairline rounded-md focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none text-body-md appearance-none"
+          >
+            <option value="">-- Choose a template --</option>
+            {templates.map((t) => (
+              <option key={t.id} value={t.id}>{t.name}</option>
+            ))}
+          </select>
+          <span className="material-symbols-outlined absolute right-3 top-2.5 pointer-events-none text-muted">expand_more</span>
+        </div>
+      </Panel>
+
+      <Panel title="02. Upload Scanned Sheets" icon="upload_file">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="md:col-span-2">
+            <button
+              onClick={pickScannedFiles}
+              className="w-full border border-dashed border-hairline rounded-lg h-48 flex flex-col items-center justify-center bg-canvas hover:bg-surface-soft transition-colors group"
             >
-              <option value="">-- Choose a template --</option>
-              {templates.map((t) => (
-                <option key={t.id} value={t.id}>{t.name}</option>
+              <span className="material-symbols-outlined text-3xl text-muted mb-3 group-hover:scale-110 transition-transform">cloud_upload</span>
+              <p className="text-button text-ink">Select scanned images</p>
+              <p className="text-xs text-muted mt-1">PNG, JPG · Max 500MB per sheet</p>
+            </button>
+          </div>
+          <div className="space-y-2">
+            <span className="text-caption text-muted font-medium">Selected Files ({scannedPaths.length})</span>
+            <div className="space-y-2 max-h-44 overflow-y-auto pr-1 custom-scrollbar">
+              {scannedPaths.length === 0 && (
+                <div className="p-3 bg-canvas border border-hairline rounded-md text-caption text-muted text-center">No files selected</div>
+              )}
+              {scannedPaths.map((p, i) => (
+                <div key={i} className="flex items-center justify-between p-2 bg-canvas border border-hairline rounded-md text-[11px] font-mono">
+                  <span className="truncate pr-2">{p.split(/[/\\]/).pop() || p}</span>
+                  <button
+                    onClick={() => setScannedPaths((prev) => prev.filter((_, idx) => idx !== i))}
+                    className="text-muted hover:text-error"
+                  >
+                    <span className="material-symbols-outlined text-[14px]">close</span>
+                  </button>
+                </div>
               ))}
-            </select>
-            <span className="material-symbols-outlined absolute right-4 top-3 pointer-events-none text-muted">expand_more</span>
-          </div>
-        </section>
-
-        {/* Step 2: Upload Scanned Sheets */}
-        <section className="bg-surface-card border-2 border-surface-cream-strong p-6 shadow-sm border-l-4 border-l-primary">
-          <div className="flex items-start justify-between mb-6">
-            <div>
-              <h3 className="text-title-lg font-medium text-ink mb-1">02. Upload Scanned Sheets</h3>
-              <p className="text-body-sm text-muted">Ingest high-resolution JPEG, PNG files for batch analysis.</p>
             </div>
-            <span className="material-symbols-outlined text-primary">upload_file</span>
           </div>
+        </div>
+      </Panel>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div className="md:col-span-2">
+      <Panel title="03. Configuration" icon="settings_input_component">
+        <div className="flex flex-wrap gap-8">
+          <div className="flex flex-col gap-3">
+            <span className="text-button font-medium">Processing Mode</span>
+            <div className="flex bg-canvas p-1 border border-hairline rounded-md w-fit">
               <button
-                onClick={pickScannedFiles}
-                className="w-full border-2 border-dashed border-surface-cream-strong h-64 flex flex-col items-center justify-center bg-canvas hover:bg-surface-soft transition-colors cursor-pointer group"
+                onClick={() => setMode("sync")}
+                className={`px-4 py-1.5 rounded text-button font-medium transition-all ${
+                  mode === "sync"
+                    ? "bg-surface-card text-primary border border-primary shadow-sm"
+                    : "text-muted hover:bg-surface-soft"
+                }`}
               >
-                <span className="material-symbols-outlined text-4xl mb-4 text-muted group-hover:scale-110 transition-transform">cloud_upload</span>
-                <p className="text-button text-ink">Select scanned images</p>
-                <p className="text-xs text-muted mt-2">Max file size: 500MB per sheet</p>
+                Synchronous
+              </button>
+              <button
+                onClick={() => setMode("async")}
+                className={`px-4 py-1.5 rounded text-button font-medium transition-all ${
+                  mode === "async"
+                    ? "bg-surface-card text-primary border border-primary shadow-sm"
+                    : "text-muted hover:bg-surface-soft"
+                }`}
+              >
+                Asynchronous
               </button>
             </div>
-            <div className="space-y-4">
-              <h4 className="text-[10px] font-mono uppercase text-muted">Selected Files ({scannedPaths.length})</h4>
-              <div className="space-y-2 max-h-52 overflow-y-auto pr-2 custom-scrollbar">
-                {scannedPaths.length === 0 && (
-                  <div className="p-3 bg-canvas border-2 border-surface-cream-strong text-caption text-muted text-center">No files selected</div>
-                )}
-                {scannedPaths.map((p, i) => (
-                  <div
-                    key={i}
-                    className="flex items-center justify-between p-3 bg-canvas border-2 border-surface-cream-strong text-[11px] font-mono"
-                  >
-                    <span className="truncate pr-2">{p.split(/[/\\]/).pop() || p}</span>
-                    <button
-                      onClick={() => setScannedPaths((prev) => prev.filter((_, idx) => idx !== i))}
-                      className="text-muted hover:text-error"
-                    >
-                      <span className="material-symbols-outlined text-[14px]">close</span>
-                    </button>
-                  </div>
-                ))}
-              </div>
-            </div>
           </div>
-        </section>
-
-        {/* Step 3: Configuration */}
-        <section className="bg-surface-card border-2 border-surface-cream-strong p-6 shadow-sm border-l-4 border-l-primary">
-          <div className="flex items-start justify-between mb-6">
-            <div>
-              <h3 className="text-title-lg font-medium text-ink mb-1">03. Configuration</h3>
-              <p className="text-body-sm text-muted">Define processing priority and output format.</p>
-            </div>
-            <span className="material-symbols-outlined text-primary">settings_input_component</span>
-          </div>
-
-          <div className="flex flex-wrap gap-12">
-            <div className="flex flex-col gap-4">
-              <span className="text-button font-medium">Processing Mode</span>
-              <div className="flex bg-canvas p-1 border-2 border-surface-cream-strong w-fit">
-                <button
-                  onClick={() => setMode("sync")}
-                  className={`px-6 py-2 text-button font-medium transition-all ${
-                    mode === "sync"
-                      ? "bg-surface-card border-2 border-primary text-primary shadow-sm"
-                      : "text-muted hover:bg-surface-soft"
-                  }`}
-                >
-                  Synchronous
-                </button>
-                <button
-                  onClick={() => setMode("async")}
-                  className={`px-6 py-2 text-button font-medium transition-all ${
-                    mode === "async"
-                      ? "bg-surface-card border-2 border-primary text-primary shadow-sm"
-                      : "text-muted hover:bg-surface-soft"
-                  }`}
-                >
-                  Asynchronous
-                </button>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-4">
-              <span className="text-button font-medium">Output Format</span>
-              <div className="flex gap-4">
-                {(["json", "csv", "both"] as const).map((fmt) => (
-                  <label key={fmt} className="flex items-center gap-2 cursor-pointer">
-                    <input
-                      type="radio"
-                      name="output-format"
-                      checked={outputFormat === fmt}
-                      onChange={() => setOutputFormat(fmt)}
-                      className="w-5 h-5 accent-primary border-2 border-surface-cream-strong"
-                    />
-                    <span className="font-mono text-code uppercase">{fmt === "both" ? "JSON + CSV" : fmt}</span>
-                  </label>
-                ))}
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Final Action */}
-        <div className="pt-8 flex flex-col items-center justify-center gap-6">
-          <button
-            onClick={handleSubmit}
-            disabled={submitting || !selectedTemplateId || scannedPaths.length === 0}
-            className="bg-primary text-on-primary text-title-md font-medium py-5 px-16 border-2 border-primary hover:bg-primary-active active:scale-95 transition-all shadow-lg disabled:bg-primary-disabled disabled:text-muted disabled:border-primary-disabled disabled:shadow-none group flex items-center gap-4"
-          >
-            {submitting ? "Submitting..." : "Start Grading Process"}
-            {!submitting && <span className="material-symbols-outlined group-hover:translate-x-2 transition-transform">arrow_forward</span>}
-          </button>
-          <p className="text-xs font-mono text-muted uppercase tracking-widest">
-            Estimated processing time: <span className="text-primary font-bold">~{Math.max(1, scannedPaths.length * 14)} seconds</span>
-          </p>
         </div>
+      </Panel>
+
+      <div className="pt-4 flex flex-col items-center gap-4">
+        <button
+          onClick={handleSubmit}
+          disabled={submitting || !selectedTemplateId || scannedPaths.length === 0}
+          className="px-8 py-3 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all disabled:bg-primary-disabled disabled:text-muted shadow-sm flex items-center gap-2"
+        >
+          <span className="material-symbols-outlined">play_arrow</span>
+          {submitting ? "Submitting..." : "Start Grading Process"}
+        </button>
+        <p className="text-xs font-mono text-muted uppercase tracking-wider">
+          Estimated time: <span className="text-primary font-bold">~{Math.max(1, scannedPaths.length * 14)} seconds</span>
+        </p>
       </div>
 
       {statusMsg && (
-        <div className="mt-8 text-caption text-body bg-canvas border-2 border-hairline px-4 py-3 rounded-md font-medium">
-          {statusMsg}
-        </div>
+        <div className="text-caption text-body bg-canvas border border-hairline px-3 py-2 rounded-md font-medium">{statusMsg}</div>
       )}
     </div>
   )
 }
+
+function Panel({ title, icon, children }: { title: string; icon: string; children: React.ReactNode }) {
+  return (
+    <div className="bg-surface-card border border-hairline rounded-lg p-4">
+      <div className="flex items-center gap-2 mb-4">
+        <span className="material-symbols-outlined text-[18px] text-primary">{icon}</span>
+        <h3 className="text-title-md font-medium text-ink">{title}</h3>
+      </div>
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/ApiClient/ResultsGallery.tsx b/src/components/ApiClient/ResultsGallery.tsx
index 1c8a107..63d27cc 100644
--- a/src/components/ApiClient/ResultsGallery.tsx
+++ b/src/components/ApiClient/ResultsGallery.tsx
@@ -50,45 +50,41 @@ export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
   )
 
   return (
-    <div className="space-y-8">
-      <header className="mb-8">
-        <span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Gallery</span>
-        <h2 className="text-display-sm font-serif text-ink mb-2">Results Gallery</h2>
-        <p className="text-body-lg text-body max-w-2xl">
-          Browse and manage scanned batch results. Analyze extraction data, verify outputs, and export structured results.
-        </p>
-      </header>
-
-      <div className="flex flex-wrap items-center justify-between gap-4 p-6 bg-surface-soft border-2 border-surface-cream-strong">
-        <div className="flex items-center gap-4">
-          <div className="relative">
-            <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-muted text-sm">search</span>
-            <input
-              type="text"
-              value={filter}
-              onChange={(e) => setFilter(e.target.value)}
-              placeholder="Search batches..."
-              className="pl-10 pr-4 py-2 bg-surface-card border-2 border-surface-cream-strong focus:border-primary focus:ring-0 transition-colors text-body-md w-64"
-            />
-          </div>
-          <select className="px-4 py-2 bg-surface-card border-2 border-surface-cream-strong focus:border-primary focus:ring-0 transition-colors text-body-md">
-            <option>All Templates</option>
-            {Array.from(new Set(runs.map((r) => r.templateName))).map((name) => (
-              <option key={name}>{name}</option>
-            ))}
-          </select>
-        </div>
-        <div className="flex items-center gap-3">
-          <button
-            onClick={onNewJob}
-            className="bg-primary text-on-primary px-5 py-2 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all"
-          >
-            New Job
-          </button>
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+        <div>
+          <h2 className="text-display-sm font-serif text-ink mb-1">Results Gallery</h2>
+          <p className="text-body-md text-muted max-w-2xl">Browse grading runs, inspect extracted data, and export results.</p>
         </div>
+        <button
+          onClick={onNewJob}
+          className="px-4 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all flex items-center gap-2 shadow-sm"
+        >
+          <span className="material-symbols-outlined text-[18px]">add</span>
+          New Job
+        </button>
       </div>
 
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-wrap items-center gap-3 p-4 bg-surface-card border border-hairline rounded-lg">
+        <div className="relative">
+          <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-muted text-sm">search</span>
+          <input
+            type="text"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Search batches..."
+            className="pl-9 pr-3 py-2 bg-canvas border border-hairline rounded-md text-body-sm focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none transition-all w-64"
+          />
+        </div>
+        <select className="px-3 py-2 bg-canvas border border-hairline rounded-md text-body-sm focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none">
+          <option>All Templates</option>
+          {Array.from(new Set(runs.map((r) => r.templateName))).map((name) => (
+            <option key={name}>{name}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex flex-col gap-4">
         {filteredRuns.map((run) => (
           <BatchCard
             key={run.id}
@@ -102,17 +98,15 @@ export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
           />
         ))}
 
-        {loadingServer && (
-          <div className="text-caption text-muted text-center py-8">Loading server history...</div>
-        )}
+        {loadingServer && <div className="text-caption text-muted text-center py-8">Loading server history...</div>}
 
         {filteredRuns.length === 0 && !loadingServer && (
-          <div className="text-center py-12 bg-canvas border-2 border-dashed border-hairline rounded-md">
+          <div className="text-center py-12 rounded-lg border border-dashed border-hairline bg-canvas">
             <span className="material-symbols-outlined text-4xl text-muted mb-4 block">analytics</span>
             <p className="text-body-md text-muted mb-4">No grading runs yet.</p>
             <button
               onClick={onNewJob}
-              className="bg-primary text-on-primary px-6 py-2 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all"
+              className="px-5 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all"
             >
               Start a Job
             </button>
@@ -121,49 +115,39 @@ export function ResultsGallery({ onNewJob }: ResultsGalleryProps) {
       </div>
 
       {serverJobs.length > 0 && (
-        <div className="mt-12 pt-8 border-t-2 border-surface-cream-strong">
+        <div className="mt-8 pt-6 border-t border-hairline">
           <h3 className="text-title-md font-medium mb-4">Server Job History</h3>
-          <div className="overflow-x-auto custom-scrollbar bg-surface-card border-2 border-surface-cream-strong">
-            <table className="w-full text-left border-collapse">
-              <thead>
-                <tr className="bg-canvas border-b-2 border-surface-cream-strong">
-                  <th className="p-4 text-[10px] font-mono uppercase text-muted">Job ID</th>
-                  <th className="p-4 text-[10px] font-mono uppercase text-muted">Status</th>
-                  <th className="p-4 text-[10px] font-mono uppercase text-muted">Created</th>
-                  <th className="p-4 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
+          <Table>
+            <thead>
+              <tr className="bg-canvas border-b border-hairline">
+                <th className="p-3 text-[10px] font-mono uppercase text-muted">Job ID</th>
+                <th className="p-3 text-[10px] font-mono uppercase text-muted">Status</th>
+                <th className="p-3 text-[10px] font-mono uppercase text-muted">Created</th>
+                <th className="p-3 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="font-mono text-code">
+              {serverJobs.slice(0, 10).map((job) => (
+                <tr key={job.job_id} className="border-b border-hairline hover:bg-surface-soft transition-colors">
+                  <td className="p-3">{job.job_id.slice(0, 16)}...</td>
+                  <td className="p-3">
+                    <StatusBadge status={job.status} />
+                  </td>
+                  <td className="p-3 text-muted-soft">{job.created_at || "—"}</td>
+                  <td className="p-3 text-right">
+                    <a
+                      href={getOutputUrl(serverUrl, job.job_id, "result.json")}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="material-symbols-outlined text-lg text-muted hover:text-primary transition-colors"
+                    >
+                      open_in_new
+                    </a>
+                  </td>
                 </tr>
-              </thead>
-              <tbody className="font-mono text-code">
-                {serverJobs.slice(0, 10).map((job) => (
-                  <tr key={job.job_id} className="border-b border-hairline hover:bg-surface-soft transition-colors">
-                    <td className="p-4">{job.job_id.slice(0, 16)}...</td>
-                    <td className="p-4">
-                      <span className={`text-caption font-medium uppercase ${
-                        job.status === "completed"
-                          ? "text-success"
-                          : job.status === "failed"
-                          ? "text-error"
-                          : "text-warning"
-                      }`}>
-                        {job.status}
-                      </span>
-                    </td>
-                    <td className="p-4 text-muted-soft">{job.created_at || "—"}</td>
-                    <td className="p-4 text-right">
-                      <a
-                        href={getOutputUrl(serverUrl, job.job_id, "result.json")}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="material-symbols-outlined text-lg text-muted hover:text-primary transition-colors"
-                      >
-                        open_in_new
-                      </a>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+              ))}
+            </tbody>
+          </Table>
         </div>
       )}
     </div>
@@ -193,33 +177,28 @@ function BatchCard({
 
   const completedCount = run.jobs.filter((j) => j.status === "completed").length
   const accuracy = overallStatus === "success" ? 99.2 : overallStatus === "partial-error" ? 84.5 : null
-  const speed = "0.4s"
 
   const statusConfig = {
-    success: { label: "Success", bg: "bg-success/15", text: "text-success", border: "border-success", dot: "bg-success" },
-    "partial-error": { label: "Partial Error", bg: "bg-warning/15", text: "text-warning", border: "border-warning", dot: "bg-warning" },
-    running: { label: "Running", bg: "bg-warning/15", text: "text-warning", border: "border-warning", dot: "bg-warning animate-pulse" },
+    success: { label: "Success", bg: "bg-success/10", text: "text-success", border: "border-success", dot: "bg-success" },
+    "partial-error": { label: "Partial Error", bg: "bg-warning/10", text: "text-warning", border: "border-warning", dot: "bg-warning" },
+    running: { label: "Running", bg: "bg-warning/10", text: "text-warning", border: "border-warning", dot: "bg-warning animate-pulse" },
     idle: { label: "Idle", bg: "bg-muted/10", text: "text-muted", border: "border-muted", dot: "bg-muted" },
   }[overallStatus]
 
   return (
-    <div
-      className={`bg-surface-card border-2 shadow-sm overflow-hidden transition-all ${
-        active ? "border-primary" : "border-surface-cream-strong"
-      }`}
-    >
+    <div className={`bg-surface-card border rounded-lg overflow-hidden transition-all ${active ? "border-primary" : "border-hairline"}`}>
       <div
-        className={`flex items-center justify-between p-6 border-l-4 ${statusConfig.border} cursor-pointer hover:bg-surface-soft transition-colors`}
+        className={`flex items-center justify-between p-4 border-l-[3px] ${statusConfig.border} cursor-pointer hover:bg-surface-soft transition-colors`}
         onClick={onActivate}
       >
-        <div className="flex-1">
-          <div className="flex items-center gap-3 mb-1">
-            <h3 className="text-title-lg font-medium text-ink">{run.templateName}</h3>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <h3 className="text-title-md font-medium text-ink truncate">{run.templateName}</h3>
             <span className={`text-[10px] font-mono px-2 py-0.5 rounded uppercase ${statusConfig.bg} ${statusConfig.text} border border-current`}>
               {statusConfig.label}
             </span>
           </div>
-          <div className="flex gap-6 text-muted text-sm font-medium">
+          <div className="flex gap-4 text-muted text-sm">
             <span className="flex items-center gap-1">
               <span className="material-symbols-outlined text-base">calendar_today</span>
               {new Date(run.createdAt).toLocaleDateString()}
@@ -231,23 +210,17 @@ function BatchCard({
           </div>
         </div>
 
-        <div className="flex items-center gap-8 mr-6">
+        <div className="flex items-center gap-6 mr-4 shrink-0">
           <div className="text-center">
-            <p className="text-[10px] font-mono uppercase text-muted mb-1">Progress</p>
-            <p className="text-title-md font-medium text-ink">
-              {completedCount}/{run.jobs.length || run.scannedPaths.length}
-            </p>
+            <p className="text-[10px] font-mono uppercase text-muted mb-0.5">Progress</p>
+            <p className="text-title-sm font-medium text-ink">{completedCount}/{run.jobs.length || run.scannedPaths.length}</p>
           </div>
           {accuracy !== null && (
             <div className="text-center">
-              <p className="text-[10px] font-mono uppercase text-muted mb-1">Accuracy</p>
-              <p className={`text-title-md font-medium ${statusConfig.text}`}>{accuracy.toFixed(1)}%</p>
+              <p className="text-[10px] font-mono uppercase text-muted mb-0.5">Accuracy</p>
+              <p className={`text-title-sm font-medium ${statusConfig.text}`}>{accuracy.toFixed(1)}%</p>
             </div>
           )}
-          <div className="text-center">
-            <p className="text-[10px] font-mono uppercase text-muted mb-1">Speed</p>
-            <p className="text-title-md font-medium text-ink">{speed}<span className="text-sm text-muted">/sheet</span></p>
-          </div>
         </div>
 
         <button
@@ -255,70 +228,62 @@ function BatchCard({
             e.stopPropagation()
             onToggle()
           }}
-          className="p-2 text-muted hover:text-ink hover:bg-surface-cream-strong transition-colors"
+          className="p-1.5 text-muted hover:text-ink hover:bg-surface-cream-strong rounded-md transition-colors shrink-0"
         >
           <span className={`material-symbols-outlined transition-transform ${expanded ? "rotate-180" : ""}`}>keyboard_arrow_down</span>
         </button>
       </div>
 
       {expanded && (
-        <div className="border-t-2 border-surface-cream-strong bg-canvas animate-fade-in">
-          <div className="p-6">
-            <div className="flex justify-between items-end mb-6">
-              <div>
-                <h4 className="text-caption-uppercase text-muted uppercase tracking-wider mb-4">Sheet Inspection</h4>
-                <div className="flex gap-4">
-                  <button className="bg-primary text-on-primary px-5 py-2 border-2 border-primary text-button hover:bg-primary-active active:scale-[0.98] transition-all flex items-center gap-2">
-                    <span className="material-symbols-outlined text-base">download</span>
-                    Export CSV
-                  </button>
-                  <button className="text-primary border-2 border-primary px-5 py-2 text-button hover:bg-surface-card active:scale-[0.98] transition-all flex items-center gap-2">
-                    <span className="material-symbols-outlined text-base">picture_as_pdf</span>
-                    Export PDF Report
-                  </button>
-                </div>
+        <div className="border-t border-hairline bg-canvas animate-fade-in">
+          <div className="p-4 space-y-5">
+            <div className="flex justify-between items-end">
+              <div className="flex gap-3">
+                <button className="px-4 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all flex items-center gap-2 shadow-sm">
+                  <span className="material-symbols-outlined text-base">download</span>
+                  Export CSV
+                </button>
+                <button className="px-4 py-2 border border-primary text-primary rounded-md text-button font-medium hover:bg-primary/5 active:scale-[0.98] transition-all flex items-center gap-2">
+                  <span className="material-symbols-outlined text-base">picture_as_pdf</span>
+                  Export PDF Report
+                </button>
               </div>
               <button
                 onClick={onRemove}
-                className="p-2 text-muted hover:text-error hover:bg-error/5 rounded transition-colors"
+                className="p-1.5 text-muted hover:text-error hover:bg-error/5 rounded-md transition-colors"
                 title="Remove run"
               >
                 <span className="material-symbols-outlined">delete</span>
               </button>
             </div>
 
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
-              {run.jobs.slice(0, 8).map((job) => (
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+              {run.jobs.slice(0, 12).map((job) => (
                 <JobThumbnail key={job.job_id} job={job} serverUrl={serverUrl} />
               ))}
-              {run.jobs.length > 8 && (
-                <button
-                  onClick={() => {}}
-                  className="bg-surface-soft border-2 border-dashed border-hairline flex flex-col items-center justify-center p-4 hover:bg-surface-card transition-all"
-                >
-                  <span className="material-symbols-outlined text-2xl text-muted mb-1">more_horiz</span>
-                  <span className="text-caption text-muted">+{run.jobs.length - 8} more</span>
+              {run.jobs.length > 12 && (
+                <button className="bg-surface-soft border border-dashed border-hairline rounded-lg flex flex-col items-center justify-center p-3 hover:bg-surface-card transition-all">
+                  <span className="material-symbols-outlined text-2xl text-muted">more_horiz</span>
+                  <span className="text-caption text-muted">+{run.jobs.length - 12} more</span>
                 </button>
               )}
             </div>
 
-            <div className="overflow-x-auto custom-scrollbar bg-surface-card border-2 border-surface-cream-strong">
-              <table className="w-full text-left border-collapse">
-                <thead>
-                  <tr className="bg-canvas border-b-2 border-surface-cream-strong">
-                    <th className="p-4 text-[10px] font-mono uppercase text-muted">Sheet ID</th>
-                    <th className="p-4 text-[10px] font-mono uppercase text-muted">Status</th>
-                    <th className="p-4 text-[10px] font-mono uppercase text-muted">Answers</th>
-                    <th className="p-4 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="font-mono text-code">
-                  {run.jobs.map((job) => (
-                    <JobRow key={job.job_id} job={job} serverUrl={serverUrl} />
-                  ))}
-                </tbody>
-              </table>
-            </div>
+            <Table>
+              <thead>
+                <tr className="bg-canvas border-b border-hairline">
+                  <th className="p-3 text-[10px] font-mono uppercase text-muted">Sheet ID</th>
+                  <th className="p-3 text-[10px] font-mono uppercase text-muted">Status</th>
+                  <th className="p-3 text-[10px] font-mono uppercase text-muted">Answers</th>
+                  <th className="p-3 text-[10px] font-mono uppercase text-muted text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="font-mono text-code">
+                {run.jobs.map((job) => (
+                  <JobRow key={job.job_id} job={job} serverUrl={serverUrl} />
+                ))}
+              </tbody>
+            </Table>
           </div>
         </div>
       )}
@@ -337,10 +302,10 @@ function JobThumbnail({ job, serverUrl }: { job: JobStatusResponse; serverUrl: s
   const answers = extracted ? Object.keys(extracted).length : 0
 
   return (
-    <div className="group relative bg-surface-card border-2 border-surface-cream-strong p-2 cursor-pointer hover:border-primary transition-colors">
-      <div className="aspect-[3/4] bg-canvas mb-2 overflow-hidden relative flex items-center justify-center">
+    <div className="group relative bg-surface-card border border-hairline rounded-lg p-2 cursor-pointer hover:border-primary transition-colors">
+      <div className="aspect-[3/4] bg-canvas mb-2 rounded overflow-hidden relative flex items-center justify-center">
         <div className="text-center">
-          <span className="material-symbols-outlined text-3xl text-muted">description</span>
+          <span className="material-symbols-outlined text-2xl text-muted">description</span>
           <p className="text-[10px] font-mono text-muted mt-1">{answers} answers</p>
         </div>
         <div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
@@ -348,14 +313,14 @@ function JobThumbnail({ job, serverUrl }: { job: JobStatusResponse; serverUrl: s
             href={job.output_files?.[0] ? getOutputUrl(serverUrl, job.job_id, job.output_files[0]) : "#"}
             target="_blank"
             rel="noreferrer"
-            className="bg-surface-card p-2 material-symbols-outlined text-primary"
+            className="bg-surface-card p-1.5 material-symbols-outlined text-primary rounded"
           >
-            visibility
+              visibility
           </a>
         </div>
       </div>
-      <p className="text-[10px] font-mono text-center truncate">{job.job_id.slice(0, 12)}...</p>
-      <span className={`absolute top-3 right-3 w-2 h-2 rounded-full ${statusColor}`} />
+      <p className="text-[10px] font-mono text-center truncate">{job.job_id.slice(0, 10)}...</p>
+      <span className={`absolute top-2 right-2 w-2 h-2 rounded-full ${statusColor}`} />
     </div>
   )
 }
@@ -365,27 +330,14 @@ function JobRow({ job, serverUrl }: { job: JobStatusResponse; serverUrl: string
   const extracted = resultData?.ExtractedData as Record<string, unknown> | undefined
   const answerCount = extracted ? Object.keys(extracted).length : 0
 
-  const statusColor =
-    job.status === "completed" ? "text-success"
-    : job.status === "failed" ? "text-error"
-    : "text-warning"
-
-  const statusDot =
-    job.status === "completed" ? "bg-success"
-    : job.status === "failed" ? "bg-error"
-    : "bg-warning animate-pulse"
-
   return (
     <tr className="border-b border-hairline hover:bg-surface-soft transition-colors">
-      <td className="p-4">{job.job_id.slice(0, 20)}...</td>
-      <td className="p-4">
-        <span className={`flex items-center gap-2 ${statusColor}`}>
-          <span className={`w-2 h-2 rounded-full ${statusDot}`} />
-          <span className="text-caption font-medium uppercase">{job.status}</span>
-        </span>
+      <td className="p-3">{job.job_id.slice(0, 18)}...</td>
+      <td className="p-3">
+        <StatusBadge status={job.status} />
       </td>
-      <td className="p-4 text-muted-soft">{answerCount} extracted</td>
-      <td className="p-4 text-right">
+      <td className="p-3 text-muted-soft">{answerCount} extracted</td>
+      <td className="p-3 text-right">
         <div className="flex items-center justify-end gap-2">
           {job.output_files?.map((file) => (
             <a
@@ -407,3 +359,25 @@ function JobRow({ job, serverUrl }: { job: JobStatusResponse; serverUrl: string
     </tr>
   )
 }
+
+function StatusBadge({ status }: { status: string }) {
+  const config =
+    status === "completed" ? { color: "text-success", dot: "bg-success" }
+    : status === "failed" ? { color: "text-error", dot: "bg-error" }
+    : { color: "text-warning", dot: "bg-warning animate-pulse" }
+
+  return (
+    <span className={`flex items-center gap-1.5 ${config.color}`}>
+      <span className={`w-2 h-2 rounded-full ${config.dot}`} />
+      <span className="text-caption font-medium uppercase">{status}</span>
+    </span>
+  )
+}
+
+function Table({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="overflow-x-auto custom-scrollbar bg-surface-card border border-hairline rounded-lg">
+      <table className="w-full text-left border-collapse">{children}</table>
+    </div>
+  )
+}
diff --git a/src/components/ApiClient/ServerSettings.tsx b/src/components/ApiClient/ServerSettings.tsx
index db2ed0d..3046406 100644
--- a/src/components/ApiClient/ServerSettings.tsx
+++ b/src/components/ApiClient/ServerSettings.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react"
+import { useState, useEffect } from "react"
 import { useApiStore } from "../../store/useApiStore"
 import { checkHealth } from "../../utils/apiClient"
 
@@ -9,7 +9,6 @@ export function ServerSettings() {
   const [checking, setChecking] = useState(false)
   const [health, setHealth] = useState<{ ok: boolean; msg: string; data?: { version?: string; redis?: string; storage?: string; database?: string } } | null>(null)
 
-  // Keep input in sync if store changes externally
   useEffect(() => {
     setInputUrl(serverUrl)
   }, [serverUrl])
@@ -44,146 +43,117 @@ export function ServerSettings() {
     ? { label: "Error", color: "error", icon: "error" }
     : { label: "Unknown", color: "muted", icon: "help" }
 
-  const metrics = [
-    { label: "Latency", value: "14ms" },
-    { label: "API Version", value: health?.data?.version || "—" },
-    { label: "Last Sync", value: health?.ok ? "Just Now" : "—" },
-  ]
-
   return (
-    <div className="space-y-8">
-      {/* Page Header */}
-      <div className="mb-10 border-b-2 border-surface-cream-strong pb-6">
-        <span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Connection Profile</span>
-        <h2 className="text-display-sm font-serif text-ink mb-2">Server Configuration</h2>
-        <p className="text-body-lg text-body max-w-2xl">
-          Manage the connection parameters for your OMR backend and monitor the health of critical infrastructure services.
-        </p>
+    <div className="space-y-6">
+      <PageHeader title="Server Configuration" subtitle="Manage the connection parameters for your OMR backend and monitor infrastructure health." />
+
+      <Panel title="Connection Profile" icon="link">
+        <div className="flex flex-col md:flex-row gap-3 items-end">
+          <div className="flex-1 w-full">
+            <label className="text-caption text-muted block mb-1.5 font-medium">FastAPI Backend URL</label>
+            <input
+              type="text"
+              value={inputUrl}
+              onChange={(e) => setInputUrl(e.target.value)}
+              placeholder="http://localhost:8000"
+              className="w-full bg-canvas border border-hairline rounded-md px-3 py-2 text-body-md text-ink focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none transition-all"
+            />
+          </div>
+          <button
+            onClick={handleCheck}
+            disabled={checking}
+            className="px-4 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all disabled:bg-primary-disabled disabled:text-muted h-10 shrink-0"
+          >
+            <span className="material-symbols-outlined text-[18px] align-middle mr-1">{checking ? "sync" : "bolt"}</span>
+            {checking ? "Checking..." : "Test Connection"}
+          </button>
+        </div>
+
+        {health && (
+          <div
+            className={
+              (health.ok
+                ? "text-success bg-success/10 border-success/20 "
+                : "text-error bg-error/10 border-error/20 ") +
+              "mt-4 text-caption font-medium px-3 py-2 rounded-md border"
+            }
+            role={health.ok ? "status" : "alert"}
+          >
+            <span className="material-symbols-outlined text-[18px] align-middle mr-2">{status.icon}</span>
+            {health.msg}
+          </div>
+        )}
+      </Panel>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <HealthCard
+          title="Redis Cluster"
+          subtitle="Cache & Messaging"
+          status={health?.data?.redis || "unknown"}
+          icon="database"
+        />
+        <HealthCard
+          title="File Storage"
+          subtitle="Object Store"
+          status={health?.data?.storage || "unknown"}
+          icon="folder_open"
+        />
+        <HealthCard
+          title="Main Database"
+          subtitle="Relational Records"
+          status={health?.data?.database || "unknown"}
+          icon="storage"
+        />
       </div>
-
-      {/* Connection Profile Card */}
-      <section className="bg-surface-card border-2 border-surface-cream-strong p-6 shadow-sm relative overflow-hidden">
-        <div className="absolute top-0 left-0 w-1 h-full bg-primary" />
-        <div className="flex flex-col md:flex-row justify-between md:items-start gap-4 mb-8">
-          <div>
-            <h3 className="text-title-lg font-medium text-primary mb-1">Connection Profile</h3>
-            <p className="text-body-md text-muted">Primary FastAPI Backend Endpoint</p>
-          </div>
-          <span className="bg-success/15 text-success px-3 py-1 text-caption font-medium rounded-full flex items-center gap-1.5 w-fit border border-success/20">
-            <span className="w-2 h-2 rounded-full bg-success animate-pulse" />
-            {status.label.toUpperCase()}
-          </span>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
-          <div className="md:col-span-3">
-            <label className="block text-caption-uppercase text-muted uppercase tracking-wider mb-2" htmlFor="backend-url">
-              FastAPI Backend URL
-            </label>
-            <div className="relative">
-              <input
-                id="backend-url"
-                type="text"
-                value={inputUrl}
-                onChange={(e) => setInputUrl(e.target.value)}
-                placeholder="http://localhost:8000"
-                className="w-full bg-canvas border-2 border-surface-cream-strong focus:border-primary focus:ring-0 text-body-md px-4 py-3 transition-colors pr-10"
-              />
-              <span className="absolute right-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-muted-soft">link</span>
-            </div>
-          </div>
-          <div>
-            <button
-              onClick={handleCheck}
-              disabled={checking}
-              className="w-full bg-primary text-on-primary py-[14px] px-6 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all flex items-center justify-center gap-2"
-            >
-              <span className="material-symbols-outlined text-[18px]">{checking ? "sync" : "bolt"}</span>
-              {checking ? "Connecting..." : "Test Connection"}
-            </button>
-          </div>
-        </div>
-
-        <div className="mt-8 pt-8 border-t border-hairline grid grid-cols-1 md:grid-cols-3 gap-8">
-          {metrics.map((m) => (
-            <div key={m.label} className="flex flex-col">
-              <span className="text-caption-uppercase text-muted-soft uppercase tracking-wider mb-1">{m.label}</span>
-              <span className="text-title-md font-medium text-ink">{m.value}</span>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* Health Metrics */}
-      <section>
-        <h3 className="text-title-lg font-medium mb-6 px-2">Health Metrics</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <HealthCard
-            title="Redis Cluster"
-            subtitle="Cache & Messaging Layer"
-            status={health?.data?.redis || "unknown"}
-            uptime="99.9%"
-            icon="database"
-          />
-          <HealthCard
-            title="File Storage"
-            subtitle="S3 / Local Object Store"
-            status={health?.data?.storage || "unknown"}
-            uptime="82% FULL"
-            icon="folder_open"
-          />
-          <HealthCard
-            title="Main Database"
-            subtitle="Relational Records"
-            status={health?.data?.database || "unknown"}
-            uptime="PostgreSQL"
-            icon="storage"
-          />
-        </div>
-      </section>
-
-      {health && (
-        <div
-          className={
-            (health.ok
-              ? "text-success bg-success/10 border-success/20 "
-              : "text-error bg-error/10 border-error/20 ") +
-            "text-caption font-medium px-4 py-3 border rounded-md"
-          }
-          role={health.ok ? "status" : "alert"}
-        >
-          <span className="material-symbols-outlined text-[18px] align-middle mr-2">{status.icon}</span>
-          {health.msg}
-        </div>
-      )}
     </div>
   )
 }
 
-function HealthCard({ title, subtitle, status, uptime, icon }: {
+function HealthCard({ title, subtitle, status, icon }: {
   title: string
   subtitle: string
   status: string
-  uptime: string
   icon: string
 }) {
-  const online = status.toLowerCase() === "online" || status.toLowerCase() === "connected" || status.toLowerCase() === "active" || status.toLowerCase() === "ok"
+  const online = ["online", "connected", "active", "ok", "read/write ok", "active pool"].includes(status.toLowerCase())
   return (
-    <div className="bg-surface-card border-2 border-surface-cream-strong p-6 hover:bg-surface-soft hover:-translate-y-px active:scale-[0.99] transition-all shadow-sm">
-      <div className="flex items-center justify-between mb-4">
-        <div className="w-10 h-10 bg-canvas flex items-center justify-center border-2 border-hairline">
-          <span className="material-symbols-outlined text-primary">{icon}</span>
+    <div className="bg-surface-cream-strong/20 border border-hairline rounded-lg p-4 hover:bg-surface-cream-strong/30 transition-colors">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <span className="material-symbols-outlined text-[18px] text-primary">{icon}</span>
+          <div>
+            <h4 className="text-title-sm font-medium text-ink">{title}</h4>
+            <p className="text-caption text-muted-soft">{subtitle}</p>
+          </div>
         </div>
-        <span className="text-[10px] font-mono bg-canvas px-2 py-1 border border-hairline uppercase text-muted">{uptime}</span>
       </div>
-      <h4 className="text-title-sm font-medium mb-1">{title}</h4>
-      <p className="text-[11px] font-mono text-muted-soft mb-4">{subtitle}</p>
       <div className="flex items-center gap-2">
-        <div className={`w-2 h-2 rounded-full ${online ? "bg-success animate-pulse" : "bg-warning"}`} />
+        <div className={`w-2 h-2 rounded-full ${online ? "bg-success" : "bg-warning"}`} />
         <span className={`text-caption font-medium uppercase ${online ? "text-success" : "text-warning"}`}>
-          {online ? "Connected" : status.toUpperCase()}
+          {status.toUpperCase()}
         </span>
       </div>
     </div>
   )
 }
+
+function PageHeader({ title, subtitle }: { title: string; subtitle: string }) {
+  return (
+    <div className="mb-6">
+      <h2 className="text-display-sm font-serif text-ink mb-1">{title}</h2>
+      <p className="text-body-md text-muted max-w-2xl">{subtitle}</p>
+    </div>
+  )
+}
+
+function Panel({ title, icon, children }: { title: string; icon: string; children: React.ReactNode }) {
+  return (
+    <div className="bg-surface-card border border-hairline rounded-lg p-4">
+      <div className="flex items-center gap-2 mb-4">
+        <span className="material-symbols-outlined text-[18px] text-primary">{icon}</span>
+        <h3 className="text-title-md font-medium text-ink">{title}</h3>
+      </div>
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/ApiClient/TemplateManager.tsx b/src/components/ApiClient/TemplateManager.tsx
index 41e8bac..4850153 100644
--- a/src/components/ApiClient/TemplateManager.tsx
+++ b/src/components/ApiClient/TemplateManager.tsx
@@ -26,7 +26,6 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
   const [editingId, setEditingId] = useState<string | null>(null)
   const [editName, setEditName] = useState("")
   const [filter, setFilter] = useState("")
-
   const [showAddPanel, setShowAddPanel] = useState(false)
 
   const hasLoaded = useRef(false)
@@ -54,7 +53,9 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
     }
   }
 
-  const filteredTemplates = templates.filter((t) => t.name.toLowerCase().includes(filter.toLowerCase()))
+  const filteredTemplates = templates.filter((t) =>
+    t.name.toLowerCase().includes(filter.toLowerCase())
+  )
 
   const handleDelete = async (id: string) => {
     if (!templateDir) return
@@ -86,15 +87,11 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
   }
 
   return (
-    <div className="space-y-8">
-      {/* Header */}
-      <header className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
+    <div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
         <div>
-          <span className="text-caption-uppercase text-primary uppercase tracking-widest mb-2 block">Library</span>
-          <h2 className="text-display-sm font-serif text-ink mb-2">Template Library</h2>
-          <p className="text-body-lg text-body max-w-md">
-            Manage your standardized OMR sheets. Define mapping zones and coordinate systems for automated extraction.
-          </p>
+          <h2 className="text-display-sm font-serif text-ink mb-1">Template Library</h2>
+          <p className="text-body-md text-muted max-w-md">Manage standardized OMR sheets and their coordinate mappings.</p>
         </div>
         <div className="flex items-center gap-3">
           <div className="relative">
@@ -104,54 +101,51 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
               value={filter}
               onChange={(e) => setFilter(e.target.value)}
               placeholder="Filter templates..."
-              className="pl-10 pr-4 py-2 bg-surface-card border-2 border-surface-cream-strong focus:border-primary focus:ring-0 transition-colors text-body-md w-64"
+              className="pl-9 pr-3 py-2 bg-canvas border border-hairline rounded-md text-body-sm focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none transition-all w-56"
             />
           </div>
           <button
             onClick={() => setShowAddPanel(true)}
-            className="bg-primary text-on-primary py-2 px-6 text-button border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all flex items-center gap-2 shadow-sm"
+            className="px-4 py-2 bg-primary text-on-primary rounded-md text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all flex items-center gap-2 shadow-sm"
           >
-            <span className="material-symbols-outlined text-sm">add</span>
+            <span className="material-symbols-outlined text-[18px]">add</span>
             Create Template
           </button>
         </div>
-      </header>
-
-      {/* Directory */}
-      <div className="flex items-center gap-2">
-        {templateDir ? (
-          <div className="text-body-sm text-muted bg-canvas px-4 py-2 border-2 border-surface-cream-strong flex-1 truncate font-mono">
-            {templateDir}
-          </div>
-        ) : (
-          <div className="text-body-sm text-muted-soft bg-canvas px-4 py-2 border-2 border-surface-cream-strong flex-1 truncate">
-            No directory selected
-          </div>
-        )}
-        {isElectron && (
-          <button
-            onClick={pickDirectory}
-            className="px-4 py-2 bg-surface-card border-2 border-hairline text-button text-ink hover:bg-surface-cream-strong active:scale-[0.98] transition-all h-10 shrink-0"
-          >
-            {templateDir ? "Change" : "Choose Directory"}
-          </button>
-        )}
       </div>
 
-      {!isElectron && (
-        <div className="text-caption text-warning bg-warning/10 px-4 py-2 border border-warning/20 font-medium rounded-md">
-          Running in web mode. Templates will not persist across reloads.
+      <Panel title="Storage Directory" icon="folder">
+        <div className="flex items-center gap-2">
+          {templateDir ? (
+            <div className="text-body-sm text-muted bg-canvas px-3 py-2 rounded-md border border-hairline flex-1 truncate font-mono">
+              {templateDir}
+            </div>
+          ) : (
+            <div className="text-body-sm text-muted-soft bg-canvas px-3 py-2 rounded-md border border-hairline flex-1 truncate">
+              No directory selected
+            </div>
+          )}
+          {isElectron && (
+            <button
+              onClick={pickDirectory}
+              className="px-3 py-2 rounded-md bg-surface-soft border border-hairline text-nav text-ink hover:bg-surface-cream-strong active:scale-[0.98] transition-all h-10 shrink-0"
+            >
+              {templateDir ? "Change" : "Choose"}
+            </button>
+          )}
         </div>
-      )}
+        {!isElectron && (
+          <div className="mt-3 text-caption text-warning bg-warning/10 px-3 py-2 rounded-md border border-warning/20 font-medium">
+            Running in web mode. Templates will not persist across reloads.
+          </div>
+        )}
+      </Panel>
 
       {message && (
-        <div className="text-caption text-body bg-canvas border-2 border-hairline px-4 py-2 rounded-md font-medium">
-          {message}
-        </div>
+        <div className="text-caption text-body bg-canvas border border-hairline px-3 py-2 rounded-md font-medium">{message}</div>
       )}
 
-      {/* Template Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {filteredTemplates.map((t) => (
           <TemplateCard
             key={t.id}
@@ -166,18 +160,10 @@ export function TemplateManager({ onNewJob }: TemplateManagerProps) {
             onUse={() => onNewJob?.()}
           />
         ))}
-
-        <button
-          onClick={() => setShowAddPanel(true)}
-          className="border-2 border-dashed border-surface-cream-strong flex flex-col items-center justify-center p-8 hover:bg-surface-soft hover:border-primary active:scale-[0.98] transition-all min-h-[280px]"
-        >
-          <span className="material-symbols-outlined text-display-md text-hairline group-hover:text-primary mb-4">add_circle</span>
-          <span className="text-title-sm text-muted">Add New Template</span>
-        </button>
       </div>
 
       {filteredTemplates.length === 0 && !loading && (
-        <div className="text-caption text-muted px-4 py-8 border-2 border-dashed border-hairline bg-canvas text-center rounded-md">
+        <div className="text-caption text-muted px-4 py-8 rounded-md border border-dashed border-hairline bg-canvas text-center">
           No templates found. Create one to get started.
         </div>
       )}
@@ -210,14 +196,10 @@ function TemplateCard({
   onDelete: () => void
   onUse: () => void
 }) {
-  const status = "READY"
   return (
-    <div className="bg-surface-card border-2 border-surface-cream-strong p-4 flex flex-col group hover:bg-surface-soft hover:-translate-y-px active:scale-[0.99] transition-all">
-      <div className="relative aspect-[3/4] bg-canvas mb-4 border-2 border-hairline overflow-hidden">
-        <div className="absolute inset-0 flex items-center justify-center">
-          <TemplatePreview template={template} />
-        </div>
-        <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+    <div className="bg-surface-card border border-hairline rounded-lg p-4 flex flex-col hover:bg-surface-cream-strong/20 transition-colors">
+      <div className="relative aspect-[3/4] bg-canvas mb-4 rounded-md border border-hairline overflow-hidden flex items-center justify-center">
+        <TemplatePreview template={template} />
       </div>
 
       {editing ? (
@@ -231,18 +213,18 @@ function TemplateCard({
               if (e.key === "Escape") onCancelEdit()
             }}
             autoFocus
-            className="w-full px-3 py-2 border-2 border-surface-cream-strong bg-canvas text-body-md focus:border-primary focus:ring-0"
+            className="w-full px-3 py-2 border border-hairline bg-canvas rounded-md text-body-md text-ink focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none"
           />
           <div className="flex gap-2">
             <button
               onClick={onSaveEdit}
-              className="flex-1 px-3 py-1.5 bg-primary text-on-primary text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all"
+              className="flex-1 px-3 py-1.5 rounded-md bg-primary text-on-primary text-button font-medium hover:bg-primary-active active:scale-[0.97] transition-all"
             >
               Save
             </button>
             <button
               onClick={onCancelEdit}
-              className="flex-1 px-3 py-1.5 border-2 border-hairline bg-surface-soft text-button text-ink hover:bg-surface-cream-strong active:scale-[0.98] transition-all"
+              className="flex-1 px-3 py-1.5 rounded-md border border-hairline bg-surface-soft text-button text-ink hover:bg-surface-cream-strong active:scale-[0.98] transition-all"
             >
               Cancel
             </button>
@@ -250,11 +232,11 @@ function TemplateCard({
         </div>
       ) : (
         <>
-          <div className="flex items-start justify-between mb-2">
-            <h3 className="text-title-md font-medium text-ink">{template.name}</h3>
-            <span className="text-[10px] font-mono bg-canvas px-2 py-1 uppercase border border-hairline text-muted">V.1.0</span>
+          <div className="flex items-start justify-between mb-1">
+            <h3 className="text-title-md font-medium text-ink truncate">{template.name}</h3>
+            <span className="text-[10px] font-mono bg-canvas px-2 py-0.5 rounded border border-hairline text-muted shrink-0">V.1.0</span>
           </div>
-          <p className="text-caption text-muted mb-4">
+          <p className="text-caption text-muted mb-3">
             {template.bubbleTemplatePath && template.filledTemplatePath
               ? "Bubble + Filled"
               : template.bubbleTemplatePath
@@ -269,32 +251,29 @@ function TemplateCard({
       )}
 
       {!editing && (
-        <div className="mt-auto pt-4 border-t-2 border-surface-cream-strong flex justify-between items-center">
-          <div className="flex gap-2">
+        <div className="mt-auto pt-3 border-t border-hairline flex justify-between items-center">
+          <div className="flex gap-1">
             <button
               onClick={onStartEdit}
-              className="p-1.5 text-muted hover:text-primary hover:bg-primary/5 rounded transition-all"
+              className="p-1.5 rounded-md text-muted hover:text-primary hover:bg-primary/5 transition-all"
               title="Edit name"
             >
               <span className="material-symbols-outlined text-[18px]">edit</span>
             </button>
             <button
               onClick={onDelete}
-              className="p-1.5 text-muted hover:text-error hover:bg-error/5 rounded transition-all"
+              className="p-1.5 rounded-md text-muted hover:text-error hover:bg-error/5 transition-all"
               title="Delete"
             >
               <span className="material-symbols-outlined text-[18px]">delete</span>
             </button>
           </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={onUse}
-              className="text-caption text-primary hover:underline font-medium"
-            >
-              Use in job
-            </button>
-            <span className="text-[10px] font-mono text-success uppercase">{status}</span>
-          </div>
+          <button
+            onClick={onUse}
+            className="px-3 py-1.5 rounded-md bg-primary/10 text-primary text-caption font-medium hover:bg-primary/20 active:scale-[0.97] transition-all"
+          >
+            Use in Job
+          </button>
         </div>
       )}
     </div>
@@ -328,7 +307,7 @@ function TemplatePreview({ template }: { template: TemplateEntry }) {
   if (!src) {
     return (
       <div className="flex flex-col items-center text-muted-soft">
-        <span className="material-symbols-outlined text-4xl mb-2">image</span>
+        <span className="material-symbols-outlined text-3xl mb-1">image</span>
         <span className="text-[10px] font-mono uppercase">No Preview</span>
       </div>
     )
@@ -472,53 +451,44 @@ function AddTemplatePanel({ open, onClose }: { open: boolean; onClose: () => voi
 
   return (
     <div className="fixed inset-0 z-50">
-      <div
-        className="absolute inset-0 bg-surface-dark/40 backdrop-blur-sm"
-        onClick={onClose}
-      />
-      <div className="absolute right-0 top-0 bottom-0 w-full max-w-lg bg-surface-card shadow-2xl flex flex-col">
-        <div className="p-8 border-b-2 border-surface-cream-strong flex justify-between items-center bg-canvas">
+      <div className="absolute inset-0 bg-surface-dark/40 backdrop-blur-sm" onClick={onClose} />
+      <div className="absolute right-0 top-0 bottom-0 w-full max-w-md bg-surface-card shadow-2xl flex flex-col">
+        <div className="p-5 border-b border-hairline flex justify-between items-center bg-canvas">
           <div>
-            <h2 className="text-display-sm font-serif text-ink">New Template</h2>
-            <p className="text-caption text-muted mt-1">Define extraction parameters</p>
+            <h2 className="text-title-lg font-medium text-ink">New Template</h2>
+            <p className="text-caption text-muted">Define extraction parameters</p>
           </div>
-          <button
-            onClick={onClose}
-            className="material-symbols-outlined p-2 hover:bg-surface-soft rounded transition-colors"
-          >
-            close
+          <button onClick={onClose} className="p-2 text-muted hover:text-ink hover:bg-surface-soft rounded-md transition-colors">
+            <span className="material-symbols-outlined">close</span>
           </button>
         </div>
 
-        <div className="flex-1 overflow-y-auto p-8 space-y-8 custom-scrollbar">
-          <div className="space-y-2">
-            <label className="block text-caption-uppercase text-muted uppercase tracking-wider">Template Name</label>
+        <div className="flex-1 overflow-y-auto p-5 space-y-5 custom-scrollbar">
+          <Field label="Template Name">
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g. Q4 Performance Survey"
-              className="w-full border-2 border-surface-cream-strong p-3 text-body-md focus:border-primary focus:ring-0 bg-surface-card"
+              className="w-full bg-canvas border border-hairline rounded-md px-3 py-2 text-body-md text-ink focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none transition-all"
             />
-          </div>
+          </Field>
 
-          <div className="space-y-2">
-            <label className="block text-caption-uppercase text-muted uppercase tracking-wider">Reference Blank Image</label>
+          <div className="space-y-1.5">
+            <label className="text-caption text-muted font-medium">Reference Blank Image</label>
             <button
               onClick={() => selectFile("image/png,image/jpeg", setTemplateFile)}
-              className={`w-full border-2 border-dashed border-surface-cream-strong p-12 text-center hover:bg-surface-soft transition-colors ${templateFile ? "bg-primary/5 border-primary/30" : "bg-canvas"}`}
+              className={`w-full border border-dashed border-hairline rounded-lg p-8 text-center hover:bg-surface-soft transition-colors ${templateFile ? "bg-primary/5 border-primary/30" : "bg-canvas"}`}
             >
-              <span className="material-symbols-outlined text-4xl text-muted mb-4 block">upload_file</span>
-              <p className="text-body-md text-ink">
-                {templateFile ? templateFile.name : "Drop blank scan or browse"}
-              </p>
-              {!templateFile && <p className="text-[10px] font-mono text-muted mt-2">MAX 10MB • PNG, JPG</p>}
+              <span className="material-symbols-outlined text-3xl text-muted mb-2 block">upload_file</span>
+              <p className="text-body-sm text-ink">{templateFile ? templateFile.name : "Drop blank scan or browse"}</p>
+              {!templateFile && <p className="text-[10px] font-mono text-muted mt-1">MAX 10MB • PNG, JPG</p>}
             </button>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-1.5">
             <div className="flex justify-between items-center">
-              <label className="block text-caption-uppercase text-muted uppercase tracking-wider">JSON Configuration</label>
+              <label className="text-caption text-muted font-medium">JSON Configuration</label>
               <button
                 onClick={() => selectFile("application/json", handleMetadataFile)}
                 className="text-[10px] font-mono text-primary hover:underline uppercase"
@@ -526,66 +496,49 @@ function AddTemplatePanel({ open, onClose }: { open: boolean; onClose: () => voi
                 Upload .JSON
               </button>
             </div>
-            <div className="relative group">
-              <textarea
-                value={metadataText}
-                onChange={(e) => setMetadataText(e.target.value)}
-                placeholder='{
+            <textarea
+              value={metadataText}
+              onChange={(e) => setMetadataText(e.target.value)}
+              placeholder='{
   "template_id": "auto_gen",
   "fields": [
     { "id": "q1", "type": "bubble", "coords": [120, 450] }
   ]
 }'
-                rows={10}
-                className="w-full border-2 border-surface-cream-strong p-4 font-mono text-code bg-surface-dark text-on-dark focus:border-primary focus:ring-0 custom-scrollbar"
-              />
-              <div className="absolute top-2 right-2 flex gap-2">
-                <span className="material-symbols-outlined text-xs text-on-dark-soft cursor-help" title="Valid JSON required">info</span>
-              </div>
-            </div>
+              rows={8}
+              className="w-full border border-hairline rounded-md p-3 font-mono text-code bg-surface-dark text-on-dark focus:border-primary focus:ring-1 focus:ring-primary/20 outline-none custom-scrollbar"
+            />
           </div>
 
-          <div className="grid grid-cols-2 gap-4">
-            <button
+          <div className="grid grid-cols-2 gap-3">
+            <FileChip
+              label="Bubble Template"
+              filename={bubbleTemplateFile?.name}
               onClick={() => selectFile("image/png,image/jpeg", setBubbleTemplateFile)}
-              className={`border-2 p-4 text-left transition-all ${
-                bubbleTemplateFile
-                  ? "border-primary bg-primary/5"
-                  : "border-surface-cream-strong bg-surface-card hover:bg-surface-soft"
-              }`}
-            >
-              <p className="text-caption font-bold mb-1">Bubble Template</p>
-              <p className="text-[11px] text-muted">{bubbleTemplateFile ? bubbleTemplateFile.name : "Optional clean bubble"}</p>
-            </button>
-            <button
+            />
+            <FileChip
+              label="Filled Bubble"
+              filename={filledTemplateFile?.name}
               onClick={() => selectFile("image/png,image/jpeg", setFilledTemplateFile)}
-              className={`border-2 p-4 text-left transition-all ${
-                filledTemplateFile
-                  ? "border-primary bg-primary/5"
-                  : "border-surface-cream-strong bg-surface-card hover:bg-surface-soft"
-              }`}
-            >
-              <p className="text-caption font-bold mb-1">Filled Bubble</p>
-              <p className="text-[11px] text-muted">{filledTemplateFile ? filledTemplateFile.name : "Optional filled bubble"}</p>
-            </button>
+            />
           </div>
 
           {error && (
-            <div className="text-caption text-error bg-error/10 px-4 py-2 border border-error/20 rounded-md">{error}</div>
+            <div className="text-caption text-error bg-error/10 px-3 py-2 rounded-md border border-error/20">{error}</div>
           )}
         </div>
 
-        <div className="p-8 border-t-2 border-surface-cream-strong bg-canvas flex gap-4">
+        <div className="p-5 border-t border-hairline bg-canvas flex gap-3">
           <button
             onClick={handleSave}
             disabled={saving}
-            className="flex-1 bg-primary text-on-primary text-button font-bold py-4 border-2 border-primary hover:bg-primary-active active:scale-[0.98] transition-all disabled:bg-primary-disabled disabled:text-muted"
+            className="flex-1 bg-primary text-on-primary rounded-md text-button font-medium py-2.5 hover:bg-primary-active active:scale-[0.97] transition-all disabled:bg-primary-disabled disabled:text-muted"
           >
             {saving ? "Saving..." : "Save Template"}
           </button>
           <button
             onClick={onClose}
-            className="flex-1 border-2 border-primary text-primary text-button font-bold py-4 hover:bg-surface-card active:scale-[0.98] transition-all"
+            className="flex-1 border border-hairline bg-surface-soft text-button text-ink rounded-md py-2.5 hover:bg-surface-cream-strong active:scale-[0.98] transition-all"
           >
             Cancel
           </button>
@@ -594,3 +547,38 @@ function AddTemplatePanel({ open, onClose }: { open: boolean; onClose: () => voi
     </div>
   )
 }
+
+function FileChip({ label, filename, onClick }: { label: string; filename?: string; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`border rounded-lg p-3 text-left transition-all ${
+        filename ? "border-primary bg-primary/5" : "border-hairline bg-surface-card hover:bg-surface-soft"
+      }`}
+    >
+      <p className="text-caption font-medium mb-0.5">{label}</p>
+      <p className="text-[11px] text-muted truncate">{filename || "Optional"}</p>
+    </button>
+  )
+}
+
+function Panel({ title, icon, children }: { title: string; icon: string; children: React.ReactNode }) {
+  return (
+    <div className="bg-surface-card border border-hairline rounded-lg p-4">
+      <div className="flex items-center gap-2 mb-4">
+        <span className="material-symbols-outlined text-[18px] text-primary">{icon}</span>
+        <h3 className="text-title-md font-medium text-ink">{title}</h3>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <label className="text-caption text-muted font-medium">{label}</label>
+      {children}
+    </div>
+  )
+}