diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index f9de0534..02088a73 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -13,7 +13,7 @@ export const revalidate = 120;
 
 async function getHotelData() {
 	const [hotelName, imagerRaw] = await Promise.all([
-		siteSettings.get("hotel_name", "Hotel"),
+		siteSettings.get("hotel_name", "Atom"),
 		siteSettings.get(
 			"habbo_imaging_url",
 			"https://www.habbo.com/habbo-imaging/avatarimage",
@@ -73,203 +73,233 @@ export default async function Home() {
 	} = await getHotelData();
 
 	return (
-		<div className="flex flex-col gap-16 pb-16">
-			<style>{`
-				@keyframes train-scroll {
-					0% { transform: translateX(0); }
-					100% { transform: translateX(-50%); }
-				}
-				.train-track {
-					animation: train-scroll 40s linear infinite;
-					display: flex;
-					gap: 0.75rem;
-					width: max-content;
-				}
-				.train-track:hover {
-					animation-play-state: paused;
-				}
-			`}</style>
-			{/* ── 1. Welcome section ── */}
-			<div className="flex flex-col lg:flex-row items-center gap-10 lg:gap-16">
-				<div className="flex-1 text-center lg:text-left">
-					<div
-						className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border"
-						style={{
-							background:
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-							color: "var(--color-primary-readable, var(--color-primary))",
-						}}
-					>
-						<span className="w-2 h-2 rounded-full bg-green-500" />
-						{th("online", { count: online, hotel: hotelName ?? "Hotel" })}
-					</div>
-					<h1
-						className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-4"
-						style={{ color: "var(--color-text-readable)" }}
-					>
-						{tp("welcome", { hotelName: hotelName ?? "Hotel" })}
-					</h1>
-					<p
-						className="text-base md:text-lg leading-relaxed max-w-xl mb-8"
-						style={{
-							color:
-								"var(--color-text-muted-readable, var(--color-text-muted))",
-						}}
-					>
-						{th("tagline")}
-					</p>
-					<div className="flex flex-wrap gap-3 justify-center lg:justify-start">
-						<Link
-							href="/register"
-							className="inline-flex items-center gap-2.5 font-extrabold text-sm px-7 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
-							style={{
-								background: "var(--color-primary)",
-								color: "var(--color-primary-foreground)",
-								boxShadow:
-									"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
-							}}
-						>
-							<Image
-								src="/assets/images/EnterHubbly.png"
-								alt=""
-								width={20}
-								height={20}
-								unoptimized
-							/>
-							{tp("enterHotel", { hotelName: hotelName ?? "Hotel" })}
-						</Link>
-						<Link
-							href="/client"
-							className="inline-flex items-center gap-2 font-bold text-sm px-7 py-3.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95"
-							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
-								color: "var(--color-text-readable)",
-							}}
-						>
-							{th("nitroClient")}
-						</Link>
-					</div>
-				</div>
-				<div className="shrink-0 flex items-end gap-6">
-					<div className="relative">
+		<div className="flex flex-col gap-14 pb-14">
+			{/* ── 1. Hero ── */}
+			<div
+				className="relative overflow-hidden rounded-3xl border px-6 py-10 md:px-10 md:py-14 lg:py-16"
+				style={{
+					background: `url(/assets/images/background.png) center/cover no-repeat`,
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+				}}
+			>
+				<div
+					className="absolute inset-0"
+					style={{
+						background:
+							"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 50%, color-mix(in srgb, var(--color-surface) 20%, transparent) 100%)",
+					}}
+				/>
+				<div className="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-14">
+					<div className="flex-1 text-center lg:text-left">
 						<div
-							className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.1] blur-[60px]"
+							className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
+							style={{
+								background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+								borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+								color: "var(--color-primary-readable, var(--color-primary))",
+							}}
+						>
+							<span className="relative flex h-2 w-2">
+								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+							</span>
+							{th("online", { count: online, hotel: hotelName ?? "Atom" })}
+						</div>
+						<h1
+							className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-4"
+							style={{ color: "var(--color-text-readable)" }}
+						>
+							{tp("welcome", { hotelName: hotelName ?? "Atom" })}
+						</h1>
+						<p
+							className="text-base md:text-lg leading-relaxed max-w-xl mb-8"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							{th("tagline")}
+						</p>
+						<div className="flex flex-wrap gap-3 justify-center lg:justify-start">
+							<Link
+								href="/register"
+								className="inline-flex items-center gap-2.5 font-extrabold text-sm px-7 py-3.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
+								style={{
+									background: "var(--color-primary)",
+									color: "var(--color-primary-foreground)",
+									boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+								}}
+							>
+								<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
+								{tp("enterHotel", { hotelName: hotelName ?? "Atom" })}
+							</Link>
+							<Link
+								href="/client"
+								className="inline-flex items-center gap-2 font-bold text-sm px-7 py-3.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
+								style={{
+									borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+									color: "var(--color-text-readable)",
+									background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+								}}
+							>
+								{th("nitroClient")}
+							</Link>
+						</div>
+					</div>
+					<div className="shrink-0 relative">
+						<div
+							className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.15] blur-[60px]"
 							style={{ background: "var(--color-primary)" }}
 						/>
 						<Image
 							src="/assets/images/FrankwithBag.gif"
 							alt="Frank"
-							width={160}
-							height={210}
+							width={180}
+							height={240}
 							className="object-contain drop-shadow-2xl relative"
 							unoptimized
 							priority
 						/>
 					</div>
-					<div className="hidden sm:flex flex-col gap-2">
-						{recentUsers.slice(0, 5).map((u) => (
-							<div
-								key={u.username}
-								className="flex items-center gap-2 px-3 py-1.5 rounded-lg transition-colors hover:bg-black/5 dark:hover:bg-white/5"
-							>
-								<Image
-									src={avatarImageUrl(imager, u.look, {
-										headOnly: true,
-										direction: 2,
-										size: "s",
-									})}
-									alt=""
-									width={28}
-									height={34}
-									className="rounded-md"
-									unoptimized
-								/>
-								<div>
-									<p
-										className="text-xs font-bold leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</p>
-									<p className="text-[10px] font-semibold text-green-500">
-										{tp("statsOnline")}
-									</p>
-								</div>
-							</div>
-						))}
-					</div>
 				</div>
 			</div>
 
 			{/* ── 2. Stats ── */}
 			<div className="grid grid-cols-3 gap-4">
 				{[
-					{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "🟢" },
-					{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "👤" },
-					{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "🏠" },
+					{ 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: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
 				].map((s) => (
 					<div
 						key={s.label}
-						className="rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5"
+						className="relative overflow-hidden rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5"
 						style={{
-							background: "var(--color-surface)",
-							borderColor:
-								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+							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="text-3xl md:text-4xl font-black tracking-tight mb-0.5"
-							style={{ color: "var(--color-primary)" }}
-						>
-							{s.value}
-						</div>
-						<div
-							className="text-xs font-bold uppercase tracking-widest"
-							style={{ color: "var(--color-text-muted)" }}
-						>
-							{s.label}
+							className="absolute -top-6 -right-6 w-20 h-20 rounded-full opacity-[0.06]"
+							style={{ background: "var(--color-primary)" }}
+						/>
+						<div className="relative">
+							<Image src={s.icon} alt="" width={28} height={28} className="mx-auto mb-1.5 opacity-50" unoptimized />
+							<div className="text-3xl md:text-4xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
+								{s.value}
+							</div>
+							<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
+								{s.label}
+							</div>
 						</div>
 					</div>
 				))}
 			</div>
 
-			{/* ── 3. User train ── */}
-			{recentUsers.length > 0 && (
-				<div
-					className="rounded-2xl border overflow-hidden py-3"
-					style={{
-						background: "var(--color-surface)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
-					<div className="train-track">
-						{[...recentUsers, ...recentUsers].map((u, i) => (
-							<div
-								key={`${u.username}-${i}`}
-								className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-xl transition-all duration-200 hover:scale-110"
+			{/* ── 3. Features ── */}
+			<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+				{[
+					{ img: "/assets/images/icons/star.gif", 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-2xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
+						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="w-11 h-11 rounded-xl flex items-center justify-center mb-3.5"
+							style={{ background: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}
+						>
+							<Image src={f.img} alt="" width={24} height={24} unoptimized />
+						</div>
+						<h3 className="text-sm font-extrabold mb-1.5" style={{ color: "var(--color-text-readable)" }}>
+							{f.title}
+						</h3>
+						<p className="text-xs leading-relaxed" style={{ color: "var(--color-text-muted)" }}>
+							{f.desc}
+						</p>
+					</div>
+				))}
+			</div>
+
+			{/* ── 4. News ── */}
+			<div className="space-y-4">
+				<div className="flex items-center justify-between">
+					<h2 className="text-xl font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>
+						{tp("latestNews")}
+					</h2>
+					<Link href="/news" className="text-sm font-bold hover:underline" style={{ color: "var(--color-primary)" }}>
+						{tp("allNews")}
+					</Link>
+				</div>
+				{articles.length > 0 ? (
+					<div className="grid sm:grid-cols-2 gap-4">
+						{articles.slice(0, 4).map((a) => (
+							<Link
+								key={a.slug}
+								href={`/news/${a.slug}`}
+								className="flex gap-4 items-start rounded-2xl border p-4 transition-all duration-200 hover:-translate-y-0.5"
 								style={{
-									background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
+									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)",
+									textDecoration: "none",
 								}}
+							>
+								<div className="relative w-14 h-14 shrink-0 rounded-xl overflow-hidden">
+									{a.image ? (
+										<Image src={a.image} alt="" fill className="object-cover" unoptimized />
+									) : (
+										<div className="w-full h-full" style={{ background: `color-mix(in srgb, var(--color-primary) 15%, transparent)` }} />
+									)}
+								</div>
+								<div className="min-w-0">
+									<h3 className="text-sm font-extrabold leading-snug" style={{ color: "var(--color-text-readable)" }}>
+										{a.title}
+									</h3>
+									<p className="text-xs font-semibold mt-1" style={{ color: "var(--color-text-muted)" }}>
+										{formatDate(a.createdAt, "date", "")}
+									</p>
+								</div>
+							</Link>
+						))}
+					</div>
+				) : (
+					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>{tp("noArticles")}</p>
+				)}
+			</div>
+
+			{/* ── 5. Online users row ── */}
+			{recentUsers.length > 0 && (
+				<div className="text-center">
+					<h3 className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center justify-center gap-2" style={{ color: "var(--color-text-muted)" }}>
+						<span className="w-2 h-2 rounded-full bg-green-500" />
+						{tp("recentUsers")}
+					</h3>
+					<div className="flex flex-wrap justify-center gap-2">
+						{recentUsers.slice(0, 10).map((u) => (
+							<div
+								key={u.username}
+								className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-xl transition-all duration-200 hover:scale-110"
+								style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
 							>
 								<Image
-									src={avatarImageUrl(imager, u.look, {
-										headOnly: true,
-										direction: 2,
-										size: "s",
-									})}
+									src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
 									alt={u.username}
-									width={34}
-									height={42}
+									width={30}
+									height={36}
 									className="rounded-md"
 									unoptimized
 								/>
-								<span
-									className="text-[9px] font-bold truncate max-w-[54px] text-center leading-tight"
-									style={{ color: "var(--color-text-readable)" }}
-								>
+								<span className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
 									{u.username}
 								</span>
 							</div>
@@ -278,270 +308,18 @@ export default async function Home() {
 				</div>
 			)}
 
-			{/* ── 4. Features ── */}
-			<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
-				{[
-					{
-						img: "/assets/images/icons/star.gif",
-						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-2xl border p-5 transition-all duration-200 hover:-translate-y-0.5"
-						style={{
-							background: "var(--color-surface)",
-							borderColor:
-								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-						}}
-					>
-						<div
-							className="w-11 h-11 rounded-xl flex items-center justify-center mb-3.5"
-							style={{
-								background:
-									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
-							}}
-						>
-							<Image src={f.img} alt="" width={24} height={24} unoptimized />
-						</div>
-						<h3
-							className="text-sm font-extrabold mb-1.5"
-							style={{ color: "var(--color-text-readable)" }}
-						>
-							{f.title}
-						</h3>
-						<p
-							className="text-xs leading-relaxed"
-							style={{ color: "var(--color-text-muted)" }}
-						>
-							{f.desc}
-						</p>
-					</div>
-				))}
-			</div>
-
-			{/* ── 5. News + Sidebar ── */}
-			<div className="grid lg:grid-cols-12 gap-6">
-				<div className="lg:col-span-8 space-y-4">
-					<div className="flex items-center justify-between">
-						<h2
-							className="text-xl font-black tracking-tight"
-							style={{ color: "var(--color-text-readable)" }}
-						>
-							{tp("latestNews")}
-						</h2>
-						<Link
-							href="/news"
-							className="text-sm font-bold hover:underline"
-							style={{ color: "var(--color-primary)" }}
-						>
-							{tp("allNews")}
-						</Link>
-					</div>
-					{articles.length > 0 ? (
-						<div className="space-y-3">
-							{articles.slice(0, 4).map((a) => (
-								<Link
-									key={a.slug}
-									href={`/news/${a.slug}`}
-									className="flex gap-3.5 items-start rounded-2xl border p-4 transition-all duration-200 hover:-translate-y-0.5"
-									style={{
-										background: "var(--color-surface)",
-										borderColor:
-											"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-										textDecoration: "none",
-									}}
-								>
-									<div className="relative w-14 h-14 shrink-0 rounded-xl overflow-hidden">
-										{a.image ? (
-											<Image
-												src={a.image}
-												alt=""
-												fill
-												className="object-cover"
-												unoptimized
-											/>
-										) : (
-											<div
-												className="w-full h-full"
-												style={{
-													background: `color-mix(in srgb, var(--color-primary) 15%, transparent)`,
-												}}
-											/>
-										)}
-									</div>
-									<div className="min-w-0">
-										<h3
-											className="text-sm font-extrabold leading-snug"
-											style={{ color: "var(--color-text-readable)" }}
-										>
-											{a.title}
-										</h3>
-										<p
-											className="text-xs font-semibold mt-1"
-											style={{ color: "var(--color-text-muted)" }}
-										>
-											{formatDate(a.createdAt, "date", "")}
-										</p>
-									</div>
-								</Link>
-							))}
-						</div>
-					) : (
-						<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
-							{tp("noArticles")}
-						</p>
-					)}
-				</div>
-
-				<aside className="lg:col-span-4 space-y-4">
-					{recentUsers.length > 0 && (
-						<div
-							className="rounded-2xl border p-4"
-							style={{
-								background: "var(--color-surface)",
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-							}}
-						>
-							<h3
-								className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								<span className="w-2 h-2 rounded-full bg-green-500" />
-								{tp("recentUsers")}
-							</h3>
-							<div className="grid grid-cols-3 gap-2">
-								{recentUsers.slice(0, 9).map((u) => (
-									<div
-										key={u.username}
-										className="flex flex-col items-center gap-1 p-1.5 rounded-lg"
-										style={{
-											background:
-												"color-mix(in srgb, var(--color-primary) 4%, transparent)",
-										}}
-									>
-										<Image
-											src={avatarImageUrl(imager, u.look, {
-												headOnly: true,
-												direction: 2,
-												size: "s",
-											})}
-											alt=""
-											width={30}
-											height={36}
-											className="rounded-md"
-											unoptimized
-										/>
-										<span
-											className="text-[9px] font-bold truncate w-full text-center leading-tight"
-											style={{ color: "var(--color-text-readable)" }}
-										>
-											{u.username}
-										</span>
-									</div>
-								))}
-							</div>
-						</div>
-					)}
-
-					{recentPhotos.length > 0 && (
-						<div
-							className="rounded-2xl border p-4"
-							style={{
-								background: "var(--color-surface)",
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-							}}
-						>
-							<h3
-								className="text-xs font-bold uppercase tracking-widest mb-3"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								{tp("recentPhotos")}
-							</h3>
-							<div className="grid grid-cols-2 gap-2">
-								{recentPhotos.map((p) => (
-									<Link
-										key={p.id}
-										href="/photos"
-										className="block rounded-lg overflow-hidden aspect-square"
-									>
-										<Image
-											src={p.url}
-											alt=""
-											width={200}
-											height={200}
-											className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
-											unoptimized
-										/>
-									</Link>
-								))}
-							</div>
-						</div>
-					)}
-
-					<div
-						className="rounded-2xl border p-5 text-center"
-						style={{
-							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), transparent)`,
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 15%, transparent)",
-						}}
-					>
-						<Image
-							src="/assets/images/FrankwithBag.gif"
-							alt=""
-							width={48}
-							height={60}
-							className="object-contain mx-auto mb-2 opacity-50"
-							unoptimized
-						/>
-						<p
-							className="text-xs font-bold"
-							style={{ color: "var(--color-text-muted)" }}
-						>
-							{tp("joinNow", { hotelName: hotelName ?? "Hotel" })}
-						</p>
-					</div>
-				</aside>
-			</div>
-
-			{/* ── 6. CTA ── */}
+			{/* ── 6. Bottom CTA ── */}
 			<div
-				className="rounded-2xl border text-center px-6 py-10"
+				className="relative overflow-hidden rounded-2xl border text-center px-6 py-10"
 				style={{
-					background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface))`,
-					borderColor:
-						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+					background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 70%, transparent))`,
+					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)" }}
-				>
-					{tp("joinNow", { hotelName: hotelName ?? "Hotel" })}
+				<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)" }}>
+					{tp("joinNow", { hotelName: hotelName ?? "Atom" })}
 				</h2>
-				<p
-					className="text-sm mb-6 max-w-sm mx-auto"
-					style={{ color: "var(--color-text-muted)" }}
-				>
+				<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
 					{tp("welcomeBody")}
 				</p>
 				<Link
@@ -550,20 +328,36 @@ export default async function Home() {
 					style={{
 						background: "var(--color-primary)",
 						color: "var(--color-primary-foreground)",
-						boxShadow:
-							"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+						boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 					}}
 				>
-					<Image
-						src="/assets/images/EnterHubbly.png"
-						alt=""
-						width={20}
-						height={20}
-						unoptimized
-					/>
+					<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
 					{tp("register")}
 				</Link>
 			</div>
+
+			{/* ── 7. Recent photos (compact) ── */}
+			{recentPhotos.length > 0 && (
+				<div className="text-center">
+					<h3 className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--color-text-muted)" }}>
+						{tp("recentPhotos")}
+					</h3>
+					<div className="grid grid-cols-4 gap-2 max-w-sm mx-auto">
+						{recentPhotos.slice(0, 4).map((p) => (
+							<Link key={p.id} href="/photos" className="block rounded-lg overflow-hidden aspect-square">
+								<Image
+									src={p.url}
+									alt=""
+									width={200}
+									height={200}
+									className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+									unoptimized
+								/>
+							</Link>
+						))}
+					</div>
+				</div>
+			)}
 		</div>
 	);
 }