diff --git a/astro/src/components/Post.astro b/astro/src/components/Post.astro
new file mode 100644
index 0000000..0ce9947
--- /dev/null
+++ b/astro/src/components/Post.astro
@@ -0,0 +1,38 @@
+---
+import { Image } from "@astrojs/image/components";
+
+const { post } = Astro.props;
+---
+<a
+    class="py-4 border-secondary decoration-transparent"
+    href={`/posts/${post.id}/`}
+>
+    <article class="flex px-5 py-3 gap-8">
+        <Image
+        src={post.thumbnail.url}
+        height="150"
+        aspectRatio="1"
+        format="webp"
+        alt={post.thumbnail.alt}
+      />
+
+      <div class="flex flex-col gap-4">
+        <div class="flex justify-between w-full">
+          <h3 class="">{post.title}</h3>
+          {post.publishedDate && (
+            <p class="font-light">
+            {new Date(post.publishedDate).toLocaleDateString("de-DE")}
+            </p>
+          )}
+          </div>
+          {post.summary && <p>
+            {post.summary}
+          </p>}
+      </div>
+      <!--  {post.author.name && (
+        <p>
+          {post.author.name}
+        </p>
+    )} -->
+    </article>
+</a>
\ No newline at end of file
diff --git a/astro/src/components/Posts.astro b/astro/src/components/Posts.astro
new file mode 100644
index 0000000..7ea4b60
--- /dev/null
+++ b/astro/src/components/Posts.astro
@@ -0,0 +1,20 @@
+---
+import Post from "@/components/Post.astro"
+
+const { posts } = Astro.props;
+---
+
+<div class="flex flex-col">
+    <h2 class="text-secondary mb-4">Posts</h2>
+    <div class="border-y-2 flex flex-col divide-y-2 border-secondary divide-secondary">
+      {
+        posts.length > 0 ? (
+          posts.map((post) => (
+            <Post post={post}/>
+          ))
+        ) : (
+          <p>No posts available</p>
+        )
+      }
+      </div>
+</div>
diff --git a/astro/src/layouts/BaseLayout.astro b/astro/src/layouts/BaseLayout.astro
index 0dcc458..f85fe5f 100644
--- a/astro/src/layouts/BaseLayout.astro
+++ b/astro/src/layouts/BaseLayout.astro
@@ -31,7 +31,7 @@ import "@/global.css"
       }
     </style>
   </head>
-  <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-6 py-8 text-primary bg-background">
+  <body class="autonomic min-h-screen flex flex-col mx-auto max-w-7xl px-4 text-primary bg-background">
     <slot />
   </body>
 </html>
diff --git a/astro/src/layouts/ContentLayout.astro b/astro/src/layouts/ContentLayout.astro
index a69f623..e862702 100644
--- a/astro/src/layouts/ContentLayout.astro
+++ b/astro/src/layouts/ContentLayout.astro
@@ -8,8 +8,8 @@ const { title } = Astro.props;
 
 <BaseLayout title={title}>
     <Header/>
-        <main class="flex-grow">
-            <slot/>
-        </main>
-        <Footer/>
+    <main class="flex-grow">
+        <slot/>
+    </main>
+    <Footer/>
 </BaseLayout>
\ No newline at end of file
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
index 7e1a904..7aa3a32 100644
--- a/astro/src/pages/index.astro
+++ b/astro/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import Posts from "@/components/Posts.astro";
 import ContentLayout from "@/layouts/ContentLayout.astro";
 import { getPosts } from "@/utils/payload";
 
@@ -6,7 +7,7 @@ const posts = await getPosts();
 ---
 
 <ContentLayout title="Paystro">
-  <main class="" >
+  <main class="flex flex-col gap-4" >
     <h1 class="">Paystro</h1>
     <p class="mt-3">
       Paystro is a pre-configured setup for Astro and Payloadcms that makes it
@@ -20,26 +21,8 @@ const posts = await getPosts();
       reverse proxy. This setup provides a secure and scalable production
       environment for your website.
     </p>
-    <h2 class="mt-6 font-bold text-2xl">Posts</h2>
-    <div class="flex gap-4 mt-3 flex-wrap">
-      {
-        posts.length > 0 ? (
-          posts.map((post) => (
-            <a href={`/posts/${post.id}/`}>
-              <article class="bg-secondary text-textInverted px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
-                <h3 class="font-bold text-lg">{post.title}</h3>
-                {post.publishedDate && (
-                  <p>
-                    {new Date(post.publishedDate).toLocaleDateString("de-DE")}
-                  </p>
-                )}
-              </article>
-            </a>
-          ))
-        ) : (
-          <p>Add Posts in Payloadcms</p>
-        )
-      }
-    </div>
-  </main>
+    <section class="mt-4">
+      <Posts posts={posts}/>
+    </section>
+    </main>
 </ContentLayout>
diff --git a/payload/src/collections/Posts.ts b/payload/src/collections/Posts.ts
index e48cb5a..2019505 100644
--- a/payload/src/collections/Posts.ts
+++ b/payload/src/collections/Posts.ts
@@ -40,11 +40,25 @@ const Posts: CollectionConfig = {
       type: "text",
       required: true
     },
+    {
+      name: "summary",
+      type: "text",
+      required: false
+    },
     {
       name: "publishedDate",
       type: "date",
+      required: false,
+      admin: {
+        position: "sidebar",
+      }
+    },
+    {
+      name: "thumbnail",
+      type: "upload",
+      relationTo: "media",
+      required: true,
     },
-
     {
       name: "content",
       type: "richText",
@@ -67,6 +81,16 @@ const Posts: CollectionConfig = {
         },
       },
     },
+    {
+      name: "author",
+      type: 'relationship', 
+      relationTo: 'users', 
+      hasMany: false,
+      required: false,
+      admin: {
+        position: "sidebar",
+      },
+    },
     {
       name: "status",
       type: "select",
