From 57710a7fe3f6ada2ddcdc4e7ff7d250914d09d9c Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 6 Oct 2026 22:00:02 +0200
Subject: [PATCH] style(landing): polish the public index, login and register
 screens

- add theme-aware helpers: btn-brand, btn-glass-dark, auth-input, auth-label,
  auth-alert, explore-pill, avatar-tile, aurora blobs and a hero scroll cue
- reorder backdrop-filter declarations so the glass blur survives the
  production CSS optimizer in modern Chromium
- hero: aurora glow, frosted recent-users chip, premium CTA buttons and cue
- explore nav: icon pills with hover arrows; features: gradient icon tiles
- stats: single glass panel with column dividers; join CTA: aurora + ring
- auth forms: visible labels, icon inputs, eye/password toggle, gradient
  submit and pill footer links
- auth pages: gradient card frame, aurora accents on the intro panel and
  hover-lift avatar tiles; unified pill-shaped top bar
- drop the hard-coded register banner image in favor of the framed card
---
 src/app/(site)/login/page.tsx           | 121 +++++-----
 src/app/(site)/page.tsx                 | 287 +++++++++++++---------
 src/app/(site)/register/page.tsx        | 117 ++++-----
 src/app/globals.css                     | 309 +++++++++++++++++++++++-
 src/components/auth/auth-top-bar.tsx    |  41 ++--
 src/components/auth/login-form.tsx      | 234 +++++++++---------
 src/components/auth/password-toggle.tsx |  37 +++
 src/components/auth/register-form.tsx   | 254 ++++++++-----------
 8 files changed, 879 insertions(+), 521 deletions(-)
 create mode 100644 src/components/auth/password-toggle.tsx

diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 3eec0a4e..408f3532 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -72,6 +72,21 @@ export default async function LoginPage() {
 								className="absolute inset-0 overflow-hidden"
 							>
 								<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
+								<div
+									className="aurora-blob -left-16 top-10 h-56 w-56"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 45%, transparent)",
+									}}
+								/>
+								<div
+									className="aurora-blob -right-16 bottom-0 h-56 w-56"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-accent) 40%, transparent)",
+										animationDelay: "-8s",
+									}}
+								/>
 							</div>
 							<div className="relative">
 								<div className="brand-halo left-1/2 top-8 h-52 w-52 -translate-x-1/2" />
@@ -88,16 +103,24 @@ export default async function LoginPage() {
 									className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
 									style={{
 										borderColor:
-											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+											"color-mix(in srgb, var(--color-primary) 30%, transparent)",
 										background:
-											"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+											"color-mix(in srgb, var(--color-surface) 72%, transparent)",
 										color:
 											"var(--color-primary-readable, var(--color-primary))",
+										boxShadow:
+											"0 8px 20px -12px color-mix(in srgb, var(--color-primary) 70%, transparent)",
 									}}
 								>
 									<span className="relative flex h-2 w-2">
-										<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-										<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
+										<span
+											className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+											style={{ background: "var(--color-primary)" }}
+										/>
+										<span
+											className="relative inline-flex rounded-full h-2 w-2"
+											style={{ background: "var(--color-primary)" }}
+										/>
 									</span>
 									{t("usersOnline", { count: online })}
 								</div>
@@ -111,7 +134,7 @@ export default async function LoginPage() {
 									{t("welcomeBack")}
 								</h1>
 								<p
-									className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+									className="text-xs mt-1.5 mx-auto max-w-[220px] leading-relaxed"
 									style={{ color: "var(--color-text-muted)" }}
 								>
 									{t("welcomeBackSub", { hotelName })}
@@ -130,26 +153,19 @@ export default async function LoginPage() {
 									{recentUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
-											style={{
-												background:
-													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
-												borderColor:
-													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
-											}}
+											title={u.username}
+											className="avatar-tile"
 										>
-											<UserAvatarThumbnail
-												figure={u.look}
-												alt=""
-												options={{ direction: 2 }}
-												className="rounded-lg"
-											/>
-											<span
-												className="w-full truncate text-center text-[9px] font-bold leading-tight"
-												style={{ color: "var(--color-text-readable)" }}
-											>
-												{u.username}
-											</span>
+											<div className="relative">
+												<UserAvatarThumbnail
+													figure={u.look}
+													alt=""
+													options={{ direction: 2 }}
+													className="rounded-lg"
+												/>
+												<span className="avatar-online absolute -bottom-0.5 -right-0.5" />
+											</div>
+											<span className="avatar-name">{u.username}</span>
 										</div>
 									))}
 								</div>
@@ -167,13 +183,8 @@ export default async function LoginPage() {
 									{latestUsers.map((u) => (
 										<div
 											key={u.username}
-											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
-											style={{
-												background:
-													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
-												borderColor:
-													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
-											}}
+											title={u.username}
+											className="avatar-tile"
 										>
 											<UserAvatarThumbnail
 												figure={u.look}
@@ -181,12 +192,7 @@ export default async function LoginPage() {
 												options={{ direction: 2 }}
 												className="rounded-lg"
 											/>
-											<span
-												className="w-full truncate text-center text-[9px] font-bold leading-tight"
-												style={{ color: "var(--color-text-readable)" }}
-											>
-												{u.username}
-											</span>
+											<span className="avatar-name">{u.username}</span>
 										</div>
 									))}
 								</div>
@@ -196,26 +202,29 @@ export default async function LoginPage() {
 
 					{/* Right: form */}
 					<div className="flex-1 lg:sticky lg:top-6">
-						<SurfaceCard
-							title={t("title")}
-							icon={ICON_NAV_ME}
-							bodyClassName="p-6 sm:p-7"
-						>
-							<p
-								className="text-sm mb-6"
-								style={{ color: "var(--color-text-muted)" }}
+						<div className="gradient-border">
+							<SurfaceCard
+								title={t("title")}
+								icon={ICON_NAV_ME}
+								bodyClassName="p-6 sm:p-7"
+								className="card-glow"
 							>
-								{t("subtitle")}
-							</p>
-							<LoginForm
-								captcha={{
-									provider: cfg.provider,
-									siteKey: cfg.siteKey || undefined,
-									field: cfg.field || undefined,
-								}}
-								nonce={nonce}
-							/>
-						</SurfaceCard>
+								<p
+									className="text-sm mb-6 leading-relaxed"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{t("subtitle")}
+								</p>
+								<LoginForm
+									captcha={{
+										provider: cfg.provider,
+										siteKey: cfg.siteKey || undefined,
+										field: cfg.field || undefined,
+									}}
+									nonce={nonce}
+								/>
+							</SurfaceCard>
+						</div>
 					</div>
 				</div>
 			</Reveal>
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 99cd006e..bc8788b6 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -1,4 +1,5 @@
 import { count, desc, eq } from "drizzle-orm";
+import { ChevronDown } from "lucide-react";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import Image from "next/image";
@@ -484,6 +485,29 @@ export default async function Home() {
 								"linear-gradient(180deg, rgba(8,11,24,0.74) 0%, rgba(8,11,24,0.55) 38%, rgba(8,11,24,0.38) 62%, rgba(8,11,24,0.55) 85%, color-mix(in srgb, var(--color-background) 94%, transparent) 100%)",
 						}}
 					/>
+					{/* Drifting brand-tinted aurora behind the copy */}
+					<div
+						aria-hidden="true"
+						className="pointer-events-none absolute inset-0 overflow-hidden"
+					>
+						<div
+							className="aurora-blob -left-24 top-1/4 h-[420px] w-[420px]"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-primary) 35%, transparent)",
+								opacity: 0.5,
+							}}
+						/>
+						<div
+							className="aurora-blob -right-24 top-1/3 h-[380px] w-[380px]"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-accent) 32%, transparent)",
+								animationDelay: "-7s",
+								opacity: 0.45,
+							}}
+						/>
+					</div>
 					<div
 						aria-hidden="true"
 						className="brand-halo left-1/2 top-1/2 h-[420px] w-[720px] max-w-full -translate-x-1/2 -translate-y-1/2"
