diff --git a/client/index.html b/client/index.html
index c4bf09a9..dac5e9c6 100644
--- a/client/index.html
+++ b/client/index.html
@@ -27,7 +27,6 @@
     <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/manifest.json">
-    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-0P2RT3G484"></script>
     <script>
diff --git a/client/package-lock.json b/client/package-lock.json
index 99835269..3703fc14 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12,6 +12,7 @@
         "@ckeditor/ckeditor5-react": "^6.2.0",
         "@fortawesome/fontawesome-free": "^5.15.4",
         "@libretexts/insight-ckeditor5-build": "^1.0.0",
+        "@marsidev/react-turnstile": "^0.5.3",
         "@tailwindcss/typography": "^0.5.10",
         "@tanstack/react-query": "^4.36.1",
         "@tanstack/react-query-devtools": "^4.36.1",
@@ -2382,6 +2383,15 @@
         "@ckeditor/ckeditor5-widget": "40.2.0"
       }
     },
+    "node_modules/@marsidev/react-turnstile": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-0.5.3.tgz",
+      "integrity": "sha512-lx3p2/56esPt8Ksr37K8uhPt/K4Mg8xaIfCV8MPKmE/1X4aHesRqZok1+L1ySQwsdWoEe5+KJOhBXka8lFBwNg==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/client/package.json b/client/package.json
index 885ed36e..e4df2031 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,6 +13,7 @@
     "@ckeditor/ckeditor5-react": "^6.2.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@libretexts/insight-ckeditor5-build": "^1.0.0",
+    "@marsidev/react-turnstile": "^0.5.3",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
diff --git a/client/src/components/support/CreateTicketFlow.tsx b/client/src/components/support/CreateTicketFlow.tsx
index da71309f..508add39 100644
--- a/client/src/components/support/CreateTicketFlow.tsx
+++ b/client/src/components/support/CreateTicketFlow.tsx
@@ -19,8 +19,9 @@ import {
   SupportTicketPriorityOptions,
 } from "../../utils/supportHelpers";
 import { useTypedSelector } from "../../state/hooks";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import FileUploader from "../FileUploader";
+import TurnstileWidget from "../util/TurnstileWidget";
 
 interface CreateTicketFlowProps {
   isLoggedIn: boolean;
@@ -53,6 +54,7 @@ const CreateTicketFlow: React.FC<CreateTicketFlowProps> = ({ isLoggedIn }) => {
   const [autoCapturedURL, setAutoCapturedURL] = useState<boolean>(false);
   const [success, setSuccess] = useState(false);
   const [files, setFiles] = useState<File[]>([]);
+  const [turnstileToken, setTurnstileToken] = useState<string>("");
   const [challengePassed, setChallengePassed] = useState(false);
 
   useEffect(() => {
@@ -66,15 +68,9 @@ const CreateTicketFlow: React.FC<CreateTicketFlowProps> = ({ isLoggedIn }) => {
 
   useEffect(() => {
     if (isLoggedIn) return;
-    // @ts-ignore
-    turnstile.render("#turnstile-container", {
-      sitekey: "0x4AAAAAAAQ3wOi31ZpBiURp",
-      theme: "light",
-      callback: function (token: string) {
-        verifyTurnstile(token);
-      },
-    });
-  }, [isLoggedIn]);
+    if (!turnstileToken) return;
+    verifyTurnstile(turnstileToken);
+  }, [isLoggedIn, turnstileToken]);
 
   async function verifyTurnstile(token: string) {
     try {
@@ -448,7 +444,7 @@ const CreateTicketFlow: React.FC<CreateTicketFlowProps> = ({ isLoggedIn }) => {
           />
           {!isLoggedIn && (
             <div className="flex flex-row items-center justify-center mt-8">
-              <div className="cf-turnstile" id="turnstile-container"></div>
+              <TurnstileWidget onSuccess={(t) => setTurnstileToken(t)} />
             </div>
           )}
           <div className="flex flex-row justify-end mt-4">
diff --git a/client/src/components/util/TurnstileWidget.tsx b/client/src/components/util/TurnstileWidget.tsx
new file mode 100644
index 00000000..3974fec7
--- /dev/null
+++ b/client/src/components/util/TurnstileWidget.tsx
@@ -0,0 +1,13 @@
+import { Turnstile } from "@marsidev/react-turnstile";
+
+interface TurnstileWidgetProps {
+  onSuccess: (token: string) => void;
+}
+
+const TurnstileWidget = (props: TurnstileWidgetProps) => {
+  return (
+    <Turnstile siteKey="0x4AAAAAAAQ3wOi31ZpBiURp" onSuccess={props.onSuccess} />
+  );
+};
+
+export default TurnstileWidget;