diff --git a/assets/css/app.css b/assets/css/app.css
index 776cc57..f37636c 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -126,6 +126,24 @@
     @apply before:content-['·']
   }
 
+  .tag-bar {
+    & .letter {
+      @apply capitalize border rounded font-sm px-2 py-1 inline-block mb-2;
+    }
+
+    & li {
+      @apply mb-2;
+    }
+
+    & a {
+      @apply border rounded font-sm px-2 py-1 inline-block mb-2 transition;
+    }
+
+    & .count {
+      @apply text-xs font-mono rounded-full py-0.5 px-1 align-middle;
+    }
+  }
+
   .pagination {
     @apply flex justify-between mt-6;
 
diff --git a/lib/chiya_web/controllers/page_html/tag_bar.html.heex b/lib/chiya_web/controllers/page_html/tag_bar.html.heex
index 21bd231..19a4141 100644
--- a/lib/chiya_web/controllers/page_html/tag_bar.html.heex
+++ b/lib/chiya_web/controllers/page_html/tag_bar.html.heex
@@ -1,17 +1,14 @@
-<ul>
+<ul class="tag-bar">
   <%= for {letter, tag_group} <- group_tags(@notes) do %>
-    <li class="mb-2">
-      <span class="capitalize text-theme-primary border border-theme-background1 rounded font-sm px-2 py-1 inline-block mb-2">
+    <li>
+      <span class="letter">
         <%= letter %>
       </span>
 
       <%= for tag <- tag_group do %>
-        <a
-          href={~p"/tagged-with/#{tag.slug}"}
-          class="border border-theme-background1 rounded font-sm px-2 py-1 inline-block mb-2 hover:bg-theme-background1 transition"
-        >
+        <a href={~p"/tagged-with/#{tag.slug}"}>
           <%= tag.name %>
-          <span class="text-theme-base text-xs font-mono bg-theme-primary/25 rounded-full py-0.5 px-1 align-middle">
+          <span class="count">
             <%= Enum.count(tag.notes) %>
           </span>
         </a>