diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 30e8225..9375e45 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -6,14 +6,15 @@ console.log(posts[0].url);
   <head>
     <title>Blog</title>
   </head>
-  <body class="w-full flex justify-center">
-    <div class="w-1/2 flex flex-col">
-      {posts.map((post) => {
-        console.log(post.frontmatter);
-      return (
-        <h1>{post.frontmatter.title}</h1>
-        <a href={post.url}>Read</a>
-      )})}
+  <body class="w-full flex justify-center bg-polar-night-400 p-8">
+    <div class="w-full max-w-xl flex flex-col gap-4">
+      {posts.map((post) => (
+        <a href={post.url} class="flex flex-col border-frost-400 border-2 text-snow-storm-100 p-4 rounded-lg">
+          <h1 class="text-2xl">{post.frontmatter.title}</h1>
+          <p class="text-sm">{post.frontmatter.description}</p>
+          <p class="text-sm">{post.frontmatter.date}</p>
+        </a>
+      ))}
     </div>
   </body>
 </html>
diff --git a/src/pages/posts/hello-world.md b/src/pages/posts/hello-world.md
index 5447e1e..e4a76b9 100644
--- a/src/pages/posts/hello-world.md
+++ b/src/pages/posts/hello-world.md
@@ -1,6 +1,8 @@
 ---
 layout: '../../layouts/lay.astro'
 title: 'Hello World'
+description: 'This is a hello world post'
+date: '20/08/2022'
 ---
 
 # Hello World
