diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index daa549d0..999700b9 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { LoginForm } from "@/components/auth/login-form";
 import { Clock } from "@/components/clock";
+import { SectionCard } from "@/components/home-section";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
@@ -48,7 +49,7 @@ export default async function LoginPage() {
 	]);
 
 	return (
-		<div className="flex flex-col gap-10 pb-14">
+		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
 			{/* ── Top Bar ── */}
 			<Reveal>
 				<div
@@ -117,16 +118,19 @@ export default async function LoginPage() {
 					</div>
 				</div>
 			</Reveal>
+
 			<Reveal>
-				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
+				<div className="flex flex-col gap-8 lg:flex-row">
 					{/* Left panel */}
 					<div className="lg:w-80 shrink-0 space-y-4">
 						<div
-							className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
+							className="relative overflow-hidden rounded-2xl border p-6 text-center"
 							style={{
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
 								background: `url(/assets/images/background.png) center/cover no-repeat`,
+								boxShadow:
+									"0 1px 2px color-mix(in srgb, var(--color-text-muted) 12%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
 							}}
 						>
 							<div
@@ -147,7 +151,7 @@ export default async function LoginPage() {
 									priority
 								/>
 								<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 backdrop-blur-sm"
+									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)",
@@ -182,133 +186,71 @@ export default async function LoginPage() {
 						</div>
 
 						{recentUsers.length > 0 && (
-							<div
-								className="overflow-hidden rounded-xl border"
-								style={{
-									borderColor:
-										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-								}}
+							<SectionCard
+								title={th("online", { count: online, hotel: "" }).trim()}
+								icon="/assets/images/icons/navigation/goody.png"
+								bodyClassName="p-4"
 							>
-								<div
-									className="flex items-center gap-2.5 px-4 py-3"
-									style={{
-										background:
-											"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
-									}}
-								>
-									<Image
-										src="/assets/images/icons/navigation/goody.png"
-										alt=""
-										width={18}
-										height={18}
-										unoptimized
-									/>
-									<h3
-										className="text-sm font-bold text-white"
-										style={{ fontFamily: "var(--font-nunito)" }}
-									>
-										{th("online", { count: online, hotel: "" }).trim()}
-									</h3>
-								</div>
-								<div
-									className="p-4"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
-									}}
-								>
-									<div className="grid grid-cols-4 gap-1.5">
-										{recentUsers.map((u) => (
-											<div
-												key={u.username}
-												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
-												style={{
-													background:
-														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
-												}}
+								<div className="grid grid-cols-4 gap-1.5">
+									{recentUsers.map((u) => (
+										<div
+											key={u.username}
+											className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+											style={{
+												background:
+													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+											}}
+										>
+											<UserAvatarThumbnail
+												figure={u.look}
+												alt=""
+												options={{ direction: 2 }}
+												className="rounded-md"
+											/>
+											<span
+												className="text-[8px] font-bold truncate w-full text-center leading-tight"
+												style={{ color: "var(--color-text-readable)" }}
 											>
-												<UserAvatarThumbnail
-													figure={u.look}
-													alt=""
-													options={{ direction: 2 }}
-													className="rounded-md"
-												/>
-												<span
-													className="text-[8px] font-bold truncate w-full text-center leading-tight"
-													style={{ color: "var(--color-text-readable)" }}
-												>
-													{u.username}
-												</span>
-											</div>
-										))}
-									</div>
+												{u.username}
+											</span>
+										</div>
+									))}
 								</div>
-							</div>
+							</SectionCard>
 						)}
 
 						{latestUsers.length > 0 && (
-							<div
-								className="overflow-hidden rounded-xl border"
-								style={{
-									borderColor:
-										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-								}}
+							<SectionCard
+								title="Newest citizens"
+								icon="/assets/images/icons/friends.png"
+								bodyClassName="p-4"
 							>
-								<div
-									className="flex items-center gap-2.5 px-4 py-3"
-									style={{
-										background:
-											"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
-									}}
-								>
-									<Image
-										src="/assets/images/icons/friends.png"
-										alt=""
-										width={18}
-										height={18}
-										unoptimized
-									/>
-									<h3
-										className="text-sm font-bold text-white"
-										style={{ fontFamily: "var(--font-nunito)" }}
-									>
-										Newest citizens
-									</h3>
-								</div>
-								<div
-									className="p-4"
-									style={{
-										background:
-											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
-									}}
-								>
-									<div className="grid grid-cols-4 gap-1.5">
-										{latestUsers.map((u) => (
-											<div
-												key={u.username}
-												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
-												style={{
-													background:
-														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
-												}}
+								<div className="grid grid-cols-4 gap-1.5">
+									{latestUsers.map((u) => (
+										<div
+											key={u.username}
+											className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+											style={{
+												background:
+													"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+											}}
+										>
+											<UserAvatarThumbnail
+												figure={u.look}
+												alt=""
+												options={{ direction: 2 }}
+												className="rounded-md"
+											/>
+											<span
+												className="text-[8px] font-bold truncate w-full text-center leading-tight"
+												style={{ color: "var(--color-text-readable)" }}
 											>
-												<UserAvatarThumbnail
-													figure={u.look}
-													alt=""
-													options={{ direction: 2 }}
-													className="rounded-md"
-												/>
-												<span
-													className="text-[8px] font-bold truncate w-full text-center leading-tight"
-													style={{ color: "var(--color-text-readable)" }}
-												>
-													{u.username}
-												</span>
-											</div>
-										))}
-									</div>
+												{u.username}
+											</span>
+										</div>
+									))}
 								</div>
-							</div>
+							</SectionCard>
 						)}
 
 						<p
@@ -330,54 +272,26 @@ export default async function LoginPage() {
 
 					{/* Right: form */}
 					<div className="flex-1">
-						<div
-							className="overflow-hidden rounded-xl border"
-							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-							}}
+						<SectionCard
+							title={t("title")}
+							icon="/assets/images/icons/navigation/me.png"
+							bodyClassName="p-6"
 						>
-							<div
-								className="flex items-center gap-2.5 px-4 py-3"
-								style={{
-									background:
-										"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+							<p
+								className="text-sm mb-6"
+								style={{ color: "var(--color-text-muted)" }}
+							>
+								{t("subtitle")}
+							</p>
+							<LoginForm
+								captcha={{
+									provider: cfg.provider,
+									siteKey: cfg.siteKey || undefined,
+									field: cfg.field || undefined,
 								}}
-							>
-								<Image
-									src="/assets/images/icons/navigation/me.png"
-									alt=""
-									width={18}
-									height={18}
-									unoptimized
-								/>
-								<h2
-									className="text-sm font-bold text-white"
-									style={{ fontFamily: "var(--font-nunito)" }}
-								>
-									{t("title")}
-								</h2>
-							</div>
-							<div
-								className="p-6"
-								style={{ backgroundColor: "var(--color-surface)" }}
-							>
-								<p
-									className="text-sm mb-6"
-									style={{ color: "var(--color-text-muted)" }}
-								>
-									{t("subtitle")}
-								</p>
-								<LoginForm
-									captcha={{
-										provider: cfg.provider,
-										siteKey: cfg.siteKey || undefined,
-										field: cfg.field || undefined,
-									}}
-									nonce={nonce}
-								/>
-							</div>
-						</div>
+								nonce={nonce}
+							/>
+						</SectionCard>
 					</div>
 				</div>
 			</Reveal>