diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 59ede7d..8c6e4a9 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -203,62 +203,42 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
 }
 
 function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[] }) {
-  const totalPages = Math.ceil(Math.min(articles.length, 12) / 3);
+  const pool = articles.slice(0, 5);
   const hasGallery = galleryImages && galleryImages.length > 0;
-  const totalWithGallery = totalPages + (hasGallery ? 1 : 0);
+  const total = pool.length + (hasGallery ? 1 : 0);
   const [page, setPage] = useState(0);
   const [paused, setPaused] = useState(false);
 
   const next = useCallback(() => {
-    setPage((p) => (p + 1) % totalWithGallery);
-  }, [totalWithGallery]);
+    setPage((p) => (p + 1) % total);
+  }, [total]);
 
   useEffect(() => {
-    if (paused || totalWithGallery <= 1) return;
+    if (paused || total <= 1) return;
     const timer = setInterval(next, 8000);
     return () => clearInterval(timer);
-  }, [paused, next, totalWithGallery]);
+  }, [paused, next, total]);
 
-  const pool = articles.slice(0, 12);
-  const isGalleryPage = hasGallery && page === totalWithGallery - 1;
-
-  let hero: Article | null = null;
-  let side: Article[] = [];
-
-  if (!isGalleryPage) {
-    const start = page * 3;
-    const visible = pool.slice(start, start + 3);
-    while (visible.length < 3 && pool.length >= 3) {
-      visible.push(pool[visible.length % pool.length]);
-    }
-    hero = visible[0] || null;
-    side = visible.slice(1, 3);
-  }
+  const isGalleryPage = hasGallery && page === total - 1;
+  const hero: Article | null = isGalleryPage ? null : (pool[page] || null);
 
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
       <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
-        <div className={isGalleryPage ? "lg:col-span-5" : "lg:col-span-3"}>
+        <div className="lg:col-span-5">
           {isGalleryPage && galleryImages ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
             <HeroCard article={hero} />
           ) : null}
         </div>
-        {!isGalleryPage && (
-          <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
-            {side.map((a) => (
-              <MediumCard key={a.id} article={a} />
-            ))}
-          </div>
-        )}
         <div className="lg:col-span-1">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
         </div>
       </div>
-      {totalWithGallery > 1 && (
+      {total > 1 && (
         <div className="flex justify-center gap-2 mt-3" data-testid="carousel-dots">
-          {Array.from({ length: totalWithGallery }).map((_, i) => (
+          {Array.from({ length: total }).map((_, i) => (
             <button key={i} onClick={() => setPage(i)} className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${i === page ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"}`} data-testid={`button-carousel-dot-${i}`} />
           ))}
         </div>
@@ -316,9 +296,11 @@ export default function Home() {
     );
   }
 
-  const row2Articles = articles.slice(3, 6);
-  const row3Articles = articles.slice(6, 9);
-  const row4Articles = articles.slice(9);
+  const carouselCount = Math.min(articles.length, 5);
+  const remaining = articles.slice(carouselCount);
+  const row2Articles = remaining.slice(0, 4);
+  const row3Articles = remaining.slice(4, 7);
+  const row4Articles = remaining.slice(7, 10);
 
   return (
     <div className="min-h-screen bg-background">
@@ -327,12 +309,13 @@ export default function Home() {
 
         <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          {row2Articles.map((a) => (
-            <MediumCard key={a.id} article={a} />
-          ))}
-          <NativeAdCard />
-        </div>
+        {row2Articles.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            {row2Articles.map((a) => (
+              <MediumCard key={a.id} article={a} />
+            ))}
+          </div>
+        )}
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr">
           <div className="aspect-[4/5]">