diff --git a/frontend/public/auth-bg.png b/frontend/public/auth-bg.png
new file mode 100644
index 0000000..a304a07
Binary files /dev/null and b/frontend/public/auth-bg.png differ
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a87bc5b..faca183 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -16,7 +16,11 @@ const authStore = useAuthStore()
 const favoritesStore = useFavoritesStore()
 
 const isSplashScreen = computed(() => route.name === 'splash')
-const isAuthScreen = computed(() => route.name === 'auth' || route.path === '/login')
+const isAuthScreen = computed(() => {
+  const name = route.name?.toString().toLowerCase() || ''
+  const path = route.path.toLowerCase()
+  return name.includes('auth') || path.includes('/login') || path.includes('/register')
+})
 
 onMounted(() => {
   themeStore.applyTheme()
diff --git a/frontend/src/components/auth/LoginForm.vue b/frontend/src/components/auth/LoginForm.vue
index 693c0d9..aa5cb67 100644
--- a/frontend/src/components/auth/LoginForm.vue
+++ b/frontend/src/components/auth/LoginForm.vue
@@ -25,7 +25,6 @@ const handleLogin = async () => {
   try {
     await authStore.login(email.value.trim().toLowerCase(), password.value, keepSession.value)
     
-    // Al iniciar sesión, el store ya tiene el rol. Redirigir según corresponda.
     const role = (authStore.role || 'PASSENGER').toUpperCase()
     if (role === 'ADMIN') router.push('/admin')
     else if (role === 'DRIVER') router.push('/driver')
@@ -46,252 +45,288 @@ const handleLogin = async () => {
 </script>
 
 <template>
-  <div class="login-form">
-    <form @submit.prevent="handleLogin" class="form-container">
-      <!-- Email -->
-      <div class="field">
-        <label class="field-label">{{ t('auth.emailLabel') }}</label>
-        <div class="input-wrap">
-          <span class="material-icons input-icon">alternate_email</span>
-          <input
-            v-model="email"
-            type="email"
-            :placeholder="t('auth.emailPlaceholder')"
-            required
-            class="field-input"
-          />
+  <div class="login-form-content">
+    <form @submit.prevent="handleLogin" class="premium-form">
+      <!-- Welcome Text (Mobile-ish) -->
+      <div class="welcome-header">
+        <h2>{{ t('auth.loginTab') }}</h2>
+        <p>Bienvenido de vuelta a SIBU</p>
+      </div>
+
+      <!-- Input Group -->
+      <div class="input-group">
+        <div class="field-container">
+          <label>{{ t('auth.emailLabel') }}</label>
+          <div class="input-inner">
+            <span class="material-icons i-icon">mail_outline</span>
+            <input
+              v-model="email"
+              type="email"
+              placeholder="tu@correo.com"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="field-container">
+          <div class="label-row">
+            <label>{{ t('auth.passLabel') }}</label>
+          </div>
+          <div class="input-inner">
+            <span class="material-icons i-icon">lock_outline</span>
+            <input
+              v-model="password"
+              :type="showPassword ? 'text' : 'password'"
+              placeholder="••••••••"
+              required
+            />
+            <button type="button" class="eye-btn" @click="showPassword = !showPassword">
+              <span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
+            </button>
+          </div>
         </div>
       </div>
 
-      <!-- Password -->
-      <div class="field">
-        <label class="field-label">{{ t('auth.passLabel') }}</label>
-        <div class="input-wrap">
-          <span class="material-icons input-icon">lock</span>
-          <input
-            v-model="password"
-            :type="showPassword ? 'text' : 'password'"
-            placeholder="••••••••"
-            required
-            class="field-input"
-          />
-          <button
-            type="button"
-            class="toggle-pw"
-            @click="showPassword = !showPassword"
-          >
-            <span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- Keep Session -->
-      <div class="options-row">
-        <label class="checkbox-container">
+      <div class="form-options">
+        <label class="custom-checkbox">
           <input type="checkbox" v-model="keepSession" />
           <span class="checkmark"></span>
-          <span class="checkbox-label">{{ t('auth.keepSession') }}</span>
+          <span class="cb-text">{{ t('auth.keepSession') }}</span>
         </label>
       </div>
 
-      <!-- Error Message -->
-      <transition name="shake">
-        <div v-if="errorMessage" class="error-box">
-          <span class="material-icons">error_outline</span>
-          {{ errorMessage }}
+      <!-- Error UI -->
+      <Transition name="shake">
+        <div v-if="errorMessage" class="error-toast">
+          <span class="material-icons">warning_amber</span>
+          <span>{{ errorMessage }}</span>
         </div>
-      </transition>
+      </Transition>
 
-      <!-- Submit Button -->
-      <button type="submit" class="submit-btn" :disabled="isLoading">
-        <span v-if="isLoading" class="loader"></span>
+      <button type="submit" class="submit-action" :disabled="isLoading">
+        <span v-if="isLoading" class="loader-white"></span>
         <span v-else>{{ t('auth.loginTab') }}</span>
+        <span v-if="!isLoading" class="material-icons">arrow_forward</span>
       </button>
 
-      <!-- Switch -->
-      <p class="switch-p">
-        {{ t('auth.noAccount') }}
-        <button type="button" @click="emit('toggle')" class="switch-btn">
+      <div class="switch-footer">
+        <span>{{ t('auth.noAccount') }}</span>
+        <button type="button" @click="emit('toggle')" class="text-link">
           {{ t('auth.registerHere') }}
         </button>
-      </p>
+      </div>
     </form>
   </div>
 </template>
 
 <style scoped>
-.login-form {
-  padding: 1.5rem 2rem 2rem;
+.login-form-content {
+  padding: 1.5rem 2rem;
 }
 
-.form-container {
+.premium-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.welcome-header {
+  margin-bottom: 0.5rem;
+}
+
+.welcome-header h2 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  margin: 0;
+  color: #fff;
+}
+
+.welcome-header p {
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.5);
+  margin: 0.25rem 0 0;
+}
+
+.input-group {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
 }
 
-.field {
+.field-container {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.field-label {
-  font-size: 0.75rem;
+.field-container label {
+  font-size: 0.8rem;
   font-weight: 700;
-  color: var(--text-secondary);
-  padding-left: 0.5rem;
+  color: rgba(255,255,255,0.6);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding-left: 0.25rem;
 }
 
-.input-wrap {
+.input-inner {
   position: relative;
   display: flex;
   align-items: center;
 }
 
-.input-icon {
+.i-icon {
   position: absolute;
   left: 1rem;
-  font-size: 1.1rem;
-  color: var(--text-secondary);
-  opacity: 0.7;
+  font-size: 1.25rem;
+  color: rgba(255,255,255,0.4);
 }
 
-.field-input {
+.input-inner input {
   width: 100%;
-  padding: 0.875rem 1rem 0.875rem 2.75rem;
-  background: var(--bg-primary);
-  border: 1.5px solid var(--border-color);
+  background: rgba(255,255,255,0.05);
+  border: 1.5px solid rgba(255,255,255,0.1);
   border-radius: 1rem;
-  color: var(--text-primary);
+  padding: 1rem 1rem 1rem 3rem;
+  color: #fff;
   font-family: inherit;
-  font-size: 0.95rem;
+  font-size: 1rem;
   transition: all 0.2s;
 }
 
-.field-input:focus {
+.input-inner input:focus {
   outline: none;
+  background: rgba(255,255,255,0.08);
   border-color: var(--active-color);
   box-shadow: 0 0 0 4px rgba(254, 231, 21, 0.1);
 }
 
-.toggle-pw {
+.eye-btn {
   position: absolute;
   right: 1rem;
   background: none;
   border: none;
-  color: var(--text-secondary);
+  color: rgba(255,255,255,0.4);
   cursor: pointer;
   display: flex;
 }
 
-/* Checkbox Estilizado */
-.checkbox-container {
+/* Checkbox */
+.custom-checkbox {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   cursor: pointer;
+  user-select: none;
 }
 
-.checkbox-container input {
+.custom-checkbox input {
   display: none;
 }
 
 .checkmark {
   width: 1.25rem;
   height: 1.25rem;
-  border: 1.5px solid var(--border-color);
+  background: rgba(255,255,255,0.05);
+  border: 1.5px solid rgba(255,255,255,0.1);
   border-radius: 6px;
   position: relative;
   transition: all 0.2s;
 }
 
-.checkbox-container input:checked + .checkmark {
+.custom-checkbox input:checked + .checkmark {
   background: var(--active-color);
   border-color: var(--active-color);
 }
 
 .checkmark:after {
-  content: "check";
-  font-family: 'Material Icons';
+  content: "";
   position: absolute;
-  font-size: 0.9rem;
-  color: #101820;
+  left: 6px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid #000;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
   display: none;
 }
 
-.checkbox-container input:checked + .checkmark:after {
+.custom-checkbox input:checked + .checkmark:after {
   display: block;
 }
 
-.checkbox-label {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text-secondary);
+.cb-text {
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.7);
 }
 
-/* Botones */
-.submit-btn {
+/* Submit Action */
+.submit-action {
   width: 100%;
-  padding: 1rem;
+  padding: 1.1rem;
   background: var(--active-color);
   color: #101820;
   border: none;
-  border-radius: 1rem;
+  border-radius: 1.25rem;
+  font-size: 1.1rem;
   font-weight: 800;
-  font-size: 1rem;
   cursor: pointer;
-  margin-top: 0.5rem;
-  transition: all 0.2s;
   display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 0.75rem;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
-.submit-btn:disabled {
-  opacity: 0.6;
+.submit-action:hover:not(:disabled) {
+  transform: scale(1.02);
+  box-shadow: 0 10px 20px rgba(254, 231, 21, 0.2);
+}
+
+.submit-action:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.submit-action:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
-.submit-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(254, 231, 21, 0.3);
-}
-
-.error-box {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
-  padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
-  font-size: 0.85rem;
+.error-toast {
+  background: rgba(239, 68, 68, 0.15);
+  color: #fb7185;
+  padding: 0.875rem 1rem;
+  border-radius: 1rem;
+  font-size: 0.9rem;
   font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
+  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
-.switch-p {
+.switch-footer {
   text-align: center;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.5);
 }
 
-.switch-btn {
+.text-link {
   background: none;
   border: none;
   color: var(--active-color);
   font-weight: 800;
-  cursor: pointer;
   padding: 0;
-  margin-left: 0.25rem;
+  margin-left: 0.5rem;
+  cursor: pointer;
   text-decoration: underline;
 }
 
-.loader {
-  width: 1.2rem;
-  height: 1.2rem;
-  border: 2px solid rgba(16, 24, 32, 0.3);
-  border-top-color: #101820;
+.loader-white {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 3px solid rgba(0,0,0,0.1);
+  border-top-color: #000;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
diff --git a/frontend/src/components/auth/RegisterForm.vue b/frontend/src/components/auth/RegisterForm.vue
index 733f880..35ea533 100644
--- a/frontend/src/components/auth/RegisterForm.vue
+++ b/frontend/src/components/auth/RegisterForm.vue
@@ -34,7 +34,6 @@ const handleRegister = async () => {
     
     isSuccess.value = true
     setTimeout(() => {
-      // Redirigir según el rol asignado (usualmente PASSENGER)
       const role = (authStore.role || 'PASSENGER').toUpperCase()
       if (role === 'ADMIN') router.push('/admin')
       else if (role === 'DRIVER') router.push('/driver')
@@ -56,309 +55,358 @@ const handleRegister = async () => {
 </script>
 
 <template>
-  <div class="register-form">
-    <!-- Éxito -->
-    <div v-if="isSuccess" class="success-view">
-      <div class="success-icon-wrap">
+  <div class="register-form-content">
+    <div v-if="isSuccess" class="success-wrap">
+      <div class="glow-circle">
         <span class="material-icons">check_circle</span>
       </div>
-      <h3>{{ t('auth.successTitle') }}</h3>
-      <p>{{ t('common.loading') }}</p>
+      <h2>¡Bienvenido!</h2>
+      <p>Tu cuenta ha sido creada exitosamente.</p>
+      <div class="dots-loader">
+        <span></span><span></span><span></span>
+      </div>
     </div>
 
-    <!-- Formulario -->
-    <form v-else @submit.prevent="handleRegister" class="form-container">
-      <!-- Full Name -->
-      <div class="field">
-        <label class="field-label">{{ t('auth.fullNameLabel') }}</label>
-        <div class="input-wrap">
-          <span class="material-icons input-icon">person</span>
-          <input
-            v-model="fullName"
-            type="text"
-            :placeholder="t('auth.fullNamePlaceholder')"
-            required
-            class="field-input"
-          />
+    <form v-else @submit.prevent="handleRegister" class="premium-form">
+      <div class="welcome-header">
+        <h2>{{ t('auth.registerTab') }}</h2>
+        <p>Únete a la nueva red de transporte</p>
+      </div>
+
+      <div class="input-group">
+        <div class="field-container">
+          <label>{{ t('auth.fullNameLabel') }}</label>
+          <div class="input-inner">
+            <span class="material-icons i-icon">badge</span>
+            <input
+              v-model="fullName"
+              type="text"
+              :placeholder="t('auth.fullNamePlaceholder')"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="field-container">
+          <label>{{ t('auth.emailLabel') }}</label>
+          <div class="input-inner">
+            <span class="material-icons i-icon">mail_outline</span>
+            <input
+              v-model="email"
+              type="email"
+              placeholder="tu@correo.com"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="field-container">
+          <label>{{ t('auth.passLabel') }}</label>
+          <div class="input-inner">
+            <span class="material-icons i-icon">lock_outline</span>
+            <input
+              v-model="password"
+              :type="showPassword ? 'text' : 'password'"
+              :placeholder="t('auth.passMin8')"
+              required
+              minlength="8"
+            />
+            <button type="button" class="eye-btn" @click="showPassword = !showPassword">
+              <span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
+            </button>
+          </div>
         </div>
       </div>
 
-      <!-- Email -->
-      <div class="field">
-        <label class="field-label">{{ t('auth.emailLabel') }}</label>
-        <div class="input-wrap">
-          <span class="material-icons input-icon">alternate_email</span>
-          <input
-            v-model="email"
-            type="email"
-            :placeholder="t('auth.emailPlaceholder')"
-            required
-            class="field-input"
-          />
-        </div>
-      </div>
-
-      <!-- Password -->
-      <div class="field">
-        <label class="field-label">{{ t('auth.passLabel') }}</label>
-        <div class="input-wrap">
-          <span class="material-icons input-icon">lock</span>
-          <input
-            v-model="password"
-            :type="showPassword ? 'text' : 'password'"
-            :placeholder="t('auth.passMin8')"
-            required
-            minlength="8"
-            class="field-input"
-          />
-          <button
-            type="button"
-            class="toggle-pw"
-            @click="showPassword = !showPassword"
-          >
-            <span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- Smart Location -->
-      <div class="options-row">
-        <label class="checkbox-container">
+      <div class="form-options">
+        <label class="custom-checkbox">
           <input type="checkbox" v-model="autoLocation" />
           <span class="checkmark"></span>
-          <span class="checkbox-label">{{ t('auth.smartLocation') }}</span>
+          <span class="cb-text">{{ t('auth.smartLocation') }}</span>
         </label>
       </div>
 
-      <!-- Error Message -->
-      <transition name="shake">
-        <div v-if="errorMessage" class="error-box">
-          <span class="material-icons">error_outline</span>
-          {{ errorMessage }}
+      <!-- Error UI -->
+      <Transition name="shake">
+        <div v-if="errorMessage" class="error-toast">
+          <span class="material-icons">warning_amber</span>
+          <span>{{ errorMessage }}</span>
         </div>
-      </transition>
+      </Transition>
 
-      <!-- Submit Button -->
-      <button type="submit" class="submit-btn" :disabled="isLoading">
-        <span v-if="isLoading" class="loader"></span>
+      <button type="submit" class="submit-action" :disabled="isLoading">
+        <span v-if="isLoading" class="loader-white"></span>
         <span v-else>{{ t('auth.registerTab') }}</span>
+        <span v-if="!isLoading" class="material-icons">person_add_alt</span>
       </button>
 
-      <!-- Switch -->
-      <p class="switch-p">
-        {{ t('auth.hasAccount') }}
-        <button type="button" @click="emit('toggle')" class="switch-btn">
+      <div class="switch-footer">
+        <span>{{ t('auth.hasAccount') }}</span>
+        <button type="button" @click="emit('toggle')" class="text-link">
           {{ t('auth.loginHere') }}
         </button>
-      </p>
+      </div>
     </form>
   </div>
 </template>
 
 <style scoped>
-.register-form {
-  padding: 1.5rem 2rem 2rem;
+.register-form-content {
+  padding: 1.5rem 2rem;
 }
 
-.success-view {
+.success-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
-  padding: 2rem 0;
   text-align: center;
-  animation: zoomIn 0.4s ease-out;
+  padding: 3rem 0;
+  animation: zoomIn 0.5s ease-out;
 }
 
-@keyframes zoomIn {
-  from { opacity: 0; transform: scale(0.9); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-.success-icon-wrap {
-  width: 80px;
-  height: 80px;
+.glow-circle {
+  width: 90px;
+  height: 90px;
   background: rgba(74, 222, 128, 0.1);
   color: #4ade80;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 0 30px rgba(74, 222, 128, 0.2);
 }
 
-.success-icon-wrap .material-icons {
-  font-size: 3.5rem;
+.glow-circle .material-icons {
+  font-size: 4rem;
 }
 
-.form-container {
+.success-wrap h2 {
+  font-size: 1.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.success-wrap p {
+  color: rgba(255,255,255,0.6);
+  margin-bottom: 2rem;
+}
+
+.dots-loader {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.dots-loader span {
+  width: 8px;
+  height: 8px;
+  background: var(--active-color);
+  border-radius: 50%;
+  animation: dotBlink 1.4s infinite;
+}
+
+.dots-loader span:nth-child(2) { animation-delay: 0.2s; }
+.dots-loader span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dotBlink {
+  0%, 80%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+
+.premium-form {
   display: flex;
   flex-direction: column;
-  gap: 1.1rem;
+  gap: 1.25rem;
 }
 
-.field {
+.welcome-header h2 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  margin: 0;
+  color: #fff;
+}
+
+.welcome-header p {
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.5);
+  margin: 0.25rem 0 0;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.field-container {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
 }
 
-.field-label {
+.field-container label {
   font-size: 0.75rem;
   font-weight: 700;
-  color: var(--text-secondary);
-  padding-left: 0.5rem;
+  color: rgba(255,255,255,0.5);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding-left: 0.25rem;
 }
 
-.input-wrap {
+.input-inner {
   position: relative;
   display: flex;
   align-items: center;
 }
 
-.input-icon {
+.i-icon {
   position: absolute;
   left: 1rem;
-  font-size: 1.1rem;
-  color: var(--text-secondary);
-  opacity: 0.7;
+  font-size: 1.25rem;
+  color: rgba(255,255,255,0.4);
 }
 
-.field-input {
+.input-inner input {
   width: 100%;
-  padding: 0.8rem 1rem 0.8rem 2.75rem;
-  background: var(--bg-primary);
-  border: 1.5px solid var(--border-color);
+  background: rgba(255,255,255,0.05);
+  border: 1.5px solid rgba(255,255,255,0.1);
   border-radius: 1rem;
-  color: var(--text-primary);
+  padding: 0.85rem 1rem 0.85rem 3rem;
+  color: #fff;
   font-family: inherit;
-  font-size: 0.95rem;
+  font-size: 1rem;
   transition: all 0.2s;
 }
 
-.field-input:focus {
+.input-inner input:focus {
   outline: none;
+  background: rgba(255,255,255,0.08);
   border-color: var(--active-color);
   box-shadow: 0 0 0 4px rgba(254, 231, 21, 0.1);
 }
 
-.toggle-pw {
+.eye-btn {
   position: absolute;
   right: 1rem;
   background: none;
   border: none;
-  color: var(--text-secondary);
+  color: rgba(255,255,255,0.4);
   cursor: pointer;
   display: flex;
 }
 
-/* Checkbox Estilizado */
-.checkbox-container {
+/* Checkbox */
+.custom-checkbox {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   cursor: pointer;
 }
 
-.checkbox-container input {
+.custom-checkbox input {
   display: none;
 }
 
 .checkmark {
   width: 1.25rem;
   height: 1.25rem;
-  border: 1.5px solid var(--border-color);
+  background: rgba(255,255,255,0.05);
+  border: 1.5px solid rgba(255,255,255,0.1);
   border-radius: 6px;
   position: relative;
   transition: all 0.2s;
 }
 
-.checkbox-container input:checked + .checkmark {
+.custom-checkbox input:checked + .checkmark {
   background: var(--active-color);
   border-color: var(--active-color);
 }
 
 .checkmark:after {
-  content: "check";
-  font-family: 'Material Icons';
+  content: "";
   position: absolute;
-  font-size: 0.9rem;
-  color: #101820;
+  left: 6px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid #000;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
   display: none;
 }
 
-.checkbox-container input:checked + .checkmark:after {
+.custom-checkbox input:checked + .checkmark:after {
   display: block;
 }
 
-.checkbox-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  line-height: 1.2;
+.cb-text {
+  font-size: 0.85rem;
+  color: rgba(255,255,255,0.6);
+  line-height: 1.3;
 }
 
-/* Botones */
-.submit-btn {
+/* Submit Action */
+.submit-action {
   width: 100%;
-  padding: 1rem;
+  padding: 1.1rem;
   background: var(--active-color);
   color: #101820;
   border: none;
-  border-radius: 1rem;
+  border-radius: 1.25rem;
+  font-size: 1.1rem;
   font-weight: 800;
-  font-size: 1rem;
   cursor: pointer;
-  margin-top: 0.5rem;
-  transition: all 0.2s;
   display: flex;
+  align-items: center;
   justify-content: center;
+  gap: 0.75rem;
+  transition: all 0.3s ease;
 }
 
-.submit-btn:disabled {
-  opacity: 0.6;
+.submit-action:hover:not(:disabled) {
+  transform: scale(1.02);
+  box-shadow: 0 10px 20px rgba(254, 231, 21, 0.2);
+}
+
+.submit-action:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
-.submit-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(254, 231, 21, 0.3);
-}
-
-.error-box {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
-  padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
-  font-size: 0.85rem;
+.error-toast {
+  background: rgba(239, 68, 68, 0.15);
+  color: #fb7185;
+  padding: 0.875rem 1rem;
+  border-radius: 1rem;
+  font-size: 0.9rem;
   font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
+  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
-.switch-p {
+.switch-footer {
   text-align: center;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: rgba(255,255,255,0.5);
 }
 
-.switch-btn {
+.text-link {
   background: none;
   border: none;
   color: var(--active-color);
   font-weight: 800;
-  cursor: pointer;
   padding: 0;
-  margin-left: 0.25rem;
+  margin-left: 0.5rem;
+  cursor: pointer;
   text-decoration: underline;
 }
 
-.loader {
-  width: 1.2rem;
-  height: 1.2rem;
-  border: 2px solid rgba(16, 24, 32, 0.3);
-  border-top-color: #101820;
+.loader-white {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 3px solid rgba(0,0,0,0.1);
+  border-top-color: #000;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -375,4 +423,9 @@ const handleRegister = async () => {
   30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
   40%, 60% { transform: translate3d(4px, 0, 0); }
 }
+
+@keyframes zoomIn {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
 </style>
diff --git a/frontend/src/views/AuthView.vue b/frontend/src/views/AuthView.vue
index d62f634..3c491f3 100644
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import LoginForm from '../components/auth/LoginForm.vue'
@@ -8,6 +8,11 @@ import RegisterForm from '../components/auth/RegisterForm.vue'
 const { t } = useI18n()
 const router = useRouter()
 const isLogin = ref(true)
+const mounted = ref(false)
+
+onMounted(() => {
+  mounted.value = true
+})
 
 const toggleAuth = () => {
   isLogin.value = !isLogin.value
@@ -15,233 +20,389 @@ const toggleAuth = () => {
 </script>
 
 <template>
-  <div class="auth-page">
-    <!-- Fondo Decorativo -->
-    <div class="bg-decoration">
-      <div class="circle circle-1"></div>
-      <div class="circle circle-2"></div>
+  <div class="auth-page" :class="{ 'is-mounted': mounted }">
+    <!-- Immersive Background -->
+    <div class="auth-bg-wrapper">
+      <div class="auth-bg-overlay"></div>
+      <img src="/auth-bg.png" alt="" class="auth-bg-image" />
     </div>
 
-    <!-- Contenido Principal -->
-    <div class="auth-container">
-      <!-- Botón Volver -->
-      <button @click="router.push('/')" class="back-btn">
-        <span class="material-icons">arrow_back</span>
-        <span>{{ t('auth.back') }}</span>
-      </button>
+    <!-- Main Content -->
+    <main class="auth-main">
+      <!-- Top Navigation -->
+      <nav class="auth-nav">
+        <button @click="router.push('/map')" class="glass-btn back-btn">
+          <span class="material-icons">arrow_back</span>
+          <span>{{ t('auth.back') }}</span>
+        </button>
+      </nav>
 
-      <div class="auth-card">
-        <!-- Header con Logo -->
-        <header class="auth-header">
-          <img src="/sibu.png" alt="SIBU Logo" class="auth-logo" />
-          <p class="auth-subtitle">{{ t('auth.brandingSubtitle') }}</p>
-        </header>
-
-        <!-- Selector de Pestañas -->
-        <nav class="auth-tabs">
-          <button 
-            class="tab-btn" 
-            :class="{ active: isLogin }" 
-            @click="isLogin = true"
-          >
-            {{ t('auth.loginTab') }}
-          </button>
-          <button 
-            class="tab-btn" 
-            :class="{ active: !isLogin }" 
-            @click="isLogin = false"
-          >
-            {{ t('auth.registerTab') }}
-          </button>
-          <div class="tab-indicator" :class="{ 'on-right': !isLogin }"></div>
-        </nav>
-
-        <!-- Contenido de Formularios -->
-        <div class="auth-body">
-          <div v-if="isLogin" class="form-wrapper">
-            <LoginForm @toggle="toggleAuth" />
-          </div>
-          <div v-else class="form-wrapper">
-            <RegisterForm @toggle="toggleAuth" @success="isLogin = true" />
+      <div class="auth-content-grid">
+        <!-- Branding Side (Desktop only) -->
+        <div class="branding-section">
+          <img src="/sibu.png" alt="SIBU Logo" class="brand-logo" />
+          <h1 class="brand-title">SIBU</h1>
+          <p class="brand-tagline">{{ t('auth.brandingSubtitle') }}</p>
+          <div class="brand-features">
+            <div class="feature-item">
+              <span class="material-icons">directions_bus</span>
+              <span>Rutas en tiempo real</span>
+            </div>
+            <div class="feature-item">
+              <span class="material-icons">payments</span>
+              <span>Ofertas exclusivas</span>
+            </div>
+            <div class="feature-item">
+              <span class="material-icons">location_on</span>
+              <span>Paradas inteligentes</span>
+            </div>
           </div>
         </div>
 
-        <!-- Footer -->
-        <footer class="auth-footer">
-          <p>{{ t('auth.footer') }}</p>
-        </footer>
+        <!-- Form Section -->
+        <div class="form-section">
+          <div class="glass-card auth-card">
+            <!-- Mobile Logo -->
+            <div class="mobile-header">
+              <img src="/sibu.png" alt="SIBU Logo" class="mobile-logo" />
+            </div>
+
+            <!-- Tab Selector -->
+            <div class="auth-tabs-pill">
+              <button 
+                class="pill-btn" 
+                :class="{ active: isLogin }" 
+                @click="isLogin = true"
+              >
+                {{ t('auth.loginTab') }}
+              </button>
+              <button 
+                class="pill-btn" 
+                :class="{ active: !isLogin }" 
+                @click="isLogin = false"
+              >
+                {{ t('auth.registerTab') }}
+              </button>
+              <div class="pill-slider" :class="{ 'slide-right': !isLogin }"></div>
+            </div>
+
+            <!-- Forms Container -->
+            <div class="auth-forms-container">
+              <Transition name="form-fade" mode="out-in">
+                <div :key="isLogin ? 'login' : 'register'" class="form-transition-wrapper">
+                  <LoginForm v-if="isLogin" @toggle="toggleAuth" />
+                  <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
+                </div>
+              </Transition>
+            </div>
+
+            <footer class="auth-footer">
+              <p>{{ t('auth.footer') }}</p>
+            </footer>
+          </div>
+        </div>
       </div>
-    </div>
+    </main>
   </div>
 </template>
 
 <style scoped>
 .auth-page {
+  position: relative;
   min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--bg-primary);
-  padding: 1rem;
-  position: relative;
-  overflow: hidden;
-}
-
-.bg-decoration {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.circle {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.15;
-}
-
-.circle-1 {
-  width: 400px;
-  height: 400px;
-  background: var(--active-color);
-  top: -100px;
-  right: -100px;
-}
-
-.circle-2 {
-  width: 300px;
-  height: 300px;
-  background: #3b82f6;
-  bottom: -50px;
-  left: -50px;
-}
-
-.auth-container {
   width: 100%;
-  max-width: 420px;
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: #000;
+  color: #fff;
+  overflow-x: hidden;
+}
+
+/* Background Systems */
+.auth-bg-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+}
+
+.auth-bg-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.6;
+  transform: scale(1.1);
+  filter: blur(5px);
+  transition: transform 10s ease-out;
+}
+
+.is-mounted .auth-bg-image {
+  transform: scale(1);
+}
+
+.auth-bg-overlay {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
   z-index: 1;
 }
 
-.back-btn {
+/* Layout */
+.auth-main {
+  position: relative;
+  z-index: 10;
+  flex: 1;
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  margin-bottom: 1.5rem;
-  padding: 0.5rem;
-  border-radius: 8px;
-  transition: all 0.2s;
+  flex-direction: column;
+  padding: 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
 }
 
-.back-btn:hover {
-  color: var(--text-primary);
-  background: rgba(255,255,255,0.05);
+.auth-nav {
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
+
+.auth-content-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 450px;
+  gap: 4rem;
+  align-items: center;
+  padding: 2rem 0;
+}
+
+/* Branding Section */
+.branding-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  animation: slideInLeft 0.8s ease-out;
+}
+
+.brand-logo {
+  width: 80px;
+  filter: drop-shadow(0 0 20px rgba(254, 231, 21, 0.4));
+}
+
+.brand-title {
+  font-size: 5rem;
+  font-weight: 800;
+  margin: 0;
+  letter-spacing: -0.04em;
+  background: linear-gradient(to right, #fff, var(--active-color));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.brand-tagline {
+  font-size: 1.25rem;
+  color: rgba(255,255,255,0.7);
+  max-width: 400px;
+  line-height: 1.6;
+}
+
+.brand-features {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: rgba(255,255,255,0.9);
+}
+
+.feature-item .material-icons {
+  color: var(--active-color);
+  background: rgba(254, 231, 21, 0.1);
+  padding: 0.5rem;
+  border-radius: 12px;
+}
+
+/* Form Section */
+.form-section {
+  display: flex;
+  justify-content: center;
+  animation: slideInRight 0.8s ease-out;
+}
+
+.glass-card {
+  background: rgba(15, 23, 42, 0.7);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 2.5rem;
+  width: 100%;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .auth-card {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 2rem;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
+  padding: 0;
 }
 
-.auth-header {
+.mobile-header {
+  display: none;
   padding: 2rem 2rem 1rem;
   text-align: center;
 }
 
-.auth-logo {
-  height: 60px;
-  margin-bottom: 0.5rem;
+.mobile-logo {
+  height: 50px;
 }
 
-.auth-subtitle {
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  margin: 0;
-}
-
-.auth-tabs {
+/* Custom Pills Tabs */
+.auth-tabs-pill {
   position: relative;
   display: flex;
-  margin: 0 1.5rem;
-  background: var(--bg-primary);
-  padding: 0.35rem;
-  border-radius: 1rem;
-  border: 1px solid var(--border-color);
+  background: rgba(0,0,0,0.3);
+  margin: 2rem 2rem 1rem;
+  padding: 0.4rem;
+  border-radius: 1.5rem;
+  border: 1px solid rgba(255,255,255,0.1);
 }
 
-.tab-btn {
+.pill-btn {
   flex: 1;
-  padding: 0.75rem;
+  padding: 0.8rem;
   border: none;
   background: none;
-  color: var(--text-secondary);
-  font-size: 0.85rem;
-  font-weight: 800;
+  color: rgba(255,255,255,0.6);
+  font-size: 0.9rem;
+  font-weight: 700;
   cursor: pointer;
-  z-index: 1;
-  transition: color 0.3s;
+  z-index: 2;
+  transition: all 0.3s ease;
 }
 
-.tab-btn.active {
-  color: #101820;
+.pill-btn.active {
+  color: #000;
 }
 
-.tab-indicator {
+.pill-slider {
   position: absolute;
-  top: 0.35rem;
-  bottom: 0.35rem;
-  left: 0.35rem;
-  width: calc(50% - 0.35rem);
+  top: 0.4rem;
+  bottom: 0.4rem;
+  left: 0.4rem;
+  width: calc(50% - 0.4rem);
   background: var(--active-color);
-  border-radius: 0.75rem;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 1.1rem;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
 }
 
-.tab-indicator.on-right {
+.pill-slider.slide-right {
   transform: translateX(100%);
 }
 
-.auth-body {
-  min-height: 200px;
+/* Forms Container */
+.auth-forms-container {
+  min-height: 400px;
+  padding-bottom: 2rem;
 }
 
-.form-wrapper {
-  animation: fadeIn 0.4s ease-out;
+.form-transition-wrapper {
+  width: 100%;
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+/* Buttons */
+.glass-btn {
+  background: rgba(255,255,255,0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.2);
+  color: #fff;
+  padding: 0.6rem 1.2rem;
+  border-radius: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.glass-btn:hover {
+  background: rgba(255,255,255,0.2);
+  transform: translateX(-5px);
 }
 
 .auth-footer {
   padding: 1.5rem;
+  border-top: 1px solid rgba(255,255,255,0.05);
   text-align: center;
-  border-top: 1px solid var(--border-color);
 }
 
 .auth-footer p {
   font-size: 0.75rem;
-  color: var(--text-secondary);
-  opacity: 0.6;
+  color: rgba(255,255,255,0.4);
   margin: 0;
 }
+
+/* Animations */
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-50px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(50px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.form-fade-enter-active,
+.form-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.form-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.form-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.05);
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .auth-content-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  .branding-section {
+    display: none;
+  }
+  .mobile-header {
+    display: block;
+  }
+  .form-section {
+    width: 100%;
+    max-width: 450px;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 480px) {
+  .auth-main {
+    padding: 1rem;
+  }
+  .glass-card {
+    border-radius: 2rem;
+  }
+  .auth-tabs-pill {
+    margin: 1.5rem 1.5rem 0.5rem;
+  }
+}
 </style>
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 936fd53..5f5d6b4 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -341,7 +341,7 @@ function clearMapMarkers() {
   limpiarTodoCentralizado()
   // Tras limpiar todo, si tenemos ubicación de usuario, la restauramos 
   // porque el marcador celestre sonar es un overlay que el centralizado elimina
-  if (userCoords.value && authStore.userProfile?.auto_location) {
+  if (userCoords.value) {
      reDrawUserMarker();
   }
 }