diff --git a/attached_assets/image_1772310381166.png b/attached_assets/image_1772310381166.png
new file mode 100644
index 0000000..21e5f7e
Binary files /dev/null and b/attached_assets/image_1772310381166.png differ
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index fd7fe7d..0f57d43 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -130,6 +130,31 @@ function MediumCard({ article }: { article: Article }) {
   );
 }
 
+function SideCard({ article }: { article: Article }) {
+  const isVideo = article.category === "Video";
+  return (
+    <Link href={`/article/${article.slug}`}>
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-side-${article.id}`}>
+        <div className="relative flex-shrink-0">
+          <div className="overflow-hidden">
+            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-[4/3] object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 25%" }} loading="lazy" />
+          </div>
+          {isVideo && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-8 h-8 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
+                <Play className="w-3.5 h-3.5 text-white ml-0.5" fill="white" />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="p-2.5 flex flex-col flex-1">
+          <h3 className="font-semibold text-card-foreground text-xs leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
 function NativeAdCard() {
   return (
     <div className="relative rounded-lg overflow-hidden h-full bg-card border border-card-border" data-testid="card-native-ad">
@@ -210,7 +235,7 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
   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={wide ? "lg:col-span-5" : "lg:col-span-3"}>
+        <div className={wide ? "lg:col-span-5" : "lg:col-span-4"}>
           {isGalleryPage && galleryImages ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
@@ -218,9 +243,9 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
           ) : null}
         </div>
         {!wide && (
-          <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
+          <div className="lg:col-span-1 grid grid-cols-1 gap-3">
             {side.map((a) => (
-              <MediumCard key={a.id} article={a} />
+              <SideCard key={a.id} article={a} />
             ))}
           </div>
         )}