diff --git a/app/api/index.mjs b/app/api/index.mjs
index 1f4513d0..c2fd1954 100644
--- a/app/api/index.mjs
+++ b/app/api/index.mjs
@@ -1,3 +1,5 @@
+import navDataLoader from '../docs/nav-data.mjs'
+
 /** @type {import('@enhance/types').EnhanceApiFn} */
 export async function get({ query }) {
   const { thanks } = query
@@ -7,12 +9,15 @@ export async function get({ query }) {
       ? 'max-age=86400'
       : 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
 
+  const navData = navDataLoader('docs', '/index')
+
   return {
     headers: {
       'cache-control': cacheControl,
     },
     json: {
       thanks,
+      navData,
     },
   }
 }
diff --git a/app/api/why-enhance.mjs b/app/api/why-enhance.mjs
new file mode 100644
index 00000000..74a94b65
--- /dev/null
+++ b/app/api/why-enhance.mjs
@@ -0,0 +1,11 @@
+import navDataLoader from '../docs/nav-data.mjs'
+
+export async function get() {
+  const navData = navDataLoader('docs', '/why-enhance')
+
+  return {
+    json: {
+      navData,
+    },
+  }
+}
diff --git a/app/elements/marketing-nav.mjs b/app/elements/product-nav.mjs
similarity index 83%
rename from app/elements/marketing-nav.mjs
rename to app/elements/product-nav.mjs
index c61a5ce0..59b42067 100644
--- a/app/elements/marketing-nav.mjs
+++ b/app/elements/product-nav.mjs
@@ -1,4 +1,4 @@
-export default function MarketingNav({ html }) {
+export default function ProductNav({ html }) {
   return html`
     <masthead-slice>
       <h2 class="semibold">
@@ -14,6 +14,7 @@ export default function MarketingNav({ html }) {
       <h2 class="semibold">
         <a href="/docs">Docs</a>
       </h2>
+      <docs-nav></docs-nav>
     </masthead-slice>
   `
 }
diff --git a/app/pages/docs/$$.html b/app/pages/docs/$$.html
index 4a8c3b64..cee94f29 100644
--- a/app/pages/docs/$$.html
+++ b/app/pages/docs/$$.html
@@ -21,24 +21,7 @@
 
 <begin-masthead product="Enhance" active="products" breakpoint="56em">
   <span slot="product-page">Docs</span>
-  <div slot="product-nav">
-    <masthead-slice>
-      <h2 class="semibold">
-        <a href="/">Home</a>
-      </h2>
-    </masthead-slice>
-    <masthead-slice>
-      <h2 class="semibold">
-        <a href="/docs">Why Enhance</a>
-      </h2>
-    </masthead-slice>
-    <masthead-slice>
-      <h2 class="semibold">
-        Docs
-      </h2>
-      <docs-nav></docs-nav>
-    </masthead-slice>
-  </div>
+  <product-nav slot="product-nav"></product-nav>
   <div slot="product-nav-lg" class="flex align-items-center">
     <masthead-product-link href="/">Home</masthead-product-link>
     <masthead-product-link href="/docs" active>Docs</masthead-product-link>
diff --git a/app/pages/index.html b/app/pages/index.html
index 6f747a2f..8eb52e44 100644
--- a/app/pages/index.html
+++ b/app/pages/index.html
@@ -116,7 +116,7 @@
 
 <begin-masthead product="Enhance" active="products" breakpoint="56em">
   <span slot="product-page">Home</span>
-  <marketing-nav slot="product-nav"></marketing-nav>
+  <product-nav slot="product-nav"></product-nav>
   <div slot="product-nav-lg" class="flex align-items-center">
     <masthead-product-link active href="/">Home</masthead-product-link>
     <masthead-product-link href="/docs">Docs</masthead-product-link>
diff --git a/app/pages/why-enhance.html b/app/pages/why-enhance.html
index c1d5210d..9c689b1f 100644
--- a/app/pages/why-enhance.html
+++ b/app/pages/why-enhance.html
@@ -53,7 +53,7 @@
 
 <begin-masthead product="Enhance" active="products" breakpoint="56em">
   <span slot="product-page">Why Enhance?</span>
-  <marketing-nav slot="product-nav"></marketing-nav>
+  <product-nav slot="product-nav"></product-nav>
   <div slot="product-nav-lg" class="flex align-items-center">
     <masthead-product-link href="/">Home</masthead-product-link>
     <masthead-product-link href="/docs">Docs</masthead-product-link>
diff --git a/public/css/docs-colors.css b/public/css/docs-colors.css
index be96b203..5ed0c87b 100644
--- a/public/css/docs-colors.css
+++ b/public/css/docs-colors.css
@@ -1,7 +1,7 @@
 /* Light Theme */
 :root,
 :root[data-force-theme='light'] {
-  --grey-greyer: var(--grey-100);
+  --grey-greyer: var(--gray-100);
 
   --cloud-ateneo: var(--cloud);
   --denim-white: var(--denim);
@@ -27,7 +27,7 @@
 
 /* Dark Theme */
 :root[data-force-theme='dark'] {
-  --grey-greyer: var(--grey-600);
+  --grey-greyer: var(--gray-600);
 
   --cloud-ateneo: var(--ateneo);
   --denim-white: var(--white);
@@ -55,7 +55,7 @@
 /* This should be a copy of the above block */
 @media (prefers-color-scheme: dark) {
   :root {
-    --grey-greyer: var(--grey-600);
+    --grey-greyer: var(--gray-600);
 
     --cloud-ateneo: var(--ateneo);
     --denim-white: var(--white);