diff --git a/app/globals.css b/app/globals.css
index 49a5eae..85a44f4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -457,6 +457,7 @@
 /* ── Hero: Mosaic Layout ────────────────────────── */
 .hero--mosaic {
   position: relative;
+  display: block; /* override inherited 1fr 1fr split grid from .hero */
   min-height: calc(100vh - 56px);
 }
 
@@ -479,15 +480,27 @@
 
 /* Cell 1: spans 2 rows on the left */
 .hero__mosaic-cell--1 {
+  grid-column: 1;
   grid-row: 1 / 3;
 }
 
-/* Cell 2: wide, top right */
+/* Cell 2: wide, top right — spans 2 columns */
 .hero__mosaic-cell--2 {
   grid-column: 2 / 4;
+  grid-row: 1;
 }
 
-/* Remaining cells fill naturally */
+/* Cell 3: bottom middle */
+.hero__mosaic-cell--3 {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+/* Cell 4: bottom right */
+.hero__mosaic-cell--4 {
+  grid-column: 3;
+  grid-row: 2;
+}
 
 .hero__mosaic-overlay {
   position: absolute;
diff --git a/app/page.tsx b/app/page.tsx
index b3bc1d1..e8f84be 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -145,7 +145,7 @@ export default async function HomePage() {
     return (
       <div className="hero hero--mosaic">
         <div className="hero__mosaic-grid">
-          {heroData.slice(0, 6).map((img, i) => (
+          {heroData.slice(0, 4).map((img, i) => (
             <div key={i} className={`hero__mosaic-cell hero__mosaic-cell--${i + 1}`}>
               <Image
                 src={img.src}
diff --git a/docs/screenshots/hero-mosaic-home.png b/docs/screenshots/hero-mosaic-home.png
index ed1c26a..136605c 100644
Binary files a/docs/screenshots/hero-mosaic-home.png and b/docs/screenshots/hero-mosaic-home.png differ
diff --git a/docs/screenshots/theme-studio-home.png b/docs/screenshots/theme-studio-home.png
index ed1c26a..79141ca 100644
Binary files a/docs/screenshots/theme-studio-home.png and b/docs/screenshots/theme-studio-home.png differ