diff --git a/public/admin.html b/public/admin.html
index db40d4d..3fd874f 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -28,459 +28,280 @@
         font-size: 0.8rem;
         color: #111827;
       }
+      .field {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 0.5rem;
+      }
+      .field input {
+        padding: 0.5rem;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+      }
+      button {
+        padding: 0.5rem 0.75rem;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        background: #f7f7f8;
+        cursor: pointer;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .error {
+        color: #b91c1c;
+        margin-top: 0.5rem;
+      }
+      .success {
+        color: #047857;
+        margin-top: 0.5rem;
+      }
     </style>
   </head>
   <body>
     <h1>Admin Panel</h1>
-    <p>Modular admin UI: cada módulo se registra automáticamente.</p>
+    <p>Interfaz de administración (Vue 3 + JWT).</p>
+
+    <div id="app">
+      <div v-if="!token" class="module">
+        <h2>Iniciar sesión</h2>
+        <div class="field">
+          <label>Email</label>
+          <input v-model="login.email" type="email" placeholder="admin@local" />
+        </div>
+        <div class="field">
+          <label>Contraseña</label>
+          <input v-model="login.password" type="password" placeholder="••••••" />
+        </div>
+        <div class="field">
+          <label>Tenant</label>
+          <input v-model="login.tenantId" placeholder="default" />
+        </div>
+        <button :disabled="loading" @click="loginUser">Iniciar sesión</button>
+        <div :class="{ error: loginError, success: loginSuccess }">{{ loginMessage }}</div>
 
-    <div id="auth" class="module">
-      <h2>Acceso</h2>
-      <div id="login-form">
-        <strong>Iniciar sesión</strong><br/>
-        <input id="loginEmail" placeholder="Email" style="margin-bottom:0.5rem;" />
-        <input id="loginPassword" type="password" placeholder="Contraseña" style="margin-bottom:0.5rem;" />
-        <button id="loginBtn">Iniciar sesión</button>
-        <div id="loginStatus" style="margin-top:0.5rem;color:#555;"></div>
         <hr />
-        <strong>Registrar usuario</strong><br/>
-        <input id="registerName" placeholder="Nombre (opcional)" style="margin-bottom:0.5rem;" />
-        <input id="registerEmail" placeholder="Email" style="margin-bottom:0.5rem;" />
-        <input id="registerPassword" type="password" placeholder="Contraseña" style="margin-bottom:0.5rem;" />
-        <input id="registerTenant" placeholder="Tenant ID" value="default" style="margin-bottom:0.5rem;" />
-        <button id="registerBtn">Registrar</button>
+
+        <h2>Registrar usuario</h2>
+        <div class="field">
+          <label>Nombre</label>
+          <input v-model="register.name" placeholder="Nombre (opcional)" />
+        </div>
+        <div class="field">
+          <label>Email</label>
+          <input v-model="register.email" type="email" placeholder="admin@local" />
+        </div>
+        <div class="field">
+          <label>Contraseña</label>
+          <input v-model="register.password" type="password" placeholder="••••••" />
+        </div>
+        <div class="field">
+          <label>Tenant</label>
+          <input v-model="register.tenantId" placeholder="default" />
+        </div>
+        <button :disabled="loading" @click="registerUser">Registrar</button>
+        <div :class="{ error: registerError, success: registerSuccess }">{{ registerMessage }}</div>
+      </div>
+
+      <div v-else class="module">
+        <div style="display:flex; align-items:center; gap:1rem; margin-bottom:1rem;">
+          <div>
+            <strong>Autenticado como:</strong> {{ user?.name || user?.email }}
+          </div>
+          <button @click="logout">Cerrar sesión</button>
+        </div>
+
+        <label>
+          Tenant ID:
+          <input v-model="tenantId" />
+        </label>
+        <button @click="loadModules" style="margin-left:0.5rem;">Actualizar módulos</button>
+        <span style="margin-left:1rem; color:#555;">{{ status }}</span>
+
+        <div v-if="modules.length" style="margin-top:1rem;">
+          <div v-for="mod in modules" :key="mod.key" class="module">
+            <h2>{{ mod.name }}</h2>
+            <p><span class="badge">{{ mod.key }}</span> {{ mod.description }}</p>
+            <button @click="selectModule(mod.key)">Administrar</button>
+          </div>
+        </div>
+
+        <div v-if="selectedModule" class="module">
+          <h2>Administrar: {{ selectedModule }}</h2>
+          <div v-html="moduleHtml"></div>
+        </div>
       </div>
     </div>
 
-    <div id="main" style="display: none;">
-      <label>
-        Tenant ID:
-        <input id="tenantId" value="default" />
-      </label>
-      <button id="refresh" style="margin-left: 0.5rem;">Actualizar módulos</button>
-      <button id="logout" style="margin-left: 0.5rem;">Cerrar sesión</button>
-      <span id="status" style="margin-left: 1rem; color: #555;"></span>
-
-      <div id="modules"></div>
-
-      <div id="module-detail"></div>
-    </div>
-
+    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
     <script>
-      const apiRoot = '/api/admin';
-      const authRoot = '/api/auth';
-      const tokenKey = 'planner_admin_token';
+      const { createApp, reactive, ref } = Vue;
 
-      const authPanel = document.getElementById('auth');
-      const mainPanel = document.getElementById('main');
-      const tenantInput = document.getElementById('tenantId');
-      const modulesContainer = document.getElementById('modules');
-      const detailContainer = document.getElementById('module-detail');
-      const statusEl = document.getElementById('status');
+      createApp({
+        setup() {
+          const apiRoot = '/api/admin';
+          const authRoot = '/api/auth';
+          const tokenKey = 'planner_admin_token';
 
-      const loginStatus = document.getElementById('loginStatus');
-      const loginEmail = document.getElementById('loginEmail');
-      const loginPassword = document.getElementById('loginPassword');
-      const loginBtn = document.getElementById('loginBtn');
+          const token = ref(localStorage.getItem(tokenKey) || '');
+          const user = ref(null);
+          const tenantId = ref('default');
+          const status = ref('');
+          const modules = ref([]);
+          const selectedModule = ref('');
+          const moduleHtml = ref('');
+          const loading = ref(false);
 
-      const registerName = document.getElementById('registerName');
-      const registerEmail = document.getElementById('registerEmail');
-      const registerPassword = document.getElementById('registerPassword');
-      const registerTenant = document.getElementById('registerTenant');
-      const registerBtn = document.getElementById('registerBtn');
+          const login = reactive({ email: '', password: '', tenantId: 'default' });
+          const register = reactive({ name: '', email: '', password: '', tenantId: 'default' });
 
-      const logoutBtn = document.getElementById('logout');
+          const loginMessage = ref('');
+          const loginError = ref(false);
+          const loginSuccess = ref(false);
 
-      let authToken = localStorage.getItem(tokenKey) || '';
+          const registerMessage = ref('');
+          const registerError = ref(false);
+          const registerSuccess = ref(false);
 
-      function setStatus(msg) {
-        if (statusEl) statusEl.textContent = msg;
-      }
-
-      function setLoginStatus(msg) {
-        if (loginStatus) loginStatus.textContent = msg;
-      }
-
-      function setToken(token) {
-        authToken = token;
-        if (token) {
-          localStorage.setItem(tokenKey, token);
-        } else {
-          localStorage.removeItem(tokenKey);
-        }
-      }
-
-      function withTenant(url) {
-        const tenantId = tenantInput.value || 'default';
-        const sep = url.includes('?') ? '&' : '?';
-        return `${url}${sep}tenantId=${encodeURIComponent(tenantId)}`;
-      }
-
-      async function api(path, options = {}) {
-        setStatus('Consultando ' + path + '...');
-        if (authToken) {
-          options.headers = {
-            ...(options.headers || {}),
-            Authorization: `Bearer ${authToken}`,
+          const setStatus = (msg) => (status.value = msg);
+          const setToken = (t) => {
+            token.value = t;
+            if (t) localStorage.setItem(tokenKey, t);
+            else localStorage.removeItem(tokenKey);
           };
-        }
 
-        const res = await fetch(withTenant(`${apiRoot}${path}`), options);
-        const data = await res.json().catch(() => null);
-        if (!res.ok) {
-          const err = data?.message ? data.message : res.statusText;
-          setStatus(`Error ${res.status}`);
-          throw new Error(err || `HTTP ${res.status}`);
-        }
-        setStatus('OK');
-        setTimeout(() => setStatus(''), 1500);
-        return data;
-      }
-
-      async function login() {
-        setLoginStatus('Iniciando sesión...');
-        try {
-          const res = await fetch(`${authRoot}/login`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              tenantId: registerTenant.value || 'default',
-              email: loginEmail.value,
-              password: loginPassword.value,
-            }),
-          });
-          const data = await res.json();
-          if (!res.ok || !data.token) {
-            setLoginStatus(data.message || 'Credenciales inválidas');
-            return;
-          }
-          setToken(data.token);
-          setLoginStatus('Sesión iniciada');
-          showMain();
-        } catch (err) {
-          setLoginStatus(err.message || err);
-        }
-      }
-
-      async function register() {
-        setLoginStatus('Registrando...');
-        try {
-          const res = await fetch(`${authRoot}/register`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              tenantId: registerTenant.value || 'default',
-              name: registerName.value,
-              email: registerEmail.value,
-              password: registerPassword.value,
-            }),
-          });
-          const data = await res.json();
-          if (!res.ok) {
-            setLoginStatus(data.message || 'Error al registrar');
-            return;
-          }
-          setLoginStatus('Registrado. Inicia sesión.');
-        } catch (err) {
-          setLoginStatus(err.message || err);
-        }
-      }
-
-      function logout() {
-        setToken('');
-        showAuth();
-      }
-
-      function showAuth() {
-        if (authPanel) authPanel.style.display = 'block';
-        if (mainPanel) mainPanel.style.display = 'none';
-      }
-
-      function showMain() {
-        if (authPanel) authPanel.style.display = 'none';
-        if (mainPanel) mainPanel.style.display = 'block';
-        loadModules();
-      }
-
-      function formatJson(value) {
-        return `<pre style="white-space: pre-wrap; word-break: break-word;">${JSON.stringify(value, null, 2)}</pre>`;
-      }
-
-      function showError(err) {
-        detailContainer.innerHTML = `<div class="module"><strong>Error:</strong> ${err.message || err}</div>`;
-      }
-
-      function renderModules(modules) {
-        modulesContainer.innerHTML = '';
-        detailContainer.innerHTML = '';
-
-        if (!modules.length) {
-          modulesContainer.innerHTML = '<p>No hay módulos registrados aún.</p>';
-          return;
-        }
-
-        modules.forEach((mod) => {
-          const card = document.createElement('div');
-          card.className = 'module';
-          const title = document.createElement('h2');
-          title.textContent = mod.name;
-          const meta = document.createElement('p');
-          meta.innerHTML = `<span class="badge">${mod.key}</span> ${mod.description || ''}`;
-          const button = document.createElement('button');
-          button.textContent = 'Administrar';
-          button.onclick = () => showModule(mod.key);
-          card.append(title, meta, button);
-          modulesContainer.appendChild(card);
-        });
-      }
-
-      async function loadModules() {
-        modulesContainer.innerHTML = '<p>Cargando módulos...</p>';
-        try {
-          const modules = await api('/modules');
-          renderModules(modules);
-        } catch (err) {
-          showError(err);
-        }
-      }
-
-      function createButton(label, onClick) {
-        const btn = document.createElement('button');
-        btn.textContent = label;
-        btn.style.marginRight = '0.5rem';
-        btn.onclick = onClick;
-        return btn;
-      }
-
-      function createInput(name, placeholder = '', type = 'text') {
-        const input = document.createElement('input');
-        input.name = name;
-        input.placeholder = placeholder;
-        input.type = type;
-        input.style.marginRight = '0.5rem';
-        input.style.marginBottom = '0.5rem';
-        return input;
-      }
-
-      async function showModule(key) {
-        detailContainer.innerHTML = `<div class="module"><h2>Administrar: ${key}</h2><p>Cargando...</p></div>`;
-
-        if (key === 'guest') {
-          return showGuestAdmin();
-        }
-        if (key === 'todo') {
-          return showTodoAdmin();
-        }
-        if (key === 'gift') {
-          return showGiftAdmin();
-        }
-
-        detailContainer.innerHTML = `<div class="module"><p>No hay operaciones definidas para este módulo.</p></div>`;
-      }
-
-      async function showGuestAdmin() {
-        detailContainer.innerHTML = '';
-        const panel = document.createElement('div');
-        panel.className = 'module';
-        panel.innerHTML = '<h3>Invitados</h3>';
-
-        const listBtn = createButton('Listar invitados', async () => {
-          try {
-            const guests = await api('/guest');
-            panel.querySelector('.result')!.innerHTML = formatJson(guests);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
-
-        const createForm = document.createElement('div');
-        createForm.innerHTML = '<strong>Crear invitado</strong><br/>';
-        const nameInput = createInput('name', 'Nombre');
-        const emailInput = createInput('email', 'Email');
-        const phoneInput = createInput('phone', 'Teléfono');
-        const createBtn = createButton('Crear', async () => {
-          try {
-            const guest = await api('/guest', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                name: nameInput.value,
-                email: emailInput.value,
-                phone: phoneInput.value,
-              }),
+          const api = async (path, options = {}) => {
+            setStatus('Consultando ' + path + '...');
+            const headers = options.headers || {};
+            if (token.value) headers.Authorization = `Bearer ${token.value}`;
+            const res = await fetch(`${apiRoot}${path}?tenantId=${encodeURIComponent(tenantId.value)}`, {
+              ...options,
+              headers,
             });
-            panel.querySelector('.result')!.innerHTML = formatJson(guest);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
+            const data = await res.json().catch(() => null);
+            if (!res.ok) {
+              const err = data?.message || res.statusText;
+              setStatus(`Error ${res.status}`);
+              throw new Error(err);
+            }
+            setStatus('OK');
+            setTimeout(() => setStatus(''), 1500);
+            return data;
+          };
 
-        const rsvpForm = document.createElement('div');
-        rsvpForm.innerHTML = '<strong>Actualizar RSVP</strong><br/>';
-        const idInput = createInput('id', 'ID del invitado');
-        const rsvpInput = createInput('rsvp', 'true/false');
-        const updateBtn = createButton('Actualizar', async () => {
-          try {
-            const updated = await api(`/guest/${idInput.value}/rsvp`, {
-              method: 'PATCH',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ rsvp: rsvpInput.value === 'true' }),
-            });
-            panel.querySelector('.result')!.innerHTML = formatJson(updated);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
+          const logout = () => {
+            setToken('');
+            user.value = null;
+            selectedModule.value = '';
+            moduleHtml.value = '';
+          };
 
-        createForm.append(nameInput, emailInput, phoneInput, createBtn);
-        rsvpForm.append(idInput, rsvpInput, updateBtn);
+          const loginUser = async () => {
+            loginMessage.value = '';
+            loginError.value = false;
+            loginSuccess.value = false;
+            loading.value = true;
+            try {
+              const res = await fetch(`${authRoot}/login`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  tenantId: login.tenantId || 'default',
+                  email: login.email,
+                  password: login.password,
+                }),
+              });
+              const data = await res.json();
+              if (!res.ok || !data.token) {
+                loginMessage.value = data.message || 'Credenciales inválidas';
+                loginError.value = true;
+                return;
+              }
+              setToken(data.token);
+              user.value = { email: login.email, name: data.name };
+              loginMessage.value = 'Sesión iniciada correctamente';
+              loginSuccess.value = true;
+              await loadModules();
+            } catch (err) {
+              loginMessage.value = err.message || err;
+              loginError.value = true;
+            } finally {
+              loading.value = false;
+            }
+          };
 
-        const result = document.createElement('div');
-        result.className = 'result';
-        result.style.marginTop = '1rem';
+          const registerUser = async () => {
+            registerMessage.value = '';
+            registerError.value = false;
+            registerSuccess.value = false;
+            loading.value = true;
+            try {
+              const res = await fetch(`${authRoot}/register`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  tenantId: register.tenantId || 'default',
+                  name: register.name,
+                  email: register.email,
+                  password: register.password,
+                }),
+              });
+              const data = await res.json();
+              if (!res.ok) {
+                registerMessage.value = data.message || 'Error al registrar';
+                registerError.value = true;
+                return;
+              }
+              registerMessage.value = 'Registrado. Inicia sesión.';
+              registerSuccess.value = true;
+            } catch (err) {
+              registerMessage.value = err.message || err;
+              registerError.value = true;
+            } finally {
+              loading.value = false;
+            }
+          };
 
-        panel.append(listBtn, document.createElement('br'), createForm, rsvpForm, result);
-        detailContainer.appendChild(panel);
-      }
+          const loadModules = async () => {
+            if (!token.value) return;
+            try {
+              modules.value = await api('/modules');
+            } catch (err) {
+              console.error(err);
+            }
+          };
 
