diff --git a/wwwroot/app.js b/wwwroot/app.js
index 7fd9a09..e237c59 100644
--- a/wwwroot/app.js
+++ b/wwwroot/app.js
@@ -327,7 +327,10 @@ function renderPhaseTitles() {
 function setupHandlers() {
   const toggleAuth = $("auth-toggle");
   if (toggleAuth) {
-    toggleAuth.addEventListener("click", () => setAuthMode(state.authMode === "login" ? "register" : "login"));
+    toggleAuth.addEventListener("click", (e) => {
+      e.preventDefault();
+      setAuthMode(state.authMode === "login" ? "register" : "login");
+    });
   }
   setAuthMode(state.authMode);
 
diff --git a/wwwroot/index.html b/wwwroot/index.html
index fff3739..5d331ae 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -19,7 +19,6 @@
     </div>
     <div class="stack">
       <h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
-      <button class="ghost" id="auth-toggle" type="button" data-i18n="auth.switchToRegister">Need an account? Register</button>
     </div>
     <div class="stack lang-field">
       <span class="label" data-i18n="lang.label">Language</span>
@@ -58,6 +57,9 @@
       </label>
       <button type="submit" data-i18n="auth.registerSubmit">Create account</button>
     </form>
+    <div class="stack">
+      <a class="auth-toggle-link" id="auth-toggle" href="#" data-i18n="auth.switchToRegister">Need an account? Register</a>
+    </div>
   </section>
 
   <section>
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index c6b69a4..42f5c45 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -184,6 +184,7 @@ p { margin: 0; }
 .link { color: #30afea; text-decoration: none; font-weight: 700; }
 .link:hover { text-decoration: underline; }
 .link.compact { font-size: 14px; }
+.auth-toggle-link { text-align: center; display: inline-block; }
 .chip { background: #c5dff1; color: #2c1c0d; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
 .chip.danger-chip { background: #e0564f; border: 1px solid #c54740; color: #fffaf3; }