diff --git a/internal/admin/web/cluster.html b/internal/admin/web/cluster.html
index b17c95c..f6b13d5 100644
--- a/internal/admin/web/cluster.html
+++ b/internal/admin/web/cluster.html
@@ -91,15 +91,29 @@
     .form-actions { display: flex; gap: .5rem; margin-top: 1rem; }
     .bool { flex-direction: row; align-items: center; gap: .5rem; }
     .bool input { width: auto; }
+    dialog.modal {
+      border: 1px solid var(--border);
+      background: var(--panel);
+      color: var(--text);
+      border-radius: 6px;
+      padding: 1.5rem;
+      min-width: 360px;
+      max-width: 90vw;
+    }
+    dialog.modal::backdrop { background: rgba(0, 0, 0, .65); }
+    dialog.modal h2 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--accent); }
+    dialog.modal form { display: flex; flex-direction: column; gap: .75rem; }
+    dialog.modal label { color: var(--muted); font-size: .9rem; }
+    dialog.modal input { width: 100%; }
+    .modal-error { color: var(--danger); font-size: .9rem; margin: 0; }
+    .modal-actions { display: flex; gap: .5rem; justify-content: flex-end; }
   </style>
 </head>
 <body>
   <header>
     <h1>spark-mcp-go Admin</h1>
     <div class='auth'>
-      <label for='token'>Token</label>
-      <input id='token' type='password' placeholder='Bearer token' autocomplete='off'>
-      <button id='save-token'>Save</button>
+      <button id='set-token' class='secondary'>Set Token</button>
       <button id='logout' class='danger'>Logout</button>
     </div>
   </header>
@@ -199,12 +213,25 @@
     </section>
   </main>
 
+  <dialog id='token-modal' class='modal'>
+    <h2>Admin Token Required</h2>
+    <p id='modal-error' class='modal-error hidden'></p>
+    <form id='token-form'>
+      <label for='modal-token'>Bearer token</label>
+      <input id='modal-token' type='password' autocomplete='off' required>
+      <div class='modal-actions'>
+        <button type='submit' id='modal-save'>Save</button>
+        <button type='button' id='modal-cancel' class='secondary hidden'>Cancel</button>
+      </div>
+    </form>
+  </dialog>
+
   <script>
     const $ = (sel) => document.querySelector(sel);
     const API = '/admin';
 
-    const tokenInput = $('#token');
-    tokenInput.value = localStorage.getItem('adminToken') || '';
+    let pendingRetry = null;
+    let cancelBlocker = null;
 
     function headers() {
       return {
@@ -219,11 +246,67 @@
       el.classList.toggle('hidden', !msg);
     }
 
+    function showModalError(msg) {
+      const el = $('#modal-error');
+      el.textContent = msg || '';
+      el.classList.toggle('hidden', !msg);
+    }
+
+    function openTokenModal(opts = {}) {
+      const dialog = $('#token-modal');
+      const cancelBtn = $('#modal-cancel');
+      showModalError(opts.error || '');
+      cancelBtn.classList.toggle('hidden', !opts.allowCancel);
+      if (cancelBlocker) {
+        dialog.removeEventListener('cancel', cancelBlocker);
+        cancelBlocker = null;
+      }
+      if (!opts.allowCancel) {
+        cancelBlocker = (e) => e.preventDefault();
+        dialog.addEventListener('cancel', cancelBlocker);
+      }
+      dialog.showModal();
+      $('#modal-token').focus();
+    }
+
+    function closeTokenModal() {
+      const dialog = $('#token-modal');
+      showModalError('');
+      if (cancelBlocker) {
+        dialog.removeEventListener('cancel', cancelBlocker);
+        cancelBlocker = null;
+      }
+      dialog.close();
+      $('#modal-token').value = '';
+    }
+
+    function saveTokenFromModal(e) {
+      e.preventDefault();
+      localStorage.setItem('adminToken', $('#modal-token').value.trim());
+      closeTokenModal();
+      if (pendingRetry) {
+        const fn = pendingRetry;
+        pendingRetry = null;
+        fn();
+      } else {
+        loadClusters();
+      }
+    }
+
     async function api(method, path, body) {
       const opts = { method, headers: headers() };
       if (body !== undefined) opts.body = JSON.stringify(body);
       const res = await fetch(API + path, opts);
       if (!res.ok) {
+        if (res.status === 401) {
+          localStorage.removeItem('adminToken');
+          pendingRetry = () => api(method, path, body);
+          openTokenModal({
+            error: 'Token rejected by server (401). Enter a valid token.',
+            allowCancel: false
+          });
+          throw new Error('401 Unauthorized');
+        }
         let detail = res.statusText;
         try {
           const j = await res.json();
@@ -368,16 +451,18 @@
     $('#refresh').addEventListener('click', loadClusters);
     $('#btn-cancel').addEventListener('click', hideForm);
 
-    $('#save-token').addEventListener('click', () => {
-      localStorage.setItem('adminToken', tokenInput.value.trim());
-      loadClusters();
-    });
+    $('#set-token').addEventListener('click', () => openTokenModal({ allowCancel: true }));
     $('#logout').addEventListener('click', () => {
       localStorage.removeItem('adminToken');
-      tokenInput.value = '';
-      showError('Token cleared; reload the page after supplying a new token.');
+      openTokenModal({
+        error: 'Token cleared. Enter a new token to continue.',
+        allowCancel: false
+      });
     });
 
+    $('#token-form').addEventListener('submit', saveTokenFromModal);
+    $('#modal-cancel').addEventListener('click', closeTokenModal);
+
     $('#cluster-form').addEventListener('submit', async (e) => {
       e.preventDefault();
       showError('');
@@ -395,7 +480,11 @@
       }
     });
 
-    loadClusters();
+    if (!localStorage.getItem('adminToken')) {
+      openTokenModal({ allowCancel: false });
+    } else {
+      loadClusters();
+    }
   </script>
 </body>
 </html>
