diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
index 01944bf5c..8e5462237 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
@@ -32,6 +32,7 @@ export interface ProductVariantCreateContentProps {
   dispatchFormDataAction: React.Dispatch<ProductVariantCreateReducerAction>;
   errors: ProductVariantBulkCreate_productVariantBulkCreate_bulkProductErrors[];
   step: ProductVariantCreateStep;
+  onStepClick: (step: ProductVariantCreateStep) => void;
 }
 
 const ProductVariantCreateContent: React.FC<
@@ -43,7 +44,8 @@ const ProductVariantCreateContent: React.FC<
     data,
     dispatchFormDataAction,
     errors,
-    step
+    step,
+    onStepClick
   } = props;
   const classes = useStyles(props);
 
@@ -57,7 +59,7 @@ const ProductVariantCreateContent: React.FC<
 
   return (
     <div>
-      <ProductVariantCreateTabs step={step} />
+      <ProductVariantCreateTabs step={step} onStepClick={onStepClick} />
       <div className={classes.root}>
         {step === "values" && (
           <ProductVariantCreateValues
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
index b6a7ce967..f46e984c2 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
@@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) => ({
     overflowX: "visible",
     overflowY: "hidden",
     width: 800
+  },
+  spacer: {
+    flex: 1
   }
 }));
 
@@ -146,19 +149,24 @@ const ProductVariantCreateDialog: React.FC<
           data={data}
           dispatchFormDataAction={dispatchFormDataAction}
           step={step}
+          onStepClick={step => setStep(step)}
         />
       </DialogContent>
       <DialogActions>
         <Button className={classes.button} onClick={onClose}>
           <FormattedMessage defaultMessage="Cancel" description="button" />
         </Button>
+        <div className={classes.spacer} />
         {step !== "values" && (
           <Button
             className={classes.button}
             color="primary"
             onClick={handlePrevStep}
           >
-            <FormattedMessage defaultMessage="Back" description="button" />
+            <FormattedMessage
+              defaultMessage="Previous"
+              description="previous step, button"
+            />
           </Button>
         )}
         {step !== "summary" ? (
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateTabs.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateTabs.tsx
index 5dca6bf57..3d4667f23 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateTabs.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateTabs.tsx
@@ -51,13 +51,15 @@ const useStyles = makeStyles(
     },
     tab: {
       flex: 1,
-      paddingBottom: theme.spacing.unit
+      paddingBottom: theme.spacing.unit,
+      userSelect: "none"
     },
     tabActive: {
       fontWeight: 600
     },
-    tabUnderline: {
-      borderBottom: `3px solid ${theme.palette.primary.main}`
+    tabVisited: {
+      borderBottom: `3px solid ${theme.palette.primary.main}`,
+      cursor: "pointer"
     }
   }),
   {
@@ -67,32 +69,38 @@ const useStyles = makeStyles(
 
 export interface ProductVariantCreateTabsProps {
   step: ProductVariantCreateStep;
+  onStepClick: (step: ProductVariantCreateStep) => void;
 }
 
 const ProductVariantCreateTabs: React.FC<
   ProductVariantCreateTabsProps
 > = props => {
-  const { step: currentStep } = props;
+  const { step: currentStep, onStepClick } = props;
   const classes = useStyles(props);
   const intl = useIntl();
   const steps = getSteps(intl);
 
   return (
     <div className={classes.root}>
-      {steps.map((step, stepIndex) => (
-        <div
-          className={classNames(classes.tab, {
-            [classes.tabActive]: step.value === currentStep,
-            [classes.tabUnderline]:
-              steps.findIndex(step => step.value === currentStep) >= stepIndex
-          })}
-          key={step.value}
-        >
-          <Typography className={classes.label} variant="caption">
-            {step.label}
-          </Typography>
-        </div>
-      ))}
+      {steps.map((step, stepIndex) => {
+        const visitedStep =
+          steps.findIndex(step => step.value === currentStep) >= stepIndex;
+
+        return (
+          <div
+            className={classNames(classes.tab, {
+              [classes.tabActive]: step.value === currentStep,
+              [classes.tabVisited]: visitedStep
+            })}
+            onClick={visitedStep ? () => onStepClick(step.value) : undefined}
+            key={step.value}
+          >
+            <Typography className={classes.label} variant="caption">
+              {step.label}
+            </Typography>
+          </div>
+        );
+      })}
     </div>
   );
 };
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
index 3744bf90a..dd6fe6dc3 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
@@ -50,6 +50,7 @@ const ProductVariantCreateValues: React.FC<
               <Debounce
                 debounceFn={() => onValueClick(attribute.id, value.slug)}
                 time={100}
+                key={value.slug}
               >
                 {change => (
                   <ControlledCheckbox
@@ -63,7 +64,6 @@ const ProductVariantCreateValues: React.FC<
                     name={`value:${value.slug}`}
                     label={value.name}
                     onChange={change}
-                    key={value.slug}
                   />
                 )}
               </Debounce>
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 5cae43c9c..c97b20359 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -82067,7 +82067,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
           class="ProductVariantCreateTabs-root-id"
         >
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@@ -82076,7 +82076,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
             </span>
           </div>
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@@ -82085,7 +82085,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
             </span>
           </div>
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@@ -82770,7 +82770,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
           class="ProductVariantCreateTabs-root-id"
         >
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@@ -82779,7 +82779,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
             </span>
           </div>
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@@ -82788,7 +82788,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
             </span>
           </div>
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@@ -83478,7 +83478,7 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
           class="ProductVariantCreateTabs-root-id"
         >
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@@ -83762,7 +83762,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
           class="ProductVariantCreateTabs-root-id"
         >
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@@ -83771,7 +83771,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
             </span>
           </div>
           <div
-            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id"
+            class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
           >
             <span
               class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
diff --git a/src/theme.ts b/src/theme.ts
index e523b0d45..ee52be8b7 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -60,7 +60,7 @@ export default (colors: IThemeColors): Theme =>
         },
         flat: {
           "& span": {
-            color: colors.primary
+            color: colors.font.gray
           }
         },
         flatPrimary: {