diff --git a/docs_v1.0/doc_wasm/index.html b/docs_v1.0/doc_wasm/index.html
index 0b751c3..3456887 100644
--- a/docs_v1.0/doc_wasm/index.html
+++ b/docs_v1.0/doc_wasm/index.html
@@ -33,7 +33,7 @@ html, body { height: 100%; }
 </head>
 <body>
 <div id="app">
-  <div class="sidebar">
+  <div class="sidebar" id="sidebar">
     <h1>Momentry Docs</h1>
     <div id="module-list"></div>
     <div class="logout">
@@ -134,7 +134,35 @@ async function loadDoc(name) {
   }
 }
 
-async function init() {
+async function loginUser(user, pass) {
+  var resp = await fetch('/api/v1/auth/login', {
+    method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({username:user, password:pass})
+  });
+  return resp.ok;
+}
+
+function showLoginForm() {
+  el.innerHTML = '<div style="max-width:360px;margin:80px auto;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.08);padding:40px;text-align:center">' +
+    '<h1 style="font-size:24px;margin-bottom:24px">Momentry Docs</h1>' +
+    '<input type="text" id="login-user" placeholder="Username" value="demo" style="width:100%;padding:10px;margin-bottom:12px;border:1px solid #ddd;border-radius:6px;font-size:14px">' +
+    '<input type="password" id="login-pass" placeholder="Password" value="demo" style="width:100%;padding:10px;margin-bottom:12px;border:1px solid #ddd;border-radius:6px;font-size:14px">' +
+    '<div id="login-err" style="color:#cc0000;font-size:13px;margin-bottom:12px;display:none">Invalid credentials</div>' +
+    '<button onclick="doLogin()" style="width:100%;padding:10px;background:#0066cc;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer">Login</button>' +
+    '</div>';
+}
+window.doLogin = async function() {
+  var u = document.getElementById('login-user').value;
+  var p = document.getElementById('login-pass').value;
+  if (await loginUser(u, p)) {
+    document.getElementById('sidebar').style.display = 'flex';
+    initApp();
+  } else {
+    document.getElementById('login-err').style.display = 'block';
+  }
+};
+
+async function initApp() {
   try {
     el.innerHTML = '<p>Loading WASM...</p>';
     await initWasm();
@@ -159,6 +187,8 @@ async function init() {
       loObs.observe(document.body, {childList: true, subtree: true});
     }
     
+    document.getElementById('sidebar').style.display = 'flex';
+    
     document.getElementById('logout-btn').onclick = async function(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -168,6 +198,8 @@ async function init() {
       el.innerHTML = '<p style="color:#060">Logged out. Session cleared.</p>';
       document.getElementById('logout-btn').style.display = 'none';
     };
+    
+    // Load initial module from hash or default
     var hash = location.hash.slice(1);
     await loadDoc(hash || '01_auth');
   } catch(e) {
@@ -175,6 +207,16 @@ async function init() {
   }
 }
 
+async function init() {
+  // Hide sidebar until authenticated
+  document.getElementById('sidebar').style.display = 'none';
+  if (await loginUser('demo', 'demo')) {
+    initApp();
+  } else {
+    showLoginForm();
+  }
+}
+
 init();
 </script>
 </body>
