diff --git a/package-lock.json b/package-lock.json
index 8e1099e9a5bd3b2..9431c067c969538 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
 				"@codingheads/sticky-header": "1.0.2",
 				"@expressive-code/plugin-collapsible-sections": "0.38.3",
 				"@iarna/toml": "2.2.5",
-				"@iconify-json/material-symbols": "1.2.13",
+				"@marsidev/react-turnstile": "1.1.0",
 				"@stoplight/json-schema-tree": "4.0.0",
 				"@types/hast": "3.0.4",
 				"@types/he": "1.2.3",
@@ -62,6 +62,7 @@
 				"puppeteer": "24.1.1",
 				"react": "19.0.0",
 				"react-dom": "19.0.0",
+				"react-icons": "5.4.0",
 				"react-markdown": "9.0.3",
 				"redirects-in-workers": "0.0.5",
 				"rehype": "13.0.2",
@@ -3258,16 +3259,6 @@
 			"dev": true,
 			"license": "ISC"
 		},
-		"node_modules/@iconify-json/material-symbols": {
-			"version": "1.2.13",
-			"resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.13.tgz",
-			"integrity": "sha512-7sVem5paCT87e1Hvk9tA2CHcmTSCwlJj6UlhouyNfgAqoC0W/Yj2vA9NFOdjviHgvoHT9kDCEfKxT5tpEMH6qA==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"dependencies": {
-				"@iconify/types": "*"
-			}
-		},
 		"node_modules/@iconify/tools": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-4.1.1.tgz",
@@ -3824,6 +3815,17 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@marsidev/react-turnstile": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@marsidev/react-turnstile/-/react-turnstile-1.1.0.tgz",
+			"integrity": "sha512-X7bP9ZYutDd+E+klPYF+/BJHqEyyVkN4KKmZcNRr84zs3DcMoftlMAuoKqNSnqg0HE7NQ1844+TLFSJoztCdSA==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "^17.0.2 || ^18.0.0 || ^19.0",
+				"react-dom": "^17.0.2 || ^18.0.0 || ^19.0"
+			}
+		},
 		"node_modules/@mdx-js/mdx": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.0.tgz",
@@ -16659,6 +16661,16 @@
 				"react": "^19.0.0"
 			}
 		},
