From c528afa7b96137897a12534c5f373eeea1f5d607 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Thu, 16 Jul 2026 20:31:13 +0200
Subject: [PATCH] Professional redesign: dark glass, warm tones, muted palette,
 gold accents

---
 src/app/(site)/forgot/page.tsx          |  37 +++--
 src/app/(site)/login/page.tsx           | 180 ++++++++++++------------
 src/components/auth/home-login-form.tsx |  76 +++++-----
 src/components/auth/register-form.tsx   |  85 +++++------
 src/components/home/guest-view.tsx      | 146 +++++++++----------
 src/components/home/user-view.tsx       | 101 +++++++------
 6 files changed, 315 insertions(+), 310 deletions(-)

diff --git a/src/app/(site)/forgot/page.tsx b/src/app/(site)/forgot/page.tsx
index edc769fe..1bae846a 100644
--- a/src/app/(site)/forgot/page.tsx
+++ b/src/app/(site)/forgot/page.tsx
@@ -1,4 +1,4 @@
-import { KeyRound, Mail } from "lucide-react";
+import { KeyRound, Mail, ArrowLeft } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { requestReset } from "@/actions/password-reset";
@@ -13,38 +13,36 @@ export default async function ForgotPage({
 
 	return (
 		<div className="flex min-h-[70vh] items-center justify-center px-4 py-12">
-			<div className="w-full max-w-md animate-fade-in">
-				<div className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8">
-					<div className="absolute inset-0 bg-gradient-to-br from-[#5AB4C6]/5 via-transparent to-transparent" />
-					<div className="absolute -top-40 -right-40 w-[400px] h-[400px] bg-[#5AB4C6]/5 rounded-full blur-[120px]" />
-
+			<div className="w-full max-w-md">
+				<div className="relative overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] shadow-2xl p-8">
+					<div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/5 via-transparent to-transparent" />
 					<div className="relative">
 						<div className="text-center mb-8">
-							<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#5AB4C6]/10 border border-[#5AB4C6]/20">
-								<KeyRound className="h-6 w-6 text-[#5AB4C6]" />
+							<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-[#EEB425]/10 border border-[#EEB425]/20">
+								<KeyRound className="h-5 w-5 text-[#EEB425]" />
 							</div>
-							<h1 className="text-2xl font-black text-white tracking-tight m-0">
+							<h1 className="text-xl font-bold text-white/90 tracking-tight m-0">
 								{t("title")}
 							</h1>
-							<p className="mt-1.5 text-sm text-white/40">
+							<p className="mt-1 text-sm text-white/30">
 								{t("subtitle")}
 							</p>
 						</div>
 
 						{sent ? (
-							<div className="rounded-xl bg-green-500/10 border border-green-500/20 px-4 py-6 text-center">
-								<p className="text-sm font-bold text-green-400 m-0">
+							<div className="rounded-md bg-green-500/10 border border-green-500/20 px-3 py-4 text-center">
+								<p className="text-sm font-medium text-green-400 m-0">
 									{t("sentNotice")}
 								</p>
 							</div>
 						) : (
 							<form action={requestReset} className="space-y-4">
 								<div>
-									<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
+									<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
 										Email
 									</label>
-									<div className="relative group">
-										<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#5AB4C6] transition-colors">
+									<div className="relative">
+										<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
 											<Mail size={15} />
 										</div>
 										<input
@@ -53,21 +51,22 @@ export default async function ForgotPage({
 											placeholder={t("emailPlaceholder")}
 											autoComplete="email"
 											required
-											className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#5AB4C6]/50 focus:bg-[#5AB4C6]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
+											className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
 										/>
 									</div>
 								</div>
 								<button
 									type="submit"
-									className="w-full flex items-center justify-center gap-2 bg-[#5AB4C6] hover:bg-[#5AB4C6]/90 text-white font-black text-xs py-3.5 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#5AB4C6]/20"
+									className="w-full flex items-center justify-center gap-2 bg-[#EEB425]/90 hover:bg-[#EEB425] text-black font-semibold text-sm py-2.5 rounded-md transition-all active:scale-[0.98]"
 								>
 									{t("sendResetLink")}
 								</button>
 							</form>
 						)}
 						<div className="mt-6 text-center">
-							<p className="text-sm text-white/40">
-								<Link href="/login" className="font-bold text-[#5AB4C6] hover:underline">
+							<p className="text-sm text-white/30">
+								<Link href="/login" className="inline-flex items-center gap-1 text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2 font-medium transition-colors">
+									<ArrowLeft size={14} />
 									{t("backToLogin")}
 								</Link>
 							</p>
diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 15d7dc84..2e2357d2 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Eye, EyeOff, Lock, Mail, User } from "lucide-react";
+import { Eye, EyeOff, Lock, Mail, User, LogIn, ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
@@ -53,129 +53,131 @@ export default function LoginPage() {
 
 	return (
 		<div className="flex min-h-[70vh] items-center justify-center px-4 py-12">
-			<div className="w-full max-w-md animate-fade-in">
-				<div
-					className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8"
-				>
+			<div className="w-full max-w-md">
+				<div className="relative overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] shadow-2xl p-8">
 					<div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/5 via-transparent to-transparent" />
-					<div className="absolute -top-40 -right-40 w-[400px] h-[400px] bg-[#EEB425]/5 rounded-full blur-[120px]" />
-
 					<div className="relative">
 						{/* Header */}
 						<div className="text-center mb-8">
-							<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#EEB425]/10 border border-[#EEB425]/20">
-								<Lock className="h-6 w-6 text-[#EEB425]" />
+							<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-[#EEB425]/10 border border-[#EEB425]/20">
+								<Lock className="h-5 w-5 text-[#EEB425]" />
 							</div>
-							<h1 className="text-2xl font-black text-white tracking-tight m-0">
+							<h1 className="text-xl font-bold text-white/90 tracking-tight m-0">
 								{t("title")}
 							</h1>
-							<p className="mt-1.5 text-sm text-white/40">
+							<p className="mt-1 text-sm text-white/30">
 								{needs2fa ? t("subtitle2fa") : t("subtitle")}
 							</p>
 						</div>
 
 						<form onSubmit={onSubmit} className="space-y-4">
 							{error && (
-								<div className="rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3">
-									<p className="text-xs font-bold text-red-400 text-center m-0">
+								<div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
+									<p className="text-xs font-medium text-red-400 text-center m-0">
 										{error}
 									</p>
 								</div>
 							)}
 
-							<div className="space-y-3.5">
-								<div>
-									<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
-										Username
-									</label>
-									<div className="relative group">
-										<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
-											<User size={15} />
-										</div>
-										<input
-											value={username}
-											onChange={(e) => setUsername(e.target.value)}
-											placeholder={t("usernamePlaceholder")}
-											autoComplete="username"
-											disabled={needs2fa}
-											className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
-										/>
+							<div>
+								<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
+									Username
+								</label>
+								<div className="relative">
+									<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
+										<User size={15} />
 									</div>
+									<input
+										value={username}
+										onChange={(e) => setUsername(e.target.value)}
+										placeholder={t("usernamePlaceholder")}
+										autoComplete="username"
+										disabled={needs2fa}
+										className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
+									/>
 								</div>
-								<div>
-									<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
-										Password
-									</label>
-									<div className="relative group">
-										<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
-											<Lock size={15} />
-										</div>
-										<input
-											type={showPassword ? "text" : "password"}
-											value={password}
-											onChange={(e) => setPassword(e.target.value)}
-											placeholder={t("passwordPlaceholder")}
-											autoComplete="current-password"
-											disabled={needs2fa}
-											className="w-full pl-10 pr-10 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
-										/>
-										<button
-											type="button"
-											onClick={() => setShowPassword(!showPassword)}
-											className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white transition-colors"
-										>
-											{showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
-										</button>
-									</div>
-								</div>
-								{needs2fa && (
-									<div>
-										<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
-											2FA Code
-										</label>
-										<div className="relative group">
-											<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
-												<Mail size={15} />
-											</div>
-											<input
-												value={code}
-												onChange={(e) => setCode(e.target.value)}
-												placeholder={t("codePlaceholder")}
-												inputMode="numeric"
-												autoComplete="one-time-code"
-												autoFocus
-												className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
-											/>
-										</div>
-									</div>
-								)}
 							</div>
 
+							<div>
+								<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
+									Password
+								</label>
+								<div className="relative">
+									<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
+										<Lock size={15} />
+									</div>
+									<input
+										type={showPassword ? "text" : "password"}
+										value={password}
+										onChange={(e) => setPassword(e.target.value)}
+										placeholder={t("passwordPlaceholder")}
+										autoComplete="current-password"
+										disabled={needs2fa}
+										className="w-full pl-9 pr-9 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
+									/>
+									<button
+										type="button"
+										onClick={() => setShowPassword(!showPassword)}
+										className="absolute right-3 top-1/2 -translate-y-1/2 text-white/20 hover:text-white/40 transition-colors"
+									>
+										{showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
+									</button>
+								</div>
+							</div>
+
+							{needs2fa && (
+								<div>
+									<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
+										2FA Code
+									</label>
+									<div className="relative">
+										<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
+											<Mail size={15} />
+										</div>
+										<input
+											value={code}
+											onChange={(e) => setCode(e.target.value)}
+											placeholder={t("codePlaceholder")}
+											inputMode="numeric"
+											autoComplete="one-time-code"
+											autoFocus
+											className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
+										/>
+									</div>
+								</div>
+							)}
+
 							<button
 								type="submit"
 								disabled={pending}
-								className="w-full flex items-center justify-center gap-2 bg-[#EEB425] hover:bg-[#EEB425]/90 text-black font-black text-xs py-3.5 rounded-lg transition-all disabled:opacity-50 active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#EEB425]/20"
+								className="w-full flex items-center justify-center gap-2 bg-[#EEB425]/90 hover:bg-[#EEB425] text-black font-semibold text-sm py-2.5 rounded-md transition-all disabled:opacity-40 active:scale-[0.98]"
 							>
 								{pending ? (
-									<span className="flex items-center justify-center gap-2">
+									<span className="flex items-center gap-2">
 										<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
 											<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
 											<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
 										</svg>
 										{t("pleaseWait")}
 									</span>
-								) : needs2fa ? t("verify") : t("signIn")}
+								) : (
+									<>
+										<LogIn size={15} />
+										<span className="uppercase tracking-wider">{needs2fa ? t("verify") : t("signIn")}</span>
+										<ArrowRight size={15} />
+									</>
+								)}
 							</button>
 
-							{/* Divider */}
+							{/* OAuth */}
 							{!needs2fa && (
 								<>
 									<div className="relative my-4">
 										<div className="absolute inset-0 flex items-center">
-											<div className="w-full border-t border-white/[0.06]" />
+											<div className="w-full border-t border-white/[0.04]" />
 										</div>
-										<div className="relative flex justify-center text-[10px] uppercase tracking-widest font-black">
-											<span className="bg-[#09090b] px-3 text-white/30">
+										<div className="relative flex justify-center text-[10px] uppercase tracking-widest font-medium">
+											<span className="bg-black/60 px-3 text-white/20">
 												{t("or")}
 											</span>
 										</div>
@@ -185,7 +187,7 @@ export default function LoginPage() {
 										<button
 											type="button"
 											onClick={() => signIn("discord", { callbackUrl: "/" })}
-											className="w-full flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 text-white font-black text-xs py-3 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest border border-white/10"
+											className="w-full flex items-center justify-center gap-2 bg-black/40 hover:bg-black/60 text-white/60 hover:text-white/80 text-sm font-medium py-2.5 rounded-md transition-all border border-white/[0.06]"
 										>
 											<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
 												<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z" />
@@ -195,7 +197,7 @@ export default function LoginPage() {
 										<button
 											type="button"
 											onClick={() => signIn("google", { callbackUrl: "/" })}
-											className="w-full flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 text-white font-black text-xs py-3 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest border border-white/10"
+											className="w-full flex items-center justify-center gap-2 bg-black/40 hover:bg-black/60 text-white/60 hover:text-white/80 text-sm font-medium py-2.5 rounded-md transition-all border border-white/[0.06]"
 										>
 											<svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
 												<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
@@ -210,13 +212,13 @@ export default function LoginPage() {
 							)}
 
 							<div className="pt-2 text-center">
-								<p className="text-sm text-white/40">
+								<p className="text-xs text-white/30">
 									{t("noAccount")}{" "}
-									<Link href="/register" className="font-bold text-[#EEB425] hover:underline">
+									<Link href="/register" className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2 font-medium transition-colors">
 										{t("createOne")}
 									</Link>
 									<span className="mx-2 text-white/10">·</span>
-									<Link href="/forgot" className="font-bold text-[#EEB425] hover:underline">
+									<Link href="/forgot" className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2 font-medium transition-colors">
 										{t("forgotPassword")}
 									</Link>
 								</p>
diff --git a/src/components/auth/home-login-form.tsx b/src/components/auth/home-login-form.tsx
index 448a5d23..3341b76d 100644
--- a/src/components/auth/home-login-form.tsx
+++ b/src/components/auth/home-login-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LogIn, UserPlus, ArrowRight, User, Lock } from "lucide-react";
+import { LogIn, ArrowRight, User, Lock } from "lucide-react";
 import Link from "next/link";
 import { signIn } from "next-auth/react";
 import { type FormEvent, useState } from "react";
@@ -49,29 +49,29 @@ export function HomeLoginForm() {
 	}
 
 	return (
-		<form onSubmit={onSubmit} className="w-full flex flex-col justify-center space-y-5">
+		<form onSubmit={onSubmit} className="w-full space-y-4">
 			{error && (
-				<div className="rounded-md bg-red-500/10 border border-red-500/20 px-4 py-2.5">
-					<p className="text-xs font-bold text-red-400 text-center m-0">
+				<div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
+					<p className="text-xs font-medium text-red-400 text-center m-0">
 						{error}
 					</p>
 				</div>
 			)}
 
 			<div>
-				<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
+				<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
 					Username
 				</label>
-				<div className="relative group">
-					<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
-						<User size={16} />
+				<div className="relative">
+					<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
+						<User size={15} />
 					</div>
 					<input
 						type="text"
 						value={username}
 						onChange={(e) => setUsername(e.target.value)}
-						placeholder="Username"
-						className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
+						placeholder="Enter your username"
+						className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
 						required
 						disabled={needs2fa}
 					/>
@@ -79,19 +79,19 @@ export function HomeLoginForm() {
 			</div>
 
 			<div>
-				<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
+				<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
 					Password
 				</label>
-				<div className="relative group">
-					<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
-						<Lock size={16} />
+				<div className="relative">
+					<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
+						<Lock size={15} />
 					</div>
 					<input
 						type="password"
 						value={password}
 						onChange={(e) => setPassword(e.target.value)}
-						placeholder="Password"
-						className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
+						placeholder="Enter your password"
+						className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
 						required
 						disabled={needs2fa}
 					/>
@@ -100,12 +100,12 @@ export function HomeLoginForm() {
 
 			{needs2fa && (
 				<div>
-					<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
+					<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
 						2FA Code
 					</label>
-					<div className="relative group">
-						<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
-							<Lock size={16} />
+					<div className="relative">
+						<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
+							<Lock size={15} />
 						</div>
 						<input
 							type="text"
@@ -114,7 +114,7 @@ export function HomeLoginForm() {
 							placeholder="Enter your 2FA code"
 							inputMode="numeric"
 							autoFocus
-							className="w-full pl-10 pr-3 px-4 py-3 bg-white/5 border border-white/10 rounded-md focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
+							className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
 						/>
 					</div>
 				</div>
@@ -123,21 +123,31 @@ export function HomeLoginForm() {
 			<button
 				type="submit"
 				disabled={pending}
-				className="w-full group relative flex items-center justify-center gap-2 bg-[#EEB425] hover:bg-[#EEB425]/90 text-black font-black text-sm py-3.5 rounded-md transition-all disabled:opacity-50 active:scale-[0.98]"
+				className="w-full flex items-center justify-center gap-2.5 bg-[#EEB425]/90 hover:bg-[#EEB425] text-black font-semibold text-sm py-2.5 rounded-md transition-all disabled:opacity-40 active:scale-[0.98]"
 			>
-				<LogIn size={16} />
-				<span className="uppercase tracking-widest">
-					{pending ? "Please wait..." : needs2fa ? "Verify" : "Sign In"}
-				</span>
-				<ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
+				{pending ? (
+					<span className="flex items-center gap-2">
+						<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
+							<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+							<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+						</svg>
+						Signing in...
+					</span>
+				) : (
+					<>
+						<LogIn size={15} />
+						<span className="uppercase tracking-wider">{needs2fa ? "Verify" : "Sign in"}</span>
+						<ArrowRight size={15} className="group-hover:translate-x-0.5 transition-transform" />
+					</>
+				)}
 			</button>
 
-			<div className="pt-5 border-t border-white/5 text-center">
-				<Link href="/register">
-					<div className="flex items-center justify-center gap-2 w-full py-3 rounded-md bg-white/5 border border-white/10 text-white text-xs font-black hover:bg-white/10 transition-all active:scale-95 uppercase tracking-wider">
-						<UserPlus size={14} className="text-[#EEB425]" />
-						<span>No account yet? Register now</span>
-					</div>
+			<div className="pt-4 text-center">
+				<Link
+					href="/register"
+					className="inline-flex items-center gap-1.5 text-xs text-white/30 hover:text-white/50 transition-colors font-medium"
+				>
+					No account yet? <span className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2">Register here</span>
 				</Link>
 			</div>
 		</form>
diff --git a/src/components/auth/register-form.tsx b/src/components/auth/register-form.tsx
index 56d29f15..1192dc24 100644
--- a/src/components/auth/register-form.tsx
+++ b/src/components/auth/register-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Eye, EyeOff, Lock, Mail, User } from "lucide-react";
+import { Eye, EyeOff, Lock, Mail, User, ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { useActionState, useState } from "react";
@@ -20,35 +20,31 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 	const [showPassword, setShowPassword] = useState(false);
 
 	return (
-		<div className="animate-fade-in">
-			<div
-				className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl p-8 md:p-10"
-			>
+		<div>
+			<div className="relative overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] shadow-2xl p-8">
 				<div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/5 via-transparent to-transparent" />
-				<div className="absolute -top-40 -right-40 w-[500px] h-[500px] bg-[#EEB425]/5 rounded-full blur-[120px]" />
-
 				<div className="relative">
 					{/* Header */}
 					<div className="text-center mb-8">
-						<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#EEB425]/10 border border-[#EEB425]/20">
-							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EEB425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+						<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-[#EEB425]/10 border border-[#EEB425]/20">
+							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#EEB425" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
 								<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
 								<polyline points="10 17 15 12 10 7" />
 								<line x1="15" x2="3" y1="12" y2="12" />
 							</svg>
 						</div>
-						<h1 className="text-2xl font-black text-white tracking-tight m-0">
+						<h1 className="text-xl font-bold text-white/90 tracking-tight m-0">
 							{t("title")}
 						</h1>
-						<p className="mt-1.5 text-sm text-white/40">
+						<p className="mt-1 text-sm text-white/30">
 							{t("subtitle", { hotel: hotelName })}
 						</p>
 					</div>
 
-					<form action={formAction} className="space-y-5 max-w-md mx-auto">
+					<form action={formAction} className="space-y-4 max-w-md mx-auto">
 						{(error || serverError) && (
-							<div className="rounded-xl bg-red-500/10 border border-red-500/20 px-4 py-3">
-								<p className="text-xs font-bold text-red-400 text-center m-0">
+							<div className="rounded-md bg-red-500/10 border border-red-500/20 px-3 py-2">
+								<p className="text-xs font-medium text-red-400 text-center m-0">
 									{error || serverError}
 								</p>
 							</div>
@@ -56,11 +52,11 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 
 						<div className="grid gap-4 sm:grid-cols-2">
 							<div>
-								<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
+								<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
 									Username
 								</label>
-								<div className="relative group">
-									<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
+								<div className="relative">
+									<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
 										<User size={15} />
 									</div>
 									<input
@@ -69,17 +65,17 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 										type="text"
 										placeholder={t("usernamePlaceholder")}
 										autoComplete="username"
-										className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
+										className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
 										required
 									/>
 								</div>
 							</div>
 							<div>
-								<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
+								<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
 									Email
 								</label>
-								<div className="relative group">
-									<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
+								<div className="relative">
+									<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
 										<Mail size={15} />
 									</div>
 									<input
@@ -88,7 +84,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 										type="email"
 										placeholder={t("emailPlaceholder")}
 										autoComplete="email"
-										className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
+										className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
 									/>
 								</div>
 							</div>
@@ -96,11 +92,11 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 
 						<div className="grid gap-4 sm:grid-cols-2">
 							<div>
-								<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
+								<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
 									Password
 								</label>
-								<div className="relative group">
-									<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
+								<div className="relative">
+									<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
 										<Lock size={15} />
 									</div>
 									<input
@@ -109,24 +105,24 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 										type={showPassword ? "text" : "password"}
 										placeholder={t("passwordPlaceholder")}
 										autoComplete="new-password"
-										className="w-full pl-10 pr-10 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
+										className="w-full pl-9 pr-9 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
 										required
 									/>
 									<button
 										type="button"
 										onClick={() => setShowPassword(!showPassword)}
-										className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white transition-colors"
+										className="absolute right-3 top-1/2 -translate-y-1/2 text-white/20 hover:text-white/40 transition-colors"
 									>
 										{showPassword ? <EyeOff size={15} /> : <Eye size={15} />}
 									</button>
 								</div>
 							</div>
 							<div>
-								<label className="block text-gray-500 text-[10px] font-black uppercase tracking-widest mb-1.5 ml-1">
+								<label className="block text-white/30 text-[11px] font-medium uppercase tracking-widest mb-1.5 ml-0.5">
 									Confirm
 								</label>
-								<div className="relative group">
-									<div className="absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-[#EEB425] transition-colors">
+								<div className="relative">
+									<div className="absolute left-3 top-1/2 -translate-y-1/2 text-white/20">
 										<Lock size={15} />
 									</div>
 									<input
@@ -135,7 +131,7 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 										type="password"
 										placeholder={t("confirmPasswordPlaceholder")}
 										autoComplete="new-password"
-										className="w-full pl-10 pr-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:border-[#EEB425]/50 focus:bg-[#EEB425]/5 text-sm text-white placeholder-gray-500 transition-all font-medium"
+										className="w-full pl-9 pr-3 py-2.5 bg-black/40 border border-white/[0.06] rounded-md focus:outline-none focus:border-[#EEB425]/30 focus:bg-black/60 text-sm text-white/80 placeholder-white/15 transition-all"
 										required
 									/>
 								</div>
@@ -143,27 +139,27 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 						</div>
 
 						{/* Terms */}
-						<div className="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-4">
+						<div className="flex items-start gap-3 rounded-md border border-white/[0.06] bg-black/40 p-3">
 							<button
 								type="button"
 								role="checkbox"
 								aria-checked={termsAccepted}
 								onClick={() => setTermsAccepted(!termsAccepted)}
-								className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 transition-all"
+								className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-all"
 								style={{
-									borderColor: termsAccepted ? "#EEB425" : "rgba(255,255,255,0.15)",
+									borderColor: termsAccepted ? "#EEB425" : "rgba(255,255,255,0.1)",
 									backgroundColor: termsAccepted ? "#EEB425" : "transparent",
 								}}
 							>
 								{termsAccepted && (
-									<svg className="h-3 w-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<svg className="h-2.5 w-2.5 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
 									</svg>
 								)}
 							</button>
 							<input type="hidden" name="terms" value={termsAccepted ? "1" : ""} />
 							<label
-								className="text-sm cursor-pointer select-none text-white/60"
+								className="text-xs cursor-pointer select-none text-white/40"
 								onClick={() => setTermsAccepted(!termsAccepted)}
 							>
 								{t("termsAccept", { hotel: hotelName })}
@@ -185,23 +181,28 @@ export function RegisterForm({ hotelName, captcha, error }: RegisterFormProps) {
 						<button
 							type="submit"
 							disabled={isPending}
-							className="w-full flex items-center justify-center gap-2 bg-[#22c55e] hover:bg-[#22c55e]/90 text-white font-black text-xs py-3.5 rounded-lg transition-all disabled:opacity-50 active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#22c55e]/20"
+							className="w-full flex items-center justify-center gap-2 bg-[#22c55e]/90 hover:bg-[#22c55e] text-white font-semibold text-sm py-2.5 rounded-md transition-all disabled:opacity-40 active:scale-[0.98] shadow-lg shadow-[#22c55e]/20"
 						>
 							{isPending ? (
-								<span className="flex items-center justify-center gap-2">
+								<span className="flex items-center gap-2">
 									<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
 										<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
 										<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
 									</svg>
 									{t("creatingAccount")}
 								</span>
-							) : t("createAccount")}
+							) : (
+								<>
+									<ArrowRight size={15} />
+									<span className="uppercase tracking-wider">{t("createAccount")}</span>
+								</>
+							)}
 						</button>
 
-						<div className="text-center pt-2">
-							<p className="text-sm text-white/40">
+						<div className="text-center pt-1">
+							<p className="text-xs text-white/30">
 								{t("alreadyHaveAccount")}{" "}
-								<Link href="/login" className="font-bold text-[#EEB425] hover:underline">
+								<Link href="/login" className="text-[#EEB425]/70 hover:text-[#EEB425] underline underline-offset-2 font-medium transition-colors">
 									{t("signIn")}
 								</Link>
 							</p>
diff --git a/src/components/home/guest-view.tsx b/src/components/home/guest-view.tsx
index 2df736fe..dbf38dae 100644
--- a/src/components/home/guest-view.tsx
+++ b/src/components/home/guest-view.tsx
@@ -51,45 +51,47 @@ export default async function GuestView() {
 	} catch {}
 
 	return (
-		<div className="flex flex-col items-center gap-8">
+		<div className="flex flex-col items-center gap-10">
 			{/* Logo + Online Count */}
-			<div className="flex items-center gap-3">
+			<div className="flex items-center gap-4">
 				{logo ? (
 					<Image
 						src={logo}
 						alt={hotelName ?? "Hotel"}
-						width={250}
-						height={80}
+						width={220}
+						height={70}
 						className="block"
 						unoptimized
 					/>
 				) : (
-					<h1 className="text-3xl font-black text-white tracking-tight m-0">
+					<h1 className="text-3xl font-bold text-white tracking-tight m-0">
 						{hotelName}
 					</h1>
 				)}
-				<div className="flex items-center gap-2 px-4 py-4 border border-[#EEB425]/50 bg-[#EEB425]/20 rounded-md">
-					<div className="w-2 h-2 bg-[#EEB425] rounded-full animate-pulse" />
-					<span className="text-white font-black text-xs uppercase tracking-wider">
-						{onlineCount} Online
+				<div className="flex items-center gap-2.5 px-3 py-2 border border-[#EEB425]/30 bg-[#EEB425]/10 rounded-md">
+					<div className="w-2 h-2 bg-[#EEB425] rounded-full animate-pulse shadow-[0_0_6px_#EEB425]" />
+					<span className="text-[#EEB425] font-semibold text-xs uppercase tracking-wider">
+						{onlineCount} online
 					</span>
 				</div>
 			</div>
 
-			{/* Main Card: 900x500 split layout */}
-			<div className="w-[900px] h-[500px] overflow-hidden rounded-md bg-white/5 backdrop-blur-2xl flex max-w-full">
+			{/* Main Card */}
+			<div className="w-[900px] h-[500px] overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] flex max-w-full shadow-2xl">
 				{/* Left: Login Form */}
-				<div className="w-1/2 flex flex-col justify-center px-10">
-					<div className="mb-6 text-center">
-						<h2 className="text-xl font-black text-white mb-1.5 tracking-tight uppercase">
-							Sign In
+				<div className="w-1/2 flex flex-col justify-center px-12">
+					<div className="mb-8">
+						<h2 className="text-2xl font-bold text-white/90 tracking-tight m-0">
+							Welcome back
 						</h2>
-						<div className="h-1 w-full bg-[#EEB425] rounded-full" />
+						<p className="text-sm text-white/30 mt-1.5 m-0">
+							Sign in to continue
+						</p>
 					</div>
 					<HomeLoginForm />
 				</div>
 
-				{/* Right: Hotel Image with Overlay */}
+				{/* Right: Visual Panel */}
 				<div className="w-1/2 relative overflow-hidden">
 					<Image
 						src={bannerUrl}
@@ -98,43 +100,46 @@ export default async function GuestView() {
 						className="object-cover object-center scale-110"
 						unoptimized
 					/>
-					<div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/60 via-transparent to-[#EEB425]/60" />
-					<div className="absolute inset-0 bg-black/30" />
-					<div className="absolute inset-0 flex flex-col items-center justify-center z-20">
-						<div className="w-[140px] h-[140px] rounded-md bg-white/10 border border-white/20 backdrop-blur-xl overflow-hidden flex items-center justify-center shadow-[0_0_60px_rgba(238,180,37,0.35)]">
-							<div className="text-white/60">
-								<User size={64} strokeWidth={1.5} />
+					<div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/40 via-black/40 to-[#EEB425]/40" />
+					<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20" />
+					<div className="absolute inset-0 flex flex-col items-center justify-center z-20 gap-4">
+						<div className="w-28 h-28 rounded-lg bg-black/40 border border-white/10 backdrop-blur-xl flex items-center justify-center shadow-2xl">
+							<div className="text-white/30">
+								<User size={48} strokeWidth={1.5} />
 							</div>
 						</div>
+						<p className="text-xs text-white/25 font-medium tracking-wide uppercase">
+							{hotelName}
+						</p>
 					</div>
 				</div>
 			</div>
 
 			{/* Articles + Sidebar */}
-			<div className="w-full max-w-[900px] grid gap-6 lg:grid-cols-3 mt-6">
+			<div className="w-full max-w-[900px] grid gap-6 lg:grid-cols-3">
 				{/* Latest News */}
-				<div className="lg:col-span-2 animate-slide-up">
+				<div className="lg:col-span-2">
 					<div className="mb-5 flex items-center justify-between">
-						<div className="flex items-center gap-2.5">
-							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[#EEB425]/10">
-								<Newspaper className="h-4 w-4 text-[#EEB425]" />
+						<div className="flex items-center gap-3">
+							<div className="flex h-7 w-7 items-center justify-center rounded-md bg-[#EEB425]/10">
+								<Newspaper className="h-3.5 w-3.5 text-[#EEB425]" />
 							</div>
-							<h2 className="m-0 text-sm font-black text-white uppercase tracking-wider">
+							<h2 className="m-0 text-sm font-bold text-white/70 uppercase tracking-wider">
 								{t("latestNews")}
 							</h2>
 						</div>
 						<Link
 							href="/news"
-							className="text-[10px] font-black uppercase tracking-widest text-[#EEB425] hover:underline flex items-center gap-1"
+							className="text-[11px] font-semibold uppercase tracking-widest text-[#EEB425]/70 hover:text-[#EEB425] transition-colors flex items-center gap-1"
 						>
 							View all <ArrowRight className="h-3 w-3" />
 						</Link>
 					</div>
 
 					{articles.length === 0 ? (
-						<div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/10 bg-white/[0.03] px-6 py-16 text-center">
-							<Newspaper className="mb-3 h-10 w-10 text-white/20" />
-							<p className="text-sm text-white/40 m-0">{t("noArticles")}</p>
+						<div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-white/[0.06] bg-black/20 px-6 py-16 text-center">
+							<Newspaper className="mb-3 h-8 w-8 text-white/10" />
+							<p className="text-sm text-white/20 m-0">{t("noArticles")}</p>
 						</div>
 					) : (
 						<div className="grid gap-4 sm:grid-cols-2">
@@ -142,7 +147,7 @@ export default async function GuestView() {
 								<Link
 									key={a.slug}
 									href={`/news/${a.slug}`}
-									className="group relative overflow-hidden rounded-md border border-white/10 bg-white/[0.03] transition-all duration-300 hover:bg-white/[0.06] hover:-translate-y-1"
+									className="group relative overflow-hidden rounded-lg border border-white/[0.06] bg-black/30 transition-all duration-300 hover:bg-black/50 hover:-translate-y-0.5"
 									style={{ animationDelay: `${i * 100}ms` }}
 								>
 									<div className="relative aspect-[16/9] overflow-hidden">
@@ -150,16 +155,16 @@ export default async function GuestView() {
 											src={a.image}
 											alt={a.title}
 											fill
-											className="object-cover transition-all duration-500 group-hover:scale-110"
+											className="object-cover transition-all duration-500 group-hover:scale-105"
 											unoptimized
 										/>
-										<div className="absolute inset-0 bg-gradient-to-t from-[#09090b] via-black/20 to-transparent" />
+										<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" />
 										<div className="absolute bottom-0 left-0 right-0 p-4">
-											<h3 className="m-0 text-base font-bold text-white truncate">
+											<h3 className="m-0 text-sm font-bold text-white/90 truncate">
 												{a.title}
 											</h3>
 											{a.shortStory && (
-												<p className="mt-1 truncate text-xs text-white/60">
+												<p className="mt-1 truncate text-xs text-white/40">
 													{excerpt(a.shortStory, 80)}
 												</p>
 											)}
@@ -171,28 +176,28 @@ export default async function GuestView() {
 								<Link
 									key={a.slug}
 									href={`/news/${a.slug}`}
-									className="group flex items-center gap-3 rounded-md border border-white/10 bg-white/[0.03] p-3 transition-all duration-200 hover:bg-white/[0.06] hover:-translate-y-0.5"
+									className="group flex items-center gap-3 rounded-lg border border-white/[0.06] bg-black/30 p-3 transition-all duration-200 hover:bg-black/50"
 								>
-									<div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-md">
+									<div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-md">
 										<Image
 											src={a.image}
 											alt={a.title}
 											fill
-											className="object-cover transition-all duration-300 group-hover:scale-110"
+											className="object-cover transition-all duration-300 group-hover:scale-105"
 											unoptimized
 										/>
 									</div>
 									<div className="min-w-0 flex-1">
-										<h4 className="m-0 text-sm font-bold text-white truncate">
+										<h4 className="m-0 text-sm font-semibold text-white/80 truncate">
 											{a.title}
 										</h4>
 										{a.shortStory && (
-											<p className="m-0 mt-0.5 truncate text-xs text-white/40">
+											<p className="m-0 mt-0.5 truncate text-xs text-white/30">
 												{excerpt(a.shortStory, 60)}
 											</p>
 										)}
 									</div>
-									<ArrowRight className="h-4 w-4 shrink-0 text-white/20 opacity-0 -translate-x-2 transition-all duration-200 group-hover:opacity-100 group-hover:translate-x-0" />
+									<ArrowRight className="h-3.5 w-3.5 shrink-0 text-white/10" />
 								</Link>
 							))}
 						</div>
@@ -200,40 +205,37 @@ export default async function GuestView() {
 				</div>
 
 				{/* Sidebar */}
-				<div
-					className="animate-slide-up space-y-6"
-					style={{ animationDelay: "150ms" }}
-				>
+				<div className="space-y-6">
 					{/* Recent Users */}
 					{recentUsers.length > 0 && (
-						<div className="rounded-md border border-white/10 bg-white/[0.03] overflow-hidden">
-							<div className="flex items-center gap-2.5 px-5 py-3.5 border-b border-white/[0.06]">
-								<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[#EEB425]/10">
-									<Users className="h-3.5 w-3.5 text-[#EEB425]" />
+						<div className="rounded-lg border border-white/[0.06] bg-black/30 overflow-hidden">
+							<div className="flex items-center gap-2.5 px-4 py-3 border-b border-white/[0.04]">
+								<div className="flex h-6 w-6 items-center justify-center rounded-md bg-[#EEB425]/10">
+									<Users className="h-3 w-3 text-[#EEB425]" />
 								</div>
-								<h3 className="m-0 text-[11px] font-black text-white uppercase tracking-wider">
+								<h3 className="m-0 text-xs font-bold text-white/60 uppercase tracking-wider">
 									Recent Users
 								</h3>
 							</div>
-							<div className="grid grid-cols-4 gap-2 p-4">
+							<div className="grid grid-cols-4 gap-2 p-3">
 								{recentUsers.map((u) => (
 									<Link
 										key={u.username}
 										href={`/u/${u.username}`}
-										className="group relative flex items-center justify-center transition-all duration-200 hover:scale-110"
+										className="group relative flex items-center justify-center"
 									>
-										<div className="relative h-14 w-14 overflow-hidden rounded-md border-2 border-transparent bg-white/5 transition-all duration-200 group-hover:border-[#EEB425]/30 group-hover:shadow-lg">
+										<div className="relative h-12 w-12 overflow-hidden rounded-md border border-white/[0.04] bg-black/40 transition-all duration-200 group-hover:border-[#EEB425]/20">
 											<Image
 												src={avatarImageUrl(imager, u.look, {
 													headOnly: true,
 													direction: 3,
 												})}
 												alt={u.username}
-												width={56}
-												height={70}
+												width={48}
+												height={60}
 												style={{
 													position: "absolute",
-													top: "-8px",
+													top: "-6px",
 													left: "50%",
 													transform: "translateX(-50%)",
 													maxWidth: "none",
@@ -241,7 +243,7 @@ export default async function GuestView() {
 												unoptimized
 											/>
 										</div>
-										<span className="absolute -bottom-1 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[#09090b] px-2 py-0.5 text-[0.55rem] font-bold text-white/60 opacity-0 shadow-lg transition-all duration-200 group-hover:opacity-100 border border-white/10">
+										<span className="absolute -bottom-1 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black/80 px-1.5 py-0.5 text-[0.5rem] font-medium text-white/40 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
 											{u.username}
 										</span>
 									</Link>
@@ -250,17 +252,15 @@ export default async function GuestView() {
 						</div>
 					)}
 
-					{/* Quick Register CTA */}
+					{/* Register CTA */}
 					<Link href="/register" className="group block">
-						<div className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.03] px-6 py-8 text-center transition-all duration-300 hover:bg-white/[0.06] hover:-translate-y-1">
-							<div className="absolute -top-10 -right-10 h-32 w-32 rounded-full bg-[#EEB425]/10 blur-3xl" />
-							<div className="absolute -bottom-10 -left-10 h-24 w-24 rounded-full bg-[#EEB425]/10 blur-3xl" />
+						<div className="relative overflow-hidden rounded-lg border border-white/[0.06] bg-black/30 px-5 py-6 text-center transition-all duration-300 hover:bg-black/50">
 							<div className="relative">
-								<div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-[#EEB425]/10">
+								<div className="mx-auto flex h-9 w-9 items-center justify-center rounded-lg bg-[#EEB425]/10 mb-3">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
-										width="20"
-										height="20"
+										width="18"
+										height="18"
 										viewBox="0 0 24 24"
 										fill="none"
 										stroke="#EEB425"
@@ -273,14 +273,14 @@ export default async function GuestView() {
 										<line x1="15" x2="3" y1="12" y2="12" />
 									</svg>
 								</div>
-								<h3 className="mt-4 text-lg font-black text-white">
-									Join {hotelName} Today
+								<h3 className="text-base font-bold text-white/80">
+									Join {hotelName}
 								</h3>
-								<p className="mt-1 text-xs text-white/40">
-									Create your free account and start your adventure!
+								<p className="mt-1 text-xs text-white/30">
+									Create your free account and start your adventure
 								</p>
-								<div className="mt-5 inline-flex items-center gap-2 bg-[#22c55e] hover:bg-[#22c55e]/90 text-white font-black text-xs py-3 px-6 rounded-md transition-all active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#22c55e]/20">
-									Register Now <ArrowRight className="h-3.5 w-3.5" />
+								<div className="mt-4 inline-flex items-center gap-2 bg-[#EEB425]/90 hover:bg-[#EEB425] text-black font-semibold text-xs py-2.5 px-5 rounded-md transition-all active:scale-95 uppercase tracking-wider">
+									Register <ArrowRight className="h-3 w-3" />
 								</div>
 							</div>
 						</div>
diff --git a/src/components/home/user-view.tsx b/src/components/home/user-view.tsx
index cb1a840c..f3ce4fa4 100644
--- a/src/components/home/user-view.tsx
+++ b/src/components/home/user-view.tsx
@@ -57,51 +57,48 @@ export default async function UserView({
 		<div className="flex flex-col gap-6 lg:flex-row">
 			{/* Main Content */}
 			<div className="flex w-full flex-col gap-6 lg:w-3/4">
-				{/* Hero/Welcome Banner */}
-				<div className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-[#09090b] shadow-2xl">
+				{/* Welcome Banner */}
+				<div className="relative overflow-hidden rounded-lg bg-black/60 backdrop-blur-2xl border border-white/[0.06] shadow-2xl">
 					<div className="absolute inset-0 bg-gradient-to-br from-[#EEB425]/5 via-transparent to-transparent" />
-					<div className="absolute -top-20 -right-20 w-64 h-64 bg-[#EEB425]/5 rounded-full blur-[100px]" />
 					<div className="relative flex flex-col items-center gap-6 px-6 py-8 md:flex-row md:px-8">
 						<div className="shrink-0">
 							<div className="relative">
-								<div className="rounded-2xl bg-white/5 border border-white/10 p-1 shadow-lg">
+								<div className="rounded-lg bg-black/40 border border-white/[0.06] p-1">
 									<Image
 										src={avatarImageUrl(imager, look, { size: "l", direction: 2 })}
 										alt={username}
-										width={120}
-										height={200}
-										className="block drop-shadow-xl"
+										width={100}
+										height={160}
+										className="block"
 										style={{ imageRendering: "pixelated" }}
 										unoptimized
 									/>
 								</div>
-								<div className="absolute -bottom-2 -right-2 flex h-7 w-7 items-center justify-center rounded-full bg-green-500 shadow-lg ring-2 ring-[#09090b]">
-									<span className="h-3 w-3 rounded-full bg-green-200 animate-ping absolute" />
-									<span className="h-3 w-3 rounded-full bg-white relative" />
+								<div className="absolute -bottom-1.5 -right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-[#22c55e] ring-2 ring-black/60">
+									<span className="h-2 w-2 rounded-full bg-white" />
 								</div>
 							</div>
 						</div>
 						<div className="flex-1 text-center md:text-left">
-							<h1 className="m-0 text-2xl font-black tracking-tight text-white">
-								Welcome back,{" "}
-								<span className="text-[#EEB425]">{username}</span>
+							<p className="text-xs text-white/30 uppercase tracking-widest font-medium mb-1">
+								Welcome back
+							</p>
+							<h1 className="m-0 text-2xl font-bold text-white/90 tracking-tight">
+								{username}
 							</h1>
-							<p className="mt-1 text-sm text-white/50">
+							<p className="mt-1 text-sm text-white/40">
 								{motto || "Happy to see you again!"}
 							</p>
-							<div className="mt-4 flex flex-wrap justify-center gap-3 md:justify-start">
+							<div className="mt-5 flex flex-wrap justify-center gap-3 md:justify-start">
 								<Link href="/client" target="_blank" rel="noopener noreferrer">
-									<div className="inline-flex items-center gap-2 bg-[#22c55e] hover:bg-[#22c55e]/90 text-white font-black text-xs py-3 px-6 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest shadow-lg shadow-[#22c55e]/20">
+									<div className="inline-flex items-center gap-2 bg-[#22c55e]/90 hover:bg-[#22c55e] text-white font-semibold text-sm py-2.5 px-5 rounded-md transition-all active:scale-[0.98] shadow-lg shadow-[#22c55e]/20">
 										<Gamepad2 size={15} />
 										{t("enterHotel", { hotelName })}
-										<ArrowRight
-											size={14}
-											className="transition-transform group-hover:translate-x-0.5"
-										/>
+										<ArrowRight size={14} />
 									</div>
 								</Link>
 								<Link href={`/u/${username}`}>
-									<div className="inline-flex items-center gap-2 bg-white/5 hover:bg-white/10 text-white font-black text-xs py-3 px-6 rounded-lg transition-all active:scale-[0.98] uppercase tracking-widest border border-white/10">
+									<div className="inline-flex items-center gap-2 bg-black/40 hover:bg-black/60 text-white/60 hover:text-white/80 text-sm font-medium py-2.5 px-5 rounded-md transition-all border border-white/[0.06]">
 										View Profile
 									</div>
 								</Link>
@@ -110,21 +107,21 @@ export default async function UserView({
 					</div>
 				</div>
 
-				{/* Online Friends Bar */}
-				<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-1">
-					<div className="flex flex-col gap-2 lg:flex-row lg:items-center">
-						<div className="flex shrink-0 items-center gap-2 px-4 py-2.5">
+				{/* Online Friends */}
+				<div className="rounded-lg border border-white/[0.06] bg-black/30 p-3">
+					<div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+						<div className="flex shrink-0 items-center gap-2 px-1">
 							<div className="relative flex h-2 w-2">
-								<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#EEB425] opacity-80" />
+								<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#EEB425] opacity-60" />
 								<span className="relative inline-flex h-2 w-2 rounded-full bg-[#EEB425]" />
 							</div>
-							<span className="text-[10px] font-black uppercase tracking-widest text-white/60">
+							<span className="text-xs font-medium uppercase tracking-wider text-white/40">
 								{t("onlineFriends")}
 							</span>
 						</div>
-						<div className="flex flex-wrap items-center gap-2 px-3 py-1">
+						<div className="flex flex-wrap items-center gap-2">
 							{onlineFriends.length === 0 ? (
-								<p className="m-0 text-xs font-medium text-white/40">
+								<p className="m-0 text-xs text-white/25">
 									{t("noFriendsOnline")}
 								</p>
 							) : (
@@ -132,22 +129,19 @@ export default async function UserView({
 									<Link
 										key={f.username}
 										href={`/u/${f.username}`}
-										className="group relative transition-all duration-200 hover:scale-110"
+										className="group relative"
 									>
-										<div className="overflow-hidden rounded-xl border-2 border-transparent bg-white/5 transition-all group-hover:border-[#EEB425]/30">
+										<div className="overflow-hidden rounded-md border border-white/[0.04] bg-black/40 transition-all group-hover:border-[#EEB425]/20">
 											<Image
 												src={avatarImageUrl(imager, f.look, { headOnly: true })}
 												alt={f.username}
-												width={36}
-												height={36}
+												width={32}
+												height={32}
 												className="block"
 												title={f.username}
 												unoptimized
 											/>
 										</div>
-										<span className="absolute -bottom-1 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[#09090b] px-2 py-0.5 text-[0.5rem] font-bold text-white/60 opacity-0 shadow-lg transition-all group-hover:opacity-100 border border-white/10">
-											{f.username}
-										</span>
 									</Link>
 								))
 							)}
@@ -159,12 +153,12 @@ export default async function UserView({
 			{/* Sidebar */}
 			<div className="flex w-full flex-col gap-6 lg:w-1/4">
 				{latestArticle ? (
-					<div className="overflow-hidden rounded-2xl border border-white/[0.06] bg-white/[0.03] transition-all duration-200 hover:bg-white/[0.06]">
-						<div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.06]">
-							<div className="flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEB425]/10">
+					<div className="overflow-hidden rounded-lg border border-white/[0.06] bg-black/30 transition-all duration-200 hover:bg-black/50">
+						<div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.04]">
+							<div className="flex h-6 w-6 items-center justify-center rounded-md bg-[#EEB425]/10">
 								<Newspaper className="h-3 w-3 text-[#EEB425]" />
 							</div>
-							<h2 className="m-0 text-[11px] font-black text-white uppercase tracking-wider">
+							<h2 className="m-0 text-xs font-bold text-white/60 uppercase tracking-wider">
 								{t("latestArticle")}
 							</h2>
 						</div>
@@ -174,21 +168,21 @@ export default async function UserView({
 									src={latestArticle.image}
 									alt={latestArticle.title}
 									fill
-									className="object-cover transition-transform duration-500 group-hover:scale-110"
+									className="object-cover transition-transform duration-500 group-hover:scale-105"
 									unoptimized
 								/>
-								<div className="absolute inset-0 bg-gradient-to-t from-[#09090b] via-black/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+								<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
 							</div>
 							<div className="p-4">
-								<h3 className="text-sm font-bold text-white leading-tight">
+								<h3 className="text-sm font-semibold text-white/80 leading-tight">
 									{latestArticle.title}
 								</h3>
 								{latestArticle.shortStory && (
-									<p className="mt-1.5 text-xs text-white/40 leading-relaxed">
+									<p className="mt-1.5 text-xs text-white/30 leading-relaxed">
 										{excerpt(latestArticle.shortStory, 100)}
 									</p>
 								)}
-								<div className="mt-3 flex items-center gap-1 text-[10px] font-black uppercase tracking-widest text-[#EEB425]">
+								<div className="mt-3 flex items-center gap-1.5 text-[11px] font-medium text-[#EEB425]/70 group-hover:text-[#EEB425] transition-colors">
 									Read more <ArrowRight size={12} />
 								</div>
 							</div>
@@ -196,13 +190,13 @@ export default async function UserView({
 					</div>
 				) : null}
 
-				{/* Quick Stats */}
-				<div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5 text-center">
-					<div className="mx-auto flex h-10 w-10 items-center justify-center rounded-xl bg-[#EEB425]/10">
+				{/* Quick Info */}
+				<div className="rounded-lg border border-white/[0.06] bg-black/30 p-5 text-center">
+					<div className="mx-auto flex h-9 w-9 items-center justify-center rounded-lg bg-[#EEB425]/10 mb-3">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
-							width="20"
-							height="20"
+							width="18"
+							height="18"
 							viewBox="0 0 24 24"
 							fill="none"
 							stroke="#EEB425"
@@ -215,12 +209,11 @@ export default async function UserView({
 							<line x1="15" x2="3" y1="12" y2="12" />
 						</svg>
 					</div>
-					<p className="mt-3 text-sm font-black text-white tracking-wide">
+					<p className="text-sm font-semibold text-white/70">
 						Explore the Hotel
 					</p>
-					<p className="mt-1 text-xs text-white/40">
-						Check out the latest news, visit the marketplace, or chat with
-						friends!
+					<p className="mt-1 text-xs text-white/30 leading-relaxed">
+						Check out the latest news, visit the marketplace, or chat with friends
 					</p>
 				</div>
 			</div>