diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index 19271eb7..dc610b5a 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -6,17 +6,38 @@
 @media (prefers-color-scheme: dark) {
   .navbar {
     background-color: var(--bulma-dark);
+    &-item {
+      --bulma-navbar-item-color: hsl(
+        var(--bulma-navbar-invert-h),
+        var(--bulma-navbar-invert-s),
+        var(--bulma-navbar-item-color-invert-l)
+      );
+      --bulma-navbar-item-background-l: var(--bulma-light-invert-l);
+    }
   }
-  .navbar-item {
-    --bulma-navbar-item-color: hsl(
-      var(--bulma-navbar-invert-h),
-      var(--bulma-navbar-invert-s),
-      var(--bulma-navbar-item-color-invert-l)
-    );
-    --bulma-navbar-item-background-l: var(--bulma-light-invert-l);
+}
+
+button.navbar-item {
+  background-color: hsla(
+    var(--bulma-navbar-h),
+    var(--bulma-navbar-s),
+    calc(
+      var(--bulma-navbar-item-background-l) +
+        var(--bulma-navbar-item-background-l-delta)
+    ),
+    var(--bulma-navbar-item-background-a)
+  );
+  &:hover {
+    --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta);
+    --bulma-navbar-item-background-a: 1;
   }
 }
 
+.navbar-item {
+  width: var(--bulma-navbar-height);
+  justify-content: center;
+}
+
 .is-disabled {
   cursor: not-allowed;
   opacity: 0.5;
@@ -25,11 +46,6 @@
   }
 }
 
-.navbar-item {
-  width: var(--bulma-navbar-height);
-  justify-content: center;
-}
-
 .media:first-of-type {
   padding-top: 1rem;
 }