diff --git a/content-collections.ts b/content-collections.ts
new file mode 100644
index 0000000..5deee57
--- /dev/null
+++ b/content-collections.ts
@@ -0,0 +1,33 @@
+import { z } from "zod";
+
+// Content Collections:
+import { compileMarkdown } from "@content-collections/markdown";
+import { defineCollection, defineConfig } from "@content-collections/core";
+
+// Shiki:
+import rehypeShiki from "@shikijs/rehype/core";
+import { shikiHighlighter, rehypeShikiOptions } from "./src/utils/shiki";
+
+const docs = defineCollection({
+  name: "docs",
+  directory: "src/docs",
+  include: "**/*.md",
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+  }),
+  transform: async (document, context) => {
+    const highlighter = await shikiHighlighter();
+    const html = await compileMarkdown(context, document, {
+      rehypePlugins: [[rehypeShiki, highlighter, rehypeShikiOptions]],
+    });
+    return {
+      ...document,
+      html,
+    };
+  },
+});
+
+export default defineConfig({
+  collections: [docs],
+});
diff --git a/src/routes/docs/[...slug]/+page.svelte b/src/routes/docs/[...slug]/+page.svelte
new file mode 100644
index 0000000..e2d8598
--- /dev/null
+++ b/src/routes/docs/[...slug]/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { PageProps } from "./$types";
+
+  import PageCard from "@/components/pageCard.svelte";
+  import PageHeader from "@/components/pageHeader.svelte";
+
+  import Container from "@/components/container.svelte";
+  import FileText from "@lucide/svelte/icons/file-text";
+
+  let { data }: PageProps = $props();
+  const document = $derived(data.document);
+</script>
+
+<svelte:head>
+  <title>{data.document.title} - Svgl</title>
+  <meta name="description" content={data.document.description} />
+</svelte:head>
+
+<PageCard>
+  <PageHeader>
+    <div
+      class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"
+    >
+      <FileText size={18} strokeWidth={1.5} />
+      <p>
+        {document.title}
+      </p>
+    </div>
+  </PageHeader>
+  <Container className="my-6">
+    <article>{@html document.html}</article>
+  </Container>
+</PageCard>
diff --git a/src/routes/docs/[...slug]/+page.ts b/src/routes/docs/[...slug]/+page.ts
new file mode 100644
index 0000000..e6e5bdb
--- /dev/null
+++ b/src/routes/docs/[...slug]/+page.ts
@@ -0,0 +1,14 @@
+import type { PageLoad } from "./$types";
+
+import { error } from "@sveltejs/kit";
+import { allDocs } from "content-collections";
+
+export const load: PageLoad = async ({ params }) => {
+  const document = allDocs.find((doc) => doc._meta.path == params.slug);
+  if (!document) {
+    error(404, `Could not find ${params.slug}`);
+  }
+  return {
+    document,
+  };
+};
diff --git a/svelte.config.js b/svelte.config.js
index aba205b..49c7896 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,16 +1,16 @@
-import { mdsvex } from "mdsvex";
 import adapter from "@sveltejs/adapter-auto";
 import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   extensions: [".svelte", ".svx"],
-  preprocess: [vitePreprocess(), mdsvex()],
+  preprocess: [vitePreprocess()],
   kit: {
     adapter: adapter(),
     alias: {
       "@/*": "./src/*",
       "@/lib/*": "./src/lib/*",
+      "content-collections": "./.content-collections/generated",
     },
   },
 };
diff --git a/vite.config.ts b/vite.config.ts
index 8668317..512252d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,10 @@
-import tailwindcss from "@tailwindcss/vite";
-import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 
+// Plugins:
+import tailwindcss from "@tailwindcss/vite";
+import { sveltekit } from "@sveltejs/kit/vite";
+import contentCollections from "@content-collections/vite";
+
 export default defineConfig({
-  plugins: [tailwindcss(), sveltekit()],
+  plugins: [tailwindcss(), sveltekit(), contentCollections()],
 });