diff --git a/server/static/ui_auth.js b/server/static/ui_auth.js
new file mode 100644
index 0000000..2b3162e
--- /dev/null
+++ b/server/static/ui_auth.js
@@ -0,0 +1,47 @@
+export function setupAuthPanel(root, socket, onLogin) {
+  root.innerHTML = `
+    <div class="panel hidden">
+      <h2>Medieval 2D</h2>
+      <div class="row"><input id="auth-user" placeholder="Username" /></div>
+      <div class="row"><input id="auth-pass" type="password" placeholder="Password" /></div>
+      <div class="row">
+        <button id="auth-register">Register</button>
+        <button id="auth-login">Login</button>
+      </div>
+      <p id="auth-msg"></p>
+    </div>
+  `;
+  const panel = root.firstElementChild;
+  const user = panel.querySelector('#auth-user');
+  const pass = panel.querySelector('#auth-pass');
+  const msg = panel.querySelector('#auth-msg');
+
+  async function call(path) {
+    const res = await fetch(path, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username: user.value, password: pass.value })
+    });
+    return res;
+  }
+
+  panel.querySelector('#auth-register').onclick = async () => {
+    const r = await call('/api/register');
+    if (r.ok) {
+      panel.classList.add('hidden');
+      onLogin();
+    } else {
+      msg.textContent = 'Username taken.';
+    }
+  };
+
+  panel.querySelector('#auth-login').onclick = async () => {
+    const r = await call('/api/login');
+    if (r.ok) {
+      panel.classList.add('hidden');
+      onLogin();
+    } else {
+      msg.textContent = 'Invalid login.';
+    }
+  };
+}