diff --git a/src/articles.php b/src/articles.php
index 0fa16a4..c7dd027 100644
--- a/src/articles.php
+++ b/src/articles.php
@@ -377,7 +377,9 @@ document.addEventListener('DOMContentLoaded', function () {
         return `
         <div class="col-12 col-sm-6 col-md-4 col-lg-3">
             <div class="card h-100 shadow-sm position-relative border-0 article-card">
-                <img src="${imagePath}" class="card-img-top article-image-trigger" data-preview-url="${imagePath}" alt="${article.name}" style="height: 180px; object-fit: cover; cursor: pointer; border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;">
+                <div style="width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; background-color: #f8f9fa; border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;">
+                    <img src="${imagePath}" class="article-image-trigger" data-preview-url="${imagePath}" alt="${article.name}" style="max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer;">
+                </div>
                 <div class="position-absolute top-0 end-0 p-2">
                     ${householdBadge} ${consumableIcon}
                 </div>