From 23fb86f02cb2e3338d97f1ba4b58f62fce761a79 Mon Sep 17 00:00:00 2001
From: jean-philippe martel <jpmartel98@gmail.com>
Date: Mon, 26 Jan 2026 15:29:34 -0500
Subject: [PATCH 1/4] added a base style

---
 ui/index.html                 |  14 ++
 ui/src/routeTree.gen.ts       |  21 ++
 ui/src/routes/test-colors.tsx | 195 ++++++++++++++++
 ui/src/styles.css             | 408 ++++++++++++++++++++++++++++------
 4 files changed, 566 insertions(+), 72 deletions(-)
 create mode 100644 ui/src/routes/test-colors.tsx

diff --git a/ui/index.html b/ui/index.html
index be1ac68..2a8e4ba 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -29,6 +29,20 @@
         }
       })();
     </script>
+
+    <!-- Dev runtime config fallback (when not served via host) -->
+    <script>
+      if (!window.__RUNTIME_CONFIG__ && window.location.port === '3002') {
+        window.__RUNTIME_CONFIG__ = {
+          env: 'development',
+          title: 'agent',
+          hostUrl: 'http://localhost:3001',
+          ui: { url: 'http://localhost:3002' },
+          apiBase: '/api',
+          rpcBase: '/api/rpc'
+        };
+      }
+    </script>
     
     <style>
       /* Minimal shell reset - matches host for dev consistency */
diff --git a/ui/src/routeTree.gen.ts b/ui/src/routeTree.gen.ts
index 367ee0e..f71aafd 100644
--- a/ui/src/routeTree.gen.ts
+++ b/ui/src/routeTree.gen.ts
@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as TestColorsRouteImport } from './routes/test-colors'
 import { Route as LayoutRouteImport } from './routes/_layout'
 import { Route as LayoutLoginRouteImport } from './routes/_layout/login'
 import { Route as LayoutPageRouteImport } from './routes/_layout/_page'
@@ -22,6 +23,11 @@ import { Route as LayoutAuthenticatedChatIndexRouteImport } from './routes/_layo
 import { Route as LayoutAuthenticatedKeysKeyRouteImport } from './routes/_layout/_authenticated/keys/$key'
 import { Route as LayoutAuthenticatedAdminDashboardRouteImport } from './routes/_layout/_authenticated/_admin/dashboard'
 
