From cc7b93c658222c4a793c039f44f0467a1ca462a4 Mon Sep 17 00:00:00 2001
From: OCbwoy3 <ocbwoy3@ocbwoy3.dev>
Date: Sun, 28 Dec 2025 01:00:04 +0200
Subject: [PATCH] chatgpt codex: told to improve ux/ui consistently, 5 times

---
 app/games/[id]/content.tsx                | 18 +++---
 app/games/[id]/page.tsx                   |  8 ++-
 app/globals.css                           | 50 +++++++--------
 app/layout.tsx                            | 13 ++--
 app/page.tsx                              |  6 +-
 app/users/[id]/content.tsx                | 24 +++++---
 app/users/[id]/page.tsx                   |  8 ++-
 components/providers/DownloadDialog.tsx   |  2 +-
 components/providers/GameLaunchDialog.tsx |  8 +--
 components/roblox/FriendCarousel.tsx      | 74 +++++++++++------------
 components/roblox/GameCard.tsx            |  4 +-
 components/roblox/UserProfileHeader.tsx   | 15 ++---
 components/site/HomeUserHeader.tsx        |  4 +-
 components/site/OutfitQuickChooser.tsx    |  2 +-
 components/site/QuickTopUI.tsx            |  4 +-
 components/ui/card.tsx                    |  2 +-
 16 files changed, 128 insertions(+), 114 deletions(-)

