diff --git a/src/components/svelte/ContactForm.svelte b/src/components/svelte/ContactForm.svelte
index 0c0f2e8..ead2224 100644
--- a/src/components/svelte/ContactForm.svelte
+++ b/src/components/svelte/ContactForm.svelte
@@ -5,12 +5,18 @@
   import IconCheck from '~icons/lucide/check-circle'
   import IconAlertCircle from '~icons/lucide/alert-circle'
 
+  interface Props {
+    sitekey: string
+  }
+
+  let { sitekey }: Props = $props()
+
   let formState = $state<'idle' | 'submitting' | 'success' | 'error'>('idle')
   let errorMessage = $state('')
   let turnstileWidgetId: string | null = $state(null)
   let turnstileContainer: HTMLElement
 
-  const TURNSTILE_SITEKEY = import.meta.env.PUBLIC_TURNSTILE_SITEKEY
+  const TURNSTILE_SITEKEY = sitekey
 
   onMount(() => {
     // Wait for Turnstile script to load
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d52444e..6d88ded 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -52,6 +52,7 @@ const education: TimelineEntry[] = [
 ]
 const featuredProjects = await getFeaturedProjects()
 const currentUrl = Astro.url;
+const turnstileSitekey = import.meta.env.PUBLIC_TURNSTILE_SITEKEY
 ---
 
 <Layout canonicalUrl={currentUrl}>
@@ -216,7 +217,7 @@ const currentUrl = Astro.url;
       <div class="mt-4">
         <div class="contact-card w-full rounded-xl border bg-card p-6 sm:p-8 shadow-md">
           <div class="mx-auto max-w-2xl">
-            <ContactForm client:load />
+            <ContactForm client:load sitekey={turnstileSitekey} />
           </div>
         </div>
       </div>