diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index c437e3da8..7fd0a80f3 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -168,28 +168,28 @@
           <li v-if="currentActor?.id">
             <router-link
               :to="{ name: RouteName.MY_EVENTS }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 border-b md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 text-zinc-400 md:dark:hover:text-white hover:bg-zinc-700 hover:text-white md:dark:hover:bg-transparent border-gray-700"
               >{{ t("My events") }}</router-link
             >
           </li>
           <li v-if="currentActor?.id">
             <router-link
               :to="{ name: RouteName.MY_GROUPS }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 border-b md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 text-zinc-400 md:dark:hover:text-white hover:bg-zinc-700 hover:text-white md:dark:hover:bg-transparent border-gray-700"
               >{{ t("My groups") }}</router-link
             >
           </li>
           <li v-if="!currentActor?.id">
             <router-link
               :to="{ name: RouteName.LOGIN }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 border-b md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 text-zinc-400 md:dark:hover:text-white hover:bg-zinc-700 hover:text-white md:dark:hover:bg-transparent border-gray-700"
               >{{ t("Login") }}</router-link
             >
           </li>
           <li v-if="!currentActor?.id && canRegister">
             <router-link
               :to="{ name: RouteName.REGISTER }"
-              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              class="block py-2 pr-4 pl-3 border-b md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 text-zinc-400 md:dark:hover:text-white hover:bg-zinc-700 hover:text-white md:dark:hover:bg-transparent border-gray-700"
               >{{ t("Register") }}</router-link
             >
           </li>