diff --git a/server/static/ui_hud.js b/server/static/ui_hud.js
new file mode 100644
index 0000000..b742f5c
--- /dev/null
+++ b/server/static/ui_hud.js
@@ -0,0 +1,48 @@
+export function setupHUD(root) {
+  root.innerHTML = `
+    <div class="panel hidden">
+      <div style="display:flex;align-items:center;gap:12px;">
+        <div id="xpbar">
+          <div id="xpfill"></div>
+          <div id="xplabel">Lvl 1 — 0 XP</div>
+        </div>
+        <label style="font-size:12px;">
+          Zoom
+          <input id="hud-zoom" type="range" min="0.6" max="2.0" step="0.05" value="1.2" />
+        </label>
+      </div>
+      <div style="display:flex;gap:8px;">
+        <button id="hud-inv">Inventory</button>
+        <button id="hud-craft">Crafting</button>
+        <button id="hud-logout">Logout</button>
+      </div>
+    </div>
+  `;
+  const panel = root.firstElementChild;
+  const zoom = panel.querySelector('#hud-zoom');
+
+  zoom.addEventListener('input', () => {
+    const z = parseFloat(zoom.value);
+    window.setGameZoom?.(z);
+  });
+
+  panel.querySelector('#hud-inv').onclick = () => {
+    window.InventoryUI?.toggle();
+  };
+  panel.querySelector('#hud-craft').onclick = () => {
+    window.CraftingUI?.toggle();
+  };
+  panel.querySelector('#hud-logout').onclick = async () => {
+    await fetch('/api/logout', { method: 'POST' });
+    location.reload();
+  };
+
+  // functions for other modules to update XP
+  window.updateXP = level => {
+    const label = panel.querySelector('#xplabel');
+    label.textContent = `Lvl ${level}`;
+    const fill = panel.querySelector('#xpfill');
+    const pct = Math.min(100, level); // dumb visual
+    fill.style.width = `${pct}%`;
+  };
+}