diff --git a/src/components/docs/sidebar.astro b/src/components/docs/sidebar.astro
index 3ee59b6..39bf2b7 100644
--- a/src/components/docs/sidebar.astro
+++ b/src/components/docs/sidebar.astro
@@ -6,13 +6,13 @@ import {ArrowDownCircle} from "@iconoir/vue"
 <div class="mobile-docs-dropdown">
     <span onclick="ToggleMDD()">{Project} <ArrowDownCircle/></span>
     <div class="mdd-expandable">
-        <slot name="sidebar-items"/>
+        <slot/>
     </div>
 </div>
 
 <div class="sidebar">
     <div class="sb-docs">
-        <slot name="sidebar-items"/>
+        <slot/>
     </div>
 </div>
 
diff --git a/src/content/config.ts b/src/content/config.ts
new file mode 100644
index 0000000..0ff298c
--- /dev/null
+++ b/src/content/config.ts
@@ -0,0 +1,8 @@
+import { defineCollection, z } from 'astro:content';
+
+const docs = defineCollection({
+	type: 'content',
+	schema: z.object({title: z.string()}),
+});
+
+export const Documents = { docs }
\ No newline at end of file
diff --git a/src/content/minpluto/API.mdx b/src/content/docs/minpluto/API.mdx
similarity index 100%
rename from src/content/minpluto/API.mdx
rename to src/content/docs/minpluto/API.mdx
diff --git a/src/content/minpluto/compatibility.mdx b/src/content/docs/minpluto/compatibility.mdx
similarity index 100%
rename from src/content/minpluto/compatibility.mdx
rename to src/content/docs/minpluto/compatibility.mdx
diff --git a/src/content/minpluto/introduction.mdx b/src/content/docs/minpluto/introduction.mdx
similarity index 100%
rename from src/content/minpluto/introduction.mdx
rename to src/content/docs/minpluto/introduction.mdx
diff --git a/src/content/minpluto/requirements.mdx b/src/content/docs/minpluto/requirements.mdx
similarity index 100%
rename from src/content/minpluto/requirements.mdx
rename to src/content/docs/minpluto/requirements.mdx
diff --git a/src/content/minpluto/self-hosting.mdx b/src/content/docs/minpluto/self-hosting.mdx
similarity index 100%
rename from src/content/minpluto/self-hosting.mdx
rename to src/content/docs/minpluto/self-hosting.mdx
diff --git a/src/content/minpluto/support.mdx b/src/content/docs/minpluto/support.mdx
similarity index 100%
rename from src/content/minpluto/support.mdx
rename to src/content/docs/minpluto/support.mdx
diff --git a/src/content/penpot-desktop/faq.mdx b/src/content/docs/penpot-desktop/faq.mdx
similarity index 100%
rename from src/content/penpot-desktop/faq.mdx
rename to src/content/docs/penpot-desktop/faq.mdx
diff --git a/src/content/penpot-desktop/instance.mdx b/src/content/docs/penpot-desktop/instance.mdx
similarity index 100%
rename from src/content/penpot-desktop/instance.mdx
rename to src/content/docs/penpot-desktop/instance.mdx
diff --git a/src/content/penpot-desktop/introduction.mdx b/src/content/docs/penpot-desktop/introduction.mdx
similarity index 100%
rename from src/content/penpot-desktop/introduction.mdx
rename to src/content/docs/penpot-desktop/introduction.mdx
diff --git a/src/content/penpot-desktop/offline-use.mdx b/src/content/docs/penpot-desktop/offline-use.mdx
similarity index 100%
rename from src/content/penpot-desktop/offline-use.mdx
rename to src/content/docs/penpot-desktop/offline-use.mdx
diff --git a/src/content/penpot-desktop/progress.mdx b/src/content/docs/penpot-desktop/progress.mdx
similarity index 100%
rename from src/content/penpot-desktop/progress.mdx
rename to src/content/docs/penpot-desktop/progress.mdx
diff --git a/src/content/zorn/introduction.mdx b/src/content/docs/zorn/introduction.mdx
similarity index 100%
rename from src/content/zorn/introduction.mdx
rename to src/content/docs/zorn/introduction.mdx
diff --git a/src/layouts/Document.astro b/src/layouts/Document.astro
index 4958a61..72c889f 100644
--- a/src/layouts/Document.astro
+++ b/src/layouts/Document.astro
@@ -9,53 +9,22 @@ import Default from "@layouts/Default.astro";
 
 // Components
 import Sidebar from "@components/docs/sidebar.astro";
-
-// Hightlight Active Project
-if (ProjectCollection === 'minpluto') {
-  var Hightlight_MinPluto = true
-}
-if (ProjectCollection === 'zorn') {
-  var Hightlight_Zorn = true
-}
-if (ProjectCollection === 'penpot-desktop') {
-  var Hightlight_Penpot = true
-}
 ---
 <Default MobileTitle="SudoVanilla Documentation">
     <Fragment slot="sub-header">
       <div>
         <p class="header-sub-service"><span id="show-w-scroll">SudoVanilla</span> Documentations</p>