+const TestColorsRoute = TestColorsRouteImport.update({
+  id: '/test-colors',
+  path: '/test-colors',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LayoutRoute = LayoutRouteImport.update({
   id: '/_layout',
   getParentRoute: () => rootRouteImport,
@@ -88,6 +94,7 @@ const LayoutAuthenticatedAdminDashboardRoute =
 
 export interface FileRoutesByFullPath {
   '/': typeof LayoutAuthenticatedIndexRoute
+  '/test-colors': typeof TestColorsRoute
   '/login': typeof LayoutLoginRoute
   '/settings': typeof LayoutAuthenticatedSettingsRoute
   '/privacy-policy': typeof LayoutPagePrivacyPolicyRoute
@@ -98,6 +105,7 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof LayoutAuthenticatedIndexRoute
+  '/test-colors': typeof TestColorsRoute
   '/login': typeof LayoutLoginRoute
   '/settings': typeof LayoutAuthenticatedSettingsRoute
   '/privacy-policy': typeof LayoutPagePrivacyPolicyRoute
@@ -109,6 +117,7 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_layout': typeof LayoutRouteWithChildren
+  '/test-colors': typeof TestColorsRoute
   '/_layout/_authenticated': typeof LayoutAuthenticatedRouteWithChildren
   '/_layout/_page': typeof LayoutPageRouteWithChildren
   '/_layout/login': typeof LayoutLoginRoute
@@ -125,6 +134,7 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/test-colors'
     | '/login'
     | '/settings'
     | '/privacy-policy'
@@ -135,6 +145,7 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/test-colors'
     | '/login'
     | '/settings'
     | '/privacy-policy'
@@ -145,6 +156,7 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/_layout'
+    | '/test-colors'
     | '/_layout/_authenticated'
     | '/_layout/_page'
     | '/_layout/login'
@@ -160,10 +172,18 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   LayoutRoute: typeof LayoutRouteWithChildren
+  TestColorsRoute: typeof TestColorsRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/test-colors': {
+      id: '/test-colors'
+      path: '/test-colors'
+      fullPath: '/test-colors'
+      preLoaderRoute: typeof TestColorsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_layout': {
       id: '/_layout'
       path: ''
@@ -316,6 +336,7 @@ const LayoutRouteWithChildren =
 
 const rootRouteChildren: RootRouteChildren = {
   LayoutRoute: LayoutRouteWithChildren,
+  TestColorsRoute: TestColorsRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
diff --git a/ui/src/routes/test-colors.tsx b/ui/src/routes/test-colors.tsx
new file mode 100644
index 0000000..d9294a7
--- /dev/null
+++ b/ui/src/routes/test-colors.tsx
@@ -0,0 +1,195 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/test-colors')({
+  component: TestColors,
+});
+
+function ColorSwatch({
+  name,
+  bgClass,
+  fgClass,
+}: {
+  name: string;
+  bgClass: string;
+  fgClass: string;
+}) {
+  return (
+    <div className={`${bgClass} ${fgClass} rounded-lg p-6 shadow-sm border border-border`}>
+      <p className="font-semibold">{name}</p>
+      <p className="text-sm opacity-80 mt-1">
+        bg: {bgClass}
+        <br />
+        text: {fgClass}
+      </p>
+    </div>
+  );
+}
+
+function TestColors() {
+  return (
+    <div className="min-h-screen bg-background text-foreground p-8">
+      <div className="max-w-4xl mx-auto space-y-8">
+        <header>
+          <h1 className="text-3xl font-bold text-foreground">Semantic Color System</h1>
+          <p className="text-muted-foreground mt-2">
+            Reference guide for all available semantic color classes. Use these instead of
+            hardcoded colors like bg-blue-600 or text-white.
+          </p>
+        </header>
+
+        <section className="space-y-4">
+          <h2 className="text-xl font-semibold text-foreground border-b border-border pb-2">
+            Core Colors
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <ColorSwatch
+              name="Background"
+              bgClass="bg-background"
+              fgClass="text-foreground"
+            />
+            <ColorSwatch
+              name="Foreground (inverted)"
+              bgClass="bg-foreground"
+              fgClass="text-background"
+            />
+            <ColorSwatch name="Card" bgClass="bg-card" fgClass="text-card-foreground" />
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <h2 className="text-xl font-semibold text-foreground border-b border-border pb-2">
+            Interactive Colors
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <ColorSwatch
+              name="Primary"
+              bgClass="bg-primary"
+              fgClass="text-primary-foreground"
+            />
+            <ColorSwatch
+              name="Secondary"
+              bgClass="bg-secondary"
+              fgClass="text-secondary-foreground"
+            />
+            <ColorSwatch
+              name="Accent"
+              bgClass="bg-accent"
+              fgClass="text-accent-foreground"
+            />
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <h2 className="text-xl font-semibold text-foreground border-b border-border pb-2">
+            Utility Colors
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <ColorSwatch
+              name="Muted"
+              bgClass="bg-muted"
+              fgClass="text-muted-foreground"
+            />
+            <ColorSwatch
+              name="Destructive"
+              bgClass="bg-destructive"
+              fgClass="text-destructive-foreground"
+            />
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <h2 className="text-xl font-semibold text-foreground border-b border-border pb-2">
+            Form & Input Colors
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="bg-background rounded-lg p-6 shadow-sm border border-input">
+              <p className="font-semibold text-foreground">Input Border</p>
+              <p className="text-sm text-muted-foreground mt-1">border: border-input</p>
+              <input
+                type="text"
+                placeholder="Example input"
+                className="mt-3 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+            <div className="bg-background rounded-lg p-6 shadow-sm border border-border">
+              <p className="font-semibold text-foreground">Ring (Focus)</p>
+              <p className="text-sm text-muted-foreground mt-1">ring: ring-ring</p>
+              <button className="mt-3 rounded-md bg-primary px-4 py-2 text-primary-foreground ring-2 ring-ring ring-offset-2 ring-offset-background">
+                Focused Button
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <h2 className="text-xl font-semibold text-foreground border-b border-border pb-2">
+            Usage Examples
+          </h2>
+
+          <div className="bg-card text-card-foreground rounded-lg p-6 border border-border">
+            <h3 className="text-lg font-semibold">Example Card Component</h3>
+            <p className="text-muted-foreground mt-2">
+              This card uses bg-card and text-card-foreground for the container, with
+              text-muted-foreground for secondary text.
+            </p>
+            <div className="mt-4 flex gap-3">
+              <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:opacity-90 transition-opacity">
+                Primary Action
+              </button>
+              <button className="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:opacity-90 transition-opacity">
+                Secondary
+              </button>
+              <button className="bg-destructive text-destructive-foreground px-4 py-2 rounded-md hover:opacity-90 transition-opacity">
+                Delete
+              </button>
+            </div>
+          </div>
+
+          <div className="bg-muted text-muted-foreground rounded-lg p-6">
+            <h3 className="text-lg font-semibold text-foreground">Muted Section</h3>
+            <p className="mt-2">
+              Use bg-muted for subtle background sections. The text here uses
+              text-muted-foreground for a subdued appearance.
+            </p>
+          </div>
+
+          <div className="bg-accent text-accent-foreground rounded-lg p-6">
+            <h3 className="text-lg font-semibold">Accent Highlight</h3>
+            <p className="mt-2">
+              Use bg-accent for highlighted or hover states. Common for menu items,
+              list selections, etc.
+            </p>
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <h2 className="text-xl font-semibold text-foreground border-b border-border pb-2">
+            Text Hierarchy
+          </h2>
+          <div className="bg-card rounded-lg p-6 border border-border space-y-3">
+            <p className="text-foreground font-semibold">
+              Primary text (text-foreground) - Use for headings and important content
+            </p>
+            <p className="text-muted-foreground">
+              Secondary text (text-muted-foreground) - Use for descriptions and less
+              important content
+            </p>
+            <p className="text-primary">
+              Link/accent text (text-primary) - Use for links and interactive elements
+            </p>
+            <p className="text-destructive">
+              Error text (text-destructive) - Use for error messages and warnings
+            </p>
+          </div>
+        </section>
+
+        <footer className="text-muted-foreground text-sm pt-8 border-t border-border">
+          <p>
+            Always use semantic color classes for consistent theming and dark mode support.
+            Avoid hardcoded colors like bg-blue-600, text-white, text-gray-500, etc.
+          </p>
+        </footer>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/styles.css b/ui/src/styles.css
index a136513..d885d1a 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -2,96 +2,154 @@
 
 @import 'tw-animate-css';
 
-@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400;0,700;1,700&family=Inter:wght@400&family=Roboto+Mono:wght@400;500;700&display=swap');
 
 @custom-variant dark (&:is(.dark *));
 
+/* ============================================
+   NEAR LEGION - Global Styles
+   ============================================ */
+
 body {
   @apply m-0;
-  font-family: 'Red Hat Mono', monospace;
+  font-family: 'Roboto Mono', ui-monospace, monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family:
-    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: 'Roboto Mono', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
+/* ============================================
+   CSS Custom Properties - NEAR Legion Theme
+   ============================================ */
+
 :root {
+  /* Core colors - Dark theme by default */
+  --background: oklch(0.07 0 0);
+  --foreground: oklch(1 0 0);
+
+  /* Card surfaces */
+  --card: oklch(0.12 0.005 260);
+  --card-foreground: oklch(1 0 0);
+
+  /* Popover/dropdown */
+  --popover: oklch(0.09 0 0);
+  --popover-foreground: oklch(1 0 0);
+
+  /* Primary - NEAR Legion Green */
+  --primary: oklch(0.85 0.25 145);
+  --primary-foreground: oklch(0.07 0 0);
+
+  /* Secondary */
+  --secondary: oklch(0.15 0 0);
+  --secondary-foreground: oklch(1 0 0);
+
+  /* Muted */
+  --muted: oklch(0.15 0 0);
+  --muted-foreground: oklch(0.7 0 0);
+
+  /* Accent - Orange */
+  --accent: oklch(0.75 0.18 50);
+  --accent-foreground: oklch(0.07 0 0);
+
+  /* Destructive */
+  --destructive: oklch(0.6 0.25 25);
+  --destructive-foreground: oklch(1 0 0);
+
+  /* Border & Input - using semi-transparent green */
+  --border: oklch(0.85 0.25 145 / 0.3);
+  --input: oklch(0.85 0.25 145 / 0.2);
+  --ring: oklch(0.85 0.25 145 / 0.5);
+
+  /* Chart colors */
+  --chart-1: oklch(0.85 0.25 145);
+  --chart-2: oklch(0.75 0.18 50);
+  --chart-3: oklch(0.6 0.2 250);
+  --chart-4: oklch(0.55 0.25 290);
+  --chart-5: oklch(0.7 0.2 145);
+
+  /* Radius - sharp edges for cyberpunk look */
+  --radius: 0rem;
+
+  /* NEAR brand colors */
+  --near-green: oklch(0.85 0.25 145);
+  --near-green-hover: oklch(0.9 0.28 145);
+  --near-green-light: oklch(0.85 0.25 145 / 0.15);
+  --near-orange: oklch(0.75 0.18 50);
+  --near-blue: oklch(0.6 0.2 250);
+  --near-purple: oklch(0.55 0.25 290);
+
+  /* Sidebar */
+  --sidebar: oklch(0.09 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(0.85 0.25 145);
+  --sidebar-primary-foreground: oklch(0.07 0 0);
+  --sidebar-accent: oklch(0.15 0 0);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0.85 0.25 145 / 0.2);
+  --sidebar-ring: oklch(0.85 0.25 145 / 0.5);
+}
+
+/* Light mode overrides (if needed) */
+.light {
   --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.07 0 0);
+  --card: oklch(0.97 0 0);
+  --card-foreground: oklch(0.07 0 0);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.871 0.006 286.286);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --near-green: #00ec97;
-  --near-green-hover: #00d66f;
-  --near-green-light: #d4fced;
-  --near-blue: #3d7fff;
-  --near-purple: #635bff;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.871 0.006 286.286);
+  --popover-foreground: oklch(0.07 0 0);
+  --primary: oklch(0.6 0.2 155);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0 0);
+  --secondary-foreground: oklch(0.07 0 0);
+  --muted: oklch(0.95 0 0);
+  --muted-foreground: oklch(0.4 0 0);
+  --accent: oklch(0.75 0.18 50);
+  --accent-foreground: oklch(1 0 0);
+  --border: oklch(0.6 0.2 155 / 0.3);
+  --input: oklch(0.6 0.2 155 / 0.2);
+  --ring: oklch(0.6 0.2 155 / 0.5);
+  --sidebar: oklch(0.97 0 0);
+  --sidebar-foreground: oklch(0.07 0 0);
+  --sidebar-primary: oklch(0.6 0.2 155);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.92 0 0);
+  --sidebar-accent-foreground: oklch(0.07 0 0);
+  --sidebar-border: oklch(0.6 0.2 155 / 0.2);
+  --sidebar-ring: oklch(0.6 0.2 155 / 0.5);
 }
 
+/* Dark mode (default for NEAR Legion) */
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.141 0.005 285.823);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.141 0.005 285.823);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.274 0.006 286.033);
-  --input: oklch(0.274 0.006 286.033);
-  --ring: oklch(0.442 0.017 285.786);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.274 0.006 286.033);
-  --sidebar-ring: oklch(0.442 0.017 285.786);
+  --background: oklch(0.07 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.12 0.005 260);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.09 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(0.85 0.25 145);
+  --primary-foreground: oklch(0.07 0 0);
+  --secondary: oklch(0.15 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.15 0 0);
+  --muted-foreground: oklch(0.7 0 0);
+  --accent: oklch(0.75 0.18 50);
+  --accent-foreground: oklch(0.07 0 0);
+  --destructive: oklch(0.6 0.25 25);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.85 0.25 145 / 0.3);
+  --input: oklch(0.85 0.25 145 / 0.2);
+  --ring: oklch(0.85 0.25 145 / 0.5);
+  --sidebar: oklch(0.09 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(0.85 0.25 145);
+  --sidebar-primary-foreground: oklch(0.07 0 0);
+  --sidebar-accent: oklch(0.15 0 0);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0.85 0.25 145 / 0.2);
+  --sidebar-ring: oklch(0.85 0.25 145 / 0.5);
 }
 
 @theme inline {
@@ -131,6 +189,12 @@ code {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* NEAR Legion custom colors */
+  --color-near-green: var(--near-green);
+  --color-near-orange: var(--near-orange);
+  --color-near-blue: var(--near-blue);
+  --color-near-purple: var(--near-purple);
 }
 
 @layer base {
@@ -148,4 +212,204 @@ code {
     min-height: 100%;
     min-height: 100dvh;
   }
+
+  /* Selection styling */
+  ::selection {
+    background: var(--border);
+    color: var(--foreground);
+  }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--background);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 0;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--ring);
+  }
+}
+
+/* ============================================
+   NEAR Legion - Utility Classes
+   ============================================ */
+
+@layer utilities {
+  /* Glow effects */
+  .glow-primary {
+    box-shadow: 0 0 20px oklch(0.85 0.25 145 / 0.5);
+  }
+
+  .glow-accent {
+    box-shadow: 0 0 20px oklch(0.75 0.18 50 / 0.5);
+  }
+
+  .text-glow-primary {
+    text-shadow: 0 0 8px oklch(0.85 0.25 145 / 0.7);
+  }
+
+  .text-glow-accent {
+    text-shadow: 0 0 8px oklch(0.75 0.18 50 / 0.7);
+  }
+
+  /* Cyberpunk border effect */
+  .border-cyber {
+    position: relative;
+  }
+
+  .border-cyber::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 2px solid var(--ring);
+    transform: translate(4px, 4px);
+    pointer-events: none;
+    transition: transform 0.3s ease;
+  }
+
+  .border-cyber:hover::after {
+    transform: translate(0, 0);
+  }
+
+  /* Grid pattern background */
+  .bg-grid {
+    background-image:
+      linear-gradient(oklch(0.85 0.25 145 / 0.03) 1px, transparent 1px),
+      linear-gradient(90deg, oklch(0.85 0.25 145 / 0.03) 1px, transparent 1px);
+    background-size: 50px 50px;
+  }
+
+  /* Scanline effect */
+  .scanlines::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      oklch(0 0 0 / 0.1) 2px,
+      oklch(0 0 0 / 0.1) 4px
+    );
+    pointer-events: none;
+  }
+}
+
+/* ============================================
+   Animations
+   ============================================ */
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 5px oklch(0.85 0.25 145 / 0.5);
+  }
+  50% {
+    box-shadow: 0 0 20px oklch(0.85 0.25 145 / 0.8);
+  }
+}
+
+@keyframes flicker {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.8; }
+}
+
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@keyframes blink-caret {
+  from, to { border-color: transparent; }
+  50% { border-color: var(--primary); }
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.animate-flicker {
+  animation: flicker 0.15s ease-in-out infinite;
+}
+
+/* ============================================
+   Wallet Connector Popup Styles
+   ============================================ */
+
+.hot-connector-popup * {
+  box-sizing: border-box;
+  font-family: 'Roboto Mono', ui-monospace, monospace;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  color: #fff;
+}
+
+.hot-connector-popup *::-webkit-scrollbar {
+  display: none;
+}
+
+.hot-connector-popup .modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100000000;
+  background-color: oklch(0 0 0 / 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  backdrop-filter: blur(4px);
+}
+
+.hot-connector-popup .modal-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 420px;
+  width: 100%;
+  border: 2px solid var(--border);
+  background: var(--popover);
+}
+
+.hot-connector-popup .modal-header {
+  display: flex;
+  padding: 16px;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-bottom: 1px solid var(--sidebar-border);
+  width: 100%;
+}
+
+.hot-connector-popup .modal-header p {
+  color: var(--primary);
+  font-size: 18px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.hot-connector-popup .connect-item {
+  display: flex;
+  padding: 12px;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.hot-connector-popup .connect-item:hover {
+  background: var(--near-green-light);
+  border-color: var(--border);
 }

From 5d97eb2ccb553df4f81267d85469195326ca6a39 Mon Sep 17 00:00:00 2001
From: jean-philippe martel <jpmartel98@gmail.com>
Date: Mon, 26 Jan 2026 17:16:59 -0500
Subject: [PATCH 2/4] remod htlm thing added builders page

---
 ui/index.html                                 |  15 -
 ui/src/components/builders/BuilderDetails.tsx | 174 +++++++++++
 ui/src/components/builders/BuilderList.tsx    |  36 +++
 .../components/builders/BuilderListItem.tsx   |  65 ++++
 ui/src/components/builders/index.ts           |   3 +
 ui/src/components/chat/ChatHeader.tsx         |  46 +++
 ui/src/components/chat/ChatInput.tsx          | 127 ++++----
 ui/src/components/chat/ChatMessage.tsx        |  27 +-
 ui/src/components/chat/ChatMessages.tsx       |  52 ++++
 ui/src/components/chat/ChatPage.tsx           |  91 ++----
 ui/src/components/chat/RankBadge.tsx          |  19 +-
 ui/src/components/chat/index.ts               |   6 +
 ui/src/components/layout/Footer.tsx           |  14 +
 ui/src/components/layout/Header.tsx           |  61 ++++
 ui/src/components/layout/index.ts             |   2 +
 ui/src/components/ui/badge.tsx                |  10 +-
 ui/src/components/ui/button.tsx               |  26 +-
 ui/src/components/ui/card.tsx                 |  12 +-
 ui/src/components/ui/input.tsx                |  10 +-
 ui/src/routeTree.gen.ts                       |  21 ++
 ui/src/routes/_layout.tsx                     |  68 +---
 ui/src/routes/_layout/_authenticated.tsx      |  10 +-
 .../_layout/_authenticated/settings.tsx       |  12 +-
 ui/src/routes/_layout/_page.tsx               |   2 +-
 ui/src/routes/_layout/_page/builders.tsx      | 293 ++++++++++++++++++
 ui/src/routes/_layout/login.tsx               |  17 +-
 ui/src/styles.css                             |  43 ++-
 27 files changed, 993 insertions(+), 269 deletions(-)
 create mode 100644 ui/src/components/builders/BuilderDetails.tsx
 create mode 100644 ui/src/components/builders/BuilderList.tsx
 create mode 100644 ui/src/components/builders/BuilderListItem.tsx
 create mode 100644 ui/src/components/builders/index.ts
 create mode 100644 ui/src/components/chat/ChatHeader.tsx
 create mode 100644 ui/src/components/chat/ChatMessages.tsx
 create mode 100644 ui/src/components/chat/index.ts
 create mode 100644 ui/src/components/layout/Footer.tsx
 create mode 100644 ui/src/components/layout/Header.tsx
 create mode 100644 ui/src/components/layout/index.ts
 create mode 100644 ui/src/routes/_layout/_page/builders.tsx

diff --git a/ui/index.html b/ui/index.html
index 2a8e4ba..b97d956 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -29,21 +29,6 @@
         }
       })();
     </script>
