diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
index ef75df1..10c2354 100644
--- a/src/components/BlogPost.astro
+++ b/src/components/BlogPost.astro
@@ -1,8 +1,9 @@
 ---
-const { title, url, minutesRead, pubDate } = Astro.props
+const { title, url, pubDate, renderPromise } = Astro.props
+const { remarkPluginFrontmatter } = await renderPromise
 ---
 
 <li>
 	<a href={url}>{title}</a> <br />
-	Approximately {minutesRead}, published {pubDate.toISOString().slice(0,10)}
+	Approximately {remarkPluginFrontmatter.minutesRead}, published {pubDate.toISOString().slice(0,10)}
 </li>
\ No newline at end of file
diff --git a/src/content/config.ts b/src/content/config.ts
index b85f37b..6142628 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -7,7 +7,7 @@ const blogCollection = defineCollection({
 		pubDate: z.date(),
 		description: z.string(),
 		author: z.string(),
-		minutesRead: z.string()
+		minutesRead: z.string().optional()
 	})
 })
 
diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
index 4f0c7fd..e65c6c5 100644
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -1,13 +1,13 @@
 ---
 import Layout from "./Layout.astro"
-const { frontmatter } = Astro.props
+const { frontmatter, remarkPluginFrontmatter } = Astro.props
 ---
 <Layout title={frontmatter.title}>
 	<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.toISOString().slice(0,10)}</p>
-		<p>Approximately {frontmatter.minutesRead}</p>
+		<p>Approximately {remarkPluginFrontmatter.minutesRead}</p>
 		<slot />
 	</main>
 </Layout>
\ No newline at end of file
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index e64b17f..a26eb2e 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -9,7 +9,7 @@ const pageTitle = "bitbloxhub's blog"
 	<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={`/posts/${post.slug}/`} title={post.data.title} minutesRead={post.data.minutesRead} pubDate={post.data.pubDate} />)}
-		</ul>
+			{allPosts.map((post) => <BlogPost url={`/posts/${post.slug}/`} title={post.data.title} pubDate={post.data.pubDate} renderPromise={post.render()} />)}
+		</ul> 
 	</main>
 </Layout>
\ No newline at end of file
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 99ace50..fc76031 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -10,8 +10,8 @@ export async function getStaticPaths() {
 }
 // 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()
+const { Content, remarkPluginFrontmatter } = await entry.render()
 ---
-<MarkdownPostLayout frontmatter={entry.data}>
+<MarkdownPostLayout frontmatter={entry.data} remarkPluginFrontmatter={remarkPluginFrontmatter}>
 	<Content />
 </MarkdownPostLayout>
\ No newline at end of file