diff --git a/client/.gitignore b/client/.gitignore
index bbcc4b5..8b826f7 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -41,3 +41,6 @@ wrangler.toml.lock
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# swc plugin cache
+/.swc/
diff --git a/client/next.config.ts b/client/next.config.ts
index 66e1566..5919d7d 100644
--- a/client/next.config.ts
+++ b/client/next.config.ts
@@ -3,6 +3,8 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
+  // Pin the workspace root — a stray lockfile in $HOME otherwise wins root inference.
+  turbopack: { root: __dirname },
 };
 
 export default nextConfig;
diff --git a/client/src/__tests__/components/auth/GoogleAuthButton.test.tsx b/client/src/__tests__/components/auth/GoogleAuthButton.test.tsx
deleted file mode 100644
index 23a28d9..0000000
--- a/client/src/__tests__/components/auth/GoogleAuthButton.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { GoogleAuthButton } from '@/components/auth/GoogleAuthButton';
-import { isFirebaseConfigured } from '@/lib/firebase';
-
-jest.mock('@/lib/firebase', () => ({
-  isFirebaseConfigured: jest.fn(),
-  getFirebaseAuth: jest.fn(),
-}));
-
-const mockIsFirebaseConfigured = isFirebaseConfigured as jest.MockedFunction<typeof isFirebaseConfigured>;
-
-describe('GoogleAuthButton', () => {
-  it('does not render when Firebase is not configured', () => {
-    mockIsFirebaseConfigured.mockReturnValue(false);
-    const { container } = render(
-      <GoogleAuthButton label="Sign in with Google" onClick={jest.fn()} />
-    );
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders the button when Firebase is configured', () => {
-    mockIsFirebaseConfigured.mockReturnValue(true);
-    render(<GoogleAuthButton label="Sign in with Google" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Sign in with Google/i })).toBeInTheDocument();
-  });
-
-  it('calls onClick when clicked', () => {
-    mockIsFirebaseConfigured.mockReturnValue(true);
-    const onClick = jest.fn().mockResolvedValue(undefined);
-    render(<GoogleAuthButton label="Continue with Google" onClick={onClick} />);
-    fireEvent.click(screen.getByRole('button'));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('shows "Please wait..." and disables button when busy', () => {
-    mockIsFirebaseConfigured.mockReturnValue(true);
-    render(<GoogleAuthButton label="Sign in with Google" onClick={jest.fn()} busy />);
-    expect(screen.getByRole('button')).toBeDisabled();
-    expect(screen.getByText('Please wait...')).toBeInTheDocument();
-  });
-});
diff --git a/client/src/__tests__/components/auth/GoogleAuthPanel.test.tsx b/client/src/__tests__/components/auth/GoogleAuthPanel.test.tsx
new file mode 100644
index 0000000..86e105b
--- /dev/null
+++ b/client/src/__tests__/components/auth/GoogleAuthPanel.test.tsx
@@ -0,0 +1,70 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { GoogleAuthPanel } from '@/components/auth/GoogleAuthPanel';
+import { useAuth } from '@/contexts/AuthContext';
+import { isFirebaseConfigured } from '@/lib/firebase';
+
+const push = jest.fn();
+jest.mock('next/navigation', () => ({ useRouter: () => ({ push }) }));
+jest.mock('@/contexts/AuthContext', () => ({ useAuth: jest.fn() }));
+jest.mock('@/lib/firebase', () => ({ isFirebaseConfigured: jest.fn() }));
+jest.mock('react-hot-toast', () => ({ __esModule: true, default: { success: jest.fn(), error: jest.fn() } }));
+
+const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
+const mockConfigured = isFirebaseConfigured as jest.MockedFunction<typeof isFirebaseConfigured>;
+
+const authState = (over: Partial<ReturnType<typeof useAuth>> = {}) => ({
+  user: null,
+  loading: false,
+  loginWithGoogle: jest.fn().mockResolvedValue(undefined),
+  logout: jest.fn(),
+  refreshUser: jest.fn(),
+  ...over,
+});
+
+beforeEach(() => {
+  push.mockClear();
+  mockConfigured.mockReturnValue(true);
+  mockUseAuth.mockReturnValue(authState());
+});
+
+describe('GoogleAuthPanel', () => {
+  it('offers Google as the only credential in signin mode', () => {
+    render(<GoogleAuthPanel mode="signin" />);
+    expect(screen.getByRole('button', { name: /Continue with Google/i })).toBeInTheDocument();
+    expect(document.querySelectorAll('input')).toHaveLength(0);
+  });
+
+  it('offers Google as the only credential in signup mode', () => {
+    render(<GoogleAuthPanel mode="signup" />);
+    expect(screen.getByRole('button', { name: /Sign up with Google/i })).toBeInTheDocument();
+    expect(document.querySelectorAll('input')).toHaveLength(0);
+  });
+
+  it('signs in and redirects to the dashboard', async () => {
+    const loginWithGoogle = jest.fn().mockResolvedValue(undefined);
+    mockUseAuth.mockReturnValue(authState({ loginWithGoogle }));
+
+    render(<GoogleAuthPanel mode="signin" />);
+    await userEvent.click(screen.getByRole('button', { name: /Continue with Google/i }));
+
+    await waitFor(() => expect(loginWithGoogle).toHaveBeenCalledTimes(1));
+    expect(push).toHaveBeenCalledWith('/dashboard');
+  });
+
+  // Without a password fallback, an unconfigured Firebase is a dead end — the
+  // page has to say so rather than render an empty card.
+  it('explains the dead end when Firebase is not configured', () => {
+    mockConfigured.mockReturnValue(false);
+    render(<GoogleAuthPanel mode="signin" />);
+
+    expect(screen.queryByRole('button', { name: /Google/i })).not.toBeInTheDocument();
+    expect(screen.getByText(/isn't configured on this deployment/i)).toBeInTheDocument();
+  });
+
+  it('redirects an already-authenticated visitor away', async () => {
+    mockUseAuth.mockReturnValue(authState({ user: { id: '1', name: 'Ada', email: 'ada@example.com' } as any }));
+    render(<GoogleAuthPanel mode="signin" />);
+    await waitFor(() => expect(push).toHaveBeenCalledWith('/dashboard'));
+  });
+});
diff --git a/client/src/__tests__/contexts/AuthContext.test.tsx b/client/src/__tests__/contexts/AuthContext.test.tsx
index b810ee5..46499d0 100644
--- a/client/src/__tests__/contexts/AuthContext.test.tsx
+++ b/client/src/__tests__/contexts/AuthContext.test.tsx
@@ -5,9 +5,7 @@ import { api } from '@/lib/api';
 jest.mock('@/lib/api', () => ({
   api: {
     getCurrentUser: jest.fn(),
-    login: jest.fn(),
     logout: jest.fn(),
-    register: jest.fn(),
     googleAuth: jest.fn(),
   },
 }));
@@ -64,34 +62,6 @@ describe('AuthContext', () => {
     await waitFor(() => expect(screen.getByText('User: Alice')).toBeInTheDocument());
   });
 
-  it('login() sets user on success', async () => {
-    mockApi.getCurrentUser.mockRejectedValueOnce(new Error('Not authenticated'));
-    mockApi.login.mockResolvedValueOnce({
-      success: true,
-      data: { user: fakeUser },
-      message: 'ok',
-    });
-
-    function LoginTester() {
-      const { user, loading, login } = useAuth();
-      if (loading) return <div>Loading</div>;
-      return (
-        <div>
-          {user ? <span>User: {user.name}</span> : <button onClick={() => login('a@b.com', 'pass')}>Login</button>}
-        </div>
-      );
-    }
-
-    render(<AuthProvider><LoginTester /></AuthProvider>);
-    await waitFor(() => screen.getByRole('button', { name: 'Login' }));
-
-    await act(async () => {
-      screen.getByRole('button', { name: 'Login' }).click();
-    });
-
-    await waitFor(() => expect(screen.getByText('User: Alice')).toBeInTheDocument());
-  });
-
   it('logout() clears user', async () => {
     mockApi.getCurrentUser.mockResolvedValueOnce({
       success: true,
@@ -122,29 +92,4 @@ describe('AuthContext', () => {
     await waitFor(() => expect(screen.getByText('Logged out')).toBeInTheDocument());
     expect(mockApi.logout).toHaveBeenCalledTimes(1);
   });
-
-  it('register() calls api.register', async () => {
-    mockApi.getCurrentUser.mockRejectedValueOnce(new Error('Not authenticated'));
-    mockApi.register.mockResolvedValueOnce({ success: true, message: 'ok' });
-
-    function RegisterTester() {
-      const { loading, register } = useAuth();
-      if (loading) return <div>Loading</div>;
-      return <button onClick={() => register('Alice', 'a@b.com', 'pass', 'pass')}>Register</button>;
-    }
-
-    render(<AuthProvider><RegisterTester /></AuthProvider>);
-    await waitFor(() => screen.getByRole('button', { name: 'Register' }));
-
-    await act(async () => {
-      screen.getByRole('button', { name: 'Register' }).click();
-    });
-
-    expect(mockApi.register).toHaveBeenCalledWith({
-      name: 'Alice',
-      email: 'a@b.com',
-      password: 'pass',
-      confirmPassword: 'pass',
-    });
-  });
 });
diff --git a/client/src/__tests__/unit/useTheme.test.ts b/client/src/__tests__/unit/useTheme.test.ts
deleted file mode 100644
index 8fd8f35..0000000
--- a/client/src/__tests__/unit/useTheme.test.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { renderHook, act } from '@testing-library/react';
-import { useTheme } from '@/hooks/useTheme';
-
-describe('useTheme', () => {
-  beforeEach(() => {
-    localStorage.clear();
-    document.documentElement.removeAttribute('data-theme');
-  });
-
-  it('defaults to dark theme when localStorage is empty', () => {
-    const { result } = renderHook(() => useTheme());
-    expect(result.current.theme).toBe('dark');
-  });
-
-  it('does not set data-theme attribute for dark (relies on :root defaults)', () => {
-    renderHook(() => useTheme());
-    expect(document.documentElement.getAttribute('data-theme')).toBeNull();
-  });
-
-  it('reads light theme from localStorage on mount', () => {
-    localStorage.setItem('theme', 'light');
-    const { result } = renderHook(() => useTheme());
-    expect(result.current.theme).toBe('light');
-  });
-
-  it('sets data-theme="light" on html element when theme is light', () => {
-    localStorage.setItem('theme', 'light');
-    renderHook(() => useTheme());
-    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
-  });
-
-  it('toggleTheme switches from dark to light', () => {
-    const { result } = renderHook(() => useTheme());
-    expect(result.current.theme).toBe('dark');
-
-    act(() => { result.current.toggleTheme(); });
-
-    expect(result.current.theme).toBe('light');
-  });
-
-  it('toggleTheme switches from light to dark', () => {
-    localStorage.setItem('theme', 'light');
-    const { result } = renderHook(() => useTheme());
-
-    act(() => { result.current.toggleTheme(); });
-
-    expect(result.current.theme).toBe('dark');
-  });
-
-  it('toggleTheme persists the new value to localStorage', () => {
-    const { result } = renderHook(() => useTheme());
-
-    act(() => { result.current.toggleTheme(); });
-
-    expect(localStorage.getItem('theme')).toBe('light');
-  });
-
-  it('toggling to light sets data-theme="light" on html element', () => {
-    const { result } = renderHook(() => useTheme());
-
-    act(() => { result.current.toggleTheme(); });
-
-    expect(document.documentElement.getAttribute('data-theme')).toBe('light');
-  });
-
-  it('toggling back to dark removes data-theme attribute from html element', () => {
-    localStorage.setItem('theme', 'light');
-    const { result } = renderHook(() => useTheme());
-
-    act(() => { result.current.toggleTheme(); });
-
-    expect(document.documentElement.getAttribute('data-theme')).toBeNull();
-  });
-
-  it('double toggle returns to the original theme', () => {
-    const { result } = renderHook(() => useTheme());
-    expect(result.current.theme).toBe('dark');
-
-    act(() => { result.current.toggleTheme(); });
-    act(() => { result.current.toggleTheme(); });
-
-    expect(result.current.theme).toBe('dark');
-    expect(localStorage.getItem('theme')).toBe('dark');
-    expect(document.documentElement.getAttribute('data-theme')).toBeNull();
-  });
-
-  it('ignores invalid localStorage values and defaults to dark', () => {
-    localStorage.setItem('theme', 'invalid-value');
-    const { result } = renderHook(() => useTheme());
-    expect(result.current.theme).toBe('dark');
-  });
-});
diff --git a/client/src/app/dashboard/page.tsx b/client/src/app/dashboard/page.tsx
index 55070ea..6222c7e 100644
--- a/client/src/app/dashboard/page.tsx
+++ b/client/src/app/dashboard/page.tsx
@@ -235,7 +235,11 @@ export default function DashboardPage() {
                     { l: 'Active balancers', v: loadBalancers.filter(b => b.status === 'active').length, sub: `of ${loadBalancers.length} total` },
                     { l: 'Origins total', v: loadBalancers.reduce((a, b) => a + (b.originCount || 0), 0), sub: 'all checks passing', color: 'var(--green)' },
                   ].map((s, i) => (
-                    <div key={i} className="card" style={{ padding: 'clamp(16px, 2vw, 20px)' }}>
+                    <div
+                      key={i}
+                      className="feature-card animate-slide-up"
+                      style={{ padding: 'clamp(16px, 2vw, 20px)', animationDelay: `${i * 0.08}s` }}
+                    >
                       <div className="kicker" style={{ fontSize: 'clamp(9px, 2vw, 11px)' }}>{s.l}</div>
                       <div className="mono" style={{ fontSize: 'clamp(20px, 3vw, 24px)', marginTop: 8, letterSpacing: '-0.02em', color: s.color || 'var(--text)' }}>
                         {s.v}
@@ -269,9 +273,11 @@ export default function DashboardPage() {
                           onClick={() => setStatusFilter(value)}
                           className="btn btn-sm"
                           style={{
-                            background: isActive ? 'var(--bg-2)' : 'transparent',
-                            color: isActive ? 'var(--text)' : 'var(--text-3)',
-                            border: '1px solid var(--line)',
+                            background: isActive ? 'var(--accent-dim)' : '#ffffff0d',
+                            color: isActive ? 'var(--accent)' : 'var(--text-3)',
+                            border: `1px solid ${isActive ? 'var(--accent)' : 'var(--line)'}`,
+                            borderRadius: 999,
+                            fontWeight: isActive ? 600 : 500,
                             fontSize: 'clamp(12px, 2vw, 13px)',
                             padding: 'clamp(6px, 1vw, 8px) clamp(10px, 2vw, 12px)',
                           }}
diff --git a/client/src/app/globals.css b/client/src/app/globals.css
index 0eccc2b..60e434a 100644
--- a/client/src/app/globals.css
+++ b/client/src/app/globals.css
@@ -1,50 +1,42 @@
-@import "tailwindcss";
+/* source("../") bounds auto-detection to src/ — otherwise it crawls from the git
+   root (the whole monorepo) on every PostCSS pass, which Turbopack runs in a
+   fresh ~115MB Node subprocess. */
+@import "tailwindcss" source("../");
 
 /* EdgeBalancer — 2026 */
 :root {
-  --bg: oklch(0.17 0.008 60);
-  --bg-1: oklch(0.21 0.01 60);
-  --bg-2: oklch(0.24 0.012 60);
-  --bg-3: oklch(0.28 0.014 60);
-  --line: oklch(0.32 0.012 60);
-  --line-2: oklch(0.38 0.014 60);
-  --text: oklch(0.96 0.005 80);
-  --text-2: oklch(0.78 0.008 70);
-  --text-3: oklch(0.58 0.008 70);
-  --accent: oklch(0.80 0.17 70);
-  --accent-2: oklch(0.88 0.13 85);
-  --accent-dim: oklch(0.80 0.17 70 / 0.12);
-  --green: oklch(0.78 0.14 150);
-  --red: oklch(0.68 0.20 25);
-  --blue: oklch(0.75 0.12 240);
-  --radius: 6px;
-  --radius-lg: 10px;
-  --shadow: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 0 0 1px var(--line);
-  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
-  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}
-
-[data-theme="light"] {
-  --bg:        oklch(0.97 0.003 80);
-  --bg-1:      oklch(0.94 0.004 80);
-  --bg-2:      oklch(0.91 0.005 80);
-  --bg-3:      oklch(0.87 0.006 80);
-  --line:      oklch(0.82 0.008 70);
-  --line-2:    oklch(0.74 0.010 70);
-  --text:      oklch(0.20 0.012 60);
-  --text-2:    oklch(0.38 0.010 65);
-  --text-3:    oklch(0.55 0.008 70);
-  --accent:    oklch(0.52 0.17 55);
-  --accent-2:  oklch(0.44 0.15 55);
-  --accent-dim: oklch(0.52 0.17 55 / 0.10);
-  --green:     oklch(0.45 0.14 150);
-  --red:       oklch(0.50 0.20 25);
-  --blue:      oklch(0.48 0.12 240);
-  --shadow:    0 1px 3px oklch(0 0 0 / 0.12), 0 0 0 1px var(--line);
+  --bg: #0a0a0f;
+  --bg-1: #14141a;
+  --bg-2: #1a1a1e;
+  --bg-3: #26262c;
+  --line: #ffffff1a;
+  --line-2: #ffffff26;
+  --text: #e0e7ff;
+  --text-2: #cad5e2;
+  --text-3: #62748e;
+  --accent: #f59e0b;
+  --accent-2: #fbbf24;
+  --accent-3: #fcd34d;
+  --accent-dim: #f59e0b1f;
+  --orange: #fe6e00;
+  --orange-2: #ff8b1a;
+  --green: #00d294;
+  --red: #ff6568;
+  --blue: #54a2ff;
+  --violet: #a685ff;
+  --radius: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --shadow: 0 1px 0 0 #ffffff0a inset, 0 0 0 1px var(--line);
+  --glass: #1a1a1e99;
+  --glass-hover: #1a1a1ed9;
+  --mono: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --sans: var(--font-rubik), 'Segoe UI', -apple-system, Arial, sans-serif;
 }
 
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
 body {
   font-family: var(--sans);
   background: var(--bg);
@@ -62,8 +54,8 @@ a { color: inherit; text-decoration: none; }
 .topo {
   position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
   background-image:
-    radial-gradient(circle at 20% 0%, oklch(0.80 0.17 70 / 0.08), transparent 50%),
-    radial-gradient(circle at 80% 100%, oklch(0.75 0.12 240 / 0.06), transparent 50%);
+    radial-gradient(circle at 20% 0%, #f59e0b14, transparent 50%),
+    radial-gradient(circle at 80% 100%, #54a2ff0f, transparent 50%);
 }
 .grid-bg {
   position: absolute; inset: 0; pointer-events: none;
@@ -77,6 +69,8 @@ a { color: inherit; text-decoration: none; }
 
 /* Typography */
 .mono { font-family: var(--mono); }
+.nav-link { transition: color 150ms; }
+.nav-link:hover { color: var(--accent-2); }
 .kicker {
   font-family: var(--mono);
   font-size: 11px;
@@ -96,16 +90,26 @@ a { color: inherit; text-decoration: none; }
   overflow: hidden;
 }
 .btn:active { transform: scale(0.98); }
-.btn-primary { background: var(--accent); color: var(--bg); }
+.btn-primary {
+  background-image: linear-gradient(to right, var(--accent), var(--orange));
+  color: #fff;
+  font-weight: 600;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 4px 24px #f59e0b4d;
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 .btn-primary:hover {
-  background: var(--accent-2);
+  background-image: linear-gradient(to right, var(--accent-2), var(--orange-2));
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px var(--accent-dim);
+  box-shadow: 0 4px 32px #f59e0b73;
+}
+.btn-ghost {
+  color: var(--text-2); border-color: var(--line-2);
+  background: #ffffff0d; border-radius: var(--radius-lg); font-weight: 600;
 }
-.btn-ghost { color: var(--text); border-color: var(--line-2); background: transparent; }
-.btn-ghost:hover { background: var(--bg-2); border-color: var(--text-3); }
-.btn-dark { background: var(--bg-2); color: var(--text); border-color: var(--line-2); }
-.btn-dark:hover { background: var(--bg-3); border-color: var(--line); }
+.btn-ghost:hover { background: #ffffff1a; border-color: #f59e0b66; color: #fff; }
+.btn-dark { background: var(--bg-2); color: var(--text); border-color: var(--line-2); border-radius: var(--radius-lg); }
+.btn-dark:hover { background: var(--bg-3); border-color: #f59e0b66; }
 .btn-lg { padding: 14px 22px; font-size: 15px; }
 .btn-sm { padding: 6px 12px; font-size: 13px; }
 
@@ -152,6 +156,35 @@ a { color: inherit; text-decoration: none; }
   transform: translateY(0);
 }
 
+/* Glass feature card */
+.feature-card {
+  background: var(--glass);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xl);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.feature-card:hover {
+  background: var(--glass-hover);
+  border-color: #fbbf2459;
+}
+.feature-card-lift:hover { transform: translateY(-2px); }
+
+/* Accent treatments */
+.gradient-text {
+  color: transparent;
+  background-image: linear-gradient(90deg, #fbbf24, #a855f7, #3b82f6);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+.glow { box-shadow: 0 0 40px #f59e0b40; }
+
+/* FAQ disclosure */
+details > summary { cursor: pointer; }
+details > summary::-webkit-details-marker { display: none; }
+details[open] > summary svg { transform: rotate(180deg); }
+
 /* Chip */
 .chip {
   display: inline-flex; align-items: center; gap: 6px;
@@ -195,6 +228,13 @@ a { color: inherit; text-decoration: none; }
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes ping {
+  75%, 100% { opacity: 0; transform: scale(2); }
+}
 
 /* Scroll-triggered animations */
 @keyframes fadeInUp {
@@ -239,6 +279,11 @@ a { color: inherit; text-decoration: none; }
 .scale-in { animation: scaleIn 0.5s ease-out forwards; }
 .slide-in { animation: slideIn 240ms ease-out; }
 
+/* Perry-style entrance animations (run immediately, no observer) */
+.animate-fade-in { opacity: 0; animation: fadeIn 0.5s ease-out forwards; }
+.animate-slide-up { opacity: 0; animation: slideUp 0.5s ease-out forwards; }
+.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+
 /* Stagger delays for children */
 .stagger-1 { animation-delay: 0.1s; }
 .stagger-2 { animation-delay: 0.2s; }
@@ -256,8 +301,9 @@ a { color: inherit; text-decoration: none; }
 
 @media (max-width: 768px) {
   .hide-md { display: none !important; }
-  .two-col { grid-template-columns: 1fr !important; }
-  .cmp-grid { grid-template-columns: 1fr !important; }
+  .two-col,
+  .cmp-grid,
+  .auth-grid { grid-template-columns: 1fr !important; }
   .vs-col { display: none !important; }
   nav { padding: 16px 24px !important; }
   footer { padding: 16px 24px !important; }
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 7b9b53f..03bead7 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -1,16 +1,17 @@
 import type { Metadata } from "next"; 
-import { Geist, Geist_Mono } from "next/font/google";
+import { Rubik, JetBrains_Mono } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/contexts/AuthContext";
 import { ToastProvider } from '@/components/providers/ToastProvider';
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const rubik = Rubik({
+  variable: "--font-rubik",
   subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const jetbrainsMono = JetBrains_Mono({
+  variable: "--font-jetbrains-mono",
   subsets: ["latin"],
 });
 
@@ -27,13 +28,9 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${rubik.variable} ${jetbrainsMono.variable} h-full antialiased`}
       suppressHydrationWarning
     >
-      <head>
-        {/* Apply stored theme before first paint to prevent flash */}
-        <script dangerouslySetInnerHTML={{ __html: `(function(){try{var t=localStorage.getItem('theme');if(t==='light')document.documentElement.setAttribute('data-theme','light');}catch(e){}})();` }} />
-      </head>
       <body className="min-h-full flex flex-col" suppressHydrationWarning>
         <AuthProvider>
           <ToastProvider />
diff --git a/client/src/app/login/page.tsx b/client/src/app/login/page.tsx
index c0665ad..df057db 100644
--- a/client/src/app/login/page.tsx
+++ b/client/src/app/login/page.tsx
@@ -1,151 +1,7 @@
 'use client';
 
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { useAuth } from '@/contexts/AuthContext';
-import { AuthLayout, GoogleG, Divider } from '@/components/auth/AuthLayout';
-import { Icons } from '@/components/shared/Icons';
-import { isFirebaseConfigured } from '@/lib/firebase';
-import toast from 'react-hot-toast';
+import { GoogleAuthPanel } from '@/components/auth/GoogleAuthPanel';
 
 export default function LoginPage() {
-  const router = useRouter();
-  const { user, login, loginWithGoogle, loading: authLoading } = useAuth();
-  const googleAuthEnabled = isFirebaseConfigured();
-
-  const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState({ email: '', password: '' });
-  const [showPassword, setShowPassword] = useState(false);
-
-  useEffect(() => {
-    if (!authLoading && user) {
-      router.push('/dashboard');
-    }
-  }, [user, authLoading, router]);
-
-  const handleEmailSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!formData.email || !formData.password) {
-      toast.error('Please fill in all fields');
-      return;
-    }
-
-    setLoading(true);
-    try {
-      await login(formData.email, formData.password);
-      toast.success('Login successful!');
-      router.push('/dashboard');
-    } catch (error: any) {
-      toast.error(error.message || 'Login failed');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleGoogleSignIn = async () => {
-    setLoading(true);
-    try {
-      await loginWithGoogle();
-      toast.success('Signed in with Google');
-      router.push('/dashboard');
-    } catch (error: any) {
-      toast.error(error.message || 'Google sign-in failed');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (authLoading) {
-    return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
-        <div style={{ textAlign: 'center' }}>
-          <div style={{
-            width: 48, height: 48, margin: '0 auto 16px',
-            border: '2px solid var(--line)', borderTopColor: 'var(--accent)',
-            borderRadius: '50%', animation: 'spin 0.9s linear infinite',
-          }} />
-          <p style={{ color: 'var(--text-3)' }}>Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <AuthLayout step="signin" onBack={() => router.push('/')}>
-      <form onSubmit={handleEmailSubmit}>
-        <div className="kicker" style={{ marginBottom: 8 }}>// Welcome back</div>
-        <h2 style={{ fontSize: 'clamp(28px, 5vw, 32px)', letterSpacing: '-0.03em', margin: 0, lineHeight: 1.1 }}>
-          Sign in
-        </h2>
-        <p style={{ color: 'var(--text-3)', fontSize: 'clamp(13px, 2vw, 14px)', marginTop: 8, marginBottom: 24 }}>
-          Sign in to your account.
-        </p>
-
-        {googleAuthEnabled && (
-          <>
-            <button type="button" className="btn btn-dark btn-lg"
-              onClick={handleGoogleSignIn}
-              disabled={loading}
-              style={{ width: '100%', justifyContent: 'center', marginBottom: 18 }}>
-              <GoogleG /> Continue with Google
-            </button>
-
-            <Divider label="Or use email and password" />
-          </>
-        )}
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-          <div className="field">
-            <label className="field-label">Email</label>
-            <input className="input" type="email" placeholder="ada@example.com"
-              value={formData.email}
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-              required />
-          </div>
-          <div className="field">
-            <label className="field-label">Password</label>
-            <div style={{ position: 'relative' }}>
-              <input
-                className="input input-mono"
-                type={showPassword ? 'text' : 'password'}
-                placeholder="••••••••••••"
-                value={formData.password}
-                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                required
-                style={{ paddingRight: 44 }}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                style={{
-                  position: 'absolute', right: 12, top: '50%',
-                  transform: 'translateY(-50%)', color: 'var(--text-3)',
-                  background: 'none', border: 'none', cursor: 'pointer',
-                }}>
-                {showPassword ? <Icons.EyeOff size={16} /> : <Icons.Eye size={16} />}
-              </button>
-            </div>
-          </div>
-
-          <button
-            className="btn btn-primary btn-lg"
-            type="submit"
-            disabled={loading}
-            style={{ marginTop: 8, justifyContent: 'center', width: '100%' }}>
-            {loading ? 'Signing in...' : 'Sign in'} <Icons.Arrow size={14} />
-          </button>
-
-          <div style={{ textAlign: 'center', fontSize: 'clamp(12px, 2vw, 13px)', color: 'var(--text-3)', marginTop: 8 }}>
-            Don&apos;t have an account?{' '}
-            <button
-              type="button"
-              onClick={() => router.push('/register')}
-              style={{ color: 'var(--accent)', fontWeight: 500, background: 'none', border: 'none', cursor: 'pointer' }}>
-              Create account
-            </button>
-          </div>
-        </div>
-      </form>
-    </AuthLayout>
-  );
+  return <GoogleAuthPanel mode="signin" />;
 }
diff --git a/client/src/app/onboarding/page.tsx b/client/src/app/onboarding/page.tsx
index dd89944..0a3e173 100644
--- a/client/src/app/onboarding/page.tsx
+++ b/client/src/app/onboarding/page.tsx
@@ -5,249 +5,239 @@ import { useRouter } from 'next/navigation';
 import { useAuth } from '@/contexts/AuthContext';
 import { api } from '@/lib/api';
 import toast from 'react-hot-toast';
-import { Button } from '@/components/ui/Button';
-import { Input } from '@/components/ui/Input';
-import { Card } from '@/components/ui/Card';
+import { AuthLayout } from '@/components/auth/AuthLayout';
+import { Icons } from '@/components/shared/Icons';
+
+const PERMISSIONS = [
+  ['Account', 'Worker Scripts', 'Edit'],
+  ['Account', 'Workers KV Storage', 'Edit'],
+  ['Account', 'Account Analytics', 'Read'],
+  ['Zone', 'Zone', 'Read'],
+  ['Zone', 'DNS', 'Edit'],
+];
 
 export default function OnboardingPage() {
   const router = useRouter();
-  const { refreshUser, logout } = useAuth();
+  const { user, refreshUser, logout } = useAuth();
   const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState({
-    accountId: '',
-    apiToken: '',
-  });
+  const [showToken, setShowToken] = useState(false);
+  const [formData, setFormData] = useState({ accountId: '', apiToken: '' });
   const [errors, setErrors] = useState<Record<string, string>>({});
 
   const handleLogout = async () => {
     try {
       await logout();
       router.push('/login');
-    } catch (error: any) {
-      toast.error('Failed to logout');
+    } catch {
+      toast.error('Failed to sign out');
     }
   };
 
-  const validateForm = () => {
-    const newErrors: Record<string, string> = {};
-    
-    if (!formData.accountId.trim()) {
-      newErrors.accountId = 'Account ID is required';
-    } else if (formData.accountId.length !== 32) {
-      newErrors.accountId = 'Account ID must be 32 characters';
-    }
-    
-    if (!formData.apiToken.trim()) {
-      newErrors.apiToken = 'API Token is required';
-    }
-    
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
+  // Mirrors server/src/middleware/validators/cloudflareValidators.ts so a bad
+  // paste surfaces inline instead of as a round-trip toast.
+  const validate = (accountId: string, apiToken: string) => {
+    const next: Record<string, string> = {};
+
+    if (!accountId) next.accountId = 'Account ID is required';
+    else if (accountId.length !== 32) next.accountId = 'Account ID must be exactly 32 characters';
+
+    if (!apiToken) next.apiToken = 'API token is required';
+    else if (apiToken.length < 40) next.apiToken = 'That token looks too short — copy the full value';
+
+    setErrors(next);
+    return Object.keys(next).length === 0;
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
-    if (!validateForm()) {
-      return;
-    }
+
+    // Pasted tokens routinely carry trailing whitespace; the server encrypts
+    // req.body as-is, so trim before it ever leaves the client.
+    const accountId = formData.accountId.trim();
+    const apiToken = formData.apiToken.trim();
+
+    if (!validate(accountId, apiToken)) return;
 
     setLoading(true);
     try {
-      await api.saveCloudflareCredentials({
-        accountId: formData.accountId,
-        apiToken: formData.apiToken,
-      });
-      
-      toast.success('Cloudflare credentials saved successfully!');
+      await api.saveCloudflareCredentials({ accountId, apiToken });
+      toast.success('Cloudflare account connected');
       await refreshUser();
       router.push('/dashboard');
     } catch (error: any) {
-      toast.error(error.message || 'Failed to save credentials');
+      toast.error(error.message || 'Could not verify those credentials');
     } finally {
       setLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 relative">
-      <div className="absolute top-6 right-6">
-        <Button 
-          variant="outline" 
-          onClick={handleLogout}
-          className="gap-2"
-        >
-          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-          </svg>
-          Sign Out
-        </Button>
-      </div>
-
-      <div className="w-full max-w-4xl mt-12">
-        <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold mb-2">Connect Your Cloudflare Account</h1>
-          <p className="text-muted-foreground">
-            Follow the steps below to create an API token and connect your Cloudflare account
-          </p>
-        </div>
-
-        <Card className="p-8 mb-6">
-          <h2 className="text-xl font-semibold mb-6">Step-by-Step Instructions</h2>
-          
-          <div className="space-y-6">
-            <StepCard number={1}>
-              <p className="font-medium mb-2">Go to your Cloudflare API Tokens page</p>
-              <p className="text-sm text-muted-foreground mb-2">
-                Visit{' '}
-                <a 
-                  href="https://dash.cloudflare.com/profile/api-tokens" 
-                  target="_blank" 
-                  rel="noopener noreferrer"
-                  className="text-primary hover:underline"
-                >
-                  https://dash.cloudflare.com/profile/api-tokens
-                </a>
-              </p>
-            </StepCard>
-
-            <StepCard number={2}>
-              <p className="font-medium">Click &quot;Create Token&quot;</p>
-            </StepCard>
-
-            <StepCard number={3}>
-              <p className="font-medium">Click &quot;Create Custom Token&quot;</p>
-              <p className="text-sm text-muted-foreground mt-1">
-                Do not use any template
-              </p>
-            </StepCard>
-
-            <StepCard number={4}>
-              <p className="font-medium mb-2">Give your token a name</p>
-              <p className="text-sm text-muted-foreground">
-                For example: &quot;EdgeBalancer&quot;
-              </p>
-            </StepCard>
-
-            <StepCard number={5}>
-              <p className="font-medium mb-2">Add the following permissions:</p>
-              <div className="space-y-2 mt-3">
-                <PermissionBadge>Account &gt; Worker Scripts &gt; Edit</PermissionBadge>
-                <PermissionBadge>Account &gt; Workers KV Storage &gt; Edit</PermissionBadge>
-                <PermissionBadge>Account &gt; Account Analytics &gt; Read</PermissionBadge>
-                <PermissionBadge>Zone &gt; Zone &gt; Read</PermissionBadge>
-                <PermissionBadge>Zone &gt; DNS &gt; Edit</PermissionBadge>
-              </div>
-            </StepCard>
-
-            <StepCard number={6}>
-              <p className="font-medium mb-2">Under &quot;Zone Resources&quot;</p>
-              <p className="text-sm text-muted-foreground">
-                Select &quot;All Zones&quot; or pick the specific zone you want to use
-              </p>
-            </StepCard>
-
-            <StepCard number={7}>
-              <p className="font-medium">Click &quot;Continue to summary&quot;, then &quot;Create Token&quot;</p>
-            </StepCard>
-
-            <StepCard number={8}>
-              <p className="font-medium mb-2">Copy the token immediately</p>
-              <p className="text-sm text-muted-foreground">
-                ⚠️ Cloudflare will not show it again after you leave the page
+    <AuthLayout step="connect" onBack={() => router.push('/')} aside={<TokenGuide />}>
+      <form onSubmit={handleSubmit}>
+        <div className="kicker" style={{ marginBottom: 8 }}>// Step 02 of 03</div>
+        <h2 style={{ fontSize: 'clamp(28px, 5vw, 32px)', letterSpacing: '-0.03em', margin: 0, lineHeight: 1.1 }}>
+          Connect Cloudflare
+        </h2>
+        <p style={{ color: 'var(--text-3)', fontSize: 'clamp(13px, 2vw, 14px)', marginTop: 8, marginBottom: 24 }}>
+          EdgeBalancer deploys Workers and manages DNS with a scoped token you control. Revoke it any time.
+        </p>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+          <div className="field">
+            <label className="field-label" htmlFor="accountId">
+              Account ID<span className="req">*</span>
+            </label>
+            <input
+              id="accountId"
+              className="input input-mono"
+              type="text"
+              inputMode="text"
+              autoComplete="off"
+              spellCheck={false}
+              placeholder="a1b2c3d4e5f6…"
+              value={formData.accountId}
+              aria-invalid={!!errors.accountId}
+              onChange={(e) => {
+                setFormData({ ...formData, accountId: e.target.value });
+                if (errors.accountId) setErrors({ ...errors, accountId: '' });
+              }}
+              disabled={loading}
+              style={errors.accountId ? { borderColor: 'var(--red)' } : undefined}
+            />
+            {errors.accountId ? (
+              <p className="hint" style={{ color: 'var(--red)' }}>{errors.accountId}</p>
+            ) : (
+              <p className="hint">
+                <a href="https://dash.cloudflare.com" target="_blank" rel="noopener noreferrer"
+                  style={{ color: 'var(--accent)' }}>dash.cloudflare.com</a>
+                {' '}→ right sidebar → Account ID
               </p>
-            </StepCard>
+            )}
           </div>
-        </Card>
-
-        <Card className="p-8">
-          <h2 className="text-xl font-semibold mb-6">Enter Your Credentials</h2>
-          
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <div>
-              <label htmlFor="accountId" className="block text-sm font-medium mb-2">
-                Cloudflare Account ID
-              </label>
-              <Input
-                id="accountId"
-                type="text"
-                placeholder="32-character Account ID"
-                value={formData.accountId}
-                onChange={(e) => {
-                  setFormData({ ...formData, accountId: e.target.value });
-                  setErrors({ ...errors, accountId: '' });
-                }}
-                className={errors.accountId ? 'border-red-500' : ''}
-                disabled={loading}
-              />
-              {errors.accountId && (
-                <p className="text-sm text-red-500 mt-1">{errors.accountId}</p>
-              )}
-              <p className="text-sm text-muted-foreground mt-2">
-                Find your Account ID at{' '}
-                <a 
-                  href="https://dash.cloudflare.com" 
-                  target="_blank" 
-                  rel="noopener noreferrer"
-                  className="text-primary hover:underline"
-                >
-                  dash.cloudflare.com
-                </a>
-                {' '}in the right sidebar under &quot;Account ID&quot;
-              </p>
-            </div>
 
-            <div>
-              <label htmlFor="apiToken" className="block text-sm font-medium mb-2">
-                Cloudflare API Token
-              </label>
-              <Input
+          <div className="field">
+            <label className="field-label" htmlFor="apiToken">
+              API Token<span className="req">*</span>
+            </label>
+            <div style={{ position: 'relative' }}>
+              <input
                 id="apiToken"
-                type="password"
-                placeholder="Your API Token"
+                className="input input-mono"
+                type={showToken ? 'text' : 'password'}
+                autoComplete="off"
+                spellCheck={false}
+                placeholder="••••••••••••••••••••"
                 value={formData.apiToken}
+                aria-invalid={!!errors.apiToken}
                 onChange={(e) => {
                   setFormData({ ...formData, apiToken: e.target.value });
-                  setErrors({ ...errors, apiToken: '' });
+                  if (errors.apiToken) setErrors({ ...errors, apiToken: '' });
                 }}
-                className={errors.apiToken ? 'border-red-500' : ''}
                 disabled={loading}
+                style={{ paddingRight: 44, ...(errors.apiToken ? { borderColor: 'var(--red)' } : {}) }}
               />
-              {errors.apiToken && (
-                <p className="text-sm text-red-500 mt-1">{errors.apiToken}</p>
-              )}
-              <p className="text-sm text-muted-foreground mt-2">
-                The token you just created in step 8 above
-              </p>
+              <button
+                type="button"
+                onClick={() => setShowToken(!showToken)}
+                aria-label={showToken ? 'Hide token' : 'Show token'}
+                style={{
+                  position: 'absolute', right: 12, top: '50%',
+                  transform: 'translateY(-50%)', color: 'var(--text-3)',
+                }}>
+                {showToken ? <Icons.EyeOff size={16} /> : <Icons.Eye size={16} />}
+              </button>
             </div>
+            {errors.apiToken ? (
+              <p className="hint" style={{ color: 'var(--red)' }}>{errors.apiToken}</p>
+            ) : (
+              <p className="hint">Stored encrypted. Never shown again after saving.</p>
+            )}
+          </div>
 
-            <Button type="submit" size="lg" className="w-full" disabled={loading}>
-              {loading ? 'Validating...' : 'Connect Cloudflare Account'}
-            </Button>
-          </form>
-        </Card>
+          <button className="btn btn-primary btn-lg" type="submit" disabled={loading}
+            style={{ justifyContent: 'center', width: '100%' }}>
+            {loading ? 'Verifying with Cloudflare...' : 'Connect account'}
+            {!loading && <Icons.Arrow size={14} />}
+          </button>
+        </div>
+      </form>
+
+      <div style={{
+        marginTop: 20, textAlign: 'center',
+        fontSize: 'clamp(12px, 2vw, 13px)', color: 'var(--text-3)',
+      }}>
+        {user?.email ? `Signed in as ${user.email} — ` : ''}
+        <button type="button" onClick={handleLogout}
+          style={{ color: 'var(--accent)', fontWeight: 500 }}>
+          Sign out
+        </button>
       </div>
-    </div>
+    </AuthLayout>
   );
 }
 
-function StepCard({ number, children }: { number: number; children: React.ReactNode }) {
+function TokenGuide() {
   return (
-    <div className="flex gap-4">
-      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 text-primary flex items-center justify-center font-semibold">
-        {number}
-      </div>
-      <div className="flex-1 pt-1">
-        {children}
+    <div style={{ maxWidth: 420 }}>
+      <div className="kicker" style={{ marginBottom: 6 }}>// create your token</div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
+        <Icons.Key size={15} stroke="var(--accent)" />
+        <span style={{ fontSize: 15, fontWeight: 500 }}>Six steps in the Cloudflare dashboard</span>
       </div>
+
+      <ol style={{
+        margin: 0, padding: 0, listStyle: 'none',
+        display: 'flex', flexDirection: 'column', gap: 16,
+      }}>
+        <TokenStep n="01">
+          Open{' '}
+          <a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank" rel="noopener noreferrer"
+            style={{ color: 'var(--accent)' }}>
+            the API Tokens page
+          </a>
+        </TokenStep>
+        <TokenStep n="02">
+          <strong style={{ fontWeight: 500 }}>Create Token</strong> → <strong style={{ fontWeight: 500 }}>Create Custom Token</strong>
+          <span style={{ color: 'var(--text-3)' }}> — do not pick a template</span>
+        </TokenStep>
+        <TokenStep n="03">
+          Name it <span className="mono" style={{ color: 'var(--text-2)' }}>EdgeBalancer</span>
+        </TokenStep>
+        <TokenStep n="04">
+          Add all five permissions:
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 10 }}>
+            {PERMISSIONS.map(([scope, resource, level]) => (
+              <div key={`${scope}-${resource}`} style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
+                padding: '7px 10px', borderRadius: 'var(--radius)',
+                background: 'var(--bg-2)', border: '1px solid var(--line)',
+                fontFamily: 'var(--mono)', fontSize: 11,
+              }}>
+                <span style={{ color: 'var(--text-2)' }}>
+                  <span style={{ color: 'var(--text-3)' }}>{scope} · </span>{resource}
+                </span>
+                <span style={{ color: 'var(--accent)' }}>{level}</span>
+              </div>
+            ))}
+          </div>
+        </TokenStep>
+        <TokenStep n="05">
+          Zone Resources → <strong style={{ fontWeight: 500 }}>All zones</strong>, or just the zone you plan to balance
+        </TokenStep>
+        <TokenStep n="06">
+          Continue to summary → Create Token, then copy it immediately
+          <span style={{ color: 'var(--red)' }}> — Cloudflare never shows it again</span>
+        </TokenStep>
+      </ol>
     </div>
   );
 }
 
-function PermissionBadge({ children }: { children: React.ReactNode }) {
+function TokenStep({ n, children }: { n: string; children: React.ReactNode }) {
   return (
-    <div className="inline-flex items-center px-3 py-1.5 rounded-md bg-primary/5 border border-primary/20 text-sm font-mono">
-      {children}
-    </div>
+    <li style={{ display: 'flex', gap: 12, fontSize: 13, lineHeight: 1.55 }}>
+      <span className="mono" style={{ color: 'var(--text-3)', fontSize: 11, paddingTop: 2, minWidth: 18 }}>{n}</span>
+      <div style={{ flex: 1 }}>{children}</div>
+    </li>
   );
 }
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index aa31c27..4e36b4b 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -39,10 +39,12 @@ export default function LandingPage() {
 
       {/* Nav */}
       <nav style={{
-        position: 'relative', zIndex: 10,
+        position: 'sticky', top: 0, zIndex: 30,
         display: 'flex', justifyContent: 'space-between', alignItems: 'center',
         padding: 'clamp(12px, 3vw, 20px) clamp(16px, 4vw, 48px)', borderBottom: '1px solid var(--line)',
         flexWrap: 'wrap', gap: 'clamp(8px, 2vw, 12px)',
+        background: '#0a0a0fcc',
+        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
       }}>
         <Logo />
         <div style={{ display: 'flex', gap: 'clamp(6px, 2vw, 8px)', alignItems: 'center', flexWrap: 'wrap' }}>
@@ -66,41 +68,45 @@ export default function LandingPage() {
         display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px, 5vw, 64px)', alignItems: 'center',
       }} className="hero-grid">
         <div>
-          <div style={{
+          <div className="feature-card animate-slide-up" style={{
             display: 'inline-flex', alignItems: 'center', gap: 10,
-            padding: '6px 12px', border: '1px solid var(--line-2)',
-            borderRadius: 999, background: 'var(--bg-1)',
+            padding: '6px 12px', borderRadius: 999,
             fontFamily: 'var(--mono)', fontSize: 'clamp(10px, 2vw, 11px)', color: 'var(--text-2)',
             marginBottom: 'clamp(16px, 3vw, 24px)',
           }}>
-            <span style={{
-              width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)',
-              boxShadow: '0 0 8px var(--accent)',
-            }} />
+            <span style={{ position: 'relative', width: 6, height: 6, flexShrink: 0 }}>
+              <span className="animate-ping" style={{
+                position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--accent)',
+              }} />
+              <span style={{
+                position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--accent)',
+                boxShadow: '0 0 8px var(--accent)',
+              }} />
+            </span>
             A gateway for Cloudflare Workers
           </div>
-          <h1 style={{
+          <h1 className="animate-slide-up stagger-1" style={{
             fontSize: 'clamp(32px, 6vw, 72px)', lineHeight: 0.98,
-            letterSpacing: '-0.035em', fontWeight: 500, margin: 0,
+            letterSpacing: '-0.035em', fontWeight: 600, margin: 0,
           }}>
             Turn a Worker
             <br />
-            into a <span style={{ color: 'var(--accent)' }}>load balancer.</span>
+            into a <span className="gradient-text">load balancer.</span>
           </h1>
-          <p style={{
+          <p className="animate-slide-up stagger-2" style={{
             fontSize: 'clamp(14px, 2.5vw, 18px)', color: 'var(--text-2)', maxWidth: 520,
-            marginTop: 'clamp(16px, 3vw, 24px)', lineHeight: 1.5,
+            marginTop: 'clamp(16px, 3vw, 24px)', lineHeight: 1.625,
           }}>
             EdgeBalancer is a thin wrapper that converts your Cloudflare Worker into a
             production load balancer — 7 routing strategies, health checks, per-origin
             weights. No servers, no DevOps. Bring your API key and ship in 90 seconds.
           </p>
-          <div style={{ display: 'flex', gap: 12, marginTop: 'clamp(24px, 4vw, 36px)', flexWrap: 'wrap' }}>
+          <div className="animate-slide-up stagger-3" style={{ display: 'flex', gap: 12, marginTop: 'clamp(24px, 4vw, 36px)', flexWrap: 'wrap' }}>
             <button className="btn btn-primary btn-lg" onClick={() => router.push('/register')}>
               Start free <Icons.Arrow size={16} />
             </button>
           </div>
-          <div style={{
+          <div className="animate-slide-up stagger-4" style={{
             display: 'flex', gap: 'clamp(16px, 3vw, 32px)', marginTop: 'clamp(32px, 4vw, 48px)', flexWrap: 'wrap',
             fontFamily: 'var(--mono)', fontSize: 'clamp(9px, 2vw, 11px)', color: 'var(--text-3)',
             textTransform: 'uppercase', letterSpacing: '0.06em',
@@ -111,7 +117,9 @@ export default function LandingPage() {
           </div>
         </div>
 
-        <FlowDiagram />
+        <div className="animate-fade-in stagger-3">
+          <FlowDiagram />
+        </div>
       </section>
 
       {/* Feature strip */}
@@ -122,8 +130,7 @@ export default function LandingPage() {
         <div className="kicker" style={{ marginBottom: 'clamp(16px, 3vw, 24px)', fontSize: 'clamp(9px, 2vw, 11px)' }}>// How the gateway works</div>
         <div style={{
           display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(clamp(160px, 50vw, 240px), 1fr))',
-          gap: 1, background: 'var(--line)', border: '1px solid var(--line)',
-          borderRadius: 'var(--radius-lg)', overflow: 'hidden',
+          gap: 'clamp(12px, 2vw, 16px)',
         }}>
           {[
             { icon: 'Key', title: '01 · Paste API token', desc: 'Scoped Workers + Zone edit token. Encrypted at rest.' },
@@ -133,10 +140,14 @@ export default function LandingPage() {
           ].map((f, i) => {
             const Ico = Icons[f.icon as keyof typeof Icons];
             return (
-              <div key={i} style={{ background: 'var(--bg)', padding: 28 }}>
+              <div
+                key={i}
+                className="feature-card animate-on-scroll fade-in-up"
+                style={{ padding: 28, animationDelay: `${i * 0.1}s` }}
+              >
                 <Ico size={20} stroke="var(--accent)" />
-                <div style={{ fontSize: 15, fontWeight: 500, marginTop: 20, letterSpacing: '-0.01em' }}>{f.title}</div>
-                <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 6, lineHeight: 1.5 }}>{f.desc}</div>
+                <div style={{ fontSize: 15, fontWeight: 600, marginTop: 20, letterSpacing: '-0.01em' }}>{f.title}</div>
+                <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 6, lineHeight: 1.625 }}>{f.desc}</div>
               </div>
             );
           })}
@@ -154,7 +165,7 @@ export default function LandingPage() {
           fontSize: 'clamp(28px, 4vw, 44px)',
           margin: 0,
           letterSpacing: '-0.03em',
-          fontWeight: 500,
+          fontWeight: 600,
           marginBottom: 48,
         }}>
           Built for modern architectures
@@ -207,7 +218,7 @@ export default function LandingPage() {
             return (
               <div
                 key={i}
-                className="card animate-on-scroll scale-in"
+                className="feature-card feature-card-lift animate-on-scroll scale-in"
                 style={{
                   padding: 'clamp(20px, 3vw, 24px)',
                   animationDelay: `${i * 0.1}s`,
@@ -215,7 +226,8 @@ export default function LandingPage() {
               >
                 <div style={{
                   width: 40, height: 40, borderRadius: 'var(--radius)',
-                  background: 'var(--bg-2)', border: '1px solid var(--line-2)',
+                  backgroundImage: 'linear-gradient(to bottom right, #f59e0b26, #fe6e0014)',
+                  border: '1px solid #f59e0b40',
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
                   marginBottom: 16,
                 }}>
@@ -224,7 +236,7 @@ export default function LandingPage() {
                 <h3 style={{
                   fontSize: 'clamp(15px, 3vw, 17px)',
                   margin: 0,
-                  fontWeight: 500,
+                  fontWeight: 600,
                   marginBottom: 8,
                 }}>
                   {useCase.title}
@@ -281,7 +293,7 @@ export default function LandingPage() {
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 48, alignItems: 'start' }} className="two-col">
           <div>
             <div className="kicker" style={{ marginBottom: 16 }}>// built for solo devs</div>
-            <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0, letterSpacing: '-0.03em', fontWeight: 500, lineHeight: 1.05 }}>
+            <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: 0, letterSpacing: '-0.03em', fontWeight: 600, lineHeight: 1.05 }}>
               Free tier runs<br />a real website.<span style={{ color: 'var(--accent)' }}>.</span>
             </h2>
             <p style={{ fontSize: 15, color: 'var(--text-2)', marginTop: 20, lineHeight: 1.6, maxWidth: 420 }}>
@@ -290,17 +302,21 @@ export default function LandingPage() {
               with 10M requests and 30M CPU-ms included. No idle charges. No DevOps.
             </p>
           </div>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'clamp(12px, 2vw, 16px)' }}>
             {[
               { v: '100k', l: 'free requests / day', s: 'No credit card. Real production traffic.' },
               { v: '$5', l: 'paid plan / month', s: 'Includes 10M req + 30M CPU-ms.' },
               { v: '$0.30', l: 'per million req', s: 'Beyond the included pool.' },
               { v: '~0ms', l: 'cold start', s: 'Isolates, not containers.' },
             ].map((s, i) => (
-              <div key={i} style={{ background: 'var(--bg-1)', padding: 24 }}>
-                <div className="mono" style={{ fontSize: 30, letterSpacing: '-0.02em', color: 'var(--accent)' }}>{s.v}</div>
+              <div
+                key={i}
+                className="feature-card animate-on-scroll scale-in"
+                style={{ padding: 24, animationDelay: `${i * 0.1}s` }}
+              >
+                <div className="mono gradient-text" style={{ fontSize: 30, letterSpacing: '-0.02em', fontWeight: 700 }}>{s.v}</div>
                 <div className="kicker" style={{ marginTop: 8 }}>{s.l}</div>
-                <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 8, lineHeight: 1.5 }}>{s.s}</div>
+                <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 8, lineHeight: 1.625 }}>{s.s}</div>
               </div>
             ))}
           </div>
@@ -313,7 +329,7 @@ export default function LandingPage() {
         maxWidth: 1200, margin: '0 auto', padding: '32px 48px 96px',
       }}>
         <div className="kicker" style={{ marginBottom: 12 }}>// the math</div>
-        <h2 style={{ fontSize: 'clamp(26px, 3vw, 36px)', margin: 0, letterSpacing: '-0.02em', fontWeight: 500 }}>
+        <h2 style={{ fontSize: 'clamp(26px, 3vw, 36px)', margin: 0, letterSpacing: '-0.02em', fontWeight: 600 }}>
           AWS ALB vs. Cloudflare Workers
         </h2>
         <p style={{ fontSize: 14, color: 'var(--text-3)', marginTop: 8, marginBottom: 32, maxWidth: 640 }}>
@@ -323,11 +339,11 @@ export default function LandingPage() {
 
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 40px 1fr', gap: 16, alignItems: 'stretch' }} className="cmp-grid">
           {/* AWS */}
-          <div style={{ background: 'var(--bg-1)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: 24 }}>
+          <div className="feature-card animate-on-scroll fade-in-up" style={{ padding: 24 }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
               <div>
                 <div className="kicker">// option a</div>
-                <div style={{ fontSize: 18, fontWeight: 500, marginTop: 6 }}>AWS Application Load Balancer</div>
+                <div style={{ fontSize: 18, fontWeight: 600, marginTop: 6 }}>AWS Application Load Balancer</div>
               </div>
               <span className="chip mono" style={{ color: 'var(--text-3)' }}>hourly + LCU</span>
             </div>
@@ -373,14 +389,17 @@ export default function LandingPage() {
           </div>
 
           {/* Cloudflare via EdgeBalancer */}
-          <div style={{
-            background: 'var(--bg-1)', border: '1px solid var(--accent)',
-            borderRadius: 'var(--radius-lg)', padding: 24, position: 'relative',
-            boxShadow: '0 0 0 1px var(--accent-dim)',
+          <div className="feature-card animate-on-scroll fade-in-up" style={{
+            border: '1px solid var(--accent)',
+            padding: 24, position: 'relative',
+            boxShadow: '0 0 40px #f59e0b40',
+            animationDelay: '0.1s',
           }}>
             <div style={{
               position: 'absolute', top: -1, right: 16,
-              padding: '4px 10px', background: 'var(--accent)', color: 'oklch(0.18 0.02 60)',
+              padding: '4px 10px',
+              backgroundImage: 'linear-gradient(to right, var(--accent), var(--orange))',
+              color: '#fff',
               fontFamily: 'var(--mono)', fontSize: 10, textTransform: 'uppercase',
               letterSpacing: '0.06em', borderRadius: '0 0 6px 6px', fontWeight: 600,
             }}>
@@ -389,7 +408,7 @@ export default function LandingPage() {
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
               <div>
                 <div className="kicker">// option b</div>
-                <div style={{ fontSize: 18, fontWeight: 500, marginTop: 6 }}>
+                <div style={{ fontSize: 18, fontWeight: 600, marginTop: 6 }}>
                   Cloudflare Workers via EdgeBalancer
                 </div>
               </div>
@@ -434,10 +453,8 @@ export default function LandingPage() {
           </div>
         </div>
 
-        <div style={{
+        <div className="feature-card" style={{
           marginTop: 24, padding: 20,
-          border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)',
-          background: 'var(--bg-1)',
           display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between',
         }}>
           <div className="mono" style={{ fontSize: 13, color: 'var(--text-2)' }}>
@@ -456,7 +473,7 @@ export default function LandingPage() {
         maxWidth: 1200, margin: '0 auto', padding: 'clamp(48px, 6vw, 96px) clamp(16px, 4vw, 48px)',
       }}>
         <div className="kicker" style={{ marginBottom: 12 }}>// routing strategies</div>
-        <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', margin: 0, letterSpacing: '-0.03em', fontWeight: 500, marginBottom: 16 }}>
+        <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', margin: 0, letterSpacing: '-0.03em', fontWeight: 600, marginBottom: 16 }}>
           Seven ways to route traffic
         </h2>
         <p style={{ fontSize: 'clamp(14px, 2.5vw, 16px)', color: 'var(--text-2)', maxWidth: 680, marginBottom: 48 }}>
@@ -531,15 +548,16 @@ export default function LandingPage() {
             return (
               <div
                 key={strategy.id}
-                className="card animate-on-scroll fade-in-up"
+                className="feature-card feature-card-lift animate-on-scroll fade-in-up"
                 style={{
                   padding: 'clamp(20px, 3vw, 28px)',
                   animationDelay: `${i * 0.1}s`,
                 }}
               >
                 <div style={{
-                  width: 48, height: 48, borderRadius: 'var(--radius)',
-                  background: 'var(--accent-dim)', border: '1px solid var(--accent)',
+                  width: 48, height: 48, borderRadius: 'var(--radius-lg)',
+                  backgroundImage: 'linear-gradient(to bottom right, #f59e0b26, #fe6e0014)',
+                  border: '1px solid #f59e0b40',
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
                   marginBottom: 20,
                 }}>
@@ -549,7 +567,7 @@ export default function LandingPage() {
                   fontSize: 'clamp(16px, 3vw, 18px)',
                   margin: 0,
                   letterSpacing: '-0.01em',
-                  fontWeight: 500,
+                  fontWeight: 600,
                   marginBottom: 8,
                 }}>
                   {strategy.title}
@@ -593,7 +611,7 @@ export default function LandingPage() {
           fontSize: 'clamp(28px, 4vw, 44px)',
           margin: 0,
           letterSpacing: '-0.03em',
-          fontWeight: 500,
+          fontWeight: 600,
           marginBottom: 48,
         }}>
           Questions &amp; Answers
@@ -636,20 +654,15 @@ export default function LandingPage() {
           ].map((faq, i) => (
             <details
               key={i}
-              className="animate-on-scroll fade-in"
+              className="feature-card animate-on-scroll fade-in"
               style={{
                 padding: 'clamp(16px, 3vw, 20px)',
-                border: '1px solid var(--line)',
-                borderRadius: 'var(--radius)',
-                background: 'var(--bg-1)',
-                cursor: 'pointer',
-                transition: 'all 200ms',
                 animationDelay: `${i * 0.05}s`,
               }}
             >
               <summary style={{
                 fontSize: 'clamp(14px, 2.5vw, 16px)',
-                fontWeight: 500,
+                fontWeight: 600,
                 listStyle: 'none',
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -673,12 +686,9 @@ export default function LandingPage() {
           ))}
         </div>
 
-        <div style={{
+        <div className="feature-card" style={{
           marginTop: 48,
           padding: 'clamp(24px, 4vw, 32px)',
-          background: 'var(--bg-1)',
-          border: '1px solid var(--line)',
-          borderRadius: 'var(--radius-lg)',
           textAlign: 'center',
         }}>
           <h3 style={{ fontSize: 'clamp(18px, 3vw, 20px)', margin: 0, marginBottom: 12 }}>
diff --git a/client/src/app/register/page.tsx b/client/src/app/register/page.tsx
index 6e0ddb6..8ebd066 100644
--- a/client/src/app/register/page.tsx
+++ b/client/src/app/register/page.tsx
@@ -1,162 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { useAuth } from '@/contexts/AuthContext';
-import { AuthLayout, GoogleG, Divider } from '@/components/auth/AuthLayout';
-import { Icons } from '@/components/shared/Icons';
-import { isFirebaseConfigured } from '@/lib/firebase';
-import toast from 'react-hot-toast';
+import { GoogleAuthPanel } from '@/components/auth/GoogleAuthPanel';
 
 export default function RegisterPage() {
-  const router = useRouter();
-  const { user, register, loginWithGoogle, loading: authLoading } = useAuth();
-  const googleAuthEnabled = isFirebaseConfigured();
-
-  const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    password: '',
-    confirm: '',
-  });
-
-  useEffect(() => {
-    if (!authLoading && user) {
-      router.push('/dashboard');
-    }
-  }, [authLoading, router, user]);
-
-  const handleEmailSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!formData.name || !formData.email || !formData.password || !formData.confirm) {
-      toast.error('Please fill in all fields');
-      return;
-    }
-
-    if (formData.password !== formData.confirm) {
-      toast.error('Passwords do not match');
-      return;
-    }
-
-    if (formData.password.length < 8) {
-      toast.error('Password must be at least 8 characters');
-      return;
-    }
-
-    setLoading(true);
-    try {
-      await register(formData.name, formData.email, formData.password, formData.confirm);
-      toast.success('Registration successful! Please login.');
-      router.push('/login');
-    } catch (error: any) {
-      toast.error(error.message || 'Registration failed');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleGoogleSignUp = async () => {
-    setLoading(true);
-    try {
-      await loginWithGoogle();
-      toast.success('Account created with Google');
-      router.push('/dashboard');
-    } catch (error: any) {
-      toast.error(error.message || 'Google sign-up failed');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (authLoading) {
-    return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
-        <div style={{ textAlign: 'center' }}>
-          <div style={{
-            width: 48, height: 48, margin: '0 auto 16px',
-            border: '2px solid var(--line)', borderTopColor: 'var(--accent)',
-            borderRadius: '50%', animation: 'spin 0.9s linear infinite',
-          }} />
-          <p style={{ color: 'var(--text-3)' }}>Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <AuthLayout step="register" onBack={() => router.push('/')}>
-      <form onSubmit={handleEmailSubmit}>
-        <div className="kicker" style={{ marginBottom: 8 }}>// Step 01 of 03</div>
-        <h2 style={{ fontSize: 'clamp(28px, 5vw, 32px)', letterSpacing: '-0.03em', margin: 0, lineHeight: 1.1 }}>
-          Create your account
-        </h2>
-        <p style={{ color: 'var(--text-3)', fontSize: 'clamp(13px, 2vw, 14px)', marginTop: 8, marginBottom: 24 }}>
-          Get started with EdgeBalancer — 14-day free trial.
-        </p>
-
-        {googleAuthEnabled && (
-          <>
-            <button type="button" className="btn btn-dark btn-lg"
-              onClick={handleGoogleSignUp}
-              disabled={loading}
-              style={{ width: '100%', justifyContent: 'center', marginBottom: 18 }}>
-              <GoogleG /> Sign up with Google
-            </button>
-
-            <Divider label="Email registration" />
-          </>
-        )}
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-          <div className="field">
-            <label className="field-label">Full name</label>
-            <input className="input" type="text" placeholder="John Doe"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              required />
-          </div>
-          <div className="field">
-            <label className="field-label">Email</label>
-            <input className="input" type="email" placeholder="you@example.com"
-              value={formData.email}
-              onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-              required />
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
-            <div className="field">
-              <label className="field-label">Password</label>
-              <input className="input" type="password" placeholder="••••••••"
-                value={formData.password}
-                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
-                required minLength={8} />
-            </div>
-            <div className="field">
-              <label className="field-label">Confirm</label>
-              <input className="input" type="password" placeholder="••••••••"
-                value={formData.confirm}
-                onChange={(e) => setFormData({ ...formData, confirm: e.target.value })}
-                required minLength={8} />
-            </div>
-          </div>
-          {formData.confirm && formData.password !== formData.confirm && (
-            <div style={{ fontSize: 12, color: 'var(--red)' }}>Passwords don&apos;t match.</div>
-          )}
-
-          <button className="btn btn-primary btn-lg" type="submit"
-            disabled={!!formData.confirm && formData.password !== formData.confirm || loading}
-            style={{ marginTop: 8, justifyContent: 'center', width: '100%' }}>
-            {loading ? 'Creating account...' : 'Create Account'} <Icons.Arrow size={14} />
-          </button>
-
-          <div style={{ textAlign: 'center', fontSize: 'clamp(12px, 2vw, 13px)', color: 'var(--text-3)', marginTop: 8 }}>
-            Already have an account?{' '}
-            <button type="button" onClick={() => router.push('/login')}
-              style={{ color: 'var(--accent)', fontWeight: 500, background: 'none', border: 'none', cursor: 'pointer' }}>Sign in</button>
-          </div>
-        </div>
-      </form>
-    </AuthLayout>
-  );
+  return <GoogleAuthPanel mode="signup" />;
 }
diff --git a/client/src/app/settings/page.tsx b/client/src/app/settings/page.tsx
index 21d55fd..79099c4 100644
--- a/client/src/app/settings/page.tsx
+++ b/client/src/app/settings/page.tsx
@@ -8,12 +8,9 @@ import { Sidebar, Topbar } from '@/components/dashboard/Sidebar';
 import { Icons } from '@/components/shared/Icons';
 import toast from 'react-hot-toast';
 
-type Tab = 'security' | 'cloudflare';
-
 export default function SettingsPage() {
   const router = useRouter();
   const { user, refreshUser, logout } = useAuth();
-  const [activeTab, setActiveTab] = useState<Tab>('security');
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -59,47 +56,11 @@ export default function SettingsPage() {
         <Topbar
           crumbs={['Dashboard', 'Settings']}
           title="Settings"
-          subtitle="Manage your account security and integrations"
+          subtitle="Manage your Cloudflare integration"
         />
         <div style={{ padding: 'clamp(16px, 4vw, 32px)', maxWidth: 1000, overflow: 'auto', flex: 1 }}>
-          {/* Tab Navigation */}
-          <div style={{
-            display: 'inline-flex', gap: 2, marginBottom: 'clamp(20px, 3vw, 32px)',
-            background: 'var(--bg-1)', border: '1px solid var(--line)',
-            borderRadius: 'var(--radius)', padding: 4, flexWrap: 'wrap',
-          }}>
-            <button
-              onClick={() => setActiveTab('security')}
-              className="btn btn-sm"
-              style={{
-                background: activeTab === 'security' ? 'var(--accent)' : 'transparent',
-                color: activeTab === 'security' ? 'oklch(0.18 0.02 60)' : 'var(--text-2)',
-                border: 'none',
-                fontSize: 'clamp(12px, 2vw, 13px)',
-              }}
-            >
-              <Icons.Lock size={14} /> Security
-            </button>
-            <button
-              onClick={() => setActiveTab('cloudflare')}
-              className="btn btn-sm"
-              style={{
-                background: activeTab === 'cloudflare' ? 'var(--accent)' : 'transparent',
-                color: activeTab === 'cloudflare' ? 'oklch(0.18 0.02 60)' : 'var(--text-2)',
-                border: 'none',
-              }}
-            >
-              <Icons.Cloud size={14} /> Cloudflare
-            </button>
-          </div>
-
-          {/* Tab Content */}
           <div className="slide-in">
-            {activeTab === 'security' ? (
-              <SecurityTab />
-            ) : (
-              <CloudflareTab user={user} refreshUser={refreshUser} />
-            )}
+            <CloudflareTab user={user} refreshUser={refreshUser} />
           </div>
         </div>
       </main>
@@ -107,160 +68,6 @@ export default function SettingsPage() {
   );
 }
 
-function SecurityTab() {
-  const [loading, setLoading] = useState(false);
-  const [formData, setFormData] = useState({
-    currentPassword: '',
-    newPassword: '',
-    confirmPassword: '',
-  });
-  const [errors, setErrors] = useState<Record<string, string>>({});
-
-  const validateForm = () => {
-    const newErrors: Record<string, string> = {};
-    if (!formData.currentPassword) newErrors.currentPassword = 'Current password is required';
-    if (!formData.newPassword) newErrors.newPassword = 'New password is required';
-    else if (formData.newPassword.length < 8) newErrors.newPassword = 'Minimum 8 characters required';
-    if (formData.newPassword !== formData.confirmPassword) {
-      newErrors.confirmPassword = 'Passwords do not match';
-    }
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!validateForm()) return;
-    setLoading(true);
-    try {
-      await api.changePassword({
-        currentPassword: formData.currentPassword,
-        newPassword: formData.newPassword,
-      });
-      toast.success('Password updated successfully');
-      setFormData({ currentPassword: '', newPassword: '', confirmPassword: '' });
-      setErrors({});
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to update password');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="card" style={{ padding: 28, maxWidth: 640, position: 'relative', overflow: 'hidden' }}>
-      {/* Decorative icon */}
-      <div style={{
-        position: 'absolute', top: 20, right: 20,
-        opacity: 0.06, pointerEvents: 'none',
-      }}>
-        <Icons.Lock size={80} />
-      </div>
-
-      <div style={{ position: 'relative' }}>
-        <div className="kicker" style={{ marginBottom: 8 }}>// account security</div>
-        <h2 style={{ fontSize: 22, margin: 0, letterSpacing: '-0.02em', fontWeight: 500 }}>
-          Update Password
-        </h2>
-        <p style={{ fontSize: 14, color: 'var(--text-3)', marginTop: 8, marginBottom: 32, lineHeight: 1.6 }}>
-          Use a unique password to keep your Cloudflare credentials secure.
-        </p>
-
-        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-          {/* Current Password */}
-          <div className="field">
-            <label className="field-label">
-              Current Password <span className="req">*</span>
-            </label>
-            <input
-              type="password"
-              className="input"
-              value={formData.currentPassword}
-              onChange={(e) => setFormData({ ...formData, currentPassword: e.target.value })}
-              disabled={loading}
-              autoComplete="current-password"
-            />
-            {errors.currentPassword && (
-              <div className="hint" style={{ color: 'var(--red)' }}>{errors.currentPassword}</div>
-            )}
-          </div>
-
-          {/* New Password */}
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
-            <div className="field">
-              <label className="field-label">
-                New Password <span className="req">*</span>
-              </label>
-              <input
-                type="password"
-                className="input"
-                value={formData.newPassword}
-                onChange={(e) => setFormData({ ...formData, newPassword: e.target.value })}
-                disabled={loading}
-                autoComplete="new-password"
-              />
-              {errors.newPassword && (
-                <div className="hint" style={{ color: 'var(--red)' }}>{errors.newPassword}</div>
-              )}
-            </div>
-
-            <div className="field">
-              <label className="field-label">
-                Confirm New <span className="req">*</span>
-              </label>
-              <input
-                type="password"
-                className="input"
-                value={formData.confirmPassword}
-                onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
-                disabled={loading}
-                autoComplete="new-password"
-              />
-              {errors.confirmPassword && (
-                <div className="hint" style={{ color: 'var(--red)' }}>{errors.confirmPassword}</div>
-              )}
-            </div>
-          </div>
-
-          <div style={{ display: 'flex', gap: 12, paddingTop: 8 }}>
-            <button
-              type="submit"
-              className="btn btn-primary"
-              disabled={loading}
-            >
-              {loading ? (
-                <>
-                  <div style={{
-                    width: 14, height: 14,
-                    border: '2px solid currentColor', borderTopColor: 'transparent',
-                    borderRadius: '50%', animation: 'spin 0.6s linear infinite',
-                  }} />
-                  Updating...
-                </>
-              ) : (
-                <>
-                  <Icons.Check size={14} /> Update Password
-                </>
-              )}
-            </button>
-            <button
-              type="button"
-              className="btn btn-ghost"
-              onClick={() => {
-                setFormData({ currentPassword: '', newPassword: '', confirmPassword: '' });
-                setErrors({});
-              }}
-              disabled={loading}
-            >
-              Clear
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}
-
 function CloudflareTab({ user, refreshUser }: any) {
   const [loading, setLoading] = useState(false);
   const [editing, setEditing] = useState(false);
diff --git a/client/src/components/auth/AuthLayout.tsx b/client/src/components/auth/AuthLayout.tsx
index 791f3c2..289cec2 100644
--- a/client/src/components/auth/AuthLayout.tsx
+++ b/client/src/components/auth/AuthLayout.tsx
@@ -12,11 +12,14 @@ interface AuthLayoutProps {
   children: React.ReactNode;
   step: 'signin' | 'register' | 'connect' | 'verified';
   onBack: () => void;
+  /** Replaces the three-step rail in the brand panel. Re-rendered below the
+   *  form under 768px, where that panel is hidden. */
+  aside?: React.ReactNode;
 }
 
-export const AuthLayout = ({ children, step, onBack }: AuthLayoutProps) => {
+export const AuthLayout = ({ children, step, onBack, aside }: AuthLayoutProps) => {
   const steps: AuthStep[] = [
-    { n: '01', t: 'Create your account', d: 'Email + password. No credit card.' },
+    { n: '01', t: 'Create your account', d: 'One tap with Google. No credit card.' },
     { n: '02', t: 'Connect Cloudflare', d: 'Paste a scoped API token — Workers + DNS edit access.' },
     { n: '03', t: 'Deploy your first balancer', d: 'Pick zone, add origins, choose strategy. 90 seconds.' },
   ];
@@ -36,7 +39,12 @@ export const AuthLayout = ({ children, step, onBack }: AuthLayoutProps) => {
           </button>
         </div>
 
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
+        <div style={{
+          flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
+          position: 'relative', zIndex: 2, overflowY: 'auto', padding: '24px 0',
+        }}>
+          {aside ?? (
+            <>
           <div className="kicker" style={{ marginBottom: 20 }}>// three steps</div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 420 }}>
             {steps.map((s, i) => {
@@ -64,6 +72,8 @@ export const AuthLayout = ({ children, step, onBack }: AuthLayoutProps) => {
               );
             })}
           </div>
+            </>
+          )}
         </div>
 
         <div style={{
@@ -95,17 +105,13 @@ export const AuthLayout = ({ children, step, onBack }: AuthLayoutProps) => {
 
         <div style={{ width: '100%', maxWidth: 400 }} className="slide-in">
           {children}
+          {aside && (
+            <div className="hide-md-inverse" style={{ marginTop: 28 }}>
+              {aside}
+            </div>
+          )}
         </div>
       </div>
-
-      <style jsx>{`
-        @media (max-width: 768px) {
-          .auth-grid { grid-template-columns: 1fr !important; }
-        }
-        @media (max-width: 640px) {
-          .auth-grid { min-height: 100vh; }
-        }
-      `}</style>
     </div>
   );
 };
diff --git a/client/src/components/auth/GoogleAuthButton.tsx b/client/src/components/auth/GoogleAuthButton.tsx
deleted file mode 100644
index 9028af5..0000000
--- a/client/src/components/auth/GoogleAuthButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/Button';
-import { isFirebaseConfigured } from '@/lib/firebase';
-
-interface GoogleAuthButtonProps {
-  busy?: boolean;
-  label: string;
-  onClick: () => Promise<void> | void;
-}
-
-export function GoogleAuthButton({ busy = false, label, onClick }: GoogleAuthButtonProps) {
-  if (!isFirebaseConfigured()) {
-    return null;
-  }
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      className="w-full gap-3"
-      disabled={busy}
-      onClick={() => void onClick()}
-    >
-      <svg aria-hidden="true" viewBox="0 0 24 24" className="h-4 w-4">
-        <path
-          fill="#EA4335"
-          d="M12 10.2v3.9h5.4c-.2 1.3-1.6 3.9-5.4 3.9-3.2 0-5.9-2.7-5.9-6s2.7-6 5.9-6c1.8 0 3 .8 3.7 1.4l2.5-2.4C16.6 3.4 14.5 2.5 12 2.5 6.8 2.5 2.6 6.7 2.6 12s4.2 9.5 9.4 9.5c5.4 0 9-3.8 9-9.1 0-.6-.1-1.1-.2-1.6H12Z"
-        />
-        <path
-          fill="#34A853"
-          d="M2.6 12c0 2.1.8 4.1 2.2 5.6l3.2-2.5c-.8-.6-1.9-1.9-1.9-3.1s1.1-2.5 1.9-3.1L4.8 6.4C3.4 7.9 2.6 9.9 2.6 12Z"
-        />
-        <path
-          fill="#FBBC05"
-          d="M12 21.5c2.5 0 4.6-.8 6.2-2.3l-3-2.3c-.8.6-1.9 1.1-3.2 1.1-2.4 0-4.4-1.6-5.1-3.8l-3.3 2.5c1.6 3 4.7 4.8 8.4 4.8Z"
-        />
-        <path
-          fill="#4285F4"
-          d="M18.2 19.2c1.9-1.8 2.8-4.4 2.8-7.3 0-.6-.1-1.1-.2-1.6H12v3.9h5.4c-.2 1-.8 2.4-2.2 3.4l3 2.3Z"
-        />
-      </svg>
-      {busy ? 'Please wait...' : label}
-    </Button>
-  );
-}
diff --git a/client/src/components/auth/GoogleAuthPanel.tsx b/client/src/components/auth/GoogleAuthPanel.tsx
new file mode 100644
index 0000000..5477305
--- /dev/null
+++ b/client/src/components/auth/GoogleAuthPanel.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/contexts/AuthContext';
+import { AuthLayout, GoogleG } from '@/components/auth/AuthLayout';
+import { isFirebaseConfigured } from '@/lib/firebase';
+import toast from 'react-hot-toast';
+
+/** Sign-in and sign-up are the same Google popup — the server does find-or-create.
+ *  Only the copy differs, so both routes render this. */
+const COPY = {
+  signin: {
+    step: 'signin' as const,
+    kicker: '// Welcome back',
+    title: 'Sign in',
+    subtitle: 'Continue with the Google account you signed up with.',
+    cta: 'Continue with Google',
+    busy: 'Signing in...',
+    success: 'Signed in with Google',
+    failure: 'Google sign-in failed',
+    altPrompt: "Don't have an account?",
+    altLabel: 'Create account',
+    altHref: '/register',
+  },
+  signup: {
+    step: 'register' as const,
+    kicker: '// Step 01 of 03',
+    title: 'Create your account',
+    subtitle: 'Sign up with Google — nothing to remember, no credit card.',
+    cta: 'Sign up with Google',
+    busy: 'Creating account...',
+    success: 'Account created with Google',
+    failure: 'Google sign-up failed',
+    altPrompt: 'Already have an account?',
+    altLabel: 'Sign in',
+    altHref: '/login',
+  },
+};
+
+export function GoogleAuthPanel({ mode }: { mode: 'signin' | 'signup' }) {
+  const router = useRouter();
+  const { user, loginWithGoogle, loading: authLoading } = useAuth();
+  const copy = COPY[mode];
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!authLoading && user) {
+      router.push('/dashboard');
+    }
+  }, [user, authLoading, router]);
+
+  const handleGoogle = async () => {
+    setLoading(true);
+    try {
+      await loginWithGoogle();
+      toast.success(copy.success);
+      router.push('/dashboard');
+    } catch (error: any) {
+      toast.error(error.message || copy.failure);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (authLoading) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg)' }}>
+        <div style={{ textAlign: 'center' }}>
+          <div style={{
+            width: 48, height: 48, margin: '0 auto 16px',
+            border: '2px solid var(--line)', borderTopColor: 'var(--accent)',
+            borderRadius: '50%', animation: 'spin 0.9s linear infinite',
+          }} />
+          <p style={{ color: 'var(--text-3)' }}>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <AuthLayout step={copy.step} onBack={() => router.push('/')}>
+      <div className="kicker" style={{ marginBottom: 8 }}>{copy.kicker}</div>
+      <h2 style={{ fontSize: 'clamp(28px, 5vw, 32px)', letterSpacing: '-0.03em', margin: 0, lineHeight: 1.1 }}>
+        {copy.title}
+      </h2>
+      <p style={{ color: 'var(--text-3)', fontSize: 'clamp(13px, 2vw, 14px)', marginTop: 8, marginBottom: 24 }}>
+        {copy.subtitle}
+      </p>
+
+      {/* Google is the only credential, so a missing Firebase config is a dead
+          end rather than a fallback to another method — say so plainly. */}
+      {isFirebaseConfigured() ? (
+        <button type="button" className="btn btn-dark btn-lg"
+          onClick={handleGoogle}
+          disabled={loading}
+          style={{ width: '100%', justifyContent: 'center' }}>
+          <GoogleG /> {loading ? copy.busy : copy.cta}
+        </button>
+      ) : (
+        <div style={{
+          padding: 16, borderRadius: 'var(--radius-lg)',
+          border: '1px solid var(--line)', background: 'var(--bg-1)',
+          fontSize: 13, color: 'var(--text-2)', lineHeight: 1.6,
+        }}>
+          Google sign-in isn&apos;t configured on this deployment. Set the
+          {' '}<span className="mono" style={{ color: 'var(--accent)' }}>NEXT_PUBLIC_FIREBASE_*</span>{' '}
+          environment variables and reload.
+        </div>
+      )}
+
+      <div style={{ textAlign: 'center', fontSize: 'clamp(12px, 2vw, 13px)', color: 'var(--text-3)', marginTop: 20 }}>
+        {copy.altPrompt}{' '}
+        <button type="button" onClick={() => router.push(copy.altHref)}
+          style={{ color: 'var(--accent)', fontWeight: 500 }}>
+          {copy.altLabel}
+        </button>
+      </div>
+    </AuthLayout>
+  );
+}
diff --git a/client/src/components/dashboard/LoadBalancerCard.tsx b/client/src/components/dashboard/LoadBalancerCard.tsx
index 87e430d..079e38e 100644
--- a/client/src/components/dashboard/LoadBalancerCard.tsx
+++ b/client/src/components/dashboard/LoadBalancerCard.tsx
@@ -37,20 +37,10 @@ export const LoadBalancerCard = ({
   };
 
   return (
-    <div onClick={onSelect} style={{
-      textAlign: 'left', width: '100%',
-      background: 'var(--bg-1)', border: '1px solid var(--line)',
-      borderRadius: 'var(--radius-lg)', padding: 20,
+    <div onClick={onSelect} className="feature-card feature-card-lift" style={{
+      textAlign: 'left', width: '100%', padding: 20,
       display: 'flex', flexDirection: 'column', gap: 16,
-      transition: 'all 160ms', cursor: 'pointer',
-    }}
-    onMouseEnter={(e) => {
-      e.currentTarget.style.borderColor = 'var(--line-2)';
-      e.currentTarget.style.background = 'var(--bg-2)';
-    }}
-    onMouseLeave={(e) => {
-      e.currentTarget.style.borderColor = 'var(--line)';
-      e.currentTarget.style.background = 'var(--bg-1)';
+      cursor: 'pointer',
     }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
         <div style={{ minWidth: 0 }}>
@@ -150,10 +140,10 @@ export const EmptyState = ({ onCreate }: { onCreate: () => void }) => (
     padding: 48, border: '1px dashed var(--line-2)', borderRadius: 'var(--radius-lg)',
     background: 'var(--bg-1)',
   }}>
-    <div style={{
+    <div className="glow" style={{
       width: 64, height: 64, margin: '0 auto 24px',
       borderRadius: 'var(--radius)',
-      border: '1px solid var(--line-2)', background: 'var(--bg)',
+      border: '1px solid var(--accent)', background: 'var(--accent-dim)',
       display: 'flex', alignItems: 'center', justifyContent: 'center',
       position: 'relative',
     }}>
diff --git a/client/src/components/dashboard/Sidebar.tsx b/client/src/components/dashboard/Sidebar.tsx
index b068c69..e446d1d 100644
--- a/client/src/components/dashboard/Sidebar.tsx
+++ b/client/src/components/dashboard/Sidebar.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import { Logo } from '@/components/shared/Logo';
 import { Icons } from '@/components/shared/Icons';
-import { useTheme } from '@/hooks/useTheme';
 
 interface SidebarProps {
   current: string;
@@ -14,7 +13,6 @@ interface SidebarProps {
 
 export const Sidebar = ({ current, onNav, onLogout, userEmail }: SidebarProps) => {
   const [mobileOpen, setMobileOpen] = useState(false);
-  const { theme, toggleTheme } = useTheme();
 
   const items = [
     { id: 'balancers', icon: 'Layers', label: 'Load Balancers' },
@@ -67,14 +65,16 @@ export const Sidebar = ({ current, onNav, onLogout, userEmail }: SidebarProps) =
             <button key={it.id} onClick={() => { onNav(it.id); setMobileOpen(false); }} style={{
               display: 'flex', alignItems: 'center', gap: 10,
               padding: '8px 12px', borderRadius: 'var(--radius)',
-              background: active ? 'var(--bg-2)' : 'transparent',
-              color: active ? 'var(--text)' : 'var(--text-2)',
+              background: active ? 'var(--accent-dim)' : 'transparent',
+              color: active ? 'var(--accent)' : 'var(--text-2)',
               fontSize: 13, textAlign: 'left',
               borderLeft: `2px solid ${active ? 'var(--accent)' : 'transparent'}`,
               paddingLeft: 10,
               width: '100%',
               border: 'none',
               cursor: 'pointer',
+              fontWeight: active ? 500 : 400,
+              transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
             }}>
               <Ico size={15} stroke={active ? 'var(--accent)' : 'currentColor'} />
               {it.label}
@@ -91,7 +91,10 @@ export const Sidebar = ({ current, onNav, onLogout, userEmail }: SidebarProps) =
         fontSize: 'clamp(11px, 2vw, 12px)',
       }}>
         <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
-          <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)' }} />
+          <div style={{ position: 'relative', width: 6, height: 6, flexShrink: 0 }}>
+            <div className="animate-ping" style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--green)' }} />
+            <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--green)' }} />
+          </div>
           <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--text-2)' }}>CF connected</div>
         </div>
         <div style={{ fontSize: 11, color: 'var(--text-3)', fontFamily: 'var(--mono)' }}>
@@ -116,16 +119,6 @@ export const Sidebar = ({ current, onNav, onLogout, userEmail }: SidebarProps) =
           </button>
         );
       })}
-      <button onClick={toggleTheme} style={{
-        display: 'flex', alignItems: 'center', gap: 10,
-        padding: '8px 12px', borderRadius: 'var(--radius)',
-        color: 'var(--text-3)', fontSize: 13,
-        width: '100%', textAlign: 'left',
-        background: 'none', border: 'none', cursor: 'pointer',
-      }}>
-        {theme === 'dark' ? <Icons.Sun size={15} /> : <Icons.Moon size={15} />}
-        {theme === 'dark' ? 'Light mode' : 'Dark mode'}
-      </button>
       <button onClick={() => { onLogout(); setMobileOpen(false); }} style={{
         display: 'flex', alignItems: 'center', gap: 10,
         padding: '8px 12px', borderRadius: 'var(--radius)',
@@ -166,7 +159,8 @@ export const Sidebar = ({ current, onNav, onLogout, userEmail }: SidebarProps) =
           style={{
             display: 'flex', alignItems: 'center', justifyContent: 'center',
             width: 40, height: 40, borderRadius: 'var(--radius)',
-            background: 'var(--accent)', color: 'var(--bg)',
+            backgroundImage: 'linear-gradient(to right, var(--accent), var(--orange))',
+            color: '#fff', boxShadow: '0 4px 24px #f59e0b4d',
             border: 'none', cursor: 'pointer',
           }}
         >
diff --git a/client/src/contexts/AuthContext.tsx b/client/src/contexts/AuthContext.tsx
index 16a1085..fd9fc3f 100644
--- a/client/src/contexts/AuthContext.tsx
+++ b/client/src/contexts/AuthContext.tsx
@@ -9,10 +9,8 @@ import { signInWithPopup, signOut } from 'firebase/auth';
 interface AuthContextType {
   user: User | null;
   loading: boolean;
-  login: (email: string, password: string) => Promise<void>;
   loginWithGoogle: () => Promise<void>;
   logout: () => Promise<void>;
-  register: (name: string, email: string, password: string, confirmPassword: string) => Promise<void>;
   refreshUser: () => Promise<void>;
 }
 
@@ -41,13 +39,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     checkAuth();
   }, []);
 
-  const login = async (email: string, password: string) => {
-    const response = await api.login({ email, password });
-    if (response.success && response.data?.user) {
-      setUser(response.data.user);
-    }
-  };
-
   const loginWithGoogle = async () => {
     const auth = getFirebaseAuth();
     
@@ -68,10 +59,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const register = async (name: string, email: string, password: string, confirmPassword: string) => {
-    await api.register({ name, email, password, confirmPassword });
-  };
-
   const logout = async () => {
     await api.logout();
     setUser(null);
@@ -82,7 +69,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   };
 
   return (
-    <AuthContext.Provider value={{ user, loading, login, loginWithGoogle, logout, register, refreshUser }}>
+    <AuthContext.Provider value={{ user, loading, loginWithGoogle, logout, refreshUser }}>
       {children}
     </AuthContext.Provider>
   );
diff --git a/client/src/hooks/useTheme.ts b/client/src/hooks/useTheme.ts
deleted file mode 100644
index 9797d2f..0000000
--- a/client/src/hooks/useTheme.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-
-type Theme = 'dark' | 'light';
-
-const STORAGE_KEY = 'theme';
-
-function applyTheme(theme: Theme) {
-  if (typeof document === 'undefined') return;
-  if (theme === 'light') {
-    document.documentElement.setAttribute('data-theme', 'light');
-  } else {
-    document.documentElement.removeAttribute('data-theme');
-  }
-}
-
-export function useTheme() {
-  const [theme, setTheme] = useState<Theme>('dark');
-
-  useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
-    const initial: Theme = stored === 'light' ? 'light' : 'dark';
-    setTheme(initial);
-    applyTheme(initial);
-  }, []);
-
-  const toggleTheme = () => {
-    setTheme(prev => {
-      const next: Theme = prev === 'dark' ? 'light' : 'dark';
-      localStorage.setItem(STORAGE_KEY, next);
-      applyTheme(next);
-      return next;
-    });
-  };
-
-  return { theme, toggleTheme };
-};;
diff --git a/client/src/lib/api.ts b/client/src/lib/api.ts
index e138893..2fd59c5 100644
--- a/client/src/lib/api.ts
+++ b/client/src/lib/api.ts
@@ -36,16 +36,6 @@ class ApiClient {
 
   
   // Auth endpoints
-  async register(data: any): Promise<ApiResponse> {
-    const response = await this.client.post('/auth/register', data);
-    return response.data;
-  }
-
-  async login(data: any): Promise<ApiResponse> {
-    const response = await this.client.post('/auth/login', data);
-    return response.data; 
-  }
-
   async googleAuth(data: { idToken: string }): Promise<ApiResponse> {
     const response = await this.client.post('/auth/google', data);
     return response.data;
@@ -168,11 +158,6 @@ class ApiClient {
   }
 
   // User/Profile endpoints
-  async changePassword(data: any): Promise<ApiResponse> {
-    const response = await this.client.put('/user/password', data);
-    return response.data;
-  }
-
   async getProfile(): Promise<ApiResponse> {
     const response = await this.client.get('/user/profile');
     return response.data;
diff --git a/client/src/types/api.ts b/client/src/types/api.ts
index 080c0b4..f1386c9 100644
--- a/client/src/types/api.ts
+++ b/client/src/types/api.ts
@@ -16,19 +16,6 @@ export interface User {
   cloudflareApiToken?: string; // masked
 }
 
-// Auth types
-export interface LoginRequest {
-  email: string;
-  password: string;
-}
-
-export interface RegisterRequest {
-  name: string;
-  email: string;
-  password: string;
-  confirmPassword: string;
-}
-
 // Cloudflare types
 export interface CloudflareCredentials {
   accountId: string;
diff --git a/server/package-lock.json b/server/package-lock.json
index 396278a..dcdcf1a 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -1,17 +1,16 @@
 {
   "name": "server",
-  "version": "2.1.11",
+  "version": "2.2.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "server",
-      "version": "2.1.11",
+      "version": "2.2.19",
       "license": "ISC",
       "dependencies": {
         "@fastify/rate-limit": "^11.0.0",
         "axios": "^1.14.0",
-        "bcrypt": "^6.0.0",
         "dotenv": "^17.4.0",
         "fastify": "^5.6.1",
         "fastify-plugin": "^5.1.0",
@@ -22,7 +21,6 @@
         "redis": "^6.0.0"
       },
       "devDependencies": {
-        "@types/bcrypt": "^6.0.0",
         "@types/ioredis": "^4.28.10",
         "@types/jest": "^30.0.0",
         "@types/jsonwebtoken": "^9.0.10",
@@ -1649,14 +1647,14 @@
       }
     },
     "node_modules/@napi-rs/wasm-runtime": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
-      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
+      "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@tybys/wasm-util": "^0.10.1"
+        "@tybys/wasm-util": "^0.10.3"
       },
       "funding": {
         "type": "github",
@@ -1931,9 +1929,9 @@
       "license": "MIT"
     },
     "node_modules/@tybys/wasm-util": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
-      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -1986,16 +1984,6 @@
         "@babel/types": "^7.28.2"
       }
     },
-    "node_modules/@types/bcrypt": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz",
-      "integrity": "sha512-/oJGukuH3D2+D+3H4JWLaAsJ/ji86dhRidzZ/Od7H/i8g+aCmvkeCc6Ni/f9uxGLSQVCRZkX2/lqEFG2BvWtlQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/caseless": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.5.tgz",
@@ -3006,20 +2994,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/bcrypt": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-6.0.0.tgz",
-      "integrity": "sha512-cU8v/EGSrnH+HnxV2z0J7/blxH8gq7Xh2JFT6Aroax7UohdmiJJlxApMxtKfuI7z68NvvVcmR78k2LbT6efhRg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "dependencies": {
-        "node-addon-api": "^8.3.0",
-        "node-gyp-build": "^4.8.4"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/bignumber.js": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
@@ -6302,9 +6276,9 @@
       }
     },
     "node_modules/mongodb-memory-server-core/node_modules/gaxios": {
-      "version": "7.1.5",
-      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.1.5.tgz",
-      "integrity": "sha512-5FZy72Rh8LhtjmvDrKkI+lVhrsQrVKVsItxMoDm5mNQE+xR0WVIIs+jzPSJgBvKVsLi24fZhXJIsNI0bihDzFg==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.3.0.tgz",
+      "integrity": "sha512-RB5vLV+vvQeoFPCX4QMK6/hjVkbIamPp1QSUD0CiZcnj12qbpiL+pLbYtgD+oZkWl0tl9z+o2Utp+MpM3QRhBA==",
       "dev": true,
       "license": "Apache-2.0",
       "optional": true,
@@ -6425,9 +6399,9 @@
       }
     },
     "node_modules/mongoose/node_modules/gaxios": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.1.4.tgz",
-      "integrity": "sha512-bTIgTsM2bWn3XklZISBTQX7ZSddGW+IO3bMdGaemHZ3tbqExMENHLx6kKZ/KlejgrMtj8q7wBItt51yegqalrA==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.3.0.tgz",
+      "integrity": "sha512-RB5vLV+vvQeoFPCX4QMK6/hjVkbIamPp1QSUD0CiZcnj12qbpiL+pLbYtgD+oZkWl0tl9z+o2Utp+MpM3QRhBA==",
       "license": "Apache-2.0",
       "optional": true,
       "peer": true,
@@ -6589,15 +6563,6 @@
         "node": ">=12.22.0"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-8.7.0.tgz",
-      "integrity": "sha512-9MdFxmkKaOYVTV+XVRG8ArDwwQ77XIgIPyKASB1k3JPq3M8fGQQQE3YpMOrKm6g//Ktx8ivZr8xo1Qmtqub+GA==",
-      "license": "MIT",
-      "engines": {
-        "node": "^18 || ^20 || >= 21"
-      }
-    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -6639,17 +6604,6 @@
         }
       }
     },
-    "node_modules/node-gyp-build": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
-      "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
-      "license": "MIT",
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
-      }
-    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
diff --git a/server/package.json b/server/package.json
index 4fd6888..520f6f4 100644
--- a/server/package.json
+++ b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "2.1.18",
+  "version": "2.2.19",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,6 @@
   "dependencies": {
     "@fastify/rate-limit": "^11.0.0",
     "axios": "^1.14.0",
-    "bcrypt": "^6.0.0",
     "dotenv": "^17.4.0",
     "fastify": "^5.6.1",
     "fastify-plugin": "^5.1.0",
@@ -28,7 +27,6 @@
     "redis": "^6.0.0"
   },
   "devDependencies": {
-    "@types/bcrypt": "^6.0.0",
     "@types/ioredis": "^4.28.10",
     "@types/jest": "^30.0.0",
     "@types/jsonwebtoken": "^9.0.10",
diff --git a/server/src/__tests__/helpers/auth.ts b/server/src/__tests__/helpers/auth.ts
index cdd2eb3..8c21042 100644
--- a/server/src/__tests__/helpers/auth.ts
+++ b/server/src/__tests__/helpers/auth.ts
@@ -1,6 +1,5 @@
 import jwt from 'jsonwebtoken';
 import { User } from '../../models/User';
-import { hashPassword } from '../../utils/password';
 import type { JwtPayload } from '../../utils/jwt';
 
 const secret = () => process.env.JWT_SECRET!;
@@ -16,18 +15,16 @@ export function authCookieHeader(token: string): Record<string, string> {
 export async function createTestUser(overrides: {
   name?: string;
   email?: string;
-  password?: string;
+  firebaseUid?: string;
 } = {}) {
   const name = overrides.name ?? 'Test User';
   const rawEmail = overrides.email ?? `testuser${Date.now()}@example.com`;
-  const plainPassword = overrides.password ?? 'Password123!';
-  const hashedPassword = await hashPassword(plainPassword);
 
   const user = await User.create({
     name,
     email: rawEmail.toLowerCase(),
     username: `u${Date.now()}${Math.floor(Math.random() * 9999)}`,
-    password: hashedPassword,
+    ...(overrides.firebaseUid ? { firebaseUid: overrides.firebaseUid } : {}),
   });
 
   const token = makeTestJwt({
@@ -38,7 +35,6 @@ export async function createTestUser(overrides: {
   return {
     user,
     token,
-    plainPassword,
     cookie: authCookieHeader(token),
   };
 }
diff --git a/server/src/__tests__/integration/auth.test.ts b/server/src/__tests__/integration/auth.test.ts
index 3d77731..ba55a2b 100644
--- a/server/src/__tests__/integration/auth.test.ts
+++ b/server/src/__tests__/integration/auth.test.ts
@@ -19,139 +19,6 @@ afterAll(async () => {
   await closeTestDb();
 });
 
-const VALID_REGISTER = {
-  name: 'John Doe',
-  email: 'john@example.com',
-  password: 'Password123!',
-  confirmPassword: 'Password123!',
-};
-
-// ─── Register ────────────────────────────────────────────────────────────────
-
-describe('POST /api/auth/register', () => {
-  it('201 creates user with valid payload', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/register',
-      payload: VALID_REGISTER,
-    });
-    expect(res.statusCode).toBe(201);
-    const body = res.json();
-    expect(body.success).toBe(true);
-    expect(body.data.email).toBe('john@example.com');
-    expect(body.data.userId).toBeDefined();
-  });
-
-  it('400 when email is already registered', async () => {
-    await app.inject({ method: 'POST', url: '/api/auth/register', payload: VALID_REGISTER });
-    const res = await app.inject({ method: 'POST', url: '/api/auth/register', payload: VALID_REGISTER });
-    expect(res.statusCode).toBe(400);
-    expect(res.json().success).toBe(false);
-  });
-
-  it('400 when name is empty', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/register',
-      payload: { ...VALID_REGISTER, name: '' },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-
-  it('400 when name is too short', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/register',
-      payload: { ...VALID_REGISTER, name: 'A' },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-
-  it('400 when email format is invalid', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/register',
-      payload: { ...VALID_REGISTER, email: 'not-an-email' },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-
-  it('400 when password is shorter than 8 chars', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/register',
-      payload: { ...VALID_REGISTER, password: 'short', confirmPassword: 'short' },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-
-  it('400 when passwords do not match', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/register',
-      payload: { ...VALID_REGISTER, confirmPassword: 'DifferentPass!' },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-});
-
-// ─── Login ───────────────────────────────────────────────────────────────────
-
-describe('POST /api/auth/login', () => {
-  beforeEach(async () => {
-    await app.inject({ method: 'POST', url: '/api/auth/register', payload: VALID_REGISTER });
-  });
-
-  it('200 with valid credentials and sets an httpOnly cookie', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/login',
-      payload: { email: 'john@example.com', password: 'Password123!' },
-    });
-    expect(res.statusCode).toBe(200);
-    expect(res.json().success).toBe(true);
-    const setCookie = String(res.headers['set-cookie'] ?? '');
-    expect(setCookie).toContain('token=');
-    expect(setCookie).toContain('HttpOnly');
-  });
-
-  it('401 with incorrect password', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/login',
-      payload: { email: 'john@example.com', password: 'WrongPassword!' },
-    });
-    expect(res.statusCode).toBe(401);
-  });
-
-  it('401 with unknown email', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/login',
-      payload: { email: 'nobody@example.com', password: 'Password123!' },
-    });
-    expect(res.statusCode).toBe(401);
-  });
-
-  it('400 when email is missing', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/login',
-      payload: { password: 'Password123!' },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-
-  it('400 when password is missing', async () => {
-    const res = await app.inject({
-      method: 'POST',
-      url: '/api/auth/login',
-      payload: { email: 'john@example.com' },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-});
-
 // ─── Logout ──────────────────────────────────────────────────────────────────
 
 describe('POST /api/auth/logout', () => {
diff --git a/server/src/__tests__/integration/user.test.ts b/server/src/__tests__/integration/user.test.ts
index 1803fad..ee25ff5 100644
--- a/server/src/__tests__/integration/user.test.ts
+++ b/server/src/__tests__/integration/user.test.ts
@@ -45,81 +45,3 @@ describe('GET /api/user/profile', () => {
     expect(res.statusCode).toBe(401);
   });
 });
-
-// ─── Change Password ──────────────────────────────────────────────────────────
-
-describe('PUT /api/user/password', () => {
-  it('200 on correct currentPassword with valid new password', async () => {
-    const { cookie } = await createTestUser({ password: 'OldPassword123!' });
-    const res = await app.inject({
-      method: 'PUT',
-      url: '/api/user/password',
-      headers: cookie,
-      payload: {
-        currentPassword: 'OldPassword123!',
-        newPassword: 'NewPassword456!',
-        confirmNewPassword: 'NewPassword456!',
-      },
-    });
-    expect(res.statusCode).toBe(200);
-    expect(res.json().success).toBe(true);
-  });
-
-  it('400 when currentPassword is wrong', async () => {
-    const { cookie } = await createTestUser({ password: 'OldPassword123!' });
-    const res = await app.inject({
-      method: 'PUT',
-      url: '/api/user/password',
-      headers: cookie,
-      payload: {
-        currentPassword: 'WrongCurrentPassword!',
-        newPassword: 'NewPassword456!',
-        confirmNewPassword: 'NewPassword456!',
-      },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-
-  it('400 when newPassword is shorter than 8 chars', async () => {
-    const { cookie } = await createTestUser({ password: 'OldPassword123!' });
-    const res = await app.inject({
-      method: 'PUT',
-      url: '/api/user/password',
-      headers: cookie,
-      payload: {
-        currentPassword: 'OldPassword123!',
-        newPassword: 'short',
-        confirmNewPassword: 'short',
-      },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-
-  it('400 when confirmNewPassword does not match', async () => {
-    const { cookie } = await createTestUser({ password: 'OldPassword123!' });
-    const res = await app.inject({
-      method: 'PUT',
-      url: '/api/user/password',
-      headers: cookie,
-      payload: {
-        currentPassword: 'OldPassword123!',
-        newPassword: 'NewPassword456!',
-        confirmNewPassword: 'MismatchPass!',
-      },
-    });
-    expect(res.statusCode).toBe(400);
-  });
-
-  it('401 when not authenticated', async () => {
-    const res = await app.inject({
-      method: 'PUT',
-      url: '/api/user/password',
-      payload: {
-        currentPassword: 'OldPassword123!',
-        newPassword: 'NewPassword456!',
-        confirmNewPassword: 'NewPassword456!',
-      },
-    });
-    expect(res.statusCode).toBe(401);
-  });
-});
diff --git a/server/src/__tests__/unit/password.test.ts b/server/src/__tests__/unit/password.test.ts
deleted file mode 100644
index 0947f58..0000000
--- a/server/src/__tests__/unit/password.test.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { hashPassword, comparePassword } from '../../utils/password';
-
-describe('hashPassword', () => {
-  it('returns a bcrypt hash, not the plaintext', async () => {
-    const hash = await hashPassword('SecurePass99');
-    expect(hash).not.toBe('SecurePass99');
-    expect(hash.startsWith('$2b$')).toBe(true);
-  });
-
-  it('produces a different hash on each call (salt)', async () => {
-    const a = await hashPassword('SecurePass99');
-    const b = await hashPassword('SecurePass99');
-    expect(a).not.toBe(b);
-  });
-});
-
-describe('comparePassword', () => {
-  it('returns true for a matching password', async () => {
-    const hash = await hashPassword('CorrectHorseBattery');
-    await expect(comparePassword('CorrectHorseBattery', hash)).resolves.toBe(true);
-  });
-
-  it('returns false for a wrong password', async () => {
-    const hash = await hashPassword('CorrectHorseBattery');
-    await expect(comparePassword('WrongPassword', hash)).resolves.toBe(false);
-  });
-});
diff --git a/server/src/controllers/authController.ts b/server/src/controllers/authController.ts
index 22ac86b..7f6e2f3 100644
--- a/server/src/controllers/authController.ts
+++ b/server/src/controllers/authController.ts
@@ -1,103 +1,8 @@
 import { User } from '../models/User';
-import { hashPassword, comparePassword, generateUsername, generateToken } from '../utils';
+import { generateUsername, generateToken } from '../utils';
 import { verifyFirebaseToken, isFirebaseConfigured } from '../config/firebase';
 import type { AppRequest as Request, AppResponse as Response, NextFunction } from '../types/http';
 
-export const register = async (req: Request, res: Response, next: NextFunction) => {
-  try {
-    const { name, email, password } = req.body;
-
-    // Check if user already exists
-    const existingUser = await User.findOne({ email: email.toLowerCase() });
-    if (existingUser) {
-      res.status(400);
-      throw new Error('Email already registered');
-    }
-
-    // Generate unique username from name
-    const username = await generateUsername(name);
-
-    // Hash password
-    const hashedPassword = await hashPassword(password);
-
-    // Create user
-    const user = await User.create({
-      name,
-      email: email.toLowerCase(),
-      username,
-      password: hashedPassword,
-    });
-
-    res.status(201).json({
-      success: true,
-      message: 'Registration successful',
-      data: {
-        userId: user._id,
-        email: user.email,
-        username: user.username,
-      },
-    });
-  } catch (error) {
-    next(error as Error);
-  }
-};
-
-export const login = async (req: Request, res: Response, next: NextFunction) => {
-  try {
-    const { email, password } = req.body;
-
-    // Find user by email
-    const user = await User.findOne({ email: email.toLowerCase() });
-    if (!user) {
-      res.status(401);
-      throw new Error('Invalid email or password');
-    }
-
-    if (!user.password) {
-      res.status(400);
-      throw new Error('This account uses Google sign-in. Continue with Google to access it.');
-    }
-
-    // Compare password
-    const isMatch = await comparePassword(password, user.password);
-    if (!isMatch) {
-      res.status(401);
-      throw new Error('Invalid email or password');
-    }
-
-    // Generate JWT
-    const token = generateToken({
-      userId: user._id.toString(),
-      email: user.email,
-      firebaseUid: user.firebaseUid,
-    });
-
-    // Set httpOnly cookie
-    res.cookie('token', token, {
-      httpOnly: true,
-      secure: process.env.NODE_ENV === 'production',
-      sameSite: 'strict',
-      maxAge: 24 * 60 * 60 * 1000, // 24 hours
-    });
-
-    res.json({
-      success: true,
-      message: 'Login successful',
-      data: {
-        user: {
-          id: user._id,
-          name: user.name,
-          email: user.email,
-          username: user.username,
-          hasCloudflareCredentials: !!(user.cloudflareAccountId && user.cloudflareApiToken),
-        },
-      },
-    });
-  } catch (error) {
-    next(error as Error);
-  }
-};
-
 export const logout = async (req: Request, res: Response, next: NextFunction) => {
   try {
     res.clearCookie('token');
@@ -119,7 +24,7 @@ export const getCurrentUser = async (req: Request, res: Response, next: NextFunc
       throw new Error('Not authenticated');
     }
 
-    const user = await User.findById(userId).select('-password');
+    const user = await User.findById(userId);
     if (!user) {
       res.status(404);
       throw new Error('User not found');
@@ -179,7 +84,6 @@ export const googleAuth = async (req: Request, res: Response, next: NextFunction
         email: email.toLowerCase(),
         username,
         firebaseUid: uid,
-        password: null, // OAuth users don't have a local password
       });
     } else {
       // Sync firebaseUid if not already set (e.g., if user registered with email previously)
diff --git a/server/src/controllers/userController.ts b/server/src/controllers/userController.ts
index aed99d5..d489424 100644
--- a/server/src/controllers/userController.ts
+++ b/server/src/controllers/userController.ts
@@ -1,5 +1,4 @@
 import { User } from '../models/User';
-import { hashPassword, comparePassword } from '../utils/password';
 import { getMaskedCredentials } from '../services/credentialsService';
 import type { AppRequest as Request, AppResponse as Response, NextFunction } from '../types/http';
 
@@ -11,7 +10,7 @@ export const getProfile = async (req: Request, res: Response, next: NextFunction
       throw new Error('Not authenticated');
     }
 
-    const user = await User.findById(userId).select('-password');
+    const user = await User.findById(userId);
     if (!user) {
       res.status(404);
       throw new Error('User not found');
@@ -41,45 +40,3 @@ export const getProfile = async (req: Request, res: Response, next: NextFunction
   }
 };
 
-export const changePassword = async (req: Request, res: Response, next: NextFunction) => {
-  try {
-    const userId = req.user?.userId;
-    if (!userId) {
-      res.status(401);
-      throw new Error('Not authenticated');
-    }
-
-    const { currentPassword, newPassword } = req.body;
-
-    const user = await User.findById(userId);
-    if (!user) {
-      res.status(404);
-      throw new Error('User not found');
-    }
-
-    if (!user.password) {
-      res.status(400);
-      throw new Error('This account uses Google sign-in and does not have a password to change');
-    }
-
-    // Verify current password
-    const isMatch = await comparePassword(currentPassword, user.password);
-    if (!isMatch) {
-      res.status(400);
-      throw new Error('Current password is incorrect');
-    }
-
-    // Hash new password
-    const hashedPassword = await hashPassword(newPassword);
-    user.password = hashedPassword;
-    await user.save();
-
-    res.json({
-      success: true,
-      message: 'Password changed successfully',
-      data: null,
-    });
-  } catch (error) {
-    next(error as Error);
-  }
-};
diff --git a/server/src/middleware/validators/authValidators.ts b/server/src/middleware/validators/authValidators.ts
index 962287d..f815b03 100644
--- a/server/src/middleware/validators/authValidators.ts
+++ b/server/src/middleware/validators/authValidators.ts
@@ -1,63 +1,5 @@
 import { validateBody } from '../validation';
 
-const isEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-
-export const registerValidation = [
-  validateBody((body) => {
-    const errors: string[] = [];
-    const name = typeof body?.name === 'string' ? body.name.trim() : '';
-    const email = typeof body?.email === 'string' ? body.email.trim() : '';
-    const password = typeof body?.password === 'string' ? body.password : '';
-    const confirmPassword = typeof body?.confirmPassword === 'string' ? body.confirmPassword : '';
-
-    if (!name) {
-      errors.push('Name is required');
-    } else if (name.length < 2 || name.length > 100) {
-      errors.push('Name must be between 2 and 100 characters');
-    }
-
-    if (!email) {
-      errors.push('Email is required');
-    } else if (!isEmail(email)) {
-      errors.push('Please provide a valid email');
-    }
-
-    if (!password) {
-      errors.push('Password is required');
-    } else if (password.length < 8) {
-      errors.push('Password must be at least 8 characters');
-    }
-
-    if (!confirmPassword) {
-      errors.push('Please confirm your password');
-    } else if (confirmPassword !== password) {
-      errors.push('Passwords do not match');
-    }
-
-    return errors;
-  }),
-];
-
-export const loginValidation = [
-  validateBody((body) => {
-    const errors: string[] = [];
-    const email = typeof body?.email === 'string' ? body.email.trim() : '';
-    const password = typeof body?.password === 'string' ? body.password : '';
-
-    if (!email) {
-      errors.push('Email is required');
-    } else if (!isEmail(email)) {
-      errors.push('Please provide a valid email');
-    }
-
-    if (!password) {
-      errors.push('Password is required');
-    }
-
-    return errors;
-  }),
-];
-
 export const googleAuthValidation = [
   validateBody((body) => {
     const errors: string[] = [];
diff --git a/server/src/middleware/validators/userValidators.ts b/server/src/middleware/validators/userValidators.ts
deleted file mode 100644
index d1dbeb7..0000000
--- a/server/src/middleware/validators/userValidators.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { validateBody } from '../validation';
-
-export const changePasswordValidation = [
-  validateBody((body) => {
-    const errors: string[] = [];
-    const currentPassword = typeof body?.currentPassword === 'string' ? body.currentPassword : '';
-    const newPassword = typeof body?.newPassword === 'string' ? body.newPassword : '';
-    const confirmNewPassword = typeof body?.confirmNewPassword === 'string' ? body.confirmNewPassword : '';
-
-    if (!currentPassword) {
-      errors.push('Current password is required');
-    }
-
-    if (!newPassword) {
-      errors.push('New password is required');
-    } else if (newPassword.length < 8) {
-      errors.push('New password must be at least 8 characters');
-    }
-
-    if (!confirmNewPassword) {
-      errors.push('Please confirm your new password');
-    } else if (confirmNewPassword !== newPassword) {
-      errors.push('Passwords do not match');
-    }
-
-    return errors;
-  }),
-];
diff --git a/server/src/models/User.ts b/server/src/models/User.ts
index 5edd511..ff3ac58 100644
--- a/server/src/models/User.ts
+++ b/server/src/models/User.ts
@@ -5,7 +5,6 @@ export interface IUser extends Document {
   email?: string | null;
   username: string;
   firebaseUid?: string | null;
-  password?: string | null;
   cloudflareAccountId?: string;
   cloudflareApiToken?: string;
   cloudflareAccountIdIv?: string;
@@ -41,20 +40,6 @@ const UserSchema = new Schema<IUser>(
       lowercase: true,
       trim: true,
     },
-    password: {
-      type: String,
-      default: null,
-      validate: {
-        validator(value: string | null | undefined) {
-          if (!value) {
-            return true;
-          }
-
-          return value.length >= 8;
-        },
-        message: 'Password must be at least 8 characters',
-      },
-    },
     firebaseUid: {
       type: String,
       unique: true,
diff --git a/server/src/routes/authRoutes.ts b/server/src/routes/authRoutes.ts
index 368ceb0..98b6c13 100644
--- a/server/src/routes/authRoutes.ts
+++ b/server/src/routes/authRoutes.ts
@@ -1,6 +1,6 @@
 import type { FastifyInstance } from 'fastify';
-import { register, login, logout, getCurrentUser, googleAuth } from '../controllers/authController';
-import { registerValidation, loginValidation, googleAuthValidation } from '../middleware/validators/authValidators';
+import { logout, getCurrentUser, googleAuth } from '../controllers/authController';
+import { googleAuthValidation } from '../middleware/validators/authValidators';
 import { authenticate } from '../middleware/auth';
 import { runHandlers } from '../utils/routeRunner';
 
@@ -9,9 +9,7 @@ const STRICT   = TEST ? { max: 10000, timeWindow: '1 minute' } : { max: 5,  time
 const RELAXED  = TEST ? { max: 10000, timeWindow: '1 minute' } : { max: 60, timeWindow: '1 minute'   };
 
 export default async function authRoutes(app: FastifyInstance) {
-  app.post('/register', { config: { rateLimit: STRICT  } }, async (request, reply) => runHandlers([...registerValidation, register], request, reply));
-  app.post('/login',    { config: { rateLimit: STRICT  } }, async (request: any, reply: any) => runHandlers([...loginValidation, login], request, reply));
-  app.post('/google',   { config: { rateLimit: STRICT  } }, async (request, reply) => runHandlers([...googleAuthValidation, googleAuth], request, reply));
-  app.post('/logout',   { config: { rateLimit: RELAXED } }, async (request, reply) => runHandlers([logout], request, reply));
-  app.get('/me',        { config: { rateLimit: RELAXED } }, async (request, reply) => runHandlers([authenticate, getCurrentUser], request, reply));
+  app.post('/google', { config: { rateLimit: STRICT  } }, async (request, reply) => runHandlers([...googleAuthValidation, googleAuth], request, reply));
+  app.post('/logout', { config: { rateLimit: RELAXED } }, async (request, reply) => runHandlers([logout], request, reply));
+  app.get('/me',      { config: { rateLimit: RELAXED } }, async (request, reply) => runHandlers([authenticate, getCurrentUser], request, reply));
 }
diff --git a/server/src/routes/userRoutes.ts b/server/src/routes/userRoutes.ts
index 4a527ef..41b7e28 100644
--- a/server/src/routes/userRoutes.ts
+++ b/server/src/routes/userRoutes.ts
@@ -1,14 +1,11 @@
 import type { FastifyInstance } from 'fastify';
-import { getProfile, changePassword } from '../controllers/userController';
-import { changePasswordValidation } from '../middleware/validators/userValidators';
+import { getProfile } from '../controllers/userController';
 import { authenticate } from '../middleware/auth';
 import { runHandlers } from '../utils/routeRunner';
 
 const TEST = process.env.NODE_ENV === 'test';
-const STRICT  = TEST ? { max: 10000, timeWindow: '1 minute' } : { max: 5,  timeWindow: '15 minutes' };
-const RELAXED = TEST ? { max: 10000, timeWindow: '1 minute' } : { max: 60, timeWindow: '1 minute'   };
+const RELAXED = TEST ? { max: 10000, timeWindow: '1 minute' } : { max: 60, timeWindow: '1 minute' };
 
 export default async function userRoutes(app: FastifyInstance) {
-  app.get('/profile',  { config: { rateLimit: RELAXED } }, async (request, reply) => runHandlers([authenticate, getProfile], request, reply));
-  app.put('/password', { config: { rateLimit: STRICT  } }, async (request, reply) => runHandlers([authenticate, ...changePasswordValidation, changePassword], request, reply));
+  app.get('/profile', { config: { rateLimit: RELAXED } }, async (request, reply) => runHandlers([authenticate, getProfile], request, reply));
 }
diff --git a/server/src/utils/index.ts b/server/src/utils/index.ts
index 8c12d74..b7dd304 100644
--- a/server/src/utils/index.ts
+++ b/server/src/utils/index.ts
@@ -1,6 +1,5 @@
 export * from './database';
 export * from './encryption';
-export * from './password';
 export * from './jwt';
 export * from './username';
 export * from './mask';
diff --git a/server/src/utils/password.ts b/server/src/utils/password.ts
deleted file mode 100644
index 92c7148..0000000
--- a/server/src/utils/password.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import bcrypt from 'bcrypt';
-
-const SALT_ROUNDS = 10;
-
-export const hashPassword = async (password: string): Promise<string> => {
-  return await bcrypt.hash(password, SALT_ROUNDS);
-};
-
-export const comparePassword = async (
-  password: string,
-  hashedPassword: string
-): Promise<boolean> => {
-  return await bcrypt.compare(password, hashedPassword);
-};