diff --git a/src/components/Content/Prose.astro b/src/components/Content/Prose.astro
new file mode 100644
index 0000000..a4cc033
--- /dev/null
+++ b/src/components/Content/Prose.astro
@@ -0,0 +1,9 @@
+---
+
+---
+
+<div
+    class="prose dark:prose-invert prose-h1:font-bold prose-h1:text-xl prose-a:text-glw-blue prose-p:text-justify prose-img:rounded-xl prose-headings:underline"
+>
+    <slot />
+</div>
diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 0000000..9182a08
--- /dev/null
+++ b/src/content.config.ts
@@ -0,0 +1,17 @@
+import { defineCollection } from "astro:content";
+
+import { glob } from "astro/loaders";
+
+import { z } from "astro/zod";
+
+const blog = defineCollection({
+    loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
+    schema: z.object({
+        title: z.string()
+        // description: z.string(),
+        // pubDate: z.coerce.date(),
+        // updatedDate: z.coerce.date().optional()
+    })
+});
+
+export const collections = { blog };
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
deleted file mode 100644
index e1df38a..0000000
--- a/src/pages/blog.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-import BaseLayout from "../layouts/BaseLayout.astro";
----
-
-<BaseLayout><div>Blomg</div></BaseLayout>
diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro
new file mode 100644
index 0000000..5e1d6a9
--- /dev/null
+++ b/src/pages/blog/[id].astro
@@ -0,0 +1,25 @@
+---
+import type { GetStaticPaths } from "astro";
+import { render } from "astro:content";
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Prose from "../../components/Content/Prose.astro";
+
+export const getStaticPaths = (async () => {
+    const posts = await getCollection("blog");
+    return posts.map((post) => ({ params: { id: post.id }, props: { post } }));
+}) satisfies GetStaticPaths;
+
+const { post } = Astro.props;
+const { Content } = await render(post);
+---
+
+<BaseLayout>
+    <div
+        class="border-glw-overlay0 flex min-h-screen w-[66vw] flex-col gap-2 border-r border-l border-dashed px-8 py-4"
+    >
+        <Prose>
+            <Content />
+        </Prose>
+    </div>
+</BaseLayout>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..df0e0e5
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,27 @@
+---
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { getCollection } from "astro:content";
+
+const allBlogPosts = await getCollection("blog");
+
+console.log(allBlogPosts);
+---
+
+<BaseLayout>
+    <div
+        class="border-glw-overlay0 flex min-h-screen w-[66vw] flex-col gap-2 border-r border-l border-dashed px-8 py-4"
+    >
+        Blog Entries
+        <ul>
+            {
+                allBlogPosts.map((post) => {
+                    return (
+                        <li>
+                            <a href={`/blog/${post.id}`}>{post.data.title}</a>
+                        </li>
+                    );
+                })
+            }
+        </ul>
+    </div>
+</BaseLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
index 846eb52..5b7ef69 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
     --font-sans: var(--font-hanken-grotesk);