diff --git a/cdn.html b/cdn.html
index cac2835..65d50a6 100644
--- a/cdn.html
+++ b/cdn.html
@@ -34,20 +34,7 @@
 </head>
 <body>
 
-    <!-- Header -->
-    <header class="site-header">
-        <nav class="nav-container">
-            <a href="/" class="nav-logo"><i class="fa-brands fa-apple"></i>Daniel Morrisey<i>.com</i></a>
-            <ul class="nav-menu">
-                <li><a href="/index.html#projects">Projects</a></li>
-                <li><a href="/index.html#photos">Photos</a></li>
-                <li><a href="/cdn.html">CDN</a></li>
-                <li><a href="/imrs.html">IMRS</a></li>
-                <li><a href="https://madebydanny.uk">Blog</a></li>
-                <li><a href="https://bsky.app/profile/danielmorrisey.com" target="_blank" aria-label="Visit my Bluesky Profile"><i class="fa-brands fa-bluesky" aria-hidden="true"></i></a></li>
-            </ul>
-        </nav>
-    </header>
+    <!-- Header injected by /js/header.js -->
 
     <main class="main-content">
 
@@ -319,6 +306,7 @@ Content-Length: [file-size]
     </main>
 
     <!-- Scripts -->
+    <script src="/js/header.js"></script>
     <script src="/js/cdn.js"></script>
     <script src="/js/footer.js"></script>
 </body>
diff --git a/css/cdn.css b/css/cdn.css
index 6680442..6b8db74 100644
--- a/css/cdn.css
+++ b/css/cdn.css
@@ -102,6 +102,65 @@ code {
 }
 .nav-menu a:hover { color: var(--text); opacity: 1; }
 
