diff --git a/src/app/home-page/components/ArticleFeed.tsx b/src/app/home-page/components/ArticleFeed.tsx
index 9909c66..81233c5 100644
--- a/src/app/home-page/components/ArticleFeed.tsx
+++ b/src/app/home-page/components/ArticleFeed.tsx
@@ -581,7 +581,7 @@ export default function ArticleFeed() {
                         alt={article?.alt}
                         width={190}
                         height={128}
-                        className="object-cover w-full h-full"
+                        className="object-contain w-full h-full"
                         sizes="(max-width: 640px) 100px, (max-width: 768px) 140px, 190px"
                       />
                     </Link>
diff --git a/src/app/home-page/components/FeaturedBento.tsx b/src/app/home-page/components/FeaturedBento.tsx
index ffc2f4b..659bcda 100644
--- a/src/app/home-page/components/FeaturedBento.tsx
+++ b/src/app/home-page/components/FeaturedBento.tsx
@@ -204,7 +204,7 @@ export default function FeaturedBento() {
               src={hero?.image}
               alt={hero?.alt}
               fill
-              className="object-cover w-full h-full"
+              className="object-contain w-full h-full"
               priority={true}
               sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 58vw"
             />
@@ -242,7 +242,7 @@ export default function FeaturedBento() {
                   src={article?.image}
                   alt={article?.alt}
                   fill
-                  className="object-cover w-full h-full"
+                  className="object-contain w-full h-full"
                   sizes="(max-width: 640px) 50vw, (max-width: 1024px) 50vw, 22vw"
                 />
                 <div className="absolute top-0 left-0">
diff --git a/src/app/home-page/components/SpotlightCarousel.tsx b/src/app/home-page/components/SpotlightCarousel.tsx
index 00dc3eb..30226f3 100644
--- a/src/app/home-page/components/SpotlightCarousel.tsx
+++ b/src/app/home-page/components/SpotlightCarousel.tsx
@@ -191,7 +191,7 @@ export default function SpotlightCarousel() {
                   src={item.image}
                   alt={item.alt}
                   fill
-                  className="object-cover w-full h-full"
+                  className="object-contain w-full h-full"
                   sizes="(max-width: 640px) 50vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
                 />
                 <div className="absolute top-0 left-0">
diff --git a/src/app/news/NewsPageClient.tsx b/src/app/news/NewsPageClient.tsx
index ec269a3..fe56502 100644
--- a/src/app/news/NewsPageClient.tsx
+++ b/src/app/news/NewsPageClient.tsx
@@ -266,7 +266,7 @@ export default function NewsPage({
                           src={article.image || "/assets/images/article-placeholder.jpg"}
                           alt={article.alt || article.title || "AV Beat article"}
                           fill
-                          className="object-cover group-hover:scale-105 transition-transform duration-300"
+                          className="object-contain group-hover:scale-105 transition-transform duration-300"
                           sizes="160px"
                         />
                       </div>
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 560d560..43244ea 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -71,7 +71,7 @@ export default async function SearchPage({ searchParams }: SearchPageProps) {
                     src={article.image || "/assets/images/article-placeholder.jpg"}
                     alt={article.alt || article.title || "AV Beat article"}
                     fill
-                    className="object-cover group-hover:scale-105 transition-transform duration-300"
+                    className="object-contain group-hover:scale-105 transition-transform duration-300"
                     sizes="160px"
                   />
                 </div>
diff --git a/src/components/AISuggestedArticles.tsx b/src/components/AISuggestedArticles.tsx
index 9d64bca..b5036d0 100644
--- a/src/components/AISuggestedArticles.tsx
+++ b/src/components/AISuggestedArticles.tsx
@@ -175,7 +175,7 @@ export default function AISuggestedArticles({ variant = 'compact' }: Props) {
                     src={article.image}
                     alt={article.alt}
                     fill
-                    className="object-cover group-hover:scale-105 transition-transform duration-300"
+                    className="object-contain group-hover:scale-105 transition-transform duration-300"
                     sizes="64px"
                   />
                 </div>
@@ -276,7 +276,7 @@ export default function AISuggestedArticles({ variant = 'compact' }: Props) {
                   src={article.image}
                   alt={article.alt}
                   fill
-                  className="object-cover group-hover:scale-105 transition-transform duration-300"
+                  className="object-contain group-hover:scale-105 transition-transform duration-300"
                   sizes="(max-width: 768px) 50vw, 25vw"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
diff --git a/src/components/FeaturedBentoFromDb.tsx b/src/components/FeaturedBentoFromDb.tsx
index 08f3e6f..d63447a 100644
--- a/src/components/FeaturedBentoFromDb.tsx
+++ b/src/components/FeaturedBentoFromDb.tsx
@@ -95,7 +95,7 @@ export default async function FeaturedBento() {
               <img
                 src={img(hero)}
                 alt={hero.featured_image_alt || hero.title}
-                className="w-full h-full object-cover"
+                className="w-full h-full object-contain"
               />
               <div className="absolute inset-0 bg-gradient-to-t from-black via-black/65 to-transparent" />
 
@@ -146,7 +146,7 @@ export default async function FeaturedBento() {
                   <img
                     src={img(r)}
                     alt={r.featured_image_alt || r.title}
-                    className="w-full h-full object-cover"
+                    className="w-full h-full object-contain"
                   />
                 </div>
                 <div className="p-3 flex flex-col gap-1 flex-1 min-h-0 overflow-hidden">
diff --git a/src/components/FeaturedCarousel.tsx b/src/components/FeaturedCarousel.tsx
index 66eb32e..e8b51d4 100644
--- a/src/components/FeaturedCarousel.tsx
+++ b/src/components/FeaturedCarousel.tsx
@@ -57,7 +57,7 @@ export default function FeaturedCarousel({ slides }: { slides: Slide[] }) {
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6 rounded border border-[#DCE6F2] bg-[#0b0f17] overflow-hidden">
         <div className="relative aspect-[16/10] bg-[#111]">
           {s.image ? (
-            <img src={s.image} alt={s.title} className="w-full h-full object-cover" />
+            <img src={s.image} alt={s.title} className="w-full h-full object-contain" />
           ) : (
             <div className="w-full h-full flex items-center justify-center text-[#6b7280] font-mono text-xs">
               no image