diff --git a/.changeset/quiet-readers-beg.md b/.changeset/quiet-readers-beg.md
new file mode 100644
index 0000000..13a7883
--- /dev/null
+++ b/.changeset/quiet-readers-beg.md
@@ -0,0 +1,5 @@
+---
+"astro-turnstile": minor
+---
+
+Updated to use data attribute instead of comment
diff --git a/package/lib/components/TurnstileForm.astro b/package/lib/components/TurnstileForm.astro
index d484659..7c909f5 100644
--- a/package/lib/components/TurnstileForm.astro
+++ b/package/lib/components/TurnstileForm.astro
@@ -25,11 +25,11 @@ const {
 const siteUrl = Astro.site;
 ---
 
-<!-- Component: Turnstile -->
 <form
 	id="at-turnstile-captcha-form"
 	data-siteurl={siteUrl}
 	data-captcha={config.endpointPath}
+	data-turnstile-container
 	action={action}
 	method={method}
 	enctype={enctype}
diff --git a/package/lib/components/TurnstileWidget.astro b/package/lib/components/TurnstileWidget.astro
index 194bcc0..059e7c9 100644
--- a/package/lib/components/TurnstileWidget.astro
+++ b/package/lib/components/TurnstileWidget.astro
@@ -66,12 +66,12 @@ const {
 } = getStyleSettings(size);
 ---
 
-<!-- Component: Turnstile -->
 <div
 	id="at-turnstile-captcha"
 	data-sitekey={TURNSTILE_SITE_KEY}
 	data-theme={theme}
 	data-size={size}
+	data-turnstile-container
 >
 </div>
 
diff --git a/package/src/middleware.ts b/package/src/middleware.ts
index f4f09e8..36c157c 100644
--- a/package/src/middleware.ts
+++ b/package/src/middleware.ts
@@ -1,6 +1,6 @@
 import type { MiddlewareHandler } from "astro";
 
-const COMPONENT_IDENTIFIER = '<!-- Component: Turnstile -->';
+const COMPONENT_IDENTIFIER = 'data-turnstile-container';
 const TURNSTILE_SCRIPT = `
   <script 
     src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback" 
@@ -9,7 +9,6 @@ const TURNSTILE_SCRIPT = `
     id="turnstile-script">
   </script>`;
 
-// Max bytes to scan for component identifier before giving up
 const MAX_SCAN_BYTES = 16384; // 16KB
 let bytesScanned = 0;
 
@@ -50,6 +49,7 @@ function createFastScriptInjectionTransform(): TransformStream<string, string> {
 
       // Fast path: haven't found component yet
       if (!hasFoundComponent) {
+        // Look for the data attribute
         if (chunk.includes(COMPONENT_IDENTIFIER)) {
           hasFoundComponent = true;
           buffer = chunk;
@@ -61,19 +61,16 @@ function createFastScriptInjectionTransform(): TransformStream<string, string> {
         buffer += chunk;
       }
 
-      // Look for </head> only if we found the component
       const headCloseIndex = buffer.indexOf('</head>');
       if (headCloseIndex === -1) {
-        // If buffer is getting too large, flush it and give up
         if (buffer.length > MAX_SCAN_BYTES) {
           controller.enqueue(buffer);
           buffer = '';
-          hasInjected = true; // Prevent further processing
+          hasInjected = true;
         }
         return;
       }
 
-      // Inject the script
       const injectedContent = 
         buffer.slice(0, headCloseIndex) + 
         TURNSTILE_SCRIPT + 
@@ -88,7 +85,6 @@ function createFastScriptInjectionTransform(): TransformStream<string, string> {
       if (buffer) {
         controller.enqueue(buffer);
       }
-      // Reset static counter for next request
       bytesScanned = 0;
     }
   });