diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index 999700b946..71ca3756f6 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -129,8 +129,7 @@ export default async function LoginPage() {
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
 								background: `url(/assets/images/background.png) center/cover no-repeat`,
-								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)",
+								boxShadow: "var(--shadow-card)",
 							}}
 						>
 							<div
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index 50ca72b1df..713bac2ee9 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -131,8 +131,7 @@ export default async function RegisterPage() {
 								borderColor:
 									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
 								background: `url(/assets/images/background.png) center/cover no-repeat`,
-								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)",
+								boxShadow: "var(--shadow-card)",
 							}}
 						>
 							<div
diff --git a/src/app/(site)/verify/page.tsx b/src/app/(site)/verify/page.tsx
index 20a808bac4..52f6fa7bae 100644
--- a/src/app/(site)/verify/page.tsx
+++ b/src/app/(site)/verify/page.tsx
@@ -36,8 +36,7 @@ function StatusCard({
 					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)",
+					boxShadow: "var(--shadow-card)",
 				}}
 			>
 				<div
diff --git a/src/components/home-section.tsx b/src/components/home-section.tsx
index 91670bb5e6..644904c0d7 100644
--- a/src/components/home-section.tsx
+++ b/src/components/home-section.tsx
@@ -34,17 +34,16 @@ export function SectionCard({
 			style={{
 				borderColor:
 					"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
-				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)",
+				boxShadow: "var(--shadow-card)",
 			}}
 		>
 			<div
 				className="flex items-center justify-between gap-3 border-b px-5 py-3.5"
 				style={{
 					borderColor:
-						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+						"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					background:
-						"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+						"color-mix(in srgb, var(--color-primary) 10%, var(--color-surface))",
 				}}
 			>
 				<div className="flex items-center gap-2.5">