diff --git a/src/layouts/MarkdownPostLayout.astro b/src/layouts/MarkdownPostLayout.astro
new file mode 100644
index 0000000..e21659b
--- /dev/null
+++ b/src/layouts/MarkdownPostLayout.astro
@@ -0,0 +1,12 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+const { frontmatter } = Astro.props;
+---
+
+<BaseLayout pageTitle={frontmatter.title}>
+  <p>Published on: {frontmatter.pubDate.toString().slice(0, 10)}</p>
+  <p>Written by {frontmatter.author}</p>
+  <img src={frontmatter.image.url} width='300' alt={frontmatter.image.alt} />
+  <slot />
+</BaseLayout>
+<meta charset='utf-8' />
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
index d5ab08b..01cb0b2 100644
--- a/src/pages/posts/post-1.md
+++ b/src/pages/posts/post-1.md
@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: 'My First Blog Post'
 pubDate: 2022-07-01
 description: 'This is the first post of my new Astro blog.'
@@ -8,10 +9,6 @@ image:
     alt: 'The Astro logo on a dark background with a pink glow.'
 tags: ["astro", "blogging", "learning in public"]
 ---
-# My First Blog Post
-
-Published on: 2022-07-01
-
 Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
 
 ## What I've accomplished
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
index 2c06636..33ca6f5 100644
--- a/src/pages/posts/post-2.md
+++ b/src/pages/posts/post-2.md
@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: My Second Blog Post
 author: Astro Learner
 description: "After learning some Astro, I couldn't stop!"
diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
index 4c8cc5d..c955e17 100644
--- a/src/pages/posts/post-3.md
+++ b/src/pages/posts/post-3.md
@@ -1,4 +1,5 @@
 ---
+layout: ../../layouts/MarkdownPostLayout.astro
 title: My Third Blog Post
 author: Astro Learner
 description: "I had some challenges, but asking in the community really helped!"