diff --git a/package.json b/package.json
index 09abc7c1..fe148350 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
-		"start": "next start",
+		"postbuild": "mkdir -p .next/standalone/.next/static && cp -r .next/static/* .next/standalone/.next/static/ 2>/dev/null; true",
+		"start": "node .next/standalone/server.js",
 		"prisma:generate": "prisma generate",
 		"typecheck": "tsc --noEmit --incremental false",
 		"biome:check": "biome check --write .",
diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index e90fdf04..af098b43 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -11,17 +11,19 @@ import { resolveHotelName } from "@/lib/hotel-name";
 import { siteSettings } from "@/lib/services/site-settings";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { LanguageSwitcher } from "@/components/language-switcher";
+import { Reveal } from "@/components/motion-reveal";
 
 export default async function LoginPage() {
 	const t = await getTranslations("pages.login");
 	const th = await getTranslations("header");
-	const [hotelName, imagerRaw, cfg] = await Promise.all([
+	const [hotelName, imagerRaw, cfg, discordUrl] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
 			"https://www.habbo.com/habbo-imaging/avatarimage",
 		),
 		captchaConfig(),
+		siteSettings.get("radio_social_discord", ""),
 	]);
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -47,31 +49,41 @@ export default async function LoginPage() {
 	]);
 
 	return (
-		<div className="flex flex-col gap-6">
-			<div className="relative">
-				<div
-					className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
-					style={{ background: "var(--color-primary)" }}
-				/>
-				<div
-					className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
-					style={{
-						background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
-						backdropFilter: "blur(12px)",
-						WebkitBackdropFilter: "blur(12px)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-					}}
-				>
-					<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
-						{hotelName}
-					</span>
+		<div className="flex flex-col gap-10 pb-14">
+			{/* ── Top Bar ── */}
+			<Reveal>
+				<div className="relative flex items-center justify-between rounded-xl border px-5 py-3" style={{
+					background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
+					backdropFilter: "blur(14px)",
+					WebkitBackdropFilter: "blur(14px)",
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+				}}>
+					<div className="flex items-center gap-3">
+						<Image
+							src="/assets/images/icons/lighthouse.png"
+							alt={hotelName}
+							width={28}
+							height={28}
+							className="shrink-0"
+							unoptimized
+						/>
+						<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
+							{hotelName}
+						</span>
+					</div>
 					<div className="flex items-center gap-1">
+						{discordUrl && (
+							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
+								<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
+							</Link>
+						)}
 						<LanguageSwitcher />
 						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
 					</div>
 				</div>
-			</div>
+			</Reveal>
+			<Reveal>
 			<div className="flex flex-col lg:flex-row gap-10">
 			{/* Left panel */}
 			<div className="lg:w-80 shrink-0 space-y-4">
@@ -114,7 +126,7 @@ export default async function LoginPage() {
 						</div>
 						<h1
 							className="text-xl font-black"
-							style={{ color: "var(--color-text-readable)" }}
+							style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
 						>
 							{t("welcomeBack")}
 						</h1>
@@ -129,21 +141,21 @@ export default async function LoginPage() {
 
 				{recentUsers.length > 0 && (
 					<div
-						className="rounded-2xl border p-4"
-						style={{
-							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-							backdropFilter: "blur(8px)",
-							WebkitBackdropFilter: "blur(8px)",
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-						}}
+						className="overflow-hidden rounded-xl border"
+						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
 					>
-						<h3
-							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
-							style={{ color: "var(--color-text-muted)" }}
+						<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%)",
+							}}
 						>
-							<span className="w-2 h-2 rounded-full bg-green-500" />
-							{th("online", { count: online, hotel: "" }).trim()}
-						</h3>
+							<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-pixel)" }}>
+								{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
@@ -170,25 +182,27 @@ export default async function LoginPage() {
 								</div>
 							))}
 						</div>
+						</div>
 					</div>
 				)}
 
 				{latestUsers.length > 0 && (
 					<div
-						className="rounded-2xl border p-4"
-						style={{
-							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-							backdropFilter: "blur(8px)",
-							WebkitBackdropFilter: "blur(8px)",
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-						}}
+						className="overflow-hidden rounded-xl border"
+						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
 					>
-						<h3
-							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
-							style={{ color: "var(--color-text-muted)" }}
+						<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%)",
+							}}
 						>