+		"node_modules/react-icons": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
+			"integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
 		"node_modules/react-is": {
 			"version": "16.13.1",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 7ebcc4e85c54b4f..f619253b513cfb9 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
 		"@codingheads/sticky-header": "1.0.2",
 		"@expressive-code/plugin-collapsible-sections": "0.38.3",
 		"@iarna/toml": "2.2.5",
-		"@iconify-json/material-symbols": "1.2.13",
+		"@marsidev/react-turnstile": "1.1.0",
 		"@stoplight/json-schema-tree": "4.0.0",
 		"@types/hast": "3.0.4",
 		"@types/he": "1.2.3",
@@ -80,6 +80,7 @@
 		"puppeteer": "24.1.1",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
+		"react-icons": "5.4.0",
 		"react-markdown": "9.0.3",
 		"redirects-in-workers": "0.0.5",
 		"rehype": "13.0.2",
diff --git a/src/components/FeedbackPrompt.astro b/src/components/FeedbackPrompt.astro
deleted file mode 100644
index 892a5714ecbf3d6..000000000000000
--- a/src/components/FeedbackPrompt.astro
+++ /dev/null
@@ -1,231 +0,0 @@
----
-import { AstroIcon } from "~/components";
----
-
-<feedback-prompt class="not-content">
-	<div id="feedback-thumbs">
-		<h2>Was this helpful?</h2>
-		<div class="not-content">
-			<AstroIcon name="material-symbols:thumb-up-outline-rounded" title="Yes" />
-			<AstroIcon
-				name="material-symbols:thumb-down-outline-rounded"
-				title="No"
-			/>
-		</div>
-	</div>
-	<div id="feedback-yes" class="hidden">
-		<h2>What did you like?</h2>
-		<form>
-			<fieldset>
-				<div>
-					<input type="radio" id="accurate" value="accurate" name="reason" />
-					<label for="accurate">Accurate</label>
-				</div>
-				<div>
-					<input
-						type="radio"
-						id="easy-to-understand"
-						value="easy-to-understand"
-						name="reason"
-					/>
-					<label for="easy-to-understand">Easy to understand</label>
-				</div>
-				<div>
-					<input
-						type="radio"
-						id="solved-my-problem"
-						value="solved-my-problem"
-						name="reason"
-					/>
-					<label for="solved-my-problem">Solved my problem</label>
-				</div>
-				<div>
-					<input
-						type="radio"
-						id="helped-me-decide-to-use-the-product"
-						value="solved-my-problem"
-						name="reason"
-					/>
-					<label for="helped-me-decide-to-use-the-product"
-						>Helped me decide to use the product</label
-					>
-				</div>
-				<div>
-					<input type="radio" id="other-yes" value="other" name="reason" />
-					<label for="other-yes">Other</label>
-				</div>
-				<div>
-					<input
-						type="text"
-						placeholder="Tell us more about your experience."
-						id="info"
-						name="info"
-					/>
-				</div>
-				<input type="submit" value="Submit" disabled />
-			</fieldset>
-		</form>
-	</div>
-	<div id="feedback-no" class="hidden">
-		<h2>What went wrong?</h2>
-		<form>
-			<fieldset>
-				<div>
-					<input
-						type="radio"
-						id="hard-to-understand"
-						value="hard-to-understand"
-						name="reason"
-					/>
-					<label for="hard-to-understand">Hard to understand</label>
-				</div>
-				<div>
-					<input
-						type="radio"
-						id="incorrect-information"
-						value="incorrect-information"
-						name="reason"
-					/>
-					<label for="incorrect-information">Incorrect information</label>
-				</div>
-				<div>
-					<input
-						type="radio"
-						id="missing-the-information"
-						value="missing-the-information"
-						name="reason"
-					/>
-					<label for="missing-the-information">Missing the information</label>
-				</div>
-				<div>
-					<input type="radio" id="other-no" value="other" name="reason" />
-					<label for="other-no">Other</label>
-				</div>
-				<div>
-					<input
-						type="text"
-						placeholder="Tell us more about your experience."
-						id="info"
-						name="info"
-					/>
-				</div>
-				<input type="submit" value="Submit" disabled />
-			</fieldset>
-		</form>
-	</div>
-
-	<div id="feedback-thanks" class="hidden">
-		<h2>Thank you for helping improve Cloudflare's documentation!</h2>
-	</div>
-</feedback-prompt>
-
-<style>
-	fieldset {
-		padding-top: 0;
-		padding-left: 0;
-	}
-
-	label {
-		font-size: small;
-		color: var(--sl-color-gray-3);
-	}
-
-	input[type="submit"],
-	input::placeholder {
-		font-size: x-small;
-	}
-
-	h2 {
-		color: var(--sl-color-white);
-		font-size: var(--sl-text-h5);
-		font-weight: 600;
-		line-height: var(--sl-line-height-headings);
-		margin-bottom: 0.5rem;
-	}
-
-	[data-icon] {
-		cursor: pointer;
-		color: var(--sl-color-gray-3);
-		font-size: 1.5rem;
-		margin-right: 0.5rem;
-
-		&:hover {
-			color: var(--sl-color-text-accent);
-			border-color: var(--sl-color-text-accent);
-		}
-	}
-</style>
-
-<script>
-	class FeedbackPrompt extends HTMLElement {
-		connectedCallback() {
-			const icons = {
-				'[data-icon="material-symbols:thumb-up-outline-rounded"]':
-					"#feedback-yes",
-				'[data-icon="material-symbols:thumb-down-outline-rounded"]':
-					"#feedback-no",
-			};
-
-			const thumbsDiv = this.querySelector("#feedback-thumbs");
-			const thanksDiv = this.querySelector("#feedback-thanks");
-
-			if (!thumbsDiv || !thanksDiv) return;
-
-			for (const [button, questions] of Object.entries(icons)) {
-				this.querySelector(button)?.addEventListener("click", () => {
-					thumbsDiv.classList.add("hidden");
-
-					const questionsDiv = this.querySelector(questions);
-
-					if (!questionsDiv) return;
-
-					questionsDiv.classList.remove("hidden");
-
-					const form = questionsDiv.querySelector("form");
-
-					if (!form) return;
-
-					const reasons = form.querySelectorAll<HTMLInputElement>(
-						"input[type='radio']",
-					);
-
-					if (!reasons) return;
-
-					const submit = form.querySelector<HTMLInputElement>(
-						"input[type='submit']",
-					);
-
-					if (!submit) return;
-
-					reasons.forEach((reason) =>
-						reason.addEventListener(
-							"change",
-							() => {
-								submit.disabled = false;
-							},
-							{ once: true },
-						),
-					);
-
-					form.addEventListener("submit", async (e) => {
-						e.preventDefault();
-
-						const formData = new FormData(e.target as HTMLFormElement);
-						formData.set("page", window.location.pathname);
-						formData.set("option", questions.split("-")[1]);
-
-						fetch("https://feedback.developers.cloudflare.com", {
-							method: "POST",
-							body: formData,
-						});
-
-						questionsDiv.classList.add("hidden");
-						thanksDiv.classList.remove("hidden");
-					});
-				});
-			}
-		}
-	}
-
-	customElements.define("feedback-prompt", FeedbackPrompt);
-</script>
diff --git a/src/components/FeedbackPrompt.tsx b/src/components/FeedbackPrompt.tsx
new file mode 100644
index 000000000000000..1c1b3151686eb58
--- /dev/null
+++ b/src/components/FeedbackPrompt.tsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Turnstile } from "@marsidev/react-turnstile";
+import { MdOutlineThumbUp, MdOutlineThumbDown } from "react-icons/md";
+
+type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
+
+const questions = {
+	yes: Object.entries({
+		Accurate: "accurate",
+		"Easy to understand": "easy-to-understand",
+		"Solved my problem": "solved-my-problem",
+		"Helped me decide to use the product":
+			"helped-me-decide-to-use-the-product",
+		Other: "other-yes",
+	}),
+	no: Object.entries({
+		"Hard to understand": "hard-to-understand",
+		"Incorrect information": "incorrect-information",
+		"Missing the information": "missing-the-information",
+		Other: "other-no",
+	}),
+} as const;
+
+function Buttons({
+	setTitle,
+	setOption,
+}: {
+	setTitle: SetState<string>;
+	setOption: SetState<"yes" | "no" | undefined>;
+}) {
+	return (
+		<>
+			<button
+				onClick={() => {
+					setTitle("What did you like?");
+					setOption("yes");
+				}}
+				className="cursor-pointer bg-transparent"
+			>
+				<MdOutlineThumbUp className="text-sl text-2xl hover:text-accent" />
+			</button>
+			<button
+				onClick={() => {
+					setTitle("What went wrong?");
+					setOption("no");
+				}}
+				className="cursor-pointer bg-transparent"
+			>
+				<MdOutlineThumbDown className="text-sl text-2xl hover:text-accent" />
+			</button>
+		</>
+	);
+}
+
+function Form({
+	option,
+	setTitle,
+	setSubmitted,
+}: {
+	option?: "yes" | "no";
+	setTitle: SetState<string>;
+	setSubmitted: SetState<boolean>;
+}) {
+	if (!option) {
+		return null;
+	}
+
+	const [selectedReason, setSelectedReason] = useState(false);
+	const [passedTurnstile, setPassedTurnstile] = useState(false);
+
+	function submit(formData: FormData) {
+		formData.set("option", option!);
+
+		formData.set("page", document.location.pathname);
+		formData.set("referrer", document.referrer);
+
+		fetch("https://feedback.developers.cloudflare.com", {
+			method: "POST",
+			body: formData,
+		});
+
+		setTitle("Thank you for helping improve Cloudflare's documentation!");
+		setSubmitted(true);
+	}
+
+	return (
+		<form action={submit}>
+			{questions[option].map(([label, value]) => (
+				<label key={value} className="mb-2 block text-xs">
+					<input
+						type="radio"
+						name="reason"
+						value={value}
+						onChange={() => setSelectedReason(true)}
+						className="mr-2 align-middle"
+					/>
+					{label}
+				</label>
+			))}
+			<textarea
+				name="info"
+				placeholder="Tell us more about your experience."
+				className="mb-2 block resize-none text-xs"
+			/>
+			<Turnstile
+				siteKey="0x4AAAAAAA645TGhxiBMQ7Gu"
+				options={{ size: "compact" }}
+				onSuccess={() => setPassedTurnstile(true)}
+			/>
+			<input
+				type="submit"
+				value="Submit"
+				disabled={!selectedReason || !passedTurnstile}
+				className="mt-2"
+			/>
+		</form>
+	);
+}
+
+export default function FeedbackPrompt() {
+	const [title, setTitle] = useState("Was this helpful?");
+	const [option, setOption] = useState<"yes" | "no">();
+	const [submitted, setSubmitted] = useState(false);
+
+	return (
+		<div>
+			<h2>{title}</h2>
+			{!option && <Buttons setTitle={setTitle} setOption={setOption} />}
+			{!submitted && (
+				<Form setTitle={setTitle} setSubmitted={setSubmitted} option={option} />
+			)}
+		</div>
+	);
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 2e85b1a6cba5511..2ff2f54afcb5f41 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,7 +16,6 @@ export { default as Example } from "./Example.astro";
 export { default as ExternalResources } from "./ExternalResources.astro";
 export { default as Feature } from "./Feature.astro";
 export { default as FeatureTable } from "./FeatureTable.astro";
-export { default as FeedbackPrompt } from "./FeedbackPrompt.astro";
 export { default as Flex } from "./Flex.astro";
 export { default as GitHubCode } from "./GitHubCode.astro";
 export { default as Glossary } from "./Glossary.astro";
diff --git a/src/components/overrides/Footer.astro b/src/components/overrides/Footer.astro
index 56e0a8b90afd0f7..32a70d2f9539980 100644
--- a/src/components/overrides/Footer.astro
+++ b/src/components/overrides/Footer.astro
@@ -2,6 +2,7 @@
 import type { Props } from "@astrojs/starlight/props";
 import Default from "@astrojs/starlight/components/Footer.astro";
 import OneTrust from "../OneTrust.astro";
+import FeedbackPrompt from "../FeedbackPrompt.tsx";
 import { getEntry } from "astro:content";
 
 let links = {
@@ -124,7 +125,10 @@ if (
 			</div>
 		</>
 	) : (
-		<>
+		<div>
+			<div class="feedback-prompt">
+				<FeedbackPrompt client:idle />
+			</div>
 			<Default {...Astro.props} />
 			<div id="footer-links" class="flex flex-wrap items-center">
 				{Object.entries(links).map(([text, href]) => (
@@ -138,11 +142,29 @@ if (
 					</div>
 				)}
 			</div>
-		</>
+		</div>
 	)
 }
 
 <style>
+	.feedback-prompt {
+		h2 {
+			color: var(--sl-color-white);
+			font-size: var(--sl-text-h5);
+			font-weight: 600;
+			line-height: var(--sl-line-height-headings);
+			margin-bottom: 0.5rem;
+		}
+	}
+
+	@media (min-width: 72rem) {
+		html[data-has-toc] {
+			.feedback-prompt {
+				display: none;
+			}
+		}
+	}
+
 	.bleed {
 		box-shadow: 0 0 0 100vmax #001c43 !important;
 		clip-path: inset(0 -100vmax);
diff --git a/src/components/overrides/MarkdownContent.astro b/src/components/overrides/MarkdownContent.astro
index 2faf08705183917..a1ba7460cfa7b34 100644
--- a/src/components/overrides/MarkdownContent.astro
+++ b/src/components/overrides/MarkdownContent.astro
@@ -1,10 +1,7 @@
 ---
-import type { Props } from "@astrojs/starlight/props";
-import '@astrojs/starlight/style/markdown.css';
-
+import "@astrojs/starlight/style/markdown.css";
 import ImageZoom from "starlight-image-zoom/components/ImageZoom.astro";
 
-import { FeedbackPrompt } from "~/components";
 /*
     MIT License
 
@@ -28,50 +25,14 @@ import { FeedbackPrompt } from "~/components";
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 */
-const { tableOfContents } = Astro.props.entry.data;
 ---
 
-{
-	tableOfContents === false &&
-		<style>
-			:root {
-				--sl-content-width: 60rem;
-			}
-		</style>
-}
-
 <ImageZoom />
 <div class="sl-markdown-content">
-    <slot />
-	<div class="feedback-prompt-content">
-		<FeedbackPrompt />
-	</div>
+	<slot />
 </div>
-<style>
-	html {
-		.feedback-prompt-content {
-			margin-top: 1.5em !important;
-
-			@media (min-width: 1152px) {
-				& {
-					display: none;
-				}
-			}
-		}
-
-		&:not([data-has-toc]) {
-			.feedback-prompt-content {
-				display: block;
-			}
-		}
-
-		&[data-has-hero] {
-			.feedback-prompt-content {
-				display: none;
-			}
-		}
-	}
 
+<style>
 	/* Custom styles for heading anchor links. */
 	.sl-markdown-content :global(.heading-wrapper) {
 		--icon-size: 0.75em;
@@ -81,7 +42,9 @@ const { tableOfContents } = Astro.props.entry.data;
 
 	/* Headings after non-headings have more spacing. */
 	.sl-markdown-content
-		:global(:not(.heading-wrapper) + :is(.heading-wrapper):not(:where(.not-content *))) {
+		:global(
+			:not(.heading-wrapper) + :is(.heading-wrapper):not(:where(.not-content *))
+		) {
 		margin-top: 1.5em;
 	}
 
diff --git a/src/components/overrides/TableOfContents.astro b/src/components/overrides/TableOfContents.astro
index 4bb49c41d76c451..1924ca7dac90e9d 100644
--- a/src/components/overrides/TableOfContents.astro
+++ b/src/components/overrides/TableOfContents.astro
@@ -2,9 +2,9 @@
 import type { Props } from "@astrojs/starlight/props";
 import Default from "@astrojs/starlight/components/TableOfContents.astro";
 
-import { FeedbackPrompt } from "~/components";
+import FeedbackPrompt from "../FeedbackPrompt.tsx";
 ---
 
 <Default {...Astro.props} />
 <br />
-<FeedbackPrompt />
+<FeedbackPrompt client:idle />
diff --git a/src/input.css b/src/input.css
index cec9d0411aee284..ba7847b30dbdf10 100644
--- a/src/input.css
+++ b/src/input.css
@@ -1,4 +1,5 @@
 input,
+textarea,
 select {
 	background-color: var(--sl-color-bg-nav);
 	border-color: var(--sl-color-gray-5);
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 903fd6e0fda0ae4..9e397ed1a4ec7d3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -259,9 +259,3 @@ const recommendedSection = {
 		<FooterHeroBlock />
 	</div>
 </StarlightPage>
-
-<style>
-	html:not([data-has-sidebar]) {
-		--sl-content-width: 80rem;
-	}
-</style>
diff --git a/src/pages/products.astro b/src/pages/products.astro
index b10196ac8fa07d4..dfcada1e851e190 100644
--- a/src/pages/products.astro
+++ b/src/pages/products.astro
@@ -46,9 +46,3 @@ const props = {
 <StarlightPage {...props}>
 	<ProductCatalog products={productData} client:load />
 </StarlightPage>
-
-<style>
-	html:not([data-has-sidebar]) {
-		--sl-content-width: 75rem;
-	}
-</style>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index bb5c887a3578b1b..5d86484f1a9655b 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -156,6 +156,9 @@ export default {
 					600: "var(--tw-accent-600)",
 					900: "var(--tw-accent-900)",
 				},
+				sl: {
+					DEFAULT: "var(--sl-color-text)",
+				},
 				gray,
 				cl1,
 			},
diff --git a/tsconfig.json b/tsconfig.json
index 63047515cec887f..334d62860a9d670 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,9 @@
 		"target": "ESNext",
 		"paths": {
 			"~/*": ["src/*"]
-		}
+		},
+		"jsx": "react-jsx",
+		"jsxImportSource": "react"
 	},
 	"exclude": ["dist", "functions", "./worker", "tests"]
 }