diff --git a/web/src/routes/verify/email/+page.svelte b/web/src/routes/verify/email/+page.svelte
index 4cbf7b4c4..9a5b001d7 100644
--- a/web/src/routes/verify/email/+page.svelte
+++ b/web/src/routes/verify/email/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from "$app/state";
 	import { VerificationError, verifyEmailByToken } from "$lib/api/emails";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import MailCheck from "$icon/mail-check";
 	import TriangleAlert from "$icon/triangle-alert";
 	import Settings from "$icon/settings";
@@ -36,9 +37,11 @@
 	});
 </script>
 
-<div class="flex min-h-64 w-full items-center justify-center">
-	<div
-		class="flex w-full max-w-md flex-col items-center gap-4 rounded-sm border border-border-default p-8 text-center"
+<div class="flex min-h-[70svh] w-full items-center justify-center px-4 py-8">
+	<Card
+		shadow
+		padding="none"
+		class="flex w-full max-w-md flex-col items-center gap-4 p-8 text-center"
 	>
 		{#if state.kind === "verifying"}
 			<span class="typography-paragraph-regular text-foreground-muted"
@@ -60,5 +63,5 @@
 			<p class="typography-paragraph-regular text-foreground-muted">{state.message}</p>
 			<Button icon={Settings} href="/settings/emails">Go to email settings</Button>
 		{/if}
-	</div>
+	</Card>
 </div>