diff --git a/packages/app/public/marketing.html b/packages/app/public/marketing.html
index e472e2d..bfd8524 100644
--- a/packages/app/public/marketing.html
+++ b/packages/app/public/marketing.html
@@ -2299,15 +2299,15 @@ footer {
 
       <!-- ── TypeScript ── -->
       <div class="int-card reveal"
-           style="--glow:#3b82f6;--glow-dim:rgba(59,130,246,.14);--glow-soft:rgba(59,130,246,.06);--glow-ambient:rgba(59,130,246,.04);--ico-bg:#1e3a5f;--ico-bd:rgba(59,130,246,.3)">
-        <div class="int-ico" style="background:#1d4ed8;border-color:rgba(59,130,246,.4)">
-          <!-- TypeScript official mark: blue square with correct TS letterforms -->
+           style="--glow:#3178c6;--glow-dim:rgba(49,120,198,.14);--glow-soft:rgba(49,120,198,.06);--glow-ambient:rgba(49,120,198,.04);--ico-bg:#3178c6;--ico-bd:rgba(49,120,198,.6)">
+        <div class="int-ico">
+          <!-- TypeScript official mark — blue bg via --ico-bg, white TS letterforms -->
           <svg viewBox="0 0 18 18" width="18" height="18">
-            <rect width="18" height="18" rx="2" fill="#3178c6"/>
-            <!-- T: crossbar at TOP, stem descends from centre -->
-            <path d="M2 6.5h6M5 6.5v7" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
-            <!-- S: top curve right, mid narrows, bottom curve left -->
-            <path d="M10 13.5c.5.8 1.4 1.2 2.6 1.2 1.5 0 2.8-.8 2.8-2.2 0-1.1-.7-1.8-2.1-2.3-1.1-.4-1.8-.8-1.8-1.6 0-.7.6-1.3 1.7-1.3.9 0 1.6.3 2.1 1" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
+            <!-- T: full-width crossbar + centered stem (left half) -->
+            <rect x="0.5" y="4.5" width="8.5" height="1.8" rx="0.5" fill="white"/>
+            <rect x="3.75" y="4.5" width="1.9" height="9.2" rx="0.5" fill="white"/>
+            <!-- S: top arc (opens right) → middle pinch → bottom arc (opens left) -->
+            <path d="M15.8 7.2c-.5-.9-1.4-1.4-2.5-1.4-1.4 0-2.3.7-2.3 1.9 0 1 .9 1.6 2.1 2 1.3.4 2.3 1.1 2.3 2.3 0 1.3-1.1 2.1-2.6 2.1-1.1 0-2-.4-2.6-1.3" stroke="white" stroke-width="1.7" stroke-linecap="round" fill="none"/>
           </svg>
         </div>
         <div>
diff --git a/packages/app/src/app/onboarding/page.tsx b/packages/app/src/app/onboarding/page.tsx
index 82cf772..1936d6c 100644
--- a/packages/app/src/app/onboarding/page.tsx
+++ b/packages/app/src/app/onboarding/page.tsx
@@ -3,10 +3,12 @@
 import { useState } from 'react';
 import { useUser } from '@clerk/nextjs';
 import { useRouter } from 'next/navigation';
+import { useTheme } from '@/store/theme';
 
 export default function OnboardingPage() {
   const { user, isLoaded } = useUser();
   const router = useRouter();
+  const { mode, toggle } = useTheme();
 
   const defaultName = isLoaded
     ? `${user?.firstName ?? user?.emailAddresses[0]?.emailAddress?.split('@')[0] ?? 'My'}'s Workspace`
@@ -52,7 +54,39 @@ export default function OnboardingPage() {
       background: 'var(--page-bg)',
       fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       padding: '24px',
+      position: 'relative',
     }}>
+      {/* Theme toggle */}
+      <button
+        onClick={toggle}
+        title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+        style={{
+          position: 'absolute', top: 16, right: 16,
+          background: 'none', border: 'none', cursor: 'pointer',
+          color: mode === 'dark' ? 'rgba(255,255,255,0.4)' : '#A1A1AA',
+          padding: '7px', display: 'flex', alignItems: 'center', borderRadius: 8,
+          transition: 'color 0.12s, background 0.12s',
+        }}
+        onMouseEnter={e => {
+          e.currentTarget.style.color = mode === 'dark' ? 'rgba(255,255,255,0.85)' : '#0A0A0A';
+          e.currentTarget.style.background = mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)';
+        }}
+        onMouseLeave={e => {
+          e.currentTarget.style.color = mode === 'dark' ? 'rgba(255,255,255,0.4)' : '#A1A1AA';
+          e.currentTarget.style.background = 'none';
+        }}
+      >
+        {mode === 'dark' ? (
+          <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
+            <circle cx="7" cy="7" r="2.5" stroke="currentColor" strokeWidth="1.2"/>
+            <path d="M7 1v1.5M7 11.5V13M1 7h1.5M11.5 7H13M2.93 2.93l1.06 1.06M10.01 10.01l1.06 1.06M2.93 11.07l1.06-1.06M10.01 3.99l1.06-1.06" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
+          </svg>
+        ) : (
+          <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
+            <path d="M12 8.5A5.5 5.5 0 0 1 5.5 2a5.5 5.5 0 1 0 6.5 6.5z" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        )}
+      </button>
       {/* Logo */}
       <div style={{ marginBottom: 40, fontSize: '1.125rem', fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--page-text)' }}>
         Origin<span style={{ color: '#0066FF' }}>main</span>
diff --git a/packages/app/src/app/workspace/[wid]/project/[pid]/settings/page.tsx b/packages/app/src/app/workspace/[wid]/project/[pid]/settings/page.tsx
index c9a1ddb..e0e08fb 100644
--- a/packages/app/src/app/workspace/[wid]/project/[pid]/settings/page.tsx
+++ b/packages/app/src/app/workspace/[wid]/project/[pid]/settings/page.tsx
@@ -1,7 +1,7 @@
 import { auth } from '@clerk/nextjs/server';
 import { redirect } from 'next/navigation';
-import Link from 'next/link';
 import { serverClient } from '@/lib/supabase';
+import { AppHeader } from '@/components/shell/AppHeader';
 import { ProjectSettingsForm } from '@/components/shell/ProjectSettingsForm';
 
 export async function generateMetadata({ params }: { params: Promise<{ wid: string; pid: string }> }) {
@@ -55,31 +55,12 @@ export default async function ProjectSettingsPage({
       fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       transition: 'background 0.2s',
     }}>
-      {/* Header */}
-      <div style={{
-        background: 'var(--card-bg)',
-        borderBottom: '1px solid var(--card-border)',
-        padding: '0 32px',
-        display: 'flex',
-        alignItems: 'center',
-        height: 56,
-        gap: 0,
-        transition: 'background 0.2s',
-      }}>
-        <Link href="/workspaces" style={{ textDecoration: 'none', fontSize: '0.875rem', fontWeight: 700, color: 'var(--card-text)', letterSpacing: '-0.01em' }}>
-          Origin<span style={{ color: '#3385FF' }}>main</span>
-        </Link>
-        <span style={{ color: 'var(--card-border)', margin: '0 8px', fontSize: '0.875rem' }}>/</span>
-        <Link href={`/workspace/${wid}`} style={{ textDecoration: 'none', fontSize: '0.875rem', color: 'var(--card-muted)', fontWeight: 500 }}>
-          {wsResult.data?.name ?? 'Workspace'}
-        </Link>
-        <span style={{ color: 'var(--card-border)', margin: '0 8px', fontSize: '0.875rem' }}>/</span>
-        <Link href={`/workspace/${wid}/project/${pid}`} style={{ textDecoration: 'none', fontSize: '0.875rem', color: 'var(--card-muted)', fontWeight: 500 }}>
-          {project.name}
-        </Link>
-        <span style={{ color: 'var(--card-border)', margin: '0 8px', fontSize: '0.875rem' }}>/</span>
-        <span style={{ fontSize: '0.875rem', color: 'var(--card-text)', fontWeight: 600 }}>Settings</span>
-      </div>
+      <AppHeader breadcrumbs={[
+        { label: 'Workspaces', href: '/workspaces' },
+        { label: wsResult.data?.name ?? 'Workspace', href: `/workspace/${wid}` },
+        { label: project.name, href: `/workspace/${wid}/project/${pid}` },
+        { label: 'Settings' },
+      ]} />
 
       {/* Content */}
       <div style={{ maxWidth: 640, margin: '0 auto', padding: '40px 24px' }}>