diff --git a/assets/css/app.css b/assets/css/app.css
index 06a928b..88241fa 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -16,7 +16,7 @@
   }
 
   body {
-    @apply dark:bg-slate-800;
+    @apply dark:bg-neutral-800;
   }
 
   .stack > * + * {
@@ -35,7 +35,7 @@
   /* === SITE HEADER === */
 
   #site-header {
-    @apply block px-3 py-6 bg-gradient-to-r from-slate-900 to-slate-950 text-white print:hidden;
+    @apply block px-3 py-6 bg-gradient-to-r from-neutral-900 to-neutral-950 text-white print:hidden;
 
     & nav ul {
       @apply flex;
@@ -88,11 +88,11 @@
   /* === PAGE HEADER === */
 
   header.page-header { 
-    @apply border-b border-slate-300 mb-6;
+    @apply border-b border-neutral-300 mb-6 prose max-w-none;
   }
 
   header.page-header h1 {
-    @apply text-3xl leading-loose font-bold text-slate-900;
+    @apply text-3xl leading-loose font-bold;
   }
 
   header.page-header p {
@@ -119,22 +119,40 @@
 */
 @layer components {
   .divider {
-    @apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden before:bg-slate-500/25 after:bg-slate-500/25 before:mr-2 after:ml-2;
+    @apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden before:bg-neutral-500/25 after:bg-neutral-500/25 before:mr-2 after:ml-2;
   }
 
   .dot {
     @apply before:content-['·']
   }
 
+  .tag-bar {
+    & .letter {
+      @apply text-neutral-900 dark:text-neutral-100 capitalize border rounded font-sm px-2 py-1 inline-block mb-2;
+    }
+
+    & li {
+      @apply mb-2;
+    }
+
+    & a {
+      @apply text-neutral-900 dark:text-neutral-100 border rounded font-sm px-2 py-1 inline-block mb-2 transition;
+    }
+
+    & .count {
+      @apply text-sm font-mono rounded-full py-0.5 px-1 align-middle;
+    }
+  }
+
   .pagination {
     @apply flex justify-between mt-6;
 
     & .pagination-previous, & .pagination-next {
-      @apply block py-2 px-3 bg-slate-700 text-white rounded;
+      @apply block py-2 px-3 bg-neutral-700 text-white rounded;
     }
 
     & .pagination-previous.disabled, & .pagination-next.disabled {
-      @apply bg-slate-500;
+      @apply bg-neutral-500;
     }
 
     & .pagination-list {
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index a7f4ab7..139d6d9 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -17,7 +17,8 @@ module.exports = {
     container: { center: true },
     extend: {
       colors: {
-        primary: colors.sky
+        primary: colors.sky,
+        neutral: colors.slate
       }
     }
   },
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>
diff --git a/lib/chiya_web/controllers/tag_html/index.html.heex b/lib/chiya_web/controllers/tag_html/index.html.heex
index a973bb2..d16959a 100644
--- a/lib/chiya_web/controllers/tag_html/index.html.heex
+++ b/lib/chiya_web/controllers/tag_html/index.html.heex
@@ -5,7 +5,7 @@
 
 <section class="flex flex-col gap-3 mt-6">
   <%= for tag <- @tags do %>
-    <article class="bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 p-3 rounded">
+    <article class="bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 p-3 rounded">
       <header>
         <h2 class="text-xl leading-normal">
           <a href={"/admin/tags/#{tag.id}"}><%= tag.name %></a>