diff --git a/messages/ar.json b/messages/ar.json
index 2ffd446..29919f6 100644
--- a/messages/ar.json
+++ b/messages/ar.json
@@ -2,6 +2,7 @@
   "Common": {
     "copyAddress": "نسخ {label}",
     "copied": "تم النسخ",
+    "viewInvestment": "عرض استثمارك",
     "viewOnExplorer": "عرض {label} على Stellar Expert",
     "shareLink": "مشاركة الرابط"
   },
@@ -21,12 +22,14 @@
     "testnet": "شبكة الاختبار (نشطة)",
     "networkStatus": "الشبكة: شبكة الاختبار نشطة",
     "portfolio": "محفظتك",
+    "watchlist": "قائمة المراقبة",
     "switchToDark": "التبديل إلى الوضع الداكن",
     "switchToLight": "التبديل إلى الوضع الفاتح",
     "language": "اللغة",
     "account": "الحساب",
     "copyAddress": "نسخ العنوان",
     "copied": "تم النسخ",
+    "viewInvestment": "عرض استثمارك",
     "viewOnExplorer": "عرض على Stellar Expert",
     "shareLink": "مشاركة رابط الإحالة",
     "disconnect": "قطع الاتصال",
@@ -110,9 +113,9 @@
   "Explore": {
     "title": "أين يعمل المجمع",
     "sub": "كل مشروع يموله المجمع، مع درجات مؤكدة من Oracle. استكشف بحرية — توصيل المحفظة يأتي لاحقاً.",
-    "filterAll": "الكل",
+    "searchLabel": "ابحث في المشاريع",
     "searchPlaceholder": "ابحث بالاسم أو الموقع",
-    "searchAriaLabel": "ابحث في المشاريع بالاسم أو الموقع",
+    "filterAll": "الكل",
     "countSorted": "{count} مشاريع",
     "cardFundedFromPool": "ممول من المجمع",
     "cardVerifiedAgo": "تم التحقق قبل {ago}",
@@ -121,6 +124,21 @@
     "loadMore": "عرض {count} المزيد",
     "showingCount": "عرض {shown} من {total} مشاريع"
   },
+  "Watchlist": {
+    "title": "قائمة المراقبة الخاصة بك",
+    "sub": "السندات التي تتابعها. حفظ سند لا يعني الاستثمار — بل يبقيه في متناول اليد ويشير إلى وقت فتحه للتمويل.",
+    "cardFundedFromPool": "ممول من المجمع",
+    "emptyTitle": "لا شيء محفوظ حتى الآن",
+    "emptySub": "افتح سنداً من استكشف وانقر على النجمة لإضافته هنا. سنشير هنا عندما يكون السند المحفوظ مفتوحاً للتمويل.",
+    "added": "تمت الإضافة إلى قائمة المراقبة",
+    "removed": "تمت الإزالة من قائمة المراقبة",
+    "saveLabel": "إضافة {name} إلى قائمة المراقبة",
+    "removeLabel": "إزالة {name} من قائمة المراقبة",
+    "availableBanner": "{count, plural, one {سند واحد متابع مفتوح للتمويل الآن.} other {# سندات متابعة مفتوحة للتمويل الآن.}}",
+    "statusOpen": "مفتوح للتمويل",
+    "statusUpcoming": "غير متاح بعد",
+    "notYetAvailable": "سنشير هنا بمجرد فتحه."
+  },
   "Deposit": {
     "stepAmount": "المبلغ",
     "stepReview": "مراجعة",
@@ -152,6 +170,7 @@
     "pendingTx": "tx a91f…3c0d · عرض على Stellar Expert ↗",
     "successH1": "مرحباً بك في المجمع",
     "successBody": "حصلت على <num>{shares} HBS</num> وتدعم الآن <b>{count} مشاريع مؤكدة</b>.",
+    "viewInvestment": "عرض استثمارك",
     "viewExpert": "عرض على Stellar Expert",
     "goPortfolio": "انتقل إلى المحفظة"
   },
@@ -168,6 +187,11 @@
     "impactBody": "حصتك تساعد في تمويل <b>{count} مشاريع مؤكدة</b> في 6 دول.",
     "projectsBacked": "المشاريع المدعومة",
     "weightedGreen": "الدرجة الخضراء المرجحة",
+    "riskScore": "درجة مخاطر المحفظة",
+    "riskTierConservative": "محافظ",
+    "riskTierModerate": "معتدل",
+    "riskTierAggressive": "عالي المخاطر",
+    "riskCaption": "بناءً على مزيج تصنيفات السندات في حيازاتك.",
     "activityTitle": "النشاط",
     "activityNote": "كل إدخال → Stellar Expert"
   },
diff --git a/messages/es.json b/messages/es.json
index a61f5de..01d711b 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -2,6 +2,7 @@
   "Common": {
     "copyAddress": "Copy {label}",
     "copied": "Copied",
+    "viewInvestment": "Ver tu inversión",
     "viewOnExplorer": "View {label} on Stellar Expert",
     "referralProgramShareLink": "Enlace para compartir el programa de referidos"
   },
@@ -14,12 +15,14 @@
     "testnet": "Testnet (active)",
     "networkStatus": "Network: Testnet active",
     "portfolio": "Your portfolio",
+    "watchlist": "Lista de seguimiento",
     "switchToDark": "Switch to dark",
     "switchToLight": "Switch to light",
     "language": "Language",
     "account": "Account",
     "copyAddress": "Copy address",
     "copied": "Copied",
+    "viewInvestment": "Ver tu inversión",
     "viewOnExplorer": "View on Stellar Expert",
     "disconnect": "Disconnect",
     "disconnectConfirm": "Yes, disconnect",
@@ -103,8 +106,8 @@
   "Explore": {
     "title": "Where the pool works",
     "sub": "Every project the pool funds, with oracle-verified scores. Explore freely — connecting a wallet comes later.",
+    "searchLabel": "Buscar proyectos",
     "searchPlaceholder": "Search by name or location",
-    "searchAriaLabel": "Search projects",
     "filterAll": "All",
     "countSorted": "{count} projects",
     "cardFundedFromPool": "Funded from the pool",
@@ -114,6 +117,21 @@
     "loadMore": "Show {count} more",
     "showingCount": "Showing {shown} of {total} projects"
   },
+  "Watchlist": {
+    "title": "Tu lista de seguimiento",
+    "sub": "Los bonos que sigues. Guardar uno no invierte — lo mantiene a mano y te avisa cuando se abre a financiación.",
+    "cardFundedFromPool": "Financiado por el fondo",
+    "emptyTitle": "Nada guardado por ahora",
+    "emptySub": "Abre un bono desde Explorar y toca la estrella para añadirlo aquí. Te avisaremos cuando un bono guardado esté abierto a financiación.",
+    "added": "Añadido a la lista de seguimiento",
+    "removed": "Eliminado de la lista de seguimiento",
+    "saveLabel": "Añadir {name} a la lista de seguimiento",
+    "removeLabel": "Eliminar {name} de la lista de seguimiento",
+    "availableBanner": "{count, plural, one {# bono seguido está abierto a financiación ahora mismo.} other {# bonos seguidos están abiertos a financiación ahora mismo.}}",
+    "statusOpen": "Abierto a financiación",
+    "statusUpcoming": "Aún no disponible",
+    "notYetAvailable": "Te avisaremos aquí en cuanto se abra."
+  },
   "Deposit": {
     "stepAmount": "Amount",
     "stepReview": "Review",
@@ -145,6 +163,7 @@
     "pendingTx": "tx a91f…3c0d · view on Stellar Expert ↗",
     "successH1": "Welcome to the pool",
     "successBody": "You received <num>{shares} HBS</num> and now back <b>{count} verified projects</b>.",
+    "viewInvestment": "Ver tu inversión",
     "viewExpert": "View on Stellar Expert",
     "goPortfolio": "Go to portfolio"
   },
@@ -161,6 +180,11 @@
     "impactBody": "Your stake helps fund <b>{count} verified projects</b> across 6 countries.",
     "projectsBacked": "Projects backed",
     "weightedGreen": "Weighted green score",
+    "riskScore": "Puntuación de riesgo de la cartera",
+    "riskTierConservative": "Conservador",
+    "riskTierModerate": "Moderado",
+    "riskTierAggressive": "Agresivo",
+    "riskCaption": "Basado en la combinación de calificaciones de bonos en sus tenencias.",
     "activityTitle": "Activity",
     "activityNote": "every entry → Stellar Expert"
   },
diff --git a/messages/fr.json b/messages/fr.json
index 2fcf464..7e58ea7 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -2,6 +2,7 @@
   "Common": {
     "copyAddress": "Copier {label}",
     "copied": "Copié",
+    "viewInvestment": "Voir votre investissement",
     "referralShareLink": "Lien de parrainage",
     "viewOnExplorer": "Voir {label} sur Stellar Expert"
   },
@@ -12,7 +13,7 @@
     "creator": "Créateurs",
     "connect": "Se connecter",
     "testnet": "Testnet (actif)",
-    "networkStatus": "Réseau : Testnet actif",
+    "networkStatus": "Réseau : Testnet actif",
     "portfolio": "Votre portefeuille",
     "switchToDark": "Passer en sombre",
     "switchToLight": "Passer en clair",
@@ -21,6 +22,7 @@
     "watchlist": "Liste de suivi",
     "copyAddress": "Copier l'adresse",
     "copied": "Copié",
+    "viewInvestment": "Voir votre investissement",
     "referralShareLink": "Lien de parrainage",
     "viewOnExplorer": "Voir sur Stellar Expert",
     "disconnect": "Se déconnecter",
@@ -161,6 +163,7 @@
     "pendingTx": "tx a91f…3c0d · voir sur Stellar Expert ↗",
     "successH1": "Bienvenue dans le pool",
     "successBody": "Vous avez reçu <num>{shares} HBS</num> et soutenez désormais <b>{count} projets vérifiés</b>.",
+    "viewInvestment": "Voir votre investissement",
     "viewExpert": "Voir sur Stellar Expert",
     "goPortfolio": "Aller au portefeuille"
   },
@@ -177,6 +180,11 @@
     "impactBody": "Votre participation aide à financer <b>{count} projets vérifiés</b> dans 6 pays.",
     "projectsBacked": "Projets soutenus",
     "weightedGreen": "Score vert pondéré",
+    "riskScore": "Score de risque du portefeuille",
+    "riskTierConservative": "Conservateur",
+    "riskTierModerate": "Modéré",
+    "riskTierAggressive": "Agressif",
+    "riskCaption": "Basé sur la répartition des notations d'obligations dans vos avoirs.",
     "activityTitle": "Activité",
     "activityNote": "chaque entrée → Stellar Expert"
   },
@@ -223,10 +231,6 @@
     "rejectionReason": "Raison",
     "actionRevoke": "Révoquer",
     "revokeConfirm": "Oui, révoquer",
-    "revokeConfirmBody": "Cette action révoque l'accès du créateur au registre. Voulez-vous continuer ?",
-    "revokeCancel": "Annuler",
-    "revokeToast": "Créateur révoqué",
-    "revokeUndo": "Annuler"voquer",
     "revokeConfirmBody": "La révocation retirera immédiatement l'accès de ce créateur. Vous pourrez annuler cette action.",
     "revokeCancel": "Annuler",
     "revokeToast": "Créateur révoqué",
diff --git a/next.config.ts b/next.config.ts
index 102f4ab..4a1a39c 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,14 +3,25 @@ import createNextIntlPlugin from 'next-intl/plugin'
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
-  // Turbopack (dev) handles code-splitting automatically — no webpack override needed.
-  // The three/react-three chunk is naturally split by Turbopack's dependency graph.
-  //
-  // If you ever need to opt specific packages into a custom Turbopack rule, use:
-  //   experimental: { turbo: { rules: { ... } } }
-  // Reference: https://nextjs.org/docs/app/api-reference/next-config-js/turbopack
+  webpack(config) {
+    const splitChunks = config.optimization.splitChunks || {}
+    config.optimization.splitChunks = {
+      ...splitChunks,
+      cacheGroups: {
+        ...(splitChunks.cacheGroups || {}),
+        three: {
+          test: /[\\/]node_modules[\\/](?:three|@react-three\/fiber)(?:[\\/]|$)/,
+          name: 'three',
+          chunks: 'async',
+          priority: 40,
+          enforce: true,
+        },
+      },
+    }
+    return config
+  },
 }
 
 const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts')
 
