diff --git a/layouts/partials/top-nav.html b/layouts/partials/top-nav.html
index 5a670e07a9..416266c25a 100644
--- a/layouts/partials/top-nav.html
+++ b/layouts/partials/top-nav.html
@@ -2,15 +2,14 @@
 {{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
 <div>
   <nav>
-    <ul class="flex gap-4 md:hidden">
+    <ul class="box-content flex mt-1 gap-4 md:hidden">
       {{ range site.Menus.main }}
-        <li
-          class="pb-1 mt-2 underline-offset-8 decoration-2 hover:underline hover:opacity-75
-          {{- if eq $firstSection .Name }}
-            underline
+      <li class="opacity-100 border-b-4 hover:opacity-100
+          {{- if not (eq $firstSection .Name) }}
+            opacity-60 border-blue-light dark:border-blue-dark-200 hover:border-blue-light-600 dark:hover:border-blue-dark-100
           {{- end }}">
-          <a href="{{ .URL }}">{{ .Name }}</a>
-        </li>
+        <a class="block py-1 px-2" href="{{ .URL }}">{{ .Name }}</a>
+      </li>
       {{ end }}
     </ul>
   </nav>