diff --git a/src/client/components/GearImage.tsx b/src/client/components/GearImage.tsx
index 68c2b73..a70a879 100644
--- a/src/client/components/GearImage.tsx
+++ b/src/client/components/GearImage.tsx
@@ -12,7 +12,7 @@ interface GearImageProps {
 export function GearImage({
 	src,
 	alt,
-	dominantColor: _dominantColor,
+	dominantColor,
 	cropZoom,
 	cropX,
 	cropY,
@@ -20,6 +20,7 @@ export function GearImage({
 	cover = false,
 }: GearImageProps) {
 	const hasCrop = cropZoom != null && cropZoom > 1;
+	const bgStyle = dominantColor ? { backgroundColor: dominantColor } : undefined;
 
 	if (cover) {
 		return (
@@ -33,24 +34,28 @@ export function GearImage({
 
 	if (hasCrop) {
 		return (
-			<img
-				src={src}
-				alt={alt}
-				className={`w-full h-full object-cover ${className}`}
-				style={{
-					transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
-					transformOrigin: "center center",
-				}}
-			/>
+			<div className="w-full h-full overflow-hidden" style={bgStyle}>
+				<img
+					src={src}
+					alt={alt}
+					className={`w-full h-full object-cover ${className}`}
+					style={{
+						transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
+						transformOrigin: "center center",
+					}}
+				/>
+			</div>
 		);
 	}
 
 	return (
-		<img
-			src={src}
-			alt={alt}
-			className={`w-full h-full object-contain ${className}`}
-		/>
+		<div className="w-full h-full flex items-center justify-center" style={bgStyle}>
+			<img
+				src={src}
+				alt={alt}
+				className={`w-full h-full object-contain ${className}`}
+			/>
+		</div>
 	);
 }
 
diff --git a/src/server/services/item.service.ts b/src/server/services/item.service.ts
index d5c02d9..ff3e577 100644
--- a/src/server/services/item.service.ts
+++ b/src/server/services/item.service.ts
@@ -38,6 +38,10 @@ export async function getAllItems(db: Db, userId: number) {
 			brand: sql<
 				string | null
 			>`COALESCE(${globalItems.brand}, ${items.brand})`.as("brand"),
+			dominantColor: items.dominantColor,
+			cropZoom: items.cropZoom,
+			cropX: items.cropX,
+			cropY: items.cropY,
 			createdAt: items.createdAt,
 			updatedAt: items.updatedAt,
 			categoryName: categories.name,
@@ -82,6 +86,10 @@ export async function getItemById(db: Db, userId: number, id: number) {
 			brand: sql<
 				string | null
 			>`COALESCE(${globalItems.brand}, ${items.brand})`.as("brand"),
+			dominantColor: items.dominantColor,
+			cropZoom: items.cropZoom,
+			cropX: items.cropX,
+			cropY: items.cropY,
 			createdAt: items.createdAt,
 			updatedAt: items.updatedAt,
 			categoryName: categories.name,