diff --git a/src/lib/components/CollagenSignup.svelte b/src/lib/components/CollagenSignup.svelte
new file mode 100644
index 00000000..d4f7eb3e
--- /dev/null
+++ b/src/lib/components/CollagenSignup.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import { page } from '$app/stores'
+	import NewsletterSignup from '$lib/components/NewsletterSignup.svelte'
+	import Banner from '$lib/components/Banner.svelte'
+	import Link from '$lib/components/Link.svelte'
+	import { detectAndStoreCollagenUid } from '$lib/collagen'
+
+	const campaign = 'sayno'
+
+	export let userHasUid = false
+	export let subscribeEmail = ''
+	export let newsletterEmail = ''
+	let submitted = false
+	let hideSharing = false
+
+	onMount(async () => {
+		userHasUid = detectAndStoreCollagenUid(campaign, $page.url.searchParams)
+		hideSharing = $page.url.searchParams.has('x002')
+		subscribeEmail = $page.url.searchParams.get('subscribe-email') || ''
+		if (userHasUid && subscribeEmail) {
+			newsletterEmail = subscribeEmail
+		}
+	})
+</script>
+
+{#if userHasUid && subscribeEmail}
+	<Banner id="join-subscribed">
+		{#if !submitted}
+			<strong>Welcome collage member!</strong> Click Subscribe to join the newsletter.
+		{:else}
+			<strong>Thanks.</strong> Scroll down if you feel active already!
+		{/if}
+	</Banner>
+
+	<div on:submit={() => (submitted = true)}>
+		<NewsletterSignup bind:email={newsletterEmail} />
+	</div>
+
+	{#if !hideSharing}
+		<p>
+			<strong>Help us grow:</strong>
+			<Link href="/{campaign}/share">Share the {campaign} campaign with your networks</Link>
+		</p>
+	{/if}
+{:else if userHasUid && !subscribeEmail}
+	<Banner id="join-error">
+		<strong>Sorry!</strong> We couldn't complete your subscription automatically. Please enter your email
+		below to subscribe.
+	</Banner>
+	<NewsletterSignup />
+{/if}
diff --git a/src/posts/join.md b/src/posts/join.md
index cee7f2a3..bf36df25 100644
--- a/src/posts/join.md
+++ b/src/posts/join.md
@@ -4,75 +4,16 @@ description: Sign up to join the PauseAI movement
 ---
 
 <script>
-    import { onMount, tick } from 'svelte'
-    import { page } from '$app/stores'
     import TallyEmbed from '$lib/components/TallyEmbed.svelte'
     import NewsletterSignup from '$lib/components/NewsletterSignup.svelte'
-    import Banner from '$lib/components/Banner.svelte'
-    import { detectAndStoreCollagenUid } from '$lib/collagen'
-
-    const campaign = 'sayno' // Campaign name for collagen tracking
+    import CollagenSignup from '$lib/components/CollagenSignup.svelte'
 
+    let newsletterEmail = ''
     let userHasUid = false
     let subscribeEmail = ''
-    let newsletterEmail = ''
-    let subscribeClicked = false
-    let hideSharing = false
-
-    onMount(async () => {
-        // Check for collagen UID in URL params - this sets the cookie and triggers auto-subscribe
-        userHasUid = detectAndStoreCollagenUid(campaign, $page.url.searchParams)
-
-        // Check if x002 experiment parameter is present (control = hide sharing)
-        hideSharing = $page.url.searchParams.has('x002')
-
-        // Get the email parameter if provided (should be present when userHasUid is true)
-        subscribeEmail = $page.url.searchParams.get('subscribe-email') || ''
-
-        // If user came from collagen email with uid, pre-fill the form
-        if (userHasUid && subscribeEmail) {
-            // Pre-fill the newsletter form
-            newsletterEmail = subscribeEmail
-        }
-    })
-
-    // Track when subscribe is clicked
-    function handleNewsletterClick(e) {
-        // Check if the clicked element is the submit button or inside the form
-        if (e.target.type === 'submit' || e.target.closest('button[type="submit"]')) {
-            subscribeClicked = true
-        }
-    }
 </script>
 
-{#if userHasUid && subscribeEmail}
-<Banner id="join-subscribed">
-{#if !subscribeClicked}
-<strong>Welcome collage member!</strong> Click Subscribe to join the newsletter.
-{:else}
-<strong>Thanks.</strong> Scroll down if you feel active already!
-{/if}
-</Banner>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-
-<div on:click={handleNewsletterClick}>
-<NewsletterSignup bind:email={newsletterEmail} />
-</div>
-
-{#if !hideSharing}
-
-<p><strong>Help us grow:</strong> <a href="/{campaign}/share">Share the {campaign} campaign with your networks</a></p>
-{/if}
-
-{:else if userHasUid && !subscribeEmail}
-<Banner id="join-error">
-<strong>Sorry!</strong> We couldn't complete your subscription automatically. Please enter your email below to subscribe.
-</Banner>
-<NewsletterSignup />
-{/if}
+<CollagenSignup bind:newsletterEmail bind:userHasUid bind:subscribeEmail />
 
 This is our nuclear moment.
 Rapid AI advancement represents one of history's most consequential and dangerous technological shifts.