diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index b86f630..4bdac0d 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -180,6 +180,41 @@ function MediumCard({ article, focalPoints }: { article: Article; focalPoints?:
   );
 }
 
+function BlogCard({ 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 bg-card border border-card-border flex flex-col" data-testid={`card-blog-${article.id}`}>
+        <div className="relative flex-shrink-0">
+          <div className="overflow-hidden">
+            <img src={article.coverImage} alt={article.title} className="w-full aspect-[16/9] object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: objPos }} loading="lazy" />
+          </div>
+          {isVideo && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
+                <Play className="w-5 h-5 text-white ml-0.5" fill="white" />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="p-4 flex flex-col flex-1">
+          <div className="flex items-center gap-2 mb-2">
+            <span className="text-xs font-medium text-primary">{article.author}</span>
+            <span className="text-muted-foreground text-xs">{timeAgo(new Date(article.publishedAt))}</span>
+          </div>
+          <h3 className="font-bold text-card-foreground text-base leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
+          <p className="text-sm text-muted-foreground mt-2 leading-relaxed line-clamp-3 flex-1">{article.excerpt}</p>
+          <div className="flex items-center gap-2 mt-3 text-muted-foreground text-xs">
+            <Eye className="w-3.5 h-3.5" />
+            {article.views.toLocaleString()}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
 function SideCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
   const isVideo = article.category === "Video";
   const objPos = getObjectPosition(article.coverImage, focalPoints);
@@ -381,10 +416,6 @@ export default function Home() {
   const row2 = articles.slice(0, 2);
   const row3 = articles.slice(2, 4);
   const remaining = articles.slice(4);
-  const rows: Article[][] = [];
-  for (let i = 0; i < remaining.length; i += 4) {
-    rows.push(remaining.slice(i, i + 4));
-  }
 
   return (
     <div className="min-h-screen bg-background">
@@ -414,13 +445,13 @@ export default function Home() {
           </div>
         </div>
 
-        {rows.map((row, ri) => (
-          <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            {row.map((a) => (
-              <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
+        {remaining.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {remaining.map((a) => (
+              <BlogCard key={a.id} article={a} focalPoints={focalPoints} />
             ))}
           </div>
-        ))}
+        )}
 
       </main>
       <Footer />