diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index bbfb763..98f638b 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Bash(npm test)",
-      "Bash(export PATH=\"/c/Users/aaron/AppData/Local/mise/shims:$PATH\")"
+      "Bash(export PATH=\"/c/Users/aaron/AppData/Local/mise/shims:$PATH\")",
+      "WebFetch(domain:ehire-cms.webflow.io)"
     ]
   }
 }
diff --git a/changelog/v0.5.0.md b/changelog/v0.5.0.md
index 45c83de..097434f 100644
--- a/changelog/v0.5.0.md
+++ b/changelog/v0.5.0.md
@@ -11,3 +11,4 @@
 - Updated screenshots throughout the homepage
 - Google Tag Manager integration with custom events for search and document views
 - Auth page redesigned to match homepage dark theme with teal accents and logo
+- Homepage redesigned with floating UI mockups, scrolling feature marquee, 4x2 feature grid with circular icons, teal CTA, and 4-column footer
diff --git a/src/app/components/welcome-modal/changelog.ts b/src/app/components/welcome-modal/changelog.ts
index 0fbd1ae..53b81f5 100644
--- a/src/app/components/welcome-modal/changelog.ts
+++ b/src/app/components/welcome-modal/changelog.ts
@@ -25,6 +25,7 @@ export const CHANGELOG: ChangelogEntry[] = [
           'Updated screenshots throughout the homepage',
           'Google Tag Manager integration with custom events for search and document views',
           'Auth page redesigned to match homepage dark theme with teal accents and logo',
+          'Homepage redesigned with floating UI mockups, scrolling feature marquee, 4x2 feature grid with circular icons, teal CTA, and 4-column footer',
         ],
       },
     ],
diff --git a/src/app/features/home/home.component.css b/src/app/features/home/home.component.css
index 39055cf..474e586 100644
--- a/src/app/features/home/home.component.css
+++ b/src/app/features/home/home.component.css
@@ -25,7 +25,7 @@
   background-clip: text;
 }
 
-/* Hero screenshot */
+/* Hero screenshot (mobile fallback) */
 .hero-screenshot {
   animation: fadeUp 0.8s ease-out 0.2s both;
   position: relative;
@@ -57,32 +57,229 @@
   }
 }
 
