diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..9bac67e
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,12 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "host39-web",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev", "--", "--port", "3107"],
+      "cwd": "web",
+      "port": 3107
+    }
+  ]
+}
diff --git a/web/next-env.d.ts b/web/next-env.d.ts
new file mode 100644
index 0000000..9edff1c
--- /dev/null
+++ b/web/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/web/src/app/about/page.tsx b/web/src/app/about/page.tsx
new file mode 100644
index 0000000..d4f6a17
--- /dev/null
+++ b/web/src/app/about/page.tsx
@@ -0,0 +1,146 @@
+import Link from "next/link";
+
+const SAMPLE_CARD = {
+  name: "Moon Bakery Orders Agent",
+  description: "Place and track orders at Moon Bakery.",
+  url: "https://moonbakery-orders.aws.example.com",
+  version: "1.0",
+  capabilities: { streaming: false, pushNotifications: false },
+  authentication: { schemes: ["Bearer"] },
+  skills: [
+    { name: "placeOrder", description: "Place a new bakery order" },
+    { name: "trackOrder", description: "Track an existing order status" },
+  ],
+  provider: { organization: "Moon Bakery", url: "https://moonbakery.com" },
+  _meta: {
+    identifier: "urn:ai:domain:moonbakery.com:agent:orders",
+    publicUrl: "https://agentcards.host39.org/moonbakery.com/orders.json",
+    hostedBy: "host39.org",
+  },
+};
+
+export default function AboutPage() {
+  return (
+    <>
+      {/* Hero */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="max-w-3xl">
+          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-line bg-surface-light px-3 py-1 text-xs font-medium uppercase tracking-wide text-ink-weak">
+            Agent Card Hosting
+          </div>
+          <h1 className="font-display text-3xl sm:text-4xl font-semibold text-ink-strong leading-tight tracking-[-0.01em]">
+            host your agents
+            <br />
+            <span className="text-ink-weak">at predictable URLs</span>
+          </h1>
+          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-ink-medium">
+            host39 is a third-party A2A agent card host. Register your identity, create agent cards,
+            and publish them at stable public URLs - no server required.
+          </p>
+          <div className="mt-8 flex flex-wrap gap-3">
+            <Link
+              href="/login"
+              className="inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
+            >
+              Get started free
+            </Link>
+            <Link
+              href="/dashboard"
+              className="inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition"
+            >
+              Go to dashboard
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* How it works */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
+          How it works
+        </p>
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
+          Three steps to publish your agent
+        </h2>
+
+        <div className="grid gap-6 sm:grid-cols-3">
+          {[
+            {
+              step: "01",
+              title: "Register",
+              desc: "Create an account with your email or a domain identity (for businesses). Domain users get URLs like /moonbakery.com/orders.json.",
+            },
+            {
+              step: "02",
+              title: "Create a card",
+              desc: "Fill in your agent name, runtime URL, capabilities, authentication, and skills using our guided form.",
+            },
+            {
+              step: "03",
+              title: "Share the URL",
+              desc: "Your card is live at a stable public URL. Register it with the NANDA Index so resolvers can find your agent by identity.",
+            },
+          ].map((item) => (
+            <article
+              key={item.step}
+              className="bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition flex flex-col h-full gap-3"
+            >
+              <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-brand-200 text-xs font-semibold text-brand-800">
+                {item.step}
+              </span>
+              <h3 className="font-semibold text-ink-strong">{item.title}</h3>
+              <p className="text-sm text-ink leading-relaxed">{item.desc}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      {/* URL patterns */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
+          URL patterns
+        </p>
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
+          Predictable, stable, public
+        </h2>
+
+        <div className="grid gap-6 sm:grid-cols-2">
+          <div className="rounded-card border border-line-strong bg-brand-200 p-6 shadow-card">
+            <p className="text-xs font-bold uppercase tracking-wide text-brand-800">Business / Domain</p>
+            <code className="mt-3 block rounded-control border border-line bg-surface-light p-4 font-mono text-sm text-brand-800">
+              /moonbakery.com/orders.json
+            </code>
+            <p className="mt-3 text-sm leading-relaxed text-ink-medium">
+              Register with a domain identity to get clean, branded URLs for your business agents.
+            </p>
+          </div>
+          <div className="rounded-card border border-line-strong bg-accent-teal p-6 shadow-card">
+            <p className="text-xs font-bold uppercase tracking-wide text-accent-teal-ink">Personal / Email</p>
+            <code className="mt-3 block rounded-control border border-line bg-surface-light p-4 font-mono text-sm text-accent-teal-ink">
+              /personal/john@hotmail.com/card.json
+            </code>
+            <p className="mt-3 text-sm leading-relaxed text-ink-medium">
+              Register with your email for personal agent cards - great for developers and individuals.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Sample agent card */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
+          A2A Agent Card format
+        </p>
+        <h2 className="mb-8 font-display text-2xl font-bold text-ink-strong leading-tight">
+          Standard JSON, served instantly
+        </h2>
+
+        <div className="overflow-x-auto rounded-card border border-line bg-brand-800 p-6 shadow-card">
+          <pre className="font-mono text-sm leading-6 text-surface-light">
+            {JSON.stringify(SAMPLE_CARD, null, 2)}
+          </pre>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/web/src/app/dashboard/cards/[id]/page.tsx b/web/src/app/dashboard/cards/[id]/page.tsx
index 716c8b8..892b9ce 100644
--- a/web/src/app/dashboard/cards/[id]/page.tsx
+++ b/web/src/app/dashboard/cards/[id]/page.tsx
@@ -8,9 +8,26 @@ import type { AgentCard, Me } from "@/lib/api";
 import { clearAuthToken } from "@/lib/auth";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 
+// ── Shared primitives (outshift utility classes) ──────────────────────────────
+
+const infoCardClass =
+  "bg-surface-light rounded-card border border-line p-6 shadow-card";
+
+const inputClass =
+  "w-full h-10 rounded-control border-2 border-line bg-surface-light px-3 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors";
+
+const textareaClass =
+  "w-full rounded-control border-2 border-line bg-surface-light px-3 py-2 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors resize-none";
+
+const primaryBtnClass =
+  "inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition disabled:opacity-60";
+
+const secondaryBtnClass =
+  "inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition";
+
 function FieldLabel({ children }: { children: React.ReactNode }) {
   return (
-    <p className="mb-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+    <p className="mb-1 text-xs font-bold uppercase tracking-wide text-ink-weak">
       {children}
     </p>
   );
@@ -167,7 +184,7 @@ export default function EditCardPage() {
   if (loading) {
     return (
       <PageShell title="Edit card" description="Loading…">
-        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm text-sm text-slate-400">
+        <div className={`${infoCardClass} text-sm text-ink-weak`}>
           Loading…
         </div>
       </PageShell>
@@ -177,7 +194,7 @@ export default function EditCardPage() {
   if (!card || !me) {
     return (
       <PageShell title="Edit card" description="">
-        <div className="rounded-3xl border border-rose-200 bg-rose-50 p-4 text-rose-700">
+        <div className="rounded-card border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] p-4 text-[color:var(--color-danger)]">
           {error ?? "Card not found."}
         </div>
       </PageShell>
@@ -191,9 +208,6 @@ export default function EditCardPage() {
     me.handle
   );
 
-  const inputClass =
-    "w-full rounded-xl border border-black/10 px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300";
-
   return (
     <PageShell
       title={`Edit: ${card.display_name}`}
@@ -202,17 +216,17 @@ export default function EditCardPage() {
       <div className="max-w-lg space-y-6">
         {/* Public URL banner */}
         {isPublic ? (
-          <div className="rounded-3xl border border-black/10 bg-white p-5 shadow-sm">
-            <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+          <div className="rounded-card border border-line-strong bg-brand-200 p-5 shadow-card">
+            <p className="mb-2 text-xs font-bold uppercase tracking-wide text-brand-800">
               Public URL
             </p>
             <div className="flex items-center gap-2">
-              <code className="min-w-0 flex-1 truncate font-mono text-sm text-slate-800">
+              <code className="min-w-0 flex-1 truncate font-mono text-sm text-brand-800">
                 {publicUrl}
               </code>
               <button
                 onClick={() => copyUrl(publicUrl)}
-                className="shrink-0 rounded-lg border border-black/10 px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-50"
+                className="shrink-0 inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-xs font-medium text-ink hover:border-line-strong transition"
               >
                 {copiedUrl ? "Copied!" : "Copy"}
               </button>
@@ -220,25 +234,25 @@ export default function EditCardPage() {
                 href={publicUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="shrink-0 rounded-lg border border-black/10 px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-50"
+                className="shrink-0 inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-xs font-medium text-ink hover:border-line-strong transition"
               >
                 Open
               </a>
             </div>
           </div>
         ) : (
-          <div className="rounded-3xl border border-amber-200 bg-amber-50 p-5">
-            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-amber-600">Private</p>
-            <p className="mt-1 text-sm text-amber-700">This card is not publicly accessible. Enable &ldquo;Public&rdquo; below to publish it.</p>
+          <div className="rounded-card border border-[#fdeccc] bg-[#fdeccc] p-5">
+            <p className="text-xs font-bold uppercase tracking-wide text-[#8a5a06]">Private</p>
+            <p className="mt-1 text-sm text-[#8a5a06]">This card is not publicly accessible. Enable &ldquo;Public&rdquo; below to publish it.</p>
           </div>
         )}
 
         {/* Edit form */}
-        <form onSubmit={onSave} className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm space-y-5">
+        <form onSubmit={onSave} className={`${infoCardClass} space-y-5`}>
 
           {/* Basic */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-slate-950">Basic info</h2>
+            <h2 className="mb-4 text-sm font-semibold text-ink-strong">Basic info</h2>
             <div className="space-y-4">
               <div>
                 <FieldLabel>Slug *</FieldLabel>
@@ -267,17 +281,17 @@ export default function EditCardPage() {
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
                   rows={3}
-                  className={`${inputClass} resize-none`}
+                  className={textareaClass}
                 />
               </div>
             </div>
           </div>
 
-          <div className="border-t border-black/5" />
+          <div className="border-t border-line" />
 
           {/* Runtime */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-slate-950">Runtime</h2>
+            <h2 className="mb-4 text-sm font-semibold text-ink-strong">Runtime</h2>
             <div className="space-y-4">
               <div>
                 <FieldLabel>Runtime URL</FieldLabel>
@@ -319,23 +333,23 @@ export default function EditCardPage() {
             </div>
           </div>
 
-          <div className="border-t border-black/5" />
+          <div className="border-t border-line" />
 
           {/* Capabilities */}
           <div>
-            <h2 className="mb-4 text-sm font-semibold text-slate-950">Capabilities & Auth</h2>
+            <h2 className="mb-4 text-sm font-semibold text-ink-strong">Capabilities & Auth</h2>
             <div className="space-y-4">
-              <div className="rounded-xl border border-black/10 p-4 space-y-2">
+              <div className="rounded-control border border-line p-4 space-y-2">
                 <label className="flex items-center gap-3 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={isPublic}
                     onChange={(e) => setIsPublic(e.target.checked)}
-                    className="accent-slate-950"
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
                   />
                   <div>
-                    <span className="text-sm text-slate-700">Public</span>
-                    <p className="text-xs text-slate-400">Accessible at the public URL. Uncheck to make private.</p>
+                    <span className="text-sm text-ink">Public</span>
+                    <p className="text-xs text-ink-weak">Accessible at the public URL. Uncheck to make private.</p>
                   </div>
                 </label>
                 <label className="flex items-center gap-3 cursor-pointer">
@@ -343,18 +357,18 @@ export default function EditCardPage() {
                     type="checkbox"
                     checked={streaming}
                     onChange={(e) => setStreaming(e.target.checked)}
-                    className="accent-slate-950"
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
                   />
-                  <span className="text-sm text-slate-700">Streaming</span>
+                  <span className="text-sm text-ink">Streaming</span>
                 </label>
                 <label className="flex items-center gap-3 cursor-pointer">
                   <input
                     type="checkbox"
                     checked={pushNotifications}
                     onChange={(e) => setPushNotifications(e.target.checked)}
-                    className="accent-slate-950"
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
                   />
-                  <span className="text-sm text-slate-700">Push notifications</span>
+                  <span className="text-sm text-ink">Push notifications</span>
                 </label>
               </div>
 
@@ -363,7 +377,7 @@ export default function EditCardPage() {
                 <select
                   value={authScheme}
                   onChange={(e) => setAuthScheme(e.target.value)}
-                  className={`${inputClass} bg-white`}
+                  className={inputClass}
                 >
                   <option value="none">None</option>
                   <option value="Bearer">Bearer token</option>
@@ -378,7 +392,7 @@ export default function EditCardPage() {
                   value={skillsJson}
                   onChange={(e) => setSkillsJson(e.target.value)}
                   rows={7}
-                  className={`${inputClass} font-mono resize-none text-xs`}
+                  className={`${textareaClass} font-mono text-xs`}
                   placeholder='[{"name": "mySkill", "description": "What it does"}]'
                 />
               </div>
@@ -388,7 +402,7 @@ export default function EditCardPage() {
                 <select
                   value={status}
                   onChange={(e) => setStatus(e.target.value as "active" | "inactive")}
-                  className={`${inputClass} bg-white`}
+                  className={inputClass}
                 >
                   <option value="active">Active</option>
                   <option value="inactive">Inactive</option>
@@ -398,12 +412,12 @@ export default function EditCardPage() {
           </div>
 
           {error && (
-            <p className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm text-rose-700">
+            <p className="rounded-control border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
               {error}
             </p>
           )}
           {success && (
-            <p className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-2.5 text-sm text-emerald-700">
+            <p className="rounded-control border border-accent-teal bg-accent-teal px-4 py-2.5 text-sm text-accent-teal-ink">
               {success}
             </p>
           )}
@@ -412,14 +426,14 @@ export default function EditCardPage() {
             <button
               type="button"
               onClick={() => router.push("/dashboard")}
-              className="rounded-xl border border-black/10 px-4 py-2 text-sm text-slate-600 hover:bg-slate-50"
+              className={secondaryBtnClass}
             >
               Cancel
             </button>
             <button
               type="submit"
               disabled={saving}
-              className="rounded-xl bg-slate-950 px-6 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
+              className={primaryBtnClass}
             >
               {saving ? "Saving…" : "Save changes"}
             </button>
@@ -427,32 +441,32 @@ export default function EditCardPage() {
         </form>
 
         {/* Delete zone */}
-        <div className="rounded-3xl border border-rose-200 bg-rose-50 p-5">
-          <h3 className="text-sm font-semibold text-rose-800">Danger zone</h3>
-          <p className="mt-1 text-sm text-rose-600">
+        <div className="rounded-card border border-[color:var(--color-danger)] bg-[color:var(--color-danger-soft)] p-5">
+          <h3 className="text-sm font-semibold text-[color:var(--color-danger)]">Danger zone</h3>
+          <p className="mt-1 text-sm text-[color:var(--color-danger)]/85">
             Permanently delete this agent card. This action cannot be undone.
           </p>
           <div className="mt-4">
             {!confirmDelete ? (
               <button
                 onClick={() => setConfirmDelete(true)}
-                className="rounded-xl border border-rose-300 bg-white px-4 py-2 text-sm font-medium text-rose-700 hover:bg-rose-50"
+                className="inline-flex items-center justify-center h-9 rounded-control border-2 border-[color:var(--color-danger)] bg-surface-light px-3 text-sm font-medium text-[color:var(--color-danger)] hover:bg-[color:var(--color-danger-soft)] transition"
               >
                 Delete card
               </button>
             ) : (
-              <div className="flex items-center gap-3">
-                <p className="text-sm text-rose-700 font-medium">Are you sure?</p>
+              <div className="flex flex-wrap items-center gap-3">
+                <p className="text-sm font-medium text-[color:var(--color-danger)]">Are you sure?</p>
                 <button
                   onClick={onDelete}
                   disabled={deleting}
-                  className="rounded-xl bg-rose-600 px-4 py-2 text-sm font-medium text-white hover:bg-rose-700 disabled:opacity-60"
+                  className="inline-flex items-center justify-center h-9 rounded-control bg-[color:var(--color-danger)] px-3 text-sm font-medium text-white hover:opacity-90 disabled:opacity-60 transition"
                 >
                   {deleting ? "Deleting…" : "Yes, delete"}
                 </button>
                 <button
                   onClick={() => setConfirmDelete(false)}
-                  className="rounded-xl border border-black/10 px-4 py-2 text-sm text-slate-600 hover:bg-white"
+                  className={secondaryBtnClass}
                 >
                   Cancel
                 </button>
diff --git a/web/src/app/dashboard/cards/new/page.tsx b/web/src/app/dashboard/cards/new/page.tsx
index b283c82..f2e0393 100644
--- a/web/src/app/dashboard/cards/new/page.tsx
+++ b/web/src/app/dashboard/cards/new/page.tsx
@@ -26,6 +26,26 @@ interface FormState {
   is_public: boolean;
 }
 
+// ── Shared primitives (outshift utility classes) ──────────────────────────────
+
+const infoCardClass =
+  "bg-surface-light rounded-card border border-line p-6 shadow-card";
+
+const inputClass =
+  "w-full h-10 rounded-control border-2 border-line bg-surface-light px-3 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors";
+
+const textareaClass =
+  "w-full rounded-control border-2 border-line bg-surface-light px-3 py-2 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors resize-none";
+
+const primaryBtnClass =
+  "inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition disabled:opacity-60";
+
+const secondaryBtnClass =
+  "inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition";
+
+const microLabelClass =
+  "mb-1 block text-xs font-bold uppercase tracking-wide text-ink-weak";
+
 // ── Defaults per identity type ────────────────────────────────────────────────
 
 function defaultsForMe(me: Me): Partial<FormState> {
@@ -50,15 +70,15 @@ function ctx(me: Me | null) {
     isSmb,
     slugPlaceholder:    isSmb ? "orders"                          : "agent",
     slugHint:           isSmb
-      ? 'Short name for this specific agent — e.g. "orders", "support", "tracking".'
-      : 'A simple identifier for your card — e.g. "agent", "assistant".',
+      ? 'Short name for this specific agent - e.g. "orders", "support", "tracking".'
+      : 'A simple identifier for your card - e.g. "agent", "assistant".',
     runtimePlaceholder: isSmb ? "https://my-agent.aws.example.com" : "https://my-agent.railway.app",
     runtimeHint:        isSmb
       ? "The A2A endpoint where your business agent runs (AWS, Azure, GCP, etc.)."
       : "Where your personal agent is hosted (Railway, Vercel, Render, etc.). Optional.",
     providerHint:       isSmb
-      ? "Your company name and website — pre-filled from your registered domain."
-      : "Optional — leave blank if you are the provider.",
+      ? "Your company name and website - pre-filled from your registered domain."
+      : "Optional - leave blank if you are the provider.",
     authHint:           isSmb
       ? "How callers must authenticate to use this agent."
       : "Personal agents usually require user consent or no auth for public actions.",
@@ -79,27 +99,27 @@ function Field({
   mono?: boolean; textarea?: boolean; optional?: boolean;
 }) {
   const base = cn(
-    "w-full rounded-2xl border px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300 bg-white transition",
+    textarea ? textareaClass : inputClass,
     mono && "font-mono",
-    error ? "border-rose-300 bg-rose-50/40" : "border-black/10",
+    error && "border-[color:var(--color-danger)] focus:border-[color:var(--color-danger)]",
   );
   return (
     <label className="block">
-      <span className="mb-1 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
+      <span className={microLabelClass}>
         {label}
-        {optional && <span className="ml-1 font-normal normal-case tracking-normal text-slate-400">(optional)</span>}
+        {optional && <span className="ml-1 font-normal normal-case tracking-normal text-ink-weak">(optional)</span>}
       </span>
       {textarea ? (
         <textarea value={value} onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder} rows={4} className={cn(base, "resize-none")} />
+          placeholder={placeholder} rows={4} className={base} />
       ) : (
         <input type={type} value={value} onChange={(e) => onChange(e.target.value)}
           placeholder={placeholder} className={base} />
       )}
       {error
-        ? <p className="mt-1 text-[11px] text-rose-500">{error}</p>
+        ? <p className="mt-1 text-[11px] text-[color:var(--color-danger)]">{error}</p>
         : hint
-          ? <p className="mt-1 text-[11px] text-slate-400">{hint}</p>
+          ? <p className="mt-1 text-[11px] text-ink-weak">{hint}</p>
           : null}
     </label>
   );
@@ -115,27 +135,33 @@ function IdentityBadge({ me, slug }: { me: Me; slug: string }) {
 
   return (
     <div className={cn(
-      "rounded-2xl border px-4 py-3 flex items-start gap-3",
+      "rounded-card border px-4 py-3 flex items-start gap-3",
       isSmb
-        ? "border-indigo-100 bg-indigo-50"
-        : "border-violet-100 bg-violet-50",
+        ? "border-line-strong bg-brand-200"
+        : "border-line-strong bg-accent-teal",
     )}>
       <div className={cn(
-        "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold",
-        isSmb ? "bg-indigo-600 text-white" : "bg-violet-600 text-white",
+        "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white",
+        isSmb ? "bg-brand-500" : "bg-accent-teal-ink",
       )}>
         {isSmb ? "B" : "P"}
       </div>
       <div className="min-w-0">
+        <p className={cn(
+          "text-[10px] font-bold uppercase tracking-wide",
+          isSmb ? "text-brand-800" : "text-accent-teal-ink",
+        )}>
+          {isSmb ? "Business" : "Personal"}
+        </p>
         <p className={cn(
           "text-xs font-semibold",
-          isSmb ? "text-indigo-800" : "text-violet-800",
+          isSmb ? "text-brand-800" : "text-accent-teal-ink",
         )}>
-          {isSmb ? `Business · ${me.domain}` : `Personal · @${me.handle}`}
+          {isSmb ? me.domain : `@${me.handle}`}
         </p>
         <p className={cn(
           "mt-0.5 break-all font-mono text-[11px]",
-          isSmb ? "text-indigo-600" : "text-violet-600",
+          isSmb ? "text-brand-800/80" : "text-accent-teal-ink/80",
         )}>
           {url}
         </p>
@@ -156,19 +182,22 @@ function StepIndicator({ current }: { current: Step }) {
           <div className={cn(
             "flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold transition",
             s === current
-              ? "bg-slate-950 text-white shadow-sm"
+              ? "bg-brand-500 text-white"
               : s < current
-                ? "bg-emerald-100 text-emerald-700"
-                : "border border-black/10 bg-white text-slate-400",
+                ? "bg-accent-teal text-accent-teal-ink"
+                : "border border-line bg-surface-light text-ink-weak",
           )}>
             {s < current ? "✓" : s}
           </div>
           {i < 3 && (
-            <div className={cn("h-px w-8 transition", s < current ? "bg-emerald-300" : "bg-black/10")} />
+            <div className={cn(
+              "h-px w-8 transition",
+              s < current ? "bg-accent-teal-ink" : "bg-line"
+            )} />
           )}
         </div>
       ))}
-      <span className="ml-2 text-xs font-medium text-slate-500">
+      <span className="ml-2 text-xs font-medium text-ink-medium">
         {STEP_LABELS[(current - 1)]}
       </span>
     </div>
@@ -300,10 +329,10 @@ export default function NewCardPage() {
     >
       <div className="max-w-lg space-y-5">
 
-        {/* Identity badge — always visible */}
+        {/* Identity badge - always visible */}
         {me && <IdentityBadge me={me} slug={form.slug} />}
 
-        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
+        <div className={infoCardClass}>
           <StepIndicator current={step} />
 
           {/* ── Step 1: Basic ── */}
@@ -389,50 +418,53 @@ export default function NewCardPage() {
           {step === 3 && (
             <div className="space-y-5">
               <div>
-                <span className="mb-1 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
+                <span className={microLabelClass}>
                   Capabilities
                 </span>
-                <div className="space-y-2 rounded-2xl border border-black/10 p-4">
+                <div className="space-y-2 rounded-control border border-line p-4">
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.streaming}
-                      onChange={(e) => set("streaming", e.target.checked)} className="accent-slate-950" />
+                      onChange={(e) => set("streaming", e.target.checked)}
+                      className="rounded border-line-strong text-brand-500 focus:ring-brand-500" />
                     <div>
-                      <span className="text-sm text-slate-700">Streaming</span>
-                      <p className="text-[11px] text-slate-400">Agent streams responses incrementally.</p>
+                      <span className="text-sm text-ink">Streaming</span>
+                      <p className="text-[11px] text-ink-weak">Agent streams responses incrementally.</p>
                     </div>
                   </label>
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.pushNotifications}
-                      onChange={(e) => set("pushNotifications", e.target.checked)} className="accent-slate-950" />
+                      onChange={(e) => set("pushNotifications", e.target.checked)}
+                      className="rounded border-line-strong text-brand-500 focus:ring-brand-500" />
                     <div>
-                      <span className="text-sm text-slate-700">Push notifications</span>
-                      <p className="text-[11px] text-slate-400">Agent can push updates to callers.</p>
+                      <span className="text-sm text-ink">Push notifications</span>
+                      <p className="text-[11px] text-ink-weak">Agent can push updates to callers.</p>
                     </div>
                   </label>
                   <label className="flex cursor-pointer items-center gap-3">
                     <input type="checkbox" checked={form.is_public}
-                      onChange={(e) => set("is_public", e.target.checked)} className="accent-slate-950" />
+                      onChange={(e) => set("is_public", e.target.checked)}
+                      className="rounded border-line-strong text-brand-500 focus:ring-brand-500" />
                     <div>
-                      <span className="text-sm text-slate-700">Public</span>
-                      <p className="text-[11px] text-slate-400">Accessible at the public URL. Uncheck to keep private.</p>
+                      <span className="text-sm text-ink">Public</span>
+                      <p className="text-[11px] text-ink-weak">Accessible at the public URL. Uncheck to keep private.</p>
                     </div>
                   </label>
                 </div>
               </div>
 
               <div>
-                <span className="mb-1 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
+                <span className={microLabelClass}>
                   Authentication scheme
                 </span>
                 <select value={form.authScheme} onChange={(e) => set("authScheme", e.target.value)}
-                  className="w-full rounded-2xl border border-black/10 bg-white px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300">
-                  <option value="none">None — public access</option>
+                  className={inputClass}>
+                  <option value="none">None - public access</option>
                   <option value="Bearer">Bearer token</option>
                   <option value="OAuth2">OAuth 2.0</option>
                   <option value="ApiKey">API key</option>
                   {!c.isSmb && <option value="user_consent">User consent required</option>}
                 </select>
-                <p className="mt-1 text-[11px] text-slate-400">{c.authHint}</p>
+                <p className="mt-1 text-[11px] text-ink-weak">{c.authHint}</p>
               </div>
 
               <Field
@@ -453,18 +485,20 @@ export default function NewCardPage() {
             <div className="space-y-4">
               {/* URL highlight */}
               <div className={cn(
-                "rounded-2xl border p-4",
-                c.isSmb ? "border-indigo-100 bg-indigo-50" : "border-violet-100 bg-violet-50",
+                "rounded-card border p-4",
+                c.isSmb
+                  ? "border-line-strong bg-brand-200"
+                  : "border-line-strong bg-accent-teal",
               )}>
                 <p className={cn(
-                  "mb-1 text-[10px] font-semibold uppercase tracking-[0.18em]",
-                  c.isSmb ? "text-indigo-500" : "text-violet-500",
+                  "mb-1 text-[10px] font-bold uppercase tracking-wide",
+                  c.isSmb ? "text-brand-800" : "text-accent-teal-ink",
                 )}>
                   Public URL
                 </p>
                 <code className={cn(
                   "break-all font-mono text-sm",
-                  c.isSmb ? "text-indigo-800" : "text-violet-800",
+                  c.isSmb ? "text-brand-800" : "text-accent-teal-ink",
                 )}>
                   {getPublicUrl(
                     me.identity_type,
@@ -475,14 +509,14 @@ export default function NewCardPage() {
                 </code>
               </div>
 
-              <dl className="divide-y divide-black/5">
+              <dl className="divide-y divide-line">
                 {[
                   { label: "Slug",               value: form.slug,                           mono: true  },
                   { label: "Display name",        value: form.display_name,                   mono: false },
-                  { label: "Description",         value: form.description || "—",             mono: false },
-                  { label: "Runtime URL",         value: form.runtime_url || "—",             mono: true  },
-                  { label: "Provider",            value: form.provider_name || "—",           mono: false },
-                  { label: "Provider URL",        value: form.provider_url || "—",            mono: true  },
+                  { label: "Description",         value: form.description || "-",             mono: false },
+                  { label: "Runtime URL",         value: form.runtime_url || "-",             mono: true  },
+                  { label: "Provider",            value: form.provider_name || "-",           mono: false },
+                  { label: "Provider URL",        value: form.provider_url || "-",            mono: true  },
                   { label: "Version",             value: form.version,                        mono: true  },
                   { label: "Streaming",           value: form.streaming ? "Yes" : "No",       mono: false },
                   { label: "Push notifications",  value: form.pushNotifications ? "Yes" : "No", mono: false },
@@ -490,16 +524,16 @@ export default function NewCardPage() {
                   { label: "Visibility",          value: form.is_public ? "Public" : "Private", mono: false },
                 ].map(({ label, value, mono }) => (
                   <div key={label} className="flex items-baseline justify-between gap-4 py-2.5">
-                    <dt className="shrink-0 text-xs text-slate-400">{label}</dt>
-                    <dd className={cn("text-right text-sm text-slate-800", mono && "font-mono")}>{value}</dd>
+                    <dt className="shrink-0 text-xs text-ink-weak">{label}</dt>
+                    <dd className={cn("text-right text-sm text-ink", mono && "font-mono")}>{value}</dd>
                   </div>
                 ))}
               </dl>
 
               {form.skillsJson.trim() && (
-                <div className="rounded-2xl border border-black/5 bg-slate-50 p-3">
-                  <p className="mb-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-400">Skills</p>
-                  <pre className="overflow-x-auto font-mono text-xs text-slate-700">{form.skillsJson}</pre>
+                <div className="rounded-control border border-line bg-surface-strong p-3">
+                  <p className="mb-1 text-[10px] font-bold uppercase tracking-wide text-ink-weak">Skills</p>
+                  <pre className="overflow-x-auto font-mono text-xs text-ink">{form.skillsJson}</pre>
                 </div>
               )}
             </div>
@@ -507,7 +541,7 @@ export default function NewCardPage() {
 
           {/* Error */}
           {error && (
-            <p className="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm text-rose-700">
+            <p className="mt-4 rounded-control border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
               {error}
             </p>
           )}
@@ -515,8 +549,7 @@ export default function NewCardPage() {
           {/* Navigation */}
           <div className="mt-6 flex items-center justify-between">
             {step > 1 ? (
-              <button onClick={prevStep}
-                className="rounded-2xl border border-black/10 px-5 py-2 text-sm text-slate-600 hover:bg-slate-50">
+              <button onClick={prevStep} className={secondaryBtnClass}>
                 ← Back
               </button>
             ) : (
@@ -524,13 +557,11 @@ export default function NewCardPage() {
             )}
 
             {step < 4 ? (
-              <button onClick={nextStep}
-                className="rounded-2xl bg-slate-950 px-6 py-2 text-sm font-medium text-white hover:bg-slate-800">
+              <button onClick={nextStep} className={primaryBtnClass}>
                 Continue →
               </button>
             ) : (
-              <button onClick={onSubmit} disabled={loading}
-                className="rounded-2xl bg-slate-950 px-6 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60">
+              <button onClick={onSubmit} disabled={loading} className={primaryBtnClass}>
                 {loading ? "Creating…" : "Create card"}
               </button>
             )}
diff --git a/web/src/app/dashboard/page.tsx b/web/src/app/dashboard/page.tsx
index e3922f1..cd0fd71 100644
--- a/web/src/app/dashboard/page.tsx
+++ b/web/src/app/dashboard/page.tsx
@@ -9,6 +9,14 @@ import type { Me, AgentCard } from "@/lib/api";
 import { clearAuthToken } from "@/lib/auth";
 import { useRequireAuth } from "@/hooks/useRequireAuth";
 
+// Static info-card pattern (slightly more padding, no hover transform)
+const infoCardClass =
+  "bg-surface-light rounded-card border border-line p-6 shadow-card";
+
+// Outshift exact card pattern (grid item, interactive)
+const gridCardClass =
+  "bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition flex flex-col h-full gap-3";
+
 export default function DashboardPage() {
   useRequireAuth();
   const router = useRouter();
@@ -59,7 +67,7 @@ export default function DashboardPage() {
   if (loading) {
     return (
       <PageShell title="Dashboard" description="Loading your agent cards…">
-        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm text-sm text-slate-400">
+        <div className={`${infoCardClass} text-sm text-ink-weak`}>
           Loading…
         </div>
       </PageShell>
@@ -69,13 +77,18 @@ export default function DashboardPage() {
   if (error || !me) {
     return (
       <PageShell title="Dashboard" description="">
-        <div className="rounded-3xl border border-rose-200 bg-rose-50 p-4 text-rose-700">
+        <div className="rounded-card border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] p-4 text-[color:var(--color-danger)]">
           {error ?? "Something went wrong."}
         </div>
       </PageShell>
     );
   }
 
+  const isDomain = me.identity_type === "domain";
+  const identityPillClass = isDomain
+    ? "bg-brand-200 text-brand-800"
+    : "bg-accent-teal text-accent-teal-ink";
+
   return (
     <PageShell
       title="Dashboard"
@@ -83,22 +96,22 @@ export default function DashboardPage() {
     >
       <div className="space-y-6">
         {/* Profile card */}
-        <div className="flex items-center justify-between rounded-3xl border border-black/10 bg-white p-5 shadow-sm">
+        <div className={`${infoCardClass} flex items-center justify-between`}>
           <div>
-            <p className="font-semibold text-slate-950">{me.display_name ?? me.email}</p>
-            <p className="text-sm text-slate-500">{me.email}</p>
-            <div className="mt-1 flex items-center gap-2">
-              <span className="rounded-full border border-black/10 bg-slate-50 px-2.5 py-0.5 font-mono text-xs text-slate-500">
+            <p className="font-semibold text-ink-strong">{me.display_name ?? me.email}</p>
+            <p className="text-sm text-ink-medium">{me.email}</p>
+            <div className="mt-2 flex flex-wrap items-center gap-2">
+              <span className="inline-flex items-center rounded-full bg-surface-tag px-2.5 py-0.5 font-mono text-xs text-ink">
                 @{me.handle}
               </span>
-              <span className="rounded-full border border-black/10 bg-slate-50 px-2.5 py-0.5 font-mono text-xs text-slate-500">
-                {me.identity_type === "domain" ? `domain: ${me.domain}` : "personal"}
+              <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${identityPillClass}`}>
+                {isDomain ? `Business · ${me.domain}` : "Personal"}
               </span>
             </div>
           </div>
           <button
             onClick={signOut}
-            className="rounded-2xl border border-black/10 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
+            className="inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-sm font-medium text-ink hover:border-line-strong transition"
           >
             Sign out
           </button>
@@ -107,29 +120,31 @@ export default function DashboardPage() {
         {/* Agent cards */}
         <div>
           <div className="mb-3 flex items-center justify-between">
-            <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500">
+            <h2 className="text-xs font-bold uppercase tracking-wide text-ink-weak">
               Agent Cards
             </h2>
             <Link
               href="/dashboard/cards/new"
-              className="rounded-full border border-black/10 bg-white px-4 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50"
+              className="inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
             >
               + New card
             </Link>
           </div>
 
           {cards.length === 0 ? (
-            <div className="rounded-3xl border border-black/10 bg-white p-8 shadow-sm text-center">
-              <p className="text-sm text-slate-400">
-                You have no agent cards yet.{" "}
-                <Link href="/dashboard/cards/new" className="text-slate-700 underline hover:text-slate-950">
-                  Create your first card
-                </Link>
-                .
+            <div className={`${infoCardClass} text-center`}>
+              <p className="text-sm text-ink-medium">
+                You have no agent cards yet.
               </p>
+              <Link
+                href="/dashboard/cards/new"
+                className="mt-4 inline-flex items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
+              >
+                Create your first card
+              </Link>
             </div>
           ) : (
-            <div className="space-y-3">
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
               {cards.map((card) => {
                 const publicUrl = getPublicUrl(
                   me.identity_type,
@@ -138,55 +153,50 @@ export default function DashboardPage() {
                   me.handle
                 );
 
+                const statusClass =
+                  card.status === "active"
+                    ? "bg-accent-teal text-accent-teal-ink"
+                    : "bg-surface-tag text-ink-weak";
+
                 return (
-                  <div
-                    key={card.id}
-                    className="rounded-3xl border border-black/10 bg-white p-5 shadow-sm"
-                  >
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="min-w-0 flex-1">
-                        <div className="flex items-center gap-2">
-                          <p className="font-medium text-slate-950">{card.display_name}</p>
-                          <span className={`rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.18em] ${
-                            card.status === "active"
-                              ? "border border-emerald-200 bg-emerald-50 text-emerald-600"
-                              : "border border-slate-200 bg-slate-50 text-slate-500"
-                          }`}>
-                            {card.status}
-                          </span>
-                          {!card.is_public && (
-                            <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.18em] text-amber-600">
-                              Private
-                            </span>
-                          )}
-                        </div>
-                        <p className="font-mono text-xs text-slate-400">/{card.slug}</p>
-                        {card.description && (
-                          <p className="mt-1 text-sm text-slate-500 line-clamp-1">{card.description}</p>
-                        )}
-
-                        {/* Public URL */}
-                        <div className="mt-3 flex items-center gap-2">
-                          <code className="min-w-0 flex-1 truncate rounded-lg border border-black/5 bg-slate-50 px-3 py-1.5 font-mono text-xs text-slate-600">
-                            {publicUrl}
-                          </code>
-                          <button
-                            onClick={() => copyUrl(publicUrl, card.id)}
-                            className="shrink-0 rounded-lg border border-black/10 bg-white px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-50"
-                          >
-                            {copiedId === card.id ? "Copied!" : "Copy"}
-                          </button>
-                        </div>
-                      </div>
+                  <article key={card.id} className={gridCardClass}>
+                    <div className="flex items-start justify-between gap-2">
+                      <h3 className="font-semibold text-ink-strong truncate">{card.display_name}</h3>
+                      <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${statusClass}`}>
+                        {card.status}
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="font-mono text-xs text-ink-weak">/{card.slug}</span>
+                      {!card.is_public && (
+                        <span className="inline-flex items-center rounded-full bg-[#fdeccc] text-[#8a5a06] px-2.5 py-0.5 text-xs font-semibold">
+                          Private
+                        </span>
+                      )}
+                    </div>
+                    {card.description && (
+                      <p className="text-sm text-ink line-clamp-2 leading-relaxed">{card.description}</p>
+                    )}
 
+                    {/* Public URL */}
+                    <div className="mt-auto flex items-center gap-2">
+                      <code className="min-w-0 flex-1 truncate rounded-control border border-line bg-surface-strong px-3 py-1.5 font-mono text-xs text-ink-medium">
+                        {publicUrl}
+                      </code>
+                      <button
+                        onClick={() => copyUrl(publicUrl, card.id)}
+                        className="shrink-0 inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-xs font-medium text-ink hover:border-line-strong transition"
+                      >
+                        {copiedId === card.id ? "Copied!" : "Copy"}
+                      </button>
                       <Link
                         href={`/dashboard/cards/${card.id}`}
-                        className="shrink-0 rounded-xl border border-black/10 px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-50"
+                        className="shrink-0 inline-flex items-center justify-center h-9 rounded-control border-2 border-line bg-surface-light px-3 text-xs font-medium text-ink hover:border-line-strong transition"
                       >
                         Edit
                       </Link>
                     </div>
-                  </div>
+                  </article>
                 );
               })}
             </div>
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index e67147c..0baddf2 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -1,28 +1,164 @@
 @import "tailwindcss";
 
+@theme inline {
+  /* Outshift surfaces */
+  --color-surface: var(--color-surface);
+  --color-surface-light: var(--color-surface-light);
+  --color-surface-strong: var(--color-surface-strong);
+  --color-surface-tag: var(--color-surface-tag);
+
+  /* Outshift ink (text) */
+  --color-ink: var(--color-ink);
+  --color-ink-strong: var(--color-ink-strong);
+  --color-ink-medium: var(--color-ink-medium);
+  --color-ink-weak: var(--color-ink-weak);
+
+  /* Outshift lines (borders) */
+  --color-line: var(--color-line);
+  --color-line-strong: var(--color-line-strong);
+
+  /* Outshift brand scale */
+  --color-brand-200: var(--color-brand-200);
+  --color-brand-300: var(--color-brand-300);
+  --color-brand-500: var(--color-brand-500);
+  --color-brand-600: var(--color-brand-600);
+  --color-brand-700: var(--color-brand-700);
+  --color-brand-800: var(--color-brand-800);
+
+  /* Accent teal */
+  --color-accent-teal: var(--color-accent-teal);
+  --color-accent-teal-ink: var(--color-accent-teal-ink);
+
+  /* Star gold */
+  --color-star-gold: var(--color-star-gold);
+
+  /* Fonts */
+  --font-sans: var(--font-sans);
+  --font-display: var(--font-display);
+  --font-mono: var(--font-mono);
+
+  /* Radii - only two matter */
+  --radius-card: var(--radius-card);
+  --radius-control: var(--radius-control);
+
+  /* Card shadows (Outshift inlines these in utilities; expose them here) */
+  --shadow-card: 0 4px 4px 0 rgba(200, 213, 245, 0.33);
+  --shadow-card-hover: 0 6px 16px 0 rgba(200, 213, 245, 0.55);
+
+  /* Weight + leading + tracking subset */
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --leading-tight: 1.25;
+  --leading-relaxed: 1.625;
+  --tracking-wide: 0.025em;
+}
+
 :root {
-  --page-bg: #fbf8f2;
-  --panel: rgba(255, 255, 255, 0.72);
-  --border: rgba(15, 23, 42, 0.12);
-  --text: #0f172a;
-  --muted: #475569;
-  --soft: #e2dccf;
+  /* ── Outshift canonical tokens ─────────────────────────────────────────── */
+
+  /* Surfaces */
+  --color-surface:        #f5f8fd; /* page bg */
+  --color-surface-light:  #fbfcfe; /* cards, header bg, secondary buttons */
+  --color-surface-strong: #eff3fc; /* filter sidebar, subtle hover bg */
+  --color-surface-tag:    #e3eafa; /* tag/chip pill bg */
+
+  /* Ink (text) */
+  --color-ink:        #3c4551; /* body / default */
+  --color-ink-strong: #00142b; /* headings */
+  --color-ink-medium: #59616b; /* nav links default */
+  --color-ink-weak:   #777d85; /* placeholders, eyebrow labels */
+
+  /* Lines (borders) */
+  --color-line:        #d5dff7; /* default border */
+  --color-line-strong: #c8d5f5; /* hover border */
+
+  /* Brand scale */
+  --color-brand-200: #e8f1ff;
+  --color-brand-300: #d5dff7;
+  --color-brand-500: #187adc;
+  --color-brand-600: #0051af;
+  --color-brand-700: #004ba8;
+  --color-brand-800: #0d274d;
+
+  /* Accent teal */
+  --color-accent-teal:     #dff1f5;
+  --color-accent-teal-ink: #0f6e85;
+
+  /* Star gold */
+  --color-star-gold: #fbbf24;
+
+  /* Fonts */
+  --font-sans:    var(--font-sans-inter, 'Inter'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-display: var(--font-sans-inter, 'Inter'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --font-weight-light:    300;
+  --font-weight-medium:   500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:     700;
+
+  /* Radii */
+  --radius-card:    8px;
+  --radius-control: 4px;
+
+  /* ── Aliases - keep my prior token names resolving to outshift values ── */
+
+  --color-bg: var(--color-surface);
+  --color-bg-light: var(--color-surface-light);
+  --color-surface-2: var(--color-surface-strong);
+
+  --color-fg: var(--color-ink-strong);
+  --color-fg-strong: var(--color-ink-strong);
+  --color-fg-default: var(--color-ink);
+  --color-fg-muted: var(--color-ink-medium);
+  --color-fg-weak: var(--color-ink-weak);
+
+  --color-border: var(--color-line);
+  --color-border-strong: var(--color-line-strong);
+
+  --color-primary: var(--color-brand-500);
+  --color-primary-hover: var(--color-brand-600);
+  --color-primary-active: var(--color-brand-700);
+  --color-primary-deep: var(--color-brand-800);
+  --color-primary-soft: var(--color-brand-200);
+  --color-primary-soft-strong: var(--color-brand-300);
+
+  --color-accent: var(--color-accent-teal-ink);
+  --color-accent-soft: var(--color-accent-teal);
+  --color-success: var(--color-accent-teal-ink);
+  --color-success-soft: var(--color-accent-teal);
+
+  /* Warning / danger - not in outshift's set; keep prior values so existing
+     code paths don't break visually. */
+  --color-warning: #8a5a06;
+  --color-warning-soft: #fdeccc;
+  --color-danger: #b42318;
+  --color-danger-soft: #fef3f2;
+
+  --color-code-bg: var(--color-brand-800);
+  --color-code-fg: var(--color-surface-light);
+
+  /* Legacy nanda aliases - already in place from prior restyle */
+  --page-bg: var(--color-surface);
+  --panel: var(--color-surface-light);
+  --border: var(--color-line);
+  --text: var(--color-ink-strong);
+  --muted: var(--color-ink-medium);
+  --soft: var(--color-surface-strong);
 }
 
 html {
   scroll-behavior: smooth;
-  background: var(--page-bg);
+  background: var(--color-surface);
 }
 
 body {
   margin: 0;
   min-height: 100vh;
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), transparent 35%),
-    radial-gradient(circle at top right, rgba(226, 220, 207, 0.35), transparent 28%),
-    var(--page-bg);
-  color: var(--text);
-  font-family: Georgia, "Times New Roman", Times, serif;
+  background: var(--color-surface);
+  color: var(--color-ink);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
@@ -31,6 +167,6 @@ body {
 }
 
 ::selection {
-  background: #0f172a;
-  color: #ffffff;
+  background: var(--color-brand-200);
+  color: var(--color-brand-800);
 }
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 5710523..631e2ad 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,15 +1,23 @@
 import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { Header } from "@/components/Header";
 import { Footer } from "@/components/Footer";
 
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-sans-inter",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
-  title: "host39 — A2A Agent Card Hosting",
+  title: "host39 - A2A Agent Card Hosting",
   description:
     "Host your A2A agent cards at predictable public URLs. No server required.",
   metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://host39.org"),
   openGraph: {
-    title: "host39 — A2A Agent Card Hosting",
+    title: "host39 - A2A Agent Card Hosting",
     description:
       "Host your A2A agent cards at predictable public URLs. No server required.",
     type: "website",
@@ -22,8 +30,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className="min-h-screen bg-[color:var(--page-bg)] text-slate-900 antialiased">
+    <html lang="en" className={inter.variable}>
+      <body className="bg-surface min-h-screen text-ink antialiased">
         <div id="top" className="min-h-screen flex flex-col">
           <Header />
           <main className="flex-1">{children}</main>
diff --git a/web/src/app/login/page.tsx b/web/src/app/login/page.tsx
index 5ce2e88..5062227 100644
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -9,6 +9,9 @@ import { setAuthToken, getAuthToken, isTokenExpired } from "@/lib/auth";
 type Mode = "login" | "register";
 type IdentityType = "email" | "domain";
 
+const inputClass =
+  "w-full h-10 rounded-control border-2 border-line bg-surface-light px-3 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500 transition-colors";
+
 function LoginPageInner() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -70,21 +73,23 @@ function LoginPageInner() {
       title={mode === "login" ? "Sign in" : "Create account"}
       description="Manage your A2A agent cards on host39."
     >
-      <div className="mx-auto max-w-sm space-y-5">
+      <div className="mx-auto max-w-md space-y-5">
         {reason === "session_expired" && (
-          <p className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm text-amber-700">
+          <p className="rounded-control border border-[#fdeccc] bg-[#fdeccc] px-4 py-2.5 text-sm text-[#8a5a06]">
             Your session expired. Please sign in again.
           </p>
         )}
 
-        <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
+        <div className="bg-surface-light rounded-card border border-line p-8 shadow-card">
           {/* Mode toggle */}
-          <div className="mb-5 flex rounded-xl border border-black/10 p-1 text-sm">
+          <div className="mb-5 flex rounded-control border border-line p-1 text-sm">
             <button
               type="button"
               onClick={() => { setMode("login"); setError(null); }}
-              className={`flex-1 rounded-lg py-1.5 font-medium transition ${
-                mode === "login" ? "bg-slate-950 text-white" : "text-slate-500 hover:text-slate-700"
+              className={`flex-1 rounded-control py-1.5 font-medium transition ${
+                mode === "login"
+                  ? "bg-brand-500 text-white"
+                  : "text-ink-medium hover:text-ink"
               }`}
             >
               Sign in
@@ -92,8 +97,10 @@ function LoginPageInner() {
             <button
               type="button"
               onClick={() => { setMode("register"); setError(null); }}
-              className={`flex-1 rounded-lg py-1.5 font-medium transition ${
-                mode === "register" ? "bg-slate-950 text-white" : "text-slate-500 hover:text-slate-700"
+              className={`flex-1 rounded-control py-1.5 font-medium transition ${
+                mode === "register"
+                  ? "bg-brand-500 text-white"
+                  : "text-ink-medium hover:text-ink"
               }`}
             >
               Create account
@@ -108,7 +115,7 @@ function LoginPageInner() {
                   placeholder="Display name (optional)"
                   value={displayName}
                   onChange={(e) => setDisplayName(e.target.value)}
-                  className="w-full rounded-xl border border-black/10 px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300"
+                  className={inputClass}
                 />
                 <div>
                   <input
@@ -120,42 +127,54 @@ function LoginPageInner() {
                     minLength={2}
                     maxLength={32}
                     pattern="^[a-z0-9][a-z0-9-]{1,31}$"
-                    className="w-full rounded-xl border border-black/10 px-4 py-2.5 font-mono text-sm outline-none focus:ring-2 focus:ring-slate-300"
+                    className={`${inputClass} font-mono`}
                   />
                   {handle && (
-                    <p className="mt-1 text-xs text-slate-400">
-                      Your cards will be at /personal/<span className="font-medium text-slate-600">{handle}</span>/slug.json
+                    <p className="mt-1 font-mono text-xs text-ink-medium">
+                      Your cards will be at /personal/<span className="font-medium text-ink">{handle}</span>/slug.json
                     </p>
                   )}
                 </div>
 
                 {/* Identity type */}
-                <div className="rounded-xl border border-black/10 p-3">
-                  <p className="mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+                <div className="rounded-control border border-line p-3">
+                  <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
                     Identity type
                   </p>
-                  <div className="flex gap-4">
-                    <label className="flex items-center gap-2 cursor-pointer">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:gap-3">
+                    <label
+                      className={`flex flex-1 cursor-pointer items-center gap-2 rounded-control border-2 px-3 py-2 transition ${
+                        identityType === "email"
+                          ? "border-accent-teal-ink bg-accent-teal"
+                          : "border-line bg-surface-light hover:border-line-strong"
+                      }`}
+                    >
                       <input
                         type="radio"
                         name="identity_type"
                         value="email"
                         checked={identityType === "email"}
                         onChange={() => setIdentityType("email")}
-                        className="accent-slate-950"
+                        className="accent-accent-teal-ink"
                       />
-                      <span className="text-sm text-slate-700">Personal (email)</span>
+                      <span className="text-sm text-ink">Personal (email)</span>
                     </label>
-                    <label className="flex items-center gap-2 cursor-pointer">
+                    <label
+                      className={`flex flex-1 cursor-pointer items-center gap-2 rounded-control border-2 px-3 py-2 transition ${
+                        identityType === "domain"
+                          ? "border-brand-500 bg-brand-200"
+                          : "border-line bg-surface-light hover:border-line-strong"
+                      }`}
+                    >
                       <input
                         type="radio"
                         name="identity_type"
                         value="domain"
                         checked={identityType === "domain"}
                         onChange={() => setIdentityType("domain")}
-                        className="accent-slate-950"
+                        className="accent-brand-500"
                       />
-                      <span className="text-sm text-slate-700">Business (domain)</span>
+                      <span className="text-sm text-ink">Business (domain)</span>
                     </label>
                   </div>
 
@@ -168,16 +187,16 @@ function LoginPageInner() {
                         onChange={(e) => setDomain(e.target.value)}
                         required={identityType === "domain"}
                         pattern="^[a-zA-Z0-9][a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
-                        className="w-full rounded-xl border border-black/10 px-4 py-2.5 font-mono text-sm outline-none focus:ring-2 focus:ring-slate-300"
+                        className={`${inputClass} font-mono`}
                       />
-                      <p className="mt-1.5 text-xs text-slate-400">
+                      <p className="mt-1.5 font-mono text-xs text-ink-medium">
                         Your cards will be at /{domain || "yourdomain.com"}/slug.json
                       </p>
                     </div>
                   )}
 
                   {identityType === "email" && (
-                    <p className="mt-2 text-xs text-slate-400">
+                    <p className="mt-2 font-mono text-xs text-ink-medium">
                       Your cards will be at /personal/{handle || "username"}/slug.json
                     </p>
                   )}
@@ -191,7 +210,7 @@ function LoginPageInner() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="w-full rounded-xl border border-black/10 px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300"
+              className={inputClass}
             />
             <input
               type="password"
@@ -200,11 +219,11 @@ function LoginPageInner() {
               onChange={(e) => setPassword(e.target.value)}
               required
               minLength={8}
-              className="w-full rounded-xl border border-black/10 px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-slate-300"
+              className={inputClass}
             />
 
             {error && (
-              <p className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm text-rose-700">
+              <p className="rounded-control border border-[color:var(--color-danger-soft)] bg-[color:var(--color-danger-soft)] px-4 py-2.5 text-sm text-[color:var(--color-danger)]">
                 {error}
               </p>
             )}
@@ -212,7 +231,7 @@ function LoginPageInner() {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded-xl bg-slate-950 py-2.5 text-sm font-medium text-white disabled:opacity-60"
+              className="inline-flex w-full items-center justify-center h-9 rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition disabled:opacity-60"
             >
               {loading ? "…" : mode === "register" ? "Create account" : "Sign in"}
             </button>
@@ -227,7 +246,7 @@ export default function LoginPage() {
   return (
     <Suspense fallback={
       <div className="flex min-h-screen items-center justify-center">
-        <p className="text-sm text-slate-400">Loading…</p>
+        <p className="text-sm text-ink-weak">Loading…</p>
       </div>
     }>
       <LoginPageInner />
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index fa05264..6189ee7 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,144 +1,471 @@
-import Link from "next/link";
-
-const SAMPLE_CARD = {
-  name: "Moon Bakery Orders Agent",
-  description: "Place and track orders at Moon Bakery.",
-  url: "https://moonbakery-orders.aws.example.com",
-  version: "1.0",
-  capabilities: { streaming: false, pushNotifications: false },
-  authentication: { schemes: ["Bearer"] },
-  skills: [
-    { name: "placeOrder", description: "Place a new bakery order" },
-    { name: "trackOrder", description: "Track an existing order status" },
-  ],
-  provider: { organization: "Moon Bakery", url: "https://moonbakery.com" },
-  _meta: {
-    identifier: "urn:ai:domain:moonbakery.com:agent:orders",
-    publicUrl: "https://agentcards.host39.org/moonbakery.com/orders.json",
-    hostedBy: "host39.org",
-  },
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { listPublicCards, type PublicCatalogEntry } from "@/lib/api";
+
+type Card = {
+  id: string;
+  name: string;
+  type: "Business" | "Personal";
+  version: string;
+  date: string;
+  identifier: string;
+  description: string;
+  tags: string[];
+  verified: boolean;
+  typeBadge: "BUSINESS" | "PERSONAL";
+  status: "Active";
 };
 
+const PAGE_SIZE = 6;
+
+function parseEntry(entry: PublicCatalogEntry): Card {
+  const isBusiness = entry.identifier.startsWith("urn:ai:domain:");
+  // Derive the {scope}/{slug} display name from the URN + url, matching
+  // the outshift "moonbakery.com/orders" / "personal/sara/card" pattern.
+  let displayName = entry.displayName;
+  if (isBusiness) {
+    const match = entry.identifier.match(/^urn:ai:domain:([^:]+):agent:(.+)$/);
+    if (match) displayName = `${match[1]}/${match[2]}`;
+  } else {
+    // personal: parse the public url path /personal/{handle}/{slug}.json
+    try {
+      const path = new URL(entry.url).pathname;
+      const m = path.match(/^\/personal\/([^/]+)\/([^/.]+)\.json$/);
+      if (m) displayName = `personal/${m[1]}/${m[2]}`;
+    } catch {
+      // leave displayName as the human-readable fallback
+    }
+  }
+
+  return {
+    id: entry.identifier,
+    name: displayName,
+    type: isBusiness ? "Business" : "Personal",
+    version: "1.0",
+    date: "Updated recently",
+    identifier: entry.identifier,
+    description: entry.description ?? "",
+    tags: Array.isArray(entry.tags) ? entry.tags : [],
+    // Every entry in the public catalog is server-filtered to active +
+    // public, so the verified check is safe for all of them.
+    verified: true,
+    typeBadge: isBusiness ? "BUSINESS" : "PERSONAL",
+    status: "Active",
+  };
+}
+
 export default function HomePage() {
-  return (
-    <>
-      {/* Hero */}
-      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
-        <div className="max-w-3xl">
-          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-black/10 bg-white px-4 py-1.5 text-xs uppercase tracking-[0.22em] text-slate-500 shadow-sm">
-            Agent Card Hosting
-          </div>
-          <h1 className="font-serif text-5xl italic leading-tight tracking-tight text-slate-950 sm:text-6xl">
-            host your agents
-            <br />
-            <span className="text-slate-400">at predictable URLs</span>
-          </h1>
-          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-slate-600">
-            host39 is a third-party A2A agent card host. Register your identity, create agent cards,
-            and publish them at stable public URLs — no server required.
-          </p>
-          <div className="mt-8 flex flex-wrap gap-4">
-            <Link
-              href="/login"
-              className="rounded-2xl bg-slate-950 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-slate-800"
-            >
-              Get started free
-            </Link>
-            <Link
-              href="/dashboard"
-              className="rounded-2xl border border-black/10 bg-white px-6 py-3 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50"
-            >
-              Go to dashboard
-            </Link>
-          </div>
-        </div>
-      </section>
+  const [search, setSearch] = useState("");
+  const [identityFilter, setIdentityFilter] = useState<string[]>([]);
+  const [statusFilter, setStatusFilter] = useState<string[]>([]);
+  const [tagFilter, setTagFilter] = useState<string[]>([]);
+  const [page, setPage] = useState(1);
+
+  const [cards, setCards] = useState<Card[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-      {/* How it works */}
-      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <h2 className="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">
-          How it works
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    listPublicCards()
+      .then((entries) => {
+        if (cancelled) return;
+        setCards(entries.map(parseEntry));
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return;
+        setError(e instanceof Error ? e.message : String(e));
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Sidebar option lists derived from the live data.
+  const identityOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const c of cards) set.add(c.type);
+    return Array.from(set).sort();
+  }, [cards]);
+
+  const statusOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const c of cards) set.add(c.status);
+    return Array.from(set).sort();
+  }, [cards]);
+
+  const tagOptions = useMemo(() => {
+    const set = new Set<string>();
+    for (const c of cards) for (const t of c.tags) set.add(t);
+    return Array.from(set).sort().slice(0, 30);
+  }, [cards]);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return cards.filter((c) => {
+      if (
+        q &&
+        !c.name.toLowerCase().includes(q) &&
+        !c.identifier.toLowerCase().includes(q)
+      ) {
+        return false;
+      }
+      if (identityFilter.length > 0 && !identityFilter.includes(c.type))
+        return false;
+      if (statusFilter.length > 0 && !statusFilter.includes(c.status))
+        return false;
+      if (
+        tagFilter.length > 0 &&
+        !c.tags.some((t) => tagFilter.includes(t))
+      )
+        return false;
+      return true;
+    });
+  }, [cards, search, identityFilter, statusFilter, tagFilter]);
+
+  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const currentPage = Math.min(page, totalPages);
+  const pageStart = (currentPage - 1) * PAGE_SIZE;
+  const pageCards = filtered.slice(pageStart, pageStart + PAGE_SIZE);
+
+  function toggle(
+    list: string[],
+    value: string,
+    setter: (next: string[]) => void,
+  ) {
+    if (list.includes(value)) {
+      setter(list.filter((v) => v !== value));
+    } else {
+      setter([...list, value]);
+    }
+    setPage(1);
+  }
+
+  const cardsHost = (() => {
+    const base =
+      process.env.NEXT_PUBLIC_HOST39_CARDS_URL ??
+      process.env.NEXT_PUBLIC_HOST39_API_URL ??
+      "";
+    try {
+      return new URL(base).hostname;
+    } catch {
+      return base || "the API";
+    }
+  })();
+
+  return (
+    <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mb-6">
+        <h2 className="font-display text-2xl font-bold text-ink-strong leading-tight">
+          Explore
         </h2>
-        <p className="mb-8 font-serif text-3xl italic text-slate-950">
-          Three steps to publish your agent
+        <p className="mt-1 text-sm text-ink-medium max-w-3xl">
+          Browse the secure directory of A2A agent cards hosted on host39.
         </p>
+      </div>
 
-        <div className="grid gap-6 sm:grid-cols-3">
-          {[
-            {
-              step: "01",
-              title: "Register",
-              desc: "Create an account with your email or a domain identity (for businesses). Domain users get URLs like /moonbakery.com/orders.json.",
-            },
-            {
-              step: "02",
-              title: "Create a card",
-              desc: "Fill in your agent name, runtime URL, capabilities, authentication, and skills using our guided form.",
-            },
-            {
-              step: "03",
-              title: "Share the URL",
-              desc: "Your card is live at a stable public URL. Register it with the NANDA Index so resolvers can find your agent by identity.",
-            },
-          ].map((item) => (
-            <div
-              key={item.step}
-              className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm"
-            >
-              <span className="font-mono text-xs text-slate-400">{item.step}</span>
-              <h3 className="mt-2 text-xl font-semibold text-slate-950">{item.title}</h3>
-              <p className="mt-2 text-sm leading-6 text-slate-600">{item.desc}</p>
+      <div className="flex flex-col lg:flex-row gap-6">
+        <FilterSidebar
+          search={search}
+          onSearch={(v) => {
+            setSearch(v);
+            setPage(1);
+          }}
+          identityOptions={identityOptions}
+          identity={identityFilter}
+          onToggleIdentity={(v) => toggle(identityFilter, v, setIdentityFilter)}
+          statusOptions={statusOptions}
+          status={statusFilter}
+          onToggleStatus={(v) => toggle(statusFilter, v, setStatusFilter)}
+          tagOptions={tagOptions}
+          tags={tagFilter}
+          onToggleTag={(v) => toggle(tagFilter, v, setTagFilter)}
+        />
+
+        <div className="flex-1 min-w-0">
+          {loading ? (
+            <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="bg-surface-strong h-[200px] rounded-card animate-pulse"
+                />
+              ))}
+            </div>
+          ) : error ? (
+            <div className="rounded-card border border-line bg-surface-light p-8 text-center text-sm text-ink-medium">
+              <p>
+                Could not reach {cardsHost}. Check that the API is running.
+              </p>
+              <p className="mt-2 font-mono text-xs text-ink-weak">{error}</p>
+            </div>
+          ) : cards.length === 0 ? (
+            <div className="rounded-card border border-line bg-surface-light p-8 text-center text-sm text-ink-medium">
+              No hosted cards registered yet.
             </div>
-          ))}
+          ) : (
+            <>
+              <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
+                {pageCards.map((card) => (
+                  <AgentCardTile key={card.id} card={card} />
+                ))}
+              </div>
+
+              {pageCards.length === 0 && (
+                <div className="rounded-card border border-line bg-surface-light p-8 text-center text-sm text-ink-medium">
+                  No hosted cards match your filters.
+                </div>
+              )}
+
+              <Pagination
+                page={currentPage}
+                total={totalPages}
+                onPage={(p) => setPage(p)}
+              />
+            </>
+          )}
         </div>
-      </section>
+      </div>
+    </main>
+  );
+}
 
-      {/* URL patterns */}
-      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <h2 className="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">
-          URL patterns
-        </h2>
-        <p className="mb-8 font-serif text-3xl italic text-slate-950">
-          Predictable, stable, public
-        </p>
+function FilterSidebar(props: {
+  search: string;
+  onSearch: (v: string) => void;
+  identityOptions: string[];
+  identity: string[];
+  onToggleIdentity: (v: string) => void;
+  statusOptions: string[];
+  status: string[];
+  onToggleStatus: (v: string) => void;
+  tagOptions: string[];
+  tags: string[];
+  onToggleTag: (v: string) => void;
+}) {
+  return (
+    <aside className="lg:w-64 flex-shrink-0">
+      <div className="bg-surface-strong rounded-card border border-line p-4 space-y-5 sticky top-24 max-h-[calc(100vh-7rem)] flex flex-col overflow-hidden">
+        <div className="flex-shrink-0">
+          <label
+            htmlFor="search"
+            className="block text-xs font-semibold uppercase tracking-wide text-ink-medium mb-1.5"
+          >
+            Search
+          </label>
+          <input
+            type="text"
+            id="search"
+            value={props.search}
+            onChange={(e) => props.onSearch(e.target.value)}
+            placeholder="Filter by domain or handle..."
+            className="w-full rounded-control border-2 border-line bg-surface-light px-3 py-2 text-sm text-ink placeholder:text-ink-weak focus:outline-none focus:border-brand-500"
+          />
+        </div>
 
-        <div className="grid gap-6 sm:grid-cols-2">
-          <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
-            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Business / Domain</p>
-            <code className="mt-3 block rounded-xl border border-black/5 bg-slate-50 p-4 font-mono text-sm text-slate-800">
-              /moonbakery.com/orders.json
-            </code>
-            <p className="mt-3 text-sm text-slate-600">
-              Register with a domain identity to get clean, branded URLs for your business agents.
-            </p>
+        <div className="flex-shrink-0">
+          <span className="block text-xs font-semibold uppercase tracking-wide text-ink-medium mb-2">
+            Identity
+          </span>
+          <div className="space-y-1.5">
+            {props.identityOptions.length === 0 ? (
+              <span className="text-xs text-ink-weak">No options</span>
+            ) : (
+              props.identityOptions.map((opt) => (
+                <label
+                  key={opt}
+                  className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={props.identity.includes(opt)}
+                    onChange={() => props.onToggleIdentity(opt)}
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                  />
+                  <span>{opt}</span>
+                </label>
+              ))
+            )}
           </div>
-          <div className="rounded-3xl border border-black/10 bg-white p-6 shadow-sm">
-            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Personal / Email</p>
-            <code className="mt-3 block rounded-xl border border-black/5 bg-slate-50 p-4 font-mono text-sm text-slate-800">
-              /personal/john@hotmail.com/card.json
-            </code>
-            <p className="mt-3 text-sm text-slate-600">
-              Register with your email for personal agent cards — great for developers and individuals.
-            </p>
+        </div>
+
+        <div className="flex-shrink-0">
+          <span className="block text-xs font-semibold uppercase tracking-wide text-ink-medium mb-2">
+            Status
+          </span>
+          <div className="space-y-1.5">
+            {props.statusOptions.length === 0 ? (
+              <span className="text-xs text-ink-weak">No options</span>
+            ) : (
+              props.statusOptions.map((opt) => (
+                <label
+                  key={opt}
+                  className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={props.status.includes(opt)}
+                    onChange={() => props.onToggleStatus(opt)}
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                  />
+                  <span>{opt}</span>
+                </label>
+              ))
+            )}
           </div>
         </div>
-      </section>
 
-      {/* Sample agent card */}
-      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <h2 className="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-slate-400">
-          A2A Agent Card format
-        </h2>
-        <p className="mb-8 font-serif text-3xl italic text-slate-950">
-          Standard JSON, served instantly
-        </p>
+        <div className="flex-1 min-h-0 flex flex-col">
+          <span className="block text-xs font-semibold uppercase tracking-wide text-ink-medium mb-2">
+            Tags
+          </span>
+          <div className="flex-1 overflow-y-auto space-y-1.5 pr-1">
+            {props.tagOptions.length === 0 ? (
+              <span className="text-xs text-ink-weak">No tags yet</span>
+            ) : (
+              props.tagOptions.map((tag) => (
+                <label
+                  key={tag}
+                  className="flex items-center gap-2 text-sm text-ink cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={props.tags.includes(tag)}
+                    onChange={() => props.onToggleTag(tag)}
+                    className="rounded border-line-strong text-brand-500 focus:ring-brand-500"
+                  />
+                  <span className="truncate">{tag}</span>
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}
 
-        <div className="overflow-x-auto rounded-3xl border border-black/10 bg-slate-950 p-6 shadow-sm">
-          <pre className="font-mono text-sm leading-6 text-slate-200">
-            {JSON.stringify(SAMPLE_CARD, null, 2)}
-          </pre>
+function AgentCardTile({ card }: { card: Card }) {
+  return (
+    <article
+      className="bg-surface-light rounded-card border border-line/70 shadow-card p-4 hover:shadow-card-hover hover:border-line-strong transition cursor-pointer flex flex-col h-full gap-3"
+      role="button"
+      tabIndex={0}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <h3 className="font-semibold text-ink-strong truncate">{card.name}</h3>
+            {card.verified && (
+              <span className="inline-flex flex-shrink-0" title="Verified">
+                <svg
+                  className="w-4 h-4 text-brand-500"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </span>
+            )}
+          </div>
+          <div className="mt-0.5 text-xs text-ink-weak">
+            Version {card.version} • {card.date}
+          </div>
         </div>
-      </section>
-    </>
+        {card.typeBadge && (
+          <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-[#fdeccc] text-[#8a5a06] flex-shrink-0">
+            {card.typeBadge}
+          </span>
+        )}
+      </div>
+      <p className="text-sm text-ink line-clamp-2 leading-relaxed">{card.description}</p>
+      <div className="flex flex-wrap gap-1.5 mt-auto">
+        {card.tags.slice(0, 4).map((t) => (
+          <span
+            key={t}
+            className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-surface-tag text-ink"
+          >
+            {t}
+          </span>
+        ))}
+      </div>
+    </article>
+  );
+}
+
+function Pagination({
+  page,
+  total,
+  onPage,
+}: {
+  page: number;
+  total: number;
+  onPage: (p: number) => void;
+}) {
+  const pages: (number | "...")[] = [];
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i);
+  } else {
+    pages.push(1);
+    if (page > 3) pages.push("...");
+    const start = Math.max(2, page - 1);
+    const end = Math.min(total - 1, page + 1);
+    for (let i = start; i <= end; i++) pages.push(i);
+    if (page < total - 2) pages.push("...");
+    pages.push(total);
+  }
+
+  return (
+    <nav className="flex items-center justify-center gap-2 mt-6 pb-4">
+      <button
+        type="button"
+        onClick={() => onPage(Math.max(1, page - 1))}
+        disabled={page === 1}
+        className="px-3 py-1.5 text-sm font-medium rounded text-ink border-2 border-line bg-surface-light hover:border-line-strong disabled:opacity-40 disabled:cursor-not-allowed transition"
+      >
+        Previous
+      </button>
+      <div className="flex items-center gap-1">
+        {pages.map((p, i) =>
+          p === "..." ? (
+            <span key={`e-${i}`} className="px-2 py-1 text-sm text-ink-weak">
+              ...
+            </span>
+          ) : (
+            <button
+              key={p}
+              type="button"
+              onClick={() => onPage(p)}
+              className={`min-w-9 h-9 px-2 text-sm font-medium rounded-full transition ${
+                p === page
+                  ? "bg-brand-500 text-white"
+                  : "text-ink hover:bg-surface-strong"
+              }`}
+            >
+              {p}
+            </button>
+          )
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={() => onPage(Math.min(total, page + 1))}
+        disabled={page === total}
+        className="px-3 py-1.5 text-sm font-medium rounded text-ink border-2 border-line bg-surface-light hover:border-line-strong disabled:opacity-40 disabled:cursor-not-allowed transition"
+      >
+        Next
+      </button>
+    </nav>
   );
 }
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index 29e4fa6..143f516 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -1,8 +1,8 @@
 export function Footer() {
   return (
-    <footer className="border-t border-black/5 bg-white">
-      <div className="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-6 text-sm text-slate-500 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
-        <p>host39 — A2A Agent Card Hosting Service</p>
+    <footer className="border-t border-line bg-surface-light">
+      <div className="mx-auto flex max-w-7xl flex-col gap-2 px-4 py-6 text-xs text-ink-weak sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
+        <p>host39 - A2A Agent Card Hosting Service</p>
         <p>Predictable public URLs for AI agent discovery.</p>
       </div>
     </footer>
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 0501794..ba5843d 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -32,93 +32,115 @@ export function Header() {
   }
 
   const navLinks = [
-    { href: "/", label: "Home" },
+    { href: "/", label: "Explore" },
+    { href: "/about", label: "About" },
     { href: "/dashboard", label: "Dashboard" },
   ];
 
+  const initial = email ? email.charAt(0).toUpperCase() : "?";
+
   return (
-    <header className="sticky top-0 z-50 border-b border-black/5 bg-[color:var(--page-bg)]/90 backdrop-blur-xl">
-      <div className="mx-auto flex max-w-7xl items-center gap-4 px-4 py-4 sm:px-6 lg:px-8">
-        <Link href="/" className="flex min-w-0 items-center gap-3">
-          <span className="inline-flex h-10 shrink-0 items-center justify-center whitespace-nowrap rounded-sm border border-black/10 bg-white px-3 text-sm font-semibold tracking-[0.28em] text-slate-900 shadow-sm">
-            H39
-          </span>
-          <span className="hidden truncate font-serif text-lg italic tracking-tight text-slate-950 sm:block">
-            host39
-          </span>
-        </Link>
+    <header className="bg-surface-light border-b border-line sticky top-0 z-30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
+        <div className="flex items-center justify-between gap-4">
+          {/* LEFT: brand */}
+          <Link
+            href="/"
+            className="flex items-center gap-3 min-w-0 rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2"
+          >
+            <span className="inline-flex h-8 w-8 items-center justify-center rounded-card bg-brand-800 text-white text-xs font-semibold tracking-wide">
+              H39
+            </span>
+            <span className="hidden sm:block h-6 border-l border-line" />
+            <div className="hidden sm:flex flex-col leading-tight min-w-0">
+              <span className="font-semibold text-ink-strong truncate">host39</span>
+              <span className="text-xs text-ink-weak truncate">A2A agent card hosting</span>
+            </div>
+          </Link>
 
-        <nav className="ml-auto hidden items-center gap-7 text-[0.72rem] uppercase tracking-[0.22em] text-slate-600 lg:flex">
-          {navLinks.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className="transition-colors hover:text-slate-950"
-            >
-              {item.label}
-            </Link>
-          ))}
-        </nav>
+          {/* RIGHT: nav + counter + auth */}
+          <div className="flex items-center gap-6">
+            <nav className="hidden items-center gap-6 lg:flex">
+              {navLinks.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="text-sm font-medium text-ink-medium hover:text-brand-600"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
 
-        <div className="hidden lg:block">
-          {email ? (
-            <div className="flex items-center gap-3">
-              <Link
-                href="/dashboard"
-                className="text-[0.72rem] uppercase tracking-[0.22em] text-slate-600 transition-colors hover:text-slate-950"
-              >
-                {email}
-              </Link>
-              <button
-                onClick={signOut}
-                className="rounded-full border border-black/10 bg-white px-3 py-1 text-[0.72rem] uppercase tracking-[0.22em] text-slate-500 hover:bg-slate-50"
-              >
-                Sign out
-              </button>
+            <div className="hidden md:flex flex-col items-end leading-tight">
+              <span className="text-base font-bold text-ink-strong">9 + hosted cards indexed</span>
+              <span className="text-xs text-ink-weak">Indexed</span>
             </div>
-          ) : (
-            <Link
-              href="/login"
-              className="rounded-full border border-black/10 bg-white px-4 py-2 text-[0.72rem] font-medium uppercase tracking-[0.22em] text-slate-700 shadow-sm transition hover:bg-slate-50"
-            >
-              Sign in
-            </Link>
-          )}
-        </div>
 
-        <details ref={detailsRef} className="relative ml-auto lg:hidden">
-          <summary className="cursor-pointer list-none border border-black/10 bg-white px-4 py-2 text-xs uppercase tracking-[0.2em] text-slate-700 shadow-sm">
-            Menu
-          </summary>
-          <div className="absolute right-0 mt-2 w-56 rounded-2xl border border-black/10 bg-white p-2 shadow-lg">
-            {navLinks.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                onClick={closeMobileMenu}
-                className="block rounded-xl px-3 py-2 text-sm text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-950"
-              >
-                {item.label}
-              </Link>
-            ))}
-            {email ? (
-              <button
-                onClick={() => { closeMobileMenu(); signOut(); }}
-                className="block w-full rounded-xl px-3 py-2 text-left text-sm text-slate-500 hover:bg-slate-50"
-              >
-                Sign out ({email})
-              </button>
-            ) : (
-              <Link
-                href="/login"
-                onClick={closeMobileMenu}
-                className="block rounded-xl px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
-              >
-                Sign in
-              </Link>
-            )}
+            <div className="hidden lg:block">
+              {email ? (
+                <div className="flex items-center gap-3">
+                  <span className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-brand-200 text-xs font-semibold text-brand-800">
+                    {initial}
+                  </span>
+                  <Link
+                    href="/dashboard"
+                    className="max-w-[180px] truncate text-sm text-ink hover:text-brand-600 transition-colors"
+                  >
+                    {email}
+                  </Link>
+                  <button
+                    onClick={signOut}
+                    className="text-xs text-ink-weak hover:text-ink transition-colors"
+                  >
+                    Sign out
+                  </button>
+                </div>
+              ) : (
+                <Link
+                  href="/login"
+                  className="inline-flex h-9 items-center rounded-control bg-brand-500 px-4 text-sm font-medium text-white hover:bg-brand-600 transition"
+                >
+                  Sign in
+                </Link>
+              )}
+            </div>
+
+            <details ref={detailsRef} className="relative lg:hidden">
+              <summary className="cursor-pointer list-none rounded-control border-2 border-line bg-surface-light px-3 py-1.5 text-xs font-medium text-ink hover:border-line-strong transition">
+                Menu
+              </summary>
+              <div className="absolute right-0 mt-2 w-56 rounded-card border border-line bg-surface-light p-2 shadow-card">
+                {navLinks.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={closeMobileMenu}
+                    className="block rounded-control px-3 py-2 text-sm text-ink hover:bg-surface-strong hover:text-brand-600 transition-colors"
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+                {email ? (
+                  <button
+                    onClick={() => { closeMobileMenu(); signOut(); }}
+                    className="block w-full rounded-control px-3 py-2 text-left text-sm text-ink-weak hover:bg-surface-strong hover:text-ink"
+                  >
+                    Sign out ({email})
+                  </button>
+                ) : (
+                  <Link
+                    href="/login"
+                    onClick={closeMobileMenu}
+                    className="block rounded-control px-3 py-2 text-sm text-ink hover:bg-surface-strong hover:text-brand-600"
+                  >
+                    Sign in
+                  </Link>
+                )}
+              </div>
+            </details>
           </div>
-        </details>
+        </div>
       </div>
     </header>
   );
diff --git a/web/src/components/PageShell.tsx b/web/src/components/PageShell.tsx
index f1a0631..350e453 100644
--- a/web/src/components/PageShell.tsx
+++ b/web/src/components/PageShell.tsx
@@ -3,18 +3,24 @@ import type { ReactNode } from "react";
 type Props = {
   title: string;
   description: string;
+  eyebrow?: string;
   children: ReactNode;
 };
 
-export function PageShell({ title, description, children }: Props) {
+export function PageShell({ title, description, eyebrow, children }: Props) {
   return (
-    <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+    <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <div className="mb-8">
-        <h1 className="font-serif text-4xl italic tracking-tight text-slate-950">
+        {eyebrow && (
+          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-weak">
+            {eyebrow}
+          </p>
+        )}
+        <h1 className="font-display text-2xl font-bold text-ink-strong leading-tight">
           {title}
         </h1>
         {description && (
-          <p className="mt-3 max-w-3xl text-sm leading-6 text-slate-600">
+          <p className="mt-3 max-w-3xl text-sm text-ink-medium leading-relaxed">
             {description}
           </p>
         )}
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index ee99343..fa92ea2 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -28,7 +28,7 @@ async function parseApiResponse<T>(res: Response): Promise<T> {
     const errorCode = typeof obj["error"] === "string" ? obj["error"] : null;
     const detail = typeof obj["detail"] === "string" ? obj["detail"] : null;
     const message =
-      detail && errorCode ? `${errorCode} — ${detail}` :
+      detail && errorCode ? `${errorCode} - ${detail}` :
       detail ?? errorCode ??
       (typeof obj["message"] === "string" ? obj["message"] : `Request failed with status ${res.status}`);
     throw new ApiError(message, res.status, data);
@@ -117,6 +117,41 @@ export async function listCards(): Promise<AgentCard[]> {
   return request<AgentCard[]>("/cards");
 }
 
+// Public catalog (no auth). Fetches the aggregate ai-catalog from the
+// cards host. Do NOT use request() - that injects Authorization and
+// targets NEXT_PUBLIC_HOST39_API_URL; the public catalog lives on
+// NEXT_PUBLIC_HOST39_CARDS_URL.
+export interface PublicCatalogEntry {
+  identifier: string;
+  displayName: string;
+  mediaType: string;
+  url: string;
+  description: string | null;
+  tags: string[];
+}
+
+export interface PublicCatalogResponse {
+  specVersion: string;
+  entries: PublicCatalogEntry[];
+}
+
+export async function listPublicCards(): Promise<PublicCatalogEntry[]> {
+  const base =
+    process.env.NEXT_PUBLIC_HOST39_CARDS_URL ??
+    process.env.NEXT_PUBLIC_HOST39_API_URL ??
+    "";
+  const url = `${base}/.well-known/ai-catalog.json`;
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) {
+    throw new ApiError(
+      `Catalog fetch failed with status ${res.status}`,
+      res.status,
+    );
+  }
+  const data = (await res.json()) as PublicCatalogResponse;
+  return Array.isArray(data?.entries) ? data.entries : [];
+}
+
 export async function getCard(id: string): Promise<AgentCard> {
   return request<AgentCard>(`/cards/${encodeURIComponent(id)}`);
 }