diff --git a/web/src/components/postList/postCard.astro b/web/src/components/postList/postCard.astro
new file mode 100644
index 0000000..a502e93
--- /dev/null
+++ b/web/src/components/postList/postCard.astro
@@ -0,0 +1,18 @@
+---
+import { getFormattedDate } from "@utils/date"
+import { authPB } from "@utils/pocketbase"
+
+const pb = await authPB()
+const { p } = Astro.props
+---
+
+<div class="mb-5 w-2/3">
+    <time datetime={p['publishDate']} class="min-w-[120px] text-gray-500">{getFormattedDate(p['publishDate'])}</time>
+    <div>
+        <a href={`/posts/${p['slug']}/`} rel="prefetch">
+            <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-xl border-12 border-white"/>
+            {p['title']}
+        </a>
+    </div>
+    <q class="line-clamp-3 block italic">{p['description']}</q>
+</div>
\ No newline at end of file
diff --git a/web/src/components/postList/tagList.astro b/web/src/components/postList/tagList.astro
new file mode 100644
index 0000000..8ae1d41
--- /dev/null
+++ b/web/src/components/postList/tagList.astro
@@ -0,0 +1,21 @@
+---
+const { tags } = Astro.props
+---
+
+<p class="text-xl mt-4">Tags</p>
+{
+    tags.length && (
+    <ul class="flex flex-wrap gap-2">
+        {tags.map(tag => (
+            <li>
+                <a
+                href={`/posts/tag/${tag}/`}
+                aria-label={`View all posts with the tag: ${tag}`}
+                >
+                #{tag}
+            </a>
+        </li>
+        ))}
+    </ul>
+    )
+}
\ No newline at end of file
diff --git a/web/src/pages/posts/index.astro b/web/src/pages/posts/index.astro
index c5e5828..6a603bb 100644
--- a/web/src/pages/posts/index.astro
+++ b/web/src/pages/posts/index.astro
@@ -1,7 +1,8 @@
 ---
 import Base from "src/layout/Base.astro";
+import TagList from "@components/postList/tagList";
+import PostCard from "@components/postList/postCard";
 import { authPB } from "src/utils/pocketbase";
-import { getFormattedDate } from '@utils/date'
 
 export const prerender = false
 
@@ -20,39 +21,10 @@ const uniqueTags = tags.filter((v, i, a) => a.indexOf(v) === i)
     <div slot="sidebar" class="text-left">
         A few thoughts I've had, whenever I feel like it as you can see!
         
-        <p class="text-xl mt-4">Tags</p>
-        {
-            uniqueTags.length && (
-            <ul class="flex flex-wrap gap-2">
-                {uniqueTags.map(tag => (
-                    <li>
-                        <a
-                        href={`/posts/tag/${tag}/`}
-                        aria-label={`View all posts with the tag: ${tag}`}
-                        >
-                        #{tag}
-                    </a>
-                </li>
-                ))}
-            </ul>
-            )
-        }
+        <TagList tags={uniqueTags}/>
     </div>
     
     <div slot="content" class="py-12">
-        {
-            posts.map(p => (
-            <div class="mb-5 w-2/3">
-                <time datetime={p['publishDate']} class="min-w-[120px] text-gray-500">{getFormattedDate(p['publishDate'])}</time>
-                <div>
-                    <a href={`/posts/${p['slug']}/`} rel="prefetch">
-                        <img src={ pb.files.getURL(p, p.headerImage) } class="rounded-xl border-12 border-white"/>
-                        {p['title']}
-                    </a>
-                </div>
-                <q class="line-clamp-3 block italic">{p['description']}</q>
-            </div>
-            ))
-        }
+        { posts.map(p => <PostCard p={p}/>) }
     </div>
 </Base>
\ No newline at end of file