-/* Feature cards */
+/* ── Hero Floating Mockups ── */
+.hero-mockups {
+  position: relative;
+  min-height: 340px;
+}
+
+.mockup-card {
+  position: absolute;
+  background: #0c0c10;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 0.75rem;
+  padding: 0.875rem;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.04),
+    0 16px 48px rgba(0, 0, 0, 0.5);
+  animation: floatMockup 6s ease-in-out infinite;
+}
+
+.mockup-results {
+  top: 0;
+  left: 0;
+  right: 20%;
+  transform: rotate(-1deg);
+  animation-delay: 0s;
+  z-index: 2;
+}
+
+.mockup-queries {
+  bottom: 0;
+  right: 0;
+  width: 52%;
+  transform: rotate(1.5deg);
+  animation-delay: -3s;
+  z-index: 3;
+}
+
+@keyframes floatMockup {
+  0%, 100% { transform: translateY(0) rotate(var(--rotate, -1deg)); }
+  50% { transform: translateY(-8px) rotate(var(--rotate, -1deg)); }
+}
+
+.mockup-results { --rotate: -1deg; }
+.mockup-queries { --rotate: 1.5deg; }
+
+.mockup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.mockup-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0;
+  font-size: 0.6875rem;
+  color: #8a8a9a;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.mockup-row:last-child {
+  border-bottom: none;
+}
+
+.mockup-ticker {
+  font-weight: 700;
+  color: #ffffff;
+  font-size: 0.6875rem;
+  width: 2.5rem;
+  flex-shrink: 0;
+}
+
+.mockup-badge {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  flex-shrink: 0;
+  text-transform: uppercase;
+}
+
+.mockup-badge-8k {
+  background: rgba(78, 201, 176, 0.15);
+  color: #4ec9b0;
+}
+
+.mockup-badge-10k {
+  background: rgba(97, 175, 239, 0.15);
+  color: #61afef;
+}
+
+.mockup-badge-def {
+  background: rgba(229, 192, 123, 0.15);
+  color: #e5c07b;
+}
+
+.mockup-desc {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.mockup-tag {
+  font-size: 0.5625rem;
+  padding: 0.0625rem 0.3125rem;
+  border-radius: 0.1875rem;
+  background: rgba(255, 255, 255, 0.06);
+  color: #707080;
+  flex-shrink: 0;
+}
+
+.mockup-date {
+  color: #505060;
+  font-size: 0.625rem;
+  flex-shrink: 0;
+}
+
+/* Mockup query sidebar items */
+.mockup-query-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0;
+  font-size: 0.6875rem;
+}
+
+.mockup-query-icon {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 0.125rem;
+  flex-shrink: 0;
+}
+
+.mockup-query-name {
+  flex: 1;
+  color: #b0b0b8;
+}
+
+.mockup-query-label {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  color: #505060;
+  text-transform: uppercase;
+}
+
+/* ── Scrolling Marquee ── */
+.marquee-track {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+}
+
+.marquee-content {
+  display: flex;
+  flex-shrink: 0;
+  animation: marquee 30s linear infinite;
+}
+
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee-content {
+    animation-play-state: paused;
+  }
+}
+
+.marquee-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 2rem;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #707080;
+}
+
+.marquee-item svg {
+  color: #4ec9b0;
+  flex-shrink: 0;
+}
+
+/* ── Feature cards ── */
 .feature-card {
   background: #0c0c10;
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 1rem;
   padding: 1.75rem;
-  transition: border-color 0.2s ease;
+  transition: border-color 0.2s ease, transform 0.2s ease;
 }
 
 .feature-card:hover {
-  border-color: rgba(255, 255, 255, 0.12);
+  border-color: rgba(78, 201, 176, 0.25);
+  transform: translateY(-2px);
 }
 
-.feature-icon {
+/* Circular teal-bordered icon */
+.feature-icon-circle {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 0.625rem;
-  background: rgba(78, 201, 176, 0.08);
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
+  border: 2px solid rgba(78, 201, 176, 0.3);
   color: #4ec9b0;
   margin-bottom: 1rem;
+  transition: border-color 0.2s ease;
+}
+
+.feature-card:hover .feature-icon-circle {
+  border-color: rgba(78, 201, 176, 0.6);
 }
 
-/* Showcase images */
+/* ── Showcase images ── */
 .showcase-image-wrap {
   animation: fadeUp 0.8s ease-out both;
 }
@@ -99,13 +296,13 @@
   transform: scale(1.02);
 }
 
