diff --git a/app/components/malio/tab/TabList.vue b/app/components/malio/tab/TabList.vue
index 76adde3..fe0ab04 100644
--- a/app/components/malio/tab/TabList.vue
+++ b/app/components/malio/tab/TabList.vue
@@ -7,8 +7,10 @@
         data-test="tab-prev"
         :disabled="!canPrev"
         :class="[
-          'text-m-primary',
-          canPrev ? 'cursor-pointer hover:text-m-primary/70' : 'cursor-not-allowed text-m-primary/30',
+          'transition-colors',
+          canPrev
+            ? 'cursor-pointer text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active'
+            : 'cursor-not-allowed text-m-disabled',
         ]"
         @click="prev"
       >
@@ -56,8 +58,10 @@
         data-test="tab-next"
         :disabled="!canNext"
         :class="[
-          'text-m-primary',
-          canNext ? 'cursor-pointer hover:text-m-primary/70' : 'cursor-not-allowed text-m-primary/30',
+          'transition-colors',
+          canNext
+            ? 'cursor-pointer text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active'
+            : 'cursor-not-allowed text-m-disabled',
         ]"
         @click="next"
       >