diff --git a/_includes/components/widgets/ai-usage.njk b/_includes/components/widgets/ai-usage.njk
index abb6df5..977f602 100644
--- a/_includes/components/widgets/ai-usage.njk
+++ b/_includes/components/widgets/ai-usage.njk
@@ -13,19 +13,19 @@
 
   {# Mini stats — 2x2 grid #}
   <div class="grid grid-cols-2 gap-2 mb-3">
-    <div class="text-center p-2 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+    <div class="text-center p-2 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
       <div class="text-lg font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
       <div class="text-[10px] text-surface-500 dark:text-surface-400">Total</div>
     </div>
-    <div class="text-center p-2 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+    <div class="text-center p-2 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
       <div class="text-lg font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
       <div class="text-[10px] text-surface-500 dark:text-surface-400">AI-involved</div>
     </div>
-    <div class="text-center p-2 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+    <div class="text-center p-2 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
       <div class="text-lg font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
       <div class="text-[10px] text-surface-500 dark:text-surface-400">Human-only</div>
     </div>
-    <div class="text-center p-2 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+    <div class="text-center p-2 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
       <div class="text-lg font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
       <div class="text-[10px] text-surface-500 dark:text-surface-400">AI ratio</div>
     </div>
diff --git a/_includes/components/widgets/post-categories.njk b/_includes/components/widgets/post-categories.njk
index 0d015d5..b85ba1a 100644
--- a/_includes/components/widgets/post-categories.njk
+++ b/_includes/components/widgets/post-categories.njk
@@ -5,12 +5,12 @@
   <h3 class="widget-title">Categories</h3>
   <div class="flex flex-wrap gap-2">
     {% if category is string %}
-    <a href="/categories/{{ category | slugify }}/" class="p-category text-xs px-2 py-1 bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">
+    <a href="/categories/{{ category | slugify }}/" class="p-category text-xs px-2 py-1 bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 rounded-full hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">
       {{ category }}
     </a>
     {% else %}
     {% for cat in category %}
-    <a href="/categories/{{ cat | slugify }}/" class="p-category text-xs px-2 py-1 bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">
+    <a href="/categories/{{ cat | slugify }}/" class="p-category text-xs px-2 py-1 bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 rounded-full hover:bg-accent-200 dark:hover:bg-accent-800 transition-colors">
       {{ cat }}
     </a>
     {% endfor %}