diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index f23b01d35..c2e210367 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -34,7 +34,7 @@ const ProductCard: FC<Props> = ({
           {product?.images && (
             <Image
               quality="85"
-              src={product.images[0].url || placeholderImg}
+              src={product.images[0]?.url || placeholderImg}
               alt={product.name || 'Product Image'}
               height={320}
               width={320}
@@ -70,7 +70,7 @@ const ProductCard: FC<Props> = ({
               <Image
                 alt={product.name || 'Product Image'}
                 className={s.productImage}
-                src={product.images[0].url || placeholderImg}
+                src={product.images[0]?.url || placeholderImg}
                 height={540}
                 width={540}
                 quality="85"
diff --git a/components/wishlist/WishlistCard/WishlistCard.tsx b/components/wishlist/WishlistCard/WishlistCard.tsx
index 52b17e6da..dfc1165c2 100644
--- a/components/wishlist/WishlistCard/WishlistCard.tsx
+++ b/components/wishlist/WishlistCard/WishlistCard.tsx
@@ -16,6 +16,8 @@ interface Props {
   product: Product
 }
 
+const placeholderImg = '/product-img-placeholder.svg'
+
 const WishlistCard: FC<Props> = ({ product }) => {
   const { price } = usePrice({
     amount: product.price?.value,
@@ -61,10 +63,10 @@ const WishlistCard: FC<Props> = ({ product }) => {
     <div className={cn(s.root, { 'opacity-75 pointer-events-none': removing })}>
       <div className={`col-span-3 ${s.productBg}`}>
         <Image
-          src={product.images[0].url}
+          src={product.images[0]?.url || placeholderImg}
           width={400}
           height={400}
-          alt={product.images[0].alt || 'Product Image'}
+          alt={product.images[0]?.alt || 'Product Image'}
         />
       </div>
 
diff --git a/next.config.js b/next.config.js
index d1d834442..607d4eba8 100644
--- a/next.config.js
+++ b/next.config.js
@@ -49,7 +49,7 @@ module.exports = withCommerceConfig({
         source: '/search/:category',
         destination: '/search',
       },
-    ].filter((x) => x)
+    ].filter(Boolean)
   },
 })
 
diff --git a/pages/index.tsx b/pages/index.tsx
index ed7613616..02142f3b0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -49,15 +49,7 @@ export default function Home({
       </Grid>
       <Marquee variant="secondary">
         {products.slice(0, 3).map((product, i) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-            variant="slim"
-            imgProps={{
-              width: 320,
-              height: 320,
-            }}
-          />
+          <ProductCard key={product.id} product={product} variant="slim" />
         ))}
       </Marquee>
       <Hero
@@ -84,15 +76,7 @@ export default function Home({
       </Grid>
       <Marquee>
         {products.slice(0, 3).map((product, i) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-            variant="slim"
-            imgProps={{
-              width: 320,
-              height: 320,
-            }}
-          />
+          <ProductCard key={product.id} product={product} variant="slim" />
         ))}
       </Marquee>
       {/* <HomeAllProductsGrid