@@ -553,7 +577,15 @@ export default async function Home() {
 						</p>
 
 						{recentUsers !== null && recentUsers.length > 0 && (
-							<div className="mt-7 flex items-center justify-center gap-3">
+							<div
+								className="mt-7 inline-flex items-center gap-3 rounded-full border px-3 py-1.5"
+								style={{
+									background: "rgba(255,255,255,0.08)",
+									borderColor: "rgba(255,255,255,0.22)",
+									backdropFilter: "blur(12px)",
+									WebkitBackdropFilter: "blur(12px)",
+								}}
+							>
 								<div className="flex -space-x-2.5">
 									{recentUsers.slice(0, 4).map((u) => (
 										<UserAvatarThumbnail
@@ -566,8 +598,8 @@ export default async function Home() {
 									))}
 								</div>
 								<span
-									className="text-[10px] font-extrabold uppercase tracking-[0.22em]"
-									style={{ color: "rgba(255,255,255,0.72)" }}
+									className="pr-1 text-[10px] font-extrabold uppercase tracking-[0.22em]"
+									style={{ color: "rgba(255,255,255,0.75)" }}
 								>
 									{tp("recentUsers")}
 								</span>
@@ -577,14 +609,7 @@ export default async function Home() {
 						<div className="mt-9 flex flex-wrap items-center justify-center gap-3">
 							<Link
 								href="/register"
-								className="btn-shine inline-flex items-center gap-2.5 rounded-2xl px-8 py-4 text-sm font-black uppercase tracking-wider transition-all duration-300 ease-out hover:-translate-y-1 hover:scale-[1.02] active:scale-95"
-								style={{
-									background:
-										"linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)))",
-									color: "var(--color-primary-foreground)",
-									boxShadow:
-										"0 12px 40px -8px color-mix(in srgb, var(--color-primary) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-primary) 55%, transparent)",
-								}}
+								className="btn-brand btn-shine px-8 py-4 text-sm font-black uppercase tracking-wider"
 							>
 								<Image
 									src="/assets/images/EnterHubbly.png"
@@ -597,16 +622,15 @@ export default async function Home() {
 							</Link>
 							<Link
 								href="/login"
-								className="inline-flex items-center gap-2 rounded-2xl px-8 py-4 text-sm font-bold transition-all duration-300 ease-out hover:-translate-y-1 hover:brightness-110 active:scale-95"
-								style={{
-									color: "#fff",
-									background: "rgba(255,255,255,0.07)",
-									border: "1px solid rgba(255,255,255,0.24)",
-									backdropFilter: "blur(8px)",
-									WebkitBackdropFilter: "blur(8px)",
-								}}
+								className="btn-glass-dark px-8 py-4 text-sm font-bold"
 							>
-								{th("login")} →
+								{th("login")}
+								<span
+									aria-hidden="true"
+									className="transition-transform duration-300 group-hover:translate-x-1"
+								>
+									→
+								</span>
 							</Link>
 						</div>
 
@@ -633,6 +657,28 @@ export default async function Home() {
 						</div>
 					</div>
 
+					{/* Scroll cue */}
+					<div
+						aria-hidden="true"
+						className="pointer-events-none absolute bottom-6 left-1/2 hidden -translate-x-1/2 sm:block"
+						style={{ zIndex: 2 }}
+					>
+						<div
+							className="hero-cue flex h-10 w-10 items-center justify-center rounded-full"
+							style={{
+								background: "rgba(255,255,255,0.09)",
+								border: "1px solid rgba(255,255,255,0.3)",
+								backdropFilter: "blur(10px)",
+								WebkitBackdropFilter: "blur(10px)",
+							}}
+						>
+							<ChevronDown
+								className="h-5 w-5"
+								style={{ color: "rgba(255,255,255,0.88)" }}
+							/>
+						</div>
+					</div>
+
 					{/* Floating mascot — decorative, hidden on smaller screens. */}
 					<div
 						aria-hidden="true"
@@ -661,26 +707,25 @@ export default async function Home() {
 					aria-label={tp("exploreLabel")}
 					className="flex flex-wrap items-center justify-center gap-2.5 sm:gap-3"
 				>
-					{exploreLinks.map((l) => (
-						<Link
-							key={l.href}
-							href={l.href}
-							className="group inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-xs font-bold transition-all duration-300 hover:-translate-y-0.5 sm:text-sm"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-surface) 55%, transparent)",
-								border:
-									"1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-								color: "var(--color-text-readable)",
-								backdropFilter: "blur(10px)",
-								WebkitBackdropFilter: "blur(10px)",
-								boxShadow:
-									"0 2px 8px -2px color-mix(in srgb, #000 8%, transparent)",
-							}}
-						>
+					{exploreLinks.map((l, i) => (
+						<Link key={l.href} href={l.href} className="explore-pill group">
+							<span
+								aria-hidden="true"
+								className="h-1.5 w-1.5 shrink-0 rounded-full"
+								style={{
+									background:
+										i % 2 === 0
+											? "var(--color-primary)"
+											: "var(--color-accent)",
+									boxShadow: `0 0 8px color-mix(in srgb, ${
+										i % 2 === 0 ? "var(--color-primary)" : "var(--color-accent)"
+									} 70%, transparent)`,
+								}}
+							/>
 							{l.label}
 							<span
-								className="-translate-x-1 text-[10px] opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
+								aria-hidden="true"
+								className="pill-arrow text-[11px]"
 								style={{
 									color: "var(--color-primary-readable, var(--color-primary))",
 								}}
@@ -738,8 +783,8 @@ export default async function Home() {
 									<div
 										className="relative flex h-12 w-12 items-center justify-center rounded-2xl transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-3"
 										style={{
-											background: `color-mix(in srgb, ${accentVar} 16%, transparent)`,
-											boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accentVar} 22%, transparent)`,
+											background: `linear-gradient(135deg, color-mix(in srgb, ${accentVar} 30%, transparent), color-mix(in srgb, ${accentVar} 12%, transparent))`,
+											boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${accentVar} 30%, transparent), 0 8px 18px -10px color-mix(in srgb, ${accentVar} 70%, transparent)`,
 											borderRadius: 14,
 										}}
 									>
@@ -787,64 +832,73 @@ export default async function Home() {
 							</h2>
 						</div>
 					</div>
-					<div className="grid grid-cols-2 gap-x-4 gap-y-8 lg:grid-cols-4">
-						{[
-							{ value: users, label: tp("statsCitizens"), icon: ICON_FRIENDS },
-							{ value: rooms, label: tp("statsRooms"), icon: ICON_CATALOG },
-							{
-								value: totalPhotos,
-								label: tp("statsPhotos"),
-								icon: ICON_CAMERA,
-							},
-							{
-								value: articles?.length ?? null,
-								label: tp("statsArticles"),
-								icon: ICON_ARTICLE,
-							},
-						].map((s) => (
-							<div
-								key={s.label}
-								className="group relative flex flex-col items-center gap-2.5 text-center"
-							>
+					<div
+						className="card-hairline overflow-hidden rounded-2xl border"
+						style={PANEL_STYLE}
+					>
+						<div className="grid grid-cols-2 gap-x-4 gap-y-8 p-6 sm:p-8 lg:grid-cols-4">
+							{[
+								{
+									value: users,
+									label: tp("statsCitizens"),
+									icon: ICON_FRIENDS,
+								},
+								{ value: rooms, label: tp("statsRooms"), icon: ICON_CATALOG },
+								{
+									value: totalPhotos,
+									label: tp("statsPhotos"),
+									icon: ICON_CAMERA,
+								},
+								{
+									value: articles?.length ?? null,
+									label: tp("statsArticles"),
+									icon: ICON_ARTICLE,
+								},
+							].map((s) => (
 								<div
-									className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
-										boxShadow:
-											"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent)",
-									}}
+									key={s.label}
+									className="stat-cell group relative flex flex-col items-center gap-2.5 text-center"
 								>
-									<Image
-										src={s.icon}
-										alt=""
-										width={20}
-										height={20}
-										unoptimized
-									/>
+									<div
+										className="flex h-10 w-10 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110"
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+											boxShadow:
+												"inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent)",
+										}}
+									>
+										<Image
+											src={s.icon}
+											alt=""
+											width={20}
+											height={20}
+											unoptimized
+										/>
+									</div>
+									<div
+										className="gradient-text text-4xl font-black tracking-tight sm:text-5xl"
+										style={{ fontVariantNumeric: "tabular-nums" }}
+									>
+										{s.value === null ? (
+											<span className="text-base">{te("unavailable")}</span>
+										) : (
+											<AnimatedCounter value={s.value} />
+										)}
+									</div>
+									<span
+										className="rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-widest"
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+											color: "var(--color-text-muted)",
+										}}
+									>
+										{s.label}
+									</span>
 								</div>
-								<div
-									className="gradient-text text-4xl font-black tracking-tight sm:text-5xl"
-									style={{ fontVariantNumeric: "tabular-nums" }}
-								>
-									{s.value === null ? (
-										<span className="text-base">{te("unavailable")}</span>
-									) : (
-										<AnimatedCounter value={s.value} />
-									)}
-								</div>
-								<span
-									className="rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-widest"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-										color: "var(--color-text-muted)",
-									}}
-								>
-									{s.label}
-								</span>
-							</div>
-						))}
+							))}
+						</div>
 					</div>
 				</div>
 			</Reveal>
@@ -1011,6 +1065,28 @@ export default async function Home() {
 						className="brand-halo left-1/2 top-0 h-72 w-[620px] max-w-full -translate-x-1/2 -translate-y-1/3"
 						style={{ opacity: 0.6 }}
 					/>
+					<div
+						aria-hidden="true"
+						className="pointer-events-none absolute inset-0 overflow-hidden"
+					>
+						<div
+							className="aurora-blob -left-20 bottom-0 h-72 w-72"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-accent) 45%, transparent)",
+								opacity: 0.5,
+							}}
+						/>
+						<div
+							className="aurora-blob -right-16 top-4 h-64 w-64"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-primary) 45%, transparent)",
+								animationDelay: "-6s",
+								opacity: 0.5,
+							}}
+						/>
+					</div>
 					<h2
 						id="join-cta-title"
 						className="relative text-3xl font-black tracking-tight text-balance sm:text-4xl"
