diff --git a/web/src/routes/invite/+page.svelte b/web/src/routes/invite/+page.svelte
index 72b8e8105..c3cc4d183 100644
--- a/web/src/routes/invite/+page.svelte
+++ b/web/src/routes/invite/+page.svelte
@@ -15,6 +15,7 @@
 	import TriangleAlert from "$icon/triangle-alert";
 	import Settings from "$icon/settings";
 	import type { Did, Nsid } from "@atcute/lexicons/syntax";
+	import Card from "$lib/components/ui/Card.svelte";
 
 	const auth = getAuth();
 
@@ -57,9 +58,9 @@
 
 <Meta noindex title="Join a knot" />
 
-<div class="flex my-16 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="my-16 flex w-full items-center justify-center">
+	<Card
+		class="flex max-w-md flex-col items-center gap-4 rounded-sm border border-border-default p-8"
 	>
 		{#if !usable}
 			<TriangleAlert class="size-8 text-foreground-danger" aria-hidden="true" />
@@ -101,5 +102,5 @@
 				</Button>
 			{/if}
 		{/if}
-	</div>
+	</Card>
 </div>