diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
new file mode 100644
index 0000000..3768d9d
--- /dev/null
+++ b/src/layouts/BlogPostLayout.astro
@@ -0,0 +1,7 @@
+---
+const { frontmatter } = Astro.props
+---
+<h1>{frontmatter.title}</h1>
+<p>Published on: {frontmatter.pubDate.toString()}</p>
+<p>written by {frontmatter.author}</p>
+<slot/>
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
index d4480bf..e980348 100644
--- a/src/pages/posts/post-1.md
+++ b/src/pages/posts/post-1.md
@@ -1,7 +1,8 @@
 ---
+layout: "../../layouts/BlogPostLayout.astro"
 title: My first blog post
 description: This is my first blog post
-date: 2024-12-30
+pubDate: 2024-12-30
 author: Ruidy
 image:
   url: "https://docs.astro.build/assets/rose.webp"
@@ -11,10 +12,6 @@ tags:
   - blog
 ---
 
-# 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.
 
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
index 8309c9e..6ee6791 100644
--- a/src/pages/posts/post-2.md
+++ b/src/pages/posts/post-2.md
@@ -1,4 +1,5 @@
 ---
+layout: "../../layouts/BlogPostLayout.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 1e7eddf..cff659e 100644
--- a/src/pages/posts/post-3.md
+++ b/src/pages/posts/post-3.md
@@ -1,4 +1,5 @@
 ---
+layout: "../../layouts/BlogPostLayout.astro"
 title: My Third Blog Post
 author: Astro Learner
 description: "I had some challenges, but asking in the community really helped!"