diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx
new file mode 100644
index 0000000..06815c7
--- /dev/null
+++ b/app/blog/[...slug]/page.tsx
@@ -0,0 +1,41 @@
+import { posts } from "#site/content";
+import { MDXContent } from "@/components/mdx-components";
+import { notFound } from "next/navigation";
+
+interface PostPageProps {
+  params: {
+    slug: string[];
+  };
+}
+
+async function getPostFromParams(params: PostPageProps["params"]) {
+  const slug = params?.slug?.join("/");
+  const post = posts.find((post) => post.slugAsParams === slug);
+
+  return post;
+}
+
+export async function generateStaticParams(): Promise<
+  PostPageProps["params"][]
+> {
+  return posts.map((post) => ({ slug: post.slugAsParams.split("/") }));
+}
+
+export default async function PostPage({ params }: PostPageProps) {
+  const post = await getPostFromParams(params);
+
+  if (!post || !post.published) {
+    notFound();
+  }
+
+  return (
+    <article className="container py-6 prose dark:prose-invert max-w-3xl mx-auto">
+      <h1 className="mb 2">{post.title}</h1>
+      {post.description ? (
+        <p className="text-xl mt-0 text-muted-foreground">{post.description}</p>
+      ) : null}
+      <hr className="my-4" />
+      <MDXContent code={post.body} />
+    </article>
+  );
+}
diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
new file mode 100644
index 0000000..3f10f1a
--- /dev/null
+++ b/components/mdx-components.tsx
@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as runtime from "react/jsx-runtime";
+
+const useMDXComponent = (code: string) => {
+  const fn = new Function(code);
+  return fn({ ...runtime }).default;
+};
+
+const components = {
+  Image,
+};
+
+interface MdxProps {
+  code: string;
+}
+
+export function MDXContent({ code }: MdxProps) {
+  const Component = useMDXComponent(code);
+  return <Component components={components} />;
+}
diff --git a/package-lock.json b/package-lock.json
index d35e5dc..56a96e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.13",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -1986,6 +1987,36 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
+      "integrity": "sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
@@ -5381,6 +5412,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/package.json b/package.json
index 327bf47..de89d17 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 60582e9..f93eaa2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -78,8 +78,7 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 } satisfies Config;
 
 export default config;
-