+.nav-dropdown {
+    position: relative;
+}
+.nav-dropdown details {
+    position: relative;
+}
+.nav-dropdown summary {
+    list-style: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    letter-spacing: 0.01em;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+.nav-dropdown summary::-webkit-details-marker { display: none; }
+.nav-dropdown summary:hover,
+.nav-dropdown details[open] summary {
+    color: var(--text);
+}
+.nav-dropdown .dropdown-menu {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 0.5rem);
+    min-width: 220px;
+    margin: 0;
+    padding: 0.5rem 0;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
+    list-style: none;
+    z-index: 200;
+    display: none;
+}
+.nav-dropdown details[open] .dropdown-menu { display: block; }
+.nav-dropdown .dropdown-menu li { white-space: nowrap; }
+.nav-dropdown .dropdown-menu a,
+.nav-dropdown .dropdown-disabled {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+.nav-dropdown .dropdown-menu a:hover {
+    background: rgba(255,255,255,0.04);
+    color: var(--text);
+}
+.nav-dropdown .dropdown-disabled { cursor: default; color: var(--text-dim); }
+.nav-dropdown summary:focus { outline: none; }
+@media (max-width: 600px) {
+    .nav-dropdown .dropdown-menu {
+        position: static;
+        box-shadow: none;
+        border: none;
+    }
+}
+
 /* ── Main ── */
 
 .main-content {
diff --git a/css/favfinder.css b/css/favfinder.css
index 5737451..ae3fc4e 100644
--- a/css/favfinder.css
+++ b/css/favfinder.css
@@ -100,6 +100,65 @@ code {
 }
 .nav-menu a:hover { color: var(--text); opacity: 1; }
 
+.nav-dropdown {
+    position: relative;
+}
+.nav-dropdown details {
+    position: relative;
+}
+.nav-dropdown summary {
+    list-style: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    letter-spacing: 0.01em;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+.nav-dropdown summary::-webkit-details-marker { display: none; }
+.nav-dropdown summary:hover,
+.nav-dropdown details[open] summary {
+    color: var(--text);
+}
+.nav-dropdown .dropdown-menu {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 0.5rem);
+    min-width: 220px;
+    margin: 0;
+    padding: 0.5rem 0;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
+    list-style: none;
+    z-index: 200;
+    display: none;
+}
+.nav-dropdown details[open] .dropdown-menu { display: block; }
+.nav-dropdown .dropdown-menu li { white-space: nowrap; }
+.nav-dropdown .dropdown-menu a,
+.nav-dropdown .dropdown-disabled {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+.nav-dropdown .dropdown-menu a:hover {
+    background: rgba(255,255,255,0.04);
+    color: var(--text);
+}
+.nav-dropdown .dropdown-disabled { cursor: default; color: var(--text-dim); }
+.nav-dropdown summary:focus { outline: none; }
+@media (max-width: 600px) {
+    .nav-dropdown .dropdown-menu {
+        position: static;
+        box-shadow: none;
+        border: none;
+    }
+}
+
 /* ── Main ── */
 
 .main-content {
diff --git a/css/imrs.css b/css/imrs.css
index bde5553..340d53e 100644
--- a/css/imrs.css
+++ b/css/imrs.css
@@ -100,6 +100,65 @@ code {
 }
 .nav-menu a:hover { color: var(--text); opacity: 1; }
 
+.nav-dropdown {
+    position: relative;
+}
+.nav-dropdown details {
+    position: relative;
+}
+.nav-dropdown summary {
+    list-style: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    letter-spacing: 0.01em;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+.nav-dropdown summary::-webkit-details-marker { display: none; }
+.nav-dropdown summary:hover,
+.nav-dropdown details[open] summary {
+    color: var(--text);
+}
+.nav-dropdown .dropdown-menu {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 0.5rem);
+    min-width: 220px;
+    margin: 0;
+    padding: 0.5rem 0;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
+    list-style: none;
+    z-index: 200;
+    display: none;
+}
+.nav-dropdown details[open] .dropdown-menu { display: block; }
+.nav-dropdown .dropdown-menu li { white-space: nowrap; }
+.nav-dropdown .dropdown-menu a,
+.nav-dropdown .dropdown-disabled {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+.nav-dropdown .dropdown-menu a:hover {
+    background: rgba(255,255,255,0.04);
+    color: var(--text);
+}
+.nav-dropdown .dropdown-disabled { cursor: default; color: var(--text-dim); }
+.nav-dropdown summary:focus { outline: none; }
+@media (max-width: 600px) {
+    .nav-dropdown .dropdown-menu {
+        position: static;
+        box-shadow: none;
+        border: none;
+    }
+}
+
 /* ── Main ── */
 
 .main-content {
diff --git a/css/index.css b/css/index.css
index b21e881..5b806d9 100644
--- a/css/index.css
+++ b/css/index.css
@@ -96,6 +96,65 @@ code {
 }
 .nav-menu a:hover { color: var(--text); opacity: 1; }
 
+.nav-dropdown {
+    position: relative;
+}
+.nav-dropdown details {
+    position: relative;
+}
+.nav-dropdown summary {
+    list-style: none;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    letter-spacing: 0.01em;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+.nav-dropdown summary::-webkit-details-marker { display: none; }
+.nav-dropdown summary:hover,
+.nav-dropdown details[open] summary {
+    color: var(--text);
+}
+.nav-dropdown .dropdown-menu {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 0.5rem);
+    min-width: 220px;
+    margin: 0;
+    padding: 0.5rem 0;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
+    list-style: none;
+    z-index: 200;
+    display: none;
+}
+.nav-dropdown details[open] .dropdown-menu { display: block; }
+.nav-dropdown .dropdown-menu li { white-space: nowrap; }
+.nav-dropdown .dropdown-menu a,
+.nav-dropdown .dropdown-disabled {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+}
+.nav-dropdown .dropdown-menu a:hover {
+    background: rgba(255,255,255,0.04);
+    color: var(--text);
+}
+.nav-dropdown .dropdown-disabled { cursor: default; color: var(--text-dim); }
+.nav-dropdown summary:focus { outline: none; }
+@media (max-width: 600px) {
+    .nav-dropdown .dropdown-menu {
+        position: static;
+        box-shadow: none;
+        border: none;
+    }
+}
+
 /* ── Main ── */
 
 .main-content {
diff --git a/imrs.html b/imrs.html
index 55749f5..8b2e830 100644
--- a/imrs.html
+++ b/imrs.html
@@ -32,20 +32,7 @@
 
 <body>
 
-    <!-- Header -->
-    <header class="site-header">
-        <nav class="nav-container">
-            <a href="/" class="nav-logo"><i class="fa-brands fa-apple"></i>Daniel Morrisey<i>.com</i></a>
-            <ul class="nav-menu">
-                <li><a href="/index.html#projects">Projects</a></li>
-                <li><a href="/index.html#photos">Photos</a></li>
-                <li><a href="/cdn.html">CDN</a></li>
-                <li><a href="/imrs.html">IMRS</a></li>
-                <li><a href="https://madebydanny.uk">Blog</a></li>
-                <li><a href="https://bsky.app/profile/danielmorrisey.com" target="_blank" aria-label="Visit my Bluesky Profile"><i class="fa-brands fa-bluesky" aria-hidden="true"></i></a></li>
-            </ul>
-        </nav>
-    </header>
+    <!-- Header injected by /js/header.js -->
 
     <main class="main-content">
 
@@ -149,6 +136,7 @@ IMRS, or Image Media Reduction System, is a simple tool that runs a Cloudflare W
     </main>
 
     <!-- SCRIPTS-->
+    <script src="/js/header.js"></script>
     <script src="/js/imrs.js" defer></script>
     <script src="/js/footer.js"></script>
 </body>
diff --git a/index.html b/index.html
index 142cdc4..e71724b 100644
--- a/index.html
+++ b/index.html
@@ -46,20 +46,7 @@
 
 <body>
 
-    <!-- Header -->
-    <header class="site-header">
-        <nav class="nav-container">
-            <a href="/" class="nav-logo"><i class="fa-brands fa-apple"></i>Daniel Morrisey<i>.com</i></a>
-            <ul class="nav-menu">
-                <li><a href="#projects">Projects</a></li>
-                <li><a href="#photos">Photos</a></li>
-                <li><a href="/cdn.html">CDN</a></li>
-                <li><a href="/imrs.html">IMRS</a></li>
-                <li><a href="https://madebydanny.uk">Blog</a></li>
-                <li><a href="https://bsky.app/profile/danielmorrisey.com" target="_blank" aria-label="Visit my Bluesky Profile"><i class="fa-brands fa-bluesky" aria-hidden="true"></i></a></li>
-            </ul>
-        </nav>
-    </header>
+    <!-- Header injected by /js/header.js -->
 
     <main class="main-content">
 
@@ -205,6 +192,7 @@
     </div>
 
     <!-- SCRIPTS-->
+    <script src="/js/header.js"></script>
     <script src="/js/index.js"></script>
     <script src="/js/footer.js"></script>
 </body>
diff --git a/js/header.js b/js/header.js
new file mode 100644
index 0000000..4b8a766
--- /dev/null
+++ b/js/header.js
@@ -0,0 +1,31 @@
+const headerHtml = `
+<header class="site-header">
+    <nav class="nav-container">
+        <a href="/" class="nav-logo"><i class="fa-brands fa-apple"></i>Daniel Morrisey<i>.com</i></a>
+        <ul class="nav-menu">
+            <li class="nav-dropdown">
+                <details>
+                    <summary>Projects <span aria-hidden="true">▾</span></summary>
+                    <ul class="dropdown-menu">
+                        <li><a href="/index.html#projects">All Projects</a></li>
+                        <li><a href="/cdn.html">MBD CDN</a></li>
+                        <li><a href="/imrs.html">IMRS</a></li>
+                        <li><a href="/testing/favfinder.html">Favfinder</a></li>
+                        <li><span class="dropdown-disabled">Luna (soon™)</span></li>
+                        <li><span class="dropdown-disabled">mbdio.uk (in development)</span></li>
+                        <li><span class="dropdown-disabled">Speedtest (planned)</span></li>
+                        <li><span class="dropdown-disabled">Tangled Knot (planned)</span></li>
+                    </ul>
+                </details>
+            </li>
+            <li><a href="/index.html#photos">Photos</a></li>
+            <li><a href="/cdn.html">CDN</a></li>
+            <li><a href="/imrs.html">IMRS</a></li>
+            <li><a href="https://madebydanny.uk">Blog</a></li>
+            <li><a href="https://bsky.app/profile/danielmorrisey.com" target="_blank" aria-label="Visit my Bluesky Profile"><i class="fa-brands fa-bluesky" aria-hidden="true"></i></a></li>
+        </ul>
+    </nav>
+</header>
+`;
+
+document.body.insertAdjacentHTML('afterbegin', headerHtml);
diff --git a/testing/favfinder.html b/testing/favfinder.html
index 52132fe..151d762 100644
--- a/testing/favfinder.html
+++ b/testing/favfinder.html
@@ -31,20 +31,7 @@
 
 <body>
 
-    <!-- Header -->
-    <header class="site-header">
-        <nav class="nav-container">
-            <a href="/" class="nav-logo"><i class="fa-brands fa-apple"></i>Daniel Morrisey<i>.com</i></a>
-            <ul class="nav-menu">
-                <li><a href="#projects">Projects</a></li>
-                <li><a href="#photos">Photos</a></li>
-                <li><a href="/cdn.html">CDN</a></li>
-                <li><a href="/imrs.html">IMRS</a></li>
-                <li><a href="https://madebydanny.uk">Blog</a></li>
-                <li><a href="https://danielmorrisey.com/profile/danielmorrisey.com" target="_blank" aria-label="Visit my Bluesky Profile"><i class="fa-brands fa-bluesky" aria-hidden="true"></i></a></li>
-            </ul>
-        </nav>
-    </header>
+    <!-- Header injected by /js/header.js -->
 
     <main class="main-content">
 
@@ -200,6 +187,7 @@
     </main>
 
     <!-- Footer injected by footer.js -->
+    <script src="/js/header.js"></script>
     <script src="/js/footer.js"></script>
     <script src="/js/favfinder.js"></script>
 </body>