-        <!-- {EnableSearch ? <a href="#" onclick="ToggleSearchOnclick()"><Search/> Search</a> : null} -->
       </div>
       <div>
-        {Hightlight_MinPluto ?
-          <a style="color: white;" href="/docs/minpluto/introduction/">MinPluto</a>
-          :
-          <a href="/docs/minpluto/introduction/">MinPluto</a>
-        }
-        {Hightlight_Zorn ?
-          <a style="color: white;" href="/docs/zorn/introduction/">Zorn Player</a>
-          :
-          <a href="/docs/zorn/introduction/">Zorn Player</a>
-        }
-        {Hightlight_Penpot ?
-          <a style="color: white;" href="/docs/penpot-desktop/introduction/">Penpot Desktop</a>
-          :
-          <a href="/docs/penpot-desktop/introduction/">Penpot Desktop</a>
-        }
+        <!-- <a href="/docs/minpluto/introduction/">MinPluto</a>
+        <a href="/docs/zorn/introduction/">Zorn Player</a>
+        <a href="/docs/penpot-desktop/introduction/">Penpot Desktop</a> -->
       </div>
     </Fragment>
     <Fragment slot="body">
       <div class="document-layout">
-        <!-- {EnableSearch ?
-            <SearchModal/>
-            :
-            null
-        } -->
-        <Sidebar>
-          <slot slot="sidebar-items"/>
-        </Sidebar>
         <div class="doc-content">
+          <slot slot="content"/>
         </div>
       </div>
     </Fragment>
diff --git a/src/pages/docs/[...slug].astro b/src/pages/docs/[...slug].astro
new file mode 100644
index 0000000..6a80344
--- /dev/null
+++ b/src/pages/docs/[...slug].astro
@@ -0,0 +1,91 @@
+---
+// Icons
+import {ServerConnection,PeaceHand, SlashSquare, ClipboardCheck} from "@iconoir/vue";
+import {ServerConnection,PeaceHand, QuestionMark, WifiOff, DownloadCircle, ShieldAlert, ChatBubble} from "@iconoir/vue";
+
+// Get Colletion and Slug
+import { getCollection, getEntry } from "astro:content";
+import Document from "@layouts/Document.astro"
+
+const { slug } = Astro.params;
+if (!slug) throw new Error("Slug not found");
+const post = await getEntry("docs", slug);
+
+if (!post) throw new Error("No post found for this slug");
+const { Content } = await post.render();
+
+/// Generate static pages
+export async function getStaticPaths() {
+  const posts = await getCollection("docs");
+  return posts.map((post) => ({ params: { slug: post.slug } }));
+}
+export const prerender = true;
+
+// Components
+import Sidebar from "@components/docs/sidebar.astro";
+---
+
+<Document>
+	<div class="document-layout">
+		<Sidebar>
+			<h2>Zorn</h2>
+			<a href="/docs/zorn/introduction/">
+				<PeaceHand/>
+				<p>Introduction </p>
+			</a>
+			<h2>MinPluto</h2>
+			<a href="/docs/minpluto/introduction/">
+				<PeaceHand/>
+				<p>Introduction </p>
+			</a>
+			<a href="/docs/minpluto/compatibility/">
+				<ClipboardCheck />
+				<p>Compatibility</p>
+			</a>
+			<a href="/docs/minpluto/requirements/">
+				<ClipboardCheck />
+				<p>Requirements</p>
+			</a>
+			<a href="/docs/minpluto/self-hosting/">
+				<ServerConnection />
+				<p>Self-Hosting</p>
+			</a>
+			<a href="/docs/minpluto/api/">
+				<SlashSquare />
+				<p>API</p>
+			</a>
+			<h2>Penpot Desktop</h2>
+			<a href="/docs/penpot-desktop/introduction/">
+				<PeaceHand/>
+				<p>Introduction </p>
+			</a>
+			<a href="/docs/penpot-desktop/faq/">
+				<QuestionMark />
+				<p>FAQ</p>
+			</a>
+			<a href="/docs/penpot-desktop/offline-use/">
+				<WifiOff />
+				<p>Offline Use</p>
+			</a>
+			<a href="/docs/penpot-desktop/instance/">
+				<ServerConnection />
+				<p>Instance</p>
+			</a>
+			<a href="/docs/penpot-desktop/progress/">
+				<DownloadCircle />
+				<p>Installation</p>
+			</a>
+			<a href="/docs/penpot-desktop/progress/">
+				<ShieldAlert />
+				<p>Security Policy</p>
+			</a>
+			<a href="/docs/penpot-desktop/progress/">
+				<ChatBubble />
+				<p>Support</p>
+			</a>
+		</Sidebar>
+	  <div class="doc-content">
+		<Content/>
+	  </div>
+	</div>
+</Document>
\ No newline at end of file