diff --git a/website/public/favicon.svg b/website/public/favicon.svg
index 667b882..e341da3 100644
--- a/website/public/favicon.svg
+++ b/website/public/favicon.svg
@@ -1,12 +1,15 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
   <defs>
     <linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#1FBFB6"/>
-      <stop offset="1" stop-color="#B6FF3C"/>
+      <stop offset="0" stop-color="#61EBFA"/>
+      <stop offset="1" stop-color="#6FE4BF"/>
     </linearGradient>
   </defs>
   <rect width="32" height="32" rx="6" fill="#0A0F14"/>
-  <circle cx="9" cy="16" r="4" fill="#0E7C7B"/>
-  <circle cx="23" cy="16" r="4" fill="#B6FF3C"/>
-  <path d="M9 16 Q 16 6 23 16" stroke="url(#g)" stroke-width="2" fill="none" stroke-linecap="round"/>
+  <circle cx="8" cy="16" r="3.5" fill="#61EBFA"/>
+  <circle cx="24" cy="16" r="3.5" fill="#6FE4BF"/>
+  <path d="M8 16 Q 16 6 24 16" stroke="url(#g)" stroke-width="1.6" fill="none" stroke-linecap="round">
+    <animate attributeName="d" dur="2.4s" repeatCount="indefinite"
+      values="M8 16 Q 16 6 24 16; M8 16 Q 16 26 24 16; M8 16 Q 16 6 24 16"/>
+  </path>
 </svg>
diff --git a/website/src/components/layout/Logo.astro b/website/src/components/layout/Logo.astro
new file mode 100644
index 0000000..a1103ea
--- /dev/null
+++ b/website/src/components/layout/Logo.astro
@@ -0,0 +1,22 @@
+---
+interface Props {
+  size?: number;
+}
+
+const { size = 28 } = Astro.props;
+const gradientId = `synapse-g-${crypto.randomUUID()}`;
+---
+<svg viewBox="0 0 32 32" width={size} height={size} aria-hidden="true">
+  <defs>
+    <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="var(--signal-a, #61EBFA)" />
+      <stop offset="1" stop-color="var(--signal-b, #6FE4BF)" />
+    </linearGradient>
+  </defs>
+  <circle cx="8" cy="16" r="3.5" fill="var(--signal-a, #61EBFA)" />
+  <circle cx="24" cy="16" r="3.5" fill="var(--signal-b, #6FE4BF)" />
+  <path d="M8 16 Q 16 6 24 16" stroke={`url(#${gradientId})`} stroke-width="1.6" fill="none" stroke-linecap="round">
+    <animate attributeName="d" dur="2.4s" repeatCount="indefinite"
+      values="M8 16 Q 16 6 24 16; M8 16 Q 16 26 24 16; M8 16 Q 16 6 24 16" />
+  </path>
+</svg>
diff --git a/website/src/components/layout/Nav.astro b/website/src/components/layout/Nav.astro
index 2c69edd..c3d179a 100644
--- a/website/src/components/layout/Nav.astro
+++ b/website/src/components/layout/Nav.astro
@@ -1,25 +1,13 @@
 ---
 import ThemeToggle from './ThemeToggle.astro';
+import Logo from './Logo.astro';
 import Search from '~/components/react/Search.tsx';
 const path = Astro.url.pathname;
 const isActive = (p: string) => path === p || (p !== '/' && path.startsWith(p));
 ---
 <nav class="syn-nav" aria-label="Primary">
   <a href="/" class="syn-nav__brand" aria-label="Synapse home">
-    <svg viewBox="0 0 32 32" width="28" height="28" aria-hidden="true">
-      <defs>
-        <linearGradient id="synapse-g" x1="0" x2="1" y1="0" y2="1">
-          <stop offset="0" stop-color="var(--signal-a)" />
-          <stop offset="1" stop-color="var(--signal-b)" />
-        </linearGradient>
-      </defs>
-      <circle cx="8" cy="16" r="3.5" fill="var(--signal-a)" />
-      <circle cx="24" cy="16" r="3.5" fill="var(--signal-b)" />
-      <path d="M8 16 Q 16 6 24 16" stroke="url(#synapse-g)" stroke-width="1.6" fill="none">
-        <animate attributeName="d" dur="2.4s" repeatCount="indefinite"
-          values="M8 16 Q 16 6 24 16; M8 16 Q 16 26 24 16; M8 16 Q 16 6 24 16" />
-      </path>
-    </svg>
+    <Logo />
     <span>Synapse</span>
   </a>
   <ul class="syn-nav__links" role="list">
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 6b0c84e..2c180a6 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import BaseLayout from '~/components/layout/BaseLayout.astro';
+import Logo from '~/components/layout/Logo.astro';
 
 import { highlightJava } from '@/lib/highlight';
 import { QUICKSTART_CODE, PUBSUB_CODE, HARDWARE_CODE } from '@/lib/code-samples';
@@ -159,10 +160,7 @@ const footerCols = [
     >
       <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
         <a href="/" class="flex items-center gap-2.5">
-          <span class="relative flex size-8 items-center justify-center rounded-lg bg-primary/15">
-            <span class="absolute size-2.5 rounded-full bg-primary shadow-[0_0_12px_var(--glow-soft)]"></span>
-            <span class="absolute size-5 rounded-full border border-primary/40"></span>
-          </span>
+          <Logo size={28} />
           <span class="font-display text-lg font-semibold tracking-tight">Synapse</span>
           <span
             class="ml-1 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 font-mono text-[10px] font-medium text-primary shadow-[0_0_14px_-2px_var(--glow-soft)]"