diff --git a/attached_assets/image_1772314969009.png b/attached_assets/image_1772314969009.png
new file mode 100644
index 0000000..4c5ffd8
Binary files /dev/null and b/attached_assets/image_1772314969009.png differ
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 5412fd8..4b89086 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -235,9 +235,9 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
         Top-Storys
       </h3>
       <div className="space-y-0">
-        {articles.slice(0, 6).map((article) => (
+        {articles.slice(0, 10).map((article) => (
           <Link key={article.id} href={`/article/${article.slug}`}>
-            <div className="group cursor-pointer py-1.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
+            <div className="group cursor-pointer py-2 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
               <h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
               <div className="flex items-center gap-1.5 mt-0.5">
                 <span className="text-[10px] text-muted-foreground">{article.author}</span>
@@ -251,16 +251,55 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
   );
 }
 
+function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
+  const isVideo = article.category === "Video";
+  const objPos = getObjectPosition(article.coverImage, focalPoints);
+  return (
+    <Link href={`/article/${article.slug}`}>
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-featured-hero-${article.id}`}>
+        <div className="relative h-full min-h-[260px]">
+          <img src={article.coverImage || ""} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: objPos }} loading="lazy" />
+          {isVideo && (
+            <div className="absolute inset-0 flex items-center justify-center z-10">
+              <div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">
+                <Play className="w-6 h-6 text-white ml-0.5" fill="white" />
+              </div>
+            </div>
+          )}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
+          <div className="absolute bottom-0 left-0 right-0 p-4">
+            <div className="flex items-center gap-2 mb-1.5">
+              <span className="text-[10px] font-medium text-primary">{article.author}</span>
+              <span className="text-white/50 text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
+            </div>
+            <h3 className="text-white font-bold text-base md:text-lg leading-tight line-clamp-3 group-hover:text-primary/90 transition-colors">{article.title}</h3>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
 function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }> }) {
-  const featured = articles.slice(0, 3);
+  const hero = articles[0];
+  const bottom = articles.slice(1, 3);
 
   return (
     <section data-testid="featured-carousel">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        {featured.map((a) => (
-          <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
-        ))}
-        {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="lg:col-span-2">
+          <div className="grid grid-cols-1 gap-4">
+            {hero && <FeaturedHeroCard article={hero} focalPoints={focalPoints} />}
+            <div className="grid grid-cols-2 gap-4">
+              {bottom.map((a) => (
+                <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="lg:col-span-1">
+          {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
+        </div>
       </div>
     </section>
   );
@@ -310,6 +349,7 @@ export default function Home() {
   const row2 = articles.slice(3, 5);
   const row3 = articles.slice(5, 7);
   const remaining = articles.slice(7);
+  const topStoriesCount = Math.min(12, articles.length);
   const rows: Article[][] = [];
   for (let i = 0; i < remaining.length; i += 4) {
     rows.push(remaining.slice(i, i + 4));