diff --git a/src/client/components/CatalogSearchOverlay.tsx b/src/client/components/CatalogSearchOverlay.tsx
index 678e651..8d39a14 100644
--- a/src/client/components/CatalogSearchOverlay.tsx
+++ b/src/client/components/CatalogSearchOverlay.tsx
@@ -7,6 +7,7 @@ import { useFormatters } from "../hooks/useFormatters";
 import { useGlobalItems } from "../hooks/useGlobalItems";
 import { useTags } from "../hooks/useTags";
 import { useUIStore } from "../stores/uiStore";
+import { GearImage } from "./GearImage";
 import { ManualEntryForm } from "./ManualEntryForm";
 
 type ViewMode = "grid" | "list";
@@ -626,15 +627,21 @@ function GridCard({ item, onAdd, onCardClick, weight, price }: CardProps) {
 			className="bg-white rounded-xl border border-gray-100 overflow-hidden cursor-pointer hover:border-gray-200 hover:shadow-sm transition-all"
 			onClick={onCardClick}
 		>
-			<div className="aspect-[4/3] bg-gray-50">
+			<div
+				className="aspect-[4/3] overflow-hidden"
+				style={{
+					backgroundColor: item.imageUrl
+						? ((item as Record<string, unknown>).dominantColor as string) || "#f3f4f6"
+						: undefined,
+				}}
+			>
 				{item.imageUrl ? (
-					<img
+					<GearImage
 						src={item.imageUrl}
 						alt={`${item.brand} ${item.model}`}
-						className="w-full h-full object-cover"
 					/>
 				) : (
-					<div className="w-full h-full flex items-center justify-center">
+					<div className="w-full h-full bg-gray-50 flex items-center justify-center">
 						<svg
 							className="w-9 h-9 text-gray-300"
 							fill="none"
@@ -696,15 +703,21 @@ function ListRow({ item, onAdd, onCardClick, weight, price }: CardProps) {
 			onClick={onCardClick}
 		>
 			{/* Thumbnail */}
-			<div className="w-12 h-12 rounded-lg bg-gray-50 shrink-0 overflow-hidden">
+			<div
+				className="w-12 h-12 rounded-lg shrink-0 overflow-hidden"
+				style={{
+					backgroundColor: item.imageUrl
+						? ((item as Record<string, unknown>).dominantColor as string) || "#f3f4f6"
+						: undefined,
+				}}
+			>
 				{item.imageUrl ? (
-					<img
+					<GearImage
 						src={item.imageUrl}
 						alt={`${item.brand} ${item.model}`}
-						className="w-full h-full object-cover"
 					/>
 				) : (
-					<div className="w-full h-full flex items-center justify-center">
+					<div className="w-full h-full bg-gray-50 flex items-center justify-center">
 						<svg
 							className="w-5 h-5 text-gray-300"
 							fill="none"
diff --git a/src/client/components/ComparisonTable.tsx b/src/client/components/ComparisonTable.tsx
index 063d21e..a3d2995 100644
--- a/src/client/components/ComparisonTable.tsx
+++ b/src/client/components/ComparisonTable.tsx
@@ -4,6 +4,7 @@ import type { CandidateDelta } from "../hooks/useImpactDeltas";
 import { LucideIcon } from "../lib/iconData";
 import { useUIStore } from "../stores/uiStore";
 import { RankBadge } from "./CandidateListItem";
+import { GearImage } from "./GearImage";
 import { ImpactDeltaBadge } from "./ImpactDeltaBadge";
 
 interface CandidateWithCategory {
@@ -114,12 +115,18 @@ export function ComparisonTable({
 			key: "image",
 			label: "Image",
 			render: (c) => (
-				<div className="w-12 h-12 rounded-lg overflow-hidden bg-gray-50 flex items-center justify-center">
+				<div
+					className="w-12 h-12 rounded-lg overflow-hidden flex items-center justify-center"
+					style={{
+						backgroundColor: c.imageUrl
+							? ((c as Record<string, unknown>).dominantColor as string) || "#f3f4f6"
+							: undefined,
+					}}
+				>
 					{c.imageUrl ? (
-						<img
+						<GearImage
 							src={c.imageUrl}
 							alt={c.name}
-							className="w-full h-full object-cover"
 						/>
 					) : (
 						<LucideIcon
diff --git a/src/client/components/ImageUpload.tsx b/src/client/components/ImageUpload.tsx
index b3dd5c9..dd6689a 100644
--- a/src/client/components/ImageUpload.tsx
+++ b/src/client/components/ImageUpload.tsx
@@ -1,9 +1,11 @@
 import { useRef, useState } from "react";
 import { apiUpload } from "../lib/api";
+import { GearImage, imageContainerBg } from "./GearImage";
 
 interface ImageUploadProps {
 	value: string | null;
 	imageUrl?: string | null;
+	dominantColor?: string | null;
 	onChange: (filename: string | null) => void;
 }
 
@@ -13,6 +15,7 @@ const ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp"];
 export function ImageUpload({
 	value: _value,
 	imageUrl,
+	dominantColor,
 	onChange,
 }: ImageUploadProps) {
 	const [uploading, setUploading] = useState(false);
@@ -70,13 +73,18 @@ export function ImageUpload({
 			<div
 				onClick={() => inputRef.current?.click()}
 				className="relative w-full aspect-[4/3] rounded-xl overflow-hidden cursor-pointer group"
+				style={{
+					backgroundColor: displayUrl
+						? imageContainerBg(dominantColor)
+						: undefined,
+				}}
 			>
 				{displayUrl ? (
 					<>
-						<img
+						<GearImage
 							src={displayUrl}
 							alt="Item"
-							className="w-full h-full object-cover"
+							dominantColor={dominantColor}
 						/>
 						{/* Remove button */}
 						<button