diff --git a/web/src/lib/components/ui/Turnstile.svelte b/web/src/lib/components/ui/Turnstile.svelte
index 98b37273d..eb0541500 100644
--- a/web/src/lib/components/ui/Turnstile.svelte
+++ b/web/src/lib/components/ui/Turnstile.svelte
@@ -9,6 +9,8 @@
 					container: HTMLElement,
 					options: {
 						sitekey: string;
+						size?: "normal" | "compact" | "flexible";
+						theme?: "light" | "dark" | "auto";
 						callback: (token: string) => void;
 						"expired-callback"?: () => void;
 						"error-callback"?: () => void;
@@ -63,9 +65,12 @@
 				const el = container;
 				const api = window.turnstile;
 				if (!el || !api) return;
+				const dark = getComputedStyle(el).colorScheme === "dark";
 				try {
 					widgetId = api.render(el, {
 						sitekey: siteKey,
+						size: "flexible",
+						theme: dark ? "dark" : "light",
 						callback: onToken,
 						"expired-callback": () => onExpire?.(),
 						"error-callback": () => onExpire?.()
@@ -90,5 +95,5 @@
 		Couldn't load the verification widget. Check your connection and try refreshing.
 	</p>
 {:else}
-	<div bind:this={container} class="min-h-16"></div>
+	<div bind:this={container} class="min-h-16 w-full"></div>
 {/if}