diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index b2f219276..3b6d7c2fa 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -41,7 +41,8 @@ export function GridTileImage({
       {props.src ? (
         <Image
           className={clsx('relative h-full w-full object-contain', {
-            'transition duration-300 ease-in-out hover:scale-105': isInteractive
+            'transition duration-300 ease-in-out hover:scale-105': isInteractive,
+            'm-4 max-h-[8rem] min-h-[8rem]': props.width === 200 && props.height === 200 // this styling is for the thumbnails below gallery on product detail page
           })}
           {...props}
           alt={props.title || ''}
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 12690d11e..92cd9432b 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -84,8 +84,8 @@ export function Gallery({
                 <GridTileImage
                   alt={image?.altText}
                   src={image.src}
-                  width={600}
-                  height={600}
+                  width={200}
+                  height={200}
                   background="purple-dark"
                   active={isActive}
                 />