diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index c2a430b8d..9ae0de1d5 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -388,6 +388,10 @@ function more(ev: MouseEvent) {
 			> .middle {
 				flex: 0.1;
 
+				> a {
+					text-decoration: none;
+				}
+
 				> .divider {
 					margin: 16px 16px;
 					border-top: solid 0.5px var(--divider);
@@ -427,17 +431,6 @@ function more(ev: MouseEvent) {
 						text-overflow: ellipsis;
 					}
 
-					&:hover,
-					&:focus-within {
-						text-decoration: none;
-						color: var(--navHoverFg);
-						transition: all 0.4s ease;
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
 					&:hover,
 					&:focus-within,
 					&.active {
@@ -456,6 +449,18 @@ function more(ev: MouseEvent) {
 							right: 0;
 							bottom: 0;
 							border-radius: 999px;
+						}
+					}
+
+					&:hover,
+					&:focus-within {
+						&:before {
+							background: var(--panelHighlight);
+						}
+					}
+
+					&.active {
+						&:before {
 							background: var(--accentedBg);
 						}
 					}
@@ -568,6 +573,10 @@ function more(ev: MouseEvent) {
 			> .middle {
 				flex: 0.1;
 
+				> a {
+					text-decoration: none;
+				}
+
 				> .divider {
 					margin: 8px auto;
 					width: calc(100% - 32px);
@@ -620,7 +629,6 @@ function more(ev: MouseEvent) {
 							right: 0;
 							bottom: 0;
 							border-radius: 999px;
-							background: var(--accentedBg);
 						}
 
 						> .icon,
@@ -628,6 +636,19 @@ function more(ev: MouseEvent) {
 							opacity: 1;
 						}
 					}
+					
+					&:hover,
+					&:focus-within {
+						&:before {
+							background: var(--panelHighlight);
+						}
+					}
+
+					&.active {
+						&:before {
+							background: var(--accentedBg);
+						}
+					}
 				}
 			}
 		}