diff --git a/src/app/(site)/settings/page.tsx b/src/app/(site)/settings/page.tsx
index 2697aa42..b4071599 100644
--- a/src/app/(site)/settings/page.tsx
+++ b/src/app/(site)/settings/page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { updateMotto } from "@/actions/user-settings";
+import { SectionCard } from "@/components/home-section";
 import { Reveal } from "@/components/motion-reveal";
 import { auth } from "@/lib/auth";
 import { db, User } from "@/lib/db";
@@ -47,18 +48,19 @@ export default async function SettingsPage() {
 			{/* Header */}
 			<Reveal>
 				<div
-					className="relative overflow-hidden rounded-xl border px-5 py-4"
+					className="relative overflow-hidden rounded-2xl border px-5 py-4"
 					style={{
 						background:
 							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
 						backdropFilter: "blur(14px)",
+						WebkitBackdropFilter: "blur(14px)",
 						borderColor:
 							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
 				>
 					<div className="flex items-center gap-3">
 						<div
-							className="w-10 h-10 rounded-xl flex items-center justify-center"
+							className="flex h-10 w-10 items-center justify-center rounded-xl"
 							style={{
 								background:
 									"color-mix(in srgb, var(--color-primary) 14%, transparent)",
@@ -95,227 +97,143 @@ export default async function SettingsPage() {
 
 			{/* Profile card */}
 			<Reveal delay={0.05}>
-				<div
-					className="overflow-hidden rounded-xl border card-premium"
-					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
+				<SectionCard
+					title={t("publicProfile")}
+					icon="/assets/images/icons/navigation/me.png"
+					bodyClassName="p-5 flex items-center gap-5"
 				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background:
-								"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-						}}
-					>
-						<Image
-							src="/assets/images/icons/navigation/me.png"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
+					<div className="shrink-0">
+						<div
+							className="overflow-hidden rounded-xl border"
+							style={{
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 15%, transparent)",
+							}}
 						>
-							{t("publicProfile")}
-						</h2>
-					</div>
-					<div
-						className="p-5 flex items-center gap-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
-					>
-						<div className="shrink-0">
-							<div
-								className="rounded-xl overflow-hidden border"
-								style={{
-									borderColor:
-										"color-mix(in srgb, var(--color-primary) 15%, transparent)",
-								}}
-							>
-								<Image
-									src={avatar}
-									alt={`${user.username} avatar`}
-									width={80}
-									height={120}
-									className="block"
-									unoptimized
-								/>
-							</div>
-						</div>
-						<div className="min-w-0 flex-1">
-							<h3
-								className="text-base font-extrabold"
-								style={{ color: "var(--color-text-readable)" }}
-							>
-								{user.username}
-							</h3>
-							<p
-								className="text-sm mt-0.5"
-								style={{ color: "var(--color-text-muted)" }}
-							>
-								{user.motto || (
-									<span style={{ fontStyle: "italic", opacity: 0.5 }}>
-										{t("noMotto")}
-									</span>
-								)}
-							</p>
-							<p
-								className="text-xs mt-1.5 font-medium"
-								style={{
-									color:
-										"color-mix(in srgb, var(--color-text-muted) 70%, transparent)",
-								}}
-							>
-								{user.mail || t("noEmail")}
-							</p>
+							<Image
+								src={avatar}
+								alt={`${user.username} avatar`}
+								width={80}
+								height={120}
+								className="block"
+								unoptimized
+							/>
 						</div>
 					</div>
-				</div>
+					<div className="min-w-0 flex-1">
+						<h3
+							className="text-base font-extrabold"
+							style={{ color: "var(--color-text-readable)" }}
+						>
+							{user.username}
+						</h3>
+						<p
+							className="text-sm mt-0.5"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							{user.motto || (
+								<span style={{ fontStyle: "italic", opacity: 0.5 }}>
+									{t("noMotto")}
+								</span>
+							)}
+						</p>
+						<p
+							className="text-xs mt-1.5 font-medium"
+							style={{
+								color:
+									"color-mix(in srgb, var(--color-text-muted) 70%, transparent)",
+							}}
+						>
+							{user.mail || t("noEmail")}
+						</p>
+					</div>
+				</SectionCard>
 			</Reveal>
 
 			{/* Motto form */}
 			<Reveal delay={0.1}>
-				<div
-					className="overflow-hidden rounded-xl border"
-					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
+				<SectionCard
+					title={t("changeMotto")}
+					icon="/assets/images/icons/star.gif"
+					bodyClassName="p-5"
 				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background:
-								"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
-						}}
+					<p
+						className="text-xs mb-4"
+						style={{ color: "var(--color-text-muted)" }}
 					>
-						<Image
-							src="/assets/images/icons/star.gif"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
+						{t("changeMottoSubtitle")}
+					</p>
+					<form
+						action={updateMotto}
+						className="flex flex-col gap-3"
+						style={{ maxWidth: 520 }}
+					>
+						<input
+							name="motto"
+							defaultValue={user.motto}
+							maxLength={127}
+							placeholder={t("mottoPlaceholder")}
+							aria-label="Motto"
+							className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
+							style={{
+								backgroundColor: "var(--color-background)",
+								color: "var(--color-text-readable)",
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+							}}
 						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
-						>
-							{t("changeMotto")}
-						</h2>
-					</div>
-					<div
-						className="p-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
-					>
-						<p
-							className="text-xs mb-4"
-							style={{ color: "var(--color-text-muted)" }}
-						>
-							{t("changeMottoSubtitle")}
-						</p>
-						<form
-							action={updateMotto}
-							className="flex flex-col gap-3"
-							style={{ maxWidth: 520 }}
-						>
-							<input
-								name="motto"
-								defaultValue={user.motto}
-								maxLength={127}
-								placeholder={t("mottoPlaceholder")}
-								aria-label="Motto"
-								className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
+						<div>
+							<button
+								type="submit"
+								className="btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-5 py-2.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
 								style={{
-									backgroundColor: "var(--color-background)",
-									color: "var(--color-text-readable)",
-									borderColor:
-										"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+									background: "var(--color-primary)",
+									color: "var(--color-primary-foreground)",
+									boxShadow:
+										"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
 								}}
-							/>
-							<div>
-								<button
-									type="submit"
-									className="btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-5 py-2.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
-									style={{
-										background: "var(--color-primary)",
-										color: "var(--color-primary-foreground)",
-										boxShadow:
-											"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
-									}}
-								>
-									{t("saveMotto")}
-								</button>
-							</div>
-						</form>
-					</div>
-				</div>
+							>
+								{t("saveMotto")}
+							</button>
+						</div>
+					</form>
+				</SectionCard>
 			</Reveal>
 
 			{/* Security card */}
 			<Reveal delay={0.15}>
-				<div
-					className="overflow-hidden rounded-xl border"
-					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-					}}
+				<SectionCard
+					title={t("securityTitle")}
+					icon="/assets/images/icons/navigation/goody.png"
+					bodyClassName="p-5"
 				>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
+					<p
+						className="text-xs mb-4"
+						style={{ color: "var(--color-text-muted)" }}
+					>
+						{t("securityDescription")}
+					</p>
+					<Link
+						href="/settings/2fa"
+						className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
 						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+							color: "var(--color-text-readable)",
 							background:
-								"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+								"color-mix(in srgb, var(--color-surface) 50%, transparent)",
 						}}
 					>
