diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
index 63c5b27..b144a64 100644
--- a/src/pages/post/[...slug].astro
+++ b/src/pages/post/[...slug].astro
@@ -1,64 +1,75 @@
 ---
-import { getCollection, type CollectionEntry } from 'astro:content';
-import { Icon } from 'astro-icon/components';
-import Layout from '../../layouts/Layout.astro';
+import { getCollection, type CollectionEntry } from "astro:content";
+import { Icon } from "astro-icon/components";
+import Layout from "../../layouts/Layout.astro";
 
 export const prerender = true;
 
 export async function getStaticPaths() {
-  const posts = await getCollection('posts');
-  return posts.map((post: CollectionEntry<'posts'>) => ({
-    params: { slug: post.slug },
-    props: { post },
-  }));
+    const posts = await getCollection("posts");
+    return posts.map((post: CollectionEntry<"posts">) => ({
+        params: { slug: post.slug },
+        props: { post },
+    }));
 }
 
-const { post }: { post: CollectionEntry<'posts'> } = Astro.props;
+const { post }: { post: CollectionEntry<"posts"> } = Astro.props;
 const { Content } = await post.render();
 ---
 
 <Layout>
-  <div class="min-h-screen p-4 md:p-8">
-    <div class="max-w-3xl mx-auto">
-      <div class="p-4 md:p-8">
-        <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
-          {post.data.title}
-        </h1>
+    <div class="min-h-screen p-4 md:p-8">
+        <div class="max-w-3xl mx-auto">
+            <div class="p-4 md:p-8">
+                <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
+                    {post.data.title}
+                </h1>
 
-        <div class="flex flex-wrap items-center gap-4 mb-6">
-          <div class="flex items-center flex-row gap-2 text-base-content opacity-75">
-            <Icon name="mdi:clock" class="text-xl" />
-            <time datetime={post.data.pubDate.toISOString()}>
-              {new Date(post.data.pubDate).toLocaleDateString('en-us', {
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric',
-              })}
-            </time>
-          </div>
+                <div class="flex flex-wrap items-center gap-4 mb-6">
+                    <div
+                        class="flex items-center flex-row gap-2 text-base-content opacity-75"
+                    >
+                        <Icon name="mdi:clock" class="text-xl" />
+                        <time datetime={post.data.pubDate.toISOString()}>
+                            {
+                                new Date(post.data.pubDate).toLocaleDateString(
+                                    "en-us",
+                                    {
+                                        month: "long",
+                                        day: "numeric",
+                                        year: "numeric",
+                                    },
+                                )
+                            }
+                        </time>
+                    </div>
 
-          {/* Back button */}
-          <a href="/posts" class="btn btn-outline btn-primary btn-sm">
-            <Icon name="mdi:arrow-left" class="text-lg" />
-            Back
-          </a>
+                    {/* Back button */}
+                    <a href="/posts" class="btn btn-outline btn-primary btn-sm">
+                        <Icon name="mdi:arrow-left" class="text-lg" />
+                        Back
+                    </a>
+                </div>
+
+                {
+                    post.data.tags && post.data.tags.length > 0 && (
+                        <div class="flex gap-2 flex-wrap mb-6">
+                            {post.data.tags.map((tag: string) => (
+                                <div class="badge badge-primary">
+                                    <Icon name="mdi:tag" class="text-lg" />
+                                    {tag}
+                                </div>
+                            ))}
+                        </div>
+                    )
+                }
+
+                <article
+                    class="prose prose-lg dark:prose-invert max-w-none mt-6"
+                >
+                    <Content />
+                </article>
+            </div>
         </div>
-        
-        {post.data.tags && post.data.tags.length > 0 && (
-          <div class="flex gap-2 flex-wrap mb-6">
-            {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>
-        )}
-
-        <article class="prose prose-lg dark:prose-invert max-w-none mt-6">
-          <Content />
-        </article>
-      </div>
     </div>
-  </div>
-</Layout> 
\ No newline at end of file
+</Layout>