diff --git a/src/app/(site)/me/page.tsx b/src/app/(site)/me/page.tsx
index ea02c398..52bf7767 100644
--- a/src/app/(site)/me/page.tsx
+++ b/src/app/(site)/me/page.tsx
@@ -226,7 +226,6 @@ export default async function MePage({
 
 		content = (
 			<div className="flex flex-col gap-8 pb-8">
-				{/* Feedback banners */}
 				{claimed ? (
 					<div role="status" style={feedbackStyle("success")}>
 						Woah! You have successfully claimed your reward — keep up the good work!
@@ -238,353 +237,199 @@ export default async function MePage({
 					</div>
 				) : null}
 
-				{/* ── Profile header ── */}
 				<Reveal>
-				<div
-					className="rounded-2xl border p-6 flex items-start gap-6"
-					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)",
-					}}
-				>
-					<div className="relative shrink-0 flex flex-col items-center gap-3">
-						<div
-							className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]"
-							style={{ background: "var(--color-primary)" }}
-						/>
-						<Image
-							src={avatarFull}
-							alt={`${user.username} avatar`}
-							width={120}
-							height={160}
-							className="object-contain drop-shadow-xl relative"
-							unoptimized
-							priority
-						/>
-						<Link
-							href="/client"
-							className="btn-shine flex items-center justify-center gap-1.5 rounded-xl border py-2 px-4 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
-							style={{
-								background: "var(--color-primary)",
-								color: "var(--color-primary-foreground)",
-								borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-								boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
-							}}
-						>
-							<Image
-								src="/assets/images/EnterHubbly.png"
-								alt=""
-								width={16}
-								height={16}
-								unoptimized
-							/>
-							Enter {hotelName}
-						</Link>
-					</div>
-					<div className="flex-1 text-left">
-						<div
-							className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mb-3 border"
-							style={{
-								borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-								background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
-								color: "var(--color-primary-readable, var(--color-primary))",
-							}}
-						>
-							Rank {user.rank}
+					<div
+						className="relative overflow-hidden rounded-2xl border p-6 flex items-start gap-6"
+						style={{
+							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface))`,
+							borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+						}}
+					>
+						<div className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-10" style={{ background: "var(--color-primary)" }} />
+						<div className="relative shrink-0 flex flex-col items-center gap-3">
+							<div className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]" style={{ background: "var(--color-primary)" }} />
+							<Image src={avatarFull} alt="" width={120} height={160} className="object-contain drop-shadow-xl relative" unoptimized priority />
+							<Link
+								href="/client"
+								className="btn-shine flex items-center justify-center gap-1.5 rounded-xl border py-2 px-4 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
+								style={{
+									background: "var(--color-primary)",
+									color: "var(--color-primary-foreground)",
+									borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+									boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+								}}
+							>
+								<Image src="/assets/images/EnterHubbly.png" alt="" width={16} height={16} unoptimized />
+								Enter {hotelName}
+							</Link>
+						</div>
+						<div className="flex-1 min-w-0 pt-1">
+							<div
+								className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider mb-3 border"
+								style={{
+									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
+									background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
+									color: "var(--color-primary-readable, var(--color-primary))",
+								}}
+							>
+								Rank {user.rank}
+							</div>
+							<h1 className="text-2xl md:text-3xl font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>
+								{user.username}
+							</h1>
+							<p className="text-sm mt-1" style={{ color: "var(--color-text-muted)" }}>
+								{user.motto || "No motto"}
+							</p>
+							<div className="flex flex-wrap gap-x-6 gap-y-1 mt-4 text-xs">
+								<span style={{ color: "var(--color-text-muted)" }}>
+									Registered: <strong style={{ color: "var(--color-text-readable)" }}>{registered}</strong>
+								</span>
+								<span style={{ color: "var(--color-text-muted)" }}>
+									Last online: <strong style={{ color: "var(--color-text-readable)" }}>{lastOnlineDate}</strong>
+								</span>
+							</div>
 						</div>
-						<h1
-							className="text-2xl md:text-3xl font-black tracking-tight"
-							style={{ color: "var(--color-text-readable)" }}
-						>
-							{user.username}
-						</h1>
-						<p className="text-sm mt-1" style={{ color: "var(--color-text-muted)" }}>
-							{user.motto || "No motto"}
-						</p>
 					</div>
-				</div>
 				</Reveal>
 
-				{/* ── Hotel alert banner ── */}
 				{alertRaw ? (
 					<Reveal delay={0.05}>
-						<div
-							className="rounded-2xl border px-6 py-4 text-center"
-							style={{
-								background: "color-mix(in srgb, var(--color-accent) 12%, transparent)",
-								borderColor: "color-mix(in srgb, var(--color-accent) 25%, transparent)",
-							}}
-						>
-							<p className="text-sm font-bold" style={{ color: "var(--color-accent)" }}>
-								{alertRaw}
-							</p>
+						<div className="rounded-2xl border px-6 py-4 text-center" style={{ background: "color-mix(in srgb, var(--color-accent) 12%, transparent)", borderColor: "color-mix(in srgb, var(--color-accent) 25%, transparent)" }}>
+							<p className="text-sm font-bold" style={{ color: "var(--color-accent)" }}>{alertRaw}</p>
 						</div>
 					</Reveal>
 				) : null}
 
-				{/* ── Stat tiles ── */}
 				<Reveal delay={0.1}>
-				<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 stagger-children">
-					{[
-						{ value: user.credits.toLocaleString(), label: "Credits" },
-						{ value: `Rank ${user.rank}`, label: "Hotel rank" },
-						{ value: (userSettings?.achievementScore ?? 0).toLocaleString(), label: "Achievement score" },
-						{ value: (userSettings?.respectsReceived ?? 0).toLocaleString(), label: "Respects received" },
-						{ value: friendCount.toLocaleString(), label: "Friends" },
-						{ value: lastLoginDate, label: "Last login" },
-					].map((s) => (
-						<div
-							key={s.label}
-							className="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)",
-							}}
-						>
+					<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+						{[
+							{ value: user.credits.toLocaleString(), label: "Credits" },
+							{ value: `Rank ${user.rank}`, label: "Hotel rank" },
+							{ value: (userSettings?.achievementScore ?? 0).toLocaleString(), label: "Achievement score" },
+							{ value: (userSettings?.respectsReceived ?? 0).toLocaleString(), label: "Respects" },
+							{ value: friendCount.toLocaleString(), label: "Friends" },
+							{ value: lastLoginDate, label: "Last login" },
+						].map((s) => (
 							<div
-								className="text-xl md:text-2xl font-black tracking-tight mb-0.5"
-								style={{ color: "var(--color-primary)" }}
+								key={s.label}
+								className="relative rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
+								style={{
+									background: "var(--color-surface)",
+									borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+								}}
 							>
-								{s.value}
+								<div className="text-xl md:text-2xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
+									{s.value}
+								</div>
+								<div className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
+									{s.label}
+								</div>
 							</div>
-							<div
-								className="text-xs font-bold uppercase tracking-widest"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								{s.label}
-							</div>
-						</div>
-					))}
-				</div>
+						))}
+					</div>
 				</Reveal>
 
-				{/* ── Online friends ── */}
 				<Reveal delay={0.15}>
-				<div
-					className="rounded-2xl border p-5"
-					style={{
-						background: "var(--color-surface)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
-					<div className="flex items-center justify-between mb-4">
-						<div>
-							<h2
-								className="text-lg font-black tracking-tight"
-								style={{ color: "var(--color-text-readable)" }}
-							>
-								Online friends
-							</h2>
-							<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-								{onlineFriends.length === 0
-									? "None of your friends are online right now"
-									: `${onlineFriends.length} of your ${friends.length} friends online`}
-							</p>
+					<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+						<div className="flex items-center justify-between mb-4">
+							<div>
+								<h2 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Online friends</h2>
+								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+									{onlineFriends.length === 0 ? "None of your friends are online right now" : `${onlineFriends.length} of your ${friends.length} friends online`}
+								</p>
+							</div>
+							<Link href="/friends" className="text-xs font-bold hover:underline shrink-0" style={{ color: "var(--color-primary)" }}>View all</Link>
 						</div>
-						<Link
-							href="/friends"
-							className="text-xs font-bold hover:underline shrink-0"
-							style={{ color: "var(--color-primary)" }}
-						>
-							View all
-						</Link>
-					</div>
-					{onlineFriends.length === 0 ? (
-						<div className="text-center py-6">
-							<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
-								No friends online right now. Check back later!
-							</p>
-						</div>
-					) : (
-						<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
-							{onlineFriends.map((friend) => {
-								const avatar = avatarImageUrl(imager, friend.look, {
-									size: "s",
-									headOnly: true,
-								});
-								return (
+						{onlineFriends.length === 0 ? (
+							<div className="text-center py-6">
+								<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>No friends online right now. Check back later!</p>
+							</div>
+						) : (
+							<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+								{onlineFriends.map((friend) => (
 									<Link
 										key={friend.id}
 										href={`/u/${friend.username}`}
-										className="flex items-center gap-3 p-3 rounded-xl transition-all duration-200 hover:-translate-y-0.5"
-										style={{
-											background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-											textDecoration: "none",
-										}}
+										className="flex items-center gap-3 p-3 rounded-xl transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
+										style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)", textDecoration: "none" }}
 									>
-										<Image
-											src={avatar}
-											alt={`${friend.username} avatar`}
-											width={40}
-											height={50}
-											className="rounded-lg shrink-0"
-											unoptimized
-										/>
+										<Image src={avatarImageUrl(imager, friend.look, { size: "s", headOnly: true })} alt="" width={40} height={50} className="rounded-lg shrink-0" unoptimized />
 										<div className="min-w-0">
-											<p
-												className="text-sm font-extrabold truncate"
-												style={{ color: "var(--color-text-readable)" }}
-											>
-												{friend.username}
-											</p>
-											<p
-												className="text-[10px] font-semibold truncate mt-0.5"
-												style={{ color: "var(--color-text-muted)" }}
-											>
-												{friend.motto || "No motto"}
-											</p>
-											<span
-												className="inline-flex items-center gap-1 text-[10px] font-bold mt-1"
-												style={{ color: "var(--color-success)" }}
-											>
-												<span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--color-success)" }} />
-												Online
+											<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>{friend.username}</p>
+											<p className="text-[10px] font-semibold truncate mt-0.5" style={{ color: "var(--color-text-muted)" }}>{friend.motto || "No motto"}</p>
+											<span className="inline-flex items-center gap-1 text-[10px] font-bold mt-1" style={{ color: "var(--color-success)" }}>
+												<span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--color-success)" }} /> Online
 											</span>
 										</div>
 									</Link>
-								);
-							})}
-						</div>
-					)}
-				</div>
-				</Reveal>
-
-				{/* ── Referral card ── */}
-				<Reveal delay={0.2}>
-				<div
-					className="rounded-2xl border p-5"
-					style={{
-						background: "var(--color-surface)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-					}}
-				>
-					<div className="mb-4">
-						<h2
-							className="text-lg font-black tracking-tight"
-							style={{ color: "var(--color-text-readable)" }}
-						>
-							Refer a friend ({referralTotal}/{needed})
-						</h2>
-						<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-							Refer new users and earn in-game rewards
-						</p>
-					</div>
-					<div className="flex flex-col gap-4">
-						<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
-							{rewardAmount > 0
-								? `For every ${needed} users who register through your referral link you can claim a reward of ${rewardAmount.toLocaleString()} ${rewardCurrency}!`
-								: `Invite ${needed} users through your referral link to claim a reward!`}
-						</p>
-
-						<div role="note" style={feedbackStyle("warning")}>
-							⚠️ Boosting referrals by making your own accounts will lead to removal of all progress, currency, inventory and a potential ban.
-						</div>
-
-						<div>
-							<label
-								htmlFor="referral-link"
-								className="text-xs font-bold mb-1.5 block"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								Your referral link
-							</label>
-							<div className="flex gap-2 flex-wrap">
-								<input
-									id="referral-link"
-									type="text"
-									readOnly
-									defaultValue={referralLink}
-									className="input-glow flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
-									style={{
-										backgroundColor: "var(--color-background)",
-										color: "var(--color-text-readable, var(--color-text))",
-										borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-									}}
-								/>
-								<CopyReferralButton value={referralLink} />
+								))}
 							</div>
-						</div>
-
-						{canClaim ? (
-							<form action={claimReferral}>
-								<button
-									type="submit"
-									className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] 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)",
-									}}
-								>
-									Claim your referral reward!
-								</button>
-							</form>
-						) : (
-							<button
-								type="button"
-								disabled
-								className="w-full rounded-xl font-extrabold text-sm py-3.5 opacity-60 cursor-not-allowed"
-								style={{
-									background: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
-									color: "var(--color-text-muted)",
-								}}
-							>
-								{`Refer ${remaining} more ${remaining === 1 ? "user" : "users"} to unlock your reward`}
-							</button>
 						)}
 					</div>
-				</div>
 				</Reveal>
-				{/* ── Recent rooms ── */}
+
+				<Reveal delay={0.2}>
+					<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+						<div className="mb-4">
+							<h2 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Refer a friend ({referralTotal}/{needed})</h2>
+							<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>Refer new users and earn in-game rewards</p>
+						</div>
+						<div className="flex flex-col gap-4">
+							<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
+								{rewardAmount > 0
+									? `For every ${needed} users who register through your referral link you can claim a reward of ${rewardAmount.toLocaleString()} ${rewardCurrency}!`
+									: `Invite ${needed} users through your referral link to claim a reward!`}
+							</p>
+							<div role="note" style={feedbackStyle("warning")}>
+								Boosting referrals by making your own accounts will lead to removal of all progress, currency, inventory and a potential ban.
+							</div>
+							<div>
+								<label htmlFor="referral-link" className="text-xs font-bold mb-1.5 block" style={{ color: "var(--color-text-muted)" }}>Your referral link</label>
+								<div className="flex gap-2 flex-wrap">
+									<input id="referral-link" type="text" readOnly defaultValue={referralLink}
+										className="input-glow flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
+										style={{ backgroundColor: "var(--color-background)", color: "var(--color-text-readable, var(--color-text))", borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)" }}
+									/>
+									<CopyReferralButton value={referralLink} />
+								</div>
+							</div>
+							{canClaim ? (
+								<form action={claimReferral}>
+									<button type="submit" className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] 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)" }}
+									>
+										Claim your referral reward!
+									</button>
+								</form>
+							) : (
+								<button type="button" disabled className="w-full rounded-xl font-extrabold text-sm py-3.5 opacity-60 cursor-not-allowed"
+									style={{ background: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)", color: "var(--color-text-muted)" }}
+								>
+									{`Refer ${remaining} more ${remaining === 1 ? "user" : "users"} to unlock your reward`}
+								</button>
+							)}
+						</div>
+					</div>
+				</Reveal>
+
 				{recentRooms.length > 0 && (
 					<Reveal delay={0.25}>
-						<div
-							className="rounded-2xl border p-5"
-							style={{
-								background: "var(--color-surface)",
-								borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-							}}
-						>
+						<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
 							<div className="flex items-center justify-between mb-4">
 								<div>
-									<h2
-										className="text-lg font-black tracking-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										Recent rooms
-									</h2>
-									<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-										Newest rooms in the hotel
-									</p>
+									<h2 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Recent rooms</h2>
+									<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>Newest rooms in the hotel</p>
 								</div>
-								<Link
-									href="/community"
-									className="text-xs font-bold hover:underline shrink-0"
-									style={{ color: "var(--color-primary)" }}
-								>
-									View all
-								</Link>
+								<Link href="/community" className="text-xs font-bold hover:underline shrink-0" style={{ color: "var(--color-primary)" }}>View all</Link>
 							</div>
 							<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
 								{recentRooms.map((room) => (
-									<Link
-										key={room.id}
-										href={`/room/${room.id}`}
-										className="block rounded-xl border p-3 transition-all duration-200 hover:-translate-y-0.5"
-										style={{
-											background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-											borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-										}}
+									<Link key={room.id} href={`/room/${room.id}`}
+										className="block rounded-xl border p-3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
+										style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)", borderColor: "color-mix(in srgb, var(--color-primary) 10%, transparent)" }}
 									>
-										<p
-											className="text-sm font-extrabold truncate"
-											style={{ color: "var(--color-text-readable)" }}
-										>
-											{room.name}
-										</p>
-										<p className="text-[10px] font-semibold mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-											{room.ownerName} · {room.users}/{room.usersMax}
-										</p>
+										<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>{room.name}</p>
+										<p className="text-[10px] font-semibold mt-0.5" style={{ color: "var(--color-text-muted)" }}>{room.ownerName} &middot; {room.users}/{room.usersMax}</p>
 									</Link>
 								))}
 							</div>
@@ -594,35 +439,14 @@ export default async function MePage({
 
 				{badges.length > 0 && (
 					<Reveal delay={0.3}>
-						<div
-							className="rounded-2xl border p-5"
-							style={{
-								background: "var(--color-surface)",
-								borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-							}}
-						>
+						<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
 							<div className="mb-4">
-								<h2
-									className="text-lg font-black tracking-tight"
-									style={{ color: "var(--color-text-readable)" }}
-								>
-									Badges
-								</h2>
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-									{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped
-								</p>
+								<h2 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Badges</h2>
+								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped</p>
 							</div>
 							<div className="flex flex-wrap gap-2">
 								{badges.map((badge) => (
-									<Image
-										key={badge.badgeCode}
-										src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`}
-										alt={badge.badgeCode}
-										width={40}
-										height={40}
-										className="rounded-md"
-										unoptimized
-									/>
+									<Image key={badge.badgeCode} src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`} alt={badge.badgeCode} width={40} height={40} className="rounded-md transition-transform hover:scale-110" unoptimized />
 								))}
 							</div>
 						</div>
@@ -630,74 +454,27 @@ export default async function MePage({
 				)}
 
 				<Reveal delay={0.35}>
-					<div
-						className="rounded-2xl border p-5"
-						style={{
-							background: "var(--color-surface)",
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
-						}}
-					>
-						<div className="mb-4">
-							<h2
-								className="text-lg font-black tracking-tight"
-								style={{ color: "var(--color-text-readable)" }}
-							>
-								Quick links
-							</h2>
-						</div>
+					<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+						<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>Quick links</h2>
 						<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-							<Link
-								href="/messages"
-								className="relative flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
-								style={{
-									background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-									color: "var(--color-text-readable)",
-								}}
-							>
-								Messages
-								{unreadCount > 0 && (
-									<span
-										className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none"
-										style={{ background: "var(--color-danger)", color: "white" }}
-									>
-										{unreadCount > 99 ? "99+" : unreadCount}
-									</span>
-								)}
-							</Link>
-							<Link
-								href={`/u/${user.username}`}
-								className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
-								style={{
-									background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-									color: "var(--color-text-readable)",
-								}}
-							>
-								My profile
-							</Link>
-							<Link
-								href="/settings"
-								className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
-								style={{
-									background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-									color: "var(--color-text-readable)",
-								}}
-							>
-								Settings
-							</Link>
-							<Link
-								href="/shop"
-								className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
-								style={{
-									background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-									color: "var(--color-text-readable)",
-								}}
-							>
-								Shop
-							</Link>
+							{[
+								{ href: "/messages", label: "Messages", badge: unreadCount },
+								{ href: `/u/${user.username}`, label: "My profile", badge: 0 },
+								{ href: "/settings", label: "Settings", badge: 0 },
+								{ href: "/shop", label: "Shop", badge: 0 },
+							].map((link) => (
+								<Link key={link.href} href={link.href}
+									className="relative flex items-center justify-center rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5 hover:shadow-md"
+									style={{ background: "color-mix(in srgb, var(--color-primary) 6%, transparent)", borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)", color: "var(--color-text-readable)" }}
+								>
+									{link.label}
+									{link.badge > 0 && (
+										<span className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none" style={{ background: "var(--color-danger)", color: "white" }}>
+											{link.badge > 99 ? "99+" : link.badge}
+										</span>
+									)}
+								</Link>
+							))}
 						</div>
 					</div>
 				</Reveal>