diff --git a/src/routes/hunter/HuntList.svelte b/src/routes/hunter/HuntList.svelte
index 139e21e..2f2598f 100644
--- a/src/routes/hunter/HuntList.svelte
+++ b/src/routes/hunter/HuntList.svelte
@@ -48,13 +48,19 @@
 
 <div class="p-4 pb-20">
   <div class="tabs tabs-boxed bg-base-200 mb-4">
-    <button class="tab flex-1" class:tab-active={tab === 'active'} onclick={() => tab = 'active'}>
+    <button
+      class="tab flex-1 font-bold transition-all {tab === 'active' ? 'bg-primary text-primary-content rounded-lg' : 'text-base-content/40'}"
+      onclick={() => tab = 'active'}
+    >
       Active
-      {#if ongoing.length > 0}<span class="badge badge-primary badge-sm ml-1">{ongoing.length}</span>{/if}
+      {#if ongoing.length > 0}<span class="badge badge-md ml-1 {tab === 'active' ? 'badge-outline' : 'badge-primary'}">{ongoing.length}</span>{/if}
     </button>
-    <button class="tab flex-1" class:tab-active={tab === 'upcoming'} onclick={() => tab = 'upcoming'}>
+    <button
+      class="tab flex-1 font-bold transition-all {tab === 'upcoming' ? 'bg-primary text-primary-content rounded-lg' : 'text-base-content/40'}"
+      onclick={() => tab = 'upcoming'}
+    >
       Upcoming
-      {#if upcoming.length > 0}<span class="badge badge-info badge-sm ml-1">{upcoming.length}</span>{/if}
+      {#if upcoming.length > 0}<span class="badge badge-md ml-1 {tab === 'upcoming' ? 'badge-outline' : 'badge-info'}">{upcoming.length}</span>{/if}
     </button>
   </div>