diff --git a/src/views/pages.js b/src/views/pages.js
index cfd9777..c3e1820 100644
--- a/src/views/pages.js
+++ b/src/views/pages.js
@@ -45,17 +45,31 @@ function nav({ authenticated, userId }) {
     ? `<div class="flex items-center gap-2"><span class="badge badge-outline">@${escapeHtml(userId)}</span><form method="POST" action="/auth/logout"><button class="btn btn-xs btn-ghost">Log out</button></form></div>`
     : `<a class="btn btn-sm btn-primary" href="/login">Get started</a>`;
 
-  return `<header class="navbar bg-slate-900/70 border border-slate-700 rounded-2xl backdrop-blur mb-6 md:mb-8">
+  const menuItems = `
+    <li><a href="/#how">How it works</a></li>
+    <li><a href="/#pricing">Pricing</a></li>
+    <li><a href="/app">Dashboard</a></li>
+  `;
+
+  return `<div class="navbar bg-base-100 shadow-sm rounded-box mb-6 md:mb-8">
     <div class="navbar-start">
-      <a href="/" class="font-semibold tracking-tight">XArtAudio</a>
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
+        </div>
+        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+          ${menuItems}
+        </ul>
+      </div>
+      <a href="/" class="btn btn-ghost text-xl font-bold tracking-tight">XArtAudio</a>
     </div>
-    <div class="navbar-center hidden sm:flex">
-      <a href="/#how" class="btn btn-ghost btn-sm">How it works</a>
-      <a href="/#pricing" class="btn btn-ghost btn-sm">Pricing</a>
-      <a href="/app" class="btn btn-ghost btn-sm">Dashboard</a>
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal px-1">
+        ${menuItems}
+      </ul>
     </div>
     <div class="navbar-end">${right}</div>
-  </header>`;
+  </div>`;
 }
 
 function renderLandingPage({ authenticated, userId }) {
@@ -120,15 +134,41 @@ function renderLoginPage({ returnTo = "/app", error = null }) {
       <section class="card bg-slate-900/80 border border-slate-700 shadow-xl">
         <div class="card-body">
           <h1 class="text-2xl font-bold">Sign in</h1>
-          <p class="text-sm text-slate-300">Dev sign-in powered by Better Auth. Enter a username to create a session.</p>
+          <p class="text-sm text-slate-300">Use your email account or continue with X.</p>
           ${errorBlock}
-          <form method="POST" action="/auth/dev-login" class="space-y-3">
+          <form method="POST" action="/auth/x" class="mb-4">
+            <input type="hidden" name="returnTo" value="${escapeHtml(returnTo)}" />
+            <button class="btn btn-accent w-full">Continue with X</button>
+          </form>
+          <div class="divider text-xs uppercase text-slate-400">Email</div>
+          <form method="POST" action="/auth/email/sign-in" class="space-y-3">
             <input type="hidden" name="returnTo" value="${escapeHtml(returnTo)}" />
             <label class="form-control w-full">
-              <span class="label-text text-slate-200 mb-1">Username</span>
-              <input name="userId" required minlength="2" maxlength="40" class="input input-bordered w-full bg-slate-950" placeholder="matiss" />
+              <span class="label-text text-slate-200 mb-1">Email</span>
+              <input name="email" type="email" required class="input input-bordered w-full bg-slate-950" placeholder="you@domain.com" />
             </label>
-            <button class="btn btn-primary w-full">Continue</button>
+            <label class="form-control w-full">
+              <span class="label-text text-slate-200 mb-1">Password</span>
+              <input name="password" type="password" required minlength="8" maxlength="128" class="input input-bordered w-full bg-slate-950" placeholder="••••••••" />
+            </label>
+            <button class="btn btn-primary w-full">Sign in with email</button>
+          </form>
+          <div class="divider text-xs uppercase text-slate-400">Create account</div>
+          <form method="POST" action="/auth/email/sign-up" class="space-y-3">
+            <input type="hidden" name="returnTo" value="${escapeHtml(returnTo)}" />
+            <label class="form-control w-full">
+              <span class="label-text text-slate-200 mb-1">Name</span>
+              <input name="name" required minlength="2" maxlength="80" class="input input-bordered w-full bg-slate-950" placeholder="Matiss" />
+            </label>
+            <label class="form-control w-full">
+              <span class="label-text text-slate-200 mb-1">Email</span>
+              <input name="email" type="email" required class="input input-bordered w-full bg-slate-950" placeholder="you@domain.com" />
+            </label>
+            <label class="form-control w-full">
+              <span class="label-text text-slate-200 mb-1">Password</span>
+              <input name="password" type="password" required minlength="8" maxlength="128" class="input input-bordered w-full bg-slate-950" placeholder="••••••••" />
+            </label>
+            <button class="btn btn-outline w-full">Create account</button>
           </form>
         </div>
       </section>
@@ -219,8 +259,8 @@ function renderAudioPage({ audio, accessDecision, userId, playbackUrl = null })
           <div class="text-xs text-slate-400">Duration ~ ${audio.durationSec}s • Asset ${escapeHtml(audio.id)}</div>
           ${action}
           ${accessDecision.allowed
-    ? `<div class="mockup-code mt-3"><pre><code>${escapeHtml(playbackUrl || `stream://${audio.storageKey}`)}</code></pre></div>`
-    : ""}
+        ? `<div class="mockup-code mt-3"><pre><code>${escapeHtml(playbackUrl || `stream://${audio.storageKey}`)}</code></pre></div>`
+        : ""}
         </div>
       </section>
     `,