diff --git a/astro.config.ts b/astro.config.ts
index 535d681..f86c114 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -48,6 +48,7 @@ export default defineConfig({
     resolve: {
       alias: {
         "~": resolve(__dirname, "./src"),
+        "@docs": resolve(__dirname, "./docs"),
         "@pages": resolve(__dirname, "./src/pages"),
         "@assets": resolve(__dirname, "./src/assets"),
         "@scripts": resolve(__dirname, "./src/scripts"),
diff --git a/src/pages/docs/discord-experiments-api/experiments.md b/docs/discord-experiments-api/experiments.md
similarity index 99%
rename from src/pages/docs/discord-experiments-api/experiments.md
rename to docs/discord-experiments-api/experiments.md
index 662b393..ebc7304 100644
--- a/src/pages/docs/discord-experiments-api/experiments.md
+++ b/docs/discord-experiments-api/experiments.md
@@ -1,7 +1,6 @@
 ---
 title: Experiments
 description: How to fetch experiments from the API
-layout: ../../../layouts/docs/ItemLayout.astro
 ---
 
 # Experiments
diff --git a/src/pages/docs/discord-experiments-api/introduction.md b/docs/discord-experiments-api/introduction.md
similarity index 96%
rename from src/pages/docs/discord-experiments-api/introduction.md
rename to docs/discord-experiments-api/introduction.md
index 4976ac4..7bbbd87 100644
--- a/src/pages/docs/discord-experiments-api/introduction.md
+++ b/docs/discord-experiments-api/introduction.md
@@ -1,7 +1,6 @@
 ---
 title: Introduction
 description: Introduction to the Discord Experiments API
-layout: ../../../layouts/docs/ItemLayout.astro
 ---
 
 # Introduction
diff --git a/src/components/widgets/docs/LeftSidebar.astro b/src/components/widgets/docs/LeftSidebar.astro
index 5f783ca..63a575f 100644
--- a/src/components/widgets/docs/LeftSidebar.astro
+++ b/src/components/widgets/docs/LeftSidebar.astro
@@ -34,7 +34,6 @@ const getLinkClasses = (link: Sidebar) => {
       />
     </button>
   </div>
-  <!--<nav aria-labelledby="grid-left" class="w-64 border-r p-4">-->
   <nav
     id="sidebar"
     aria-labelledby="grid-left"
diff --git a/src/components/widgets/docs/RightSidebar.astro b/src/components/widgets/docs/RightSidebar.astro
index 8d0952d..7b5baad 100644
--- a/src/components/widgets/docs/RightSidebar.astro
+++ b/src/components/widgets/docs/RightSidebar.astro
@@ -1,13 +1,15 @@
 ---
 import TableOfContents from "./TableOfContents.astro";
 const { item } = Astro.props;
+
+const headings = item.getHeadings();
 ---
 
 {
-  item.headings.length > 1 && (
+  headings.length > 1 && (
     <nav aria-labelledby="grid-right" class="invisible md:visible">
       <div class="px-8">
-        <TableOfContents headings={item.headings} />
+        <TableOfContents headings={headings} />
       </div>
     </nav>
   )
diff --git a/src/layouts/docs/ItemLayout.astro b/src/layouts/docs/ItemLayout.astro
index 1b2a32a..3d10985 100644
--- a/src/layouts/docs/ItemLayout.astro
+++ b/src/layouts/docs/ItemLayout.astro
@@ -4,13 +4,13 @@ import RightSidebar from "@components/widgets/docs/RightSidebar.astro";
 import Navbar from "@components/widgets/Navbar.astro";
 import Layout from "@layouts/Layout.astro";
 
-const item = Astro.props;
+const { item } = Astro.props;
 const currentPage = new URL(Astro.request.url).pathname;
 ---
 
 <Layout
-  title={`Docs - ${item.content.title}`}
-  description={item.content.description}
+  title={`Docs - ${item.frontmatter.title}`}
+  description={item.frontmatter.description}
   url={`https://xhyrom.dev${item.url}`}
 >
   <Navbar />
diff --git a/src/pages/docs/[category]/[id].astro b/src/pages/docs/[category]/[id].astro
new file mode 100644
index 0000000..379b09e
--- /dev/null
+++ b/src/pages/docs/[category]/[id].astro
@@ -0,0 +1,29 @@
+---
+import ItemLayout from "@layouts/docs/ItemLayout.astro";
+
+export async function getStaticPaths() {
+  const docs = await Astro.glob("@docs/**/*.md");
+
+  return docs.map((doc) => {
+    const path = doc.file.split("/docs/")[1];
+    const [categoryId, docId] = path.split("/");
+
+    return {
+      params: {
+        category: categoryId,
+        id: docId.replace(".md", ""),
+      },
+      props: {
+        ...doc,
+        url: `/docs/${categoryId}/${docId.replace(".md", "")}`,
+      },
+    };
+  });
+}
+
+const item = Astro.props;
+---
+
+<ItemLayout item={item}>
+  <div set:html={item.compiledContent()} />
+</ItemLayout>
diff --git a/tsconfig.json b/tsconfig.json
index f736931..d72ca87 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "paths": {
       "~/*": ["src/*"],
+      "@docs/*": ["docs/*"],
       "@pages/*": ["src/pages/*"],
       "@assets/*": ["src/assets"],
       "@scripts/*": ["src/scripts"],