diff --git a/app/routes/captcha.tsx b/app/routes/captcha.tsx
index a9fb82a..f4e3a35 100644
--- a/app/routes/captcha.tsx
+++ b/app/routes/captcha.tsx
@@ -1,9 +1,38 @@
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader({
+  context,
+}: {
+  context: RequestContext;
+}): Promise<string> {
+  return context.env.TURNSTILE_SITEKEY;
+}
+
 export default function () {
   return (
-    <script
-      async
-      defer
-      src="https://challenges.cloudflare.com/turnstile/v0/api.js"
-    ></script>
+    <>
+      <div
+        className="cf-turnstile"
+        data-callback="returnToken"
+        data-error-callback="handleError"
+        data-sitekey={useLoaderData<typeof loader>()}
+      ></div>
+      <script>
+        {`
+          function returnToken(token) {
+            window.flutter_inappwebview.callHandler("onToken", token);
+          }
+  
+          function handleError(_error) {
+            window.flutter_inappwebview.callHandler("onToken", null);
+          }
+        `}
+      </script>
+      <script
+        async
+        defer
+        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+      ></script>
+    </>
   );
 }