-						<Image
-							src="/assets/images/icons/navigation/goody.png"
-							alt=""
-							width={18}
-							height={18}
-							unoptimized
-						/>
-						<h2
-							className="text-sm font-bold text-white"
-							style={{ fontFamily: "var(--font-nunito)" }}
-						>
-							{t("securityTitle")}
-						</h2>
-					</div>
-					<div
-						className="p-5"
-						style={{ backgroundColor: "var(--color-surface)" }}
-					>
-						<p
-							className="text-xs mb-4"
-							style={{ color: "var(--color-text-muted)" }}
-						>
-							{t("securityDescription")}
-						</p>
-						<Link
-							href="/settings/2fa"
-							className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
-							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
-								color: "var(--color-text-readable)",
-								background:
-									"color-mix(in srgb, var(--color-surface) 50%, transparent)",
-							}}
-						>
-							{t("twoFactorLink")}
-						</Link>
-					</div>
-				</div>
+						{t("twoFactorLink")}
+					</Link>
+				</SectionCard>
 			</Reveal>
 
 			{/* Sessions link */}
 			<Reveal delay={0.2}>
 				<Link
 					href="/settings/sessions"
-					className="block overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
+					className="block overflow-hidden rounded-2xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
 					style={{
 						borderColor:
 							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
@@ -327,7 +245,7 @@ export default async function SettingsPage() {
 					>
 						<div className="flex items-center gap-3">
 							<div
-								className="w-10 h-10 rounded-xl flex items-center justify-center"
+								className="flex h-10 w-10 items-center justify-center rounded-xl"
 								style={{
 									background:
 										"color-mix(in srgb, var(--color-primary) 14%, transparent)",
diff --git a/src/app/(site)/verify/page.tsx b/src/app/(site)/verify/page.tsx
index 5b3eef70..20a808ba 100644
--- a/src/app/(site)/verify/page.tsx
+++ b/src/app/(site)/verify/page.tsx
@@ -20,38 +20,56 @@ function StatusCard({
 	children: React.ReactNode;
 	color: string;
 }) {
-	const gradientMap: Record<string, string> = {
-		green:
-			"linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
-		yellow:
-			"linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
-		red: "linear-gradient(140deg, #3A0F0A 0%, #4A1A0F 20%, #5A2515 40%, #6A301B 60%, #7A3B20 75%, #6A301A 90%, #5A2514 100%)",
-		blue: "linear-gradient(140deg, #0A1A3A 0%, #0F254A 20%, #15305A 40%, #1B3B6A 60%, #20467A 75%, #1A3B6A 90%, #14305A 100%)",
+	const tintMap: Record<string, string> = {
+		green: "#16a34a",
+		yellow: "#d97706",
+		red: "#dc2626",
+		blue: "#2563eb",
 	};
+	const tint = tintMap[color] ?? tintMap.blue;
 
 	return (
 		<main className="flex min-h-[60vh] items-center justify-center px-4">
 			<div
-				className="w-full max-w-md overflow-hidden rounded-xl border"
+				className="w-full max-w-md overflow-hidden rounded-2xl border"
 				style={{
 					borderColor:
 						"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					backgroundColor: "var(--color-surface)",
+					boxShadow:
+						"0 1px 2px color-mix(in srgb, var(--color-text-muted) 12%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
 				}}
 			>
 				<div
-					className="flex items-center gap-2.5 px-5 py-4"
-					style={{ background: gradientMap[color] ?? gradientMap.blue }}
+					className="flex items-center gap-2.5 border-b px-5 py-4"
+					style={{
+						background: `color-mix(in srgb, ${tint} 12%, var(--color-surface))`,
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					}}
 				>
-					<span className="text-white">{icon}</span>
-					<h1 className="text-sm font-bold text-white">{title}</h1>
+					<span
+						className="flex h-7 w-7 items-center justify-center rounded-lg"
+						style={{
+							background: `color-mix(in srgb, ${tint} 18%, transparent)`,
+							color: tint,
+						}}
+					>
+						{icon}
+					</span>
+					<h1
+						className="text-sm font-bold tracking-tight"
+						style={{ color: "var(--color-text-readable)" }}
+					>
+						{title}
+					</h1>
 				</div>
 				<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
 					<div
 						className="flex h-16 w-16 items-center justify-center rounded-full"
 						style={{
-							background:
-								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							background: `color-mix(in srgb, ${tint} 12%, transparent)`,
+							color: tint,
 						}}
 					>
 						{icon}