-
-    <!-- Dev runtime config fallback (when not served via host) -->
-    <script>
-      if (!window.__RUNTIME_CONFIG__ && window.location.port === '3002') {
-        window.__RUNTIME_CONFIG__ = {
-          env: 'development',
-          title: 'agent',
-          hostUrl: 'http://localhost:3001',
-          ui: { url: 'http://localhost:3002' },
-          apiBase: '/api',
-          rpcBase: '/api/rpc'
-        };
-      }
-    </script>
-    
     <style>
       /* Minimal shell reset - matches host for dev consistency */
       *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
diff --git a/ui/src/components/builders/BuilderDetails.tsx b/ui/src/components/builders/BuilderDetails.tsx
new file mode 100644
index 0000000..5ddd89e
--- /dev/null
+++ b/ui/src/components/builders/BuilderDetails.tsx
@@ -0,0 +1,174 @@
+/**
+ * Builder Details Component
+ * Right panel showing selected builder info
+ */
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import type { Builder } from "./BuilderListItem";
+
+interface BuilderDetailsProps {
+  builder: Builder;
+}
+
+export function BuilderDetails({ builder }: BuilderDetailsProps) {
+  return (
+    <div className="flex-1 border border-primary/30 bg-background h-full overflow-y-auto">
+      <div className="p-4 sm:p-6 space-y-6">
+        {/* Header */}
+        <BuilderHeader builder={builder} />
+
+        {/* Skills */}
+        <BuilderSkills tags={builder.tags} />
+
+        {/* About */}
+        <BuilderAbout description={builder.description} />
+
+        {/* Projects */}
+        <BuilderProjects projects={builder.projects} />
+
+        {/* Socials */}
+        {builder.socials && <BuilderSocials socials={builder.socials} />}
+      </div>
+    </div>
+  );
+}
+
+function BuilderHeader({ builder }: { builder: Builder }) {
+  return (
+    <div className="flex items-start gap-4">
+      <Avatar className="size-16 sm:size-14 border-2 border-primary/60">
+        <AvatarImage src={builder.avatar || undefined} />
+        <AvatarFallback className="bg-primary/20 text-primary text-lg sm:text-base font-mono font-bold">
+          {builder.displayName.slice(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <div className="space-y-2">
+        <h2 className="text-xl sm:text-xl font-bold text-foreground">
+          {builder.displayName}
+        </h2>
+        <p className="font-mono text-primary text-sm sm:text-sm">{builder.accountId}</p>
+        <span className="inline-block text-xs bg-primary/25 text-primary px-3 py-1.5 font-mono font-medium">
+          {builder.role}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function BuilderSkills({ tags }: { tags: string[] }) {
+  return (
+    <div className="space-y-3">
+      <h3 className="text-sm text-muted-foreground font-mono uppercase tracking-wider">
+        Skills
+      </h3>
+      <div className="flex flex-wrap gap-2">
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="text-sm bg-muted/60 text-foreground px-3 py-1.5 border border-border/50"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function BuilderAbout({ description }: { description: string }) {
+  return (
+    <div className="space-y-3">
+      <h3 className="text-sm text-muted-foreground font-mono uppercase tracking-wider">
+        About
+      </h3>
+      <p className="text-foreground text-base leading-relaxed">{description}</p>
+    </div>
+  );
+}
+
+function BuilderProjects({
+  projects,
+}: {
+  projects: { name: string; description: string; status: string }[];
+}) {
+  return (
+    <div className="space-y-3">
+      <h3 className="text-sm text-muted-foreground font-mono uppercase tracking-wider">
+        Building
+      </h3>
+      <div className="space-y-3">
+        {projects.map((project) => (
+          <div
+            key={project.name}
+            className="p-4 border border-border/50 bg-muted/30 space-y-2"
+          >
+            <div className="flex items-center justify-between gap-2">
+              <span className="font-mono text-foreground font-semibold text-base">
+                {project.name}
+              </span>
+              <ProjectStatus status={project.status} />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {project.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ProjectStatus({ status }: { status: string }) {
+  const statusClass =
+    status === "Active"
+      ? "bg-primary/30 text-primary border-primary/40"
+      : status === "In Development"
+        ? "bg-accent/30 text-accent border-accent/40"
+        : status === "Beta"
+          ? "bg-blue-500/30 text-blue-400 border-blue-500/40"
+          : "bg-muted text-muted-foreground border-border";
+
+  return (
+    <span className={`text-[10px] px-2 py-0.5 font-mono font-medium border ${statusClass}`}>
+      {status}
+    </span>
+  );
+}
+
+function BuilderSocials({
+  socials,
+}: {
+  socials: { github?: string; twitter?: string };
+}) {
+  if (!socials.github && !socials.twitter) return null;
+
+  return (
+    <div className="space-y-3">
+      <h3 className="text-sm text-muted-foreground font-mono uppercase tracking-wider">
+        Connect
+      </h3>
+      <div className="flex flex-wrap gap-4">
+        {socials.github && (
+          <a
+            href={`https://github.com/${socials.github}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-primary hover:text-primary/80 transition-colors font-mono underline underline-offset-4"
+          >
+            github/{socials.github}
+          </a>
+        )}
+        {socials.twitter && (
+          <a
+            href={`https://twitter.com/${socials.twitter}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-primary hover:text-primary/80 transition-colors font-mono underline underline-offset-4"
+          >
+            @{socials.twitter}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/components/builders/BuilderList.tsx b/ui/src/components/builders/BuilderList.tsx
new file mode 100644
index 0000000..e6c6056
--- /dev/null
+++ b/ui/src/components/builders/BuilderList.tsx
@@ -0,0 +1,36 @@
+/**
+ * Builder List Component
+ * Left panel showing all builders
+ */
+
+import { BuilderListItem, type Builder } from "./BuilderListItem";
+
+interface BuilderListProps {
+  builders: Builder[];
+  selectedId: string;
+  onSelect: (builder: Builder) => void;
+}
+
+export function BuilderList({ builders, selectedId, onSelect }: BuilderListProps) {
+  return (
+    <div className="w-full lg:w-[350px] shrink-0 border border-primary/30 bg-background flex flex-col h-full">
+      <div className="px-4 py-3 border-b border-primary/20 bg-primary/5 shrink-0">
+        <span className="text-sm text-primary font-mono uppercase tracking-wider font-medium">
+          {builders.length} Legionnaires
+        </span>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        <div className="divide-y divide-border/40">
+          {builders.map((builder) => (
+            <BuilderListItem
+              key={builder.id}
+              builder={builder}
+              isSelected={selectedId === builder.id}
+              onSelect={() => onSelect(builder)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/components/builders/BuilderListItem.tsx b/ui/src/components/builders/BuilderListItem.tsx
new file mode 100644
index 0000000..6bce4c8
--- /dev/null
+++ b/ui/src/components/builders/BuilderListItem.tsx
@@ -0,0 +1,65 @@
+/**
+ * Builder List Item Component
+ * Single builder entry in the list
+ */
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+export interface Builder {
+  id: string;
+  accountId: string;
+  displayName: string;
+  avatar: string | null;
+  role: string;
+  tags: string[];
+  description: string;
+  projects: {
+    name: string;
+    description: string;
+    status: string;
+  }[];
+  socials: {
+    github?: string;
+    twitter?: string;
+  };
+}
+
+interface BuilderListItemProps {
+  builder: Builder;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+export function BuilderListItem({ builder, isSelected, onSelect }: BuilderListItemProps) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={`w-full text-left px-4 py-4 transition-colors hover:bg-primary/10 ${
+        isSelected
+          ? "bg-primary/15 border-l-3 border-l-primary"
+          : "hover:border-l-3 hover:border-l-primary/50"
+      }`}
+    >
+      <div className="flex gap-4 items-center">
+        <Avatar className="size-12 border-2 border-primary/40">
+          <AvatarImage src={builder.avatar || undefined} />
+          <AvatarFallback className="bg-primary/10 text-primary text-sm font-mono font-bold">
+            {builder.displayName.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex-1 min-w-0 space-y-1.5">
+          <span className="font-mono text-base text-foreground font-medium truncate block">
+            {builder.accountId}
+          </span>
+          <div className="flex flex-wrap gap-1">
+            <span className="text-xs text-primary/80 bg-primary/10 px-2 py-0.5 border border-primary/20">
+              {builder.role}
+            </span>
+          </div>
+        </div>
+        <span className="text-muted-foreground/50 text-xl">›</span>
+      </div>
+    </button>
+  );
+}
diff --git a/ui/src/components/builders/index.ts b/ui/src/components/builders/index.ts
new file mode 100644
index 0000000..c1bfebb
--- /dev/null
+++ b/ui/src/components/builders/index.ts
@@ -0,0 +1,3 @@
+export { BuilderList } from "./BuilderList";
+export { BuilderDetails } from "./BuilderDetails";
+export { BuilderListItem, type Builder } from "./BuilderListItem";
diff --git a/ui/src/components/chat/ChatHeader.tsx b/ui/src/components/chat/ChatHeader.tsx
new file mode 100644
index 0000000..6b8f084
--- /dev/null
+++ b/ui/src/components/chat/ChatHeader.tsx
@@ -0,0 +1,46 @@
+/**
+ * Chat Header Component
+ * Shows conversation info and controls
+ */
+
+import { RankBadge } from "./RankBadge";
+
+interface ChatHeaderProps {
+  conversationId: string | null;
+  isStreaming: boolean;
+  onNewConversation: () => void;
+}
+
+export function ChatHeader({
+  conversationId,
+  isStreaming,
+  onNewConversation,
+}: ChatHeaderProps) {
+  return (
+    <div className="shrink-0 flex items-center justify-between px-3 py-2 border-b border-border/20 bg-background/50">
+      <div className="flex items-center gap-2">
+        <h1 className="text-sm font-semibold text-primary">Chat</h1>
+        {conversationId && (
+          <span className="text-[10px] text-muted-foreground/40 font-mono hidden sm:inline">
+            {conversationId.slice(0, 8)}
+          </span>
+        )}
+        {isStreaming && (
+          <span className="flex items-center gap-1 text-[10px] text-primary/70">
+            <span className="w-1 h-1 bg-primary rounded-full animate-pulse" />
+            <span className="hidden sm:inline">streaming</span>
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <RankBadge />
+        <button
+          onClick={onNewConversation}
+          className="px-2 py-1 text-[10px] font-mono border border-border/30 hover:border-primary/30 bg-transparent hover:bg-primary/5 text-muted-foreground/60 hover:text-primary transition-all"
+        >
+          new
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/components/chat/ChatInput.tsx b/ui/src/components/chat/ChatInput.tsx
index c5b614d..f3f1e51 100644
--- a/ui/src/components/chat/ChatInput.tsx
+++ b/ui/src/components/chat/ChatInput.tsx
@@ -1,8 +1,6 @@
 /**
- * ChatInput Component
- *
- * Input field with send/stop button for the chat interface.
- * Supports keyboard shortcuts (Enter to send).
+ * Chat Input Component
+ * Input field with send/stop button for the chat interface
  */
 
 import { useState, useRef, useEffect } from "react";
@@ -35,7 +33,7 @@ export function ChatInput({
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.style.height = "auto";
-      inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 150)}px`;
+      inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`;
     }
   }, [value]);
 
@@ -55,8 +53,8 @@ export function ChatInput({
   };
 
   return (
-    <div className="flex items-end gap-2">
-      <div className="relative flex-1">
+    <div className="shrink-0 px-3 py-2 border-t border-border/20 bg-background/50">
+      <div className="flex items-end gap-2">
         <textarea
           ref={inputRef}
           value={value}
@@ -66,62 +64,73 @@ export function ChatInput({
           placeholder={placeholder}
           rows={1}
           className={cn(
-            "w-full resize-none rounded-lg border border-border/50 bg-muted/20 px-4 py-3",
-            "text-sm placeholder:text-muted-foreground/60",
-            "focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/20",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "transition-all duration-200"
+            "flex-1 resize-none bg-muted/10 px-2.5 py-2",
+            "text-sm placeholder:text-muted-foreground/30",
+            "border-0 outline-none focus:bg-muted/15",
+            "disabled:cursor-not-allowed disabled:opacity-40",
+            "transition-colors"
           )}
         />
+
+        {isStreaming ? (
+          <StopButton onClick={onStop} />
+        ) : (
+          <SendButton onClick={handleSubmit} disabled={disabled || !value.trim()} />
+        )}
       </div>
+    </div>
+  );
+}
 
-      {isStreaming ? (
-        <button
-          onClick={onStop}
-          className={cn(
-            "flex h-11 w-11 items-center justify-center rounded-lg",
-            "bg-destructive text-destructive-foreground",
-            "hover:bg-destructive/90 active:scale-95",
-            "transition-all duration-200"
-          )}
-          title="Stop generating"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="h-5 w-5"
-          >
-            <rect x="6" y="6" width="12" height="12" rx="2" />
-          </svg>
-        </button>
-      ) : (
-        <button
-          onClick={handleSubmit}
-          disabled={disabled || !value.trim()}
-          className={cn(
-            "flex h-11 w-11 items-center justify-center rounded-lg",
-            "bg-primary text-primary-foreground",
-            "hover:bg-primary/90 active:scale-95",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            "transition-all duration-200"
-          )}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="h-5 w-5"
-          >
-            <path d="m22 2-7 20-4-9-9-4Z" />
-            <path d="M22 2 11 13" />
-          </svg>
-        </button>
+function SendButton({ onClick, disabled }: { onClick: () => void; disabled: boolean }) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "shrink-0 flex h-8 w-8 items-center justify-center",
+        "bg-primary/90 text-primary-foreground",
+        "hover:bg-primary active:scale-95",
+        "disabled:cursor-not-allowed disabled:opacity-20",
+        "transition-all"
       )}
-    </div>
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-3.5 w-3.5"
+      >
+        <path d="m22 2-7 20-4-9-9-4Z" />
+        <path d="M22 2 11 13" />
+      </svg>
+    </button>
+  );
+}
+
+function StopButton({ onClick }: { onClick?: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "shrink-0 flex h-8 w-8 items-center justify-center",
+        "bg-destructive/80 text-destructive-foreground",
+        "hover:bg-destructive active:scale-95",
+        "transition-all"
+      )}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="h-3 w-3"
+      >
+        <rect x="6" y="6" width="12" height="12" rx="1" />
+      </svg>
+    </button>
   );
 }
diff --git a/ui/src/components/chat/ChatMessage.tsx b/ui/src/components/chat/ChatMessage.tsx
index 7350d0b..76f089c 100644
--- a/ui/src/components/chat/ChatMessage.tsx
+++ b/ui/src/components/chat/ChatMessage.tsx
@@ -1,7 +1,6 @@
 /**
- * ChatMessage Component
- *
- * Displays a single chat message.
+ * Chat Message Component
+ * Displays a single chat message
  */
 
 import { cn } from "../../lib/utils";
@@ -23,39 +22,41 @@ export function ChatMessage({ message, isStreaming }: ChatMessageProps) {
   const isUser = message.role === "user";
 
   return (
-    <div className={cn("flex gap-3", isUser && "flex-row-reverse")}>
+    <div className={cn("flex gap-2", isUser && "flex-row-reverse")}>
       {/* Avatar */}
       <div
         className={cn(
-          "flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-xs font-mono",
-          isUser ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground"
+          "shrink-0 w-6 h-6 flex items-center justify-center text-[9px] font-mono font-bold uppercase",
+          isUser
+            ? "bg-primary/15 text-primary/80"
+            : "bg-muted/30 text-muted-foreground/60"
         )}
       >
         {isUser ? "you" : "ai"}
       </div>
 
       {/* Message Content */}
-      <div className={cn("flex-1 max-w-[85%]", isUser && "flex flex-col items-end")}>
+      <div className={cn("flex-1 max-w-[90%]", isUser && "flex flex-col items-end")}>
         <div
           className={cn(
-            "rounded-lg px-4 py-3 text-sm",
+            "px-2.5 py-1.5 text-sm",
             isUser
-              ? "bg-primary text-primary-foreground"
-              : "bg-muted/50 border border-border/50"
+              ? "bg-primary/80 text-primary-foreground"
+              : "bg-muted/20 text-foreground/90"
           )}
         >
           <div className="whitespace-pre-wrap break-words leading-relaxed">
             {message.content}
             {isStreaming && (
-              <span className="inline-block w-2 h-4 ml-1 bg-primary/60 animate-pulse rounded-sm" />
+              <span className="inline-block w-1 h-3 ml-0.5 bg-primary/50 animate-pulse" />
             )}
           </div>
         </div>
 
         {/* Timestamp */}
-        <div className="mt-1 text-xs text-muted-foreground/50 font-mono">
+        <div className="mt-0.5 text-[9px] text-muted-foreground/30 font-mono">
           {isStreaming ? (
-            <span className="text-primary">generating...</span>
+            <span className="text-primary/40">generating...</span>
           ) : (
             new Date(message.createdAt).toLocaleTimeString([], {
               hour: "2-digit",
diff --git a/ui/src/components/chat/ChatMessages.tsx b/ui/src/components/chat/ChatMessages.tsx
new file mode 100644
index 0000000..1fe7f68
--- /dev/null
+++ b/ui/src/components/chat/ChatMessages.tsx
@@ -0,0 +1,52 @@
+/**
+ * Chat Messages Component
+ * Scrollable container for chat messages
+ */
+
+import { RefObject } from "react";
+import { ChatMessage } from "./ChatMessage";
+
+interface Message {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  createdAt: string;
+  isStreaming?: boolean;
+}
+
+interface ChatMessagesProps {
+  messages: Message[];
+  messagesEndRef: RefObject<HTMLDivElement>;
+}
+
+export function ChatMessages({ messages, messagesEndRef }: ChatMessagesProps) {
+  return (
+    <div className="flex-1 min-h-0 overflow-y-auto px-3 py-3 space-y-3">
+      {messages.length === 0 ? (
+        <EmptyState />
+      ) : (
+        messages.map((message) => (
+          <ChatMessage
+            key={message.id}
+            message={message}
+            isStreaming={message.isStreaming}
+          />
+        ))
+      )}
+      <div ref={messagesEndRef} />
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full text-center">
+      <h2 className="text-base font-semibold mb-1 text-primary/80">
+        Start a conversation
+      </h2>
+      <p className="text-xs text-muted-foreground/50">
+        Ask anything to get started
+      </p>
+    </div>
+  );
+}
diff --git a/ui/src/components/chat/ChatPage.tsx b/ui/src/components/chat/ChatPage.tsx
index 668d0b5..d334070 100644
--- a/ui/src/components/chat/ChatPage.tsx
+++ b/ui/src/components/chat/ChatPage.tsx
@@ -1,5 +1,5 @@
 /**
- * Shared Chat Page Component
+ * Chat Page Component
  * Used by both / and /chat routes
  */
 
@@ -11,9 +11,9 @@ import {
   isCompleteData,
   isErrorData,
 } from "../../utils/stream";
-import { ChatMessage } from "../../components/chat/ChatMessage";
-import { ChatInput } from "../../components/chat/ChatInput";
-import { RankBadge } from "../../components/chat/RankBadge";
+import { ChatHeader } from "./ChatHeader";
+import { ChatMessages } from "./ChatMessages";
+import { ChatInput } from "./ChatInput";
 
 interface Message {
   id: string;
@@ -96,7 +96,6 @@ export function ChatPage() {
           case 'chunk':
             if (isChunkData(event.data)) {
               const chunkData = event.data;
-              // Append chunk to assistant message
               pendingContentRef.current += chunkData.content;
               scheduleFlush();
             }
@@ -107,12 +106,10 @@ export function ChatPage() {
               const completeData = event.data;
               flushPendingContent();
 
-              // Update conversation ID if new
               if (!conversationId) {
                 setConversationId(completeData.conversationId);
               }
 
-              // Update message with final data
               setMessages(prev => prev.map(msg =>
                 msg.id === assistantMessageId
                   ? {
@@ -128,7 +125,6 @@ export function ChatPage() {
           case 'error':
             if (isErrorData(event.data)) {
               toast.error(event.data.message);
-              // Remove streaming message on error
               pendingContentRef.current = "";
               setMessages(prev => prev.filter(msg => msg.id !== assistantMessageId));
             }
@@ -137,7 +133,6 @@ export function ChatPage() {
       }
     } catch (error) {
       if (error instanceof Error && error.name === 'AbortError') {
-        // User cancelled, remove incomplete message
         pendingContentRef.current = "";
         setMessages(prev => prev.filter(msg => msg.id !== assistantMessageId));
       } else {
@@ -172,65 +167,25 @@ export function ChatPage() {
   };
 
   return (
-    <div className="flex h-[calc(100vh-8rem)] -mx-4 sm:-mx-6 flex-col">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border/50">
-        <div className="flex items-center gap-3">
-          <h1 className="text-sm font-medium">Chat</h1>
-          {conversationId && (
-            <span className="text-xs text-muted-foreground font-mono">
-              {conversationId.slice(0, 8)}...
-            </span>
-          )}
-          {isStreaming && (
-            <span className="flex items-center gap-1.5 text-xs text-primary">
-              <span className="w-2 h-2 bg-primary rounded-full animate-pulse" />
-              streaming
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <RankBadge />
-          <button
-            onClick={handleNewConversation}
-            className="px-3 py-1.5 text-xs font-mono border border-border hover:border-primary/50 bg-muted/20 hover:bg-muted/40 transition-all rounded-lg"
-          >
-            new chat
-          </button>
-        </div>
-      </div>
-
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
-        {messages.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full max-w-2xl mx-auto px-4">
-            <h2 className="text-lg font-medium mb-2">Start a conversation</h2>
-            <p className="text-sm text-muted-foreground text-center">
-              Ask a question or start typing below.
-            </p>
-          </div>
-        ) : (
-          messages.map((message) => (
-            <ChatMessage
-              key={message.id}
-              message={message}
-              isStreaming={message.isStreaming}
-            />
-          ))
-        )}
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Input */}
-      <div className="px-4 py-3 border-t border-border/50">
-        <ChatInput
-          onSend={handleSendMessage}
-          onStop={handleStopStreaming}
-          disabled={false}
-          isStreaming={isStreaming}
-          placeholder="Type a message..."
-        />
-      </div>
+    <div className="h-full flex flex-col">
+      <ChatHeader
+        conversationId={conversationId}
+        isStreaming={isStreaming}
+        onNewConversation={handleNewConversation}
+      />
+
+      <ChatMessages
+        messages={messages}
+        messagesEndRef={messagesEndRef}
+      />
+
+      <ChatInput
+        onSend={handleSendMessage}
+        onStop={handleStopStreaming}
+        disabled={false}
+        isStreaming={isStreaming}
+        placeholder="Type a message..."
+      />
     </div>
   );
 }
diff --git a/ui/src/components/chat/RankBadge.tsx b/ui/src/components/chat/RankBadge.tsx
index c60f614..ce603c8 100644
--- a/ui/src/components/chat/RankBadge.tsx
+++ b/ui/src/components/chat/RankBadge.tsx
@@ -48,40 +48,39 @@ export function RankBadge() {
   let badgeColor: string;
 
   if (!data.hasNft || !data.rank) {
-    // User has Initiate but no skillcapes
     displayRank = 'INITIATE';
-    badgeColor = 'bg-muted text-muted-foreground';
+    badgeColor = 'bg-muted/20 text-muted-foreground/50';
   } else {
-    // User has earned a skillcape
     switch (data.rank) {
       case 'legendary':
         displayRank = 'MYTHIC';
-        badgeColor = 'bg-yellow-500 text-yellow-900 dark:bg-yellow-600 dark:text-yellow-50';
+        badgeColor = 'bg-yellow-500/10 text-yellow-500/80';
         break;
       case 'epic':
         displayRank = 'PRIME';
-        badgeColor = 'bg-purple-500 text-purple-900 dark:bg-purple-600 dark:text-purple-50';
+        badgeColor = 'bg-purple-500/10 text-purple-400/80';
         break;
       case 'rare':
         displayRank = 'VANGUARD';
-        badgeColor = 'bg-blue-500 text-blue-900 dark:bg-blue-600 dark:text-blue-50';
+        badgeColor = 'bg-blue-500/10 text-blue-400/80';
         break;
       case 'common':
         displayRank = 'ASCENDANT';
-        badgeColor = 'bg-green-500 text-green-900 dark:bg-green-600 dark:text-green-50';
+        badgeColor = 'bg-primary/10 text-primary/80';
         break;
       default:
         displayRank = 'INITIATE';
-        badgeColor = 'bg-muted text-muted-foreground';
+        badgeColor = 'bg-muted/20 text-muted-foreground/50';
     }
   }
 
   return (
     <div
-      className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold ${badgeColor}`}
+      className={`inline-flex items-center gap-1 px-1.5 py-0.5 text-[9px] font-bold font-mono uppercase tracking-wide ${badgeColor}`}
       title="Your NEAR Legion rank"
     >
-      🫡 {displayRank}
+      <span>🫡</span>
+      <span>{displayRank}</span>
     </div>
   );
 }
diff --git a/ui/src/components/chat/index.ts b/ui/src/components/chat/index.ts
new file mode 100644
index 0000000..2f105c7
--- /dev/null
+++ b/ui/src/components/chat/index.ts
@@ -0,0 +1,6 @@
+export { ChatPage } from "./ChatPage";
+export { ChatHeader } from "./ChatHeader";
+export { ChatMessages } from "./ChatMessages";
+export { ChatMessage } from "./ChatMessage";
+export { ChatInput } from "./ChatInput";
+export { RankBadge } from "./RankBadge";
diff --git a/ui/src/components/layout/Footer.tsx b/ui/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..9277537
--- /dev/null
+++ b/ui/src/components/layout/Footer.tsx
@@ -0,0 +1,14 @@
+export function Footer() {
+  return (
+    <footer className="shrink-0 border-t border-border/20 bg-background/80 backdrop-blur-sm">
+      <div className="px-3 sm:px-4 lg:px-6 py-2">
+        <a
+          href="/api"
+          className="text-[10px] text-muted-foreground/30 hover:text-primary transition-colors font-mono"
+        >
+          api
+        </a>
+      </div>
+    </footer>
+  );
+}
diff --git a/ui/src/components/layout/Header.tsx b/ui/src/components/layout/Header.tsx
new file mode 100644
index 0000000..a201417
--- /dev/null
+++ b/ui/src/components/layout/Header.tsx
@@ -0,0 +1,61 @@
+import { Link } from "@tanstack/react-router";
+import { ThemeToggle } from "../theme-toggle";
+
+interface HeaderProps {
+  accountId?: string | null;
+  userRole?: string | null;
+  onSignOut: () => void;
+}
+
+export function Header({ accountId, userRole, onSignOut }: HeaderProps) {
+  return (
+    <header className="shrink-0 border-b border-border/20 bg-background/80 backdrop-blur-sm">
+      <div className="px-3 sm:px-4 lg:px-6 py-2.5">
+        <div className="flex items-center justify-end gap-3 sm:gap-4">
+          <Link
+            to="/builders"
+            className="text-xs text-muted-foreground/50 hover:text-primary transition-colors font-mono"
+          >
+            builders
+          </Link>
+          <ThemeToggle />
+          {accountId ? (
+            <>
+              {userRole === "admin" && (
+                <Link
+                  to="/dashboard"
+                  className="text-xs text-muted-foreground/50 hover:text-primary transition-colors font-mono"
+                >
+                  admin
+                </Link>
+              )}
+              <Link
+                to="/settings"
+                className="text-xs text-muted-foreground/50 hover:text-primary transition-colors font-mono"
+              >
+                settings
+              </Link>
+              <span className="text-xs text-primary/70 font-mono truncate max-w-[100px] sm:max-w-[160px]">
+                {accountId}
+              </span>
+              <button
+                type="button"
+                onClick={onSignOut}
+                className="text-xs text-muted-foreground/50 hover:text-primary transition-colors font-mono"
+              >
+                exit
+              </button>
+            </>
+          ) : (
+            <Link
+              to="/login"
+              className="text-xs text-muted-foreground/50 hover:text-primary transition-colors font-mono"
+            >
+              login
+            </Link>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/ui/src/components/layout/index.ts b/ui/src/components/layout/index.ts
new file mode 100644
index 0000000..33b6397
--- /dev/null
+++ b/ui/src/components/layout/index.ts
@@ -0,0 +1,2 @@
+export { Header } from "./Header";
+export { Footer } from "./Footer";
diff --git a/ui/src/components/ui/badge.tsx b/ui/src/components/ui/badge.tsx
index 62ae33f..330a18a 100644
--- a/ui/src/components/ui/badge.tsx
+++ b/ui/src/components/ui/badge.tsx
@@ -5,18 +5,18 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  'inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-mono font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-2.5 gap-1 [&>svg]:pointer-events-none transition-colors overflow-hidden',
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+          'bg-primary/20 text-primary [a&]:hover:bg-primary/30',
         secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+          'bg-muted/50 text-muted-foreground [a&]:hover:bg-muted/70',
         destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-destructive/20 text-destructive [a&]:hover:bg-destructive/30',
         outline:
-          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+          'border border-border/50 text-foreground/80 [a&]:hover:border-primary/40 [a&]:hover:text-primary',
       },
     },
     defaultVariants: {
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
index 057cec5..36dab16 100644
--- a/ui/src/components/ui/button.tsx
+++ b/ui/src/components/ui/button.tsx
@@ -5,28 +5,28 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-xs sm:text-sm font-medium font-mono transition-all disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-primary/30 focus-visible:ring-2 border",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground border-primary/80 hover:bg-primary/80',
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-destructive/90 text-white border-destructive/80 hover:bg-destructive',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border-border/50 bg-transparent hover:bg-muted/30 hover:border-primary/40 hover:text-primary',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'bg-muted/30 text-foreground border-border/30 hover:bg-muted/50',
         ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
+          'border-transparent hover:bg-muted/30 hover:text-primary',
+        link: 'text-primary underline-offset-4 hover:underline border-transparent',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
+        default: 'h-8 px-3 py-1.5',
+        sm: 'h-7 gap-1 px-2.5 text-xs',
+        lg: 'h-9 px-4',
+        icon: 'size-8',
+        'icon-sm': 'size-7',
+        'icon-lg': 'size-9',
       },
     },
     defaultVariants: {
diff --git a/ui/src/components/ui/card.tsx b/ui/src/components/ui/card.tsx
index dbcf8b3..54998ab 100644
--- a/ui/src/components/ui/card.tsx
+++ b/ui/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'bg-card/30 text-card-foreground flex flex-col gap-3 border border-border/30 p-3',
         className
       )}
       {...props}
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-header"
       className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-3',
         className
       )}
       {...props}
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-title"
-      className={cn('leading-none font-semibold', className)}
+      className={cn('leading-none font-semibold text-sm sm:text-base', className)}
       {...props}
     />
   );
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn('text-muted-foreground/70 text-xs sm:text-sm', className)}
       {...props}
     />
   );
@@ -65,7 +65,7 @@ function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-content"
-      className={cn('px-6', className)}
+      className={cn('', className)}
       {...props}
     />
   );
@@ -75,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-footer"
-      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      className={cn('flex items-center [.border-t]:pt-3', className)}
       {...props}
     />
   );
diff --git a/ui/src/components/ui/input.tsx b/ui/src/components/ui/input.tsx
index d2f3382..a18e06b 100644
--- a/ui/src/components/ui/input.tsx
+++ b/ui/src/components/ui/input.tsx
@@ -8,9 +8,13 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        'file:text-foreground placeholder:text-muted-foreground/40 selection:bg-primary selection:text-primary-foreground',
+        'border border-border/40 bg-muted/10 h-8 w-full min-w-0 px-2.5 py-1.5',
+        'text-sm font-mono transition-all outline-none',
+        'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40',
+        'focus-visible:border-primary/40 focus-visible:bg-muted/20',
+        'aria-invalid:border-destructive/50',
         className
       )}
       {...props}
diff --git a/ui/src/routeTree.gen.ts b/ui/src/routeTree.gen.ts
index f71aafd..5bd0177 100644
--- a/ui/src/routeTree.gen.ts
+++ b/ui/src/routeTree.gen.ts
@@ -17,6 +17,7 @@ import { Route as LayoutAuthenticatedRouteImport } from './routes/_layout/_authe
 import { Route as LayoutAuthenticatedIndexRouteImport } from './routes/_layout/_authenticated/index'
 import { Route as LayoutPageTermsOfServiceRouteImport } from './routes/_layout/_page/terms-of-service'
 import { Route as LayoutPagePrivacyPolicyRouteImport } from './routes/_layout/_page/privacy-policy'
+import { Route as LayoutPageBuildersRouteImport } from './routes/_layout/_page/builders'
 import { Route as LayoutAuthenticatedSettingsRouteImport } from './routes/_layout/_authenticated/settings'
 import { Route as LayoutAuthenticatedAdminRouteImport } from './routes/_layout/_authenticated/_admin'
 import { Route as LayoutAuthenticatedChatIndexRouteImport } from './routes/_layout/_authenticated/chat/index'
@@ -62,6 +63,11 @@ const LayoutPagePrivacyPolicyRoute = LayoutPagePrivacyPolicyRouteImport.update({
   path: '/privacy-policy',
   getParentRoute: () => LayoutPageRoute,
 } as any)
+const LayoutPageBuildersRoute = LayoutPageBuildersRouteImport.update({
+  id: '/builders',
+  path: '/builders',
+  getParentRoute: () => LayoutPageRoute,
+} as any)
 const LayoutAuthenticatedSettingsRoute =
   LayoutAuthenticatedSettingsRouteImport.update({
     id: '/settings',
@@ -97,6 +103,7 @@ export interface FileRoutesByFullPath {
   '/test-colors': typeof TestColorsRoute
   '/login': typeof LayoutLoginRoute
   '/settings': typeof LayoutAuthenticatedSettingsRoute
+  '/builders': typeof LayoutPageBuildersRoute
   '/privacy-policy': typeof LayoutPagePrivacyPolicyRoute
   '/terms-of-service': typeof LayoutPageTermsOfServiceRoute
   '/dashboard': typeof LayoutAuthenticatedAdminDashboardRoute
@@ -108,6 +115,7 @@ export interface FileRoutesByTo {
   '/test-colors': typeof TestColorsRoute
   '/login': typeof LayoutLoginRoute
   '/settings': typeof LayoutAuthenticatedSettingsRoute
+  '/builders': typeof LayoutPageBuildersRoute
   '/privacy-policy': typeof LayoutPagePrivacyPolicyRoute
   '/terms-of-service': typeof LayoutPageTermsOfServiceRoute
   '/dashboard': typeof LayoutAuthenticatedAdminDashboardRoute
@@ -123,6 +131,7 @@ export interface FileRoutesById {
   '/_layout/login': typeof LayoutLoginRoute
   '/_layout/_authenticated/_admin': typeof LayoutAuthenticatedAdminRouteWithChildren
   '/_layout/_authenticated/settings': typeof LayoutAuthenticatedSettingsRoute
+  '/_layout/_page/builders': typeof LayoutPageBuildersRoute
   '/_layout/_page/privacy-policy': typeof LayoutPagePrivacyPolicyRoute
   '/_layout/_page/terms-of-service': typeof LayoutPageTermsOfServiceRoute
   '/_layout/_authenticated/': typeof LayoutAuthenticatedIndexRoute
@@ -137,6 +146,7 @@ export interface FileRouteTypes {
     | '/test-colors'
     | '/login'
     | '/settings'
+    | '/builders'
     | '/privacy-policy'
     | '/terms-of-service'
     | '/dashboard'
@@ -148,6 +158,7 @@ export interface FileRouteTypes {
     | '/test-colors'
     | '/login'
     | '/settings'
+    | '/builders'
     | '/privacy-policy'
     | '/terms-of-service'
     | '/dashboard'
@@ -162,6 +173,7 @@ export interface FileRouteTypes {
     | '/_layout/login'
     | '/_layout/_authenticated/_admin'
     | '/_layout/_authenticated/settings'
+    | '/_layout/_page/builders'
     | '/_layout/_page/privacy-policy'
     | '/_layout/_page/terms-of-service'
     | '/_layout/_authenticated/'
@@ -233,6 +245,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutPagePrivacyPolicyRouteImport
       parentRoute: typeof LayoutPageRoute
     }
+    '/_layout/_page/builders': {
+      id: '/_layout/_page/builders'
+      path: '/builders'
+      fullPath: '/builders'
+      preLoaderRoute: typeof LayoutPageBuildersRouteImport
+      parentRoute: typeof LayoutPageRoute
+    }
     '/_layout/_authenticated/settings': {
       id: '/_layout/_authenticated/settings'
       path: '/settings'
@@ -306,11 +325,13 @@ const LayoutAuthenticatedRouteWithChildren =
   LayoutAuthenticatedRoute._addFileChildren(LayoutAuthenticatedRouteChildren)
 
 interface LayoutPageRouteChildren {
+  LayoutPageBuildersRoute: typeof LayoutPageBuildersRoute
   LayoutPagePrivacyPolicyRoute: typeof LayoutPagePrivacyPolicyRoute
   LayoutPageTermsOfServiceRoute: typeof LayoutPageTermsOfServiceRoute
 }
 
 const LayoutPageRouteChildren: LayoutPageRouteChildren = {
+  LayoutPageBuildersRoute: LayoutPageBuildersRoute,
   LayoutPagePrivacyPolicyRoute: LayoutPagePrivacyPolicyRoute,
   LayoutPageTermsOfServiceRoute: LayoutPageTermsOfServiceRoute,
 }
diff --git a/ui/src/routes/_layout.tsx b/ui/src/routes/_layout.tsx
index 26ed92b..806ffac 100644
--- a/ui/src/routes/_layout.tsx
+++ b/ui/src/routes/_layout.tsx
@@ -1,11 +1,10 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import {
   createFileRoute,
-  Link,
   Outlet,
   useRouter,
 } from "@tanstack/react-router";
-import { ThemeToggle } from "../components/theme-toggle";
+import { Header, Footer } from "../components/layout";
 import { authClient } from "../lib/auth-client";
 import { sessionQueryOptions } from "../lib/session";
 import { queryClient } from "../utils/orpc";
@@ -37,65 +36,18 @@ function Layout() {
 
   return (
     <div className="h-dvh w-full flex flex-col bg-background text-foreground overflow-hidden">
-      <header className="shrink-0 border-b border-border/50">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-3 sm:py-4">
-          <div className="flex items-center justify-end gap-4">
-            <ThemeToggle />
-            {accountId ? (
-              <>
-                {userRole === "admin" && (
-                  <Link
-                    to="/dashboard"
-                    className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono"
-                  >
-                    admin
-                  </Link>
-                )}
-                <Link
-                  to="/settings"
-                  className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono"
-                >
-                  settings
-                </Link>
-                <span className="text-xs text-muted-foreground font-mono">
-                  {accountId}
-                </span>
-                <button
-                  type="button"
-                  onClick={handleSignOut}
-                  className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono"
-                >
-                  sign out
-                </button>
-              </>
-            ) : (
-              <Link
-                to="/login"
-                className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono"
-              >
-                login
-              </Link>
-            )}
-          </div>
-        </div>
-      </header>
+      <Header
+        accountId={accountId}
+        userRole={userRole}
+        onSignOut={handleSignOut}
+      />
 
-      <main className="flex-1 w-full min-h-0 overflow-auto flex justify-center">
-        <div className="w-full max-w-3xl px-4 sm:px-6 py-8 sm:py-12">
-          <Outlet />
-        </div>
+      {/* Main content area - this is the ONLY scroll container */}
+      <main className="flex-1 min-h-0 overflow-hidden">
+        <Outlet />
       </main>
 
-      <footer className="shrink-0 border-t border-border/50">
-        <div className="max-w-5xl mx-auto px-4 sm:px-6 py-3 sm:py-4">
-          <a
-            href="/api"
-            className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono"
-          >
-            api
-          </a>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }
diff --git a/ui/src/routes/_layout/_authenticated.tsx b/ui/src/routes/_layout/_authenticated.tsx
index bb04706..5899181 100644
--- a/ui/src/routes/_layout/_authenticated.tsx
+++ b/ui/src/routes/_layout/_authenticated.tsx
@@ -14,5 +14,13 @@ export const Route = createFileRoute("/_layout/_authenticated")({
     }
     return { session };
   },
-  component: () => <Outlet />,
+  component: AuthenticatedLayout,
 });
+
+function AuthenticatedLayout() {
+  return (
+    <div className="h-full overflow-y-auto px-3 sm:px-4 lg:px-6 py-4 sm:py-6">
+      <Outlet />
+    </div>
+  );
+}
diff --git a/ui/src/routes/_layout/_authenticated/settings.tsx b/ui/src/routes/_layout/_authenticated/settings.tsx
index 9386449..f6b966f 100644
--- a/ui/src/routes/_layout/_authenticated/settings.tsx
+++ b/ui/src/routes/_layout/_authenticated/settings.tsx
@@ -7,15 +7,15 @@ export const Route = createFileRoute("/_layout/_authenticated/settings")({
 
 function SettingsPage() {
   return (
-    <div className="max-w-2xl mx-auto">
-      <div className="mb-8">
-        <h1 className="text-2xl font-semibold mb-2">Settings</h1>
-        <p className="text-sm text-muted-foreground">
-          Manage your preferences and default values
+    <div className="w-full">
+      <div className="mb-4">
+        <h1 className="text-lg sm:text-xl font-bold text-primary mb-1">Settings</h1>
+        <p className="text-sm text-muted-foreground/70">
+          Manage your preferences
         </p>
       </div>
 
-      <div className="space-y-6">
+      <div className="space-y-4">
         <section>
           <KVEditor />
         </section>
diff --git a/ui/src/routes/_layout/_page.tsx b/ui/src/routes/_layout/_page.tsx
index 35e5b21..eadba04 100644
--- a/ui/src/routes/_layout/_page.tsx
+++ b/ui/src/routes/_layout/_page.tsx
@@ -6,7 +6,7 @@ export const Route = createFileRoute("/_layout/_page")({
 
 function PageLayout() {
   return (
-    <div className="max-w-4xl mx-auto px-4 md:px-8 py-12">
+    <div className="h-full flex flex-col px-3 sm:px-4 lg:px-6 py-4 sm:py-6">
       <Outlet />
     </div>
   );
diff --git a/ui/src/routes/_layout/_page/builders.tsx b/ui/src/routes/_layout/_page/builders.tsx
new file mode 100644
index 0000000..8eb248e
--- /dev/null
+++ b/ui/src/routes/_layout/_page/builders.tsx
@@ -0,0 +1,293 @@
+/**
+ * Builders Page
+ * Displays NEAR Legion builders directory
+ */
+
+import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { BuilderList, BuilderDetails, BuilderListItem, type Builder } from "@/components/builders";
+
+export const Route = createFileRoute("/_layout/_page/builders")({
+  component: BuildersPage,
+});
+
+// Mock data - replace with API call later
+const mockBuilders: Builder[] = [
+  {
+    id: "1",
+    accountId: "alice.near",
+    displayName: "Alice",
+    avatar: null,
+    role: "Core Developer",
+    tags: ["Smart Contracts", "Rust", "DeFi"],
+    description:
+      "Building decentralized finance primitives on NEAR. Focused on creating trustless lending protocols and automated market makers. Previously worked on Ethereum DeFi projects before joining the NEAR ecosystem.",
+    projects: [
+      {
+        name: "LendNEAR",
+        description: "Decentralized lending protocol with dynamic interest rates",
+        status: "Active",
+      },
+      {
+        name: "SwapLegion",
+        description: "AMM with concentrated liquidity for NEAR tokens",
+        status: "In Development",
+      },
+    ],
+    socials: {
+      github: "alice-near",
+      twitter: "alice_builds",
+    },
+  },
+  {
+    id: "2",
+    accountId: "bob.near",
+    displayName: "Bob",
+    avatar: null,
+    role: "Frontend Lead",
+    tags: ["React", "UI/UX", "TypeScript"],
+    description:
+      "Crafting beautiful user experiences for NEAR dApps. Specializing in React and design systems. Passionate about making Web3 accessible to everyone through intuitive interfaces.",
+    projects: [
+      {
+        name: "NEAR Kit",
+        description: "Component library for NEAR dApps",
+        status: "Active",
+      },
+    ],
+    socials: {
+      github: "bob-frontend",
+    },
+  },
+  {
+    id: "3",
+    accountId: "carol.near",
+    displayName: "Carol",
+    avatar: null,
+    role: "Protocol Engineer",
+    tags: ["Blockchain", "Security", "Auditing"],
+    description:
+      "Security researcher and protocol engineer. Conducting audits and building secure infrastructure for the NEAR ecosystem. Background in cryptography and formal verification.",
+    projects: [
+      {
+        name: "SafeGuard",
+        description: "Smart contract security scanning tool",
+        status: "Beta",
+      },
+      {
+        name: "AuditDAO",
+        description: "Decentralized security audit coordination",
+        status: "Planning",
+      },
+    ],
+    socials: {
+      github: "carol-sec",
+      twitter: "carol_audits",
+    },
+  },
+  {
+    id: "4",
+    accountId: "dave.near",
+    displayName: "Dave",
+    avatar: null,
+    role: "DevRel",
+    tags: ["Documentation", "Education", "Community"],
+    description:
+      "Developer relations and education. Creating tutorials, documentation, and educational content to onboard new developers to the NEAR ecosystem. Running workshops and hackathons.",
+    projects: [
+      {
+        name: "NEAR Academy",
+        description: "Interactive learning platform for NEAR development",
+        status: "Active",
+      },
+    ],
+    socials: {
+      twitter: "dave_teaches",
+    },
+  },
+  {
+    id: "5",
+    accountId: "eve.near",
+    displayName: "Eve",
+    avatar: null,
+    role: "Infrastructure",
+    tags: ["Indexers", "APIs", "DevOps"],
+    description:
+      "Building the backbone infrastructure for NEAR applications. Maintaining indexers, APIs, and developer tooling. Focused on reliability and scalability.",
+    projects: [
+      {
+        name: "NEAR Graph",
+        description: "High-performance indexer for NEAR blockchain data",
+        status: "Active",
+      },
+      {
+        name: "RPC Plus",
+        description: "Enhanced RPC endpoints with caching and analytics",
+        status: "Active",
+      },
+    ],
+    socials: {
+      github: "eve-infra",
+    },
+  },
+  {
+    id: "6",
+    accountId: "frank.near",
+    displayName: "Frank",
+    avatar: null,
+    role: "Smart Contract Dev",
+    tags: ["Rust", "WASM", "Testing"],
+    description: "Building secure and efficient smart contracts for the NEAR ecosystem.",
+    projects: [{ name: "ContractKit", description: "Smart contract templates", status: "Active" }],
+    socials: { github: "frank-contracts" },
+  },
+  {
+    id: "7",
+    accountId: "grace.near",
+    displayName: "Grace",
+    avatar: null,
+    role: "Product Designer",
+    tags: ["Figma", "UX Research", "Prototyping"],
+    description: "Designing intuitive Web3 experiences that bridge complexity with usability.",
+    projects: [{ name: "NEAR Design System", description: "Unified design language", status: "Active" }],
+    socials: { twitter: "grace_designs" },
+  },
+  {
+    id: "8",
+    accountId: "henry.near",
+    displayName: "Henry",
+    avatar: null,
+    role: "Data Engineer",
+    tags: ["Analytics", "Python", "SQL"],
+    description: "Building data pipelines and analytics tools for blockchain insights.",
+    projects: [{ name: "ChainMetrics", description: "On-chain analytics dashboard", status: "Beta" }],
+    socials: { github: "henry-data" },
+  },
+  {
+    id: "9",
+    accountId: "iris.near",
+    displayName: "Iris",
+    avatar: null,
+    role: "Community Lead",
+    tags: ["Growth", "Events", "Partnerships"],
+    description: "Growing the NEAR community through events, partnerships, and engagement.",
+    projects: [{ name: "NEAR Meetups", description: "Global community events", status: "Active" }],
+    socials: { twitter: "iris_community" },
+  },
+  {
+    id: "10",
+    accountId: "jack.near",
+    displayName: "Jack",
+    avatar: null,
+    role: "Mobile Developer",
+    tags: ["React Native", "iOS", "Android"],
+    description: "Building mobile-first experiences for NEAR dApps.",
+    projects: [{ name: "NEAR Wallet Mobile", description: "Mobile wallet app", status: "In Development" }],
+    socials: { github: "jack-mobile" },
+  },
+  {
+    id: "11",
+    accountId: "kate.near",
+    displayName: "Kate",
+    avatar: null,
+    role: "Technical Writer",
+    tags: ["Documentation", "Tutorials", "API Docs"],
+    description: "Making NEAR accessible through clear and comprehensive documentation.",
+    projects: [{ name: "NEAR Docs", description: "Official documentation", status: "Active" }],
+    socials: { github: "kate-docs" },
+  },
+  {
+    id: "12",
+    accountId: "leo.near",
+    displayName: "Leo",
+    avatar: null,
+    role: "Game Developer",
+    tags: ["Unity", "Gaming", "NFTs"],
+    description: "Creating blockchain-powered gaming experiences on NEAR.",
+    projects: [{ name: "NEAR Quest", description: "Play-to-earn RPG", status: "Beta" }],
+    socials: { twitter: "leo_games" },
+  },
+];
+
+function BuildersPage() {
+  const [selectedBuilder, setSelectedBuilder] = useState<Builder>(mockBuilders[0]);
+  const [showList, setShowList] = useState(true);
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      {/* Header */}
+      <div className="space-y-1">
+        <h1 className="text-xl sm:text-2xl font-bold text-primary">
+          NEAR Legion Builders
+        </h1>
+        <p className="text-muted-foreground text-sm sm:text-base">
+          Discover the builders shaping the NEAR ecosystem
+        </p>
+      </div>
+
+      {/* Mobile: Tab switcher */}
+      <div className="flex lg:hidden gap-2">
+        <button
+          onClick={() => setShowList(true)}
+          className={`flex-1 py-2.5 text-sm font-medium transition-colors ${
+            showList
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted/30 text-muted-foreground"
+          }`}
+        >
+          All Builders ({mockBuilders.length})
+        </button>
+        <button
+          onClick={() => setShowList(false)}
+          className={`flex-1 py-2.5 text-sm font-medium transition-colors ${
+            !showList
+              ? "bg-primary text-primary-foreground"
+              : "bg-muted/30 text-muted-foreground"
+          }`}
+        >
+          {selectedBuilder.displayName}
+        </button>
+      </div>
+
+      {/* Mobile: Conditional panels - full height */}
+      <div className="lg:hidden flex-1 min-h-0 overflow-y-auto">
+        {showList ? (
+          <div className="border border-primary/30 bg-background">
+            <div className="divide-y divide-border/40">
+              {mockBuilders.map((builder) => (
+                <div
+                  key={builder.id}
+                  onClick={() => {
+                    setSelectedBuilder(builder);
+                    setShowList(false);
+                  }}
+                >
+                  <BuilderListItem
+                    builder={builder}
+                    isSelected={selectedBuilder.id === builder.id}
+                    onSelect={() => {
+                      setSelectedBuilder(builder);
+                      setShowList(false);
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <BuilderDetails builder={selectedBuilder} />
+        )}
+      </div>
+
+      {/* Desktop: Side by side - full height */}
+      <div className="hidden lg:flex lg:flex-row gap-4 flex-1 min-h-0">
+        <BuilderList
+          builders={mockBuilders}
+          selectedId={selectedBuilder.id}
+          onSelect={setSelectedBuilder}
+        />
+        <BuilderDetails builder={selectedBuilder} />
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/routes/_layout/login.tsx b/ui/src/routes/_layout/login.tsx
index 842d34b..7b7dcb2 100644
--- a/ui/src/routes/_layout/login.tsx
+++ b/ui/src/routes/_layout/login.tsx
@@ -150,14 +150,21 @@ function LoginPage() {
   }
 
   return (
-    <div className="min-h-[80vh] w-full flex items-center justify-center px-6">
-      <div className="w-full max-w-sm space-y-3">
+    <div className="min-h-[60vh] w-full flex items-center justify-center">
+      <div className="w-full max-w-sm space-y-4">
+        <div className="text-center mb-6">
+          <h1 className="text-xl sm:text-2xl font-bold text-primary mb-1">Welcome</h1>
+          <p className="text-sm text-muted-foreground/70">
+            Connect your NEAR wallet to continue
+          </p>
+        </div>
+
         {!accountId ? (
           <button
             type="button"
             onClick={handleWalletConnect}
             disabled={isLoading}
-            className="w-full px-6 py-4 text-sm font-mono border border-border hover:border-primary/50 bg-muted/20 hover:bg-muted/40 transition-all rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full px-4 py-3 text-sm font-mono border border-border/50 hover:border-primary/50 bg-muted/10 hover:bg-primary/10 text-foreground hover:text-primary transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {isConnectingWallet ? "connecting..." : "connect near wallet"}
           </button>
@@ -167,7 +174,7 @@ function LoginPage() {
               type="button"
               onClick={handleNearSignIn}
               disabled={isLoading}
-              className="w-full px-6 py-4 text-sm font-mono border border-border hover:border-primary/50 bg-muted/20 hover:bg-muted/40 transition-all rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full px-4 py-3 text-sm font-mono border border-primary/40 bg-primary/10 hover:bg-primary/20 text-primary transition-all disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isSigningInWithNear
                 ? "signing in..."
@@ -177,7 +184,7 @@ function LoginPage() {
               type="button"
               onClick={handleWalletDisconnect}
               disabled={isLoading}
-              className="w-full px-6 py-3 text-xs font-mono text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              className="w-full px-4 py-2 text-xs font-mono text-muted-foreground/60 hover:text-muted-foreground transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isDisconnectingWallet ? "disconnecting..." : "disconnect"}
             </button>
diff --git a/ui/src/styles.css b/ui/src/styles.css
index d885d1a..5c551dd 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -205,12 +205,36 @@ code {
   html {
     height: 100%;
     height: 100dvh;
+    /* Better base font size for readability */
+    font-size: 16px;
   }
 
   body {
     @apply bg-background text-foreground;
     min-height: 100%;
     min-height: 100dvh;
+    line-height: 1.5;
+  }
+
+  /* Compact typography */
+  h1 {
+    @apply text-xl sm:text-2xl font-bold tracking-tight;
+  }
+
+  h2 {
+    @apply text-lg sm:text-xl font-bold tracking-tight;
+  }
+
+  h3 {
+    @apply text-base sm:text-lg font-semibold;
+  }
+
+  h4 {
+    @apply text-sm sm:text-base font-semibold;
+  }
+
+  p {
+    @apply text-sm leading-relaxed;
   }
 
   /* Selection styling */
@@ -219,24 +243,31 @@ code {
     color: var(--foreground);
   }
 
-  /* Scrollbar styling */
+  /* Minimal scrollbar styling */
   ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 4px;
+    height: 4px;
   }
 
   ::-webkit-scrollbar-track {
-    background: var(--background);
+    background: transparent;
   }
 
   ::-webkit-scrollbar-thumb {
-    background: var(--border);
+    background: oklch(0.85 0.25 145 / 0.2);
     border-radius: 0;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--ring);
+    background: oklch(0.85 0.25 145 / 0.4);
   }
+
+  /* Firefox scrollbar */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: oklch(0.85 0.25 145 / 0.2) transparent;
+  }
+
 }
 
 /* ============================================

From 3b3663aef876d9bbc5878ca6bdc407ad1c5dfc85 Mon Sep 17 00:00:00 2001
From: jean-philippe martel <jpmartel98@gmail.com>
Date: Mon, 26 Jan 2026 18:30:42 -0500
Subject: [PATCH 3/4] fixed mess and css

---
 ui/index.html             | 25 -------------------------
 ui/rsbuild.config.ts      |  8 +++++++-
 ui/src/lib/auth-client.ts | 11 ++++++++---
 ui/src/styles.css         |  7 +++++++
 4 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index b97d956..a222d81 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -19,33 +19,8 @@
     
     <!-- Theme -->
     <meta name="theme-color" content="#171717" />
-    
-    <!-- Theme flash prevention - runs before any render -->
-    <script>
-      (function() {
-        var t = localStorage.getItem('theme');
-        if (t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-          document.documentElement.classList.add('dark');
-        }
-      })();
-    </script>
-    <style>
-      /* Minimal shell reset - matches host for dev consistency */
-      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-      html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
-      body { 
-        min-height: 100%; 
-        -webkit-tap-highlight-color: transparent;
-        touch-action: manipulation;
-      }
-      #app { min-height: 100vh; }
-      @supports (min-height: 100dvh) {
-        #app { min-height: 100dvh; }
-      }
-    </style>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/ui/rsbuild.config.ts b/ui/rsbuild.config.ts
index bb8a4a9..cfe42ea 100644
--- a/ui/rsbuild.config.ts
+++ b/ui/rsbuild.config.ts
@@ -133,6 +133,12 @@ export default defineConfig({
       "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
       "Access-Control-Allow-Headers": "Content-Type",
     },
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+    },
   },
   tools: {
     rspack: {
@@ -174,7 +180,7 @@ export default defineConfig({
     //   ? `${bosConfig.app.ui.production}/`
     //   : "auto",
     filename: {
-      css: "static/css/[name].css",
+      css: "[name].css",
     },
     copy: [
       {
diff --git a/ui/src/lib/auth-client.ts b/ui/src/lib/auth-client.ts
index d02a221..66fabec 100644
--- a/ui/src/lib/auth-client.ts
+++ b/ui/src/lib/auth-client.ts
@@ -3,10 +3,15 @@ import { createAuthClient } from "better-auth/react";
 import { siwnClient } from "better-near-auth/client";
 
 function getBaseURL(): string {
-  if (typeof window !== 'undefined' && window.__RUNTIME_CONFIG__?.hostUrl) {
-    return window.__RUNTIME_CONFIG__.hostUrl;
-  }
   if (typeof window !== 'undefined') {
+    // In standalone dev mode (port 3002), use local origin with proxy
+    if (window.location.port === '3002') {
+      return window.location.origin;
+    }
+    // When loaded via host, use hostUrl from runtime config
+    if (window.__RUNTIME_CONFIG__?.hostUrl) {
+      return window.__RUNTIME_CONFIG__.hostUrl;
+    }
     return window.location.origin;
   }
   return '';
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 5c551dd..e2f92b3 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -214,6 +214,13 @@ code {
     min-height: 100%;
     min-height: 100dvh;
     line-height: 1.5;
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+  }
+
+  #app {
+    min-height: 100vh;
+    min-height: 100dvh;
   }
 
   /* Compact typography */

From 8e1eb772c64d9e11b12987c097e425fe5ddb3aa7 Mon Sep 17 00:00:00 2001
From: jean-philippe martel <jpmartel98@gmail.com>
Date: Mon, 26 Jan 2026 18:45:44 -0500
Subject: [PATCH 4/4] Fix the css

---
 ui/index.html | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index a222d81..311dc0c 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -1,24 +1,40 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <meta name="color-scheme" content="light dark" />
     <meta name="format-detection" content="telephone=no" />
-    
+
     <!-- Favicon -->
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.json" />
-    
+
     <!-- Preconnect to font origins -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    
+
     <!-- Theme -->
     <meta name="theme-color" content="#171717" />
+
+    <!-- Theme flash prevention - runs before any render -->
+    <script>
+      (function () {
+        var t = localStorage.getItem("theme");
+        if (
+          t === "dark" ||
+          (!t && window.matchMedia("(prefers-color-scheme: dark)").matches)
+        ) {
+          document.documentElement.classList.add("dark");
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="app"></div>