diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index 8b95074..d9a0601 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -54,7 +54,7 @@ const handleLinkClick = () => {
     <div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 md:border-none"
          style="border-bottom-color: var(--secondary-color); border-bottom-width: 1px;">
       <span class="text-lg font-semibold md:hidden" style="color: var(--primary-color);">Núcleo</span>
-      <button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition"
+      <button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition duration-200"
               @click="ui.toggleSidebar">
         ✕
       </button>
@@ -62,7 +62,7 @@ const handleLinkClick = () => {
 
     <!-- navegación -->
     <nav class="flex-1 overflow-y-auto custom-scroll pr-1 pt-4 md:pt-0">
-      <ul class="space-y-1 px-2">
+      <ul class="space-y-2 px-2">
         <li v-for="l in links" :key="l.to">
           <RouterLink
             :to="l.to"
@@ -86,9 +86,10 @@ ul { list-style: none; padding-left: 0; }
 .nav-link {
   position: relative;
   color: var(--text-color);
-  background-color: transparent;
+  background-color: var(--background-color);
   border: 1px solid var(--accent-color);
   overflow: hidden;
+  transition: color 0.3s ease;
 }
 
 .nav-link::before {