diff --git a/apps/landing/src/app/_components/HeroSection.tsx b/apps/landing/src/app/_components/HeroSection.tsx
index de67abb..ecca079 100644
--- a/apps/landing/src/app/_components/HeroSection.tsx
+++ b/apps/landing/src/app/_components/HeroSection.tsx
@@ -11,14 +11,16 @@ const badges = [
 
 export function HeroSection() {
   return (
-    <section className="relative pt-20 pb-20 px-6">
+    <section className="relative pt-12 sm:pt-16 md:pt-20 lg:pt-24 pb-12 sm:pb-16 md:pb-20 px-4 sm: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">
+        {/* Beta Badge */}
+        <div className="inline-flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-[10px] sm:text-xs mb-5 sm: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">
+        {/* Heading */}
+        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 sm:mb-8 md:mb-10 leading-tight">
           AI Image Generation
           <br />
           <span className="bg-[linear-gradient(90deg,#818cf8_0%,#c084fc_25%,#f472b6_50%,#c084fc_75%,#818cf8_100%)] bg-[length:200%_100%] bg-clip-text text-transparent animate-gradient-shift-hero">
@@ -26,28 +28,35 @@ export function HeroSection() {
           </span>
         </h1>
 
-        <p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
+        {/* Subtitle */}
+        <p className="text-base sm:text-lg md:text-xl text-gray-400 mb-8 sm:mb-12 md:mb-16 lg:mb-20 max-w-2xl mx-auto">
           Generate images via API, SDK, CLI, Lab, or live URLs.
-          <br />
+          <br className="hidden sm:inline" />
+          <span className="sm:hidden"> </span>
           Production-ready CDN delivery in seconds.
         </p>
 
+        {/* Email Form */}
         <WaitlistEmailForm />
 
-        <p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
+        {/* Fine Print */}
+        <p className="text-xs sm:text-sm text-gray-500 mb-8 sm:mb-12 md:mb-16 lg:mb-20">
+          Free early access. No credit card required.
+        </p>
 
-        <div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
+        {/* Feature Badges */}
+        <div className="flex flex-wrap gap-2 sm:gap-3 md:gap-4 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 ${
+              className={`px-3 sm:px-4 md:px-6 py-1.5 sm:py-2 md:py-2.5 rounded-full text-xs sm:text-sm flex items-center gap-1.5 sm:gap-2 md: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'}`}
+                className={`w-3.5 sm:w-4 h-3.5 sm:h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
               />
               {badge.text}
             </span>
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index b19be4e..2524904 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -49,7 +49,7 @@ export default function RootLayout({
 
           {/* Header */}
           <header className="sticky top-0 z-10 bg-slate-900/80 backdrop-blur-md border-b border-white/5">
-            <nav className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center h-16">
+            <nav className="max-w-7xl mx-auto px-4 sm:px-6 py-2 sm:py-3 flex justify-between items-center h-12 sm:h-14 md:h-16">
               <div className="h-full flex items-center">
                 <Image
                   src={banatieLogo}
@@ -57,12 +57,12 @@ export default function RootLayout({
                   width={150}
                   height={40}
                   priority
-                  className="h-full w-auto object-contain"
+                  className="h-8 sm:h-10 md:h-full w-auto object-contain"
                 />
               </div>
               <a
                 href="#get-access"
-                className="text-sm text-gray-300 hover:text-white transition-colors"
+                className="text-xs sm:text-sm text-gray-300 hover:text-white transition-colors"
               >
                 Get Access
               </a>