diff --git a/attached_assets/image_1772307061989.png b/attached_assets/image_1772307061989.png
new file mode 100644
index 0000000..32b928b
Binary files /dev/null and b/attached_assets/image_1772307061989.png differ
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 8c6e4a9..1e44392 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -203,9 +203,10 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
 }
 
 function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[] }) {
-  const pool = articles.slice(0, 5);
+  const PAGES = 5;
   const hasGallery = galleryImages && galleryImages.length > 0;
-  const total = pool.length + (hasGallery ? 1 : 0);
+  const articlePages = Math.min(PAGES, Math.ceil(articles.length / 3));
+  const total = articlePages + (hasGallery ? 1 : 0);
   const [page, setPage] = useState(0);
   const [paused, setPaused] = useState(false);
 
@@ -220,18 +221,37 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
   }, [paused, next, total]);
 
   const isGalleryPage = hasGallery && page === total - 1;
-  const hero: Article | null = isGalleryPage ? null : (pool[page] || null);
+
+  let hero: Article | null = null;
+  let side: Article[] = [];
+
+  if (!isGalleryPage) {
+    const start = page * 3;
+    const visible = articles.slice(start, start + 3);
+    while (visible.length < 3 && articles.length >= 3) {
+      visible.push(articles[visible.length % articles.length]);
+    }
+    hero = visible[0] || null;
+    side = visible.slice(1, 3);
+  }
 
   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="lg:col-span-5">
+        <div className={isGalleryPage ? "lg:col-span-5" : "lg:col-span-3"}>
           {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>
@@ -296,8 +316,8 @@ export default function Home() {
     );
   }
 
-  const carouselCount = Math.min(articles.length, 5);
-  const remaining = articles.slice(carouselCount);
+  const carouselUsed = Math.min(articles.length, 5 * 3);
+  const remaining = articles.slice(carouselUsed);
   const row2Articles = remaining.slice(0, 4);
   const row3Articles = remaining.slice(4, 7);
   const row4Articles = remaining.slice(7, 10);