diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index ff587dde..089214a2 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -65,17 +65,6 @@
         opacity: 1;
     }
 
-    .sidebar-tab:focus-visible {
-        box-shadow: 0 0 0 3px var(--blue) inset;
-        outline: none;
-        z-index: 1;
-    }
-
-    .sidebar-tab.active:focus-visible {
-        background: var(--blue);
-        color: var(--sidebar-highlight);
-    }
-
     @media (hover: hover) {
         .sidebar-tab:hover {
             opacity: 1;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 931c283f..42421512 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -129,7 +129,7 @@
         box-shadow: 0 0 0 1.5px var(--button-stroke) inset;
     }
 
-    :global(button:focus-visible) {
+    :global(:focus-visible) {
         box-shadow: 0 0 0 2px var(--blue) inset;
         outline: none;
         z-index: 1;
@@ -144,6 +144,13 @@
         color: var(--primary);
     }
 
+    /* important is used because active class is toggled by state */
+    /* and added to the end of the list, taking priority */
+    :global(.active:focus-visible) {
+        background: var(--blue) !important;
+        color: var(--sidebar-highlight) !important;
+    }
+
     @media (hover: hover) {
         :global(button:hover) {
             background-color: var(--button-hover);