diff --git a/src/components/Header/NavItems.svelte b/src/components/Header/NavItems.svelte
index 96e96d87..062b10f0 100644
--- a/src/components/Header/NavItems.svelte
+++ b/src/components/Header/NavItems.svelte
@@ -3,7 +3,7 @@
   export let textColor: string;
   export let section: number;
   export let isDesktop: boolean = true;
-
+  import { base } from '$app/paths';
   let isOnHomePage = $page.url.pathname === '/';
 </script>
 
@@ -14,13 +14,7 @@
   >
 {/if}
 <!-- <a class={`underline-on-hover after:bg-${textColor}`} href="/#">Our Technology.</a> -->
-<a
-  class={`underline-on-hover after:bg-${textColor}`}
-  href="https://docs.frequency.xyz/"
-  target="_blank"
-  rel="noreferrer"
-  role="">Dev Docs.</a
->
+<a class={`underline-on-hover after:bg-${textColor}`} href="{base}/docs" rel="noreferrer" role="">Dev Docs.</a>
 <a
   class={`underline-on-hover after:bg-${textColor}`}
   href="https://medium.com/one-frequency"
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
new file mode 100644
index 00000000..e46f8e2b
--- /dev/null
+++ b/src/routes/docs/+layout.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Header from '../../components/Header/Header.svelte';
+  import Footer from '../../components/Footer.svelte';
+
+  const logoHex = '#5E69FF';
+  const navColor = 'navy';
+</script>
+
+<div class="relative lg:max-w-[100vw] xl:max-w-page">
+  <Header {logoHex} {navColor} />
+  <div class="mt-4 p-3">
+    <slot />
+  </div>
+  <Footer />
+</div>
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
new file mode 100644
index 00000000..42b00557
--- /dev/null
+++ b/src/routes/docs/+page.svelte
@@ -0,0 +1 @@
+<div class="mx-auto flex-grow justify-center px-4 sm:px-6 lg:px-8"></div>