diff --git a/apps/web/public/fonts/InstrumentSerif-Italic.woff2 b/apps/web/public/fonts/InstrumentSerif-Italic.woff2
deleted file mode 100644
index 009f096..0000000
Binary files a/apps/web/public/fonts/InstrumentSerif-Italic.woff2 and /dev/null differ
diff --git a/apps/web/public/fonts/InstrumentSerif-Regular.woff2 b/apps/web/public/fonts/InstrumentSerif-Regular.woff2
deleted file mode 100644
index a8004c7..0000000
Binary files a/apps/web/public/fonts/InstrumentSerif-Regular.woff2 and /dev/null differ
diff --git a/apps/web/public/fonts/PlayfairDisplay-Variable.woff2 b/apps/web/public/fonts/PlayfairDisplay-Variable.woff2
new file mode 100644
index 0000000..d871b06
Binary files /dev/null and b/apps/web/public/fonts/PlayfairDisplay-Variable.woff2 differ
diff --git a/apps/web/public/fonts/PlayfairDisplay-VariableItalic.woff2 b/apps/web/public/fonts/PlayfairDisplay-VariableItalic.woff2
new file mode 100644
index 0000000..2ff0805
Binary files /dev/null and b/apps/web/public/fonts/PlayfairDisplay-VariableItalic.woff2 differ
diff --git a/apps/web/src/components/InboxList.tsx b/apps/web/src/components/InboxList.tsx
index 5f27e00..27bd87a 100644
--- a/apps/web/src/components/InboxList.tsx
+++ b/apps/web/src/components/InboxList.tsx
@@ -122,7 +122,7 @@ export function InboxList({
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <h2 className="text-2xl font-display">Agent Inbox</h2>
+          <h2 className="text-lg font-semibold font-display">Agent Inbox</h2>
           <Badge variant="secondary">{joined.length}</Badge>
         </div>
         <Button variant="outline" size="sm" onClick={onRefresh}>
diff --git a/apps/web/src/components/PhaseAccordion.tsx b/apps/web/src/components/PhaseAccordion.tsx
index 137cd61..0b04cfb 100644
--- a/apps/web/src/components/PhaseAccordion.tsx
+++ b/apps/web/src/components/PhaseAccordion.tsx
@@ -60,7 +60,7 @@ export function PhaseAccordion({
         )}
 
         {/* Phase name */}
-        <span className="min-w-0 flex-1 truncate font-display">
+        <span className="min-w-0 flex-1 truncate font-display font-medium">
           {phase.name}
         </span>
 
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 00927e5..eb81ce1 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -15,17 +15,17 @@
 }
 
 @font-face {
-  font-family: 'Instrument Serif';
-  src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');
-  font-weight: 400;
+  font-family: 'Playfair Display';
+  src: url('/fonts/PlayfairDisplay-Variable.woff2') format('woff2');
+  font-weight: 400 900;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Instrument Serif';
-  src: url('/fonts/InstrumentSerif-Italic.woff2') format('woff2');
-  font-weight: 400;
+  font-family: 'Playfair Display';
+  src: url('/fonts/PlayfairDisplay-VariableItalic.woff2') format('woff2');
+  font-weight: 400 900;
   font-style: italic;
   font-display: swap;
 }
diff --git a/apps/web/src/layouts/AppLayout.tsx b/apps/web/src/layouts/AppLayout.tsx
index 4dc11d7..b24dc12 100644
--- a/apps/web/src/layouts/AppLayout.tsx
+++ b/apps/web/src/layouts/AppLayout.tsx
@@ -41,8 +41,8 @@ export function AppLayout({ children, onOpenCommandPalette, connectionState }: A
                 CW
               </span>
               <span className="hidden items-baseline gap-1 sm:inline-flex">
-                <span className="font-display tracking-normal">Codewalk</span>
-                <span className="font-display tracking-normal text-muted-foreground">District</span>
+                <span className="font-display font-bold tracking-tight">Codewalk</span>
+                <span className="font-display font-medium tracking-tight text-muted-foreground">District</span>
               </span>
             </Link>
             <nav className="flex items-center gap-1">
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 5214722..eb0123f 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -23,7 +23,7 @@ function RootLayout() {
   return (
     <>
       <ConnectionBanner state={connectionState} />
-      <AppLayout onOpenCommandPalette={openCommandPalette}>
+      <AppLayout onOpenCommandPalette={openCommandPalette} connectionState={connectionState}>
         <ErrorBoundary>
           <Outlet />
         </ErrorBoundary>
diff --git a/apps/web/src/routes/agents.tsx b/apps/web/src/routes/agents.tsx
index dc36a72..95ff6ce 100644
--- a/apps/web/src/routes/agents.tsx
+++ b/apps/web/src/routes/agents.tsx
@@ -192,7 +192,7 @@ function AgentsPage() {
       <div className="shrink-0 space-y-3">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h1 className="font-display text-2xl">Agents</h1>
+            <h1 className="font-display text-lg font-semibold">Agents</h1>
             <Badge variant="secondary">{agents.length}</Badge>
           </div>
           <Button variant="outline" size="sm" onClick={handleRefresh}>
diff --git a/apps/web/src/routes/initiatives/index.tsx b/apps/web/src/routes/initiatives/index.tsx
index 7aad046..ca8f231 100644
--- a/apps/web/src/routes/initiatives/index.tsx
+++ b/apps/web/src/routes/initiatives/index.tsx
@@ -40,7 +40,7 @@ function DashboardPage() {
     >
       {/* Page header */}
       <div className="flex items-center justify-between">
-        <h1 className="font-display text-3xl">Initiatives</h1>
+        <h1 className="font-display text-2xl font-semibold">Initiatives</h1>
         <div className="flex items-center gap-3">
           <select
             value={statusFilter}
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 01f2a4f..5a7599a 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -13,7 +13,7 @@ function SettingsLayout() {
   return (
     <div className="mx-auto max-w-4xl space-y-4">
       <div className="flex items-center justify-between">
-        <h1 className="font-display text-3xl">Settings</h1>
+        <h1 className="font-display text-2xl font-semibold">Settings</h1>
       </div>
       <nav className="flex gap-1 border-b border-border">
         {settingsTabs.map((tab) => (
diff --git a/apps/web/src/routes/settings/health.tsx b/apps/web/src/routes/settings/health.tsx
index 12317e2..ca62c0f 100644
--- a/apps/web/src/routes/settings/health.tsx
+++ b/apps/web/src/routes/settings/health.tsx
@@ -97,7 +97,7 @@ function HealthCheckPage() {
       {/* Server Status */}
       <Card>
         <CardHeader>
-          <CardTitle className="flex items-center gap-2 font-display text-xl">
+          <CardTitle className="flex items-center gap-2 font-display text-lg">
             <Server className="h-5 w-5" />
             Server Status
           </CardTitle>
@@ -124,7 +124,7 @@ function HealthCheckPage() {
 
       {/* Accounts */}
       <div className="space-y-3">
-        <h2 className="font-display text-xl">Accounts</h2>
+        <h2 className="font-display text-lg font-semibold">Accounts</h2>
         {accounts.length === 0 ? (
           <Card>
             <CardContent className="py-6">
@@ -154,7 +154,7 @@ function HealthCheckPage() {
 
       {/* Projects */}
       <div className="space-y-3">
-        <h2 className="font-display text-xl">Projects</h2>
+        <h2 className="font-display text-lg font-semibold">Projects</h2>
         {projects.length === 0 ? (
           <Card>
             <CardContent className="py-6">
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 86c3e17..073ec47 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -18,7 +18,7 @@ export default {
       fontFamily: {
         sans: ["Geist Sans", ...defaultTheme.fontFamily.sans],
         mono: ["Geist Mono", ...defaultTheme.fontFamily.mono],
-        display: ['"Instrument Serif"', "Georgia", "serif"],
+        display: ['"Playfair Display"', "Georgia", "serif"],
       },
       colors: {
         border: "hsl(var(--border))",