diff --git a/client/src/components/ArticleCard.tsx b/client/src/components/ArticleCard.tsx
index 193d72a..20bf0dc 100644
--- a/client/src/components/ArticleCard.tsx
+++ b/client/src/components/ArticleCard.tsx
@@ -40,13 +40,6 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
       >
         <CardContent className="p-6">
           <div className="flex space-x-6">
-            {article.imageUrl && (
-              <img 
-                src={article.imageUrl} 
-                alt={article.title}
-                className="w-32 h-24 object-cover rounded-lg flex-shrink-0"
-              />
-            )}
             <div className="flex-1">
               <div className="flex items-center space-x-2 mb-2">
                 {article.isPinned && (
@@ -74,6 +67,14 @@ export default function ArticleCard({ article, outlet, viewMode = "grid" }: Arti
                 </div>
               </div>
             </div>
+            {article.imageUrl && (
+              <img 
+                src={article.imageUrl} 
+                alt={article.title}
+                className="w-32 h-24 object-cover rounded-lg flex-shrink-0"
+                data-testid="image-article-thumbnail"
+              />
+            )}
           </div>
         </CardContent>
       </Card>
diff --git a/client/src/pages/Article.tsx b/client/src/pages/Article.tsx
index ef1bb34..adb0e94 100644
--- a/client/src/pages/Article.tsx
+++ b/client/src/pages/Article.tsx
@@ -174,6 +174,16 @@ export default function Article() {
       <main className="max-w-7xl mx-auto px-6 py-12 pb-32">
         {/* Article Content */}
         <article className="mb-16 max-w-4xl mx-auto">
+          {article.imageUrl && (
+            <div className="mb-8 -mx-6 md:mx-0">
+              <img 
+                src={article.imageUrl} 
+                alt={article.title}
+                className="w-full h-auto max-h-[500px] object-cover rounded-none md:rounded-lg"
+                data-testid="image-article-hero"
+              />
+            </div>
+          )}
           <header className="mb-8">
             <h1 className="text-4xl font-bold mb-4 text-gray-900 leading-tight" data-testid="text-article-title">{article.title}</h1>
             {article.excerpt && (