@@ -1027,34 +1103,21 @@ export default async function Home() {
 					<div className="relative mt-8 flex flex-wrap items-center justify-center gap-3">
 						<Link
 							href="/register"
-							className="btn-shine group inline-flex items-center gap-2 rounded-2xl px-8 py-4 text-sm font-black uppercase tracking-wide transition-all duration-300 hover:-translate-y-1 hover:scale-[1.02] active:scale-95"
-							style={{
-								background:
-									"linear-gradient(120deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)))",
-								color: "var(--color-primary-foreground)",
-								boxShadow:
-									"0 12px 40px -8px color-mix(in srgb, var(--color-primary) 50%, transparent)",
-							}}
+							className="btn-brand btn-shine group px-8 py-4 text-sm font-black uppercase tracking-wide"
 						>
 							{tp("ctaJoin")}
-							<span className="transition-transform duration-300 group-hover:translate-x-0.5">
+							<span className="transition-transform duration-300 group-hover:translate-x-1">
 								→
 							</span>
 						</Link>
 						<Link
 							href="/community"
-							className="inline-flex items-center rounded-2xl px-8 py-4 text-sm font-bold transition-all duration-300 hover:-translate-y-1 hover:brightness-110 active:scale-95"
-							style={{
-								color: "#fff",
-								background: "rgba(255,255,255,0.07)",
-								border: "1px solid rgba(255,255,255,0.22)",
-								backdropFilter: "blur(8px)",
-								WebkitBackdropFilter: "blur(8px)",
-							}}
+							className="btn-glass-dark px-8 py-4 text-sm font-bold"
 						>
 							{tp("browseCommunity")}
 						</Link>
 					</div>
+					<div className="hero-ring" aria-hidden="true" />
 				</section>
 			</Reveal>
 		</div>
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index 81a751dc..fb261541 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -82,6 +82,21 @@ export default async function RegisterPage() {
 								className="absolute inset-0 overflow-hidden"
 							>
 								<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
+								<div
+									className="aurora-blob -left-16 top-6 h-56 w-56"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 45%, transparent)",
+									}}
+								/>
+								<div
+									className="aurora-blob -right-16 bottom-0 h-56 w-56"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-accent) 40%, transparent)",
+										animationDelay: "-8s",
+									}}
+								/>
 							</div>
 							<div className="relative">
 								<div className="flex items-center gap-4">
@@ -102,16 +117,24 @@ export default async function RegisterPage() {
 											className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-2 border"
 											style={{
 												borderColor:
-													"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+													"color-mix(in srgb, var(--color-primary) 30%, transparent)",
 												background:
-													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+													"color-mix(in srgb, var(--color-surface) 72%, transparent)",
 												color:
 													"var(--color-primary-readable, var(--color-primary))",
+												boxShadow:
+													"0 8px 20px -12px color-mix(in srgb, var(--color-primary) 70%, transparent)",
 											}}
 										>
 											<span className="relative flex h-2 w-2">
-												<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-												<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
+												<span
+													className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+													style={{ background: "var(--color-primary)" }}
+												/>
+												<span
+													className="relative inline-flex rounded-full h-2 w-2"
+													style={{ background: "var(--color-primary)" }}
+												/>
 											</span>
 											{tpr("usersOnline", { count: online })}
 										</div>
@@ -148,26 +171,18 @@ export default async function RegisterPage() {
 										<div
 											key={u.username}
 											title={u.username}
-											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
-											style={{
-												background:
-													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
-												borderColor:
-													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
-											}}
+											className="avatar-tile"
 										>
-											<UserAvatarThumbnail
-												figure={u.look}
-												alt=""
-												options={{ direction: 2 }}
-												className="rounded-lg"
-											/>
-											<span
-												className="w-full truncate text-center text-[9px] font-bold leading-tight"
-												style={{ color: "var(--color-text-readable)" }}
-											>
-												{u.username}
-											</span>
+											<div className="relative">
+												<UserAvatarThumbnail
+													figure={u.look}
+													alt=""
+													options={{ direction: 2 }}
+													className="rounded-lg"
+												/>
+												<span className="avatar-online absolute -bottom-0.5 -right-0.5" />
+											</div>
+											<span className="avatar-name">{u.username}</span>
 										</div>
 									))}
 								</div>
