diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 95b61337..101f1952 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -1,15 +1,15 @@
 import { desc, eq } from "drizzle-orm";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
-import Image from "next/image";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
+import { AuthAlert } from "@/components/auth/auth-alert";
 import {
 	AuthPageFrame,
 	AuthUsersCards,
 } from "@/components/auth/auth-page-frame";
+import { AuthPromoCard } from "@/components/auth/auth-promo-card";
 import { LoginForm } from "@/components/auth/login-form";
-import { SurfaceCard } from "@/components/surface-card";
 import { auth } from "@/lib/auth";
 import { safeRedirectPath } from "@/lib/auth/safe-redirect";
 import { cached } from "@/lib/cache";
@@ -90,22 +90,16 @@ export default async function LoginPage({
 	// exists.
 	const notice =
 		sp.registered === "1" ? (
-			<p
-				role="status"
-				className="auth-alert auth-alert--success animate-fade-in-up m-0 mb-4"
-			>
+			<AuthAlert variant="success" className="mb-4">
 				{t("registeredSuccess")}
-			</p>
+			</AuthAlert>
 		) : sp.reset === "1" ? (
 			// `?reset=1` comes from a successful password reset; saying so matters
 			// because the visitor just changed their password and a silent form
 			// reads like the reset failed.
-			<p
-				role="status"
-				className="auth-alert auth-alert--success animate-fade-in-up m-0 mb-4"
-			>
+			<AuthAlert variant="success" className="mb-4">
 				{t("passwordChanged")}
-			</p>
+			</AuthAlert>
 		) : undefined;
 
 	return (
@@ -127,89 +121,11 @@ export default async function LoginPage({
 				/>
 			}
 		>
-			<SurfaceCard
-				className="card-glow relative overflow-hidden p-6 text-center"
-				style={{
-					borderColor:
-						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-				}}
-			>
-				<div
-					className="absolute inset-0"
-					style={{
-						background:
-							"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
-					}}
-				/>
-				<div aria-hidden="true" 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" />
-					<Image
-						src="/assets/images/FrankwithBag.gif"
-						alt="Frank"
-						width={130}
-						height={170}
-						className="relative object-contain mx-auto drop-shadow-xl animate-float"
-						unoptimized
-					/>
-					<div
-						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) 30%, transparent)",
-							background:
-								"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 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>
-					<h1
-						className="text-xl font-black"
-						style={{
-							color: "var(--color-text-readable)",
-							fontFamily: "var(--font-nunito)",
-						}}
-					>
-						{t("welcomeBack")}
-					</h1>
-					<p
-						className="text-xs mt-1.5 mx-auto max-w-[220px] leading-relaxed"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{t("welcomeBackSub", { hotelName })}
-					</p>
-				</div>
-			</SurfaceCard>
+			<AuthPromoCard
+				onlineLabel={t("usersOnline", { count: online })}
+				title={t("welcomeBack")}
+				subtitle={t("welcomeBackSub", { hotelName })}
+			/>
 
 			<AuthUsersCards
 				recentUsers={recentUsers}
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 609e614e..95e37da9 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -7,16 +7,14 @@ import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import type { CSSProperties, ReactNode } from "react";
 import { AnimatedCounter } from "@/components/animated-counter";
+import { AuthTopBar } from "@/components/auth/auth-top-bar";
 import { LoginForm } from "@/components/auth/login-form";
-import { Clock } from "@/components/clock";
-import { LanguageSwitcher } from "@/components/language-switcher";
 import Link from "@/components/link";
 import { LiveOnlineCounter } from "@/components/live-online-counter";
 import { Reveal } from "@/components/motion-reveal";
 import { PublicLoadError } from "@/components/public/load-error";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { SpotlightCard } from "@/components/spotlight-card";
-import { ThemeSwitcher } from "@/components/theme-switcher";
 import { TypewriterText } from "@/components/typewriter-text";
 import { auth } from "@/lib/auth";
 import { cached } from "@/lib/cache";
@@ -41,7 +39,6 @@ import {
 	ICON_CAMERA,
 	ICON_CATALOG,
 	ICON_FRIENDS,
-	ICON_LIGHTHOUSE,
 	ICON_NAV_GOODY,
 	ICON_NAV_ME,
 } from "@/lib/site-icons";
@@ -406,87 +403,9 @@ async function Home() {
 	return (
 		<div className="flex w-full flex-col gap-14 pb-16 pt-2 md:gap-20 md:pb-24">
 			{/* ── Top bar ── */}
-			<Reveal className="mx-auto w-full max-w-7xl">
-				<div
-					className="flex items-center justify-between rounded-full border px-3 py-2.5 sm:px-5"
-					style={{
-						background:
-							"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) 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)",
-					}}
-				>
-					<div className="flex items-center gap-2 sm:gap-3">
-						{logo ? (
-							<Image
-								src={logo}
-								alt={hotelName}
-								width={100}
-								height={28}
-								className="shrink-0 object-contain"
-								unoptimized
-								style={{ maxHeight: 26, width: "auto", height: "auto" }}
-							/>
-						) : (
-							<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>
-						)}
-						<span
-							className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
-							style={{ color: "var(--color-text-readable)" }}
-						>
-							{hotelName}
-						</span>
-					</div>
-					<div
-						className="flex items-center gap-1 sm:gap-1.5 rounded-full px-1.5 py-1"
-						style={{
-							background:
-								"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
-						}}
-					>
-						<LanguageSwitcher />
-						<div
-							className="hidden w-px h-5 sm:block"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						/>
-						<Clock />
-						<div
-							className="w-px h-5"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
-						/>
-						<ThemeSwitcher />
-					</div>
-				</div>
-			</Reveal>
-
+			<div className="mx-auto w-full max-w-7xl">
+				<AuthTopBar hotelName={hotelName} logo={logo} />
+			</div>
 			{/* ── Cinematic hero ── */}
 			<Reveal className="-mx-3 sm:-mx-4 md:-mx-6">
 				<div className="relative overflow-hidden">
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index f23b753f..7da8a818 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -1,15 +1,14 @@
 import { desc, eq } from "drizzle-orm";
 import type { Metadata } from "next";
 import { headers } from "next/headers";
-import Image from "next/image";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import {
 	AuthPageFrame,
 	AuthUsersCards,
 } from "@/components/auth/auth-page-frame";
+import { AuthPromoCard } from "@/components/auth/auth-promo-card";
 import { RegisterForm } from "@/components/auth/register-form";
-import { SurfaceCard } from "@/components/surface-card";
 import { auth } from "@/lib/auth";
 import { cached } from "@/lib/cache";
 
@@ -86,96 +85,15 @@ export default async function RegisterPage() {
 				/>
 			}
 		>
-			<SurfaceCard
-				className="card-glow relative overflow-hidden p-6"
-				style={{
-					borderColor:
-						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-				}}
-			>
-				<div
-					className="absolute inset-0"
-					style={{
-						background:
-							"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
-					}}
-				/>
-				<div aria-hidden="true" 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">
-						<div className="shrink-0 animate-float">
-							<div className="brand-halo left-1/2 top-1/2 h-52 w-52 -translate-x-1/2 -translate-y-1/2" />
-							<Image
-								src="/assets/images/FrankwithBag.gif"
-								alt="Frank"
-								width={110}
-								height={145}
-								className="relative object-contain drop-shadow-xl"
-								unoptimized
-							/>
-						</div>
-						<div className="flex-1">
-							<div
-								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) 30%, transparent)",
-									background:
-										"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 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>
-							<h1
-								className="text-lg font-black leading-tight"
-								style={{
-									color: "var(--color-text-readable)",
-									fontFamily: "var(--font-nunito)",
-								}}
-							>
-								{tpr("title")} —{" "}
-								<span className="gradient-text">{hotelName}</span>
-							</h1>
-							<p
-								className="text-xs mt-1.5 leading-relaxed"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								{tpr("subtitle")}
-							</p>
-						</div>
-					</div>
-				</div>
-			</SurfaceCard>
+			<AuthPromoCard
+				onlineLabel={tpr("usersOnline", { count: online })}
+				title={
+					<>
+						{tpr("title")} — <span className="gradient-text">{hotelName}</span>
+					</>
+				}
+				subtitle={tpr("subtitle")}
+			/>
 
 			<AuthUsersCards
 				recentUsers={recentUsers}
diff --git a/src/app/globals.css b/src/app/globals.css
index d1ea9970..34e35e7f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2893,6 +2893,20 @@ html {
 		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[aria-invalid="true"]:not(:focus) {
+	border-color: color-mix(in srgb, var(--color-danger) 60%, transparent);
+	background: color-mix(
+		in srgb,
+		var(--color-danger) 6%,
+		color-mix(in srgb, var(--color-background) 88%, var(--color-surface))
+	);
+}
+.auth-input[aria-invalid="true"]:focus {
+	border-color: var(--color-danger);
+	box-shadow:
+		0 0 0 3px color-mix(in srgb, var(--color-danger) 18%, transparent),
+		0 0 24px -8px color-mix(in srgb, var(--color-danger) 55%, transparent);
+}
 .auth-input:disabled {
 	opacity: 0.55;
 	cursor: not-allowed;
diff --git a/src/components/auth/auth-alert.tsx b/src/components/auth/auth-alert.tsx
new file mode 100644
index 00000000..51219971
--- /dev/null
+++ b/src/components/auth/auth-alert.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+interface AuthAlertProps {
+	children: ReactNode;
+	/** Tint of the box: red for errors, green for confirmations. */
+	variant?: "error" | "success";
+	/** Extra classes, e.g. spacing (`mb-4`) or entrance animation. */
+	className?: string;
+	/** Optional id so inputs can point at the message via `aria-describedby`. */
+	id?: string;
+}
+
+/**
+ * The single status/error banner for the auth forms. Uses `role="alert"` for
+ * failures (screen readers announce them immediately) and `role="status"` for
+ * confirmations, so the two are wired correctly instead of every caller
+ * repeating the markup and risking an unannounced message.
+ */
+export function AuthAlert({
+	children,
+	variant = "error",
+	className = "",
+	id,
+}: AuthAlertProps) {
+	return (
+		<p
+			id={id}
+			role={variant === "error" ? "alert" : "status"}
+			className={`auth-alert animate-fade-in-up m-0 ${
+				variant === "success" ? "auth-alert--success" : ""
+			} ${className}`}
+		>
+			{children}
+		</p>
+	);
+}
diff --git a/src/components/auth/auth-promo-card.tsx b/src/components/auth/auth-promo-card.tsx
new file mode 100644
index 00000000..234b3faf
--- /dev/null
+++ b/src/components/auth/auth-promo-card.tsx
@@ -0,0 +1,107 @@
+import Image from "next/image";
+import type { ReactNode } from "react";
+import { SurfaceCard } from "@/components/surface-card";
+
+interface AuthPromoCardProps {
+	/** Fully formatted "N users online" label. */
+	onlineLabel: string;
+	title: ReactNode;
+	subtitle: ReactNode;
+}
+
+/**
+ * The single promo panel both `/login` and `/register` show above the form:
+ * Frank, the online badge and a short welcome. Keeping it in one place means
+ * the two auth pages can never drift apart visually again.
+ */
+export function AuthPromoCard({
+	onlineLabel,
+	title,
+	subtitle,
+}: AuthPromoCardProps) {
+	return (
+		<SurfaceCard
+			className="card-glow relative overflow-hidden p-6 text-center"
+			style={{
+				borderColor:
+					"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+			}}
+		>
+			<div
+				className="absolute inset-0"
+				style={{
+					background:
+						"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
+				}}
+			/>
+			<div aria-hidden="true" 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" />
+				<Image
+					src="/assets/images/FrankwithBag.gif"
+					alt="Frank"
+					width={130}
+					height={170}
+					className="relative object-contain mx-auto drop-shadow-xl animate-float"
+					unoptimized
+				/>
+				<div
+					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) 30%, transparent)",
+						background:
+							"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 opacity-75"
+							style={{ background: "var(--color-primary)" }}
+						/>
+						<span
+							className="relative inline-flex rounded-full h-2 w-2"
+							style={{ background: "var(--color-primary)" }}
+						/>
+					</span>
+					{onlineLabel}
+				</div>
+				<h1
+					className="text-xl font-black"
+					style={{
+						color: "var(--color-text-readable)",
+						fontFamily: "var(--font-nunito)",
+					}}
+				>
+					{title}
+				</h1>
+				<p
+					className="text-xs mt-1.5 mx-auto max-w-[240px] leading-relaxed"
+					style={{ color: "var(--color-text-muted)" }}
+				>
+					{subtitle}
+				</p>
+			</div>
+		</SurfaceCard>
+	);
+}
diff --git a/src/components/auth/login-form.tsx b/src/components/auth/login-form.tsx
index ec0cefe7..a0c50d6a 100644
--- a/src/components/auth/login-form.tsx
+++ b/src/components/auth/login-form.tsx
@@ -3,8 +3,9 @@
 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";
+import { type FormEvent, useEffect, useId, useRef, useState } from "react";
 import { precheckLogin } from "@/actions/auth-precheck";
+import { AuthAlert } from "@/components/auth/auth-alert";
 import {
 	type CaptchaPublicConfig,
 	CaptchaWidget,
@@ -51,8 +52,17 @@ export function LoginForm({
 	const [unverified, setUnverified] = useState(false);
 	const [pending, setPending] = useState(false);
 	const [locked, setLocked] = useState(false);
+	const codeRef = useRef<HTMLInputElement>(null);
+
+	// The 2FA field only exists after the pre-check asks for a code; move focus
+	// there automatically so the visitor can keep typing without reaching for
+	// the mouse (the lint rule rules out a bare `autoFocus`).
+	useEffect(() => {
+		if (needs2fa) codeRef.current?.focus();
+	}, [needs2fa]);
 
 	const showFooter = variant === "page";
+	const compact = variant === "compact";
 	const lockCredentials =
 		needs2fa || locked ? "opacity-50 pointer-events-none" : "";
 
@@ -115,7 +125,9 @@ export function LoginForm({
 		<>
 			{needs2fa && (
 				<p
-					className="animate-fade-in-up mb-4 rounded-xl border px-3 py-2.5 text-sm font-semibold"
+					className={`animate-fade-in-up rounded-xl border px-3 py-2.5 text-sm font-semibold ${
+						compact ? "mb-3" : "mb-4"
+					}`}
 					style={{
 						color: "var(--color-text-readable)",
 						background:
@@ -131,7 +143,7 @@ export function LoginForm({
 			<form
 				onSubmit={onSubmit}
 				aria-label={t("signIn")}
-				className="relative flex flex-col gap-4"
+				className={`relative flex flex-col ${compact ? "gap-3" : "gap-4"}`}
 			>
 				<div className={`space-y-1.5 ${lockCredentials}`}>
 					<label htmlFor={`${fieldId}-username`} className="auth-label">
@@ -151,8 +163,10 @@ export function LoginForm({
 							onChange={(e) => setUsername(e.target.value)}
 							placeholder={t("usernamePlaceholder")}
 							autoComplete="username"
-							disabled={needs2fa}
+							disabled={needs2fa || pending}
 							required
+							aria-invalid={error ? true : undefined}
+							aria-describedby={error ? `${fieldId}-error` : undefined}
 							className="auth-input has-icon"
 						/>
 					</div>
@@ -176,8 +190,10 @@ export function LoginForm({
 							onChange={(e) => setPassword(e.target.value)}
 							placeholder={t("passwordPlaceholder")}
 							autoComplete="current-password"
-							disabled={needs2fa}
+							disabled={needs2fa || pending}
 							required
+							aria-invalid={error ? true : undefined}
+							aria-describedby={error ? `${fieldId}-error` : undefined}
 							className="auth-input has-icon has-action"
 						/>
 						<PasswordToggle
@@ -201,6 +217,7 @@ export function LoginForm({
 								style={{ color: "var(--color-primary)" }}
 							/>
 							<input
+								ref={codeRef}
 								id={`${fieldId}-2fa`}
 								name="code"
 								type="text"
@@ -209,6 +226,9 @@ export function LoginForm({
 								placeholder={t("codePlaceholder")}
 								inputMode="numeric"
 								autoComplete="one-time-code"
+								disabled={pending}
+								aria-invalid={error ? true : undefined}
+								aria-describedby={error ? `${fieldId}-error` : undefined}
 								className="auth-input has-icon"
 								style={{
 									borderColor:
@@ -221,15 +241,7 @@ export function LoginForm({
 					<CaptchaWidget captcha={captcha} nonce={nonce} />
 				)}
 
-				{error && (
-					<p
-						role="alert"
-						aria-live="polite"
-						className="auth-alert animate-fade-in-up m-0"
-					>
-						{error}
-					</p>
-				)}
+				{error && <AuthAlert id={`${fieldId}-error`}>{error}</AuthAlert>}
 
 				{unverified && (
 					<p
@@ -249,7 +261,9 @@ export function LoginForm({
 				<button
 					type="submit"
 					disabled={pending || locked}
-					className="btn-brand btn-shine w-full cursor-pointer py-3.5 text-sm font-extrabold uppercase tracking-wider disabled:opacity-60"
+					className={`btn-brand btn-shine w-full cursor-pointer text-sm font-extrabold uppercase tracking-wider disabled:opacity-60 ${
+						compact ? "py-3" : "py-3.5"
+					}`}
 				>
 					{pending ? (
 						<span className="inline-flex items-center justify-center gap-2">
diff --git a/src/components/auth/register-form.tsx b/src/components/auth/register-form.tsx
index 82fe35c7..d6f3aaab 100644
--- a/src/components/auth/register-form.tsx
+++ b/src/components/auth/register-form.tsx
@@ -18,6 +18,7 @@ import {
 	type RegisterState,
 	register,
 } from "@/actions/register";
+import { AuthAlert } from "@/components/auth/auth-alert";
 import { PasswordToggle } from "@/components/auth/password-toggle";
 import Link from "@/components/link";
 import { signInWithTransientRetry } from "@/lib/auth/sign-in-retry";
@@ -183,15 +184,7 @@ export function RegisterForm({
 				}}
 				className="flex flex-col gap-6"
 			>
-				{errorMessage && (
-					<p
-						role="alert"
-						aria-live="polite"
-						className="auth-alert animate-fade-in-up m-0"
-					>
-						{errorMessage}
-					</p>
-				)}
+				{errorMessage && <AuthAlert>{errorMessage}</AuthAlert>}
 
 				{referralCode && (
 					<div