diff --git a/apps/spa/src/components/ProductCard.tsx b/apps/spa/src/components/ProductCard.tsx
index 40c4ade..c21dbb1 100644
--- a/apps/spa/src/components/ProductCard.tsx
+++ b/apps/spa/src/components/ProductCard.tsx
@@ -66,7 +66,7 @@ export default function ProductCard({ product, enableQuickShop = false, category
       onClick={handleCardClick}
       className="ui-shell-card ui-shell-card-hover group flex cursor-pointer flex-col overflow-hidden p-2"
     >
-      <div className="relative h-48 overflow-hidden rounded-xl bg-pop-black/5 md:h-64">
+      <div className="relative aspect-square overflow-hidden rounded-xl bg-pop-black/5">
         <img
           src={product.images?.[0]?.url || getCategoryImage(displayCategoryName)}
           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
diff --git a/apps/website/src/components/ProductCard.tsx b/apps/website/src/components/ProductCard.tsx
index eb34a78..0409c94 100644
--- a/apps/website/src/components/ProductCard.tsx
+++ b/apps/website/src/components/ProductCard.tsx
@@ -58,7 +58,7 @@ export default function ProductCard({ product }: ProductCardProps) {
 
   return (
     <div className="ui-card ui-card-hover group flex h-full cursor-pointer flex-col overflow-hidden p-2">
-      <div className="relative aspect-[4/3] overflow-hidden rounded-xl bg-surface-page md:h-64 md:aspect-auto">
+      <div className="relative aspect-square overflow-hidden rounded-xl bg-surface-page">
         <WishlistButton product={product} />
         <Link href={`/products/${productSlug}`} className="block h-full w-full">
           <Image