-							✨ Newest citizens
-						</h3>
+							<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-pixel)" }}>
+								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
@@ -215,6 +229,7 @@ export default async function LoginPage() {
 								</div>
 							))}
 						</div>
+						</div>
 					</div>
 				)}
 
@@ -232,40 +247,38 @@ export default async function LoginPage() {
 
 			{/* Right: form */}
 			<div className="flex-1">
-				<div
-					className="rounded-2xl border p-6"
-					style={{
-						background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-						backdropFilter: "blur(8px)",
-						WebkitBackdropFilter: "blur(8px)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-					}}
-				>
-					<div className="mb-6">
-						<h2
-							className="text-2xl font-black tracking-tight"
-							style={{ color: "var(--color-text-readable)" }}
-						>
+				<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
+					<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%)",
+						}}
+					>
+						<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-pixel)" }}>
 							{t("title")}
 						</h2>
-						<p
-							className="text-sm mt-0.5"
-							style={{ color: "var(--color-text-muted)" }}
-						>
-							{t("subtitle")}
-						</p>
 					</div>
-					<LoginForm
-						captcha={{
-							provider: cfg.provider,
-							siteKey: cfg.siteKey || undefined,
-							field: cfg.field || undefined,
-						}}
-						nonce={nonce}
-					/>
-				</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>
 			</div>
 		</div>
+			</Reveal>
+		</div>
 	);
 }
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 7af17264..198a1657 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -57,7 +57,9 @@ async function getHotelData() {
 				.catch(() => []),
 		]);
 
-	return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers };
+	const discordUrl = await siteSettings.get("radio_social_discord", "");
+
+	return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl };
 }
 
 export default async function Home() {
@@ -66,7 +68,7 @@ export default async function Home() {
 
 	const tp = await getTranslations("pages.home");
 	const th = await getTranslations("header");
-	const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers } = await getHotelData();
+	const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl } = await getHotelData();
 
 	const captcha = await captchaConfig();
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -84,7 +86,7 @@ export default async function Home() {
 				}}>
 					<div className="flex items-center gap-3">
 						<Image
-							src="/assets/images/icons/navigation/home.png"
+							src="/assets/images/icons/lighthouse.png"
 							alt={hotelName}
 							width={28}
 							height={28}