@@ -186,13 +201,7 @@ export default async function RegisterPage() {
 										<div
 											key={u.username}
 											title={u.username}
-											className="flex flex-col items-center gap-1.5 rounded-xl border px-1 py-2 transition-all duration-200 hover:-translate-y-0.5 hover:ring-1 hover:ring-[color-mix(in_srgb,var(--color-primary)_35%,transparent)]"
-											style={{
-												background:
-													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
-												borderColor:
-													"color-mix(in srgb, var(--color-primary) 10%, transparent)",
-											}}
+											className="avatar-tile"
 										>
 											<UserAvatarThumbnail
 												figure={u.look}
@@ -200,12 +209,7 @@ export default async function RegisterPage() {
 												options={{ direction: 2 }}
 												className="rounded-lg"
 											/>
-											<span
-												className="w-full truncate text-center text-[9px] font-bold leading-tight"
-												style={{ color: "var(--color-text-readable)" }}
-											>
-												{u.username}
-											</span>
+											<span className="avatar-name">{u.username}</span>
 										</div>
 									))}
 								</div>
@@ -215,26 +219,29 @@ export default async function RegisterPage() {
 
 					{/* Right: form */}
 					<div className="flex-1 lg:sticky lg:top-6">
-						<SurfaceCard
-							title={tpr("title")}
-							icon={ICON_NAV_ME}
-							bodyClassName="p-6 sm:p-7"
-						>
-							<p
-								className="text-sm mb-6"
-								style={{ color: "var(--color-text-muted)" }}
+						<div className="gradient-border">
+							<SurfaceCard
+								title={tpr("title")}
+								icon={ICON_NAV_ME}
+								bodyClassName="p-6 sm:p-7"
+								className="card-glow"
 							>
-								{tpr("subtitle")}
-							</p>
-							<RegisterForm
-								hotelName={hotelName}
-								captcha={{
-									provider: cfg.provider,
-									siteKey: cfg.siteKey || undefined,
-								}}
-								nonce={nonce}
-							/>
-						</SurfaceCard>
+								<p
+									className="text-sm mb-6 leading-relaxed"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{tpr("subtitle")}
+								</p>
+								<RegisterForm
+									hotelName={hotelName}
+									captcha={{
+										provider: cfg.provider,
+										siteKey: cfg.siteKey || undefined,
+									}}
+									nonce={nonce}
+								/>
+							</SurfaceCard>
+						</div>
 					</div>
 				</div>
 			</Reveal>
diff --git a/src/app/globals.css b/src/app/globals.css
index 7bf30a6e..5be90f83 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2162,14 +2162,14 @@ details[open] > summary .details-open\:rotate-180 {
 /* Glass morphism */
 .glass {
 	background: color-mix(in srgb, var(--color-surface) 70%, transparent);
-	backdrop-filter: blur(20px);
 	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
 	border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);
 }
 .glass-strong {
 	background: color-mix(in srgb, var(--color-surface) 85%, transparent);
-	backdrop-filter: blur(32px);
 	-webkit-backdrop-filter: blur(32px);
+	backdrop-filter: blur(32px);
 	border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
 }
 
@@ -2532,3 +2532,308 @@ html {
 	letter-spacing: 0.12em;
 	color: var(--color-text-muted);
 }
+
+/* ── Public page polish: buttons ──────────────────────────────────── */
+.btn-brand {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	border-radius: 999px;
+	background: linear-gradient(
+		120deg,
+		var(--color-primary) 0%,
+		color-mix(in srgb, var(--color-primary) 72%, var(--color-accent)) 55%,
+		color-mix(in srgb, var(--color-accent) 85%, var(--color-primary)) 100%
+	);
+	color: var(--color-primary-foreground);
+	box-shadow:
+		0 10px 26px -12px color-mix(in srgb, var(--color-primary) 75%, transparent),
+		inset 0 1px 0 0 color-mix(in srgb, white 35%, transparent);
+	transition:
+		transform 0.22s ease,
+		box-shadow 0.22s ease,
+		filter 0.22s ease;
+}
+.btn-brand:hover {
+	transform: translateY(-2px);
+	filter: brightness(1.05);
+	box-shadow:
+		0 18px 36px -14px color-mix(in srgb, var(--color-primary) 85%, transparent),
+		inset 0 1px 0 0 color-mix(in srgb, white 45%, transparent);
+}
+.btn-brand:active {
+	transform: translateY(0) scale(0.985);
+}
+.btn-brand:focus-visible {
+	outline: none;
+	box-shadow:
+		0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent),
+		0 14px 32px -14px color-mix(in srgb, var(--color-primary) 80%, transparent);
+}
+
+/* Frosted CTA meant to sit on top of the dark hero image. */
+.btn-glass-dark {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	border-radius: 999px;
+	color: #fff;
+	background: color-mix(in srgb, #ffffff 10%, transparent);
+	border: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
+	-webkit-backdrop-filter: blur(12px);
+	backdrop-filter: blur(12px);
+	box-shadow: inset 0 1px 0 0 color-mix(in srgb, #ffffff 25%, transparent);
+	transition:
+		background 0.22s ease,
+		border-color 0.22s ease,
+		transform 0.22s ease;
+}
+.btn-glass-dark:hover {
+	background: color-mix(in srgb, #ffffff 20%, transparent);
+	border-color: color-mix(in srgb, #ffffff 60%, transparent);
+	transform: translateY(-2px);
+}
+.btn-glass-dark:active {
+	transform: translateY(0);
+}
+.btn-glass-dark:focus-visible {
+	outline: none;
+	border-color: #fff;
+	box-shadow: 0 0 0 3px
+		color-mix(in srgb, var(--color-primary) 55%, transparent);
+}
+
+/* ── Public page polish: auth fields ──────────────────────────────── */
+.auth-label {
+	display: block;
+	font-size: 11px;
+	font-weight: 800;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+	color: var(--color-text-muted);
+	margin-bottom: 0.4rem;
+}
+.auth-input {
+	width: 100%;
+	border-radius: 14px;
+	border: 1.5px solid
+		color-mix(in srgb, var(--color-text-muted) 22%, transparent);
+	background: color-mix(
+		in srgb,
+		var(--color-background) 88%,
+		var(--color-surface)
+	);
+	padding: 0.78rem 1rem;
+	font-size: 0.875rem;
+	font-weight: 600;
+	color: var(--color-text-readable);
+	transition:
+		border-color 0.2s ease,
+		box-shadow 0.2s ease,
+		background-color 0.2s ease;
+}
+.auth-input::placeholder {
+	color: color-mix(in srgb, var(--color-text-muted) 75%, transparent);
+	font-weight: 500;
+}
+.auth-input:hover:not(:disabled):not(:focus) {
+	border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
+}
+.auth-input:focus {
+	outline: none;
+	border-color: var(--color-primary);
+	background: var(--color-surface);
+	box-shadow:
+		0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent),
+		0 0 24px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
+}
+.auth-input:disabled {
+	opacity: 0.55;
+	cursor: not-allowed;
+}
+.auth-input.has-icon {
+	padding-left: 2.75rem;
+}
+.auth-input.has-action {
+	padding-right: 2.75rem;
+}
+
+/* Alert box used for form errors. */
+.auth-alert {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+	border-radius: 14px;
+	padding: 0.7rem 0.85rem;
+	font-size: 0.85rem;
+	font-weight: 700;
+	color: color-mix(
+		in srgb,
+		var(--color-danger) 85%,
+		var(--color-text-readable)
+	);
+	background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+	border: 1px solid color-mix(in srgb, var(--color-danger) 32%, transparent);
+}
+
+/* ── Public page polish: explore pills ────────────────────────────── */
+.explore-pill {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.6rem 1.15rem;
+	border-radius: 999px;
+	font-size: 0.85rem;
+	font-weight: 700;
+	color: var(--color-text-readable);
+	background: color-mix(in srgb, var(--color-surface) 55%, transparent);
+	border: 1px solid color-mix(in srgb, var(--color-text-muted) 16%, transparent);
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+	transition:
+		background 0.25s ease,
+		border-color 0.25s ease,
+		transform 0.25s ease,
+		box-shadow 0.25s ease;
+}
+.explore-pill:hover {
+	background: color-mix(
+		in srgb,
+		var(--color-primary) 16%,
+		var(--color-surface)
+	);
+	border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
+	transform: translateY(-2px);
+	box-shadow: 0 12px 26px -14px
+		color-mix(in srgb, var(--color-primary) 80%, transparent);
+}
+.explore-pill .pill-arrow {
+	opacity: 0;
+	transform: translateX(-4px);
+	transition:
+		opacity 0.25s ease,
+		transform 0.25s ease;
+}
+.explore-pill:hover .pill-arrow {
+	opacity: 1;
+	transform: translateX(0);
+}
+.explore-pill:focus-visible {
+	outline: none;
+	border-color: var(--color-primary);
+	box-shadow: 0 0 0 3px
+		color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+/* ── Public page polish: avatar tiles ─────────────────────────────── */
+.avatar-tile {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.4rem;
+	padding: 0.55rem 0.3rem;
+	border-radius: 14px;
+	background: color-mix(in srgb, var(--color-primary) 6%, transparent);
+	border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
+	transition:
+		transform 0.25s ease,
+		border-color 0.25s ease,
+		box-shadow 0.25s ease,
+		background 0.25s ease;
+}
+.avatar-tile:hover {
+	transform: translateY(-3px);
+	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
+	box-shadow: 0 12px 24px -14px
+		color-mix(in srgb, var(--color-primary) 85%, transparent);
+}
+.avatar-name {
+	font-size: 9.5px;
+	font-weight: 800;
+	letter-spacing: 0.04em;
+	color: var(--color-text-muted);
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.avatar-tile:hover .avatar-name {
+	color: var(--color-text-readable);
+}
+.avatar-online {
+	width: 8px;
+	height: 8px;
+	border-radius: 999px;
+	background: var(--color-accent);
+	box-shadow: 0 0 0 2px var(--color-surface);
+}
+
+/* ── Public page polish: drifting aurora blobs ────────────────────── */
+.aurora-blob {
+	position: absolute;
+	border-radius: 999px;
+	filter: blur(70px);
+	pointer-events: none;
+	will-change: transform;
+	animation: aurora-drift 16s ease-in-out infinite alternate;
+}
+@keyframes aurora-drift {
+	from {
+		transform: translate3d(0, 0, 0) scale(1);
+		opacity: 0.55;
+	}
+	to {
+		transform: translate3d(30px, -24px, 0) scale(1.15);
+		opacity: 0.85;
+	}
+}
+
+/* Small bobbing scroll cue at the bottom of the hero. */
+.hero-cue {
+	animation: float 2.4s ease-in-out infinite;
+	will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.aurora-blob,
+	.hero-cue {
+		animation: none;
+	}
+	.btn-brand:hover,
+	.btn-glass-dark:hover,
+	.explore-pill:hover,
+	.avatar-tile:hover {
+		transform: none;
+	}
+}
+
+/* Dividers between the four counters in the stats panel. */
+.stat-cell {
+	position: relative;
+}
+@media (min-width: 1024px) {
+	.stat-cell:not(:first-child)::before {
+		content: "";
+		position: absolute;
+		left: -0.5rem;
+		top: 18%;
+		height: 64%;
+		width: 1px;
+		background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
+	}
+}
+@media (max-width: 1023px) {
+	.stat-cell:nth-child(3)::before {
+		content: "";
+		position: absolute;
+		left: -0.5rem;
+		top: 10%;
+		height: 80%;
+		width: 1px;
+		background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);
+	}
+}
diff --git a/src/components/auth/auth-top-bar.tsx b/src/components/auth/auth-top-bar.tsx
index 6ab9fcb9..5ef15c12 100644
--- a/src/components/auth/auth-top-bar.tsx
+++ b/src/components/auth/auth-top-bar.tsx
@@ -23,14 +23,14 @@ export function AuthTopBar({
 	return (
 		<Reveal>
 			<div
-				className="relative flex items-center justify-between rounded-xl border px-3 py-2.5 sm:px-5 sm:py-3"
+				className="relative flex items-center justify-between rounded-full border px-3 py-2.5 sm:px-5"
 				style={{
 					background:
-						"color-mix(in srgb, var(--color-surface) 60%, transparent)",
+						"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
 					backdropFilter: "blur(14px)",
 					WebkitBackdropFilter: "blur(14px)",
 					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 					boxShadow:
 						"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
 				}}
@@ -44,21 +44,32 @@ export function AuthTopBar({
 							height={28}
 							className="shrink-0 object-contain"
 							unoptimized
-							style={{ maxHeight: 28, width: "auto", height: "auto" }}
+							style={{ maxHeight: 26, width: "auto", height: "auto" }}
 						/>
 					) : (
-						<Image
-							src={ICON_LIGHTHOUSE}
-							alt={hotelName}
-							width={28}
-							height={28}
-							className="shrink-0"
-							unoptimized
-						/>
+						<div
+							className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full"
+							style={{
+								background:
+									"linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 60%, var(--color-primary)))",
+								boxShadow:
+									"0 4px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent)",
+							}}
+						>
+							<Image
+								src={ICON_LIGHTHOUSE}
+								alt=""
+								width={18}
+								height={18}
+								className="shrink-0"
+								unoptimized
+								style={{ filter: "brightness(0) invert(1)" }}
+							/>
+						</div>
 					)}
 					{showHotelName ? (
 						<span
-							className="hidden sm:inline text-sm font-extrabold uppercase tracking-wide"
+							className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
 							style={{ color: "var(--color-text-readable)" }}
 						>
 							{hotelName}
@@ -66,10 +77,10 @@ export function AuthTopBar({
 					) : null}
 				</div>
 				<div
-					className="flex items-center gap-1 sm:gap-1.5 rounded-lg px-1.5 py-1 sm:px-2"
+					className="flex items-center gap-1 sm:gap-1.5 rounded-full px-1.5 py-1 sm:px-2"
 					style={{
 						background:
-							"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+							"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
 					}}
 				>
 					<LanguageSwitcher />
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index 41b6aa8b..28bb3d61 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { KeyRound, Lock, UserRound } from "lucide-react";
 import { signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
 import { type FormEvent, useId, useState } from "react";
@@ -9,6 +10,7 @@ import {
 	CaptchaWidget,
 	readCaptchaToken,
 } from "@/components/auth/captcha-widget";
+import { PasswordToggle } from "@/components/auth/password-toggle";
 import Link from "@/components/link";
 import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
 
@@ -49,7 +51,6 @@ export function LoginForm({
 	const [pending, setPending] = useState(false);
 
 	const showFooter = variant === "page";
-	const labelled = variant === "compact";
 	const lockCredentials = needs2fa ? "opacity-50 pointer-events-none" : "";
 
 	async function onSubmit(e: FormEvent<HTMLFormElement>) {
@@ -103,8 +104,14 @@ export function LoginForm({
 		<>
 			{needs2fa && (
 				<p
-					className="animate-fade-in-up mb-4 text-sm font-semibold"
-					style={{ color: "var(--color-text-muted)" }}
+					className="animate-fade-in-up mb-4 rounded-xl border px-3 py-2.5 text-sm font-semibold"
+					style={{
+						color: "var(--color-text-readable)",
+						background:
+							"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-primary) 26%, transparent)",
+					}}
 				>
 					{t("subtitle2fa")}
 				</p>
@@ -115,113 +122,89 @@ export function LoginForm({
 				aria-label={t("signIn")}
 				className="relative flex flex-col gap-4"
 			>
-				<div className={labelled ? "space-y-1" : lockCredentials}>
-					<label
-						htmlFor={`${fieldId}-username`}
-						className={
-							labelled
-								? "block text-xs font-bold uppercase tracking-wider"
-								: "sr-only"
-						}
-						style={{ color: "var(--color-text-muted)" }}
-					>
+				<div className={`space-y-1.5 ${lockCredentials}`}>
+					<label htmlFor={`${fieldId}-username`} className="auth-label">
 						{t("username")}
 					</label>
-					<input
-						id={`${fieldId}-username`}
-						name="username"
-						type="text"
-						value={username}
-						onChange={(e) => setUsername(e.target.value)}
-						placeholder={t("usernamePlaceholder")}
-						autoComplete="username"
-						disabled={needs2fa}
-						required
-						className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
-						style={{
-							backgroundColor: "var(--color-background)",
-							color: "var(--color-text-readable)",
-							borderColor: needs2fa
-								? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
-								: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-						}}
-					/>
+					<div className="relative">
+						<UserRound
+							aria-hidden="true"
+							className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
+							style={{ color: "var(--color-text-muted)" }}
+						/>
+						<input
+							id={`${fieldId}-username`}
+							name="username"
+							type="text"
+							value={username}
+							onChange={(e) => setUsername(e.target.value)}
+							placeholder={t("usernamePlaceholder")}
+							autoComplete="username"
+							disabled={needs2fa}
+							required
+							className="auth-input has-icon"
+						/>
+					</div>
 				</div>
 
-				<div className={`${labelled ? "space-y-1" : lockCredentials} relative`}>
-					<label
-						htmlFor={`${fieldId}-password`}
-						className={
-							labelled
-								? "block text-xs font-bold uppercase tracking-wider"
-								: "sr-only"
-						}
-						style={{ color: "var(--color-text-muted)" }}
-					>
+				<div className={`space-y-1.5 ${lockCredentials}`}>
+					<label htmlFor={`${fieldId}-password`} className="auth-label">
 						{t("password")}
 					</label>
-					<input
-						id={`${fieldId}-password`}
-						name="password"
-						type={showPassword ? "text" : "password"}
-						value={password}
-						onChange={(e) => setPassword(e.target.value)}
-						placeholder={t("passwordPlaceholder")}
-						autoComplete="current-password"
-						disabled={needs2fa}
-						required
-						className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
-						style={{
-							backgroundColor: "var(--color-background)",
-							color: "var(--color-text-readable)",
-							borderColor: needs2fa
-								? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
-								: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-						}}
-					/>
-					<button
-						type="button"
-						onClick={() => setShowPassword(!showPassword)}
-						className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 transition-opacity hover:opacity-100"
-						style={{ color: "var(--color-text-muted)" }}
-						tabIndex={-1}
-						aria-label={showPassword ? t("hidePassword") : t("showPassword")}
-						aria-pressed={showPassword}
-					>
-						{showPassword ? t("hidePassword") : t("showPassword")}
-					</button>
+					<div className="relative">
+						<Lock
+							aria-hidden="true"
+							className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
+							style={{ color: "var(--color-text-muted)" }}
+						/>
+						<input
+							id={`${fieldId}-password`}
+							name="password"
+							type={showPassword ? "text" : "password"}
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							placeholder={t("passwordPlaceholder")}
+							autoComplete="current-password"
+							disabled={needs2fa}
+							required
+							className="auth-input has-icon has-action"
+						/>
+						<PasswordToggle
+							show={showPassword}
+							onToggle={() => setShowPassword((v) => !v)}
+							labelShow={t("showPassword")}
+							labelHide={t("hidePassword")}
+						/>
+					</div>
 				</div>
 
 				{needs2fa ? (
-					<div className={`animate-scale-in ${labelled ? "space-y-1" : ""}`}>
-						<label
-							htmlFor={`${fieldId}-2fa`}
-							className={
-								labelled
-									? "block text-xs font-bold uppercase tracking-wider"
-									: "sr-only"
-							}
-							style={{ color: "var(--color-text-muted)" }}
-						>
+					<div className="animate-scale-in space-y-1.5">
+						<label htmlFor={`${fieldId}-2fa`} className="auth-label">
 							{t("codePlaceholder")}
 						</label>
-						<input
-							id={`${fieldId}-2fa`}
-							name="code"
-							type="text"
-							value={code}
-							onChange={(e) => setCode(e.target.value)}
-							placeholder={t("codePlaceholder")}
-							inputMode="numeric"
-							autoComplete="one-time-code"
-							className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
-							style={{
-								backgroundColor: "var(--color-background)",
-								color: "var(--color-text-readable)",
-								borderColor:
-									"color-mix(in srgb, var(--color-primary) 30%, transparent)",
-							}}
-						/>
+						<div className="relative">
+							<KeyRound
+								aria-hidden="true"
+								className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
+								style={{ color: "var(--color-primary)" }}
+							/>
+							<input
+								id={`${fieldId}-2fa`}
+								name="code"
+								type="text"
+								value={code}
+								onChange={(e) => setCode(e.target.value)}
+								placeholder={t("codePlaceholder")}
+								inputMode="numeric"
+								autoComplete="one-time-code"
+								className="auth-input has-icon"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 45%, transparent)",
+								}}
+							/>
+						</div>
 					</div>
 				) : (
 					<CaptchaWidget captcha={captcha} nonce={nonce} />
@@ -231,8 +214,7 @@ export function LoginForm({
 					<p
 						role="alert"
 						aria-live="polite"
-						className="m-0 animate-fade-in-up text-center text-sm font-semibold"
-						style={{ color: "var(--color-danger)" }}
+						className="auth-alert animate-fade-in-up m-0"
 					>
 						{error}
 					</p>
@@ -241,13 +223,7 @@ export function LoginForm({
 				<button
 					type="submit"
 					disabled={pending}
-					className="btn-shine w-full cursor-pointer rounded-xl py-3.5 text-sm font-extrabold shadow-lg transition-all duration-200 hover:scale-[1.02] active:scale-95 disabled:opacity-60"
-					style={{
-						background: "var(--color-primary)",
-						color: "var(--color-primary-foreground)",
-						boxShadow:
-							"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
-					}}
+					className="btn-brand btn-shine w-full cursor-pointer py-3.5 text-sm font-extrabold uppercase tracking-wider disabled:opacity-60"
 				>
 					{pending ? (
 						<span className="inline-flex items-center justify-center gap-2">
@@ -283,27 +259,41 @@ export function LoginForm({
 			</form>
 
 			{showFooter && (
-				<p
-					className="mt-6 text-center text-xs"
-					style={{ color: "var(--color-text-muted)" }}
+				<div
+					className="mt-6 space-y-3 border-t pt-5"
+					style={{
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
+					}}
 				>
-					{t("noAccount")}{" "}
-					<Link
-						href="/register"
-						className="font-extrabold hover:underline"
-						style={{ color: "var(--color-primary)" }}
+					<p
+						className="text-center text-xs"
+						style={{ color: "var(--color-text-muted)" }}
 					>
-						{t("createOne")}
-					</Link>{" "}
-					·{" "}
+						{t("noAccount")}{" "}
+						<Link
+							href="/register"
+							className="font-extrabold transition-colors hover:underline"
+							style={{ color: "var(--color-primary)" }}
+						>
+							{t("createOne")}
+						</Link>
+					</p>
 					<Link
 						href="/forgot"
-						className="font-extrabold hover:underline"
-						style={{ color: "var(--color-primary)" }}
+						className="flex items-center justify-center gap-2 rounded-full border px-4 py-2.5 text-xs font-extrabold transition-all duration-200 hover:-translate-y-0.5"
+						style={{
+							color: "var(--color-primary)",
+							background:
+								"color-mix(in srgb, var(--color-primary) 8%, transparent)",
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 35%, transparent)",
+						}}
 					>
+						<KeyRound aria-hidden="true" className="h-3.5 w-3.5" />
 						{t("forgotPassword")}
 					</Link>
-				</p>
+				</div>
 			)}
 		</>
 	);
diff --git a/src/components/auth/password-toggle.tsx b/src/components/auth/password-toggle.tsx
new file mode 100644
index 00000000..92746cd6
--- /dev/null
+++ b/src/components/auth/password-toggle.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { Eye, EyeOff } from "lucide-react";
+
+/**
+ * Round eye-icon button that reveals / hides a password field. Kept separate so
+ * the login and register forms share one consistent control (and a11y labels).
+ */
+export function PasswordToggle({
+	show,
+	onToggle,
+	labelShow,
+	labelHide,
+}: {
+	show: boolean;
+	onToggle: () => void;
+	labelShow: string;
+	labelHide: string;
+}) {
+	return (
+		<button
+			type="button"
+			onClick={onToggle}
+			aria-label={show ? labelHide : labelShow}
+			aria-pressed={show}
+			tabIndex={-1}
+			className="absolute right-2.5 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-200 hover:bg-[color-mix(in_srgb,var(--color-primary)_14%,transparent)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]"
+			style={{ color: "var(--color-text-muted)" }}
+		>
+			{show ? (
+				<EyeOff aria-hidden="true" className="h-4 w-4" />
+			) : (
+				<Eye aria-hidden="true" className="h-4 w-4" />
+			)}
+		</button>
+	);
+}
diff --git a/src/components/auth/register-form.tsx b/src/components/auth/register-form.tsx
index a68a2a9c..cc67487c 100644
--- a/src/components/auth/register-form.tsx
+++ b/src/components/auth/register-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Image from "next/image";
+import { Lock, Mail, UserRound } from "lucide-react";
 import Script from "next/script";
 import { signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
@@ -10,6 +10,7 @@ import {
 	type RegisterState,
 	register,
 } from "@/actions/register";
+import { PasswordToggle } from "@/components/auth/password-toggle";
 import Link from "@/components/link";
 import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
 
@@ -142,56 +143,6 @@ export function RegisterForm({
 					nonce={nonce}
 				/>
 			) : null}
-			{/* Header Banner */}
-			<div
-				className="relative overflow-hidden bg-center bg-cover rounded-t-xl"
-				style={{
-					backgroundImage: "url(/assets/images/mybobba_banner.png)",
-					height: "160px",
-				}}
-			>
-				<div
-					className="absolute inset-0 z-10"
-					style={{
-						background:
-							"linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%)",
-					}}
-				/>
-				<div className="relative flex items-center justify-center w-full h-full z-20">
-					<div
-						className="relative animate-float"
-						style={{ width: "140px", height: "140px" }}
-					>
-						<div
-							className="absolute inset-0 rounded-full overflow-hidden"
-							style={{ zIndex: -1 }}
-						>
-							<div
-								className="w-full h-full"
-								style={{
-									background: "black",
-									filter: "blur(8px)",
-									transform: "scale(1.2)",
-									opacity: 0.6,
-								}}
-							/>
-						</div>
-						<Image
-							src="/assets/images/FrankwithBag.gif"
-							alt=""
-							fill
-							className="!static"
-							style={{
-								objectFit: "contain",
-								objectPosition: "center",
-								width: "100%",
-								height: "100%",
-							}}
-						/>
-					</div>
-				</div>
-			</div>
-
 			{/* Form */}
 			<form
 				action={(fd) => {
@@ -201,33 +152,27 @@ export function RegisterForm({
 					};
 					formAction(fd);
 				}}
-				className="p-6 flex flex-col gap-6"
-				style={{
-					backgroundColor:
-						"color-mix(in srgb, var(--color-background) 50%, var(--color-surface))",
-					borderRadius: "0 0 12px 12px",
-				}}
+				className="flex flex-col gap-6"
 			>
 				{errorMessage && (
-					<div
+					<p
 						role="alert"
 						aria-live="polite"
-						className="animate-fade-in-up p-3 rounded-lg text-sm font-semibold text-primary-foreground"
-						style={{ backgroundColor: "var(--color-danger)" }}
+						className="auth-alert animate-fade-in-up m-0"
 					>
 						{errorMessage}
-					</div>
+					</p>
 				)}
 
 				{referralCode && (
 					<div
-						className="animate-fade-in-up flex items-center gap-2 p-3 rounded-lg text-sm font-semibold"
+						className="animate-fade-in-up flex items-center gap-2 rounded-xl border px-3 py-2.5 text-sm font-semibold"
 						style={{
-							backgroundColor:
+							background:
 								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
 							color: "var(--color-primary-readable, var(--color-primary))",
-							border:
-								"1px solid color-mix(in srgb, var(--color-primary) 22%, transparent)",
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 26%, transparent)",
 						}}
 					>
 						{t("invitedBy", { username: referralCode })}
@@ -257,51 +202,45 @@ export function RegisterForm({
 					</div>
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
 						<div className="space-y-1.5">
-							<label
-								htmlFor="username"
-								className="block text-xs font-bold uppercase tracking-wider"
-								style={{ color: "var(--color-text-muted)" }}
-							>
+							<label htmlFor="username" className="auth-label">
 								{t("username")}
 							</label>
-							<input
-								id="username"
-								name="username"
-								type="text"
-								placeholder={t("usernamePlaceholder")}
-								autoComplete="username"
-								className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
-								style={{
-									backgroundColor: "var(--color-background)",
-									color: "var(--color-text-readable)",
-									borderColor:
-										"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-								}}
-								required
-							/>
+							<div className="relative">
+								<UserRound
+									aria-hidden="true"
+									className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
+									style={{ color: "var(--color-text-muted)" }}
+								/>
+								<input
+									id="username"
+									name="username"
+									type="text"
+									placeholder={t("usernamePlaceholder")}
+									autoComplete="username"
+									className="auth-input has-icon"
+									required
+								/>
+							</div>
 						</div>
 						<div className="space-y-1.5">
-							<label
-								htmlFor="mail"
-								className="block text-xs font-bold uppercase tracking-wider"
-								style={{ color: "var(--color-text-muted)" }}
-							>
+							<label htmlFor="mail" className="auth-label">
 								{t("email")}
 							</label>
-							<input
-								id="mail"
-								name="mail"
-								type="email"
-								placeholder={t("emailPlaceholder")}
-								autoComplete="email"
-								className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
-								style={{
-									backgroundColor: "var(--color-background)",
-									color: "var(--color-text-readable)",
-									borderColor:
-										"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-								}}
-							/>
+							<div className="relative">
+								<Mail
+									aria-hidden="true"
+									className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
+									style={{ color: "var(--color-text-muted)" }}
+								/>
+								<input
+									id="mail"
+									name="mail"
+									type="email"
+									placeholder={t("emailPlaceholder")}
+									autoComplete="email"
+									className="auth-input has-icon"
+								/>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -327,14 +266,15 @@ export function RegisterForm({
 					</div>
 					<div className="grid grid-cols-1 md:grid-cols-2 gap-4 stagger-children">
 						<div className="space-y-1.5">
-							<label
-								htmlFor="password"
-								className="block text-xs font-bold uppercase tracking-wider"
-								style={{ color: "var(--color-text-muted)" }}
-							>
+							<label htmlFor="password" className="auth-label">
 								{t("password")}
 							</label>
 							<div className="relative">
+								<Lock
+									aria-hidden="true"
+									className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
+									style={{ color: "var(--color-text-muted)" }}
+								/>
 								<input
 									id="password"
 									name="password"
@@ -343,28 +283,19 @@ export function RegisterForm({
 									autoComplete="new-password"
 									value={password}
 									onChange={(e) => setPassword(e.target.value)}
-									className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
-									style={{
-										backgroundColor: "var(--color-background)",
-										color: "var(--color-text-readable)",
-										borderColor:
-											"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-									}}
+									className="auth-input has-icon has-action"
 									required
 								/>
-								<button
-									type="button"
-									onClick={() => setShowPassword(!showPassword)}
-									className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
-									style={{ color: "var(--color-text-muted)" }}
-									tabIndex={-1}
-								>
-									{showPassword ? t("hidePassword") : t("showPassword")}
-								</button>
+								<PasswordToggle
+									show={showPassword}
+									onToggle={() => setShowPassword((v) => !v)}
+									labelShow={t("showPassword")}
+									labelHide={t("hidePassword")}
+								/>
 							</div>
 							{password.length > 0 && (
-								<div className="animate-fade-in-up space-y-1">
-									<div className="flex gap-1">
+								<div className="animate-fade-in-up space-y-1.5 pt-0.5">
+									<div className="flex gap-1.5">
 										{[1, 2, 3, 4, 5].map((i) => (
 											<div
 												key={i}
@@ -373,13 +304,17 @@ export function RegisterForm({
 													backgroundColor:
 														i <= strength.score
 															? strength.color
-															: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
+															: "color-mix(in srgb, var(--color-text-muted) 18%, transparent)",
+													boxShadow:
+														i <= strength.score
+															? `0 0 8px color-mix(in srgb, ${strength.color} 45%, transparent)`
+															: undefined,
 												}}
 											/>
 										))}
 									</div>
 									<p
-										className="text-xs font-bold"
+										className="text-[11px] font-extrabold uppercase tracking-wider"
 										style={{ color: strength.color }}
 									>
 										{strength.label}
@@ -388,38 +323,30 @@ export function RegisterForm({
 							)}
 						</div>
 						<div className="space-y-1.5">
-							<label
-								htmlFor="password_confirmation"
-								className="block text-xs font-bold uppercase tracking-wider"
-								style={{ color: "var(--color-text-muted)" }}
-							>
+							<label htmlFor="password_confirmation" className="auth-label">
 								{t("confirmPassword")}
 							</label>
 							<div className="relative">
+								<Lock
+									aria-hidden="true"
+									className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2"
+									style={{ color: "var(--color-text-muted)" }}
+								/>
 								<input
 									id="password_confirmation"
 									name="password_confirmation"
 									type={showConfirm ? "text" : "password"}
 									placeholder={t("confirmPasswordPlaceholder")}
 									autoComplete="new-password"
-									className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
-									style={{
-										backgroundColor: "var(--color-background)",
-										color: "var(--color-text-readable)",
-										borderColor:
-											"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-									}}
+									className="auth-input has-icon has-action"
 									required
 								/>
-								<button
-									type="button"
-									onClick={() => setShowConfirm(!showConfirm)}
-									className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
-									style={{ color: "var(--color-text-muted)" }}
-									tabIndex={-1}
-								>
-									{showConfirm ? t("hidePassword") : t("showPassword")}
-								</button>
+								<PasswordToggle
+									show={showConfirm}
+									onToggle={() => setShowConfirm((v) => !v)}
+									labelShow={t("showPassword")}
+									labelHide={t("hidePassword")}
+								/>
 							</div>
 						</div>
 					</div>
@@ -556,15 +483,13 @@ export function RegisterForm({
 							});
 						}
 					}}
-					className={`btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60 ${
-						termsAccepted ? "" : "opacity-70 saturate-[0.85] hover:scale-100"
+					className={`btn-brand btn-shine w-full py-3.5 text-sm font-extrabold uppercase tracking-wider disabled:opacity-60 ${
+						termsAccepted ? "" : "opacity-70 saturate-[0.85]"
 					}`}
 					style={{
-						background: "var(--color-primary)",
-						color: "var(--color-primary-foreground)",
 						boxShadow: termsAccepted
-							? "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)"
-							: "0 2px 10px color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							? undefined
+							: "0 4px 14px -8px color-mix(in srgb, var(--color-primary) 50%, transparent)",
 					}}
 				>
 					{isPending || signingIn ? (
@@ -597,14 +522,25 @@ export function RegisterForm({
 					)}
 				</button>
 
-				<div className="text-center">
+				<div
+					className="border-t pt-4 text-center"
+					style={{
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
+					}}
+				>
 					<Link
 						href="/login"
-						className="text-sm font-bold hover:underline transition-all"
+						className="inline-flex items-center gap-2 rounded-full border px-5 py-2.5 text-xs font-extrabold transition-all duration-200 hover:-translate-y-0.5"
 						style={{
-							color: "var(--color-primary-readable, var(--color-primary))",
+							color: "var(--color-primary)",
+							background:
+								"color-mix(in srgb, var(--color-primary) 8%, transparent)",
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 35%, transparent)",
 						}}
 					>
+						<UserRound aria-hidden="true" className="h-3.5 w-3.5" />
 						{t("alreadyHaveAccount")}
 					</Link>
 				</div>