diff --git a/apps/landing/src/app/_components/HeroSection.tsx b/apps/landing/src/app/_components/HeroSection.tsx
index 350160e..91c741d 100644
--- a/apps/landing/src/app/_components/HeroSection.tsx
+++ b/apps/landing/src/app/_components/HeroSection.tsx
@@ -1,10 +1,5 @@
-'use client';
-
-import { useState } from 'react';
-import { Zap, Globe, FlaskConical, AtSign, Link, Check } from 'lucide-react';
-import GlowEffect from './GlowEffect';
-import WaitlistPopup from './WaitlistPopup';
-import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';
+import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
+import { WaitlistEmailForm } from './WaitlistEmailForm';
 
 const styles = `
   .gradient-text {
@@ -35,44 +30,6 @@ const styles = `
     0%, 100% { opacity: 1; }
     50% { opacity: 0.5; }
   }
-
-  .hero-btn {
-    transition: all 0.2s ease;
-  }
-
-  .hero-btn.enabled {
-    cursor: pointer;
-  }
-
-  .hero-btn.disabled {
-    cursor: not-allowed;
-  }
-
-  .hero-btn.disabled:hover {
-    background: rgba(100, 100, 120, 0.4) !important;
-  }
-
-  .success-checkmark-ring {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  .success-checkmark-inner {
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 `;
 
 const badges = [
@@ -83,133 +40,52 @@ const badges = [
   { icon: Link, text: 'Prompt URLs', variant: 'cyan' },
 ];
 
-const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-
 export function HeroSection() {
-  const [email, setEmail] = useState('');
-  const [isInvalid, setIsInvalid] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const [showPopup, setShowPopup] = useState(false);
-
-  const isEnabled = email.length > 0 && isValidEmail(email);
-
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEmail(e.target.value);
-    if (isInvalid) setIsInvalid(false);
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isValidEmail(email)) {
-      setIsInvalid(true);
-      return;
-    }
-    setIsInvalid(false);
-
-    // Fire and forget - don't block popup on logging failure
-    submitEmail(email).catch(console.error);
-    setShowPopup(true);
-  };
-
-  const handlePopupClose = () => {
-    setShowPopup(false);
-    setIsSubmitted(true);
-  };
-
-  const handleWaitlistSubmit = (data: { selected: string[]; other: string }) => {
-    // Fire and forget - don't block on logging failure
-    submitWaitlistData(email, data).catch(console.error);
-  };
-
   return (
     <>
       <style dangerouslySetInnerHTML={{ __html: styles }} />
       <section className="relative pt-20 pb-20 px-6">
-      <div className="max-w-4xl mx-auto text-center">
-        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6">
-          <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
-          In Active Development
-        </div>
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6">
+            <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
+            In Active Development
+          </div>
 
-        <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
-          AI Image Generation
-          <br />
-          <span className="gradient-text">Inside Your Workflow</span>
-        </h1>
+          <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
+            AI Image Generation
+            <br />
+            <span className="gradient-text">Inside Your Workflow</span>
+          </h1>
 
-        <p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
-          Generate images via API, SDK, CLI, Lab, or live URLs.
-          <br />
-          Production-ready CDN delivery in seconds.
-        </p>
+          <p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
+            Generate images via API, SDK, CLI, Lab, or live URLs.
+            <br />
+            Production-ready CDN delivery in seconds.
+          </p>
 
-        <GlowEffect>
-          {isSubmitted ? (
-            <div
-              className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"
-              style={{ background: 'rgba(10, 6, 18, 0.95)' }}
-            >
-              <div className="success-checkmark-ring">
-                <div className="success-checkmark-inner">
-                  <Check className="w-3 h-3 text-white" strokeWidth={3} />
-                </div>
-              </div>
-              <span className="text-white font-medium">Done! You're in the list</span>
-            </div>
-          ) : (
-            <form
-              onSubmit={handleSubmit}
-              className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
-              style={{ background: 'rgba(10, 6, 18, 0.95)' }}
-            >
-              <input
-                type="email"
-                value={email}
-                onChange={handleEmailChange}
-                placeholder="your@email.com"
-                className={`flex-1 px-4 py-3 bg-transparent border-none rounded-md outline-none placeholder:text-white/40 focus:bg-white/[0.03] ${
-                  isInvalid ? 'text-red-400' : 'text-white'
-                }`}
-              />
-              <button
-                type="submit"
-                disabled={!isEnabled}
-                className={`hero-btn px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-md text-white font-semibold transition-all whitespace-nowrap ${
-                  isEnabled ? 'enabled hover:from-indigo-600 hover:to-purple-600' : 'disabled'
+          <WaitlistEmailForm />
+
+          <p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
+
+          <div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
+            {badges.map((badge, i) => (
+              <span
+                key={i}
+                className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm flex items-center gap-2 sm:gap-2.5 whitespace-nowrap ${
+                  badge.variant === 'cyan'
+                    ? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
+                    : 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
                 }`}
               >
-                Get Early Access
-              </button>
-            </form>
-          )}
-        </GlowEffect>
-
-        <p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
-
-        <div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
-          {badges.map((badge, i) => (
-            <span
-              key={i}
-              className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm flex items-center gap-2 sm:gap-2.5 whitespace-nowrap ${
-                badge.variant === 'cyan'
-                  ? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
-                  : 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
-              }`}
-            >
-              <badge.icon
-                className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
-              />
-              {badge.text}
-            </span>
-          ))}
+                <badge.icon
+                  className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
+                />
+                {badge.text}
+              </span>
+            ))}
+          </div>
         </div>
