diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index cc7d889..8b95074 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -95,7 +95,10 @@ ul { list-style: none; padding-left: 0; }
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-color) 30%, transparent 30%);
+  background: linear-gradient(to right,
+      var(--accent-color) 0%,
+      var(--background-color) 30%,
+      var(--background-color) 100%);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.3s ease;
@@ -121,11 +124,14 @@ ul { list-style: none; padding-left: 0; }
 }
 
 .nav-link.active {
-  background-color: var(--accent-color);
-  color: white;
+  color: var(--text-color);
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
 }
 
+.nav-link.active::before {
+  transform: scaleX(1);
+}
+
 /* Scrollbar styling using primary color */
 .custom-scroll::-webkit-scrollbar { width: 8px; }
 .custom-scroll::-webkit-scrollbar-track { background: transparent; }