diff --git a/src/components/blog/BlogPostList.astro b/src/components/blog/BlogPostList.astro
new file mode 100644
index 0000000..17932be
--- /dev/null
+++ b/src/components/blog/BlogPostList.astro
@@ -0,0 +1,32 @@
+---
+type Post = {
+    frontmatter: {
+        title: string;
+        description: string;
+        author: string;
+        date: string;
+    };
+    url: string;
+};
+import PostHero from "./PostHero.astro";
+const posts: Post[] = Object.values(
+    await import.meta.glob("../../pages/blog/posts/*.md", { eager: true }),
+);
+---
+
+<div class="w-full h-full p-5">
+    <h1 class="text-6xl">Posts</h1>
+    <ul class="flex flex-col items-center">
+        {
+            posts.map((post: Post) => (
+                <PostHero
+                    title={post.frontmatter.title}
+                    description={post.frontmatter.description}
+                    author={post.frontmatter.author}
+                    date={post.frontmatter.date}
+                    link={post.url}
+                />
+            ))
+        }
+    </ul>
+</div>
diff --git a/src/components/blog/PostHero.astro b/src/components/blog/PostHero.astro
new file mode 100644
index 0000000..724568e
--- /dev/null
+++ b/src/components/blog/PostHero.astro
@@ -0,0 +1,21 @@
+---
+interface Props {
+    title: string;
+    description: string;
+    author: string;
+    date: string;
+    link: string;
+}
+const { title, description, author, date, link } = Astro.props;
+---
+
+<a
+    class="lg:w-3/4 lg:h-48 text-white p-5 mt-5 border border-white block rounded-xl"
+    href={link}
+    rel="no-referral"
+>
+    <h1 class="text-5xl">{title}</h1>
+    <h2>{description}</h2>
+    <h3>{author}</h3>
+    <h3>{date}</h3>
+</a>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
deleted file mode 100644
index 6e7c6af..0000000
--- a/src/pages/blog.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
-import Layout from "../layouts/Layout.astro";
-import Navbar from "../components/Navbar.astro";
----
-
-<Layout title="Blog">
-    <Navbar />
-    <h1>Blog Page</h1>
-</Layout>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..355f81f
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import Navbar from "../../components/Navbar.astro";
+import BlogPostList from "../../components/blog/BlogPostList.astro";
+---
+
+<Layout title="Blog">
+    <Navbar />
+    <BlogPostList />
+</Layout>
diff --git a/src/pages/blog/posts/test.md b/src/pages/blog/posts/test.md
new file mode 100644
index 0000000..0cdec44
--- /dev/null
+++ b/src/pages/blog/posts/test.md
@@ -0,0 +1,16 @@
+---
+title: "Title"
+description: "Example of Format for blog posts"
+author: "deej-tsn"
+date: "8th Dec"
+---
+
+# Testing
+
+## header 1
+
+content part 1
+
+## header 2
+
+content part 2