diff --git a/public/coach.html b/public/coach.html
index 661ac7d..df565c5 100644
--- a/public/coach.html
+++ b/public/coach.html
@@ -5,16 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title data-i18n="title">Crear Rutina – SwimmingArt</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
   <link rel="stylesheet" href="css/navbar.css">
 </head>
 <body>
+  <!-- NAV -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top shadow-sm px-4 py-3">
     <div class="container-fluid">
-      <a class="navbar-brand fw-bold text-white" href="#">SwimmingArt</a>
+      <a class="navbar-brand fw-bold text-white">SwimmingArt</a>
       <div class="ms-auto d-flex gap-4 align-items-center">
         <a href="coach.html" class="nav-link text-white" data-i18n="nav.init">Inicializar Rutina</a>
         <a href="equipoDisponibles.html" class="nav-link text-white" data-i18n="nav.equip">Equipos Disponibles</a>
-        <a href="piscina.html" class="nav-link text-white" data-i18n="nav.pool">Piscina</a>
         <div class="dropdown">
           <button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 px-3 py-1" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
@@ -26,19 +27,30 @@
           <ul class="dropdown-menu dropdown-menu-end text-center p-3"
               aria-labelledby="userDropdown"
               style="background-color: #0d6efd; color: white; border-radius: 0 0 8px 8px; min-width: 100%; max-width: 250px;">
-            
-            <li>
-              <select id="langSelector" class="form-select form-select-sm mb-3"
-                      style="border: none; border-radius: 6px; background-color: white; color: black; padding: 0.4rem 0.5rem;">
-                <option value="es">Español</option>
-                <option value="en">English</option>
-                <option value="fr">Français</option>
-              </select>
+
+            <!-- Mostrar rol -->
+            <li class="mb-2">
+              <span id="rolUsuarioDropdown" class="fw-semibold text-white d-block">Coach</span>
             </li>
-            
-            <li>
-              <button class="btn btn-danger btn-sm w-100" onclick="logout()">Salir</button>
+
+            <!-- Selector de idioma alineado -->
+            <li class="mb-1">
+              <div class="d-flex align-items-center justify-content-center gap-2 w-100">
+                <i class="bi bi-globe" style="color: white; font-size: 1rem;"></i>
+                <select id="langSelector" class="form-select form-select-sm" style="border: none; border-radius: 6px; max-width: 140px;">
+                  <option value="es">Español</option>
+                  <option value="en">English</option>
+                  <option value="fr">Français</option>
+                </select>
+              </div>
             </li>
+
+            <!-- Botón salir pegado -->
+            <li>
+              <button class="btn btn-danger btn-sm w-100" onclick="logout()" data-i18n="logout">Salir</button>
+            </li>
+          </ul>
+
           </ul>
         </div>
       </div>
diff --git a/public/css/editorPiscina.css b/public/css/editorPiscina.css
index 827c7a0..d8400b8 100644
--- a/public/css/editorPiscina.css
+++ b/public/css/editorPiscina.css
@@ -17,14 +17,6 @@ body {
   color: #212529;
 }
 
