diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx
index 2b9148375..480fbfa6b 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx
@@ -85,7 +85,7 @@ const ProductVariantCreatePrices: React.FC<
 
   return (
     <>
-      <Typography color="textSecondary" variant="headline">
+      <Typography color="textSecondary" variant="h5">
         <FormattedMessage
           defaultMessage="Price"
           description="variant price, header"
@@ -183,7 +183,7 @@ const ProductVariantCreatePrices: React.FC<
         </>
       )}
       <FormSpacer />
-      <Typography color="textSecondary" variant="headline">
+      <Typography color="textSecondary" variant="h5">
         <FormattedMessage
           defaultMessage="Stock"
           description="variant stock, header"
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx
index 0dbf89d26..b251e7723 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx
@@ -123,7 +123,7 @@ const ProductVariantCreateSummary: React.FC<
 
   return (
     <>
-      <Typography color="textSecondary" variant="headline">
+      <Typography color="textSecondary" variant="h5">
         <FormattedMessage
           defaultMessage="You will create variants below"
           description="header"
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
index 8d73cabe3..b906904c3 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
@@ -39,8 +39,8 @@ const ProductVariantCreateValues: React.FC<
   return (
     <>
       {attributes.map(attribute => (
-        <>
-          <Typography color="textSecondary" variant="headline">
+        <React.Fragment key={attribute.id}>
+          <Typography color="textSecondary" variant="h5">
             {maybe<React.ReactNode>(() => attribute.name, <Skeleton />)}
           </Typography>
           <Hr className={classes.hr} />
@@ -57,10 +57,11 @@ const ProductVariantCreateValues: React.FC<
                 name={`value:${value.slug}`}
                 label={value.name}
                 onChange={() => onValueClick(attribute.id, value.slug)}
+                key={value.slug}
               />
             ))}
           </div>
-        </>
+        </React.Fragment>
       ))}
     </>
   );
diff --git a/src/products/components/ProductVariantCreateDialog/reducer.ts b/src/products/components/ProductVariantCreateDialog/reducer.ts
index 367a69320..12d9de6f5 100644
--- a/src/products/components/ProductVariantCreateDialog/reducer.ts
+++ b/src/products/components/ProductVariantCreateDialog/reducer.ts
@@ -1,9 +1,9 @@
 import {
   add,
   remove,
+  removeAtIndex,
   toggle,
-  updateAtIndex,
-  removeAtIndex
+  updateAtIndex
 } from "@saleor/utils/lists";
 import { createVariants } from "./createVariants";
 import { initialForm, ProductVariantCreateFormData } from "./form";