diff --git a/server.js b/server.js
index f8674d8..83dc6be 100644
--- a/server.js
+++ b/server.js
@@ -299,10 +299,29 @@ app.get("/", (_req, res) => {
   .drop input { display: none; }
   .status { margin-top: 1rem; text-align: center; font-size: .9rem; color: #888; }
   .status.error { color: #f66; }
+  .overlay { position: fixed; inset: 0; background: #111; display: flex;
+             align-items: center; justify-content: center; z-index: 10; }
+  .auth { max-width: 340px; width: 100%; padding: 2rem; text-align: center; }
+  .auth h2 { font-size: 1.1rem; margin-bottom: 1rem; }
+  .auth input { width: 100%; padding: .6rem .8rem; border: 1px solid #444; border-radius: 8px;
+                background: #222; color: #eee; font-size: .95rem; margin-bottom: .8rem; }
+  .auth input:focus { outline: none; border-color: #4a9eff; }
+  .auth button { width: 100%; padding: .6rem; border: none; border-radius: 8px;
+                 background: #4a9eff; color: #fff; font-size: .95rem; cursor: pointer; }
+  .auth button:hover { background: #3a8eef; }
+  .auth .err { color: #f66; font-size: .85rem; margin-top: .5rem; }
 </style>
 </head>
 <body>
-<div class="wrap">
+<div class="overlay" id="auth-overlay" style="display:none">
+  <div class="auth">
+    <h2>Enter access token</h2>
+    <input type="password" id="token-input" placeholder="Token" autocomplete="off">
+    <button id="token-submit">Continue</button>
+    <div class="err" id="token-err"></div>
+  </div>
+</div>
+<div class="wrap" id="main" style="display:none">
   <h1>Strip Photo Metadata</h1>
   <div class="drop" id="drop">
     <p>Drop a photo here or tap to choose</p>
@@ -313,25 +332,40 @@ app.get("/", (_req, res) => {
 <script>
 (function() {
   const KEY = "postconvert_token";
+  const overlay = document.getElementById("auth-overlay");
+  const main = document.getElementById("main");
+  const tokenInput = document.getElementById("token-input");
+  const tokenSubmit = document.getElementById("token-submit");
+  const tokenErr = document.getElementById("token-err");
   const drop = document.getElementById("drop");
   const fileInput = document.getElementById("file");
   const status = document.getElementById("status");
 
-  function getToken() {
-    let t = localStorage.getItem(KEY);
-    if (t) return t;
-    t = prompt("Enter your access token:");
-    if (!t) return null;
-    localStorage.setItem(KEY, t.trim());
-    return t.trim();
+  function showApp() { overlay.style.display = "none"; main.style.display = ""; }
+  function showAuth() { overlay.style.display = ""; main.style.display = "none"; tokenErr.textContent = ""; }
+
+  if (localStorage.getItem(KEY)) {
+    showApp();
+  } else {
+    showAuth();
   }
 
-  // Prompt immediately on page load
-  if (!localStorage.getItem(KEY)) getToken();
+  tokenSubmit.addEventListener("click", () => {
+    const t = tokenInput.value.trim();
+    if (!t) { tokenErr.textContent = "Token required"; return; }
+    localStorage.setItem(KEY, t);
+    showApp();
+  });
+
+  tokenInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") tokenSubmit.click();
+  });
+
+  function getToken() { return localStorage.getItem(KEY); }
 
   async function strip(file) {
     const token = getToken();
-    if (!token) return;
+    if (!token) { showAuth(); return; }
 
     status.className = "status";
     status.textContent = "Stripping metadata…";
@@ -348,8 +382,8 @@ app.get("/", (_req, res) => {
 
       if (res.status === 401) {
         localStorage.removeItem(KEY);
-        status.className = "status error";
-        status.textContent = "Bad token. Try again.";
+        showAuth();
+        tokenErr.textContent = "Invalid token. Please try again.";
         return;
       }
 
