diff --git a/ui/src/App.vue b/ui/src/App.vue
index 2aeb383..296e375 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -66,7 +66,7 @@ watchEffect(() => {
     <!-- contenido principal -->
     <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
       <router-view v-slot="{ Component }">
-        <transition name="fade" mode="out-in">
+        <transition name="slide-fade" mode="out-in">
           <component :is="Component" class="flex-1 overflow-auto" />
         </transition>
       </router-view>
@@ -78,18 +78,25 @@ watchEffect(() => {
 /* Scoped styles remain, global styles are in style.css */
 /* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out; /* Increased duration for a smoother slide */
 }
 
-.fade-enter-from,
-.fade-leave-to {
+.slide-fade-enter-from {
   opacity: 0;
+  transform: translateX(-20px); /* Slide in from the left */
 }
 
-.fade-enter-to,
-.fade-leave-from {
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(20px); /* Slide out to the right */
+}
+
+/* Ensure content is fully opaque and in place when active/not transitioning */
+.slide-fade-enter-to,
+.slide-fade-leave-from {
   opacity: 1;
+  transform: translateX(0);
 }
 </style>