diff --git a/apps/web/src/views/docs.ejs b/apps/web/src/views/docs.ejs
index 0a08c06..dd20f59 100644
--- a/apps/web/src/views/docs.ejs
+++ b/apps/web/src/views/docs.ejs
@@ -1,12 +1,7 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PingQL — Documentation</title>
-  <link rel="stylesheet" href="/assets/tailwind.css?v=<%= it.cssHash %>">
+<%~ include('./partials/public-head', { title: 'Documentation', nav: 'docs' }) %>
+
   <style>
-    body { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; background: #0a0a0a; }
+    body { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; }
     pre, code { font-family: inherit; }
 
     /* Sidebar nav */
@@ -33,11 +28,11 @@
     .cb pre { padding: 0.85rem; font-size: 0.78rem; line-height: 1.65; color: #e2e8f0; overflow-x: auto; margin: 0; }
 
     /* Syntax */
-    .k { color: #c084fc; } /* key */
-    .s { color: #34d399; } /* string */
-    .n { color: #f59e0b; } /* number */
-    .o { color: #60a5fa; } /* operator */
-    .c { color: #334155; } /* comment */
+    .k { color: #c084fc; }
+    .s { color: #34d399; }
+    .n { color: #f59e0b; }
+    .o { color: #60a5fa; }
+    .c { color: #334155; }
 
     /* Tables */
     table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 0.5rem 0 1.25rem; }
@@ -56,19 +51,11 @@
     .path { color: #e2e8f0; font-size: 0.875rem; }
     .endpoint-desc { font-size: 0.8rem; color: #4b5563; margin-bottom: 1rem; }
   </style>
-</head>
-<body class="bg-[#0a0a0a] text-gray-100 min-h-screen">
 
-  <!-- Top bar -->
-  <div class="border-b border-gray-900 px-6 py-3 flex items-center justify-between">
-    <a href="/" class="text-lg font-bold">Ping<span class="text-blue-400">QL</span> <span class="text-gray-600 font-normal text-sm">docs</span></a>
-    <a href="/dashboard" class="text-sm text-gray-600 hover:text-gray-400 transition-colors">Dashboard →</a>
-  </div>
-
-  <div class="flex max-w-6xl mx-auto">
+  <div class="flex max-w-6xl mx-auto pt-16">
 
     <!-- Sidebar -->
-    <aside class="w-52 shrink-0 sticky top-0 h-screen overflow-y-auto py-6 hidden md:block">
+    <aside class="w-52 shrink-0 sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto py-6 hidden md:block">
       <div class="nav-section">Getting Started</div>
       <a href="#overview"    class="nav-link">Overview</a>
       <a href="#auth"        class="nav-link">Authentication</a>
@@ -340,17 +327,6 @@
     sections.forEach(s => observer.observe(s));
 
     // Copy buttons
-    document.querySelectorAll('.cb').forEach(cb => {
-      const btn = cb.querySelector('.cb-copy');
-      if (!btn) return;
-      btn.addEventListener('click', () => {
-        const text = cb.querySelector('pre').innerText;
-        navigator.clipboard.writeText(text);
-        btn.textContent = 'Copied!';
-        setTimeout(() => btn.textContent = 'Copy', 1500);
-      });
-    });
-    // Add copy buttons to all codeblocks
     document.querySelectorAll('.cb-header').forEach(h => {
       if (!h.querySelector('.cb-copy')) {
         const btn = document.createElement('button');
@@ -366,5 +342,5 @@
       }
     });
   </script>
-</body>
-</html>
\ No newline at end of file
+
+<%~ include('./partials/public-foot') %>
diff --git a/apps/web/src/views/partials/public-foot.ejs b/apps/web/src/views/partials/public-foot.ejs
new file mode 100644
index 0000000..c9d94ff
--- /dev/null
+++ b/apps/web/src/views/partials/public-foot.ejs
@@ -0,0 +1,16 @@
+  <footer class="border-t border-border-subtle py-16 px-6">
+    <div class="max-w-5xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
+      <div class="flex items-center gap-8">
+        <a href="/" class="text-lg font-bold tracking-tight font-mono">Ping<span class="text-brand">QL</span></a>
+        <nav class="flex items-center gap-6 text-sm text-gray-500">
+          <a href="/docs" class="hover:text-gray-300 transition-colors">Docs</a>
+          <a href="/privacy" class="hover:text-gray-300 transition-colors">Privacy</a>
+          <a href="/terms" class="hover:text-gray-300 transition-colors">Terms</a>
+        </nav>
+      </div>
+      <div class="text-xs text-gray-600">&copy; <%= new Date().getFullYear() %> PingQL</div>
+    </div>
+  </footer>
+
+</body>
+</html>
diff --git a/apps/web/src/views/partials/public-head.ejs b/apps/web/src/views/partials/public-head.ejs
new file mode 100644
index 0000000..d4695ff
--- /dev/null
+++ b/apps/web/src/views/partials/public-head.ejs
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" class="dark scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PingQL<%= it.title ? ` — ${it.title}` : '' %></title>
+  <% if (it.description) { %><meta name="description" content="<%= it.description %>"><% } %>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/assets/tailwind.css?v=<%= it.cssHash %>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="bg-[#0a0a0a] text-gray-100 font-sans antialiased">
+
+  <header class="fixed top-0 left-0 right-0 z-50 border-b border-border-subtle bg-[#0a0a0a]/70 backdrop-blur-md">
+    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+      <a href="/" class="font-mono text-lg font-bold tracking-tight group">Ping<span class="text-blue-400 transition-all group-hover:drop-shadow-[0_0_8px_rgba(59,130,246,0.4)]">QL</span></a>
+      <nav class="hidden md:flex items-center gap-7 text-sm text-gray-400">
+        <a href="/docs" class="<%= it.nav === 'docs' ? 'text-gray-200' : 'hover:text-gray-200' %> transition-colors">Docs</a>
+        <a href="/privacy" class="<%= it.nav === 'privacy' ? 'text-gray-200' : 'hover:text-gray-200' %> transition-colors">Privacy</a>
+        <a href="/terms" class="<%= it.nav === 'terms' ? 'text-gray-200' : 'hover:text-gray-200' %> transition-colors">Terms</a>
+      </nav>
+      <div class="flex items-center gap-3">
+        <a href="/dashboard" class="text-sm text-gray-400 hover:text-gray-200 transition-colors">Sign in</a>
+        <a href="/dashboard" class="text-sm btn-primary px-4 py-2">Get started</a>
+      </div>
+    </div>
+  </header>
diff --git a/apps/web/src/views/privacy.ejs b/apps/web/src/views/privacy.ejs
index aa7e5b2..915b661 100644
--- a/apps/web/src/views/privacy.ejs
+++ b/apps/web/src/views/privacy.ejs
@@ -1,15 +1,6 @@
-<!DOCTYPE html>
-<html lang="en" class="dark scroll-smooth">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Privacy — PingQL</title>
-  <meta name="description" content="PingQL's privacy policy. No tracking, no data sales, no ads. We store what we need and nothing more.">
-  <link rel="stylesheet" href="/assets/tailwind.css?v=<%= it.cssHash %>">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<%~ include('./partials/public-head', { title: 'Privacy', description: "PingQL's privacy policy. No tracking, no data sales, no ads.", nav: 'privacy' }) %>
+
   <style>
-    body { background: #0a0a0a; }
     .grid-bg {
       background-image:
         linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
@@ -24,21 +15,8 @@
     .prose-custom a { color: #60a5fa; text-decoration: none; }
     .prose-custom a:hover { text-decoration: underline; }
   </style>
-</head>
-<body class="bg-[#0a0a0a] text-gray-100 font-sans antialiased grid-bg">
 
-  <!-- Header -->
-  <header class="border-b border-gray-800/60 bg-[#0a0a0a]/80 backdrop-blur-md">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <a href="/" class="font-mono text-lg font-bold tracking-tight">Ping<span class="text-blue-400">QL</span></a>
-      <div class="flex items-center gap-3">
-        <a href="/dashboard" class="text-sm text-gray-400 hover:text-gray-200 transition-colors">Sign in</a>
-        <a href="/dashboard" class="text-sm bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg font-medium transition-colors">Get started</a>
-      </div>
-    </div>
-  </header>
-
-  <main class="max-w-2xl mx-auto px-6 py-20">
+  <main class="max-w-2xl mx-auto px-6 pt-28 pb-16">
 
     <!-- Hero -->
     <div class="mb-12">
@@ -131,20 +109,4 @@
     </div>
   </main>
 
-  <!-- Footer -->
-  <footer class="border-t border-gray-800/50 py-12 px-6 mt-12">
-    <div class="max-w-5xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
-      <div class="flex items-center gap-6">
-        <a href="/" class="text-lg font-bold tracking-tight font-mono">Ping<span class="text-blue-400">QL</span></a>
-        <nav class="flex items-center gap-5 text-sm text-gray-500">
-          <a href="/dashboard" class="hover:text-gray-300 transition-colors">Dashboard</a>
-          <a href="/docs" class="hover:text-gray-300 transition-colors">Docs</a>
-          <a href="/privacy" class="hover:text-gray-300 transition-colors">Privacy</a>
-        </nav>
-      </div>
-      <div class="text-xs text-gray-600">Built by Ico &#9823;</div>
-    </div>
-  </footer>
-
-</body>
-</html>
\ No newline at end of file
+<%~ include('./partials/public-foot') %>
diff --git a/apps/web/src/views/tos.ejs b/apps/web/src/views/tos.ejs
index a6ade57..c03a2e3 100644
--- a/apps/web/src/views/tos.ejs
+++ b/apps/web/src/views/tos.ejs
@@ -1,26 +1,4 @@
-<!DOCTYPE html>
-<html lang="en" class="dark">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PingQL — Terms of Service</title>
-  <link rel="stylesheet" href="/assets/tailwind.css?v=<%= it.cssHash %>">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-</head>
-<body class="bg-[#0a0a0a] text-gray-100 font-sans antialiased">
-
-  <header class="fixed top-0 left-0 right-0 z-50 border-b border-gray-800/60 bg-[#0a0a0a]/80 backdrop-blur-md">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <a href="/" class="font-mono text-lg font-bold tracking-tight">Ping<span class="text-brand">QL</span></a>
-      <nav class="flex items-center gap-5 text-sm text-gray-400">
-        <a href="/docs" class="hover:text-gray-200 transition-colors">Docs</a>
-        <a href="/privacy" class="hover:text-gray-200 transition-colors">Privacy</a>
-        <a href="/terms" class="text-gray-200">Terms</a>
-        <a href="/dashboard" class="hover:text-gray-200 transition-colors">Sign in</a>
-      </nav>
-    </div>
-  </header>
+<%~ include('./partials/public-head', { title: 'Terms of Service', nav: 'terms' }) %>
 
   <main class="max-w-3xl mx-auto px-6 pt-28 pb-16">
     <h1 class="text-3xl font-bold tracking-tight mb-2">Terms of Service</h1>
@@ -89,20 +67,4 @@
     </div>
   </main>
 
-  <footer class="border-t border-gray-800/50 py-12 px-6">
-    <div class="max-w-5xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
-      <div class="flex items-center gap-6">
-        <a href="/" class="text-lg font-bold tracking-tight font-mono">Ping<span class="text-brand">QL</span></a>
-        <nav class="flex items-center gap-5 text-sm text-gray-500">
-          <a href="/dashboard" class="hover:text-gray-300 transition-colors">Dashboard</a>
-          <a href="/docs" class="hover:text-gray-300 transition-colors">Docs</a>
-          <a href="/privacy" class="hover:text-gray-300 transition-colors">Privacy</a>
-          <a href="/terms" class="hover:text-gray-300 transition-colors">Terms</a>
-        </nav>
-      </div>
-      <div class="text-xs text-gray-600">Built by Ico &#9823;</div>
-    </div>
-  </footer>
-
-</body>
-</html>
+<%~ include('./partials/public-foot') %>