diff --git a/app/games/[id]/content.tsx b/app/games/[id]/content.tsx
index 953a320..ac418a7 100644
--- a/app/games/[id]/content.tsx
+++ b/app/games/[id]/content.tsx
@@ -35,7 +35,7 @@ export default function GamePageContent({
 
 	if (!hasHydrated || !game) {
 		return (
-			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
+			<div className="page-container py-6 space-y-6">
 				<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
 					<div className="aspect-video rounded-2xl bg-surface0/60 animate-pulse" />
 					<div className="space-y-4">
@@ -55,7 +55,7 @@ export default function GamePageContent({
 						</div>
 					</div>
 				</div>
-				<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
+				<div className="panel-soft p-6">
 					<div className="h-5 w-24 rounded bg-surface0/60 animate-pulse" />
 					<div className="mt-3 h-4 w-full rounded bg-surface0/60 animate-pulse" />
 					<div className="mt-2 h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
@@ -72,9 +72,9 @@ export default function GamePageContent({
 				: null;
 
 	return (
-		<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
+		<div className="page-container py-6 space-y-6">
 			<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
-				<div className="rounded-2xl overflow-hidden bg-surface0/40 ring-1 ring-surface1/60 aspect-video">
+				<div className="panel overflow-hidden aspect-video">
 					<LazyLoadedImage
 						imgId={`GameThumbnail_${game.rootPlaceId}`}
 						alt={game.name}
@@ -129,25 +129,25 @@ export default function GamePageContent({
 					</div>
 
 					<div className="grid grid-cols-2 gap-3 text-sm">
-						<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
+						<div className="stat-card">
 							<p className="text-subtext1">Playing now</p>
 							<p className="text-lg font-semibold text-text">
 								{game.playing.toLocaleString()}
 							</p>
 						</div>
-						<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
+						<div className="stat-card">
 							<p className="text-subtext1">Total visits</p>
 							<p className="text-lg font-semibold text-text">
 								{game.visits.toLocaleString()}
 							</p>
 						</div>
-						<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
+						<div className="stat-card">
 							<p className="text-subtext1">Favorites</p>
 							<p className="text-lg font-semibold text-text">
 								{game.favoritedCount.toLocaleString()}
 							</p>
 						</div>
-						<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
+						<div className="stat-card">
 							<p className="text-subtext1">Max players</p>
 							<p className="text-lg font-semibold text-text">
 								{game.maxPlayers}
@@ -173,7 +173,7 @@ export default function GamePageContent({
 				</div>
 			</div>
 
-			<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
+			<div className="panel-soft p-6">
 				<h2 className="text-lg font-semibold text-text">About</h2>
 				<p className="mt-2 text-sm text-subtext1 whitespace-pre-line">
 					{game.description || "No description provided yet."}
diff --git a/app/games/[id]/page.tsx b/app/games/[id]/page.tsx
index 5872afa..d162251 100644
--- a/app/games/[id]/page.tsx
+++ b/app/games/[id]/page.tsx
@@ -9,7 +9,13 @@ export default async function GamePageContent({
 	params: { id: string };
 }) {
 	return (
-		<Suspense fallback={<div className="p-4">Loading profile…</div>}>
+		<Suspense
+			fallback={
+				<div className="page-container py-6 text-sm text-subtext1">
+					Loading game…
+				</div>
+			}
+		>
 			<GamePageContentF placeId={(await params).id} />
 		</Suspense>
 	);
diff --git a/app/globals.css b/app/globals.css
index 7c03cb6..12e4898 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -134,8 +134,7 @@ body {
 	h1,
 	h2,
 	h3 {
-		font-family: var(--font-space-grotesk), var(--font-geist-sans), sans-serif;
-		letter-spacing: -0.02em;
+		@apply tracking-tight;
 	}
 	a {
 		text-decoration: underline;
@@ -165,33 +164,26 @@ body {
 		-ms-overflow-style: none;
 		scrollbar-width: 0;
 	}
-	.ambient-backdrop {
-		position: fixed;
-		inset: 0;
-		z-index: 0;
-		pointer-events: none;
-		background-image:
-			radial-gradient(
-				1200px 700px at 10% -10%,
-				hsl(var(--glow-2) / 0.2),
-				transparent 55%
-			),
-			radial-gradient(
-				900px 600px at 95% 0%,
-				hsl(var(--glow-1) / 0.22),
-				transparent 60%
-			),
-			radial-gradient(
-				800px 500px at 50% 100%,
-				hsl(var(--glow-3) / 0.18),
-				transparent 55%
-			),
-			linear-gradient(
-				180deg,
-				hsl(var(--background)) 0%,
-				hsl(var(--background)) 45%,
-				hsl(var(--muted)) 100%
-			);
+	.page-container {
+		@apply mx-auto w-full max-w-6xl px-4 sm:px-8;
+	}
+	.section-title {
+		@apply text-xl sm:text-2xl font-semibold text-text;
+	}
+	.panel {
+		@apply rounded-3xl bg-base/50 ring-1 ring-surface1/60 shadow-lg;
+	}
+	.panel-blur {
+		@apply rounded-3xl bg-base/50 ring-1 ring-surface1/60 shadow-lg backdrop-blur-lg;
+	}
+	.panel-soft {
+		@apply rounded-3xl border border-surface1/60 bg-base/40;
+	}
+	.glass-soft {
+		@apply rounded-3xl bg-base/35 ring-1 ring-surface0/60 shadow-lg backdrop-blur-md;
+	}
+	.stat-card {
+		@apply rounded-2xl border border-surface1/60 bg-base/40 p-3 shadow-md;
 	}
 }
 @utility border-border {
diff --git a/app/layout.tsx b/app/layout.tsx
index 7504471..ecba2a9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/toaster";
@@ -20,10 +20,6 @@ const geistMono = Geist_Mono({
 	subsets: ["latin"]
 });
 
-const spaceGrotesk = Space_Grotesk({
-	variable: "--font-space-grotesk",
-	subsets: ["latin"]
-});
 
 export const metadata: Metadata = {
 	title: "Home | Roblox",
@@ -49,13 +45,16 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<body
-				className={`${geistSans.variable} ${geistMono.variable} ${spaceGrotesk.variable} antialiased overflow-x-hidden mocha`}
+				className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden mocha`}
 			>
 				<ReactQueryProvider>
 					<TooltipProvider>
 						<GameLaunchProvider>
 							<main className="relative min-h-screen z-10">
-								<div className="ambient-backdrop" aria-hidden="true" />
+								<div
+									className="fixed inset-0 z-0 pointer-events-none bg-background"
+									aria-hidden="true"
+								/>
 								{/* <Image
 									src={"/bg.png"}
 									width={1920}
diff --git a/app/page.tsx b/app/page.tsx
index b59ba04..b7792f5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -48,7 +48,7 @@ export default function Home() {
 		<>
 			<HomeLoggedInHeader />
 			<div className="h-4" />
-			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
+			<div className="page-container">
 				<BestFriendsHomeSect className="pt-2" />
 				<FriendsHomeSect className="pt-2" />
 			</div>
@@ -63,7 +63,7 @@ export default function Home() {
 				</Alert>
 			</div> */}
 
-			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
+			<div className="page-container pb-16 space-y-10 no-scrollbar">
 				{isLoading ? (
 					<div className="space-y-6">
 						<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
@@ -92,7 +92,7 @@ export default function Home() {
 						.map((sort, idx) => (
 							<section key={idx} className="space-y-4">
 								<div className="flex items-center justify-between">
-									<h2 className="text-xl sm:text-2xl font-semibold text-text">
+									<h2 className="section-title">
 										{sort.topic}
 									</h2>
 								</div>
diff --git a/app/users/[id]/content.tsx b/app/users/[id]/content.tsx
index 6f71a1b..3282a69 100644
--- a/app/users/[id]/content.tsx
+++ b/app/users/[id]/content.tsx
@@ -26,8 +26,8 @@ function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
 			{/*
 			//@ts-expect-error */}
 			<FriendCarousel
-				title={<span className="pl-4">Friends</span>}
-				className="overflow-visible -ml-4"
+				title="Friends"
+				className="overflow-visible"
 				friends={theirFriends || []}
 			/>
 		</>
@@ -50,15 +50,25 @@ export default function UserProfileContent({
 		}
 	}, [profile]);
 
-	if (isLoading) return <div className="p-4">Loading user profile...</div>;
+	if (isLoading)
+		return (
+			<div className="page-container py-6 space-y-6">
+				<div className="h-10 w-64 rounded-lg bg-surface0/60 animate-pulse" />
+				<div className="panel-soft h-32 animate-pulse" />
+				<div className="panel-soft h-64 animate-pulse" />
+			</div>
+		);
 	if (!profile) notFound();
 
 	return (
-		<div className="p-4 space-y-6">
+		<div className="page-container py-6 space-y-6">
 			<UserProfileHeader user={profile} />
-			<Separator />
-			<div className="break-all pl-4 whitespace-pre-line">
-				{profile.description}
+			<Separator className="bg-surface0/60" />
+			<div className="panel-soft p-6">
+				<h2 className="text-lg font-semibold text-text">About</h2>
+				<p className="mt-2 text-sm text-subtext1 break-all whitespace-pre-line">
+					{profile.description || "No description provided yet."}
+				</p>
 			</div>
 			{profile.isBanned && (
 				<>
diff --git a/app/users/[id]/page.tsx b/app/users/[id]/page.tsx
index 1200a4b..cd6dc7d 100644
--- a/app/users/[id]/page.tsx
+++ b/app/users/[id]/page.tsx
@@ -8,7 +8,13 @@ export default async function UserProfilePage({
 	params: { id: string };
 }) {
 	return (
-		<Suspense fallback={<div className="p-4">Loading profile…</div>}>
+		<Suspense
+			fallback={
+				<div className="page-container py-6 text-sm text-subtext1">
+					Loading profile…
+				</div>
+			}
+		>
 			<UserProfileContent userId={(await params).id} />
 		</Suspense>
 	);
diff --git a/components/providers/DownloadDialog.tsx b/components/providers/DownloadDialog.tsx
index 46b5696..3e1f553 100644
--- a/components/providers/DownloadDialog.tsx
+++ b/components/providers/DownloadDialog.tsx
@@ -29,7 +29,7 @@ export function DownloadDialog() {
 			onClick={closeDownloadDialog}
 		>
 			<div
-				className="relative w-[94vw] max-w-4xl rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
+				className="panel-blur relative w-[94vw] max-w-4xl"
 				onClick={(event) => event.stopPropagation()}
 			>
 				<Button
diff --git a/components/providers/GameLaunchDialog.tsx b/components/providers/GameLaunchDialog.tsx
index 1c3f359..25ca82a 100644
--- a/components/providers/GameLaunchDialog.tsx
+++ b/components/providers/GameLaunchDialog.tsx
@@ -65,11 +65,11 @@ export function GameLaunchDialog() {
 
 	return (
 		<div
-			className="fixed inset-0 z-200 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
+			className="fixed inset-0 z-200 flex items-center justify-center bg-mantle/70 backdrop-blur-sm pointer-events-auto"
 			onClick={closeGameLaunch}
 		>
 			<div
-				className="relative w-[92vw] max-w-sm rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
+				className="panel-blur relative w-[92vw] max-w-sm"
 				onClick={(event) => event.stopPropagation()}
 			>
 				<Button
@@ -82,7 +82,7 @@ export function GameLaunchDialog() {
 					<X className="h-4 w-4" />
 				</Button>
 				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
-					<div className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20">
+					<div className="h-20 w-20 flex items-center justify-center rounded-2xl bg-blue/20 ring-1 ring-blue/30">
 						<RobloxLogoIcon className="h-10 w-10 text-blue" />
 					</div>
 					<div className="space-y-1">
@@ -104,7 +104,7 @@ export function GameLaunchDialog() {
 					{launchTimeouted ? (
 						<Button
 							onClick={handleDownloadClick}
-							className="w-full rounded-full z-50 pointer-events-auto"
+							className="w-full rounded-full z-50"
 						>
 							Download Roblox
 						</Button>
diff --git a/components/roblox/FriendCarousel.tsx b/components/roblox/FriendCarousel.tsx
index 02989ff..732b097 100644
--- a/components/roblox/FriendCarousel.tsx
+++ b/components/roblox/FriendCarousel.tsx
@@ -57,7 +57,7 @@ export function FriendCarousel({
 			<h1 className="text-2xl pt-4 pl-4 -mb-4">{title}</h1>
 			<div className="rounded-xl flex flex-col gap-2 px-4 no-scrollbar">
 				<div
-					className="flex items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar py-6 scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
+					className="flex p-8 items-center gap-4 overflow-x-auto overflow-y-visible no-scrollbar pb-2 -mx-4 w-screen scrollbar-thin scrollbar-thumb-surface2 scrollbar-track-surface0"
 					style={{
 						scrollSnapType: "x mandatory",
 						WebkitOverflowScrolling: "touch",
@@ -73,32 +73,32 @@ export function FriendCarousel({
 							userPresence === 1
 								? "border-blue/25 bg-blue/25"
 								: userPresence === 2
-									? "border-green/25 bg-green/25"
-									: userPresence === 3
-										? "border-yellow/25 bg-yellow/25"
-										: userPresence === 0
-											? "border-surface2/25 bg-surface2/25"
-											: "border-red/25 bg-red/25";
+								? "border-green/25 bg-green/25"
+								: userPresence === 3
+								? "border-yellow/25 bg-yellow/25"
+								: userPresence === 0
+								? "border-surface2/25 bg-surface2/25"
+								: "border-red/25 bg-red/25";
 						const textColor =
 							userPresence === 1
 								? "text-blue"
 								: userPresence === 2
-									? "text-green"
-									: userPresence === 3
-										? "text-yellow"
-										: userPresence === 0
-											? "text-surface2"
-											: "text-red";
+								? "text-green"
+								: userPresence === 3
+								? "text-yellow"
+								: userPresence === 0
+								? "text-surface2"
+								: "text-red";
 						const fillColor =
 							userPresence === 1
 								? "fill-blue"
 								: userPresence === 2
-									? "fill-green"
-									: userPresence === 3
-										? "fill-yellow"
-										: userPresence === 0
-											? "fill-surface2"
-											: "fill-red";
+								? "fill-green"
+								: userPresence === 3
+								? "fill-yellow"
+								: userPresence === 0
+								? "fill-surface2"
+								: "fill-red";
 
 						return (
 							<StupidHoverThing
@@ -108,7 +108,7 @@ export function FriendCarousel({
 									<div className="text-center items-center justify-center content-center">
 										<span className="space-x-1 flex items-center">
 											<p>{a.displayName || a.name}</p>
-											{a.hasVerifiedBadge ? (
+											{!a.hasVerifiedBadge ? (
 												<VerifiedIcon
 													useDefault
 													className={`w-4 h-4 shrink-0`}
@@ -125,24 +125,24 @@ export function FriendCarousel({
 							>
 								<Link href={`/users/${a.id}`}>
 									<div className="flex flex-col min-w-[6.5rem]">
-										<LazyLoadedImage
-											imgId={`AvatarHeadShot_${a.id}`}
-											alt={a.name}
-											className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
-										/>
-										<span
-											className={`text-xs ${textColor} mt-1 text-center flex items-center justify-center gap-1 max-w-[6.5rem] overflow-hidden line-clamp-2`}
-										>
-											<span className="line-clamp-1 overflow-hidden text-ellipsis">
-												{a.displayName || a.name}
-											</span>
-											{a.hasVerifiedBadge ? (
-												<VerifiedIcon
-													className={`text-base ${fillColor} w-3 h-3 shrink-0`}
-												/>
-											) : null}
+									<LazyLoadedImage
+										imgId={`AvatarHeadShot_${a.id}`}
+										alt={a.name}
+										className={`w-24 h-24 rounded-full border-2 ${borderColor} object-cover shadow-xl`}
+									/>
+									<span
+										className={`text-xs ${textColor} mt-1 text-center flex items-center justify-center gap-1 max-w-[6.5rem] overflow-hidden line-clamp-2`}
+									>
+										<span className="line-clamp-1 overflow-hidden text-ellipsis">
+											{a.displayName || a.name}
 										</span>
-									</div>
+										{!a.hasVerifiedBadge ? (
+											<VerifiedIcon
+												className={`text-base ${fillColor} w-3 h-3 shrink-0`}
+											/>
+										) : null}
+									</span>
+								</div>
 								</Link>
 							</StupidHoverThing>
 						);
diff --git a/components/roblox/GameCard.tsx b/components/roblox/GameCard.tsx
index 088e0da..fa64a23 100644
--- a/components/roblox/GameCard.tsx
+++ b/components/roblox/GameCard.tsx
@@ -59,7 +59,7 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 				onClick={() => setIsOpen(true)}
 			>
 				<div className="space-y-2">
-					<div className="group overflow-hidden aspect-video relative bg-muted rounded-2xl ring-1 ring-surface0/60 shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg">
+					<div className="panel group overflow-hidden aspect-video relative transition hover:-translate-y-0.5 hover:shadow-2xl">
 						<div className="overflow-hidden">
 							{game.primaryMediaAsset ? (
 								<LazyLoadedImage
@@ -80,7 +80,7 @@ export const GameCard = React.memo(function GameCard({ game }: GameCardProps) {
 								</div>
 							)}
 						</div>
-						<div className="pointer-events-none absolute inset-0 bg-linear-to-t from-crust/50 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+					<div className="pointer-events-none absolute inset-0 bg-crust/40 opacity-0 transition-opacity group-hover:opacity-100" />
 					</div>
 					<div>
 						<p className="text-sm font-semibold text-text line-clamp-1">
diff --git a/components/roblox/UserProfileHeader.tsx b/components/roblox/UserProfileHeader.tsx
index b8cdbd0..56f08fb 100644
--- a/components/roblox/UserProfileHeader.tsx
+++ b/components/roblox/UserProfileHeader.tsx
@@ -19,6 +19,7 @@ import Link from "next/link";
 import { UserProfileDetails } from "@/lib/profile";
 
 export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
+
 	if (!user) {
 		return (
 			<div className="justify-center w-screen px-8 py-6">
@@ -41,12 +42,12 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
 		userPresence === 1
 			? "border-blue/25 bg-blue/25"
 			: userPresence === 2
-				? "border-green/25 bg-green/25"
-				: userPresence === 3
-					? "border-yellow/25 bg-yellow/25"
-					: userPresence === 0
-						? "border-surface2/25 bg-surface2/25"
-						: "border-red/25 bg-red/25";
+			? "border-green/25 bg-green/25"
+			: userPresence === 3
+			? "border-yellow/25 bg-yellow/25"
+			: userPresence === 0
+			? "border-surface2/25 bg-surface2/25"
+			: "border-red/25 bg-red/25";
 
 	const isLoaded = !!user;
 
@@ -97,7 +98,7 @@ export function UserProfileHeader({ user }: { user: UserProfileDetails }) {
 							<RobloxBannedSmall className="w-6 h-6 text-blue" />
 						)}
 					</span>
-					<span className="font-super-mono text-subtext0 mt-1">
+					<span className="text-base font-super-mono text-subtext0 mt-1">
 						{isLoaded ? (
 							<>
 								@{user.name}
diff --git a/components/site/HomeUserHeader.tsx b/components/site/HomeUserHeader.tsx
index 10aec00..305e8d5 100644
--- a/components/site/HomeUserHeader.tsx
+++ b/components/site/HomeUserHeader.tsx
@@ -70,9 +70,9 @@ export function HomeLoggedInHeader() {
 	return (
 		<>
 			{/* <button onClick={()=>console.log(userPresence)}>debug this</button> */}
-			<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
+			<div className="page-container">
 				<div
-					className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 rounded-2xl bg-base/40 ring-1 ring-surface0/60 px-4 sm:px-6 py-4 sm:py-6 mt-6"
+					className="glass-soft flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 px-4 sm:px-6 py-4 sm:py-6 mt-6"
 					onContextMenu={(e) => {
 						if (e.button === 2) {
 							toast("[debug] reloading user pfp");
diff --git a/components/site/OutfitQuickChooser.tsx b/components/site/OutfitQuickChooser.tsx
index 0d273d4..bcab582 100644
--- a/components/site/OutfitQuickChooser.tsx
+++ b/components/site/OutfitQuickChooser.tsx
@@ -64,7 +64,7 @@ export function OutfitSelector({
 			onClick={() => setVisible(false)}
 		>
 			<div
-				className="relative w-full max-w-3xl sm:max-w-4xl mx-4 rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
+				className="panel-blur relative w-full max-w-3xl sm:max-w-4xl mx-4"
 				onClick={(event) => event.stopPropagation()}
 			>
 				<div className="flex flex-col gap-3 border-b border-surface0/60 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
diff --git a/components/site/QuickTopUI.tsx b/components/site/QuickTopUI.tsx
index 4cfafbb..935e0b3 100644
--- a/components/site/QuickTopUI.tsx
+++ b/components/site/QuickTopUI.tsx
@@ -124,7 +124,7 @@ export const QuickTopUI = React.memo(function () {
 			<div className="z-1000 fixed top-4 right-4 flex gap-2 items-center text-text">
 				<StupidHoverThing text="Change Outfit">
 					<button
-						className="rounded-full bg-surface0/70 ring-1 ring-surface1/60 flex items-center justify-center h-10 w-10 text-text shadow-sm transition hover:bg-surface1/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
+						className="rounded-full bg-base/40 ring-1 ring-surface1/60 backdrop-blur-lg flex items-center justify-center h-10 w-10 text-text shadow-lg transition hover:bg-base/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
 						onClick={() => {
 							setIsOutfitSelectorVisible((a) => !a);
 						}}
@@ -140,7 +140,7 @@ export const QuickTopUI = React.memo(function () {
 							: `You have ${robux.toLocaleString()} Robux`
 					}
 				>
-					<div className="rounded-full bg-surface0/70 ring-1 ring-surface1/60 flex items-center h-10 px-3 gap-2 text-text shadow-sm">
+					<div className="rounded-full bg-base/40 ring-1 ring-surface1/60 backdrop-blur-lg flex items-center h-10 px-3 gap-2 text-text shadow-lg">
 						<RobuxIcon className="w-5 h-5 text-text" />{" "}
 						{/* keep it text-text */}
 						<p className="text-sm font-super-mono tabular-nums">
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 7df9e62..2af0f0f 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
 	<div
 		ref={ref}
 		className={cn(
-			"rounded-xl border bg-card text-card-foreground shadow",
+			"panel-soft text-card-foreground shadow-sm",
 			className
 		)}
 		{...props}