diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2fba78f..9dd3763 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
 	"yaml.schemas": {
 		"https://json.schemastore.org/github-workflow.json": "file:///mnt/wd-blue-2tb/home/jonahgam/bitbloxhub.github.io/.github/workflows/deploy.yaml"
+	},
+	"files.associations": {
+		"*.mdx": "markdown"
 	}
 }
\ No newline at end of file
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
index a745809..ef75df1 100644
--- a/src/components/BlogPost.astro
+++ b/src/components/BlogPost.astro
@@ -4,5 +4,5 @@ const { title, url, minutesRead, pubDate } = Astro.props
 
 <li>
 	<a href={url}>{title}</a> <br />
-	Approximately {minutesRead}, published {pubDate.slice(0,10)}
+	Approximately {minutesRead}, published {pubDate.toISOString().slice(0,10)}
 </li>
\ No newline at end of file
diff --git a/src/pages/posts/first-post.mdx b/src/content/blog/first-post.mdx
similarity index 79%
rename from src/pages/posts/first-post.mdx
rename to src/content/blog/first-post.mdx
index c0a04cc..ccef24e 100644
--- a/src/pages/posts/first-post.mdx
+++ b/src/content/blog/first-post.mdx
@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/MarkdownPostLayout.astro
 title: "I have a new blog!"
 pubDate: 2023-07-22
 description: "This is the first post of my new blog."
diff --git a/src/content/config.ts b/src/content/config.ts
new file mode 100644
index 0000000..b85f37b
--- /dev/null
+++ b/src/content/config.ts
@@ -0,0 +1,16 @@
+import { z, defineCollection } from "astro:content"
+
+const blogCollection = defineCollection({
+	type: "content",
+	schema: z.object({
+		title: z.string(),
+		pubDate: z.date(),
+		description: z.string(),
+		author: z.string(),
+		minutesRead: z.string()
+	})
+})
+
+export const collections = {
+	"blog": blogCollection
+}
\ No newline at end of file
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
index 10a2120..4f0c7fd 100644
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props
 	<main class="m-auto p-6 max-w-6xl text-left">
 		<h1>{frontmatter.title}</h1>
 		<p>Written by {frontmatter.author}</p>
-		<p>Published on {frontmatter.pubDate.slice(0,10)}</p>
+		<p>Published on {frontmatter.pubDate.toISOString().slice(0,10)}</p>
 		<p>Approximately {frontmatter.minutesRead}</p>
 		<slot />
 	</main>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index dc11e7d..e64b17f 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -1,14 +1,15 @@
 ---
+import { getCollection } from "astro:content"
 import Layout from "../layouts/Layout.astro"
 import BlogPost from "../components/BlogPost.astro"
-const allPosts = await Astro.glob("../pages/posts/*.mdx")
+const allPosts = await getCollection("blog")
 const pageTitle = "bitbloxhub's blog"
 ---
 <Layout title={pageTitle}>
 	<main class="m-auto p-6 max-w-6xl text-left">
 		<h1>bitbloxhub's blog!</h1>
 		<ul class="text-base">
-			{allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} minutesRead={post.frontmatter.minutesRead} pubDate={post.frontmatter.pubDate} />)}
+			{allPosts.map((post) => <BlogPost url={`/posts/${post.slug}/`} title={post.data.title} minutesRead={post.data.minutesRead} pubDate={post.data.pubDate} />)}
 		</ul>
 	</main>
 </Layout>
\ No newline at end of file
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
new file mode 100644
index 0000000..99ace50
--- /dev/null
+++ b/src/pages/posts/[...slug].astro
@@ -0,0 +1,17 @@
+---
+import { getCollection } from "astro:content"
+import MarkdownPostLayout from "../../layouts/MarkdownPostLayout.astro"
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+	const blogEntries = await getCollection("blog")
+	return blogEntries.map(entry => ({
+		params: { slug: entry.slug }, props: { entry }
+	}))
+}
+// 2. When it's time to render, you can get the entry directly from the prop
+const { entry } = Astro.props
+const { Content } = await entry.render()
+---
+<MarkdownPostLayout frontmatter={entry.data}>
+	<Content />
+</MarkdownPostLayout>
\ No newline at end of file