diff --git a/package-lock.json b/package-lock.json
index 083815fe7..93840fb3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "saleor-dashboard",
-  "version": "3.1.0-a.18",
+  "version": "3.1.0-dev",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4828,9 +4828,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.3.3.tgz",
-      "integrity": "sha512-b2dLlOAXDe2OSmYeZSFKwiRMrJc+YkGhvvQCHQXHHP89TZbGZlWP0F13ycCI3OJSfYbCWZlQGM+alMiE31HOuA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.4.0.tgz",
+      "integrity": "sha512-N0DUNByS72juCmoCjUO5CChp53VxsZGz99rpYsdID06LMZndlu/ZoBmKsJv1mZcqUCB7BIqh9hntNd6MDPHpCA==",
       "requires": {
         "clsx": "^1.1.1",
         "lodash": "^4.17.21",
@@ -24488,9 +24488,9 @@
       }
     },
     "react-from-dom": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.1.tgz",
-      "integrity": "sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg=="
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.6.2.tgz",
+      "integrity": "sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ=="
     },
     "react-gtm-module": {
       "version": "2.0.11",
diff --git a/package.json b/package.json
index cc8f5cc69..8826668b3 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
-    "@saleor/macaw-ui": "^0.3.3",
+    "@saleor/macaw-ui": "^0.4.0",
     "@saleor/sdk": "^0.4.4",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 8cdf4301c..665658d11 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -12479,7 +12479,7 @@ exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
         class="PageHeader-root-id"
       >
         <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id"
           tabindex="0"
           type="button"
         >
@@ -21321,7 +21321,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
                         data-test-id="delete-postal-code-1"
                         tabindex="0"
                         type="button"
@@ -21358,7 +21358,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
                         data-test-id="delete-postal-code-1"
                         tabindex="0"
                         type="button"
@@ -22227,7 +22227,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
                         data-test-id="delete-postal-code-1"
                         tabindex="0"
                         type="button"
@@ -22264,7 +22264,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
                         data-test-id="delete-postal-code-1"
                         tabindex="0"
                         type="button"
@@ -23164,7 +23164,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-test-id="delete-postal-code-1"
                         disabled=""
                         tabindex="-1"
@@ -23202,7 +23202,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
                       class="MuiTableCell-root-id MuiTableCell-body-id"
                     >
                       <button
-                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
+                        class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                         data-test-id="delete-postal-code-1"
                         disabled=""
                         tabindex="-1"
@@ -37385,7 +37385,7 @@ exports[`Storyshots Views / Authentication / Reset password default 1`] = `
     >
       <form>
         <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id Login-backBtn-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id Login-backBtn-id"
           tabindex="0"
           type="button"
         >
@@ -37490,7 +37490,7 @@ exports[`Storyshots Views / Authentication / Reset password error 1`] = `
     >
       <form>
         <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id Login-backBtn-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id Login-backBtn-id"
           tabindex="0"
           type="button"
         >
@@ -37600,7 +37600,7 @@ exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
     >
       <form>
         <button
-          class="MuiButtonBase-root-id MuiIconButton-root-id Login-backBtn-id"
+          class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id Login-backBtn-id"
           tabindex="0"
           type="button"
         >
@@ -111517,7 +111517,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -113328,7 +113328,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -115329,7 +115329,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -117311,7 +117311,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -117956,7 +117956,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -119957,7 +119957,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -121896,7 +121896,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -123889,7 +123889,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -125890,7 +125890,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -127891,7 +127891,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -129892,7 +129892,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -131893,7 +131893,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -133894,7 +133894,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"
@@ -135895,7 +135895,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             <button
               aria-haspopup="true"
               aria-label="More"
-              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
+              class="MuiButtonBase-root-id MuiIconButton-root-id IconButton-primary-id MuiIconButton-colorPrimary-id"
               data-test-id="show-more-button"
               tabindex="0"
               type="button"