diff --git a/src/components/news/Tag.astro b/src/components/news/Tag.astro
new file mode 100644
index 00000000..51bdd2a7
--- /dev/null
+++ b/src/components/news/Tag.astro
@@ -0,0 +1,45 @@
+---
+interface Props {
+  name: string;
+  class?: string;
+}
+
+const { name, class: className } = Astro.props;
+
+const DEFAULT_TAGS: Record<string, string> = {
+  project: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 border-amber-200 dark:border-amber-800",
+  updates: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 border-green-200 dark:border-green-800",
+  announcement: "bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300 border-rose-200 dark:border-rose-800",
+};
+
+const getTagColor = (t: string) => {
+  const lowerTag = t.toLowerCase();
+  const parts = lowerTag.split(/[ _:]/);
+  const prefix = parts[0];
+
+  return (
+    DEFAULT_TAGS[prefix] ||
+    DEFAULT_TAGS[lowerTag] ||
+    "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300 border-gray-200 dark:border-gray-700"
+  );
+};
+
+const colorClass = getTagColor(name);
+
+const formatTag = (t: string) => {
+  return t
+    .split(/[ _:]/)
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+};
+---
+
+<a
+  href={`/news/tags/${name}`}
+  class:list={[
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 align-middle text-[10px] font-medium tracking-wider uppercase transition-colors",
+    colorClass,
+    className,
+  ]}>{formatTag(name)}</a
+>
diff --git a/src/content.config.ts b/src/content.config.ts
index bd52c3b3..2a7cb291 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -12,6 +12,7 @@ const posts = defineCollection({
     date: z.coerce.date(),
     author: z.string().default(DEFAULT_AUTHOR),
     authorAvatar: z.url().default(DEFAULT_AVATAR),
+    tags: z.array(z.string()).default([]),
     cover: z
       .object({
         src: z.url(),
diff --git a/src/content/posts/1-21-11.mdx b/src/content/posts/1-21-11.mdx
index e92ef7a7..50ac340e 100644
--- a/src/content/posts/1-21-11.mdx
+++ b/src/content/posts/1-21-11.mdx
@@ -2,6 +2,9 @@
 title: "1.21.11"
 date: "2025-12-21T20:00:00Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.21.11 Update
diff --git a/src/content/posts/1-21-3.mdx b/src/content/posts/1-21-3.mdx
index c0e05d85..766150b7 100644
--- a/src/content/posts/1-21-3.mdx
+++ b/src/content/posts/1-21-3.mdx
@@ -2,6 +2,9 @@
 title: "1.21.3"
 date: "2024-11-24T17:45:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.21.3 Update
diff --git a/src/content/posts/1-21-7.mdx b/src/content/posts/1-21-7.mdx
index cdfc8b81..7f1516f2 100644
--- a/src/content/posts/1-21-7.mdx
+++ b/src/content/posts/1-21-7.mdx
@@ -2,6 +2,9 @@
 title: "1.21.7"
 date: "2025-06-30T14:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.21.5 / 1.21.6 / 1.21.7 Update
diff --git a/src/content/posts/1-21-9-and-10.mdx b/src/content/posts/1-21-9-and-10.mdx
index 988f0ec7..40dd113d 100644
--- a/src/content/posts/1-21-9-and-10.mdx
+++ b/src/content/posts/1-21-9-and-10.mdx
@@ -2,6 +2,9 @@
 title: "1.21.9 & 1.21.10"
 date: "2025-10-25T19:31:42Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.21.9/10 Update
diff --git a/src/content/posts/1-21.mdx b/src/content/posts/1-21.mdx
index 78bd4a8c..7579c496 100644
--- a/src/content/posts/1-21.mdx
+++ b/src/content/posts/1-21.mdx
@@ -2,6 +2,9 @@
 title: "1.21"
 date: "2024-07-20T18:00:16.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.21 Update
diff --git a/src/content/posts/26-1.mdx b/src/content/posts/26-1.mdx
index 06d3fd37..f7155a46 100644
--- a/src/content/posts/26-1.mdx
+++ b/src/content/posts/26-1.mdx
@@ -2,6 +2,9 @@
 title: "26.1"
 date: "2026-04-26T20:00:00Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 26.1 Update
diff --git a/src/content/posts/announcing-the-end-of-life-of-waterfall.mdx b/src/content/posts/announcing-the-end-of-life-of-waterfall.mdx
index b675ba41..54cec563 100644
--- a/src/content/posts/announcing-the-end-of-life-of-waterfall.mdx
+++ b/src/content/posts/announcing-the-end-of-life-of-waterfall.mdx
@@ -2,6 +2,9 @@
 title: "Announcing the end of life of Waterfall"
 date: "2024-03-26T16:30:42.000Z"
 author: "Paper Team"
+tags:
+  - "project: waterfall"
+  - "announcement"
 ---
 
 # Announcing the end of life of Waterfall
diff --git a/src/content/posts/important-dev-psa-future-removal-of-cb-package-relocation.mdx b/src/content/posts/important-dev-psa-future-removal-of-cb-package-relocation.mdx
index 705f4f73..ba02be22 100644
--- a/src/content/posts/important-dev-psa-future-removal-of-cb-package-relocation.mdx
+++ b/src/content/posts/important-dev-psa-future-removal-of-cb-package-relocation.mdx
@@ -2,6 +2,8 @@
 title: "Important dev PSA: Future removal of CB package relocation"
 date: "2024-03-22T11:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
 ---
 
 ## Future removal of CB package relocation + moving away from obfuscation at runtime
diff --git a/src/content/posts/paper-1-18-2.mdx b/src/content/posts/paper-1-18-2.mdx
index d667d3c1..48e8793a 100644
--- a/src/content/posts/paper-1-18-2.mdx
+++ b/src/content/posts/paper-1-18-2.mdx
@@ -2,6 +2,9 @@
 title: "Paper 1.18.2"
 date: "2022-03-04T18:04:37.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.18.2 Update
diff --git a/src/content/posts/paper-1-18-and-more.mdx b/src/content/posts/paper-1-18-and-more.mdx
index 48ace23a..c69d8e02 100644
--- a/src/content/posts/paper-1-18-and-more.mdx
+++ b/src/content/posts/paper-1-18-and-more.mdx
@@ -2,6 +2,9 @@
 title: "Paper 1.18 and more"
 date: "2022-01-04T20:46:50.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.18 update
diff --git a/src/content/posts/paper-1-19-1.mdx b/src/content/posts/paper-1-19-1.mdx
index 3e471b4b..f8b751bd 100644
--- a/src/content/posts/paper-1-19-1.mdx
+++ b/src/content/posts/paper-1-19-1.mdx
@@ -2,6 +2,9 @@
 title: "Paper 1.19.1"
 date: "2022-07-30T00:43:40.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.19.1 Update
diff --git a/src/content/posts/paper-1-19.mdx b/src/content/posts/paper-1-19.mdx
index 8789edcb..0cc0181e 100644
--- a/src/content/posts/paper-1-19.mdx
+++ b/src/content/posts/paper-1-19.mdx
@@ -2,6 +2,9 @@
 title: "Paper 1.19"
 date: "2022-06-12T16:34:45.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "updates"
 ---
 
 ## The 1.19 Update
diff --git a/src/content/posts/paper-velocity-1-19-3.mdx b/src/content/posts/paper-velocity-1-19-3.mdx
index 74275a1c..d0282dc3 100644
--- a/src/content/posts/paper-velocity-1-19-3.mdx
+++ b/src/content/posts/paper-velocity-1-19-3.mdx
@@ -2,6 +2,9 @@
 title: "Paper & Velocity 1.19.3"
 date: "2022-12-11T17:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: velocity"
+  - "updates"
 ---
 
 ## The 1.19.3 Update
diff --git a/src/content/posts/paper-velocity-1-19-4.mdx b/src/content/posts/paper-velocity-1-19-4.mdx
index db3c932f..3c8f1791 100644
--- a/src/content/posts/paper-velocity-1-19-4.mdx
+++ b/src/content/posts/paper-velocity-1-19-4.mdx
@@ -2,6 +2,9 @@
 title: "Paper & Velocity 1.19.4"
 date: "2023-03-19T17:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: velocity"
+  - "updates"
 ---
 
 ## The 1.19.4 Update
diff --git a/src/content/posts/paper-velocity-1-20-1.mdx b/src/content/posts/paper-velocity-1-20-1.mdx
index 24897f10..9e3c1f8b 100644
--- a/src/content/posts/paper-velocity-1-20-1.mdx
+++ b/src/content/posts/paper-velocity-1-20-1.mdx
@@ -2,6 +2,9 @@
 title: "Paper & Velocity 1.20(.1)"
 date: "2023-06-11T18:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: velocity"
+  - "updates"
 ---
 
 ## The 1.20(.1) Update
diff --git a/src/content/posts/paper-velocity-1-20-2.mdx b/src/content/posts/paper-velocity-1-20-2.mdx
index 0afc6f99..8631f151 100644
--- a/src/content/posts/paper-velocity-1-20-2.mdx
+++ b/src/content/posts/paper-velocity-1-20-2.mdx
@@ -2,6 +2,9 @@
 title: "Paper & Velocity 1.20.2"
 date: "2023-10-10T10:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: velocity"
+  - "updates"
 ---
 
 ## The 1.20.2 Update
diff --git a/src/content/posts/paper-velocity-1-20-4.mdx b/src/content/posts/paper-velocity-1-20-4.mdx
index f8d99a0d..da7c69ef 100644
--- a/src/content/posts/paper-velocity-1-20-4.mdx
+++ b/src/content/posts/paper-velocity-1-20-4.mdx
@@ -2,6 +2,9 @@
 title: "Paper & Velocity 1.20.4"
 date: "2023-12-25T11:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: velocity"
+  - "updates"
 ---
 
 ## The 1.20.4 Update
diff --git a/src/content/posts/paper-velocity-1-20-6.mdx b/src/content/posts/paper-velocity-1-20-6.mdx
index 2a9ff6b7..2a68847f 100644
--- a/src/content/posts/paper-velocity-1-20-6.mdx
+++ b/src/content/posts/paper-velocity-1-20-6.mdx
@@ -2,6 +2,9 @@
 title: "Paper & Velocity 1.20.6"
 date: "2024-05-28T15:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: velocity"
+  - "updates"
 ---
 
 ## The 1.20.5/6 Update
diff --git a/src/content/posts/the-future-of-paper-hard-fork.mdx b/src/content/posts/the-future-of-paper-hard-fork.mdx
index 435d813c..db5ce0d4 100644
--- a/src/content/posts/the-future-of-paper-hard-fork.mdx
+++ b/src/content/posts/the-future-of-paper-hard-fork.mdx
@@ -2,6 +2,9 @@
 title: "The future of Paper - Hard fork"
 date: "2024-12-13T10:00:00.000Z"
 author: "Paper Team"
+tags:
+  - "project: paper"
+  - "announcement"
 ---
 
 After the release of the first builds for Minecraft 1.21.4, we are happy to share some even more exciting news with everyone. Following the successful rollout of our Mojang-mapped server in 1.20.5, we are taking a big next step for the project:
diff --git a/src/pages/news/[id].astro b/src/pages/news/[id].astro
index 63cd0b29..ed582031 100644
--- a/src/pages/news/[id].astro
+++ b/src/pages/news/[id].astro
@@ -4,6 +4,7 @@ import { getCollection, render } from "astro:content";
 import { formatDateLong } from "@/utils/time";
 import { countWords, minutesToRead, truncateForPreview } from "@/utils/content";
 import { components } from "@/mdx/components";
+import Tag from "@/components/news/Tag.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("posts");
@@ -21,7 +22,7 @@ const mins = minutesToRead(words);
 const excerpt = truncateForPreview(post.body ?? "", 120);
 ---
 
-<Layout title={post.data.title!} description={excerpt} keywords={[]} canonical={`/news/${post.id}`}>
+<Layout title={post.data.title!} description={excerpt} keywords={post.data.tags ?? []} canonical={`/news/${post.id}`}>
   <section class="container mx-auto mt-10 max-w-7xl px-4 py-12">
     <article>
       <header class="px-4">
@@ -54,23 +55,36 @@ const excerpt = truncateForPreview(post.body ?? "", 120);
           <span>{words} words</span>
         </div>
 
-        <div class="mt-3 flex items-center gap-3">
+        <div class="mt-3 flex flex-wrap items-center justify-between gap-3">
+          <div class="flex items-center gap-3">
+            {
+              post.data.authorAvatar && (
+                <img
+                  src={post.data.authorAvatar}
+                  alt=""
+                  width="32"
+                  height="32"
+                  class="h-8 w-8 rounded-full border border-gray-200/60 object-cover dark:border-white/10"
+                  loading="lazy"
+                  decoding="async"
+                />
+              )
+            }
+            <div class="text-sm text-gray-900 dark:text-white/90">
+              {post.data.author}
+            </div>
+          </div>
+
           {
-            post.data.authorAvatar && (
-              <img
-                src={post.data.authorAvatar}
-                alt=""
-                width="32"
-                height="32"
-                class="h-8 w-8 rounded-full border border-gray-200/60 object-cover dark:border-white/10"
-                loading="lazy"
-                decoding="async"
-              />
+            post.data.tags && post.data.tags.length > 0 && (
+              <div class="flex flex-wrap items-center gap-2">
+                <span class="text-sm font-semibold text-gray-700 dark:text-white/80">Tags:</span>
+                {post.data.tags.map((tag: string) => (
+                  <Tag name={tag} />
+                ))}
+              </div>
             )
           }
-          <div class="text-sm text-gray-900 dark:text-white/90">
-            {post.data.author}
-          </div>
         </div>
       </div>
 
diff --git a/src/pages/news/index.astro b/src/pages/news/index.astro
index 4eca137e..d778e20b 100644
--- a/src/pages/news/index.astro
+++ b/src/pages/news/index.astro
@@ -4,13 +4,13 @@ import { getCollection } from "astro:content";
 import { formatDateLong } from "@/utils/time";
 import { countWords, minutesToRead, truncateForPreview } from "@/utils/content";
 import { Icon } from "astro-icon/components";
-import IconButton from "@/components/IconButton.astro";
+import Tag from "@/components/news/Tag.astro";
 
 const posts = (await getCollection("posts")).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 
 const postsWithMeta = posts.map((p) => {
   const words = countWords(p.body ?? "");
-  const excerpt = truncateForPreview(p.body ?? "", 512);
+  const excerpt = truncateForPreview(p.body ?? "", 700);
   return {
     ...p,
     words,
@@ -29,30 +29,42 @@ const postsWithMeta = posts.map((p) => {
       {
         postsWithMeta.map((entry, idx) => (
           <a href={`/news/${entry.id}`} class="group rounded-lg">
-            <div class="btn btn-outline btn-gray flex flex-col gap-6 rounded-lg py-6 transition-colors duration-200">
+            <div class="btn btn-outline btn-gray flex flex-col gap-6 rounded-lg transition-colors duration-200">
               <div class="flex flex-col gap-3 p-6">
                 <div class="flex items-baseline justify-between gap-4">
                   <h2 class="text-foreground group-hover:text-primary text-xl leading-tight font-bold text-balance">{entry.data.title}</h2>
-                  {idx === 0 ? (
-                    <span class="bg-channel-stable-primary text-channel-stable-secondary shadow-channel-stable-primary/50 ml-4 inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm">
-                      Latest
-                    </span>
-                  ) : null}
+                  <div class="flex flex-wrap items-center gap-2">
+                    {idx === 0 ? (
+                      <span class="bg-channel-stable-primary text-channel-stable-secondary shadow-channel-stable-primary/50 ml-2 inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm">
+                        Latest
+                      </span>
+                    ) : null}
+                  </div>
                 </div>
 
                 <div class="text-muted-foreground text-xs">
-                  <div class="flex flex-row flex-wrap items-baseline gap-x-3 gap-y-1">
-                    <span class="inline-flex items-baseline gap-1.5">
-                      <Icon name="icons/lucide/calendar" class="size-3.5 translate-y-px" />
-                      <span>{formatDateLong(new Date(entry.data.date))}</span>
-                    </span>
+                  <div class="flex flex-col gap-2">
+                    <div class="flex flex-row flex-wrap items-baseline gap-x-3 gap-y-1">
+                      <span class="inline-flex items-baseline gap-1.5">
+                        <Icon name="icons/lucide/calendar" class="size-3.5 translate-y-px" />
+                        <span>{formatDateLong(new Date(entry.data.date))}</span>
+                      </span>
+
+                      <span aria-hidden="true">·</span>
 
-                    <span aria-hidden="true">·</span>
+                      <span class="inline-flex items-baseline gap-1.5">
+                        <Icon name="icons/lucide/clock" class="size-3.5 translate-y-px" />
+                        <span>{entry.mins} min read</span>
+                      </span>
+                    </div>
 
-                    <span class="inline-flex items-baseline gap-1.5">
-                      <Icon name="icons/lucide/clock" class="size-3.5 translate-y-px" />
-                      <span>{entry.mins} min read</span>
-                    </span>
+                    {entry.data.tags && entry.data.tags.length > 0 && (
+                      <div class="flex flex-row flex-wrap gap-0.5">
+                        {entry.data.tags.map((tag: string) => (
+                          <Tag name={tag} />
+                        ))}
+                      </div>
+                    )}
                   </div>
                 </div>
 
diff --git a/src/pages/news/tags/[tagName].astro b/src/pages/news/tags/[tagName].astro
new file mode 100644
index 00000000..5a6a464e
--- /dev/null
+++ b/src/pages/news/tags/[tagName].astro
@@ -0,0 +1,84 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+import { countWords, minutesToRead, truncateForPreview } from "@/utils/content";
+import { formatDateLong } from "@/utils/time.ts";
+import { Icon } from "astro-icon/components";
+import Tag from "@/components/news/Tag.astro";
+
+export async function getStaticPaths() {
+  const allPosts = await getCollection("posts");
+
+  const uniqueTags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())];
+  return uniqueTags.map((uniqueTag) => {
+    const filteredPosts = allPosts.filter((post: any) => post.data.tags.includes(uniqueTag));
+    const postsWithMeta = filteredPosts.map((p) => {
+      const words = countWords(p.body ?? "");
+      const excerpt = truncateForPreview(p.body ?? "", 700);
+      return {
+        ...p,
+        words,
+        mins: minutesToRead(words),
+        excerpt,
+      };
+    });
+    return {
+      params: { tagName: uniqueTag },
+      props: { posts: postsWithMeta },
+    };
+  });
+}
+const { tagName } = Astro.params;
+const { posts } = Astro.props;
+---
+
+<Layout title={tagName} description="news using the tag `{tagName}`" keywords={["blog", "news", "updates", "latest"]} canonical="/tags">
+  <div class="container mx-auto mt-10 max-w-7xl px-4 py-12">
+    <header class="flex flex-col gap-4">
+      <a href="/news" class="text-sm font-light text-current/80 hover:text-current">&lt; Back to news index</a>
+      <h1 class="flex items-center gap-4 text-2xl font-semibold lg:text-3xl">
+        Posts with tag: <Tag name={tagName} />
+      </h1>
+    </header>
+    <div class="flex flex-col gap-4">
+      {
+        posts.map((entry, idx) => (
+          <a href={`/news/${entry.id}`} class="group rounded-lg">
+            <div class="btn btn-outline btn-gray flex flex-col gap-6 rounded-lg py-6 transition-colors duration-200">
+              <div class="flex flex-col gap-3 p-6">
+                <div class="flex items-baseline justify-between gap-4">
+                  <h2 class="text-foreground group-hover:text-primary text-xl leading-tight font-bold text-balance">{entry.data.title}</h2>
+                  {idx === 0 ? (
+                    <span class="bg-channel-stable-primary text-channel-stable-secondary shadow-channel-stable-primary/50 ml-4 inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm">
+                      Latest
+                    </span>
+                  ) : null}
+                </div>
+
+                <div class="text-muted-foreground text-xs">
+                  <div class="flex flex-row flex-wrap items-baseline gap-x-3 gap-y-1">
+                    <span class="inline-flex items-baseline gap-1.5">
+                      <Icon name="icons/lucide/calendar" class="size-3.5 translate-y-px" />
+                      <span>{formatDateLong(new Date(entry.data.date))}</span>
+                    </span>
+
+                    <span aria-hidden="true">·</span>
+
+                    <span class="inline-flex items-baseline gap-1.5">
+                      <Icon name="icons/lucide/clock" class="size-3.5 translate-y-px" />
+                      <span>{entry.mins} min read</span>
+                    </span>
+                  </div>
+                </div>
+
+                <p class="text-muted-foreground mask-fade-bottom max-h-28 overflow-hidden text-sm leading-relaxed [--fade-size:2.5rem]">
+                  {entry.excerpt}
+                </p>
+              </div>
+            </div>
+          </a>
+        ))
+      }
+    </div>
+  </div>
+</Layout>
diff --git a/src/pages/news/tags/index.astro b/src/pages/news/tags/index.astro
new file mode 100644
index 00000000..d7c9bdaa
--- /dev/null
+++ b/src/pages/news/tags/index.astro
@@ -0,0 +1,35 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import { getCollection } from "astro:content";
+const allPosts = await getCollection("posts");
+const tags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())];
+---
+
+<Layout title="Tag Index" description="Shows all the tags from news" keywords={["blog", "news", "updates", "latest"]} canonical="/tags">
+  <section class="container mx-auto mt-10 max-w-7xl px-4 py-12">
+    <header class="mb-8 flex justify-between">
+      <h1 class="text-4xl leading-normal font-medium lg:text-5xl lg:leading-normal">Tag Index</h1>
+    </header>
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      {
+        tags.sort().map((tag) => (
+          <a
+            href={`/news/tags/${tag}`}
+            class="btn btn-outline btn-gray group flex items-center justify-between rounded-lg p-4 transition-all duration-200 hover:scale-[1.02]"
+          >
+            <span class="text-foreground group-hover:text-primary text-lg font-bold">#{tag}</span>
+            <div class="flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-[10px] font-bold text-gray-600 dark:bg-white/10 dark:text-white/60">
+              {allPosts.filter((post: any) => post.data.tags?.includes(tag)).length}
+            </div>
+          </a>
+        ))
+      }
+    </div>
+  </section>
+</Layout>
+
+<style scoped>
+  @view-transition {
+    navigation: auto;
+  }
+</style>