-      async function showTodoAdmin() {
-        detailContainer.innerHTML = '';
-        const panel = document.createElement('div');
-        panel.className = 'module';
-        panel.innerHTML = '<h3>To-dos</h3>';
+          const selectModule = (key) => {
+            selectedModule.value = key;
+            moduleHtml.value = `<p>Seleccionado <strong>${key}</strong>. Usa los botones del módulo para operar.</p>`;
+          };
 
-        const listBtn = createButton('Listar To-dos', async () => {
-          try {
-            const todos = await api('/todo');
-            panel.querySelector('.result')!.innerHTML = formatJson(todos);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
-
-        const createForm = document.createElement('div');
-        createForm.innerHTML = '<strong>Crear To-do</strong><br/>';
-        const titleInput = createInput('title', 'Título');
-        const descInput = createInput('description', 'Descripción');
-        const createBtn = createButton('Crear', async () => {
-          try {
-            const todo = await api('/todo', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                title: titleInput.value,
-                description: descInput.value,
-              }),
-            });
-            panel.querySelector('.result')!.innerHTML = formatJson(todo);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
-
-        const completeForm = document.createElement('div');
-        completeForm.innerHTML = '<strong>Marcar completado</strong><br/>';
-        const todoIdInput = createInput('todoId', 'ID del To-do');
-        const completeBtn = createButton('Completar', async () => {
-          try {
-            const completed = await api(`/todo/${todoIdInput.value}/complete`, {
-              method: 'PATCH',
-            });
-            panel.querySelector('.result')!.innerHTML = formatJson(completed);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
-
-        completeForm.append(todoIdInput, completeBtn);
-
-        const result = document.createElement('div');
-        result.className = 'result';
-        result.style.marginTop = '1rem';
-
-        panel.append(listBtn, document.createElement('br'), createForm, completeForm, result);
-        detailContainer.appendChild(panel);
-      }
-
-      async function showGiftAdmin() {
-        detailContainer.innerHTML = '';
-        const panel = document.createElement('div');
-        panel.className = 'module';
-        panel.innerHTML = '<h3>Regalos</h3>';
-
-        const listBtn = createButton('Listar regalos', async () => {
-          try {
-            const gifts = await api('/gift');
-            panel.querySelector('.result')!.innerHTML = formatJson(gifts);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
-
-        const createForm = document.createElement('div');
-        createForm.innerHTML = '<strong>Crear Regalo</strong><br/>';
-        const nameInput = createInput('name', 'Nombre');
-        const descInput = createInput('description', 'Descripción');
-        const priceInput = createInput('price', 'Precio', 'number');
-        const createBtn = createButton('Crear', async () => {
-          try {
-            const gift = await api('/gift', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                name: nameInput.value,
-                description: descInput.value,
-                price: Number(priceInput.value) || undefined,
-              }),
-            });
-            panel.querySelector('.result')!.innerHTML = formatJson(gift);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
-
-        const contributionForm = document.createElement('div');
-        contributionForm.innerHTML = '<strong>Agregar contribución</strong><br/>';
-        const giftIdInput = createInput('giftId', 'ID del regalo');
-        const contribNameInput = createInput('contributorName', 'Nombre');
-        const amountInput = createInput('amount', 'Monto', 'number');
-        const contribBtn = createButton('Agregar', async () => {
-          try {
-            const contribution = await api(`/gift/${giftIdInput.value}/contribution`, {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                contributorName: contribNameInput.value,
-                amount: Number(amountInput.value) || 0,
-              }),
-            });
-            panel.querySelector('.result')!.innerHTML = formatJson(contribution);
-          } catch (err) {
-            panel.querySelector('.result')!.innerHTML = `<pre>${err.message || err}</pre>`;
-          }
-        });
-
-        contributionForm.append(giftIdInput, contribNameInput, amountInput, contribBtn);
-
-        const result = document.createElement('div');
-        result.className = 'result';
-        result.style.marginTop = '1rem';
-
-        panel.append(listBtn, document.createElement('br'), createForm, contributionForm, result);
-        detailContainer.appendChild(panel);
-      }
-
-      loginBtn.addEventListener('click', login);
-      registerBtn.addEventListener('click', register);
-      logoutBtn.addEventListener('click', logout);
-      document.getElementById('refresh').addEventListener('click', loadModules);
-      tenantInput.addEventListener('change', loadModules);
-
-      if (authToken) {
-        showMain();
-      } else {
-        showAuth();
-      }
+          return {
+            token,
+            user,
+            tenantId,
+            status,
+            modules,
+            selectedModule,
+            moduleHtml,
+            login,
+            register,
+            loginMessage,
+            loginError,
+            loginSuccess,
+            registerMessage,
+            registerError,
+            registerSuccess,
+            loading,
+            loginUser,
+            registerUser,
+            logout,
+            loadModules,
+            selectModule,
+          };
+        },
+      }).mount('#app');
     </script>
   </body>
 </html>
