diff --git a/apps/spa/src/components/ProductImageGallery.tsx b/apps/spa/src/components/ProductImageGallery.tsx
index 567994a..073b040 100644
--- a/apps/spa/src/components/ProductImageGallery.tsx
+++ b/apps/spa/src/components/ProductImageGallery.tsx
@@ -69,13 +69,13 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
   return (
     <div className="flex flex-col-reverse md:flex-row items-start gap-4 w-full">
       {/* Thumbnails */}
-      <div className="flex flex-row md:flex-col gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2">
+      <div className="flex flex-row md:flex-col gap-2 md:gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2">
         {sortedImages.map((image, idx) => (
           <button
             key={image.id || idx}
             type="button"
             onClick={() => handleThumbnailClick(idx)}
-            className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${
+            className={`relative aspect-square w-14 md:w-full flex-none overflow-hidden rounded-xl md:rounded-2xl border-2 transition-all snap-center ${
               currentIndex === idx ? 'border-pop-pink shadow-md' : 'border-transparent opacity-60 hover:opacity-100'
             }`}
           >
diff --git a/apps/website/src/components/ProductGallery.tsx b/apps/website/src/components/ProductGallery.tsx
index 43cd9a5..7de39d3 100644
--- a/apps/website/src/components/ProductGallery.tsx
+++ b/apps/website/src/components/ProductGallery.tsx
@@ -68,13 +68,13 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
   return (
     <div className="flex flex-col-reverse md:flex-row items-start gap-4 w-full">
       {/* Thumbnails */}
-      <div className="flex flex-row md:flex-col gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2">
+      <div className="flex flex-row md:flex-col gap-2 md:gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2">
         {images.map((img, idx) => (
           <button
             key={idx}
             type="button"
             onClick={() => handleThumbnailClick(idx)}
-            className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${
+            className={`relative aspect-square w-14 md:w-full flex-none overflow-hidden rounded-xl md:rounded-2xl border-2 transition-all snap-center ${
               activeIndex === idx ? 'border-brand-primary opacity-100' : 'border-transparent opacity-60 hover:opacity-100'
             }`}
           >