diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index d9a0601..34f862b 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -62,8 +62,8 @@ const handleLinkClick = () => {
 
     <!-- navegación -->
     <nav class="flex-1 overflow-y-auto custom-scroll pr-1 pt-4 md:pt-0">
-      <ul class="space-y-2 px-2">
-        <li v-for="l in links" :key="l.to">
+      <ul class="px-2">
+        <li v-for="l in links" :key="l.to" class="mb-2 last:mb-0">
           <RouterLink
             :to="l.to"
             class="nav-link flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
@@ -89,7 +89,9 @@ ul { list-style: none; padding-left: 0; }
   background-color: var(--background-color);
   border: 1px solid var(--accent-color);
   overflow: hidden;
-  transition: color 0.3s ease;
+  border-radius: 0.375rem;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  z-index: 0;
 }
 
 .nav-link::before {
@@ -98,16 +100,17 @@ ul { list-style: none; padding-left: 0; }
   inset: 0;
   background: linear-gradient(to right,
       var(--accent-color) 0%,
+      var(--accent-color) 20%,
       var(--background-color) 30%,
       var(--background-color) 100%);
-  transform: scaleX(0);
-  transform-origin: left;
+  transform: translateX(-100%);
   transition: transform 0.3s ease;
   z-index: -1;
 }
 
-.nav-link:hover::before {
-  transform: scaleX(1);
+.nav-link:hover::before,
+.nav-link.active::before {
+  transform: translateX(0);
 }
 
 .nav-link:hover {
@@ -129,10 +132,6 @@ ul { list-style: none; padding-left: 0; }
   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; }