diff --git a/layouts/partials/header/header-mobile-option-nested.html b/layouts/partials/header/header-mobile-option-nested.html
index 9f21bb5d..a1bfc618 100644
--- a/layouts/partials/header/header-mobile-option-nested.html
+++ b/layouts/partials/header/header-mobile-option-nested.html
@@ -1,11 +1,11 @@
 <li class="mt-1">
-    <a class="flex items-center">
+    <a class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
         {{ if .Pre }}
         <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </span>
         {{ end }}
-        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        <p class="text-bg font-bg" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
         </p>
         <span>
@@ -16,13 +16,13 @@
 {{ range .Children }}
 <li class="mt-1">
     <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
-        ) }} target="_blank" {{ end }} class="flex items-center">
+        ) }} target="_blank" {{ end }} class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
         {{ if .Pre }}
         <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </span>
         {{ end }}
-        <p class="text-sm font-small text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        <p class="text-sm font-small" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
         </p>
     </a>
diff --git a/layouts/partials/header/header-mobile-option-simple.html b/layouts/partials/header/header-mobile-option-simple.html
index acc4cdf1..5ffb13dd 100644
--- a/layouts/partials/header/header-mobile-option-simple.html
+++ b/layouts/partials/header/header-mobile-option-simple.html
@@ -1,12 +1,12 @@
 <li class="mt-1">
     <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
-        ) }} target="_blank" {{ end }} class="flex items-center">
+        ) }} target="_blank" {{ end }} class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
         {{ if .Pre }}
         <div {{ if and .Pre .Name}} class="mr-2" {{ end }}>
             {{ partial "icon.html" .Pre }}
         </div>
         {{ end }}
-        <p class="text-bg font-bg text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+        <p class="text-bg font-bg" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
         </p>
     </a>
diff --git a/layouts/partials/header/header-option-nested.html b/layouts/partials/header/header-option-nested.html
index 068f30e0..ecb95c0a 100644
--- a/layouts/partials/header/header-option-nested.html
+++ b/layouts/partials/header/header-option-nested.html
@@ -6,7 +6,7 @@
     </span>
     {{ end }}
     <a {{ if .URL }} href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
-      target="_blank" {{ end }} {{ end }} class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+      target="_blank" {{ end }} {{ end }} class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400" title="{{ .Title }}">
       {{ .Name | markdownify | emojify }}
     </a>
     <span>
@@ -18,13 +18,13 @@
       <div class="flex flex-col space-y-3">
         {{ range .Children }}
         <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
-          target="_blank" {{ end }} class="flex items-center">
+          target="_blank" {{ end }} class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
           {{ if .Pre }}
           <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
             {{ partial "icon.html" .Pre }}
           </span>
           {{ end }}
-          <p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+          <p class="text-sm font-sm" title="{{ .Title }}">
             {{ .Name | markdownify | emojify }}
           </p>
         </a>
diff --git a/layouts/partials/header/header-option-simple.html b/layouts/partials/header/header-option-simple.html
index d4174601..8d4808f8 100644
--- a/layouts/partials/header/header-option-simple.html
+++ b/layouts/partials/header/header-option-simple.html
@@ -1,11 +1,11 @@
 <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{
-    end }} class="flex items-center">
+    end }} class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
     {{ if .Pre }}
     <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
         {{ partial "icon.html" .Pre }}
     </span>
     {{ end }}
-    <p class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+    <p class="text-base font-medium" title="{{ .Title }}">
         {{ .Name | markdownify | emojify }}
     </p>
 </a>
\ No newline at end of file