@@ -96,6 +98,11 @@ export default async function Home() {
 						</span>
 					</div>
 					<div className="flex items-center gap-1">
+						{discordUrl && (
+							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
+								<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
+							</Link>
+						)}
 						<LanguageSwitcher />
 						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
@@ -137,7 +144,7 @@ export default async function Home() {
 							</div>
 							<h1
 								className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
-								style={{ color: "var(--color-text-readable)" }}
+								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
 							>
 								{tp("welcome", { hotelName })}
 							</h1>
@@ -196,8 +203,8 @@ export default async function Home() {
 			<Reveal>
 				<div className="grid grid-cols-3 gap-4">
 					{[
-						{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/navigation/home.png" },
-						{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/navigation/me.png" },
+						{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
+						{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
 						{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
 					].map((s) => (
 						<div
@@ -264,7 +271,7 @@ export default async function Home() {
 						<div className="overflow-hidden rounded-xl border transition-all duration-200 group-hover:shadow-lg" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
 							<Image src="/assets/images/EnterHubbly.png" alt="Register" width={300} height={100} className="block w-full" unoptimized />
 						</div>
-						<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white text-shadow" style={{ marginLeft: "18px" }}>
+						<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white" style={{ marginLeft: "18px", fontFamily: "var(--font-pixel)", textShadow: "0 2px 8px rgba(0,0,0,0.6)" }}>
 							{tp("register")}
 						</span>
 					</Link>
@@ -331,7 +338,7 @@ export default async function Home() {
 										<Link
 											key={a.slug}
 											href={`/news/${a.slug}`}
-											className="group relative w-full overflow-hidden rounded-lg transition-all duration-200"
+											className="group relative w-full overflow-hidden rounded-lg transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
 											style={{
 												height: "200px",
 												backgroundColor: "var(--color-background)",
@@ -346,6 +353,11 @@ export default async function Home() {
 													className="rounded-lg object-cover transition-all duration-300 group-hover:scale-105"
 													unoptimized
 												/>
+												<div
+													className="absolute top-2.5 right-2.5 w-8 h-8 rounded-full flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-300 opacity-0 group-hover:opacity-100 translate-x-1 group-hover:translate-x-0"
+												>
+													<span className="text-white text-sm font-bold">→</span>
+												</div>
 												<div
 													className="absolute left-0 w-full p-2.5"
 													style={{
@@ -390,14 +402,14 @@ export default async function Home() {
 					</div>
 					<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px p-4" style={{ background: "color-mix(in srgb, var(--color-text-muted) 6%, transparent)" }}>
 						{[
-							{ img: "/assets/images/icons/star.gif", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
+							{ img: "/assets/images/icons/navigation/me.png", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
 							{ img: "/assets/images/icons/catalog.png", title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") },
 							{ img: "/assets/images/icons/navigation/community.png", title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") },
 							{ img: "/assets/images/icons/navigation/bb.png", title: tp("featuresGames"), desc: tp("featuresGamesDesc") },
 						].map((f) => (
 							<div
 								key={f.title}
-								className="rounded-lg p-4 transition-all duration-200 hover:-translate-y-0.5"
+								className="rounded-lg p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
 								style={{ background: "var(--color-surface)" }}
 							>
 								<div
@@ -418,20 +430,61 @@ export default async function Home() {
 				</div>
 			</Reveal>
 
+			{/* ── Client / Play ── */}
+			<Reveal>
+				<div className="relative overflow-hidden rounded-xl border" style={{
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+					background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 1%, var(--color-surface)))",
+				}}>
+					<div className="flex flex-col md:flex-row items-center gap-6 px-6 py-7">
+						<div className="shrink-0">
+							<div className="w-14 h-14 rounded-2xl flex items-center justify-center" style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}>
+								<Image src="/assets/images/icons/navigation/shop.png" alt="" width={28} height={28} unoptimized />
+							</div>
+						</div>
+						<div className="flex-1 text-center md:text-left">
+							<h3 className="text-lg font-extrabold mb-0.5" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
+								{th("nitroClient")}
+							</h3>
+							<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
+								{tp("welcomeBody")}
+							</p>
+						</div>
+						<Link
+							href="/client"
+							className="inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg shrink-0"
+							style={{
+								background: "var(--color-primary)",
+								color: "var(--color-primary-foreground)",
+								boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
+							}}
+						>
+							<Image src="/assets/images/EnterHubbly.png" alt="" width={18} height={18} unoptimized />
+							{th("nitroClient")}
+						</Link>
+					</div>
+				</div>
+			</Reveal>
+
 			{/* ── Online users ── */}
 			{recentUsers.length > 0 && (
 				<Reveal>
 					<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
 						<div
-							className="flex items-center gap-2.5 px-4 py-3"
+							className="flex items-center justify-between 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-pixel)" }}>
-								{tp("recentUsers")}
-							</h3>
+							<div className="flex items-center gap-2.5">
+								<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-pixel)" }}>
+									{tp("recentUsers")}
+								</h3>
+							</div>
+							<Link href="/community" className="text-xs font-bold text-white/80 hover:text-white hover:underline">
+								{tp("allNews")}
+							</Link>
 						</div>
 						<div className="p-4">
 							<div className="flex flex-wrap justify-center gap-2">
@@ -469,7 +522,7 @@ export default async function Home() {
 						borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
 					}}
 				>
-					<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)" }}>
+					<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
 						{tp("joinNow", { hotelName })}
 					</h2>
 					<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index c0fe8229..6daee9b1 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -11,17 +11,19 @@ import { resolveHotelName } from "@/lib/hotel-name";
 import { siteSettings } from "@/lib/services/site-settings";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { LanguageSwitcher } from "@/components/language-switcher";
+import { Reveal } from "@/components/motion-reveal";
 
 export default async function RegisterPage() {
 	const th = await getTranslations("header");
 	const tpr = await getTranslations("pages.register");
-	const [hotelName, imagerRaw, cfg] = await Promise.all([
+	const [hotelName, imagerRaw, cfg, discordUrl] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
 			"https://www.habbo.com/habbo-imaging/avatarimage",
 		),
 		captchaConfig(),
+		siteSettings.get("radio_social_discord", ""),
 	]);
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -47,31 +49,41 @@ export default async function RegisterPage() {
 	]);
 
 	return (
-		<div className="flex flex-col gap-6">
-			<div className="relative">
-				<div
-					className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
-					style={{ background: "var(--color-primary)" }}
-				/>
-				<div
-					className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
-					style={{
-						background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
-						backdropFilter: "blur(12px)",
-						WebkitBackdropFilter: "blur(12px)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-					}}
-				>
-					<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
-						{hotelName}
-					</span>
+		<div className="flex flex-col gap-10 pb-14">
+			{/* ── Top Bar ── */}
+			<Reveal>
+				<div className="relative flex items-center justify-between rounded-xl border px-5 py-3" style={{
+					background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
+					backdropFilter: "blur(14px)",
+					WebkitBackdropFilter: "blur(14px)",
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+				}}>
+					<div className="flex items-center gap-3">
+						<Image
+							src="/assets/images/icons/lighthouse.png"
+							alt={hotelName}
+							width={28}
+							height={28}
+							className="shrink-0"
+							unoptimized
+						/>
+						<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
+							{hotelName}
+						</span>
+					</div>
 					<div className="flex items-center gap-1">
+						{discordUrl && (
+							<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
+								<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
+							</Link>
+						)}
 						<LanguageSwitcher />
 						<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
 						<ThemeSwitcher />
 					</div>
 				</div>
-			</div>
+			</Reveal>
+			<Reveal>
 			<div className="flex flex-col lg:flex-row gap-10">
 			{/* Left panel */}
 			<div className="lg:w-80 shrink-0 space-y-4">
@@ -113,7 +125,7 @@ export default async function RegisterPage() {
 					</div>
 					<h1
 						className="text-xl font-black"
-						style={{ color: "var(--color-text-readable)" }}
+						style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
 					>
 						{tpr("title")} — {hotelName}
 					</h1>
@@ -128,21 +140,21 @@ export default async function RegisterPage() {
 
 				{recentUsers.length > 0 && (
 					<div
-						className="rounded-2xl border p-4"
-						style={{
-							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-							backdropFilter: "blur(8px)",
-							WebkitBackdropFilter: "blur(8px)",
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-						}}
+						className="overflow-hidden rounded-xl border"
+						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
 					>
-						<h3
-							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
-							style={{ color: "var(--color-text-muted)" }}
+						<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%)",
+							}}
 						>
-							<span className="w-2 h-2 rounded-full bg-green-500" />
-							{tpr("whoIsOnline")}
-						</h3>
+							<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-pixel)" }}>
+								{tpr("whoIsOnline")}
+							</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
@@ -174,25 +186,27 @@ export default async function RegisterPage() {
 								</div>
 							))}
 						</div>
+						</div>
 					</div>
 				)}
 
 				{latestUsers.length > 0 && (
 					<div
-						className="rounded-2xl border p-4"
-						style={{
-							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-							backdropFilter: "blur(8px)",
-							WebkitBackdropFilter: "blur(8px)",
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-						}}
+						className="overflow-hidden rounded-xl border"
+						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
 					>
-						<h3
-							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
-							style={{ color: "var(--color-text-muted)" }}
+						<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%)",
+							}}
 						>
-							✨ Newest citizens
-						</h3>
+							<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-pixel)" }}>
+								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
@@ -219,6 +233,7 @@ export default async function RegisterPage() {
 								</div>
 							))}
 						</div>
+						</div>
 					</div>
 				)}
 
@@ -241,29 +256,25 @@ export default async function RegisterPage() {
 
 			{/* Right: form */}
 			<div className="flex-1">
-				<div
-					className="rounded-2xl border p-6"
-					style={{
-						background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
-						backdropFilter: "blur(8px)",
-						WebkitBackdropFilter: "blur(8px)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-					}}
-				>
-				<div className="mb-6">
-					<h2
-						className="text-2xl font-black tracking-tight"
-						style={{ color: "var(--color-text-readable)" }}
+				<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
+					<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%)",
+						}}
 					>
-						{tpr("title")}
-					</h2>
+						<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-pixel)" }}>
+							{tpr("title")}
+						</h2>
+					</div>
+					<div className="p-6" style={{ backgroundColor: "var(--color-surface)" }}>
 					<p
-						className="text-sm mt-0.5"
+						className="text-sm mb-6"
 						style={{ color: "var(--color-text-muted)" }}
 					>
 						{tpr("subtitle")}
 					</p>
-				</div>
 				<RegisterForm
 					hotelName={hotelName}
 					captcha={{
@@ -274,7 +285,9 @@ export default async function RegisterPage() {
 				/>
 			</div>
 			</div>
+			</div>
 		</div>
+			</Reveal>
 		</div>
 	);
 }