-      </div>
-      <WaitlistPopup
-        isOpen={showPopup}
-        onClose={handlePopupClose}
-        onSubmit={handleWaitlistSubmit}
-      />
-    </section>
+      </section>
     </>
   );
 }
diff --git a/apps/landing/src/app/_components/WaitlistEmailForm.tsx b/apps/landing/src/app/_components/WaitlistEmailForm.tsx
new file mode 100644
index 0000000..d882a61
--- /dev/null
+++ b/apps/landing/src/app/_components/WaitlistEmailForm.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import { useState } from 'react';
+import { Check } from 'lucide-react';
+import GlowEffect from './GlowEffect';
+import WaitlistPopup from './WaitlistPopup';
+import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';
+
+const styles = `
+  .hero-btn {
+    transition: all 0.2s ease;
+  }
+
+  .hero-btn.enabled {
+    cursor: pointer;
+  }
+
+  .hero-btn.disabled {
+    cursor: not-allowed;
+  }
+
+  .hero-btn.disabled:hover {
+    background: rgba(100, 100, 120, 0.4) !important;
+  }
+
+  .success-checkmark-ring {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
+    border: 1px solid rgba(34, 197, 94, 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .success-checkmark-inner {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
+export function WaitlistEmailForm() {
+  const [email, setEmail] = useState('');
+  const [isInvalid, setIsInvalid] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+
+  const isEnabled = email.length > 0 && isValidEmail(email);
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    if (isInvalid) setIsInvalid(false);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isValidEmail(email)) {
+      setIsInvalid(true);
+      return;
+    }
+    setIsInvalid(false);
+
+    submitEmail(email).catch(console.error);
+    setShowPopup(true);
+  };
+
+  const handlePopupClose = () => {
+    setShowPopup(false);
+    setIsSubmitted(true);
+  };
+
+  const handleWaitlistSubmit = (data: { selected: string[]; other: string }) => {
+    submitWaitlistData(email, data).catch(console.error);
+  };
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: styles }} />
+      <GlowEffect>
+        {isSubmitted ? (
+          <div
+            className="flex items-center justify-center gap-3 px-4 py-3 rounded-[10px]"
+            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
+          >
+            <div className="success-checkmark-ring">
+              <div className="success-checkmark-inner">
+                <Check className="w-3 h-3 text-white" strokeWidth={3} />
+              </div>
+            </div>
+            <span className="text-white font-medium">Done! You're in the list</span>
+          </div>
+        ) : (
+          <form
+            onSubmit={handleSubmit}
+            className="flex flex-col sm:flex-row gap-2 rounded-[10px] p-1.5 sm:pl-3"
+            style={{ background: 'rgba(10, 6, 18, 0.95)' }}
+          >
+            <input
+              type="email"
+              value={email}
+              onChange={handleEmailChange}
+              placeholder="your@email.com"
+              className={`flex-1 px-4 py-3 bg-transparent border-none rounded-md outline-none placeholder:text-white/40 focus:bg-white/[0.03] ${
+                isInvalid ? 'text-red-400' : 'text-white'
+              }`}
+            />
+            <button
+              type="submit"
+              disabled={!isEnabled}
+              className={`hero-btn px-6 py-3 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-md text-white font-semibold transition-all whitespace-nowrap ${
+                isEnabled ? 'enabled hover:from-indigo-600 hover:to-purple-600' : 'disabled'
+              }`}
+            >
+              Get Early Access
+            </button>
+          </form>
+        )}
+      </GlowEffect>
+      <WaitlistPopup isOpen={showPopup} onClose={handlePopupClose} onSubmit={handleWaitlistSubmit} />
+    </>
+  );
+}