-/* CTA card */
-.cta-card {
+/* ── CTA card (teal-tinted) ── */
+.cta-card-v2 {
   position: relative;
   border-radius: 1.25rem;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(78, 201, 176, 0.15);
   overflow: hidden;
-  background: #0c0c10;
+  background: linear-gradient(135deg, rgba(78, 201, 176, 0.06), rgba(78, 201, 176, 0.02));
   padding: 4rem 2rem;
 }
 
diff --git a/src/app/features/home/home.component.html b/src/app/features/home/home.component.html
index 04149c0..ffb8fa6 100644
--- a/src/app/features/home/home.component.html
+++ b/src/app/features/home/home.component.html
@@ -10,6 +10,7 @@
         </a>
         <div class="flex items-center gap-4">
           <a href="#features" class="hidden sm:inline text-sm text-[#707080] hover:text-white transition-colors no-underline">Features</a>
+          <a href="#how-it-works" class="hidden sm:inline text-sm text-[#707080] hover:text-white transition-colors no-underline">How It Works</a>
           <a routerLink="/auth" class="text-sm font-medium bg-[#4ec9b0] hover:bg-[#3db89f] text-[#060608] px-4 py-2 rounded-lg transition-colors no-underline">
             Sign In
           </a>
@@ -25,83 +26,221 @@
         <div class="hero-glow"></div>
       </div>
 
-      <div class="relative z-10 max-w-6xl mx-auto px-6 text-center">
-        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[#4ec9b0]/20 bg-[#4ec9b0]/5 text-[#4ec9b0] text-xs font-medium mb-8">
-          <span class="w-1.5 h-1.5 rounded-full bg-[#4ec9b0] animate-pulse" aria-hidden="true"></span>
-          Free during beta
-        </div>
+      <div class="relative z-10 max-w-6xl mx-auto px-6">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+          <!-- Left: Text -->
+          <div class="text-center lg:text-left">
+            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[#4ec9b0]/20 bg-[#4ec9b0]/5 text-[#4ec9b0] text-xs font-medium mb-8">
+              <span class="w-1.5 h-1.5 rounded-full bg-[#4ec9b0] animate-pulse" aria-hidden="true"></span>
+              Free during beta
+            </div>
 
-        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight leading-[1.08] mb-6">
-          Search and analyze<br />
-          SEC filings with <span class="hero-gradient-text">precision</span>
-        </h1>
+            <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-5xl xl:text-6xl font-bold text-white tracking-tight leading-[1.08] mb-6">
+              Search and analyze<br />
+              SEC filings with <span class="hero-gradient-text">precision</span>
+            </h1>
 
-        <p class="text-base md:text-lg text-[#707080] max-w-xl mx-auto mb-10 leading-relaxed">
-          A query-driven tool for searching, filtering, and reading EDGAR filings.
-          Built for analysts, researchers, and investors.
-        </p>
+            <p class="text-base md:text-lg text-[#707080] max-w-xl mx-auto lg:mx-0 mb-10 leading-relaxed">
+              A query-driven tool for searching, filtering, and reading EDGAR filings.
+              Built for analysts, researchers, and investors.
+            </p>
 
-        <div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-16 md:mb-24">
-          <a routerLink="/auth" class="inline-flex items-center gap-2 bg-[#4ec9b0] hover:bg-[#3db89f] text-[#060608] font-semibold px-7 py-3 rounded-lg text-sm transition-colors no-underline">
-            Get Started Free
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
-          </a>
-          <a href="#features" class="inline-flex items-center gap-2 text-[#707080] hover:text-white font-medium px-6 py-3 rounded-lg border border-white/8 hover:border-white/15 text-sm transition-colors no-underline">
-            See How It Works
-          </a>
-        </div>
+            <div class="flex flex-col sm:flex-row items-center lg:items-start justify-center lg:justify-start gap-3">
+              <a routerLink="/auth" class="inline-flex items-center gap-2 bg-[#4ec9b0] hover:bg-[#3db89f] text-[#060608] font-semibold px-7 py-3 rounded-lg text-sm transition-colors no-underline">
+                Get Started Free
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+              </a>
+              <a href="#features" class="inline-flex items-center gap-2 text-[#707080] hover:text-white font-medium px-6 py-3 rounded-lg border border-white/8 hover:border-white/15 text-sm transition-colors no-underline">
+                See How It Works
+              </a>
+            </div>
+          </div>
+
+          <!-- Right: Floating Mockups (desktop) -->
+          <div class="hidden lg:block relative hero-mockups" aria-hidden="true">
+            <!-- Filing Results Mockup -->
+            <div class="mockup-card mockup-results">
+              <div class="mockup-header">
+                <span class="text-xs text-[#707080]">Search Results</span>
+                <span class="text-xs text-[#4ec9b0]">3 filings</span>
+              </div>
+              <div class="mockup-row">
+                <span class="mockup-ticker">MSFT</span>
+                <span class="mockup-badge mockup-badge-8k">8-K</span>
+                <span class="mockup-desc">Current Report — Earnings Release</span>
+                <span class="mockup-tag">Presentation</span>
+                <span class="mockup-date">Mar 12</span>
+              </div>
+              <div class="mockup-row">
+                <span class="mockup-ticker">AAPL</span>
+                <span class="mockup-badge mockup-badge-10k">10-K</span>
+                <span class="mockup-desc">Annual Report — FY2025</span>
+                <span class="mockup-tag">XBRL</span>
+                <span class="mockup-date">Feb 28</span>
+              </div>
+              <div class="mockup-row">
+                <span class="mockup-ticker">TSLA</span>
+                <span class="mockup-badge mockup-badge-def">DEF 14A</span>
+                <span class="mockup-desc">Proxy Statement — Annual Meeting</span>
+                <span class="mockup-tag">Proxy</span>
+                <span class="mockup-date">Feb 15</span>
+              </div>
+            </div>
+
+            <!-- Query Sidebar Mockup -->
+            <div class="mockup-card mockup-queries">
+              <div class="mockup-header">
+                <span class="text-xs text-[#707080]">Queries</span>
+              </div>
+              <div class="mockup-query-item">
+                <span class="mockup-query-icon" style="background: #e06c75;"></span>
+                <span class="mockup-query-name">Recent Earnings</span>
+                <span class="mockup-query-label">REC</span>
+              </div>
+              <div class="mockup-query-item">
+                <span class="mockup-query-icon" style="background: #61afef;"></span>
+                <span class="mockup-query-name">IPO Filings</span>
+                <span class="mockup-query-label">IPO</span>
+              </div>
+              <div class="mockup-query-item">
+                <span class="mockup-query-icon" style="background: #e5c07b;"></span>
+                <span class="mockup-query-name">Insider Ownership</span>
+                <span class="mockup-query-label">OWN</span>
+              </div>
+            </div>
+          </div>
 
-        <!-- Hero Screenshot -->
-        <div class="hero-screenshot max-w-5xl mx-auto">
-          <img
-            src="/screenshots/filings-presentations.jpeg"
-            alt="Nullabroke filing search interface showing the query builder with 19 saved queries, SQL-like search syntax, and results for 8-K presentation filings"
-            class="w-full rounded-xl"
-            loading="eager"
-            width="1920"
-            height="1080"
-          />
         </div>
       </div>
     </section>
 
-    <!-- Stats Bar -->
-    <section class="py-12 md:py-16 border-y border-white/5" aria-label="Platform highlights">
-      <div class="max-w-5xl mx-auto px-6">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4">
-          <div class="text-center">
-            <div class="text-2xl md:text-3xl font-bold text-white mb-1">19+</div>
-            <div class="text-xs md:text-sm text-[#707080]">Pre-built Queries</div>
+    <!-- Scrolling Marquee -->
+    <section class="py-6 border-y border-white/5 overflow-hidden" aria-label="Feature highlights marquee">
+      <div class="marquee-track">
+        <div class="marquee-content" aria-hidden="false">
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.3-4.3"/><circle cx="11" cy="11" r="8"/></svg>
+            Query Builder
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
+            EDGAR Coverage
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>
+            XBRL Data
           </div>
-          <div class="text-center">
-            <div class="text-2xl md:text-3xl font-bold text-white mb-1">Full</div>
-            <div class="text-xs md:text-sm text-[#707080]">EDGAR Coverage</div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
+            Document Viewer
           </div>
-          <div class="text-center">
-            <div class="text-2xl md:text-3xl font-bold text-white mb-1">XBRL</div>
-            <div class="text-xs md:text-sm text-[#707080]">Data Viewer</div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 12h4"/><path d="M10 16h4"/></svg>
+            19 Blueprints
           </div>
-          <div class="text-center">
-            <div class="text-2xl md:text-3xl font-bold text-white mb-1">100%</div>
-            <div class="text-xs md:text-sm text-[#707080]">Free to Use</div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            Real-Time Data
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+            Save &amp; Pin
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
+            Mobile Ready
+          </div>
+        </div>
+        <!-- Duplicate for seamless loop -->
+        <div class="marquee-content" aria-hidden="true">
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.3-4.3"/><circle cx="11" cy="11" r="8"/></svg>
+            Query Builder
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
+            EDGAR Coverage
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>
+            XBRL Data
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
+            Document Viewer
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 12h4"/><path d="M10 16h4"/></svg>
+            19 Blueprints
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            Real-Time Data
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
+            Save &amp; Pin
+          </div>
+          <div class="marquee-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
+            Mobile Ready
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Stats + Image -->
+    <section class="py-16 md:py-24" aria-label="Platform highlights">
+      <div class="max-w-6xl mx-auto px-6">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
+          <div class="showcase-image-wrap">
+            <img
+              src="/screenshots/filings-presentations.jpeg"
+              alt="Nullabroke filing search interface showing the query builder with saved queries and search results"
+              class="showcase-img w-full"
+              loading="lazy"
+              width="1920"
+              height="1080"
+            />
+          </div>
+          <div>
+            <h2 class="text-2xl md:text-3xl font-bold text-white mb-8">The numbers speak</h2>
+            <div class="space-y-8">
+              <div>
+                <div class="text-4xl md:text-5xl font-bold text-[#4ec9b0] mb-1">19+</div>
+                <div class="text-sm text-[#707080]">Pre-built blueprint queries for common SEC searches — IPOs, earnings, insider trades, and more.</div>
+              </div>
+              <div>
+                <div class="text-4xl md:text-5xl font-bold text-[#4ec9b0] mb-1">100%</div>
+                <div class="text-sm text-[#707080]">Full EDGAR coverage. Every filing type, every company, every document — searchable and readable.</div>
+              </div>
+              <div>
+                <div class="text-4xl md:text-5xl font-bold text-[#4ec9b0] mb-1">4</div>
+                <div class="text-sm text-[#707080]">Dynamic parameter types — dropdowns, text inputs, number inputs, and tag selectors built into your queries.</div>
+              </div>
+            </div>
+            <a href="#features" class="inline-flex items-center gap-2 text-[#4ec9b0] hover:text-[#7ee8d0] text-sm font-medium mt-8 transition-colors no-underline">
+              Learn More
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            </a>
           </div>
         </div>
       </div>
     </section>
 
     <!-- Features Grid -->
-    <section id="features" class="py-16 md:py-24" aria-label="Features">
+    <section id="features" class="py-16 md:py-24 border-t border-white/5" aria-label="Features">
       <div class="max-w-6xl mx-auto px-6">
         <div class="text-center mb-12 md:mb-16">
           <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Built for SEC research</h2>
           <p class="text-base text-[#707080] max-w-lg mx-auto">Everything you need to search, filter, and read SEC filings — without the noise.</p>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
 
           <!-- Feature Card 1 -->
           <article class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon-circle">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.3-4.3"/><circle cx="11" cy="11" r="8"/></svg>
             </div>
             <h3 class="text-base font-semibold text-white mb-2">Query Builder</h3>
@@ -110,7 +249,7 @@ <h3 class="text-base font-semibold text-white mb-2">Query Builder</h3>
 
           <!-- Feature Card 2 -->
           <article class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon-circle">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 12h4"/><path d="M10 16h4"/></svg>
             </div>
             <h3 class="text-base font-semibold text-white mb-2">19 Blueprint Queries</h3>
@@ -119,7 +258,7 @@ <h3 class="text-base font-semibold text-white mb-2">19 Blueprint Queries</h3>
 
           <!-- Feature Card 3 -->
           <article class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon-circle">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/></svg>
             </div>
             <h3 class="text-base font-semibold text-white mb-2">Save & Organize</h3>
@@ -128,7 +267,7 @@ <h3 class="text-base font-semibold text-white mb-2">Save & Organize</h3>
 
           <!-- Feature Card 4 -->
           <article class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon-circle">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
             </div>
             <h3 class="text-base font-semibold text-white mb-2">Document Viewer</h3>
@@ -137,7 +276,7 @@ <h3 class="text-base font-semibold text-white mb-2">Document Viewer</h3>
 
           <!-- Feature Card 5 -->
           <article class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon-circle">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>
             </div>
             <h3 class="text-base font-semibold text-white mb-2">XBRL Data Viewer</h3>
@@ -146,19 +285,37 @@ <h3 class="text-base font-semibold text-white mb-2">XBRL Data Viewer</h3>
 
           <!-- Feature Card 6 -->
           <article class="feature-card">
-            <div class="feature-icon">
+            <div class="feature-icon-circle">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
             </div>
             <h3 class="text-base font-semibold text-white mb-2">Works on Any Device</h3>
             <p class="text-sm text-[#707080] leading-relaxed">Fully responsive on desktop, tablet, and mobile. Dark-themed for extended use. Sign in instantly with Google or GitHub.</p>
           </article>
 
+          <!-- Feature Card 7 -->
+          <article class="feature-card">
+            <div class="feature-icon-circle">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/></svg>
+            </div>
+            <h3 class="text-base font-semibold text-white mb-2">Dynamic Parameters</h3>
+            <p class="text-sm text-[#707080] leading-relaxed">Embed dropdowns, text fields, number inputs, and tag selectors directly in your queries. Change inputs without rewriting SQL.</p>
+          </article>
+
+          <!-- Feature Card 8 -->
+          <article class="feature-card">
+            <div class="feature-icon-circle">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+            </div>
+            <h3 class="text-base font-semibold text-white mb-2">Real-Time EDGAR Data</h3>
+            <p class="text-sm text-[#707080] leading-relaxed">Queries run directly against the SEC EDGAR full-text search API. Results reflect the latest filings as they are published.</p>
+          </article>
+
         </div>
       </div>
     </section>
 
     <!-- Showcase 1: Query Builder -->
-    <section class="py-16 md:py-24 border-t border-white/5" aria-label="Query builder showcase">
+    <section id="how-it-works" class="py-16 md:py-24 border-t border-white/5" aria-label="Query builder showcase">
       <div class="max-w-6xl mx-auto px-6">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
           <div>
@@ -296,7 +453,7 @@ <h3 class="text-2xl md:text-3xl font-bold text-white mb-4 leading-tight">Read fi
     <!-- Bottom CTA -->
     <section class="py-16 md:py-24" aria-label="Get started">
       <div class="max-w-6xl mx-auto px-6">
-        <div class="cta-card text-center">
+        <div class="cta-card-v2 text-center">
           <div class="cta-glow" aria-hidden="true"></div>
           <div class="relative z-10">
             <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to explore SEC filings?</h2>
@@ -312,15 +469,51 @@ <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to explore SEC
   </main>
 
   <!-- Footer -->
-  <footer class="border-t border-white/5 py-10">
-    <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-[#505060]">
-      <div class="flex items-center gap-2">
-        <img src="/logo.svg" alt="" class="w-5 h-5" width="20" height="20" aria-hidden="true" />
-        <span>Nullabroke</span>
+  <footer class="border-t border-white/5 py-12 md:py-16">
+    <div class="max-w-6xl mx-auto px-6">
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 mb-10">
+        <!-- Col 1: Logo + Tagline -->
+        <div class="col-span-2 md:col-span-1">
+          <div class="flex items-center gap-2 mb-3">
+            <img src="/logo.svg" alt="" class="w-6 h-6" width="24" height="24" aria-hidden="true" />
+            <span class="text-white font-semibold">Nullabroke</span>
+          </div>
+          <p class="text-sm text-[#505060] leading-relaxed">Search, explore, and analyze SEC filings with powerful query-driven workflows.</p>
+        </div>
+
+        <!-- Col 2: Quick Links -->
+        <div>
+          <h4 class="text-xs font-semibold text-[#707080] uppercase tracking-wider mb-4">Quick Links</h4>
+          <ul class="space-y-2.5 text-sm">
+            <li><a href="#features" class="text-[#505060] hover:text-[#b0b0b8] transition-colors no-underline">Features</a></li>
+            <li><a href="#how-it-works" class="text-[#505060] hover:text-[#b0b0b8] transition-colors no-underline">How It Works</a></li>
+            <li><a routerLink="/auth" class="text-[#505060] hover:text-[#b0b0b8] transition-colors no-underline">Sign In</a></li>
+          </ul>
+        </div>
+
+        <!-- Col 3: Support -->
+        <div>
+          <h4 class="text-xs font-semibold text-[#707080] uppercase tracking-wider mb-4">Support</h4>
+          <ul class="space-y-2.5 text-sm">
+            <li><a routerLink="/help" class="text-[#505060] hover:text-[#b0b0b8] transition-colors no-underline">Help</a></li>
+            <li><a href="https://github.com/nullabork/nullabroke-angular/issues" target="_blank" rel="noopener noreferrer" class="text-[#505060] hover:text-[#b0b0b8] transition-colors no-underline">GitHub Issues</a></li>
+          </ul>
+        </div>
+
+        <!-- Col 4: Stay Updated -->
+        <div>
+          <h4 class="text-xs font-semibold text-[#707080] uppercase tracking-wider mb-4">Stay Updated</h4>
+          <p class="text-sm text-[#505060] mb-4 leading-relaxed">Start searching SEC filings today — it's free.</p>
+          <a routerLink="/auth" class="inline-flex items-center gap-2 bg-[#4ec9b0] hover:bg-[#3db89f] text-[#060608] font-semibold px-5 py-2 rounded-lg text-xs transition-colors no-underline">
+            Get Started
+          </a>
+        </div>
       </div>
-      <div class="flex items-center gap-6">
-        <a routerLink="/help" class="hover:text-[#b0b0b8] transition-colors no-underline">Help</a>
-        <a href="https://github.com/nullabork/nullabroke-angular/issues" target="_blank" rel="noopener noreferrer" class="hover:text-[#b0b0b8] transition-colors no-underline">Issues</a>
+
+      <!-- Bottom bar -->
+      <div class="border-t border-white/5 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-[#505060]">
+        <span>&copy; 2025 Nullabroke. All rights reserved.</span>
+        <span>Powered by EDGAR</span>
       </div>
     </div>
   </footer>
diff --git a/src/app/features/home/home.component.spec.ts b/src/app/features/home/home.component.spec.ts
index 3da4018..b8f7e46 100644
--- a/src/app/features/home/home.component.spec.ts
+++ b/src/app/features/home/home.component.spec.ts
@@ -49,19 +49,28 @@ describe('HomeComponent', () => {
     expect(h1?.textContent).toContain('precision');
   });
 
-  it('should render the hero screenshot', () => {
+  it('should render hero floating mockups', () => {
     const el: HTMLElement = fixture.nativeElement;
-    const heroImg = el.querySelector('.hero-screenshot img') as HTMLImageElement;
-    expect(heroImg).toBeTruthy();
-    expect(heroImg.src).toContain('filings-presentations');
-    expect(heroImg.alt).toBeTruthy();
-    expect(heroImg.alt.length).toBeGreaterThan(10);
+    const mockups = el.querySelector('.hero-mockups');
+    expect(mockups).toBeTruthy();
+    const mockupResults = el.querySelector('.mockup-results');
+    expect(mockupResults).toBeTruthy();
+    const mockupQueries = el.querySelector('.mockup-queries');
+    expect(mockupQueries).toBeTruthy();
   });
 
-  it('should render all six feature cards', () => {
+  it('should render the scrolling marquee with 8 items', () => {
+    const el: HTMLElement = fixture.nativeElement;
+    const marqueeSection = el.querySelector('section[aria-label="Feature highlights marquee"]');
+    expect(marqueeSection).toBeTruthy();
+    const items = el.querySelectorAll('.marquee-content:first-child .marquee-item');
+    expect(items.length).toBe(8);
+  });
+
+  it('should render all eight feature cards', () => {
     const el: HTMLElement = fixture.nativeElement;
     const cards = el.querySelectorAll('.feature-card');
-    expect(cards.length).toBe(6);
+    expect(cards.length).toBe(8);
     const h3s = el.querySelectorAll('.feature-card h3');
     expect(h3s[0].textContent).toContain('Query Builder');
     expect(h3s[1].textContent).toContain('Blueprint Queries');
@@ -69,12 +78,20 @@ describe('HomeComponent', () => {
     expect(h3s[3].textContent).toContain('Document Viewer');
     expect(h3s[4].textContent).toContain('XBRL Data Viewer');
     expect(h3s[5].textContent).toContain('Works on Any Device');
+    expect(h3s[6].textContent).toContain('Dynamic Parameters');
+    expect(h3s[7].textContent).toContain('Real-Time EDGAR Data');
+  });
+
+  it('should use circular icon styling on feature cards', () => {
+    const el: HTMLElement = fixture.nativeElement;
+    const icons = el.querySelectorAll('.feature-icon-circle');
+    expect(icons.length).toBe(8);
   });
 
   it('should render showcase screenshots with alt text and lazy loading', () => {
     const el: HTMLElement = fixture.nativeElement;
     const showcaseImgs = el.querySelectorAll('.showcase-img') as NodeListOf<HTMLImageElement>;
-    expect(showcaseImgs.length).toBe(4);
+    expect(showcaseImgs.length).toBe(5);
     showcaseImgs.forEach(img => {
       expect(img.alt).toBeTruthy();
       expect(img.alt.length).toBeGreaterThan(10);
@@ -94,7 +111,7 @@ describe('HomeComponent', () => {
     expect(el.querySelector('main')).toBeTruthy();
     expect(el.querySelector('footer')).toBeTruthy();
     expect(el.querySelector('nav')).toBeTruthy();
-    expect(el.querySelectorAll('article').length).toBe(6);
+    expect(el.querySelectorAll('article').length).toBe(8);
   });
 
   it('should have aria labels on navigation and sections', () => {
@@ -113,14 +130,16 @@ describe('HomeComponent', () => {
     expect(ctaGlow?.getAttribute('aria-hidden')).toBe('true');
   });
 
-  it('should render the bottom CTA section', () => {
+  it('should render the teal-tinted CTA section', () => {
     const el: HTMLElement = fixture.nativeElement;
+    const ctaCard = el.querySelector('.cta-card-v2');
+    expect(ctaCard).toBeTruthy();
     const ctaHeading = el.querySelectorAll('h2');
     const ctaTexts = Array.from(ctaHeading).map(h => h.textContent);
     expect(ctaTexts.some(t => t?.includes('Ready to explore'))).toBe(true);
   });
 
-  it('should render footer with help and issues links', () => {
+  it('should render 4-column footer with quick links and support', () => {
     const el: HTMLElement = fixture.nativeElement;
     const footer = el.querySelector('footer');
     expect(footer).toBeTruthy();
@@ -128,14 +147,24 @@ describe('HomeComponent', () => {
     const hrefs = Array.from(footerLinks).map(a => a.getAttribute('href') || a.getAttribute('ng-reflect-router-link'));
     expect(hrefs.some(h => h?.includes('help'))).toBe(true);
     expect(hrefs.some(h => h?.includes('issues'))).toBe(true);
+    expect(footer?.textContent).toContain('Powered by EDGAR');
+    const h4s = footer!.querySelectorAll('h4');
+    expect(h4s.length).toBe(3);
   });
 
-  it('should render the stats bar with platform highlights', () => {
+  it('should render the stats section with teal numbers', () => {
     const el: HTMLElement = fixture.nativeElement;
     const statsSection = el.querySelector('section[aria-label="Platform highlights"]');
     expect(statsSection).toBeTruthy();
     expect(statsSection?.textContent).toContain('19+');
+    expect(statsSection?.textContent).toContain('100%');
     expect(statsSection?.textContent).toContain('EDGAR');
-    expect(statsSection?.textContent).toContain('Free');
+  });
+
+  it('should have How It Works nav link', () => {
+    const el: HTMLElement = fixture.nativeElement;
+    const howLink = el.querySelector('a[href="#how-it-works"]');
+    expect(howLink).toBeTruthy();
+    expect(howLink?.textContent).toContain('How It Works');
   });
 });