-export default withNextIntl(nextConfig)
+export default withNextIntl(nextConfig)
\ No newline at end of file
diff --git a/src/__tests__/catalog-parity.test.ts b/src/__tests__/catalog-parity.test.ts
index 53c262b..3fd8a23 100644
--- a/src/__tests__/catalog-parity.test.ts
+++ b/src/__tests__/catalog-parity.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import en from '../../messages/en.json'
 import fr from '../../messages/fr.json'
 import es from '../../messages/es.json'
+import ar from '../../messages/ar.json'
 
 function getLeafKeys(obj: Record<string, unknown>, prefix = ''): string[] {
   const keys: string[] = []
@@ -21,6 +22,7 @@ describe('Message catalog parity', () => {
   it.each([
     ['fr.json', fr],
     ['es.json', es],
+    ['ar.json', ar],
   ] as const)('en.json and %s have identical key sets', (_name, catalog) => {
     const enKeys = getLeafKeys(en).sort()
     const catalogKeys = getLeafKeys(catalog).sort()
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3815ed6..455ea74 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -8,8 +8,8 @@ import { type Locale, RTL_LOCALES } from '../i18n/request'
 import { THEME_SCRIPT } from '../theme/themeScript'
 import '../styles/index.css'
 
-const TopBar = dynamic(() => import('../shell/TopBar'))
-const Footer = dynamic(() => import('../shell/Footer'))
+const TopBar = dynamic(() => import('../shell/TopBar').then((m) => m.TopBar))
+const Footer = dynamic(() => import('../shell/Footer').then((m) => m.Footer))
 
 export const metadata: Metadata = {
   title: 'Heliobond — sunlight made financial',
@@ -66,7 +66,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       suppressHydrationWarning
     >
       <head>
-        <script dangerouslySetInnerHtml={{ __html: THEME_SCRIPT }} />
+        <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
         {/*
           Warm the font CDN connections. The webfont stylesheets sit behind a CSS
           `@import` chain (`src/styles/index.css` → `tokens/fonts.css`), so the
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 00e4e5a..551feca 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -1,12 +1,17 @@
 'use client'
 
+import { useRouter } from 'next/navigation'
 import { Portfolio } from '../../screens/Portfolio'
 import { RequireWallet } from '../../wallet/RequireWallet'
-import { usePortfolioRisk } from '../../hooks/usePortfolioRisk'
 
 function PortfolioRoute() {
-  const riskScore = usePortfolioRisk()
-  return <Portfolio riskScore={riskScore} />
+  const router = useRouter()
+  return (
+    <Portfolio
+      onWithdraw={() => router.push('/withdraw')}
+      onDeposit={() => router.push('/deposit')}
+    />
+  )
 }
 
 export default function PortfolioPage() {
diff --git a/src/app/project/[id]/page.test.tsx b/src/app/project/[id]/page.test.tsx
index fcf5b1b..613d644 100644
--- a/src/app/project/[id]/page.test.tsx
+++ b/src/app/project/[id]/page.test.tsx
@@ -55,6 +55,8 @@ describe('ProjectDetailPage', () => {
         fundingGoal: 200000,
       },
       detail: {
+        name: 'Test Project',
+        location: 'Test Location',
         heroGradient: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
         creator: { name: 'Test Creator', verified: true, since: '2025' },
         story: 'Test story',
diff --git a/src/components/AmountInput.tsx b/src/components/AmountInput.tsx
index d9a83be..c3d99a0 100644
--- a/src/components/AmountInput.tsx
+++ b/src/components/AmountInput.tsx
@@ -57,7 +57,7 @@ export function AmountInput({
 
   const liveMsg = overCap && !wasOverCap ? (capMessage ?? '') : ''
 
-  const set = (v: number) => onChange?(String(v))
+  const set = (v: number) => onChange?.(String(v))
 
   return (
     <div style={{ position: 'relative', ...style }}>
@@ -99,7 +99,7 @@ export function AmountInput({
           alignItems: 'center',
           gap: 10,
           background: 'var(--surface)',
-          border: `p1px solid ${overCap ? 'var(--solar)' : 'var(--ink-12)'}`,
+          border: `1px solid ${overCap ? 'var(--solar)' : 'var(--ink-12)'}`,
           borderRadius: 'var(--radius-input)',
           padding: '0 16px',
           height: 64,
@@ -108,7 +108,7 @@ export function AmountInput({
       >
         <input
           id={id}
-          type="number"
+          type="text"
           inputMode="decimal"
           placeholder="0.00"
           value={value}
@@ -117,12 +117,12 @@ export function AmountInput({
             e.preventDefault()
             const pastedText = e.clipboardData.getData('text')
             const sanitized = sanitizeAmount(pastedText)
-            onChange?(sanitized)
+            onChange?.(sanitized)
           }}
           onChange={(e) => {
             const v = sanitizeAmount(e.target.value)
             // If editing existing value, typing should replace not append when field was pre-filled
-            onChange?(v)
+            onChange?.(v)
           }}
           style={{
             flex: 1,
@@ -134,7 +134,7 @@ export function AmountInput({
             fontWeight: 600,
             fontSize: 'var(--type-data-display)',
             color: 'var(--ink)',
-            fontFeatureSettings: '"tnum' 1',
+            fontFeatureSettings: '"tnum" 1',
           }}
         />
         <span
@@ -157,14 +157,14 @@ export function AmountInput({
           margin: '8px 0 0',
         }}
       >
-        Min 1 USDC — Max {cap ?? ‘⁊7} USDC
+        Min 1 USDC — Max {cap ?? '—'} USDC
       </p>
       <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
         {chips.map((c) => (
           <button key={c} type="button" onClick={() => set(c)} style={chipStyle}>
             {c}
           </button>
-        )}
+        ))}
         {cap != null && maxChipLabel && (
           <button
             key="max"
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 1e9b2b5..ece3875 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -9,7 +9,7 @@ export function Card({ children, style, className, ...props }: CardProps) {
     <div
       style={{
         background: 'var(--surface)',
-        border: '1'px solid var(--ink-12)',
+        border: '1px solid var(--ink-12)',
         borderRadius: 'var(--radius-card)',
         padding: 24,
         boxShadow: 'var(--shadow-sm)',
diff --git a/src/components/EmailAuthModal.tsx b/src/components/EmailAuthModal.tsx
index 08b36cd..770904d 100644
--- a/src/components/EmailAuthModal.tsx
+++ b/src/components/EmailAuthModal.tsx
@@ -1,4 +1,4 @@
-"'use client'
+'use client'
 
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
@@ -26,7 +26,7 @@ export interface EmailAuthModalProps {
  */
 export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: EmailAuthModalProps) {
   const t = useTranslations('AccountConflict')
-  const [email, setEmail] = useState({'')
+  const [email, setEmail] = useState('')
   const [submitted, setSubmitted] = useState(false)
   const [bypassWarning, setBypassWarning] = useState(false)
   const [bioLoading, setBioLoading] = useState(false)
@@ -60,8 +60,7 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
     setBioLoading(true)
     setBioError(null)
     try {
-      const result = await loginBiometric(email)
-      // On success, notify parent and close the modal
+      await loginBiometric(email)
       if (onSuccess) onSuccess(email)
       onClose()
     } catch (err: any) {
@@ -76,8 +75,7 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
     setBioLoading(true)
     setBioError(null)
     try {
-      const result = await registerBiometric(email)
-      // After registration, log in automatically
+      await registerBiometric(email)
       if (onSuccess) onSuccess(email)
       onClose()
     } catch (err: any) {
@@ -89,7 +87,7 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
 
   return (
     <div
-      style={
+      style={{
         position: 'fixed',
         top: 0,
         insetInline: 0,
@@ -102,13 +100,13 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
         justifyContent: 'center',
         zIndex: 9999,
         padding: 20,
-      }
+      }}
     >
       <div
         role="dialog"
         aria-modal="true"
         aria-labelledby="email-auth-title"
-        style={
+        style={{
           background: 'var(--surface)',
           border: '1px solid var(--ink-12)',
           borderRadius: 'var(--radius-modal)',
@@ -116,40 +114,40 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
           maxWidth: 460,
           width: '100%',
           maxHeight: 'calc(100dvh - 32px)',
-          overflowYJ   'auto',
+          overflowY: 'auto',
           padding: 28,
           animation: 'hb-rise 200ms var(--ease-out) forwards',
-        }
+        }}
       >
         <div
-          style={
+          style={{
             display: 'flex',
             justifyContent: 'space-between',
             alignItems: 'center',
             marginBottom: 16,
-          }
+          }}
         >
           <h3
             id="email-auth-title"
-            style={
+            style={{
               fontFamily: 'var(--font-display)',
               fontSize: 'var(--type-h3-sm)',
               fontWeight: 700,
               color: 'var(--ink)',
               margin: 0,
-            }
+            }}
           >
             {t('modalTitle')}
           </h3>
           <button
             onClick={onClose}
-            style={
+            style={{
               background: 'none',
               border: 'none',
               cursor: 'pointer',
               fontSize: 18,
               color: 'var(--ink-40)',
-            }
+            }}
             aria-label="Close"
           >
             ✕
@@ -157,33 +155,33 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
         </div>
 
         {submitted ? (
-          <div style={ textAlign: 'center', padding: '16px 0' }>
+          <div style={{ textAlign: 'center', padding: '16px 0' }}>
             <p
-              style={
+              style={{
                 fontFamily: 'var(--font-body)',
                 fontSize: 'var(--type-body)',
                 color: 'var(--ink)',
-              }
+              }}
             >
               {t('linkSentMessage', { email })}
             </p>
-            <Button variant="secondary" size="md" onClick={onClose} style={ marginTop: 16 }>
+            <Button variant="secondary" size="md" onClick={onClose} style={{ marginTop: 16 }}>
               {t('close')}
             </Button>
           </div>
         ) : (
           <form
             onSubmit={handleSubmit}
-            style={ display: 'flex', flexDirection: 'column', gap: 14 }
+            style={{ display: 'flex', flexDirection: 'column', gap: 14 }}
           >
             <label
               htmlFor="auth-email-input"
-              style={
+              style={{
                 fontFamily: 'var(--font-body)',
                 fontSize: 'var(--type-small)',
                 color: 'var(--ink)',
                 fontWeight: 600,
-              }
+              }}
             >
               {t('emailInputLabel')}
             </label>
@@ -194,10 +192,10 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
               onChange={(e) => {
                 setEmail(e.target.value)
                 setBypassWarning(false)
-              }
+              }}
               placeholder="you@example.com"
               required
-              style={
+              style={{
                 fontFamily: 'var(--font-body)',
                 fontSize: 'var(--type-body)',
                 padding: '12px 14px',
@@ -206,7 +204,7 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
                 background: 'var(--canvas)',
                 color: 'var(--ink)',
                 outline: 'none',
-              }
+              }}
             />
 
             {/* Social Account Collision Warning */}
@@ -224,7 +222,7 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
               variant="primary"
               size="lg"
               disabled={showConflict || !email}
-              style={ marginTop: 8 }
+              style={{ marginTop: 8 }}
             >
               {t('submitCta')}
             </Button>
@@ -234,15 +232,29 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
         {!submitted && (
           <div>
             <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '16px 0' }}>
-              <div style={ flex: 1, height: 1, background: 'var(--ink-12)' }/>
-              <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-caption)', color: 'var(--ink-40)' }}>
-                or 
+              <div style={{ flex: 1, height: 1, background: 'var(--ink-12)' }} />
+              <span
+                style={{
+                  fontFamily: 'var(--font-body)',
+                  fontSize: 'var(--type-caption)',
+                  color: 'var(--ink-40)',
+                }}
+              >
+                or
               </span>
-              <div style={{ flex: 1, height: 1, background: 'var(--ink-12)' }}/>
+              <div style={{ flex: 1, height: 1, background: 'var(--ink-12)' }} />
             </div>
 
             {bioError && (
-              <p role="alert" style={ color: 'var(--ember)', fontFamily: 'var(--font-body)', fontSize: 'var(--type-small)', margin: '0 0 8px' }>
+              <p
+                role="alert"
+                style={{
+                  color: 'var(--ember)',
+                  fontFamily: 'var(--font-body)',
+                  fontSize: 'var(--type-small)',
+                  margin: '0 0 8px',
+                }}
+              >
                 {bioError}
               </p>
             )}
@@ -254,7 +266,7 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
                 size="md"
                 onClick={handleBiometricLogin}
                 disabled={!email || bioLoading}
-                style={ flex: 1 }
+                style={{ flex: 1 }}
               >
                 Face ID / Touch ID Login
               </Button>
@@ -264,7 +276,7 @@ export function EmailAuthModal({ open, onClose, onSuccess, onSocialLogin }: Emai
                 size="md"
                 onClick={handleBiometricRegister}
                 disabled={!email || bioLoading}
-                style={ flex: 1 }
+                style={{ flex: 1 }}
               >
                 Register Biometric
               </Button>
diff --git a/src/data.ts b/src/data.ts
index 349c5b6..2ef2fa4 100644
--- a/src/data.ts
+++ b/src/data.ts
@@ -1,8 +1,16 @@
+// Heliobond — fake data for the click-through. Not production: these stand in
+// for live reads from the InvestmentVault + ProjectRegistry Soroban contracts.
 import { formatPoolCounters } from './lib/format'
 
 export type ProjectType = 'Solar' | 'Wind' | 'Hydro'
 
-type BondStatus = 'open' | 'upcoming' | 'funded'
+/**
+ * Whether a project ("bond", in investor-facing copy) is currently open for
+ * funding from the pool. Used by the watchlist to tell people which of their
+ * saved bonds they can act on now. `upcoming` = not yet available;
+ * `funded` = fully funded, no further capacity.
+ */
+export type BondStatus = 'open' | 'upcoming' | 'funded'
 
 
 export interface Project {
@@ -69,9 +77,53 @@ export interface HeliobondData {
 }
 
 const INITIAL_PROJECTS: Project[] = []
-const OFF_SCREEN_PROJECTS_COUNT = 8
+export const OFF_SCREEN_PROJECTS_COUNT = 8
 const PROJECTS_FUNDED = INITIAL_PROJECTS.length + OFF_SCREEN_PROJECTS_COUNT
 
+// The pool has 14 funded projects in total: 6 active demo projects in the local registry,
+// plus 8 historical or off-screen projects funded in the past.
+
+const INITIAL_FUNDED_COUNT = INITIAL_PROJECTS.filter((p) => {
+  const n = Number(p.funded.replace(/[^0-9.]/g, ''))
+  return Number.isFinite(n) && n > 0
+}).length
+
+// Helper to derive the portfolio risk indicator from the bond mix.
+// Credit scores are 0–100; higher credit = lower risk.
+// The risk score is inverted so a higher number means higher risk, and the
+// risk level is determined by the share of holdings in each credit band.
+function getRiskIndicator(projects: Project[]): { riskScore: number; riskLevel: 'conservative' | 'moderate' | 'aggressive' } {
+  const totalFunded = projects.reduce((sum, p) => sum + p.fundedAmount, 0)
+  if (totalFunded === 0) {
+    return { riskScore: 0, riskLevel: 'conservative' }
+  }
+
+  const weightedCredit = projects.reduce((sum, p) => sum + p.credit * p.fundedAmount, 0) / totalFunded
+  const riskScore = Math.round((100 - weightedCredit) * 10) / 10
+
+  // Determine the mix of holdings by rating class.
+  let highGradeShare = 0 // credit >= 80
+  let lowGradeShare = 0 // credit < 70
+
+  for (const p of projects) {
+    if (p.fundedAmount <= 0) continue
+    const share = p.fundedAmount / totalFunded
+    if (p.credit >= 80) highGradeShare += share
+    else if (p.credit < 70) lowGradeShare += share
+  }
+
+  let riskLevel: 'conservative' | 'moderate' | 'aggressive'
+  if (lowGradeShare > 0.2 || highGradeShare < 0.5) {
+    riskLevel = 'aggressive'
+  } else if (highGradeShare >= 0.7 && lowGradeShare <= 0.1) {
+    riskLevel = 'conservative'
+  } else {
+    riskLevel = 'moderate'
+  }
+
+  return { riskScore, riskLevel }
+}
+
 const POOL = {
   totalAssets: 4862014.55,
   sharePrice: 1.0058,
@@ -100,4 +152,4 @@ export const HB_DATA: HeliobondData = {
   projects: INITIAL_PROJECTS, 
   activity: [],
   search: (_query: string) => INITIAL_PROJECTS,
-}
+}
\ No newline at end of file
diff --git a/src/hooks/useSessionTimeout.ts b/src/hooks/useSessionTimeout.ts
index b6442a5..d6d79f1 100644
--- a/src/hooks/useSessionTimeout.ts
+++ b/src/hooks/useSessionTimeout.ts
@@ -130,6 +130,11 @@ export function useSessionTimeout({
     scheduleWarning()
   }, [scheduleWarning])
 
+  const isWarningOpenRef = useRef(isWarningOpen)
+  useEffect(() => {
+    isWarningOpenRef.current = isWarningOpen
+  }, [isWarningOpen])
+
   // Track user activity with throttled event handler
   useEffect(() => {
     if (!enabled) {
@@ -143,7 +148,7 @@ export function useSessionTimeout({
     const handleUserActivity = () => {
       // Do not reset activity automatically while the warning modal is actively open
       // (user must explicitly click Extend Session)
-      if (isWarningOpen) return
+      if (isWarningOpenRef.current) return
 
       const now = Date.now()
       if (now - lastThrottleRef.current > throttleMs) {
@@ -162,7 +167,7 @@ export function useSessionTimeout({
         window.removeEventListener(event, handleUserActivity)
       })
     }
-  }, [enabled, isWarningOpen, scheduleWarning, clearTimers, throttleMs])
+  }, [enabled, scheduleWarning, clearTimers, throttleMs])
 
   // Format MM:SS for countdown display
   const minutes = Math.floor(remainingSeconds / 60)
diff --git a/src/lib/bondUtils.ts b/src/lib/bondUtils.ts
index 1edbe21..7f624c8 100644
--- a/src/lib/bondUtils.ts
+++ b/src/lib/bondUtils.ts
@@ -62,7 +62,7 @@ export function searchBondsByName(bonds: Bond[], query: string): Bond[] {
 // #359 -- stable sort with tie-breaker (name, then id)
 export function sortBondsByYield(bonds: Bond[], direction: 'asc' | 'desc' = 'asc'): Bond[] {
   const dir = direction === 'asc' ? 1 : -1
-  return [].concat(bonds).sort((a, b) => {
+  return [...bonds].sort((a, b) => {
     if (a.yield !== b.yield) return (a.yield - b.yield) * dir
     const nameCmp = a.name.localeCompare(b.name)
     if (nameCmp !== 0) return nameCmp
diff --git a/src/lib/webauthn.ts b/src/lib/webauthn.ts
index 59f7bef..d650dbd 100644
--- a/src/lib/webauthn.ts
+++ b/src/lib/webauthn.ts
@@ -39,7 +39,7 @@ async function postJSON(url: string, body: unknown): Promise<any> {
     throw new Error(err.error || `HTTP ${res.status}`)
   }
   return res.json()
-]
+}
 export async function registerBiometric(username: string): Promise<any> {
   const options = await postJSON('/webauthn/register/begin', { username })
 
@@ -69,7 +69,7 @@ export async function registerBiometric(username: string): Promise<any> {
     },
   }
 
-  return postJSON('/webauthn'/register/complete', { username, credential: credentialJSON })
+  return postJSON('/webauthn/register/complete', { username, credential: credentialJSON })
 }
 
 export async function loginBiometric(username: string): Promise<any> {
@@ -103,5 +103,5 @@ export async function loginBiometric(username: string): Promise<any> {
     },
   }
 
-  return postJSON('/webauthn'/login/complete', { username, credential: credentialJSON })
+  return postJSON('/webauthn/login/complete', { username, credential: credentialJSON })
 }
diff --git a/src/screens/Deposit.tsx b/src/screens/Deposit.tsx
index ae3205e..f74a724 100644
--- a/src/screens/Deposit.tsx
+++ b/src/screens/Deposit.tsx
@@ -97,7 +97,6 @@ export function Deposit({ onDone }: DepositProps) {
 
   const handleDone = () => {
     setAmount('')
-    setTxHash(null)
     setTxError(null)
     changeStep('amount')
     onDone()
@@ -399,22 +398,17 @@ export function Deposit({ onDone }: DepositProps) {
                   const controller = new AbortController()
                   abortControllerRef.current = controller
                   try {
-                    const { investmentId } = await submitDeposit(n, address ?? '', sign, controller.signal)
+                    const hash = await submitDeposit(n, address ?? '', sign, controller.signal)
                     if (mountedRef.current) {
-                      setInvestmentId(investmentId)
+                      setInvestmentId(hash)
                       // Confirmed success — safe to clear the pending guard.
                       clearPending()
-                      setTxHash(hash)
                       changeStep('success')
                       toast({
                         tone: 'success',
                         title: 'Deposit confirmed',
-                        message: (
-                          <>
-                            Successfully invested {n} USDC in the pool.{' '}
-                            <a href={`/investments/${investmentId}`}>View investment</a>
-                          </>
-                        ),
+                        message: `Successfully invested ${n} USDC in the pool.`,
+                        href: `/investments/${hash}`,
                       })
                     }
                   } catch (e) {
diff --git a/src/screens/Explore.tsx b/src/screens/Explore.tsx
index 233125b..2015462 100644
--- a/src/screens/Explore.tsx
+++ b/src/screens/Explore.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState, type CSSProperties } from 'react'
 import { useTranslations } from 'next-intl'
 import { useSearchParams, useRouter } from 'next/navigation'
 import { ProjectCard, Tag, WatchlistButton } from '../components'
-import { Pagination } from '../components/Pagination'
 import { HB_DATA, type Project, type ProjectType } from '../data'
 import { getProjectsPaginated } from '../lib/api'
 
@@ -23,7 +22,7 @@ const TYPES: (ProjectType | 'All')[] = ['All', 'Solar', 'Wind', 'Hydro']
  * every breakpoint (the grid runs 1–4 columns), so a page boundary never leaves
  * a ragged half-row.
  */
-const PAGE_SIZE = 6
+const PAGE_SIZE = 12
 
 export function Explore({ onOpen }: ExploreProps) {
   const t = useTranslations('Explore')
@@ -37,7 +36,6 @@ export function Explore({ onOpen }: ExploreProps) {
     urlType && ['Solar', 'Wind', 'Hydro'].includes(urlType) ? urlType : 'All',
   )
   const [searchTerm, setSearchTerm] = useState('')
-  const [currentPage, setCurrentPage] = useState(1)
 
   useEffect(() => {
     getProjectsPaginated(1, 50)
@@ -53,7 +51,7 @@ export function Explore({ onOpen }: ExploreProps) {
 
   const setFilterAndUrl = (next: ProjectType | 'All') => {
     setFilter(next)
-    setCurrentPage(1)
+    setVisibleCount(PAGE_SIZE)
     if (next === 'All') {
       router.replace('/explore', { scroll: false })
     } else {
@@ -66,11 +64,13 @@ export function Explore({ onOpen }: ExploreProps) {
   const shown = filteredByType.filter((p) =>
     p.name.toLowerCase().includes(query) || p.location.toLowerCase().includes(query),
   )
-  const totalPages = Math.max(1, Math.ceil(shown.length / PAGE_SIZE))
-  const paged = shown.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE)
+  const paged = shown.slice(0, visibleCount)
+  const remaining = shown.length - visibleCount
+  const nextChunk = Math.min(PAGE_SIZE, remaining)
 
   useEffect(() => {
-    setCurrentPage(1)
+    setVisibleCount(PAGE_SIZE)
   }, [filter, projects.length, searchTerm])
 
   return (
@@ -240,13 +240,48 @@ export function Explore({ onOpen }: ExploreProps) {
                 ))}
           </div>
           {!loading && shown.length > 0 && (
-            <Pagination
-              currentPage={currentPage}
-              totalPages={totalPages}
-              totalItems={shown.length}
-              pageSize={PAGE_SIZE}
-              onPageChange={setCurrentPage}
-            />
+            <div
+              style={{
+                marginTop: 36,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <div
+                role="status"
+                aria-live="polite"
+                style={{
+                  fontFamily: 'var(--font-body)',
+                  fontSize: 'var(--type-small)',
+                  color: 'var(--ink-60)',
+                }}
+              >
+                {t('showingCount', { shown: paged.length, total: shown.length })}
+              </div>
+              {remaining > 0 && (
+                <button
+                  type="button"
+                  onClick={() => setVisibleCount((n) => n + PAGE_SIZE)}
+                  style={{
+                    height: 44,
+                    padding: '0 24px',
+                    borderRadius: 'var(--radius-pill)',
+                    border: '1px solid var(--ink)',
+                    background: 'var(--surface)',
+                    color: 'var(--ink)',
+                    fontFamily: 'var(--font-body)',
+                    fontSize: 'var(--type-small)',
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                    transition: 'background var(--dur-press) var(--ease-out)',
+                  }}
+                >
+                  {t('loadMore', { count: nextChunk })}
+                </button>
+              )}
+            </div>
           )}
         </>
       )}
@@ -358,4 +393,4 @@ function ProjectCardSkeleton() {
       </div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/src/screens/Portfolio.tsx b/src/screens/Portfolio.tsx
index e27fd79..204abfc 100644
--- a/src/screens/Portfolio.tsx
+++ b/src/screens/Portfolio.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { memo, type CSSProperties, type ReactNode } from 'react'
+import { memo, type ReactNode } from 'react'
 import { useTranslations } from 'next-intl'
 import { Button, StatBlock, LiquidityMeter, Card } from '../components'
+import { cardTitleLg as cardTitle } from '@/theme'
 import { Helio } from '../brand/Helio'
 import { HB_DATA } from '../data'
 import { getPortfolioRisk } from '../lib/bondUtils'
@@ -26,7 +27,7 @@ export const Portfolio = memo(function Portfolio({ onWithdraw, onDeposit }: Port
   const t = useTranslations('Portfolio')
   const { connected, connect } = useWallet()
   const d = HB_DATA
-  const risk = getPortfolioRisk(d.holdings)
+  const risk = getPortfolioRisk((d as any).holdings ?? [])
   const referralLink = (d.you as { referralLink?: string }).referralLink
 
   if (!connected) {
@@ -45,7 +46,7 @@ export const Portfolio = memo(function Portfolio({ onWithdraw, onDeposit }: Port
           }}
         >
           <div className="hb-eyebrow">{t('eyebrow')}</div>
-          <h2 style={ {...cardTitle, margin: 0 }}>Connect your wallet to view your portfolio</h2>
+          <h2 style={{ ...cardTitle, margin: 0 }}>Connect your wallet to view your portfolio</h2>
           <p
             style={{
               fontFamily: 'var--font-body',
@@ -226,7 +227,7 @@ export const Portfolio = memo(function Portfolio({ onWithdraw, onDeposit }: Port
             }}
           >
             {t.rich('impactBody', {
-              b: (c: ReactNode) => <b style={ color: 'var--ink' }>{c}</b>,
+              b: (c: ReactNode) => <b style={{ color: 'var(--ink)' }}>{c}</b>,
               count: d.you.backed,
             })}
           </p>
@@ -239,27 +240,27 @@ export const Portfolio = memo(function Portfolio({ onWithdraw, onDeposit }: Port
         {/* Activity */}
         <Card style={{ minWidth: 0, padding: 22 }}>
           <div
-            style={
+            style={{
               display: 'flex',
               justifyContent: 'space-between',
               alignItems: 'center',
               marginBottom: 8,
-            }
+            }}
           >
             <h3 style={cardTitle}>{t('activityTitle')}</h3>
             <span
-              style={
+              style={{
                 fontFamily: 'var--font-body',
                 fontSize: 'var--type-caption',
                 color: 'var--ink-40',
-              }
+              }}
             >
               {t('activityNote')}
             </span>
           </div>
           {d.activity.map((a, i) => (
             <div
-              key={a.hash+}
+              key={a.hash}
               style={{
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -271,43 +272,43 @@ export const Portfolio = memo(function Portfolio({ onWithdraw, onDeposit }: Port
             >
               <div style={{ minWidth: 0 }}>
                 <div
-                  style={
+                  style={{
                     fontFamily: 'var--font-body',
                     fontSize: 'var--type-small',
                     fontWeight: 600,
                     color: 'var--ink',
                     overflowWrap: 'anywhere',
-                  }
+                  }}
                 >
                   {a.kind}
                 </div>
                 <div
-                  style={
+                  style={{
                     fontFamily: 'var--font-body',
                     fontSize: 'var--type-caption',
                     color: 'var--ink-60',
-                  }
+                  }}
                 >
                   {a.amount}
-                  {a.shares ? `£· ${a.shares} : ''}
+                  {a.shares ? ` · ${a.shares}` : ''}
                 </div>
               </div>
-              <div style={ textAlign: 'end' }>
+              <div style={{ textAlign: 'end' }}>
                 <div
-                  style={
+                  style={{
                     fontFamily: 'var--font-body',
                     fontSize: 'var--type-caption',
                     color: 'var--ink-60',
-                  }
+                  }}
                 >
                   {a.when}
                 </div>
                 <div
-                  style={
+                  style={{
                     fontFamily: 'var--font-data',
                     fontSize: 'var--type-eyebrow',
                     color: 'var--ink-40',
-                  }
+                  }}
                 >
                   {a.hash} ↑
                 </div>
@@ -318,12 +319,4 @@ export const Portfolio = memo(function Portfolio({ onWithdraw, onDeposit }: Port
       </div>
     </main>
   )
-})
-
-const cardTitle: CSSProperties = {
-  fontFamily: 'var--font-display',
-  fontWeight: 700,
-  fontSize: 'var--type-body-lg',
-  margin: '0 0 10px',
-  color: 'var--ink',
-}
+})
\ No newline at end of file
diff --git a/src/screens/ProjectDetail.tsx b/src/screens/ProjectDetail.tsx
index 764c615..f6bceeb 100644
--- a/src/screens/ProjectDetail.tsx
+++ b/src/screens/ProjectDetail.tsx
@@ -1,4 +1,4 @@
-import { memo, useState, type CSSProperties } from 'react'
+import { memo, useState, useMemo, type CSSProperties } from 'react'
 import { useTranslations } from 'next-intl'
 import { Badge, Button, PinIcon, ScoreGauge, ShieldCheckIcon, WatchlistButton, YieldAlertButton } from '../components'
 import { Sparkline as SparklineUnmemoized } from '../components/Sparkline'
@@ -17,7 +17,7 @@ import { type ProjectDetail as ProjectDetailData } from '../data/projectDetails'
 export interface ProjectDetailProps {
   project: Project
   detail: ProjectDetailData
-  onInvest: () => Promise<string>
+  onInvest: () => void
   onBack?: () => void
 }
 
@@ -367,30 +367,11 @@ export const ProjectDetail = memo(function ProjectDetail({ project, detail, onIn
         <Button
           variant="primary"
           size="lg"
-          onClick={async () => {
-            const url = await onInvest()
-            setInvestmentUrl(url)
-          }}
+          onClick={onInvest}
           style={{ width: '100%' }}
         >
           {t('investCta')}
         </Button>
-        {investmentUrl && (
-          <a
-            href={investmentUrl}
-            style={{
-              display: 'block',
-              textAlign: 'center',
-              fontFamily: 'var(--font-body)',
-              fontSize: 'var(--type-small)',
-              fontWeight: 600,
-              color: 'var(--brand)',
-              textDecoration: 'none',
-            }}
-          >
-            View investment →
-          </a>
-        )}
         <p
           style={{
             fontFamily: 'var(--font-body)',
@@ -402,27 +383,6 @@ export const ProjectDetail = memo(function ProjectDetail({ project, detail, onIn
         >
           {t('investNote')}
         </p>
-        {investmentUrl && (
-          <div role="status">
-            <a
-              href={investmentUrl}
-              style={{
-                display: 'block',
-                padding: '14px 20px',
-                borderRadius: 'var(--radius-card)',
-                background: 'var(--growth)',
-                color: 'var(--surface)',
-                textAlign: 'center',
-                fontFamily: 'var(--font-body)',
-                fontSize: 'var(--type-data)',
-                fontWeight: 700,
-                textDecoration: 'none',
-              }}
-            >
-              {t('viewInvestment')}
-            </a>
-          </div>
-        )}
         {onBack && (
           <div style={{ textAlign: 'center' }}>
             <button
@@ -529,4 +489,4 @@ const cardStyle: CSSProperties = {
   borderRadius: 'var(--radius-card)',
   boxShadow: 'var(--shadow-sm)',
   padding: '8px 22px',
-}
+}
\ No newline at end of file
diff --git a/src/screens/admin/AdminConsole.test.tsx b/src/screens/admin/AdminConsole.test.tsx
index 5b38087..b611af0 100644
--- a/src/screens/admin/AdminConsole.test.tsx
+++ b/src/screens/admin/AdminConsole.test.tsx
@@ -42,7 +42,7 @@ describe('AdminConsole money formatting helpers', () => {
   )
 
   it('parses funded amounts with thousands separators', () => {
-    expect(parseFundedNum(',234,567')).toBe(1_234_567)
+    expect(parseFundedNum('1,234,567')).toBe(1_234_567)
   })
 })
 
diff --git a/src/screens/admin/AdminConsole.tsx b/src/screens/admin/AdminConsole.tsx
index 1670551..c203f1e 100644
--- a/src/screens/admin/AdminConsole.tsx
+++ b/src/screens/admin/AdminConsole.tsx
@@ -1,8 +1,28 @@
 'use client'
 
-import { useState, type CSSProperties, type ReactNode } from 'react'
+import { useState, type ReactNode } from 'react'
 import { useTranslations } from 'next-intl'
 import { Badge, Button, AddressChip, useToast } from '@/components'
+import {
+  sectionCard,
+  statRow,
+  subtext,
+  consolePage,
+  header,
+  pageTitle,
+  sectionTitle,
+  statCell,
+  statCellLabel,
+  statValueRow,
+  statValue,
+  statUnit,
+  whitelistRow,
+  whitelistName,
+  whitelistNameText,
+  whitelistMeta,
+  whitelistData,
+  whitelistActions,
+} from '@/theme'
 import { VAULT_STATS, REGISTRY, WHITELIST, type RegistryEntry, type Creator } from '@/data/admin'
 import { RegistryTable } from './RegistryTable'
 import { OracleForms } from './OracleForms'
@@ -270,120 +290,3 @@ export { parseFundedNum }
 export function formatFunded(n: number): string {
   return sharedFormatMoney(n, { includeSymbol: true })
 }
-
-const sectionCard: CSSProperties = {
-  background: 'var(--surface)',
-  border: '1px solid var(--ink-12)',
-  borderRadius: 'var(--radius-card)',
-  padding: 16,
-  boxShadow: 'var(--shadow-sm)',
-}
-
-const statRow: CSSProperties = {
-  display: 'flex',
-  flexWrap: 'wrap',
-}
-
-const subtext: CSSProperties = {
-  margin: 0,
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-caption)',
-  lineHeight: 1.5,
-  color: 'var(--ink-60)',
-}
-
-const consolePage: CSSProperties = {
-  fontFamily: 'var(--font-body)',
-  color: 'var(--ink)',
-}
-
-const header: CSSProperties = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'flex-start',
-  gap: 16,
-  flexWrap: 'wrap',
-  marginBottom: 20,
-}
-
-const pageTitle: CSSProperties = {
-  fontFamily: 'var(--font-display)',
-  fontWeight: 700,
-  fontSize: 'var(--type-h2)',
-  margin: 0,
-  color: 'var(--ink)',
-}
-
-const sectionTitle: CSSProperties = {
-  fontFamily: 'var(--font-display)',
-  fontWeight: 700,
-  fontSize: 'var(--type-h5)',
-  margin: 0,
-  color: 'var(--ink)',
-}
-
-const statCell: CSSProperties = {
-  flex: '1 1 0',
-  minWidth: 140,
-  padding: '14px 16px',
-}
-
-const statCellLabel: CSSProperties = {
-  marginBottom: 6,
-}
-
-const statValueRow: CSSProperties = {
-  display: 'flex',
-  alignItems: 'baseline',
-  gap: 5,
-  flexWrap: 'wrap',
-}
-
-const statValue: CSSProperties = {
-  fontFamily: 'var(--font-data)',
-  fontWeight: 600,
-  fontSize: 'var(--type-h4)',
-  color: 'var(--ink)',
-  fontFeatureSettings: '"tnum" 1',
-  lineHeight: 1.1,
-}
-
-const statUnit: CSSProperties = {
-  fontFamily: 'var(--font-data)',
-  fontSize: 'var(--type-fine)',
-  color: 'var(--ink-60)',
-}
-
-const whitelistRow: CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 14,
-  flexWrap: 'wrap',
-  padding: '12px 0',
-}
-
-const whitelistName: CSSProperties = {
-  minWidth: 180,
-  flex: '1 1 200px',
-}
-
-const whitelistNameText: CSSProperties = {
-  fontWeight: 600,
-  fontSize: 'var(--type-small)',
-}
-
-const whitelistMeta: CSSProperties = {
-  ...subtext,
-  fontSize: 'var(--type-eyebrow)',
-}
-
-const whitelistData: CSSProperties = {
-  fontFamily: 'var(--font-data)',
-  fontFeatureSettings: '"tnum" 1',
-}
-
-const whitelistActions: CSSProperties = {
-  display: 'flex',
-  gap: 8,
-  marginInlineStart: 'auto',
-}
diff --git a/src/screens/admin/OracleForms.tsx b/src/screens/admin/OracleForms.tsx
index e8e64e5..aeb86a6 100644
--- a/src/screens/admin/OracleForms.tsx
+++ b/src/screens/admin/OracleForms.tsx
@@ -3,6 +3,22 @@
 import { useState, type CSSProperties, type ReactNode } from 'react'
 import { useTranslations } from 'next-intl'
 import { Button, FormField, FormInput, FormSelect, sanitizeAmount } from '@/components'
+import {
+  panelStyle,
+  textInput,
+  helpText,
+  gridStyle,
+  formRowStyle,
+  fieldGrowStyle,
+  inputGroupStyle,
+  dataCaptionStyle,
+  warningBoxStyle,
+  warningTextStyle,
+  moneyStyle,
+  panelTitleStyle,
+  panelHeaderStyle,
+  panelBodyStyle,
+} from '@/theme'
 import { type RegistryEntry } from '@/data/admin'
 import { clampScore, validateScores } from './utils'
 import { formatMoney, parseAmount } from '@/lib/format'
@@ -129,31 +145,17 @@ export function OracleForms({ projects, liquid, onPushScores, onFund }: OracleFo
                 borderColor: overLiquid ? 'var(--ember)' : undefined,
               }}
             />
-            <span style={dataCaptionStyle}>
-              USDC
-            </span>
+            <span style={dataCaptionStyle}>USDC</span>
           </div>
           {overLiquid && (
-            <div
-              role="status"
-              style={warningBoxStyle}
-            >
-              <p
-                style={warningTextStyle}
-              >
-                {t('fundExceeds')}
-              </p>
+            <div role="status" style={warningBoxStyle}>
+              <p style={warningTextStyle}>{t('fundExceeds')}</p>
             </div>
           )}
         </Field>
         <p style={helpText}>
-          {t('liquidHint')}{' '}
-          <span
-            style={moneyStyle}
-          >
-            ${formatMoney(liquid)}
-          </span>
-          . {amountN > liquid ? t('fundExceeds') : t('fundOk')}
+          {t('liquidHint')} <span style={moneyStyle}>${formatMoney(liquid)}</span>.{' '}
+          {amountN > liquid ? t('fundExceeds') : t('fundOk')}
         </p>
         <Button
           size="sm"
@@ -173,9 +175,7 @@ function Panel({ title, hint, children }: { title: string; hint: string; childre
   return (
     <div style={panelStyle}>
       <div style={panelHeaderStyle}>
-        <h3 style={panelTitleStyle}>
-          {title}
-        </h3>
+        <h3 style={panelTitleStyle}>{title}</h3>
         <p style={{ ...helpText, marginTop: 4 }}>{hint}</p>
       </div>
       <div style={panelBodyStyle}>{children}</div>
@@ -244,93 +244,3 @@ function NumberInput({
   )
 }
 
-const panelStyle: CSSProperties = {
-  background: 'var(--surface)',
-  border: '1px solid var(--ink-12)',
-  borderRadius: 'var(--radius-card)',
-  padding: 16,
-  boxShadow: 'var(--shadow-sm)',
-}
-
-const textInput: CSSProperties = {
-  minHeight: 40,
-  padding: '0 12px',
-  fontFamily: 'var(--font-data)',
-  fontSize: 'var(--type-small)',
-  fontFeatureSettings: '"tnum" 1',
-}
-
-const helpText: CSSProperties = {
-  margin: 0,
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-caption)',
-  lineHeight: 1.5,
-  color: 'var(--ink-60)',
-}
-
-const gridStyle: CSSProperties = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-  gap: 16,
-}
-
-const formRowStyle: CSSProperties = {
-  display: 'flex',
-  gap: 12,
-}
-
-const fieldGrowStyle: CSSProperties = {
-  flex: 1,
-}
-
-const inputGroupStyle: CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 8,
-}
-
-const dataCaptionStyle: CSSProperties = {
-  fontFamily: 'var(--font-data)',
-  fontSize: 'var(--type-caption)',
-  color: 'var(--ink-60)',
-}
-
-const warningBoxStyle: CSSProperties = {
-  marginTop: 10,
-  padding: '10px 14px',
-  background: 'var(--solar-12)',
-  border: '1px solid var(--solar-24)',
-  borderRadius: 'var(--radius-input)',
-}
-
-const warningTextStyle: CSSProperties = {
-  margin: 0,
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-small)',
-  color: 'var(--ink)',
-  fontWeight: 600,
-}
-
-const moneyStyle: CSSProperties = {
-  fontFamily: 'var(--font-data)',
-  fontFeatureSettings: '"tnum" 1',
-  color: 'var(--ink)',
-}
-
-const panelTitleStyle: CSSProperties = {
-  fontFamily: 'var(--font-display)',
-  fontWeight: 700,
-  fontSize: 'var(--type-body)',
-  margin: 0,
-  color: 'var(--ink)',
-}
-
-const panelHeaderStyle: CSSProperties = {
-  marginBottom: 12,
-}
-
-const panelBodyStyle: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 'var(--form-gap)',
-}
diff --git a/src/screens/admin/RegistryTable.tsx b/src/screens/admin/RegistryTable.tsx
index 5707156..63733a8 100644
--- a/src/screens/admin/RegistryTable.tsx
+++ b/src/screens/admin/RegistryTable.tsx
@@ -1,8 +1,16 @@
 'use client'
 
-import { useMemo, useState, type CSSProperties } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { Button } from '@/components'
+import {
+  tableStyle,
+  thBase,
+  tdStyle,
+  numCell,
+  typePill,
+  scoreInputStyle as inputStyle,
+} from '@/theme'
 import { type RegistryEntry } from '@/data/admin'
 import { clampScore, parseFundedNum } from './utils'
 
diff --git a/src/screens/admin/utils.ts b/src/screens/admin/utils.ts
index 6445ad9..a89e39a 100644
--- a/src/screens/admin/utils.ts
+++ b/src/screens/admin/utils.ts
@@ -24,4 +24,3 @@ export function validateScores(credit: string, green: string): boolean {
   const greenN = Number(green)
   return creditN >= 0 && creditN <= 100 && greenN >= 0 && greenN <= 100
 }
-
diff --git a/src/screens/creator/CreatorApplication.tsx b/src/screens/creator/CreatorApplication.tsx
index 25c2384..571d53a 100644
--- a/src/screens/creator/CreatorApplication.tsx
+++ b/src/screens/creator/CreatorApplication.tsx
@@ -1,8 +1,9 @@
 'use client'
 
-import { useState, type CSSProperties, type ReactNode } from 'react'
+import { useState, type ReactNode } from 'react'
 import { useTranslations } from 'next-intl'
 import { Button, Tag, Card, CheckBoldIcon, FormField, FormInput } from '@/components'
+import { cardTitle, subtle } from '@/theme'
 import {
   PROJECT_TYPES,
   WHITELIST_CRITERIA,
@@ -404,18 +405,3 @@ function Label({ htmlFor, children }: { htmlFor: string; children: ReactNode })
     </label>
   )
 }
-
-const cardTitle: CSSProperties = {
-  fontFamily: 'var(--font-display)',
-  fontWeight: 700,
-  fontSize: 'var(--type-h5)',
-  margin: '0 0 8px',
-  color: 'var(--ink)',
-  letterSpacing: '-0.01em',
-}
-const subtle: CSSProperties = {
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-small)',
-  lineHeight: 1.5,
-  color: 'var(--ink-60)',
-}
diff --git a/src/screens/creator/CreatorDashboard.tsx b/src/screens/creator/CreatorDashboard.tsx
index 917fcda..b92eb51 100644
--- a/src/screens/creator/CreatorDashboard.tsx
+++ b/src/screens/creator/CreatorDashboard.tsx
@@ -1,8 +1,16 @@
 'use client'
 
-import { useId, type CSSProperties } from 'react'
+import { useId } from 'react'
 import { useTranslations } from 'next-intl'
 import { StatBlock, ScoreGauge, Badge, Card, Sparkline } from '@/components'
+import {
+  cardTitleLg as cardTitle,
+  subtleBlock,
+  cardInner,
+  scoreColumn,
+  sectionHeaderTop,
+  sectionHeaderBottom,
+} from '@/theme'
 import {
   CREATOR_DASHBOARD,
   type CreatorDashboard as CreatorDashboardModel,
@@ -297,46 +305,3 @@ function UpdateRow({ update, first }: UpdateRowProps) {
     </div>
   )
 }
-
-const cardTitle: CSSProperties = {
-  fontFamily: 'var(--font-display)',
-  fontWeight: 700,
-  fontSize: 'var(--type-body-lg)',
-  margin: 0,
-  color: 'var(--ink)',
-  letterSpacing: '-0.01em',
-}
-const subtleBlock: CSSProperties = {
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-small)',
-  lineHeight: 1.5,
-  color: 'var(--ink-60)',
-  margin: '0 0 16px',
-}
-
-const cardInner: CSSProperties = {
-  padding: 22,
-  height: '100%',
-  boxSizing: 'border-box',
-}
-
-const scoreColumn: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 8,
-}
-
-const sectionHeaderTop: CSSProperties = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: 12,
-}
-
-const sectionHeaderBottom: CSSProperties = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: 8,
-}
diff --git a/src/screens/creator/ProjectBuilder.tsx b/src/screens/creator/ProjectBuilder.tsx
index 0e7201d..8df51df 100644
--- a/src/screens/creator/ProjectBuilder.tsx
+++ b/src/screens/creator/ProjectBuilder.tsx
@@ -1,8 +1,18 @@
 'use client'
 
-import { useId, useState, useEffect, type CSSProperties, type ReactNode } from 'react'
+import { useId, useState, useEffect, type ReactNode } from 'react'
 import { useTranslations } from 'next-intl'
 import { ProjectCard, Tag, Card, UploadIcon } from '@/components'
+import {
+  cardTitle,
+  subtle,
+  inputStyle,
+  labelText,
+  fieldLabel,
+  fieldSpacing,
+  hintText,
+  errorText,
+} from '@/theme'
 import { PROJECT_TYPES, DRAFT_PROJECT, type ProjectType } from '@/data/creator'
 import { formatMoney } from '@/lib/format'
 
@@ -155,11 +165,7 @@ export function ProjectBuilder() {
             />
           </div>
           {goalError && (
-            <p
-              id={goalErrorId}
-              role="alert"
-              style={errorText}
-            >
+            <p id={goalErrorId} role="alert" style={errorText}>
               {goalError}
             </p>
           )}
@@ -189,11 +195,7 @@ export function ProjectBuilder() {
               border: '1px solid var(--ink)',
             }}
           />
-          <span
-            style={labelText}
-          >
-            {t('previewLabel')}
-          </span>
+          <span style={labelText}>{t('previewLabel')}</span>
           <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--ink-60)' }}>
             {t('previewSub')}
           </span>
@@ -278,15 +280,8 @@ function DropZone({
         }}
       />
       <UploadIcon style={{ color: 'var(--ink)' }} />
-      <div
-        style={labelText}
-      >
-        {label}
-      </div>
-      <div
-        id={hintId}
-        style={hintText}
-      >
+      <div style={labelText}>{label}</div>
+      <div id={hintId} style={hintText}>
         {selectedFiles || hint}
       </div>
     </label>
@@ -312,66 +307,9 @@ function Field({
 
 function Label({ htmlFor, children }: { htmlFor?: string; children: ReactNode }) {
   return (
-    <label
-      htmlFor={htmlFor}
-      style={fieldLabel}
-    >
+    <label htmlFor={htmlFor} style={fieldLabel}>
       {children}
     </label>
   )
 }
 
-const cardTitle: CSSProperties = {
-  fontFamily: 'var(--font-display)',
-  fontWeight: 700,
-  fontSize: 'var(--type-h5)',
-  margin: '0 0 8px',
-  color: 'var(--ink)',
-  letterSpacing: '-0.01em',
-}
-const subtle: CSSProperties = {
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-small)',
-  lineHeight: 1.5,
-  color: 'var(--ink-60)',
-}
-const inputStyle: CSSProperties = {
-  width: '100%',
-  height: 44,
-  padding: '0 14px',
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-data)',
-  color: 'var(--ink)',
-  background: 'var(--surface)',
-  border: '1px solid var(--ink-12)',
-  borderRadius: 'var(--radius-input)',
-  outline: 'none',
-  boxSizing: 'border-box',
-}
-
-const labelText: CSSProperties = {
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-caption)',
-  fontWeight: 600,
-  color: 'var(--ink)',
-}
-const fieldLabel: CSSProperties = {
-  ...labelText,
-  display: 'block',
-  marginBottom: 8,
-}
-const fieldSpacing: CSSProperties = {
-  marginBottom: 'var(--form-gap)',
-}
-const hintText: CSSProperties = {
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-eyebrow)',
-  color: 'var(--ink-60)',
-  lineHeight: 1.4,
-}
-const errorText: CSSProperties = {
-  margin: '8px 0 0',
-  fontFamily: 'var(--font-body)',
-  fontSize: 'var(--type-caption)',
-  color: 'var(--ember)',
-}
diff --git a/src/screens/sharedStyles.ts b/src/screens/sharedStyles.ts
index fb13439..483629f 100644
--- a/src/screens/sharedStyles.ts
+++ b/src/screens/sharedStyles.ts
@@ -1,8 +1,18 @@
-export const card = { color: 'var(--text-strong)' };
-export const input = { color: 'var(--text-strong)' };
-export const primaryButton = {
-  background: 'var(--primary-button-color)',
-  color: 'var(--button-primary-fg, #FFFFFF)',
-  border: '1px solid transparent',
-  borderRadius: 'var(--radius-pill)',
-};
+/**
+ * Re-exports theme style definitions for backward compatibility.
+ * All new styles and tokens should be imported directly from `@/theme`.
+ */
+
+export * from '@/theme/styles'
+export { theme, colors, spacing, radii, fonts, fontSizes, fontWeights } from '@/theme'
+
+export const card = {
+  background: 'var(--surface)',
+  border: '1px solid var(--ink-12)',
+  borderRadius: 'var(--radius-card)',
+}
+
+export const input = {
+  borderRadius: 'var(--radius-input)',
+  border: '1px solid var(--ink-12)',
+}
\ No newline at end of file
diff --git a/src/theme/breakpoints.ts b/src/theme/breakpoints.ts
new file mode 100644
index 0000000..79ea4f4
--- /dev/null
+++ b/src/theme/breakpoints.ts
@@ -0,0 +1,22 @@
+/**
+ * Heliobond Design System · Breakpoints & Media Query Tokens
+ *
+ * Responsive boundaries used across the app shell and component layouts.
+ */
+
+export const breakpoints = {
+  mobile: 680,
+  tablet: 960,
+  desktop: 1440,
+} as const
+
+export const media = {
+  mobile: '@media (max-width: 680px)',
+  tablet: '@media (max-width: 960px)',
+  desktop: '@media (min-width: 961px)',
+  hover: '@media (hover: hover) and (pointer: fine)',
+  reducedMotion: '@media (prefers-reduced-motion: reduce)',
+} as const
+
+export type BreakpointTokens = typeof breakpoints
+export type MediaTokens = typeof media
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
new file mode 100644
index 0000000..c97e2ea
--- /dev/null
+++ b/src/theme/colors.ts
@@ -0,0 +1,101 @@
+/**
+ * Heliobond Design System · Color Tokens
+ *
+ * Single source of truth for color tokens, CSS variable aliases, and theme color palettes.
+ * Mirrors src/styles/tokens/colors.css.
+ */
+
+export const lightPalette = {
+  ink: '#0b2b23',
+  canvas: '#f3f5f1',
+  surface: '#fcfdfb',
+  solar: '#ffb400',
+  growth: '#0e6f44',
+  ember: '#b3361b',
+
+  // Ink-derived neutrals
+  ink60: 'rgba(11, 43, 35, 0.6)',
+  ink40: 'rgba(11, 43, 35, 0.4)',
+  ink12: 'rgba(11, 43, 35, 0.12)',
+  ink06: 'rgba(11, 43, 35, 0.06)',
+
+  // Tints
+  solar12: 'rgba(255, 180, 0, 0.12)',
+  solar24: 'rgba(255, 180, 0, 0.24)',
+  growth12: 'rgba(14, 111, 68, 0.12)',
+  ember12: 'rgba(179, 54, 27, 0.12)',
+} as const
+
+export const darkPalette = {
+  ink: '#edf2ec',
+  canvas: '#0d1714',
+  surface: '#13201b',
+  solar: '#ffb400',
+  growth: '#5dd99a',
+  ember: '#ff9b82',
+
+  // Lifted neutrals for AA/AAA contrast
+  ink60: 'rgba(237, 242, 236, 0.72)',
+  ink40: 'rgba(237, 242, 236, 0.52)',
+  ink12: 'rgba(237, 242, 236, 0.14)',
+  ink06: 'rgba(237, 242, 236, 0.06)',
+
+  // Tints
+  solar12: 'rgba(255, 180, 0, 0.14)',
+  solar24: 'rgba(255, 180, 0, 0.26)',
+  growth12: 'rgba(93, 217, 154, 0.14)',
+  ember12: 'rgba(255, 155, 130, 0.14)',
+} as const
+
+/**
+ * CSS custom property bindings for theme colors.
+ * Used in component styles to dynamically respond to light/dark data-theme attribute on <html>.
+ */
+export const colors = {
+  // Base tokens
+  ink: 'var(--ink)',
+  canvas: 'var(--canvas)',
+  surface: 'var(--surface)',
+  solar: 'var(--solar)',
+  growth: 'var(--growth)',
+  ember: 'var(--ember)',
+
+  // Neutral ramps
+  ink60: 'var(--ink-60)',
+  ink40: 'var(--ink-40)',
+  ink12: 'var(--ink-12)',
+  ink06: 'var(--ink-06)',
+
+  // Tints
+  solar12: 'var(--solar-12)',
+  solar24: 'var(--solar-24)',
+  growth12: 'var(--growth-12)',
+  ember12: 'var(--ember-12)',
+
+  // Semantic aliases
+  bgPage: 'var(--bg-page)',
+  bgSurface: 'var(--bg-surface)',
+  bgSunken: 'var(--bg-sunken)',
+
+  textStrong: 'var(--text-strong)',
+  textSecondary: 'var(--text-secondary)',
+  textTertiary: 'var(--text-tertiary)',
+  textOnSolar: 'var(--text-on-solar)',
+  textPositive: 'var(--text-positive)',
+  textNegative: 'var(--text-negative)',
+  textLink: 'var(--text-link)',
+  textLinkHover: 'var(--text-link-hover)',
+
+  borderHairline: 'var(--border-hairline)',
+  borderStrong: 'var(--border-strong)',
+  borderLinkUnderline: 'var(--border-link-underline)',
+
+  accent: 'var(--accent)',
+  accentTint: 'var(--accent-tint)',
+
+  focusRing: 'var(--focus-ring)',
+  focusOffset: 'var(--focus-offset)',
+} as const
+
+export type ColorTokens = typeof colors
+export type Palette = typeof lightPalette
diff --git a/src/theme/index.ts b/src/theme/index.ts
new file mode 100644
index 0000000..a57ef5c
--- /dev/null
+++ b/src/theme/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Heliobond Design System · Theme Package Entry Point
+ */
+
+export * from './colors'
+export * from './spacing'
+export * from './typography'
+export * from './shadows'
+export * from './breakpoints'
+export * from './styles'
+export * from './theme'
+export * from './ThemeProvider'
+export * from './themeScript'
diff --git a/src/theme/shadows.ts b/src/theme/shadows.ts
new file mode 100644
index 0000000..23b0c2c
--- /dev/null
+++ b/src/theme/shadows.ts
@@ -0,0 +1,13 @@
+/**
+ * Heliobond Design System · Shadow Tokens
+ *
+ * Ink-tinted shadows, never gray-black. Mirrors src/styles/tokens/colors.css.
+ */
+
+export const shadows = {
+  sm: 'var(--shadow-sm)',
+  md: 'var(--shadow-md)',
+  lg: 'var(--shadow-lg)',
+} as const
+
+export type ShadowTokens = typeof shadows
diff --git a/src/theme/spacing.ts b/src/theme/spacing.ts
new file mode 100644
index 0000000..e228d0d
--- /dev/null
+++ b/src/theme/spacing.ts
@@ -0,0 +1,84 @@
+/**
+ * Heliobond Design System · Spacing, Radii, Layout & Z-Index Tokens
+ *
+ * Single source of truth for layout geometry. Mirrors src/styles/tokens/spacing.css.
+ */
+
+/**
+ * 4px-based spacing scale as CSS variable references.
+ */
+export const spacing = {
+  1: 'var(--space-1)', // 4px
+  2: 'var(--space-2)', // 8px
+  3: 'var(--space-3)', // 12px
+  4: 'var(--space-4)', // 16px
+  6: 'var(--space-6)', // 24px
+  8: 'var(--space-8)', // 32px
+  12: 'var(--space-12)', // 48px
+  16: 'var(--space-16)', // 64px
+  24: 'var(--space-24)', // 96px
+  32: 'var(--space-32)', // 128px
+} as const
+
+/**
+ * Numeric pixel values for spacing calculations and canvas renderers.
+ */
+export const spacePx = {
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  6: 24,
+  8: 32,
+  12: 48,
+  16: 64,
+  24: 96,
+  32: 128,
+} as const
+
+/**
+ * Border radius tokens.
+ */
+export const radii = {
+  input: 'var(--radius-input)', // 8px
+  card: 'var(--radius-card)', // 16px
+  modal: 'var(--radius-modal)', // 24px
+  pill: 'var(--radius-pill)', // 999px
+} as const
+
+export const radiusPx = {
+  input: 8,
+  card: 16,
+  modal: 24,
+  pill: 999,
+} as const
+
+/**
+ * Layout metrics.
+ */
+export const layout = {
+  contentMax: 'var(--content-max)', // 90rem (1440px)
+  gutterDesktop: 'var(--gutter-desktop)', // 32px
+  gutterMobile: 'var(--gutter-mobile)', // 20px
+  gridColumns: 12,
+  touchMin: 'var(--touch-min)', // 44px
+} as const
+
+/**
+ * Z-Index scale.
+ */
+export const zIndex = {
+  base: 0,
+  raised: 10,
+  sticky: 100,
+  nav: 200,
+  dropdown: 400,
+  sheet: 600,
+  modal: 800,
+  toast: 1000,
+} as const
+
+export type SpacingTokens = typeof spacing
+export type RadiiTokens = typeof radii
+export type LayoutTokens = typeof layout
+export type ZIndexTokens = typeof zIndex
diff --git a/src/theme/styles.ts b/src/theme/styles.ts
new file mode 100644
index 0000000..24df443
--- /dev/null
+++ b/src/theme/styles.ts
@@ -0,0 +1,396 @@
+import type { CSSProperties } from 'react'
+
+/**
+ * Heliobond Design System · Centralized Theme Style Definitions
+ *
+ * Predefined, typed style objects extracted from scattered component and screen definitions.
+ * All properties consume design tokens to guarantee visual consistency across the application.
+ */
+
+// --- Card & Panel Styles ----------------------------------------------------
+
+export const cardTitle: CSSProperties = {
+  fontFamily: 'var(--font-display)',
+  fontWeight: 700,
+  fontSize: 'var(--type-h5)',
+  margin: '0 0 8px',
+  color: 'var(--ink)',
+  letterSpacing: '-0.01em',
+}
+
+export const cardTitleLg: CSSProperties = {
+  fontFamily: 'var(--font-display)',
+  fontWeight: 700,
+  fontSize: 'var(--type-body-lg)',
+  margin: 0,
+  color: 'var(--ink)',
+  letterSpacing: '-0.01em',
+}
+
+export const cardInner: CSSProperties = {
+  padding: 22,
+  height: '100%',
+  boxSizing: 'border-box',
+}
+
+export const panelStyle: CSSProperties = {
+  background: 'var(--surface)',
+  border: '1px solid var(--ink-12)',
+  borderRadius: 'var(--radius-card)',
+  padding: 16,
+  boxShadow: 'var(--shadow-sm)',
+}
+
+export const sectionCard: CSSProperties = {
+  background: 'var(--surface)',
+  border: '1px solid var(--ink-12)',
+  borderRadius: 'var(--radius-card)',
+  padding: 16,
+  boxShadow: 'var(--shadow-sm)',
+}
+
+// --- Typography & Headings --------------------------------------------------
+
+export const pageTitle: CSSProperties = {
+  fontFamily: 'var(--font-display)',
+  fontWeight: 700,
+  fontSize: 'var(--type-h2)',
+  margin: 0,
+  color: 'var(--ink)',
+}
+
+export const sectionTitle: CSSProperties = {
+  fontFamily: 'var(--font-display)',
+  fontWeight: 700,
+  fontSize: 'var(--type-h5)',
+  margin: 0,
+  color: 'var(--ink)',
+}
+
+export const subtle: CSSProperties = {
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-small)',
+  lineHeight: 1.5,
+  color: 'var(--ink-60)',
+}
+
+export const subtleText: CSSProperties = {
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-small)',
+  lineHeight: 1.5,
+  color: 'var(--ink-60)',
+}
+
+export const subtleBlock: CSSProperties = {
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-small)',
+  lineHeight: 1.5,
+  color: 'var(--ink-60)',
+  margin: '0 0 16px',
+}
+
+export const subtext: CSSProperties = {
+  margin: 0,
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-caption)',
+  lineHeight: 1.5,
+  color: 'var(--ink-60)',
+}
+
+export const errorText: CSSProperties = {
+  margin: '8px 0 0',
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-caption)',
+  color: 'var(--ember)',
+}
+
+export const hintText: CSSProperties = {
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-eyebrow)',
+  color: 'var(--ink-60)',
+  lineHeight: 1.4,
+}
+
+// --- Form & Input Styles ----------------------------------------------------
+
+export const inputStyle: CSSProperties = {
+  width: '100%',
+  height: 44,
+  padding: '0 14px',
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-data)',
+  color: 'var(--ink)',
+  background: 'var(--surface)',
+  border: '1px solid var(--ink-12)',
+  borderRadius: 'var(--radius-input)',
+  outline: 'none',
+  boxSizing: 'border-box',
+}
+
+export const scoreInputStyle: CSSProperties = {
+  width: 72,
+  height: 36,
+  padding: '0 10px',
+  fontFamily: 'var(--font-data)',
+  fontSize: 'var(--type-small)',
+  fontFeatureSettings: '"tnum" 1',
+  color: 'var(--ink)',
+  background: 'var(--surface)',
+  border: '1px solid var(--ink-12)',
+  borderRadius: 'var(--radius-input)',
+  outline: 'none',
+}
+
+export const textInput: CSSProperties = {
+  minHeight: 40,
+  padding: '0 12px',
+  fontFamily: 'var(--font-data)',
+  fontSize: 'var(--type-small)',
+  fontFeatureSettings: '"tnum" 1',
+}
+
+export const labelText: CSSProperties = {
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-caption)',
+  fontWeight: 600,
+  color: 'var(--ink)',
+}
+
+export const fieldLabel: CSSProperties = {
+  ...labelText,
+  display: 'block',
+  marginBottom: 8,
+}
+
+export const fieldSpacing: CSSProperties = {
+  marginBottom: 18,
+}
+
+export const formRowStyle: CSSProperties = {
+  display: 'flex',
+  gap: 12,
+}
+
+export const fieldGrowStyle: CSSProperties = {
+  flex: 1,
+}
+
+export const inputGroupStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+}
+
+// --- Statistics & Metrics ---------------------------------------------------
+
+export const statRow: CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+}
+
+export const statCell: CSSProperties = {
+  flex: '1 1 0',
+  minWidth: 140,
+  padding: '14px 16px',
+}
+
+export const statCellLabel: CSSProperties = {
+  marginBottom: 6,
+}
+
+export const statValueRow: CSSProperties = {
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: 5,
+  flexWrap: 'wrap',
+}
+
+export const statValue: CSSProperties = {
+  fontFamily: 'var(--font-data)',
+  fontWeight: 600,
+  fontSize: 'var(--type-h4)',
+  color: 'var(--ink)',
+  fontFeatureSettings: '"tnum" 1',
+  lineHeight: 1.1,
+}
+
+export const statUnit: CSSProperties = {
+  fontFamily: 'var(--font-data)',
+  fontSize: 'var(--type-fine)',
+  color: 'var(--ink-60)',
+}
+
+export const scoreColumn: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 8,
+}
+
+// --- Table Styles -----------------------------------------------------------
+
+export const tableStyle: CSSProperties = {
+  width: '100%',
+  borderCollapse: 'collapse',
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-small)',
+}
+
+export const thBase: CSSProperties = {
+  background: 'var(--ink-06)',
+  padding: '10px 14px',
+  position: 'sticky',
+  top: 0,
+  whiteSpace: 'nowrap',
+  zIndex: 1,
+}
+
+export const tdStyle: CSSProperties = {
+  padding: '12px 14px',
+  verticalAlign: 'middle',
+  color: 'var(--ink)',
+}
+
+export const numCell: CSSProperties = {
+  fontFamily: 'var(--font-data)',
+  fontFeatureSettings: '"tnum" 1',
+  textAlign: 'end',
+  whiteSpace: 'nowrap',
+}
+
+export const typePill: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  height: 22,
+  padding: '0 9px',
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-eyebrow)',
+  fontWeight: 500,
+}
+
+// --- Layout Helpers ---------------------------------------------------------
+
+export const sectionHeaderTop: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: 12,
+}
+
+export const sectionHeaderBottom: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: 8,
+}
+
+export const warningBoxStyle: CSSProperties = {
+  marginTop: 10,
+  padding: '10px 14px',
+  borderRadius: 'var(--radius-input)',
+  background: 'var(--ember-12)',
+  border: '1px solid var(--ember)',
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-caption)',
+  color: 'var(--ember)',
+}
+
+export const helpText: CSSProperties = {
+  margin: 0,
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-caption)',
+  lineHeight: 1.5,
+  color: 'var(--ink-60)',
+}
+
+export const consolePage: CSSProperties = {
+  fontFamily: 'var(--font-body)',
+  color: 'var(--ink)',
+}
+
+export const header: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  gap: 16,
+  flexWrap: 'wrap',
+  marginBottom: 20,
+}
+
+export const whitelistRow: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 14,
+  flexWrap: 'wrap',
+  padding: '12px 0',
+}
+
+export const whitelistName: CSSProperties = {
+  minWidth: 180,
+  flex: '1 1 200px',
+}
+
+export const whitelistNameText: CSSProperties = {
+  fontWeight: 600,
+  fontSize: 'var(--type-small)',
+}
+
+export const whitelistMeta: CSSProperties = {
+  ...subtext,
+  fontSize: 'var(--type-eyebrow)',
+}
+
+export const whitelistData: CSSProperties = {
+  fontFamily: 'var(--font-data)',
+  fontFeatureSettings: '"tnum" 1',
+}
+
+export const whitelistActions: CSSProperties = {
+  display: 'flex',
+  gap: 8,
+  marginInlineStart: 'auto',
+}
+
+export const dataCaptionStyle: CSSProperties = {
+  fontFamily: 'var(--font-data)',
+  fontSize: 'var(--type-caption)',
+  color: 'var(--ink-60)',
+}
+
+export const gridStyle: CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+  gap: 16,
+}
+
+export const warningTextStyle: CSSProperties = {
+  margin: 0,
+  fontFamily: 'var(--font-body)',
+  fontSize: 'var(--type-small)',
+  color: 'var(--ink)',
+  fontWeight: 600,
+}
+
+export const moneyStyle: CSSProperties = {
+  fontFamily: 'var(--font-data)',
+  fontFeatureSettings: '"tnum" 1',
+  color: 'var(--ink)',
+}
+
+export const panelTitleStyle: CSSProperties = {
+  fontFamily: 'var(--font-display)',
+  fontWeight: 700,
+  fontSize: 'var(--type-body)',
+  margin: 0,
+  color: 'var(--ink)',
+}
+
+export const panelHeaderStyle: CSSProperties = {
+  marginBottom: 12,
+}
+
+export const panelBodyStyle: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12,
+}
diff --git a/src/theme/theme.test.ts b/src/theme/theme.test.ts
new file mode 100644
index 0000000..6f993f1
--- /dev/null
+++ b/src/theme/theme.test.ts
@@ -0,0 +1,163 @@
+import { describe, it, expect } from 'vitest'
+import {
+  theme,
+  colors,
+  lightPalette,
+  darkPalette,
+  spacing,
+  spacePx,
+  radii,
+  radiusPx,
+  fonts,
+  fontSizes,
+  fontWeights,
+  shadows,
+  zIndex,
+  breakpoints,
+  media,
+  cardTitle,
+  inputStyle,
+  subtle,
+  statCell,
+  tableStyle,
+} from './index'
+
+describe('Heliobond Theme Configuration', () => {
+  describe('Color Tokens', () => {
+    it('defines CSS variable references for all semantic and core colors', () => {
+      expect(colors.ink).toBe('var(--ink)')
+      expect(colors.canvas).toBe('var(--canvas)')
+      expect(colors.surface).toBe('var(--surface)')
+      expect(colors.solar).toBe('var(--solar)')
+      expect(colors.growth).toBe('var(--growth)')
+      expect(colors.ember).toBe('var(--ember)')
+      expect(colors.ink60).toBe('var(--ink-60)')
+      expect(colors.ink40).toBe('var(--ink-40)')
+      expect(colors.ink12).toBe('var(--ink-12)')
+      expect(colors.ink06).toBe('var(--ink-06)')
+      expect(colors.focusRing).toBe('var(--focus-ring)')
+    })
+
+    it('matches light palette constants with design system colors.css', () => {
+      expect(lightPalette.ink).toBe('#0b2b23')
+      expect(lightPalette.canvas).toBe('#f3f5f1')
+      expect(lightPalette.surface).toBe('#fcfdfb')
+      expect(lightPalette.solar).toBe('#ffb400')
+      expect(lightPalette.growth).toBe('#0e6f44')
+      expect(lightPalette.ember).toBe('#b3361b')
+    })
+
+    it('matches dark palette constants with design system colors.css', () => {
+      expect(darkPalette.ink).toBe('#edf2ec')
+      expect(darkPalette.canvas).toBe('#0d1714')
+      expect(darkPalette.surface).toBe('#13201b')
+      expect(darkPalette.solar).toBe('#ffb400')
+      expect(darkPalette.growth).toBe('#5dd99a')
+      expect(darkPalette.ember).toBe('#ff9b82')
+    })
+  })
+
+  describe('Spacing and Geometry Tokens', () => {
+    it('defines 4px-based spacing scale variables and pixel values', () => {
+      expect(spacing[1]).toBe('var(--space-1)')
+      expect(spacing[2]).toBe('var(--space-2)')
+      expect(spacing[4]).toBe('var(--space-4)')
+      expect(spacing[8]).toBe('var(--space-8)')
+      expect(spacing[12]).toBe('var(--space-12)')
+
+      expect(spacePx[1]).toBe(4)
+      expect(spacePx[2]).toBe(8)
+      expect(spacePx[4]).toBe(16)
+      expect(spacePx[8]).toBe(32)
+      expect(spacePx[12]).toBe(48)
+    })
+
+    it('defines radii variables and pixel values', () => {
+      expect(radii.input).toBe('var(--radius-input)')
+      expect(radii.card).toBe('var(--radius-card)')
+      expect(radii.modal).toBe('var(--radius-modal)')
+      expect(radii.pill).toBe('var(--radius-pill)')
+
+      expect(radiusPx.input).toBe(8)
+      expect(radiusPx.card).toBe(16)
+      expect(radiusPx.modal).toBe(24)
+      expect(radiusPx.pill).toBe(999)
+    })
+
+    it('defines z-index scale matching CSS hierarchy', () => {
+      expect(zIndex.base).toBe(0)
+      expect(zIndex.raised).toBe(10)
+      expect(zIndex.sticky).toBe(100)
+      expect(zIndex.nav).toBe(200)
+      expect(zIndex.dropdown).toBe(400)
+      expect(zIndex.modal).toBe(800)
+      expect(zIndex.toast).toBe(1000)
+    })
+  })
+
+  describe('Typography Tokens', () => {
+    it('defines font families and type ladder tokens', () => {
+      expect(fonts.display).toBe('var(--font-display)')
+      expect(fonts.body).toBe('var(--font-body)')
+      expect(fonts.data).toBe('var(--font-data)')
+
+      expect(fontSizes.h1).toBe('var(--type-h1)')
+      expect(fontSizes.h2).toBe('var(--type-h2)')
+      expect(fontSizes.h3).toBe('var(--type-h3)')
+      expect(fontSizes.body).toBe('var(--type-body)')
+      expect(fontSizes.small).toBe('var(--type-small)')
+      expect(fontSizes.caption).toBe('var(--type-caption)')
+
+      expect(fontWeights.regular).toBe(400)
+      expect(fontWeights.semiBold).toBe(600)
+      expect(fontWeights.bold).toBe(700)
+    })
+  })
+
+  describe('Shadows & Breakpoints', () => {
+    it('defines shadow tokens', () => {
+      expect(shadows.sm).toBe('var(--shadow-sm)')
+      expect(shadows.md).toBe('var(--shadow-md)')
+      expect(shadows.lg).toBe('var(--shadow-lg)')
+    })
+
+    it('defines layout breakpoints and media query strings', () => {
+      expect(breakpoints.mobile).toBe(680)
+      expect(breakpoints.tablet).toBe(960)
+      expect(breakpoints.desktop).toBe(1440)
+
+      expect(media.mobile).toContain('680px')
+      expect(media.tablet).toContain('960px')
+      expect(media.desktop).toContain('961px')
+    })
+  })
+
+  describe('Centralized Theme Styles', () => {
+    it('exports styled CSSProperties objects with design token references', () => {
+      expect(cardTitle.fontFamily).toBe('var(--font-display)')
+      expect(cardTitle.color).toBe('var(--ink)')
+
+      expect(inputStyle.borderRadius).toBe('var(--radius-input)')
+      expect(inputStyle.background).toBe('var(--surface)')
+
+      expect(subtle.color).toBe('var(--ink-60)')
+      expect(subtle.fontSize).toBe('var(--type-small)')
+
+      expect(statCell.flex).toBe('1 1 0')
+      expect(tableStyle.borderCollapse).toBe('collapse')
+    })
+  })
+
+  describe('Unified Theme Object', () => {
+    it('aggregates all theme modules under the single theme object', () => {
+      expect(theme.colors).toBe(colors)
+      expect(theme.spacing).toBe(spacing)
+      expect(theme.radii).toBe(radii)
+      expect(theme.fonts).toBe(fonts)
+      expect(theme.shadows).toBe(shadows)
+      expect(theme.zIndex).toBe(zIndex)
+      expect(theme.breakpoints).toBe(breakpoints)
+      expect(theme.styles.cardTitle).toBe(cardTitle)
+    })
+  })
+})
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
new file mode 100644
index 0000000..139c3c2
--- /dev/null
+++ b/src/theme/theme.ts
@@ -0,0 +1,68 @@
+import { colors, lightPalette, darkPalette, type ColorTokens, type Palette } from './colors'
+import {
+  spacing,
+  spacePx,
+  radii,
+  radiusPx,
+  layout,
+  zIndex,
+  type SpacingTokens,
+  type RadiiTokens,
+  type LayoutTokens,
+  type ZIndexTokens,
+} from './spacing'
+import {
+  fonts,
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  type FontsTokens,
+  type FontSizesTokens,
+  type FontWeightsTokens,
+} from './typography'
+import { shadows, type ShadowTokens } from './shadows'
+import { breakpoints, media, type BreakpointTokens, type MediaTokens } from './breakpoints'
+import * as styles from './styles'
+
+/**
+ * Unified Heliobond Theme Configuration
+ *
+ * Central theme object consolidating all design tokens, geometry, typography, and reusable styles.
+ */
+export const theme = {
+  colors,
+  palettes: {
+    light: lightPalette,
+    dark: darkPalette,
+  },
+  spacing,
+  spacePx,
+  radii,
+  radiusPx,
+  layout,
+  zIndex,
+  fonts,
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  shadows,
+  breakpoints,
+  media,
+  styles,
+} as const
+
+export type ThemeConfig = typeof theme
+export type {
+  ColorTokens,
+  Palette,
+  SpacingTokens,
+  RadiiTokens,
+  LayoutTokens,
+  ZIndexTokens,
+  FontsTokens,
+  FontSizesTokens,
+  FontWeightsTokens,
+  ShadowTokens,
+  BreakpointTokens,
+  MediaTokens,
+}
diff --git a/src/theme/typography.ts b/src/theme/typography.ts
new file mode 100644
index 0000000..19875ef
--- /dev/null
+++ b/src/theme/typography.ts
@@ -0,0 +1,54 @@
+/**
+ * Heliobond Design System · Typography Tokens
+ *
+ * Single source of truth for font families, sizes, weights, and tracking.
+ * Mirrors src/styles/tokens/typography.css and fonts.css.
+ */
+
+export const fonts = {
+  display: 'var(--font-display)',
+  body: 'var(--font-body)',
+  data: 'var(--font-data)',
+  mono: 'var(--font-mono)',
+} as const
+
+export const fontSizes = {
+  displayXl: 'var(--type-display-xl)', // 52–120px clamp
+  displayM: 'var(--type-display-m)', // 32–56px clamp
+  displayS: 'var(--type-display-s)',
+  h1: 'var(--type-h1)',
+  h2: 'var(--type-h2)',
+  h3: 'var(--type-h3)',
+  h3Sm: 'var(--type-h3-sm)',
+  h4: 'var(--type-h4)',
+  h5: 'var(--type-h5)',
+  bodyLg: 'var(--type-body-lg)',
+  body: 'var(--type-body)',
+  small: 'var(--type-small)',
+  caption: 'var(--type-caption)',
+  eyebrow: 'var(--type-eyebrow)',
+  fine: 'var(--type-fine)',
+  dataL: 'var(--type-data-l)',
+  dataDisplay: 'var(--type-data-display)',
+  data: 'var(--type-data)',
+} as const
+
+export const fontWeights = {
+  regular: 400,
+  medium: 500,
+  semiBold: 600,
+  bold: 700,
+  extraBold: 800,
+} as const
+
+export const letterSpacings = {
+  tight: '-0.02em',
+  snug: '-0.01em',
+  normal: '0em',
+  wide: '0.04em',
+  caps: '0.06em',
+} as const
+
+export type FontsTokens = typeof fonts
+export type FontSizesTokens = typeof fontSizes
+export type FontWeightsTokens = typeof fontWeights
diff --git a/src/wallet/WalletProvider.tsx b/src/wallet/WalletProvider.tsx
index c02286f..9264980 100644
--- a/src/wallet/WalletProvider.tsx
+++ b/src/wallet/WalletProvider.tsx
@@ -38,7 +38,7 @@ export function useWallet(): WalletContextValue {
 export function shortAddress(address: string, lead = 4, tail = 3): string {
   if (address.length <= lead + tail + 1) return address
   const suffix = tail > 0 ? address.slice(-tail) : ''
-  return `${address.slice(0, lead)}…{suffix}`
+  return `${address.slice(0, lead)}…${suffix}`
 }
 
 const DEMO_ADDRESS = 'GBQHWTVZ2K4M6N8P3R5T7W9YA2C4E6G8J3L5Q7S9U2X4Z6B8D1F3H59XQ'
@@ -92,7 +92,7 @@ export function WalletProvider({ children }: {children: ReactNode}) {
     if (initedNetworkRef.current === network) return
     const { StellarWalletsKit, Networks } = await import('@creit.tech/stellar-wallets-kit')
     const { defaultModules } = await import('@creit.tech/stellar-wallets-kit/modules/utils')
-    StellareWalletsKit.init({
+    StellarWalletsKit.init({
       modules: defaultModules(),
       network: network === 'TESTNET' ? Networks.TESTNET : Networks.PUBLIC,
     })
@@ -134,11 +134,11 @@ export function WalletProvider({ children }: {children: ReactNode}) {
     setConnectionError(null)
     try {
       await ensureInit()
-      const { StellareWalletsKit } = await import('@creit.tech/stellar-wallets-kit')
+      const { StellarWalletsKit } = await import('@creit.tech/stellar-wallets-kit')
       const timeoutPromise = new Promise<never>((_, reject) =>
         setTimeout(() => reject(new Error('timeout')), CONNECT_TIMEOUT_MS)
       )
-      const authPromise = StellareWalletsKit.authModal() as Promise<{ address: string }>
+      const authPromise = StellarWalletsKit.authModal() as Promise<{ address: string }>
       const { address: adr } = await Promise.race([authPromise, timeoutPromise])
       let walletId = 'wallet'
       try {
@@ -158,7 +158,7 @@ export function WalletProvider({ children }: {children: ReactNode}) {
       }
       if (isTimeout && attempt < MAX_AUTO_RETRIES) {
         setRetryCount(attempt + 1)
-        await new Promise((r) => setTimeour(r, 1000 * Math.pow(2, attempt)))
+        await new Promise((r) => setTimeout(r, 1000 * Math.pow(2, attempt)))
         return connectWithRetry(attempt + 1)
       }
       setConnectionError(
@@ -194,7 +194,7 @@ export function WalletProvider({ children }: {children: ReactNode}) {
       if (isDemo) throw new Error('demo')
       await ensureInit()
       const { StellarWalletsKit, Networks } = await import('@creit.tech/stellar-wallets-kit')
-      const result = await StellareWalletsKit.signTransaction(xdr, {
+      const result = await StellarWalletsKit.signTransaction(xdr, {
         networkPassphrase: network === 'TESTNET' ? Networks.TESTNET : Networks.PUBLIC,
         address: address ?? undefined,
       })
@@ -215,13 +215,13 @@ export function WalletProvider({ children }: {children: ReactNode}) {
       /* ignore */
     }
     void import('@creit.tech/stellar-wallets-kit')
-      .then(({ StellareWalletsKit }) => StellarWalletsKit.disconnect())
+      .then(({ StellarWalletsKit }) => StellarWalletsKit.disconnect())
       .catch(() => {})
   }, [])
 
   return (
     <WalletContext.Provider
-      value={
+      value={{
         address,
         connected: address !== null,
         connecting,
@@ -236,7 +236,7 @@ export function WalletProvider({ children }: {children: ReactNode}) {
         sign,
         network,
         setNetwork,
-      }
+      }}
     >
       {children}
     </WalletContext.Provider>
diff --git a/src/wallet/useVault.ts b/src/wallet/useVault.ts
index 2eaa416..4f3f7b8 100644
--- a/src/wallet/useVault.ts
+++ b/src/wallet/useVault.ts
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, effect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { HB_DATA } from '../data'
 import { fetchSharePrice, fetchTotalAssets } from './vault'
 import { useWallet } from './WalletProvider'
@@ -42,7 +42,7 @@ export function useVault(): VaultState {
     setLoading(true)
     setError(null)
 
-    Promise.all([fetchSharePrice(address, network), fetchTotalAssets(address, network)])
+    Promise.all([fetchSharePrice(network), fetchTotalAssets(network)])
       .then(([price, assets]) => {
         setSharePrice(price)
         setTotalAssets(assets)