diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 2a5341f42..22060bd56 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -51,7 +51,7 @@ const ProductCard: FC<Props> = ({
         className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
       >
         <div className={s.squareBg} />
-        <div className="flex flex-row justify-between box-border w-full z-10 absolute">
+        <div className="flex flex-row justify-between box-border w-full z-20 absolute">
           <div className="absolute top-0 left-0">
             <h3 className={s.productTitle}>
               <span>{p.name}</span>
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 97c1c7d4d..a8f307b77 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -98,12 +98,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
               <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{opt.displayName}</h2>
                 <div className="flex flex-row py-4">
-                  {opt.values.map((v: any) => {
+                  {opt.values.map((v: any, i: number) => {
                     const active = choices[opt.displayName]
 
                     return (
                       <Swatch
-                        key={v.entityId}
+                        key={`${v.entityId}-${i}`}
                         active={v.label === active}
                         variant={opt.displayName}
                         color={v.hexColors ? v.hexColors[0] : ''}