-/* === Navbar === */
-.navbar {
-  min-height: 72px;
-}
-.navbar .nav-link {
-  font-weight: 500;
-}
-
 /* === Cards === */
 .card {
   border: none;
diff --git a/public/css/navbar.css b/public/css/navbar.css
index 846a47e..adea2df 100644
--- a/public/css/navbar.css
+++ b/public/css/navbar.css
@@ -13,8 +13,12 @@ body {
 }
 
 .navbar a:hover {
-  text-decoration: underline;
   color: #e6e6e6 !important;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 0.3rem 0.5rem;
+  transform: scale(1.05);
+  transition: all 0.2s ease-in-out;
 }
 
 .form-section {
diff --git a/public/equipoDisponibles.html b/public/equipoDisponibles.html
index 226033a..099b3fb 100644
--- a/public/equipoDisponibles.html
+++ b/public/equipoDisponibles.html
@@ -4,10 +4,13 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Equipos Disponibles</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link href="css/equipoDisponible.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
+  <link rel="stylesheet" href="css/equipoDisponible.css">
+  <link rel="stylesheet" href="css/navbar.css">
   <style>
-    .fade-out {
+    .fade-out { 
       opacity: 0;
       transition: opacity 0.4s ease;
     }
@@ -17,11 +20,47 @@
   <!-- NAV -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top shadow-sm px-4 py-3">
     <div class="container-fluid">
-      <a class="navbar-brand fw-bold text-white" href="#">SwimmingArt</a>
-      <div class="ms-auto d-flex gap-4">
-        <a href="coach.html" class="nav-link text-white">Inicializar Rutina</a>
-        <a href="equipoDisponibles.html" class="nav-link text-white">Equipos Disponibles</a>
-        <a href="piscina.html" class="nav-link text-white">Piscina</a>
+      <a class="navbar-brand fw-bold text-white">SwimmingArt</a>
+      <div class="ms-auto d-flex gap-4 align-items-center">
+        <a href="coach.html" class="nav-link text-white" data-i18n="nav.init">Inicializar Rutina</a>
+        <a href="equipoDisponibles.html" class="nav-link text-white" data-i18n="nav.equip">Equipos Disponibles</a>
+        <div class="dropdown">
+          <button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 px-3 py-1" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
+              <path d="M11 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+              <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-4.546 12.174c.03-.256.071-.512.124-.767C4.28 10.798 5.94 10 8 10s3.72.798 4.422 2.407c.053.255.094.511.124.767A7 7 0 0 0 8 1z"/>
+            </svg>
+            <span id="nombreUsuarioHeader" class="fw-semibold">Usuario</span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end text-center p-3"
+              aria-labelledby="userDropdown"
+              style="background-color: #0d6efd; color: white; border-radius: 0 0 8px 8px; min-width: 100%; max-width: 250px;">
+
+            <!-- Mostrar rol -->
+            <li class="mb-2">
+              <span id="nombreUsuarioDropdown" class="fw-semibold text-white d-block">Coach</span>
+            </li>
+
+            <!-- Selector de idioma alineado -->
+            <li class="mb-1">
+              <div class="d-flex align-items-center justify-content-center gap-2 w-100">
+                <i class="bi bi-globe" style="color: white; font-size: 1rem;"></i>
+                <select id="langSelector" class="form-select form-select-sm" style="border: none; border-radius: 6px; max-width: 140px;">
+                  <option value="es">Español</option>
+                  <option value="en">English</option>
+                  <option value="fr">Français</option>
+                </select>
+              </div>
+            </li>
+
+            <!-- Botón salir pegado -->
+            <li>
+              <button class="btn btn-danger btn-sm w-100" onclick="logout()" data-i18n="logout">Salir</button>
+            </li>
+          </ul>
+
+          </ul>
+        </div>
       </div>
     </div>
   </nav>
@@ -53,79 +92,7 @@
 
   <!-- Scripts -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-  <script>
-    let rutinaAEliminarId = null;
-    let cardAEliminar = null;
-
-    async function loadRoutines() {
-      const response = await fetch('/api/rutinas');
-      const routines = await response.json();
-      const routinesList = document.getElementById('routinesList');
-      routinesList.innerHTML = '';
-
-      for (const routine of routines) {
-        const formaciones = await fetch(`/api/rutinas/${routine._id}/formations`).then(res => res.json());
-        const ultimaFormacion = formaciones?.at(-1);
-        const atletas = ultimaFormacion?.atletas || [];
-
-        const atletasHTML = atletas.length
-          ? atletas.map(a => `<li>${a.atletaId?.name || a.idPersonalizado || 'Atleta'}${a.rol ? ' - ' + a.rol : ''}</li>`).join('')
-          : '<li class="text-muted fst-italic">Sin atletas en formación</li>';
-
-        const card = document.createElement('div');
-        card.classList.add('card', 'border-primary', 'shadow');
-        card.style.width = '300px';
-        card.dataset.id = routine._id;
-
-        card.innerHTML = `
-          <div class="card-body">
-            <h5 class="card-title fw-bold">${routine.nombreCompetencia}</h5>
-            <p><strong>Competencia:</strong> ${routine.tipoCompetencia}</p>
-            <p><strong>Modalidad:</strong> ${routine.modalidad}</p>
-            <h6 class="mt-2">Atletas:</h6>
-            <ul class="text-start px-3">${atletasHTML}</ul>
-            <div class="text-center d-grid gap-2 mt-3">
-              <button class="btn btn-primary" onclick="redirectToPiscina('${routine._id}')">Ver detalles</button>
-              <button class="btn btn-outline-danger btn-eliminar" data-id="${routine._id}">Eliminar</button>
-            </div>
-          </div>
-        `;
-        routinesList.appendChild(card);
-      }
-
-      document.querySelectorAll('.btn-eliminar').forEach(btn => {
-        btn.addEventListener('click', () => {
-          rutinaAEliminarId = btn.dataset.id;
-          cardAEliminar = btn.closest('.card');
-          const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
-          modal.show();
-        });
-      });
-    }
-
-    document.getElementById('btnConfirmarEliminar').addEventListener('click', async () => {
-      if (!rutinaAEliminarId || !cardAEliminar) return;
-      try {
-        const res = await fetch(`/api/rutinas/${rutinaAEliminarId}`, { method: 'DELETE' });
-        if (res.ok) {
-          cardAEliminar.classList.add('fade-out');
-          setTimeout(() => cardAEliminar.remove(), 400);
-        } else {
-          alert('Error al eliminar la rutina.');
-        }
-      } catch (err) {
-        console.error(err);
-        alert('Error al conectar con el servidor.');
-      }
-      bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal')).hide();
-      document.activeElement.blur();
-    });
-
-    function redirectToPiscina(routineId) {
-      window.location.href = `piscina.html?routineId=${routineId}`;
-    }
-
-    document.addEventListener('DOMContentLoaded', loadRoutines);
-  </script>
+  
+  <script src="js/equipoDisponibles.js"></script>
 </body>
 </html>
diff --git a/public/js/equipoDisponibles.js b/public/js/equipoDisponibles.js
new file mode 100644
index 0000000..5b85227
--- /dev/null
+++ b/public/js/equipoDisponibles.js
@@ -0,0 +1,217 @@
+let rutinaAEliminarId = null;
+let cardAEliminar = null;
+
+const traducciones = {
+  es: {
+    navInit: "Inicializar Rutina",
+    navEquipos: "Equipos Disponibles",
+    navPiscina: "Piscina",
+    createCardTitle: "Crear nuevo equipo",
+    competencia: "Competencia",
+    modalidad: "Modalidad",
+    atletas: "Atletas",
+    sinAtletas: "Sin atletas en formación",
+    verDetalles: "Ver detalles",
+    eliminar: "Eliminar",
+    logout: "Salir"  
+  },
+  en: {
+    navInit: "Initialize Routine",
+    navEquipos: "Available Teams",
+    navPiscina: "Pool",
+    createCardTitle: "Create new team",
+    competencia: "Competition",
+    modalidad: "Category",
+    atletas: "Athletes",
+    sinAtletas: "No athletes in formation",
+    verDetalles: "View details",
+    eliminar: "Delete",
+    logout: "Logout"  
+  },
+  fr: {
+    navInit: "Démarrer la routine",
+    navEquipos: "Équipes disponibles",
+    navPiscina: "Piscine",
+    createCardTitle: "Créer une nouvelle équipe",
+    competencia: "Compétition",
+    modalidad: "Catégorie",
+    atletas: "Athlètes",
+    sinAtletas: "Aucun athlète en formation",
+    verDetalles: "Voir détails",
+    eliminar: "Supprimer",
+    logout: "Se déconnecter"  
+  }
+};
+
+let langActual = 'es'; 
+
+function translateStatic() {
+  const navInit = document.querySelector('[data-i18n="nav.init"]');
+  const navEquip = document.querySelector('[data-i18n="nav.equip"]');
+  const navPool = document.querySelector('[data-i18n="nav.pool"]');
+  const heading = document.querySelector('h2');
+  const logoutBtn = document.querySelector('[data-i18n="logout"]'); 
+
+  if (navInit) navInit.textContent = traducciones[langActual].navInit;
+  if (navEquip) navEquip.textContent = traducciones[langActual].navEquipos;
+  if (navPool) navPool.textContent = traducciones[langActual].navPiscina;
+  if (heading) heading.textContent = traducciones[langActual].navEquipos;
+  if (logoutBtn) logoutBtn.textContent = traducciones[langActual].logout; 
+}
+
+document.getElementById('langSelector')?.addEventListener('change', async (e) => {
+  langActual = e.target.value;
+  translateStatic();
+  loadRoutines();
+
+  const userId = sessionStorage.getItem("userId");
+  if (userId) {
+    await fetch(`/api/users/${userId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ language: langActual })
+    });
+  }
+});
+
+async function loadRoutines() {
+  const response = await fetch('/api/rutinas');
+  const routines = await response.json();
+  const routinesList = document.getElementById('routinesList');
+  routinesList.innerHTML = '';
+
+  const createCard = document.createElement('div');
+  createCard.classList.add('card', 'shadow', 'text-center', 'border-0');
+  createCard.style.width = '300px';
+  createCard.style.minHeight = '250px';
+  createCard.style.cursor = 'pointer';
+  createCard.style.display = 'flex';
+  createCard.style.flexDirection = 'column';
+  createCard.style.alignItems = 'center';
+  createCard.style.justifyContent = 'center';
+  createCard.style.background = 'linear-gradient(135deg, #0d6efd 0%, #4c94ff 100%)';
+  createCard.style.color = 'white';
+  createCard.style.borderRadius = '12px';
+  createCard.style.transition = 'transform 0.2s ease';
+
+  createCard.innerHTML = `
+    <div class="d-flex flex-column align-items-center justify-content-center">
+      <div class="rounded-circle bg-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px;">
+        <i class="bi bi-plus-lg" style="font-size: 2rem; color: #0d6efd;"></i>
+      </div>
+      <h6 class="mt-3 fw-semibold">${traducciones[langActual].createCardTitle}</h6>
+    </div>
+  `;
+
+  createCard.addEventListener('mouseover', () => {
+    createCard.style.transform = 'scale(1.05)';
+  });
+  createCard.addEventListener('mouseout', () => {
+    createCard.style.transform = 'scale(1)';
+  });
+  createCard.addEventListener('click', () => {
+    window.location.href = 'coach.html';
+  });
+
+  routinesList.appendChild(createCard); // siempre primero
+
+  for (const routine of routines) {
+    const formaciones = await fetch(`/api/rutinas/${routine._id}/formations`).then(res => res.json());
+    const ultimaFormacion = formaciones?.at(-1);
+    const atletas = ultimaFormacion?.atletas || [];
+
+    const atletasHTML = atletas.length
+      ? atletas.map(a => `<li>${a.atletaId?.name || a.idPersonalizado || 'Atleta'}${a.rol ? ' - ' + a.rol : ''}</li>`).join('')
+      : `<li class="text-muted fst-italic">${traducciones[langActual].sinAtletas}</li>`;
+
+    const card = document.createElement('div');
+    card.classList.add('card', 'border-primary', 'shadow');
+    card.style.width = '300px';
+    card.dataset.id = routine._id;
+
+    card.innerHTML = `
+      <div class="card-body">
+        <h5 class="card-title fw-bold">${routine.nombreCompetencia}</h5>
+        <p><strong>${traducciones[langActual].competencia}:</strong> ${routine.tipoCompetencia}</p>
+        <p><strong>${traducciones[langActual].modalidad}:</strong> ${routine.modalidad}</p>
+        <h6 class="mt-2">${traducciones[langActual].atletas}:</h6>
+        <ul class="text-start px-3">${atletasHTML}</ul>
+        <div class="text-center d-grid gap-2 mt-3">
+          <button class="btn btn-primary" onclick="redirectToPiscina('${routine._id}')">${traducciones[langActual].verDetalles}</button>
+          <button class="btn btn-danger btn-eliminar" data-id="${routine._id}">${traducciones[langActual].eliminar}</button>
+        </div>
+      </div>
+    `;
+    routinesList.appendChild(card);
+  }
+
+  document.querySelectorAll('.btn-eliminar').forEach(btn => {
+    btn.addEventListener('click', () => {
+      rutinaAEliminarId = btn.dataset.id;
+      cardAEliminar = btn.closest('.card');
+      const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
+      modal.show();
+    });
+  });
+}
+
+document.getElementById('btnConfirmarEliminar').addEventListener('click', async () => {
+  if (!rutinaAEliminarId || !cardAEliminar) return;
+  try {
+    const res = await fetch(`/api/rutinas/${rutinaAEliminarId}`, { method: 'DELETE' });
+    if (res.ok) {
+      cardAEliminar.classList.add('fade-out');
+      setTimeout(() => cardAEliminar.remove(), 400);
+    } else {
+      alert('Error al eliminar la rutina.');
+    }
+  } catch (err) {
+    console.error(err);
+    alert('Error al conectar con el servidor.');
+  }
+  bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal')).hide();
+  document.activeElement.blur();
+});
+
+function redirectToPiscina(routineId) {
+  window.location.href = `piscina.html?routineId=${routineId}`;
+}
+
+async function loadUserInfoYIdioma() {
+  const userId = sessionStorage.getItem("userId");
+
+  if (!userId) {
+    alert("Sesión expirada, inicia sesión de nuevo.");
+    window.location.href = "index.html";
+    return;
+  }
+
+  try {
+    const res = await fetch(`/api/users/${userId}`);
+    const user = await res.json();
+
+    if (user?.name) {
+      document.getElementById("nombreUsuarioHeader").textContent = user.name;
+    }
+
+    if (user?.language && traducciones[user.language]) {
+      langActual = user.language;
+      const selector = document.getElementById('langSelector');
+      if (selector) selector.value = langActual;
+    }
+
+    translateStatic();
+    loadRoutines();
+  } catch (err) {
+    console.error("❌ Error al obtener datos del usuario:", err);
+  }
+}
+
+function logout() {
+  sessionStorage.clear();
+  window.location.href = 'index.html';
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  loadUserInfoYIdioma();
+});
diff --git a/public/js/index.js b/public/js/index.js
index c741960..ede97a6 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -100,7 +100,7 @@ function getRegisterHTML(lang) {
   const t = translations[lang];
   return `
     <div class="text-center mb-4">
-      <h2 class="fw-bold mb-3 text-primary-strong display-3">${t.create_account}</h2>
+      <h2 class="fw-bold mb-3 text-primary-strong display-2">${t.create_account}</h2>
     </div>
     <form id="registerForm" class="w-100" style="max-width: 500px;">
       <div class="mb-3">
diff --git a/public/js/traduccionCoach.js b/public/js/traduccionCoach.js
index d02c89e..e0358b1 100644
--- a/public/js/traduccionCoach.js
+++ b/public/js/traduccionCoach.js
@@ -1,6 +1,7 @@
 const traducciones = {
   es: {
     title: "Crear Rutina – SwimmingArt",
+    logout: "Salir",
     nav: {
       init: "Inicializar Rutina",
       equip: "Equipos Disponibles",
@@ -25,9 +26,10 @@ const traducciones = {
   },
   en: {
     title: "Create Routine – SwimmingArt",
+    logout: "Logout",
     nav: {
       init: "Initialize Routine",
-      equip: "Available Equipment",
+      equip: "Available Teams",
       pool: "Pool"
     },
     form: {
@@ -49,6 +51,7 @@ const traducciones = {
   },
   fr: {
     title: "Créer une Routine – SwimmingArt",
+    logout: "Se déconnecter",
     nav: {
       init: "Initialiser la Routine",
       equip: "Équipements Disponibles",
@@ -93,7 +96,6 @@ function updateLanguage(lang) {
     }
   });
 
-  // actualizar el texto si la duración está vacía
   const input = document.getElementById("duration");
   if (input && !input.dataset.segundos) {
     input.value = traducciones[langActual].form.durationPlaceholder;
@@ -101,7 +103,33 @@ function updateLanguage(lang) {
 }
 
 document.getElementById("langSelector").addEventListener("change", function () {
-  updateLanguage(this.value);
+  const selectedLang = this.value;
+  localStorage.setItem("lang", selectedLang);
+  updateLanguage(selectedLang);
 });
 
-window.onload = () => updateLanguage("es");
+async function loadUserLanguage() {
+  const userId = sessionStorage.getItem("userId");
+
+  if (!userId) {
+    alert("Sesión expirada. Inicia sesión de nuevo.");
+    window.location.href = "index.html";
+    return;
+  }
+
+  try {
+    const res = await fetch(`/api/users/${userId}`);
+    const user = await res.json();
+
+    if (user.language && traducciones[user.language]) {
+      langActual = user.language;
+      localStorage.setItem("lang", langActual);
+    }
+  } catch (err) {
+    console.error("❌ Error al obtener idioma del usuario:", err);
+  }
+
+  updateLanguage(langActual);
+}
+
+window.onload = loadUserLanguage;
diff --git a/public/piscina.html b/public/piscina.html
index 8400270..8221186 100644
--- a/public/piscina.html
+++ b/public/piscina.html
@@ -5,20 +5,61 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Editor de Formación – SwimmingArt</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
   <link rel="stylesheet" href="css/editorPiscina.css">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/navbar.css">
+
   <script src="https://unpkg.com/wavesurfer.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/konva@9.2.0/konva.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 </head>
 <body>
+  <!-- NAV -->
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top shadow-sm px-4 py-3">
     <div class="container-fluid">
-      <a class="navbar-brand fw-bold text-white" href="#">SwimmingArt</a>
-      <div class="ms-auto d-flex gap-4">
-        <a href="coach.html" class="nav-link text-white">Inicializar Rutina</a>
-        <a href="equipoDisponibles.html" class="nav-link text-white">Equipos Disponibles</a>
-        <a href="piscina.html" class="nav-link text-white active">Piscina</a>
+      <a class="navbar-brand fw-bold text-white">SwimmingArt</a>
+      <div class="ms-auto d-flex gap-4 align-items-center">
+        <a href="coach.html" class="nav-link text-white" data-i18n="nav.init">Inicializar Rutina</a>
+        <a href="equipoDisponibles.html" class="nav-link text-white" data-i18n="nav.equip">Equipos Disponibles</a>
+        <div class="dropdown">
+          <button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 px-3 py-1" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
+              <path d="M11 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+              <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-4.546 12.174c.03-.256.071-.512.124-.767C4.28 10.798 5.94 10 8 10s3.72.798 4.422 2.407c.053.255.094.511.124.767A7 7 0 0 0 8 1z"/>
+            </svg>
+            <span id="nombreUsuarioHeader" class="fw-semibold">Usuario</span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end text-center p-3"
+              aria-labelledby="userDropdown"
+              style="background-color: #0d6efd; color: white; border-radius: 0 0 8px 8px; min-width: 100%; max-width: 250px;">
+
+            <!-- Mostrar rol -->
+            <li class="mb-2">
+              <span id="nombreUsuarioDropdown" class="fw-semibold text-white d-block">Coach</span>
+            </li>
+
+            <!-- Selector de idioma alineado -->
+            <li class="mb-1">
+              <div class="d-flex align-items-center justify-content-center gap-2 w-100">
+                <i class="bi bi-globe" style="color: white; font-size: 1rem;"></i>
+                <select id="langSelector" class="form-select form-select-sm" style="border: none; border-radius: 6px; max-width: 140px;">
+                  <option value="es">Español</option>
+                  <option value="en">English</option>
+                  <option value="fr">Français</option>
+                </select>
+              </div>
+            </li>
+
+            <!-- Botón salir pegado -->
+            <li>
+              <button class="btn btn-danger btn-sm w-100" onclick="logout()" data-i18n="logout">Salir</button>
+            </li>
+          </ul>
+
+          </ul>
+        </div>
       </div>
     </div>
   </nav>
diff --git a/uploads/music/1749357825796-655517052.mp3 b/uploads/music/1749357825796-655517052.mp3
new file mode 100644
index 0000000..ff43788
Binary files /dev/null and b/uploads/music/1749357825796-655517052.mp3 differ
