diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 9be3872..75c505c 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -1,8 +1,8 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import { Icon } from 'astro-icon/components';
+import type { CollectionEntry } from "astro:content";
+import { Icon } from "astro-icon/components";
 export interface Props {
-  post: CollectionEntry<'posts'>;
+    post: CollectionEntry<"posts">;
 }
 
 const { post } = Astro.props;
@@ -10,46 +10,56 @@ const { title, description: blurb, pubDate } = post.data;
 const { slug } = post;
 ---
 
-<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
-  <div class="card-body p-3 break-words">
-    <h2 class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2">
-      {title}
-    </h2>
+<div
+    class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
+>
+    <div class="card-body p-3 break-words">
+        <h2
+            class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2"
+        >
+            {title}
+        </h2>
 
-    <p class="text-center text-base-100 break-words mb-3 text-base">
-      {blurb || 'No description available.'}
-    </p>
+        <p class="text-center text-base-100 break-words mb-3 text-base">
+            {blurb || "No description available."}
+        </p>
 
-    <div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2">
-      <Icon name="mdi:clock" class="text-xl" />
-      <span>
-        {new Date(pubDate).toLocaleDateString("en-us", {
-          month: "long",
-          day: "numeric",
-          year: "numeric",
-        })}
-      </span>
+        <div
+            class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2"
+        >
+            <Icon name="mdi:clock" class="text-xl" />
+            <span>
+                {
+                    new Date(pubDate).toLocaleDateString("en-us", {
+                        month: "long",
+                        day: "numeric",
+                        year: "numeric",
+                    })
+                }
+            </span>
+        </div>
+
+        {
+            post.data.tags && post.data.tags.length > 0 && (
+                <div class="flex gap-2 flex-wrap mb-2 justify-center">
+                    {post.data.tags.map((tag: string) => (
+                        <div class="badge badge-primary">
+                            <Icon name="mdi:tag" class="text-lg" />
+                            {tag}
+                        </div>
+                    ))}
+                </div>
+            )
+        }
+
+        <div class="card-actions justify-end mt-2">
+            <a
+                href={`/post/${slug}`}
+                class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
+                aria-label={`Read more about ${title}`}
+            >
+                <Icon name="mdi:arrow-right" class="text-lg" />
+            </a>
+        </div>
     </div>
-
-    {post.data.tags && post.data.tags.length > 0 && (
-      <div class="flex gap-2 flex-wrap mb-2 justify-center">
-        {post.data.tags.map((tag: string) => (
-          <span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
-            <Icon name="mdi:tag" class="text-lg" />
-            {tag}
-          </span>
-        ))}
-      </div>
-    )}
-
-    <div class="card-actions justify-end mt-2">
-      <a
-        href={`/post/${slug}`}
-        class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
-        aria-label={`Read more about ${title}`}
-      >
-        <Icon name="mdi:arrow-right" class="text-lg" />
-      </a>
-    </div>
-  </div>
-</div> 
\ No newline at end of file
+</div>