diff --git a/.changeset/hot-coins-exercise.md b/.changeset/hot-coins-exercise.md
new file mode 100644
index 00000000000..ceb793e26aa
--- /dev/null
+++ b/.changeset/hot-coins-exercise.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Migrate product page to new macaw components
diff --git a/cypress/elements/catalog/products/product-details.js b/cypress/elements/catalog/products/product-details.js
index a99a9db2924..7462491771e 100644
--- a/cypress/elements/catalog/products/product-details.js
+++ b/cypress/elements/catalog/products/product-details.js
@@ -14,7 +14,7 @@ export const PRODUCT_DETAILS = {
   skuInput: "[name='sku']",
   variantRow: "[data-test-id='product-variant-row']",
   variantPrice: '[data-test-id="price"]',
-  collectionRemoveButtons: '[data-test-id="collection-remove"]',
+  collectionRemoveButtons: '[data-test-id*="selected-option"] span:last-child',
   addWarehouseButton: '[data-test-id="add-warehouse"]',
   warehouseOption: "[role='menuitem']",
   stockInput: '[data-test-id="stock-input"]',
diff --git a/cypress/elements/catalog/products/variants-selectors.js b/cypress/elements/catalog/products/variants-selectors.js
index 44860f874e4..4f43a322c3a 100644
--- a/cypress/elements/catalog/products/variants-selectors.js
+++ b/cypress/elements/catalog/products/variants-selectors.js
@@ -1,8 +1,7 @@
 export const VARIANTS_SELECTORS = {
   variantNameInput: '[data-test-id="variant-name"]',
   skuTextField: '[data-test-id="sku"]',
-  attributeOption:
-    "[data-test-type='option'], [data-test-id='multi-autocomplete-select-option']",
+  attributeOption: "[data-test-id='select-option']",
   attributeSelector: "[data-test-id='attribute-value']",
   addWarehouseButton: "[data-test-id='add-warehouse']",
   warehouseOption: "[role='menuitem']",
diff --git a/cypress/elements/pages/page-details.js b/cypress/elements/pages/page-details.js
index 5e23207c4e3..0f8079d1970 100644
--- a/cypress/elements/pages/page-details.js
+++ b/cypress/elements/pages/page-details.js
@@ -6,6 +6,6 @@ export const PAGE_DETAILS_SELECTORS = {
   isNotPublishedCheckbox: '[name="isPublished"][value=false]',
   uploadFileButton: '[data-test-id="button-upload-file"]',
   richTextEditorAttributeValue: '[class*="ce-paragraph"]',
-  booleanAttributeValueCheckbox: '[role="checkbox"]',
+  booleanAttributeValueCheckbox: '[data-macaw-ui-component="Toggle"]',
   numericAttributeValueInput: '[name*="attribute:"]',
 };
diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js
index 2111810999f..dbc674c14c0 100644
--- a/cypress/elements/shared/sharedElements.js
+++ b/cypress/elements/shared/sharedElements.js
@@ -53,6 +53,9 @@ export const SHARED_ELEMENTS = {
   },
   warningDialog: '[data-test-id="warning-dialog"]',
   pageHeader: "[data-test-id='page-header']",
+  multiselect: {
+    selectedOptions: '[data-test-id*="selected-option-"]',
+  },
   multiAutocomplete: {
     selectedOptions: '[id*="selected-option-"]',
   },
diff --git a/cypress/support/customCommands/sharedElementsOperations/selects.js b/cypress/support/customCommands/sharedElementsOperations/selects.js
index fb507aa3327..8c556fe9d4f 100644
--- a/cypress/support/customCommands/sharedElementsOperations/selects.js
+++ b/cypress/support/customCommands/sharedElementsOperations/selects.js
@@ -41,15 +41,30 @@ Cypress.Commands.add("createNewOption", (selectSelector, newOption) => {
     .click({ force: true });
 });
 
+Cypress.Commands.add("fillNewMultiSelect", (selectSelector, option) => {
+  cy.fillAutocompleteSelect(selectSelector, option, true).then(
+    returnedOption => {
+      cy.get(SHARED_ELEMENTS.header)
+        .first()
+        .click({ force: true })
+        .get(SHARED_ELEMENTS.multiselect.selectedOptions)
+        .should("be.visible");
+      return cy.wrap(returnedOption);
+    },
+  );
+});
+
 Cypress.Commands.add("fillMultiSelect", (selectSelector, option) => {
-  cy.fillAutocompleteSelect(selectSelector, option).then(returnedOption => {
-    cy.get(SHARED_ELEMENTS.header)
-      .first()
-      .click({ force: true })
-      .get(SHARED_ELEMENTS.multiAutocomplete.selectedOptions)
-      .should("be.visible");
-    return cy.wrap(returnedOption);
-  });
+  cy.fillAutocompleteSelect(selectSelector, option, true).then(
+    returnedOption => {
+      cy.get(SHARED_ELEMENTS.header)
+        .first()
+        .click({ force: true })
+        .get(SHARED_ELEMENTS.multiAutocomplete.selectedOptions)
+        .should("be.visible");
+      return cy.wrap(returnedOption);
+    },
+  );
 });
 
 Cypress.Commands.add("fillBaseSelect", (selectSelector, value) => {
@@ -60,46 +75,50 @@ Cypress.Commands.add("fillBaseSelect", (selectSelector, value) => {
     .click();
 });
 
-Cypress.Commands.add("fillAutocompleteSelect", (selectSelector, option) => {
-  let selectedOption = option;
-  cy.get(selectSelector)
-    .click()
-    .get(BUTTON_SELECTORS.selectOption)
-    .should("be.visible");
-  if (option) {
-    cy.get(BUTTON_SELECTORS.selectOption)
-      .first()
-      .then(detachedOption => {
-        cy.get(selectSelector).then(select => {
-          if (select.find("input").length > 0) {
-            cy.get(selectSelector)
-              .find("input")
-              .clear()
-              .type(option, { delay: 10 });
-          } else {
-            cy.get(selectSelector).clear().type(option, { delay: 10 });
-          }
+Cypress.Commands.add(
+  "fillAutocompleteSelect",
+  (selectSelector, option, isForce = false) => {
+    let selectedOption = option;
+    console.log("isForce", isForce);
+    cy.get(selectSelector)
+      .click(isForce ? { force: true } : undefined)
+      .get(BUTTON_SELECTORS.selectOption)
+      .should("be.visible");
+    if (option) {
+      cy.get(BUTTON_SELECTORS.selectOption)
+        .first()
+        .then(detachedOption => {
+          cy.get(selectSelector).then(select => {
+            if (select.find("input").length > 0) {
+              cy.get(selectSelector)
+                .find("input")
+                .clear()
+                .type(option, { delay: 10 });
+            } else {
+              cy.get(selectSelector).clear().type(option, { delay: 10 });
+            }
+          });
+          cy.wrap(detachedOption).should(det => {
+            Cypress.dom.isDetached(det);
+          });
+          cy.contains(BUTTON_SELECTORS.selectOption, option)
+            .should("be.visible")
+            .click({ force: true })
+            .then(() => selectedOption);
         });
-        cy.wrap(detachedOption).should(det => {
-          Cypress.dom.isDetached(det);
+    } else {
+      cy.get(BUTTON_SELECTORS.selectOption)
+        .wait(1000)
+        .first()
+        .invoke("text")
+        .then(text => {
+          selectedOption = text;
         });
-        cy.contains(BUTTON_SELECTORS.selectOption, option)
-          .should("be.visible")
-          .click({ force: true })
-          .then(() => selectedOption);
-      });
-  } else {
-    cy.get(BUTTON_SELECTORS.selectOption)
-      .wait(1000)
-      .first()
-      .invoke("text")
-      .then(text => {
-        selectedOption = text;
-      });
-    return cy
-      .get(BUTTON_SELECTORS.selectOption)
-      .first()
-      .click()
-      .then(() => selectedOption);
-  }
-});
+      return cy
+        .get(BUTTON_SELECTORS.selectOption)
+        .first()
+        .click()
+        .then(() => selectedOption);
+    }
+  },
+);
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
index 065b53f1a55..e8ffed3e8da 100644
--- a/cypress/support/index.d.ts
+++ b/cypress/support/index.d.ts
@@ -39,10 +39,12 @@ declare namespace Cypress {
     fillAutocompleteSelect(
       selectSelector: string,
       option?: string,
+      isForce?: boolean,
     ): Chainable<any>;
     addAliasToGraphRequest(alias: string): Chainable<any>;
     sendRequestWithQuery(query: string): Chainable<any>;
     fillMultiSelect(selectSelector: string, option: string): Chainable<any>;
+    fillNewMultiSelect(selectSelector: string, option: string): Chainable<any>;
     createNewOption(selectSelector: string, newOption: string): Chainable<any>;
     findElementsAndMakeActionOnTable({
       elementsGraphqlAlias: string,
diff --git a/cypress/support/pages/catalog/products/VariantsPage.js b/cypress/support/pages/catalog/products/VariantsPage.js
index 2173b00b193..4b1ee2f575c 100644
--- a/cypress/support/pages/catalog/products/VariantsPage.js
+++ b/cypress/support/pages/catalog/products/VariantsPage.js
@@ -74,11 +74,11 @@ export function fillUpVariantDetails({
   selectAttributeWithType({ attributeType, attributeName });
   cy.get(PRICE_LIST.priceInput)
     .each(input => {
-      cy.wrap(input).type(price);
+      cy.wrap(input).type(price, { force: true });
     })
     .get(PRICE_LIST.costPriceInput)
     .each(input => {
-      cy.wrap(input).type(costPrice);
+      cy.wrap(input).type(costPrice, { force: true });
     });
   if (variantName) {
     cy.get(VARIANTS_SELECTORS.variantNameInput).type(variantName);
diff --git a/cypress/support/pages/catalog/products/priceListComponent.js b/cypress/support/pages/catalog/products/priceListComponent.js
index 8f033a0383f..55fc8644141 100644
--- a/cypress/support/pages/catalog/products/priceListComponent.js
+++ b/cypress/support/pages/catalog/products/priceListComponent.js
@@ -2,14 +2,14 @@ import { PRICE_LIST } from "../../../../elements/catalog/products/price-list";
 
 export const priceInputLists = {
   sellingPrice: PRICE_LIST.priceInput,
-  costPrice: PRICE_LIST.costPriceInput
+  costPrice: PRICE_LIST.costPriceInput,
 };
 
 export function fillUpPriceList(
   price = 1,
-  priceTypeInput = priceInputLists.sellingPrice
+  priceTypeInput = priceInputLists.sellingPrice,
 ) {
   cy.get(priceTypeInput).each($priceInput => {
-    cy.wrap($priceInput).type(price);
+    cy.wrap($priceInput).type(price, { force: true });
   });
 }
diff --git a/cypress/support/pages/catalog/products/productDetailsPage.js b/cypress/support/pages/catalog/products/productDetailsPage.js
index bcb57725e03..eca39fe6d9b 100644
--- a/cypress/support/pages/catalog/products/productDetailsPage.js
+++ b/cypress/support/pages/catalog/products/productDetailsPage.js
@@ -109,7 +109,7 @@ export function fillUpProductOrganization({
 }) {
   const organization = {};
   return cy
-    .fillAutocompleteSelect(PRODUCT_DETAILS.productTypeInput, productType)
+    .fillAutocompleteSelect(PRODUCT_DETAILS.productTypeInput, productType, true)
     .then(selected => {
       organization.productType = selected;
       fillUpCollectionAndCategory({ category, collection });
@@ -124,10 +124,10 @@ export function fillUpProductOrganization({
 export function fillUpCollectionAndCategory({ category, collection }) {
   const organization = {};
   return cy
-    .fillAutocompleteSelect(PRODUCT_DETAILS.categoryInput, category)
+    .fillAutocompleteSelect(PRODUCT_DETAILS.categoryInput, category, true)
     .then(selected => {
       organization.category = selected;
-      cy.fillMultiSelect(PRODUCT_DETAILS.collectionInput, collection);
+      cy.fillNewMultiSelect(PRODUCT_DETAILS.collectionInput, collection);
     })
     .then(selected => {
       organization.collection = selected;
diff --git a/cypress/support/pages/discounts/vouchersPage.js b/cypress/support/pages/discounts/vouchersPage.js
index 36be9c3d515..8728da31ff0 100644
--- a/cypress/support/pages/discounts/vouchersPage.js
+++ b/cypress/support/pages/discounts/vouchersPage.js
@@ -49,7 +49,7 @@ export function createVoucher({
     cy.get(VOUCHERS_SELECTORS.requirements.minOrderValueCheckbox)
       .click()
       .get(VOUCHERS_SELECTORS.requirements.minOrderValueInput)
-      .type(minOrderValue);
+      .type(minOrderValue, { force: true });
   }
   if (minAmountOfItems) {
     cy.get(VOUCHERS_SELECTORS.requirements.minAmountOfItemsCheckbox)
diff --git a/cypress/support/pages/ordersTransactionUtils.js b/cypress/support/pages/ordersTransactionUtils.js
index 2d31b2b4d6e..91af8b77a7b 100644
--- a/cypress/support/pages/ordersTransactionUtils.js
+++ b/cypress/support/pages/ordersTransactionUtils.js
@@ -78,7 +78,9 @@ export function typeRefundReason(refundReasonDescription) {
     .type(`reason_${refundReasonDescription}`);
 }
 export function typeRefundTotalAmount(amount) {
-  return cy.get(ORDER_TRANSACTION_CREATE.transactAmountInput).type(amount);
+  return cy
+    .get(ORDER_TRANSACTION_CREATE.transactAmountInput)
+    .type(amount, { force: true });
 }
 export function typeTransactionReference(reference) {
   return cy.get(ORDERS_SELECTORS.transactionReferenceInput).type(reference);
diff --git a/cypress/support/pages/shippingMethodPage.js b/cypress/support/pages/shippingMethodPage.js
index c618cf161b2..c26187e51ec 100644
--- a/cypress/support/pages/shippingMethodPage.js
+++ b/cypress/support/pages/shippingMethodPage.js
@@ -136,11 +136,11 @@ export function fillUpShippingRate({
   }
   cy.get(SHIPPING_RATE_DETAILS.priceInput).each($priceInput => {
     cy.wrap($priceInput)
-      .clear()
+      .clear({ force: true })
       .get(SHARED_ELEMENTS.pageHeader)
       .click()
       .wrap($priceInput)
-      .clearAndType(price);
+      .clearAndType(price, { force: true });
   });
 }
 
@@ -189,16 +189,16 @@ export function saveRateAfterUpdate() {
 
 export function fillUpLimits({ max, min }) {
   cy.get(SHIPPING_RATE_DETAILS.minValueInput)
-    .type(min)
+    .type(min, { force: true })
     .get(SHIPPING_RATE_DETAILS.maxValueInput)
-    .type(max);
+    .type(max, { force: true });
 }
 
 export function fillUpDeliveryTime({ min, max }) {
   cy.get(SHIPPING_RATE_DETAILS.minDeliveryTimeInput)
-    .clearAndType(min)
+    .clearAndType(min, { force: true })
     .get(SHIPPING_RATE_DETAILS.maxDeliveryTimeInput)
-    .clearAndType(max);
+    .clearAndType(max, { force: true });
 }
 
 export const rateOptions = {
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 649211ae797..3b3a3d9104d 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -1520,10 +1520,6 @@
   "9FGTOt": {
     "string": "Allow access to orders of all channels"
   },
-  "9IWg/f": {
-    "context": "button",
-    "string": "SETUP END DATE"
-  },
   "9MGrEp": {
     "string": "Is available"
   },
@@ -2248,10 +2244,6 @@
   "ESDTC/": {
     "string": "Manage Sales Channel Availability"
   },
-  "ETHnjq": {
-    "context": "header",
-    "string": "Private Metadata"
-  },
   "EWCUdP": {
     "string": "Channels A to Z"
   },
@@ -4737,10 +4729,6 @@
   "VZsE96": {
     "string": "Collection Name"
   },
-  "VcI+Zh": {
-    "context": "header",
-    "string": "Metadata"
-  },
   "VceXrc": {
     "context": "initial balance filter label",
     "string": "Initial balance"
@@ -5564,6 +5552,10 @@
   "bFhzRX": {
     "string": "No products are out of stock"
   },
+  "bGqAdR": {
+    "context": "seo complete text",
+    "string": "Complete"
+  },
   "bHdFph": {
     "context": "subsection header",
     "string": "Address"
@@ -5651,6 +5643,10 @@
   "bj6pTd": {
     "string": "Something's missing"
   },
+  "bk2M4q": {
+    "context": "button",
+    "string": "Cancel end date"
+  },
   "bk9KUX": {
     "context": "ProductTypeDeleteWarningDialog single consent label",
     "string": "Yes, I want to delete this product type and assigned products"
@@ -5772,10 +5768,6 @@
   "cY42ht": {
     "string": "Password cannot be entirely numeric"
   },
-  "cY6H2C": {
-    "context": "empty metadata text",
-    "string": "No metadata created for this element. Use the button below to add new metadata field."
-  },
   "cZN5Jd": {
     "context": "Webhook details events",
     "string": "Events"
@@ -6077,6 +6069,9 @@
     "context": "gift card history message",
     "string": "Gift card was activated by {activatedBy}"
   },
+  "fLCV/w": {
+    "string": "Add new value"
+  },
   "fLhj3a": {
     "context": "gift card history message",
     "string": "Gift card expiry date was updated"
@@ -6273,6 +6268,9 @@
     "context": "gift card history message",
     "string": "Gift card was resent"
   },
+  "gjBiyj": {
+    "string": "Loading..."
+  },
   "gksZwp": {
     "context": "button",
     "string": "Create product type"
@@ -6729,6 +6727,10 @@
     "context": "total order price",
     "string": "Total"
   },
+  "kAPaN6": {
+    "context": "empty metadata text",
+    "string": "Empty"
+  },
   "kEAjZV": {
     "context": "rich text attribute type",
     "string": "Rich Text"
@@ -7821,10 +7823,6 @@
     "context": "limit voucher",
     "string": "Limit of Uses"
   },
-  "s5Imt5": {
-    "context": "button",
-    "string": "Edit website SEO"
-  },
   "s5v6m0": {
     "context": "order",
     "string": "Gift Card ordered"
@@ -8045,6 +8043,10 @@
     "context": "order status",
     "string": "Draft"
   },
+  "tqJwfo": {
+    "context": "button",
+    "string": "Set end date"
+  },
   "tsL3IW": {
     "context": "gift card history message",
     "string": "Gift card was sent to customer"
@@ -8237,10 +8239,6 @@
     "context": "OrderPayment does not require shipping",
     "string": "does not apply"
   },
-  "v+Pkm+": {
-    "context": "field is optional",
-    "string": "*Optional. Adding product to collection helps users find it."
-  },
   "v/1VA6": {
     "context": "add order note, button",
     "string": "Send"
@@ -8263,10 +8261,6 @@
   "v3WWK+": {
     "string": "Status is invalid"
   },
-  "v9ILn/": {
-    "context": "button",
-    "string": "CANCEL END DATE"
-  },
   "vC8vyb": {
     "context": "enabled status option label",
     "string": "Enabled"
@@ -8647,6 +8641,10 @@
   "y7mfbl": {
     "string": "Currently, there are no countries assigned to this shipping zone"
   },
+  "y8E0iG": {
+    "context": "seo incomplete text",
+    "string": "Incomplete"
+  },
   "y9cvqE": {
     "context": "button",
     "string": "Create Voucher"
diff --git a/package-lock.json b/package-lock.json
index d0cce8fc2a9..18ea24867fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "@material-ui/lab": "^4.0.0-alpha.61",
         "@material-ui/styles": "^4.11.4",
         "@reach/auto-id": "^0.16.0",
-        "@saleor/macaw-ui": "0.8.0-pre.122",
+        "@saleor/macaw-ui": "0.8.0-pre.133",
         "@saleor/sdk": "0.6.0",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -3572,11 +3572,11 @@
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz",
-      "integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
       "dependencies": {
-        "@floating-ui/dom": "^1.3.0"
+        "@floating-ui/dom": "^1.5.1"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -8532,11 +8532,12 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.122",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.122.tgz",
-      "integrity": "sha512-Ai2t65KUtQXl5Aav1S43R5qTcHXaYW9euIO1WW0cRXXrdtB4sd+YvBW/Y6y5WgMgHAPrWWbw7bqA4Bbpf3IdWQ==",
+      "version": "0.8.0-pre.133",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.133.tgz",
+      "integrity": "sha512-c9J171RErLa7eJ1DpP/KTC5XktW7iEBZGUapyZMsyUXhuu1j0vSfLZkDVOOf00gHjeW16HbYowdWlck7m9uYeg==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
+        "@floating-ui/react-dom": "^2.0.2",
         "@floating-ui/react-dom-interactions": "^0.5.0",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -8549,6 +8550,7 @@
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-tooltip": "^1.0.6",
         "@vanilla-extract/css-utils": "^0.1.3",
+        "@vanilla-extract/recipes": "^0.5.0",
         "clsx": "^1.2.1",
         "downshift": "^6.1.12",
         "downshift7": "npm:downshift@7.6.0",
@@ -13118,6 +13120,14 @@
       "resolved": "https://registry.npmjs.org/@vanilla-extract/css-utils/-/css-utils-0.1.3.tgz",
       "integrity": "sha512-PZAcHROlgtCUGI2y0JntdNwvPwCNyeVnkQu6KTYKdmxBbK3w72XJUmLFYapfaFfgami4I9CTLnrJTPdtmS3gpw=="
     },
+    "node_modules/@vanilla-extract/recipes": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.5.0.tgz",
+      "integrity": "sha512-NfdZ8XyqCDG2RsO3FmYPALDMKg5045dRD97NbBb0Fog3LMDVXZxYgDOct5FAWob8U6W4GbhVpRZt1X9hNnH6fA==",
+      "peerDependencies": {
+        "@vanilla-extract/css": "^1.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz",
@@ -38752,11 +38762,11 @@
       }
     },
     "@floating-ui/react-dom": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz",
-      "integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
       "requires": {
-        "@floating-ui/dom": "^1.3.0"
+        "@floating-ui/dom": "^1.5.1"
       }
     },
     "@floating-ui/react-dom-interactions": {
@@ -42190,11 +42200,12 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.122",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.122.tgz",
-      "integrity": "sha512-Ai2t65KUtQXl5Aav1S43R5qTcHXaYW9euIO1WW0cRXXrdtB4sd+YvBW/Y6y5WgMgHAPrWWbw7bqA4Bbpf3IdWQ==",
+      "version": "0.8.0-pre.133",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.133.tgz",
+      "integrity": "sha512-c9J171RErLa7eJ1DpP/KTC5XktW7iEBZGUapyZMsyUXhuu1j0vSfLZkDVOOf00gHjeW16HbYowdWlck7m9uYeg==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
+        "@floating-ui/react-dom": "^2.0.2",
         "@floating-ui/react-dom-interactions": "^0.5.0",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -42207,6 +42218,7 @@
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-tooltip": "^1.0.6",
         "@vanilla-extract/css-utils": "^0.1.3",
+        "@vanilla-extract/recipes": "^0.5.0",
         "clsx": "^1.2.1",
         "downshift": "^6.1.12",
         "downshift7": "npm:downshift@7.6.0",
@@ -45552,6 +45564,11 @@
       "resolved": "https://registry.npmjs.org/@vanilla-extract/css-utils/-/css-utils-0.1.3.tgz",
       "integrity": "sha512-PZAcHROlgtCUGI2y0JntdNwvPwCNyeVnkQu6KTYKdmxBbK3w72XJUmLFYapfaFfgami4I9CTLnrJTPdtmS3gpw=="
     },
+    "@vanilla-extract/recipes": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@vanilla-extract/recipes/-/recipes-0.5.0.tgz",
+      "integrity": "sha512-NfdZ8XyqCDG2RsO3FmYPALDMKg5045dRD97NbBb0Fog3LMDVXZxYgDOct5FAWob8U6W4GbhVpRZt1X9hNnH6fA=="
+    },
     "@vitejs/plugin-react": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz",
diff --git a/package.json b/package.json
index 43d5571be11..7f9c9030cb8 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.122",
+    "@saleor/macaw-ui": "0.8.0-pre.133",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
diff --git a/src/attributes/utils/handlers.ts b/src/attributes/utils/handlers.ts
index 493b8971ce1..02ffd248465 100644
--- a/src/attributes/utils/handlers.ts
+++ b/src/attributes/utils/handlers.ts
@@ -41,11 +41,17 @@ export function createAttributeMultiChangeHandler(
   attributes: FormsetData<AttributeInputData, string[]>,
   triggerChange: () => void,
 ): FormsetChange<string> {
-  return (attributeId: string, value: string) => {
+  return (attributeId: string, value: string | string[]) => {
     const attribute = attributes.find(
       attribute => attribute.id === attributeId,
     );
 
+    if (Array.isArray(value)) {
+      triggerChange();
+      changeAttributeData(attributeId, value);
+      return;
+    }
+
     const newAttributeValues = toggle(
       value,
       attribute?.value ?? [],
diff --git a/src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.tsx b/src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.tsx
index e11fd6bb23b..feedd77ccd1 100644
--- a/src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.tsx
+++ b/src/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard.tsx
@@ -1,9 +1,8 @@
-import { Card, CardContent } from "@material-ui/core";
+import { DashboardCard } from "@dashboard/components/Card";
+import { Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { defineMessages, FormattedMessage } from "react-intl";
 
-import CardTitle from "../../../components/CardTitle";
-
 const messages = defineMessages({
   title: {
     id: "CT5PAn",
@@ -19,12 +18,16 @@ const messages = defineMessages({
 });
 
 const CannotDefineChannelsAvailabilityCard: React.FC = () => (
-  <Card>
-    <CardTitle title={<FormattedMessage {...messages.title} />} />
-    <CardContent>
-      <FormattedMessage {...messages.subtitle} />
-    </CardContent>
-  </Card>
+  <DashboardCard gap={2}>
+    <DashboardCard.Title>
+      <FormattedMessage {...messages.title} />
+    </DashboardCard.Title>
+    <DashboardCard.Content>
+      <Text variant="caption" color="textNeutralSubdued">
+        <FormattedMessage {...messages.subtitle} />
+      </Text>
+    </DashboardCard.Content>
+  </DashboardCard>
 );
 
 export default CannotDefineChannelsAvailabilityCard;
diff --git a/src/components/Attributes/AttributeRow.tsx b/src/components/Attributes/AttributeRow.tsx
index 771888bcf56..1f5a76599f2 100644
--- a/src/components/Attributes/AttributeRow.tsx
+++ b/src/components/Attributes/AttributeRow.tsx
@@ -14,17 +14,14 @@ import {
   getSingleDisplayValue,
 } from "@dashboard/components/Attributes/utils";
 import FileUploadField from "@dashboard/components/FileUploadField";
-import MultiAutocompleteSelectField from "@dashboard/components/MultiAutocompleteSelectField";
 import RichTextEditor from "@dashboard/components/RichTextEditor";
-import SingleAutocompleteSelectField from "@dashboard/components/SingleAutocompleteSelectField";
 import SortableChipsField from "@dashboard/components/SortableChipsField";
 import { AttributeInputTypeEnum } from "@dashboard/graphql";
-import { commonMessages } from "@dashboard/intl";
-import { TextField } from "@material-ui/core";
-import { Box, Checkbox, Input, Text } from "@saleor/macaw-ui/next";
+import { Box, Input, Text, Toggle } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
+import { Combobox, Multiselect } from "../Combobox";
 import { DateTimeField } from "../DateTimeField";
 import { AttributeRowProps } from "./types";
 
@@ -90,27 +87,32 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       );
     case AttributeInputTypeEnum.DROPDOWN:
       return (
-        <BasicAttributeRow
-          label={attribute.label}
-          id={`attribute:${attribute.label}`}
-        >
-          <SingleAutocompleteSelectField
-            choices={getSingleChoices(attributeValues)}
+        <BasicAttributeRow label={attribute.label}>
+          <Combobox
+            allowCustomValues
+            alwaysFetchOnFocus
+            size="small"
             disabled={disabled}
-            displayValue={getSingleDisplayValue(attribute, attributeValues)}
-            emptyOption={!attribute.data.isRequired}
+            options={getSingleChoices(attributeValues)}
+            value={
+              attribute.value[0]
+                ? {
+                    value: attribute.value[0],
+                    label: getSingleDisplayValue(attribute, attributeValues),
+                  }
+                : null
+            }
             error={!!error}
             helperText={getErrorMessage(error, intl)}
             name={`attribute:${attribute.label}`}
             id={`attribute:${attribute.label}`}
-            label={intl.formatMessage(attributeRowMessages.valueLabel)}
-            value={attribute.value[0]}
-            onChange={event => onChange(attribute.id, event.target.value)}
-            allowCustomValues={true}
-            fetchOnFocus={true}
-            fetchChoices={value => fetchAttributeValues(value, attribute.id)}
+            label=""
+            onChange={e => onChange(attribute.id, e.target.value)}
+            fetchOptions={query => {
+              fetchAttributeValues(query, attribute.id);
+            }}
             onBlur={onAttributeSelectBlur}
-            {...fetchMoreAttributeValues}
+            fetchMore={fetchMoreAttributeValues}
           />
         </BasicAttributeRow>
       );
@@ -131,12 +133,11 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
         <BasicAttributeRow
           label={attribute.label}
           description={intl.formatMessage(inputTypeMessages.plainText)}
-          id={`attribute:${attribute.label}`}
         >
           <Input
             disabled={disabled}
             error={!!error}
-            label={intl.formatMessage(attributeRowMessages.valueLabel)}
+            label=""
             name={`attribute:${attribute.label}`}
             onChange={event => onChange(attribute.id, event.target.value)}
             type="text"
@@ -159,7 +160,6 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
         <BasicAttributeRow
           label={attribute.label}
           description={intl.formatMessage(inputTypeMessages.richText)}
-          id={`attribute:${attribute.label}`}
         >
           {getShouldMount(attribute.id) && (
             <Box __minWidth={210}>
@@ -170,7 +170,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
                 name={`attribute:${attribute.label}`}
                 disabled={disabled}
                 error={!!error}
-                label={intl.formatMessage(attributeRowMessages.valueLabel)}
+                label=""
                 helperText={getErrorMessage(error, intl)}
                 id={`attribute:${attribute.label}`}
               />
@@ -181,14 +181,11 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
     }
     case AttributeInputTypeEnum.NUMERIC:
       return (
-        <BasicAttributeRow
-          label={attribute.label}
-          id={`attribute:${attribute.label}`}
-        >
+        <BasicAttributeRow label={attribute.label}>
           <Input
             disabled={disabled}
             error={!!error}
-            label={intl.formatMessage(attributeRowMessages.valueLabel)}
+            label=""
             name={`attribute:${attribute.label}`}
             id={`attribute:${attribute.label}`}
             onChange={event => onChange(attribute.id, event.target.value)}
@@ -201,56 +198,42 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       );
     case AttributeInputTypeEnum.BOOLEAN:
       return (
-        <Box as="li" display="flex" gap={2} alignItems="center" padding={1}>
-          <Box data-test-id="attribute-value">
-            <Box
-              display="flex"
-              gap={0.5}
-              flexDirection="column"
-              alignItems="flex-end"
-            >
-              <Checkbox
-                name={`attribute:${attribute.label}`}
-                onCheckedChange={checked => onChange(attribute.id, checked)}
-                checked={JSON.parse(attribute.value[0] ?? "false")}
-                error={!!error}
-                id={`attribute:${attribute.label}`}
-              />
-              <Text variant="caption" color="textCriticalDefault">
-                {getErrorMessage(error, intl)}
-              </Text>
+        <BasicAttributeRow label={attribute.label}>
+          <Box as="li" display="flex" gap={2} alignItems="center" padding={1}>
+            <Box data-test-id="attribute-value">
+              <Box
+                display="flex"
+                gap={0.5}
+                flexDirection="column"
+                alignItems="flex-end"
+              >
+                <Toggle
+                  name={`attribute:${attribute.label}`}
+                  onPressedChange={checked => onChange(attribute.id, checked)}
+                  pressed={JSON.parse(attribute.value[0] ?? "false")}
+                  id={`attribute:${attribute.label}`}
+                />
+                <Text variant="caption" color="textCriticalDefault">
+                  {getErrorMessage(error, intl)}
+                </Text>
+              </Box>
             </Box>
           </Box>
-          <Box
-            data-test-id="attribute-label"
-            as="label"
-            htmlFor={`attribute:${attribute.label}`}
-            display="flex"
-            gap={1}
-            cursor="pointer"
-          >
-            <Text>{attribute.label}</Text>
-          </Box>
-        </Box>
+        </BasicAttributeRow>
       );
     case AttributeInputTypeEnum.DATE:
       return (
-        <BasicAttributeRow
-          label={attribute.label}
-          id={`attribute:${attribute.label}`}
-        >
-          <TextField
-            fullWidth
+        <BasicAttributeRow label={attribute.label}>
+          <Input
+            width="100%"
             disabled={disabled}
             error={!!error}
             helperText={getErrorMessage(error, intl)}
-            label={intl.formatMessage(commonMessages.date)}
             name={`attribute:${attribute.label}`}
             id={`attribute:${attribute.label}`}
             onChange={event => onChange(attribute.id, event.target.value)}
             type="date"
             value={attribute.value[0]}
-            InputLabelProps={{ shrink: true }}
           />
         </BasicAttributeRow>
       );
@@ -258,12 +241,10 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       return (
         <BasicAttributeRow label={attribute.label}>
           <DateTimeField
-            fullWidth
             name={`attribute:${attribute.label}`}
             disabled={disabled}
             error={error}
             value={attribute.value[0]}
-            helperText={getErrorMessage(error, intl)}
             onChange={value => onChange(attribute.id, value)}
           />
         </BasicAttributeRow>
@@ -271,21 +252,27 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
     default:
       return (
         <BasicAttributeRow label={attribute.label}>
-          <MultiAutocompleteSelectField
-            choices={getMultiChoices(attributeValues)}
-            displayValues={getMultiDisplayValue(attribute, attributeValues)}
+          <Multiselect
+            allowCustomValues
+            alwaysFetchOnFocus
             disabled={disabled}
+            name={`attribute:${attribute.label}`}
+            label=""
             error={!!error}
             helperText={getErrorMessage(error, intl)}
-            label={intl.formatMessage(attributeRowMessages.multipleValueLabel)}
-            name={`attribute:${attribute.label}`}
-            value={attribute.value}
-            onChange={event => onMultiChange(attribute.id, event.target.value)}
-            allowCustomValues={true}
-            fetchOnFocus={true}
-            fetchChoices={value => fetchAttributeValues(value, attribute.id)}
+            options={getMultiChoices(attributeValues)}
+            value={getMultiDisplayValue(attribute, attributeValues)}
+            fetchOptions={query => {
+              fetchAttributeValues(query, attribute.id);
+            }}
+            onChange={e => {
+              onMultiChange(
+                attribute.id,
+                e.target.value.map(({ value }) => value),
+              );
+            }}
+            fetchMore={fetchMoreAttributeValues}
             onBlur={onAttributeSelectBlur}
-            {...fetchMoreAttributeValues}
           />
         </BasicAttributeRow>
       );
diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx
index dce77c0516b..3149b7e581f 100644
--- a/src/components/Attributes/Attributes.tsx
+++ b/src/components/Attributes/Attributes.tsx
@@ -11,7 +11,7 @@ import {
 import { FormsetAtomicData } from "@dashboard/hooks/useFormset";
 import { FetchMoreProps } from "@dashboard/types";
 import { RichTextGetters } from "@dashboard/utils/richText/useMultipleRichText";
-import { Accordion, Box, Divider, Text } from "@saleor/macaw-ui/next";
+import { Accordion, Box, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
@@ -71,32 +71,36 @@ export const Attributes: React.FC<AttributesProps> = ({
   const intl = useIntl();
 
   return (
-    <DashboardCard>
-      <DashboardCard.Title>
-        {title || intl.formatMessage(messages.header)}
-      </DashboardCard.Title>
+    <DashboardCard paddingTop={6}>
       <DashboardCard.Content>
-        <Box display="flex" flexDirection="column" gap={2}>
+        <Box display="flex" flexDirection="column" gap={1}>
           <Accordion defaultValue="attributes-accordion">
             <Accordion.Item value="attributes-accordion">
-              <Accordion.Trigger buttonDataTestId="attributes-expand">
-                <Text variant="caption" color="textNeutralSubdued">
-                  <FormattedMessage
-                    {...messages.attributesNumber}
-                    values={{
-                      number: attributes.length,
-                    }}
-                  />
-                </Text>
+              <Accordion.Trigger
+                buttonDataTestId="attributes-expand"
+                flexWrap="wrap"
+                alignItems="flex-start"
+              >
+                <Box display="flex" flexDirection="column" gap={2}>
+                  <Text variant="heading">
+                    {title || intl.formatMessage(messages.header)}
+                  </Text>
+                  <Text variant="caption" color="textNeutralSubdued">
+                    <FormattedMessage
+                      {...messages.attributesNumber}
+                      values={{
+                        number: attributes.length,
+                      }}
+                    />
+                  </Text>
+                </Box>
                 <Accordion.TriggerButton dataTestId="expand-icon" />
               </Accordion.Trigger>
               <Accordion.Content>
                 {attributes.length > 0 && (
                   <ul>
-                    <Divider />
-                    {attributes.map((attribute, attributeIndex) => (
+                    {attributes.map(attribute => (
                       <React.Fragment key={attribute.id}>
-                        {attributeIndex > 0 && <Divider />}
                         <AttributeListItem
                           attribute={attribute}
                           errors={errors}
diff --git a/src/components/Attributes/BasicAttributeRow.tsx b/src/components/Attributes/BasicAttributeRow.tsx
index 7feeb44697a..d6ff663095e 100644
--- a/src/components/Attributes/BasicAttributeRow.tsx
+++ b/src/components/Attributes/BasicAttributeRow.tsx
@@ -8,6 +8,9 @@ interface BasicAttributeRowProps {
   clickableLabel?: boolean;
 }
 
+const capitalize = (str: BasicAttributeRowProps["label"]) =>
+  typeof str === "string" ? str.charAt(0).toUpperCase() + str.slice(1) : str;
+
 export const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
   label,
   description,
@@ -19,10 +22,10 @@ export const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
     as="li"
     justifyContent="space-between"
     alignItems="center"
-    paddingY={6}
-    paddingX={0.5}
+    paddingY={2}
     display="grid"
     gridTemplateColumns={2}
+    __gridTemplateColumns="1fr 2fr"
     gap={5}
   >
     <Box
@@ -33,7 +36,7 @@ export const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
       gap={1}
       cursor={clickableLabel ? "pointer" : "auto"}
     >
-      <Text>{label}</Text>
+      <Text>{capitalize(label)}</Text>
       {description && (
         <Tooltip>
           <Tooltip.Trigger>
diff --git a/src/components/Attributes/ExtendedAttributeRow.tsx b/src/components/Attributes/ExtendedAttributeRow.tsx
index 8e23dae0dea..81552e5bfcd 100644
--- a/src/components/Attributes/ExtendedAttributeRow.tsx
+++ b/src/components/Attributes/ExtendedAttributeRow.tsx
@@ -15,10 +15,12 @@ const ExtendedAttributeRow: React.FC<ExtendedAttributeRowProps> = props => {
     <>
       <Box
         as="li"
-        display="flex"
-        justifyContent="space-between"
         alignItems="center"
-        paddingY={6}
+        paddingY={2}
+        display="grid"
+        gridTemplateColumns={2}
+        __gridTemplateColumns="1fr 2fr"
+        gap={5}
       >
         <Text data-test-id="attribute-label">{label}</Text>
         <Button
@@ -26,12 +28,26 @@ const ExtendedAttributeRow: React.FC<ExtendedAttributeRowProps> = props => {
           variant="secondary"
           data-test-id="button-attribute-selector"
           onClick={onSelect}
+          style={{
+            maxWidth: "fit-content",
+          }}
           type="button"
         >
           {selectLabel}
         </Button>
       </Box>
-      <Box data-test-id="attribute-value">{children}</Box>
+      <Box
+        as="li"
+        alignItems="center"
+        paddingY={2}
+        display="grid"
+        gridTemplateColumns={2}
+        __gridTemplateColumns="1fr 2fr"
+        gap={5}
+      >
+        <Box></Box>
+        <Box data-test-id="attribute-value">{children}</Box>
+      </Box>
     </>
   );
 };
diff --git a/src/components/Attributes/SwatchRow.tsx b/src/components/Attributes/SwatchRow.tsx
index 5b765f70fb9..bf03537ce2e 100644
--- a/src/components/Attributes/SwatchRow.tsx
+++ b/src/components/Attributes/SwatchRow.tsx
@@ -4,14 +4,12 @@ import {
   getErrorMessage,
   getSingleDisplayValue,
 } from "@dashboard/components/Attributes/utils";
-import HorizontalSpacer from "@dashboard/components/HorizontalSpacer";
-import SingleAutocompleteSelectField from "@dashboard/components/SingleAutocompleteSelectField";
 import { getBySlug } from "@dashboard/misc";
-import { InputAdornment } from "@material-ui/core";
-import React from "react";
+import { Box } from "@saleor/macaw-ui/next";
+import React, { useMemo } from "react";
 import { useIntl } from "react-intl";
 
-import { useStyles } from "./styles";
+import { Combobox } from "../Combobox";
 import { AttributeRowProps } from "./types";
 
 type SwatchRowProps = Pick<
@@ -34,62 +32,86 @@ export const SwatchRow: React.FC<SwatchRowProps> = ({
   error,
   onChange,
 }) => {
-  const classes = useStyles();
   const intl = useIntl();
   const value = attribute.data.values.find(getBySlug(attribute.value[0]));
 
+  const options = useMemo(
+    () =>
+      attributeValues.map(({ file, value, slug, name }) => ({
+        label: name,
+        value: slug,
+        startAdornment: (
+          <SwatchPreviewBox
+            isFile={!!file}
+            backgroundImageUrl={file?.url}
+            backgroundColor={value}
+          />
+        ),
+      })),
+    [attributeValues],
+  );
+
   return (
-    <BasicAttributeRow
-      label={attribute.label}
-      id={`attribute:${attribute.label}`}
-    >
-      <SingleAutocompleteSelectField
-        fetchOnFocus
-        allowCustomValues={false}
-        choices={attributeValues.map(({ file, value, slug, name }) => ({
-          label: (
-            <>
-              <div
-                className={classes.swatchPreview}
-                style={
-                  file
-                    ? { backgroundImage: `url(${file.url})` }
-                    : { backgroundColor: value }
-                }
-              />
-              <HorizontalSpacer />
-              {name}
-            </>
-          ),
-          value: slug,
-        }))}
+    <BasicAttributeRow label={attribute.label}>
+      <Combobox
         disabled={disabled}
-        displayValue={getSingleDisplayValue(attribute, attributeValues)}
-        emptyOption={!attribute.data.isRequired}
+        options={options}
+        value={
+          attribute.value[0]
+            ? {
+                value: attribute.value[0],
+                label: getSingleDisplayValue(attribute, attributeValues),
+              }
+            : null
+        }
+        startAdornment={() =>
+          value ? (
+            <SwatchPreviewBox
+              isFile={!!value?.file}
+              backgroundImageUrl={value?.file?.url}
+              backgroundColor={value?.value}
+            />
+          ) : null
+        }
         error={!!error}
+        label=""
         helperText={getErrorMessage(error, intl)}
         name={`attribute:${attribute.label}`}
         id={`attribute:${attribute.label}`}
-        value={attribute.value[0]}
-        onChange={event => onChange(attribute.id, event.target.value)}
-        fetchChoices={value => fetchAttributeValues(value, attribute.id)}
-        InputProps={{
-          classes: { input: classes.swatchInput },
-          startAdornment: (
-            <InputAdornment position="start">
-              <div
-                className={classes.swatchPreview}
-                style={
-                  value?.file
-                    ? { backgroundImage: `url(${value.file.url})` }
-                    : { backgroundColor: value?.value }
-                }
-              />
-            </InputAdornment>
-          ),
+        onChange={e => onChange(attribute.id, e.target.value)}
+        fetchOptions={query => {
+          fetchAttributeValues(query, attribute.id);
         }}
-        {...fetchMoreAttributeValues}
+        fetchMore={fetchMoreAttributeValues}
       />
     </BasicAttributeRow>
   );
 };
+
+const SwatchPreviewBox = ({
+  isFile,
+  backgroundColor,
+  backgroundImageUrl,
+}: {
+  isFile: boolean;
+  backgroundImageUrl?: string;
+  backgroundColor?: string;
+}) => {
+  return (
+    <Box
+      width={8}
+      height={8}
+      borderRadius={2}
+      marginRight={2}
+      style={{
+        ...(isFile
+          ? {
+              backgroundImage: `url(${backgroundImageUrl})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+            }
+          : { backgroundColor }),
+      }}
+    />
+  );
+};
diff --git a/src/components/Attributes/messages.ts b/src/components/Attributes/messages.ts
index a91d2785419..02b0bfea95e 100644
--- a/src/components/Attributes/messages.ts
+++ b/src/components/Attributes/messages.ts
@@ -16,4 +16,8 @@ export const attributeRowMessages = defineMessages({
     defaultMessage: "Assign references",
     description: "button label",
   },
+  addNewValue: {
+    id: "fLCV/w",
+    defaultMessage: "Add new value",
+  },
 });
diff --git a/src/components/Attributes/types.ts b/src/components/Attributes/types.ts
index 5706a76ab90..d48c7d8fca1 100644
--- a/src/components/Attributes/types.ts
+++ b/src/components/Attributes/types.ts
@@ -18,7 +18,7 @@ export enum VariantAttributeScope {
 export interface AttributeRowHandlers {
   onChange: FormsetChange<string | boolean>;
   onFileChange: FormsetChange<File>;
-  onMultiChange: FormsetChange<string>;
+  onMultiChange: FormsetChange<string | string[]>;
   onReferencesAddClick: (attribute: AttributeInput) => void;
   onReferencesRemove: FormsetChange<string[]>;
   onReferencesReorder: FormsetChange<ReorderEvent>;
diff --git a/src/components/Card/Root.tsx b/src/components/Card/Root.tsx
index 1789b3cf893..85bed8b6592 100644
--- a/src/components/Card/Root.tsx
+++ b/src/components/Card/Root.tsx
@@ -2,7 +2,7 @@ import { Box, Sprinkles } from "@saleor/macaw-ui/next";
 import React from "react";
 
 export const Root: React.FC<Sprinkles> = ({ children, ...rest }) => (
-  <Box display="flex" flexDirection="column" gap={6} {...rest}>
+  <Box display="flex" flexDirection="column" gap={5} {...rest}>
     {children}
   </Box>
 );
diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
index 99ca0f56ccf..4db72804fa5 100644
--- a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
+++ b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
@@ -41,7 +41,7 @@ export const ChannelsAvailabilityCardWrapper: React.FC<
   return (
     <DashboardCard>
       <DashboardCard.Title>
-        <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Box display="flex" justifyContent="space-between">
           <Box display={"flex"} flexDirection={"column"} gap={1}>
             <div>
               {intl.formatMessage({
@@ -51,7 +51,9 @@ export const ChannelsAvailabilityCardWrapper: React.FC<
               })}
             </div>
             {!!channelsAvailabilityText && (
-              <Text variant={"caption"}>{channelsAvailabilityText}</Text>
+              <Text variant="caption" color="textNeutralSubdued">
+                {channelsAvailabilityText}
+              </Text>
             )}
           </Box>
           <RequirePermissions requiredPermissions={managePermissions}>
diff --git a/src/components/Combobox/components/Combobox.tsx b/src/components/Combobox/components/Combobox.tsx
new file mode 100644
index 00000000000..85a9ccc0a44
--- /dev/null
+++ b/src/components/Combobox/components/Combobox.tsx
@@ -0,0 +1,88 @@
+import { ChangeEvent } from "@dashboard/hooks/useForm";
+import { commonMessages } from "@dashboard/intl";
+import { FetchMoreProps } from "@dashboard/types";
+import {
+  DynamicCombobox,
+  DynamicComboboxProps,
+  Option,
+} from "@saleor/macaw-ui/next";
+import React, { useEffect, useRef, useState } from "react";
+import { useIntl } from "react-intl";
+
+import { useCombbobxCustomOption } from "../hooks/useCombbobxCustomOption";
+import { useComboboxHandlers } from "../hooks/useComboboxHandlers";
+
+type ComboboxProps = Omit<
+  DynamicComboboxProps<Option | null>,
+  "value" | "onChange"
+> & {
+  fetchOptions: (data: string) => void;
+  allowCustomValues?: boolean;
+  alwaysFetchOnFocus?: boolean;
+  fetchMore?: FetchMoreProps;
+  value: Option | null;
+  onChange: (event: ChangeEvent) => void;
+};
+
+export const Combobox = ({
+  value,
+  fetchOptions,
+  onChange,
+  options,
+  alwaysFetchOnFocus = false,
+  allowCustomValues = false,
+  fetchMore,
+  loading,
+  size = "small",
+  ...rest
+}: ComboboxProps) => {
+  const intl = useIntl();
+
+  const [selectedValue, setSelectedValue] = useState(value);
+  const inputValue = useRef("");
+
+  useEffect(() => {
+    if (value?.value !== selectedValue?.value) {
+      setSelectedValue(value);
+    }
+  }, [value]);
+
+  const { handleFetchMore, handleFocus, handleInputChange } =
+    useComboboxHandlers({
+      fetchOptions,
+      alwaysFetchOnFocus,
+      fetchMore,
+    });
+
+  const { customValueOption } = useCombbobxCustomOption({
+    query: inputValue.current,
+    allowCustomValues,
+    selectedValue,
+  });
+
+  const handleOnChange = (value: Option | null) => {
+    onChange({
+      target: { value: value?.value ?? null, name: rest.name ?? "" },
+    });
+  };
+
+  return (
+    <DynamicCombobox
+      value={selectedValue}
+      options={[...customValueOption, ...options] as Option[]}
+      onChange={handleOnChange}
+      onScrollEnd={handleFetchMore}
+      onInputValueChange={value => {
+        inputValue.current = value;
+        handleInputChange(value);
+      }}
+      onFocus={handleFocus}
+      loading={loading || fetchMore?.hasMore || fetchMore?.loading}
+      locale={{
+        loadingText: intl.formatMessage(commonMessages.loading),
+      }}
+      size={size}
+      {...rest}
+    />
+  );
+};
diff --git a/src/components/Combobox/components/Multiselect.tsx b/src/components/Combobox/components/Multiselect.tsx
new file mode 100644
index 00000000000..91973426daa
--- /dev/null
+++ b/src/components/Combobox/components/Multiselect.tsx
@@ -0,0 +1,100 @@
+import { ChangeEvent } from "@dashboard/hooks/useForm";
+import { commonMessages } from "@dashboard/intl";
+import { FetchMoreProps } from "@dashboard/types";
+import {
+  DynamicMultiselect,
+  DynamicMultiselectProps,
+  Option,
+} from "@saleor/macaw-ui/next";
+import React, { useEffect, useRef, useState } from "react";
+import { useIntl } from "react-intl";
+
+import { useCombbobxCustomOption } from "../hooks/useCombbobxCustomOption";
+import { useComboboxHandlers } from "../hooks/useComboboxHandlers";
+import { toWithCustomValues } from "../utils";
+
+type MultiselectProps = Omit<DynamicMultiselectProps<Option>, "onChange"> & {
+  options: Option[];
+  fetchOptions: (data: string) => void;
+  alwaysFetchOnFocus?: boolean;
+  allowCustomValues?: boolean;
+  fetchMore?: FetchMoreProps;
+  onChange: (event: ChangeEvent) => void;
+};
+
+export const Multiselect = ({
+  disabled,
+  options,
+  onChange,
+  fetchOptions,
+  value,
+  alwaysFetchOnFocus = false,
+  allowCustomValues = false,
+  loading,
+  fetchMore,
+  size = "small",
+  ...rest
+}: MultiselectProps) => {
+  const intl = useIntl();
+  const inputValue = useRef("");
+
+  const [selectedValues, setSelectedValues] = useState(value);
+
+  useEffect(() => {
+    setSelectedValues(value);
+  }, [value]);
+
+  const { handleFetchMore, handleFocus, handleInputChange } =
+    useComboboxHandlers({
+      fetchOptions,
+      alwaysFetchOnFocus,
+      fetchMore,
+    });
+
+  const { customValueLabel, customValueOption } = useCombbobxCustomOption({
+    query: inputValue.current,
+    allowCustomValues,
+    selectedValue: selectedValues,
+  });
+
+  const handleOnChange = (values: Option[]) => {
+    const hasCustomValue = values.find(value =>
+      value.label.includes(customValueLabel),
+    );
+    const valuesWithCustom = values.map(toWithCustomValues(customValueLabel));
+
+    onChange({
+      target: {
+        value: valuesWithCustom,
+        name: rest.name ?? "",
+      },
+    });
+
+    inputValue.current = "";
+
+    if (hasCustomValue) {
+      fetchOptions("");
+    }
+  };
+
+  return (
+    <DynamicMultiselect
+      options={[...customValueOption, ...options]}
+      disabled={disabled}
+      onChange={handleOnChange}
+      value={selectedValues}
+      onInputValueChange={value => {
+        inputValue.current = value;
+        handleInputChange(value);
+      }}
+      onFocus={handleFocus}
+      onScrollEnd={handleFetchMore}
+      loading={loading || fetchMore?.hasMore || fetchMore?.loading}
+      locale={{
+        loadingText: intl.formatMessage(commonMessages.loading),
+      }}
+      size={size}
+      {...rest}
+    />
+  );
+};
diff --git a/src/components/Combobox/hooks/useCombbobxCustomOption.ts b/src/components/Combobox/hooks/useCombbobxCustomOption.ts
new file mode 100644
index 00000000000..acc68d7e3f1
--- /dev/null
+++ b/src/components/Combobox/hooks/useCombbobxCustomOption.ts
@@ -0,0 +1,60 @@
+import { Option } from "@saleor/macaw-ui/next";
+import { useIntl } from "react-intl";
+
+import { messages } from "../messages";
+
+export const useCombbobxCustomOption = ({
+  query,
+  selectedValue,
+  allowCustomValues,
+}: {
+  selectedValue: Option | Option[] | null;
+  query: string;
+  allowCustomValues?: boolean;
+}) => {
+  const intl = useIntl();
+
+  const customValueLabel = intl.formatMessage(messages.addNewValue, {
+    value: query,
+  });
+
+  const customValueOption = showCustomValue({
+    query,
+    selectedValue,
+    allowCustomValues,
+  })
+    ? [
+        {
+          label: customValueLabel,
+          value: query,
+        },
+      ]
+    : [];
+
+  return {
+    customValueLabel,
+    customValueOption,
+  };
+};
+
+function showCustomValue({
+  query,
+  selectedValue,
+  allowCustomValues,
+}: {
+  selectedValue: Option | Option[] | null;
+  query: string;
+  allowCustomValues?: boolean;
+}) {
+  if (!query || !allowCustomValues) {
+    return false;
+  }
+
+  if (Array.isArray(selectedValue)) {
+    return !selectedValue.find(
+      option => option.label.toLowerCase() === query.toLowerCase(),
+    );
+  }
+
+  return selectedValue?.label.toLocaleLowerCase() !== query.toLocaleLowerCase();
+}
diff --git a/src/components/Combobox/hooks/useComboboxHandlers.ts b/src/components/Combobox/hooks/useComboboxHandlers.ts
new file mode 100644
index 00000000000..509d1781721
--- /dev/null
+++ b/src/components/Combobox/hooks/useComboboxHandlers.ts
@@ -0,0 +1,45 @@
+import { DEFAULT_INITIAL_SEARCH_DATA } from "@dashboard/config";
+import useDebounce from "@dashboard/hooks/useDebounce";
+import { FetchMoreProps } from "@dashboard/types";
+import { useRef } from "react";
+
+export const useComboboxHandlers = ({
+  fetchOptions,
+  fetchMore,
+  alwaysFetchOnFocus,
+}: {
+  fetchOptions: (data: string) => void;
+  fetchMore?: FetchMoreProps;
+  alwaysFetchOnFocus?: boolean;
+}) => {
+  const mounted = useRef(false);
+
+  const debouncedFetchOptions = useRef(
+    useDebounce(async (value: string) => {
+      fetchOptions(value);
+    }, 500),
+  ).current;
+
+  const handleFetchMore = () => {
+    if (fetchMore?.hasMore) {
+      fetchMore?.onFetchMore();
+    }
+  };
+
+  const handleInputChange = (value: string) => {
+    debouncedFetchOptions(value);
+  };
+
+  const handleFocus = () => {
+    if (alwaysFetchOnFocus || !mounted.current) {
+      mounted.current = true;
+      fetchOptions(DEFAULT_INITIAL_SEARCH_DATA.query);
+    }
+  };
+
+  return {
+    handleFetchMore,
+    handleInputChange,
+    handleFocus,
+  };
+};
diff --git a/src/components/Combobox/index.ts b/src/components/Combobox/index.ts
new file mode 100644
index 00000000000..b4e84a5ccfe
--- /dev/null
+++ b/src/components/Combobox/index.ts
@@ -0,0 +1,2 @@
+export * from "./components/Combobox";
+export * from "./components/Multiselect";
diff --git a/src/components/Combobox/messages.ts b/src/components/Combobox/messages.ts
new file mode 100644
index 00000000000..b08a3328bc4
--- /dev/null
+++ b/src/components/Combobox/messages.ts
@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl";
+
+export const messages = defineMessages({
+  addNewValue: {
+    id: "U2WgwW",
+    defaultMessage: "Add new value: {value}",
+    description: "add custom select input option",
+  },
+});
diff --git a/src/components/Combobox/utils.ts b/src/components/Combobox/utils.ts
new file mode 100644
index 00000000000..ac395bd554b
--- /dev/null
+++ b/src/components/Combobox/utils.ts
@@ -0,0 +1,11 @@
+import { Option } from "@saleor/macaw-ui/next";
+
+export const toWithCustomValues =
+  (addNewValueLabel: string) => (value: Option) => {
+    if (value.label.includes(addNewValueLabel)) {
+      return { label: value.value, value: value.value };
+    }
+    return value;
+  };
+
+export const toValue = (value: Option) => value.value;
diff --git a/src/components/Datagrid/components/Header.tsx b/src/components/Datagrid/components/Header.tsx
index 6a3818b5775..a02c3286321 100644
--- a/src/components/Datagrid/components/Header.tsx
+++ b/src/components/Datagrid/components/Header.tsx
@@ -1,31 +1,7 @@
 import FullScreenIcon from "@dashboard/icons/FullScreenIcon";
-import { Button, makeStyles, PlusSmallIcon } from "@saleor/macaw-ui";
-import clsx from "clsx";
+import { Box, Button, PlusIcon, sprinkles, Text } from "@saleor/macaw-ui/next";
 import React, { FC, PropsWithChildren } from "react";
 
-import CardTitle from "../../CardTitle";
-
-const useStyles = makeStyles(
-  theme => ({
-    btnContainer: {
-      display: "flex",
-      flexDirection: "row-reverse",
-      gap: theme.spacing(1),
-    },
-    headerBtn: {
-      marginBottom: theme.spacing(2),
-    },
-
-    fullScreenIcon: {
-      fontSize: 14,
-    },
-    fullScreenIconClose: {
-      transform: "rotate(180deg)",
-    },
-  }),
-  { name: "Datagrid" },
-);
-
 interface ButtonFullScreenProps {
   isOpen: boolean;
   onToggle: React.MouseEventHandler<HTMLButtonElement>;
@@ -36,20 +12,23 @@ const ButtonFullScreen: FC<PropsWithChildren<ButtonFullScreenProps>> = ({
   onToggle,
   children,
 }) => {
-  const classes = useStyles();
-
   return (
     <Button
       data-test-id="button-exit-fullscreen"
-      className={classes.headerBtn}
-      variant="tertiary"
+      variant="secondary"
       onClick={onToggle}
     >
-      <FullScreenIcon
-        className={clsx(classes.fullScreenIcon, {
-          [classes.fullScreenIconClose]: isOpen,
-        })}
-      />
+      <Box
+        as="span"
+        display="flex"
+        __transform={isOpen ? "rotate(180deg)" : undefined}
+      >
+        <FullScreenIcon
+          className={sprinkles({
+            fontSize: "buttonMedium",
+          })}
+        />
+      </Box>
       {children}
     </Button>
   );
@@ -63,16 +42,13 @@ const ButtonAddRow: FC<PropsWithChildren<ButtonAddRowProps>> = ({
   onAddRow,
   children,
 }) => {
-  const classes = useStyles();
-
   return (
     <Button
       data-test-id="button-add-variant"
-      className={classes.headerBtn}
-      variant="tertiary"
+      variant="secondary"
       onClick={onAddRow}
     >
-      <PlusSmallIcon />
+      <PlusIcon />
       {children}
     </Button>
   );
@@ -88,13 +64,19 @@ interface GridHeader extends FC<PropsWithChildren<HeaderProps>> {
 }
 
 const Header: GridHeader = ({ title, children }) => {
-  const classes = useStyles();
-
   return (
-    <CardTitle
-      title={title}
-      toolbar={<div className={classes.btnContainer}>{children}</div>}
-    />
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+      paddingX={6}
+      paddingY={5}
+    >
+      <Text variant="heading">{title}</Text>
+      <Box display="flex" __flexDirection="row-reverse" gap={2}>
+        {children}
+      </Box>
+    </Box>
   );
 };
 
diff --git a/src/components/DateTimeField/DateTimeField.tsx b/src/components/DateTimeField/DateTimeField.tsx
index 8b57aa986e5..f555d67fcb3 100644
--- a/src/components/DateTimeField/DateTimeField.tsx
+++ b/src/components/DateTimeField/DateTimeField.tsx
@@ -6,17 +6,17 @@ import {
 } from "@dashboard/graphql";
 import { commonMessages } from "@dashboard/intl";
 import { joinDateTime, splitDateTime } from "@dashboard/misc";
-import { TextField } from "@material-ui/core";
-import { TextFieldProps } from "@material-ui/core/TextField";
-import { Box } from "@saleor/macaw-ui/next";
+import { Box, Input } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
-type DateTimeFieldProps = Omit<TextFieldProps, "label" | "error"> & {
+interface DateTimeFieldProps {
   onChange: (value: string) => void;
   error: ProductErrorWithAttributesFragment | PageErrorWithAttributesFragment;
   value: string;
-};
+  disabled: boolean;
+  name: string;
+}
 
 export const DateTimeField: React.FC<DateTimeFieldProps> = ({
   disabled,
@@ -31,8 +31,9 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
   return (
     <Box display="flex" gap={0.5}>
-      <TextField
-        fullWidth
+      <Input
+        width="100%"
+        size="small"
         disabled={disabled}
         error={!!error}
         helperText={getErrorMessage(error, intl)}
@@ -45,10 +46,10 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
         }}
         type="date"
         value={parsedValue.date}
-        InputLabelProps={{ shrink: true }}
       />
-      <TextField
-        fullWidth
+      <Input
+        width="100%"
+        size="small"
         disabled={disabled}
         error={!!error}
         helperText={getErrorMessage(error, intl)}
@@ -61,7 +62,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
         }}
         type="time"
         value={parsedValue.time}
-        InputLabelProps={{ shrink: true }}
       />
     </Box>
   );
diff --git a/src/components/DateTimeTimezoneField.tsx b/src/components/DateTimeTimezoneField.tsx
index 7de12f29d5b..770ca8fe2d7 100644
--- a/src/components/DateTimeTimezoneField.tsx
+++ b/src/components/DateTimeTimezoneField.tsx
@@ -1,33 +1,22 @@
 // @ts-strict-ignore
 import { commonMessages } from "@dashboard/intl";
 import { DateTime, joinDateTime, splitDateTime } from "@dashboard/misc";
-import { TextField } from "@material-ui/core";
-import { TextFieldProps } from "@material-ui/core/TextField";
-import { makeStyles } from "@saleor/macaw-ui";
+import { Box, Input, sprinkles } from "@saleor/macaw-ui/next";
 import React, { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 
 import ErrorNoticeBar from "./ErrorNoticeBar";
 
-type DateTimeFieldProps = Omit<TextFieldProps, "label" | "error"> & {
+interface DateTimeFieldProps {
   onChange: (value: string) => void;
   error: string | React.ReactNode;
   setError?: () => void;
   futureDatesOnly?: boolean;
   value: string;
-};
-
-const useStyles = makeStyles(
-  theme => ({
-    dateInput: {
-      marginRight: theme.spacing(2),
-    },
-    errorNoticeBar: {
-      marginTop: theme.spacing(2),
-    },
-  }),
-  { name: "DateTimeTimezoneField" },
-);
+  disabled?: boolean;
+  fullWidth?: boolean;
+  name: string;
+}
 
 export const DateTimeTimezoneField: React.FC<DateTimeFieldProps> = ({
   disabled,
@@ -37,7 +26,6 @@ export const DateTimeTimezoneField: React.FC<DateTimeFieldProps> = ({
   fullWidth,
   value: initialValue,
 }) => {
-  const classes = useStyles({});
   const intl = useIntl();
   const [value, setValue] = useState<DateTime>(
     initialValue ? splitDateTime(initialValue) : { date: "", time: "" },
@@ -50,38 +38,43 @@ export const DateTimeTimezoneField: React.FC<DateTimeFieldProps> = ({
 
   return (
     <>
-      <TextField
-        className={classes.dateInput}
-        fullWidth={fullWidth}
-        disabled={disabled}
-        error={!!error}
-        label={intl.formatMessage(commonMessages.date)}
-        name={`${name}:date`}
-        onChange={event => {
-          const date = event.target.value;
-          setValue(value => ({ ...value, date }));
-        }}
-        type="date"
-        value={value.date}
-        InputLabelProps={{ shrink: true }}
-      />
-      <TextField
-        fullWidth={fullWidth}
-        disabled={disabled}
-        error={!!error}
-        label={intl.formatMessage(commonMessages.time)}
-        name={`${name}:time`}
-        onChange={event => {
-          const time = event.target.value;
-          setValue(value => ({ ...value, time }));
-        }}
-        type="time"
-        value={value.time}
-        InputLabelProps={{ shrink: true }}
-      />
+      <Box display="flex" gap={5}>
+        <Input
+          width={fullWidth ? "100%" : undefined}
+          size="small"
+          marginRight={3}
+          disabled={disabled}
+          error={!!error}
+          label={intl.formatMessage(commonMessages.date)}
+          name={`${name}:date`}
+          onChange={event => {
+            const date = event.target.value;
+            setValue(value => ({ ...value, date }));
+          }}
+          type="date"
+          value={value.date}
+        />
 
+        <Input
+          width={fullWidth ? "100%" : undefined}
+          size="small"
+          disabled={disabled}
+          error={!!error}
+          label={intl.formatMessage(commonMessages.time)}
+          name={`${name}:time`}
+          onChange={event => {
+            const time = event.target.value;
+            setValue(value => ({ ...value, time }));
+          }}
+          type="time"
+          value={value.time}
+        />
+      </Box>
       {error && (
-        <ErrorNoticeBar className={classes.errorNoticeBar} message={error} />
+        <ErrorNoticeBar
+          className={sprinkles({ marginTop: 3 })}
+          message={error}
+        />
       )}
     </>
   );
diff --git a/src/components/FileUploadField/FileUploadField.tsx b/src/components/FileUploadField/FileUploadField.tsx
index c3b07d485c7..9c6ee63ed2d 100644
--- a/src/components/FileUploadField/FileUploadField.tsx
+++ b/src/components/FileUploadField/FileUploadField.tsx
@@ -56,7 +56,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = props => {
 
   return (
     <>
-      <Box display="flex" justifyContent="flex-end">
+      <Box display="flex" justifyContent="flex-start" alignItems="center">
         {file.label ? (
           <Box display="flex" gap={2} alignItems="center">
             <Text variant="caption">
@@ -89,7 +89,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = props => {
           </Button>
         )}
         {error && (
-          <Text variant="caption" color="textCriticalDefault">
+          <Text variant="caption" color="textCriticalDefault" paddingLeft={3}>
             {helperText}
           </Text>
         )}
diff --git a/src/components/Layouts/Detail/RightSidebar.tsx b/src/components/Layouts/Detail/RightSidebar.tsx
index e8084d12847..c7c210dc50c 100644
--- a/src/components/Layouts/Detail/RightSidebar.tsx
+++ b/src/components/Layouts/Detail/RightSidebar.tsx
@@ -17,6 +17,7 @@ export const RightSidebar: React.FC<DetailPageLayoutRightSidebarProps> = ({
     borderLeftWidth={1}
     gridColumn={"8"}
     gridRow={{ mobile: "6", tablet: "full", desktop: "full" }}
+    paddingBottom={6}
   >
     {children}
   </Box>
diff --git a/src/components/MediaTile/MediaTile.tsx b/src/components/MediaTile/MediaTile.tsx
index 95cee8ef533..24e8ab5f6ba 100644
--- a/src/components/MediaTile/MediaTile.tsx
+++ b/src/components/MediaTile/MediaTile.tsx
@@ -1,6 +1,7 @@
 import { IconButton } from "@dashboard/components/IconButton";
 import { CircularProgress } from "@material-ui/core";
 import { DeleteIcon, EditIcon, makeStyles } from "@saleor/macaw-ui";
+import { vars } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
 
@@ -23,7 +24,7 @@ const useStyles = makeStyles(
       borderRadius: theme.spacing(),
       height: 148,
       overflow: "hidden",
-      padding: theme.spacing(2),
+      padding: vars.spacing[1],
       position: "relative",
       width: 148,
     },
diff --git a/src/components/Metadata/Metadata.test.tsx b/src/components/Metadata/Metadata.test.tsx
index f520196b30c..5c4f3085dcb 100644
--- a/src/components/Metadata/Metadata.test.tsx
+++ b/src/components/Metadata/Metadata.test.tsx
@@ -24,14 +24,14 @@ describe("Metadata editor", () => {
     // Arrange
     render(<Component />);
     const user = userEvent.setup();
-    const isExpandedAttribute = "data-test-expanded";
-    const editor = screen.getAllByTestId("metadata-editor")[0];
+    const isExpandedAttribute = "data-state";
+    const editor = screen.getAllByTestId("metadata-item")[0];
     // Assert
-    expect(editor).toHaveAttribute(isExpandedAttribute, "false");
+    expect(editor).toHaveAttribute(isExpandedAttribute, "closed");
     // Act
     await user.click(getFirstExpandIcon());
     // Assert
-    expect(editor).toHaveAttribute(isExpandedAttribute, "true");
+    expect(editor).toHaveAttribute(isExpandedAttribute, "open");
   });
 
   xit("can edit field name", async () => {
diff --git a/src/components/Metadata/Metadata.tsx b/src/components/Metadata/Metadata.tsx
index 917b97ab262..e0cf7021cfa 100644
--- a/src/components/Metadata/Metadata.tsx
+++ b/src/components/Metadata/Metadata.tsx
@@ -69,7 +69,7 @@ export const Metadata: React.FC<MetadataProps> = memo(({ data, onChange }) => {
   };
 
   return (
-    <Box display="grid" gap={2} paddingBottom={6}>
+    <Box paddingBottom={6}>
       <MetadataCard
         data={data?.metadata}
         isPrivate={false}
diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx
index de10a2f91c0..4bc7065223d 100644
--- a/src/components/Metadata/MetadataCard.tsx
+++ b/src/components/Metadata/MetadataCard.tsx
@@ -1,44 +1,12 @@
-import TableRowLink from "@dashboard/components/TableRowLink";
 import { MetadataInput } from "@dashboard/graphql";
 import { FormChange } from "@dashboard/hooks/useForm";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TextField,
-} from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import {
-  Box,
-  Button,
-  ChervonDownIcon,
-  ChervonUpIcon,
-  Text,
-  TrashBinIcon,
-  vars,
-} from "@saleor/macaw-ui/next";
+import { Accordion, Box, Button, Skeleton, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { DashboardCard } from "../Card";
-import Skeleton from "../Skeleton";
+import { MetadataCardTable } from "./MetadataCardTable";
 import { EventDataAction } from "./types";
-import { nameInputPrefix, nameSeparator, valueInputPrefix } from "./utils";
-
-const useStyles = makeStyles(
-  theme => ({
-    input: {
-      padding: theme.spacing(0.5, 2),
-    },
-    nameInput: {
-      padding: "13px 16px",
-    },
-  }),
-  {
-    name: "Metadata",
-  },
-);
 
 export interface MetadataCardProps {
   data: MetadataInput[];
@@ -52,196 +20,92 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
   onChange,
 }) => {
   const intl = useIntl();
-  const [expanded, setExpanded] = React.useState(false);
-  const classes = useStyles();
+  const title = isPrivate
+    ? {
+        id: "ETHnjq",
+        defaultMessage: "Private Metadata",
+        description: "header",
+      }
+    : {
+        id: "VcI+Zh",
+        defaultMessage: "Metadata",
+        description: "header",
+      };
 
   return (
     <DashboardCard
+      paddingTop={6}
       data-test-id="metadata-editor"
       data-test-is-private={isPrivate}
-      data-test-expanded={expanded}
-      gap={1}
     >
-      <DashboardCard.Title>
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          onClick={() => setExpanded(!expanded)}
-          cursor="pointer"
-        >
-          {isPrivate
-            ? intl.formatMessage({
-                id: "ETHnjq",
-                defaultMessage: "Private Metadata",
-                description: "header",
-              })
-            : intl.formatMessage({
-                id: "VcI+Zh",
-                defaultMessage: "Metadata",
-                description: "header",
-              })}
-          <Button
-            variant="secondary"
-            data-test-id="expand"
-            type="button"
-            icon={expanded ? <ChervonUpIcon /> : <ChervonDownIcon />}
-          />
-        </Box>
-      </DashboardCard.Title>
-      {data === undefined ? (
-        <DashboardCard.Content>
-          <Skeleton />
-        </DashboardCard.Content>
-      ) : (
-        <>
-          {data.length > 0 && (
-            <DashboardCard.Content>
-              <Text variant="caption">
-                <FormattedMessage
-                  id="2+v1wX"
-                  defaultMessage="{number,plural,one{{number} string} other{{number} strings}}"
-                  description="number of metadata fields in model"
-                  values={{
-                    number: data.length,
-                  }}
-                />
-              </Text>
-            </DashboardCard.Content>
-          )}
-          {expanded && (
-            <>
-              {data.length === 0 ? (
-                <DashboardCard.Content>
+      <DashboardCard.Content>
+        <Accordion>
+          <Accordion.Item
+            data-test-id="metadata-item"
+            value="metadata-accordion"
+          >
+            <Accordion.Trigger>
+              <Box display="flex" flexDirection="column" gap={2}>
+                <Text variant="heading">{intl.formatMessage(title)}</Text>
+
+                {data?.length > 0 && (
                   <Text variant="caption" color="textNeutralSubdued">
                     <FormattedMessage
-                      id="cY6H2C"
-                      defaultMessage="No metadata created for this element. Use the button below to add new metadata field."
+                      id="2+v1wX"
+                      defaultMessage="{number,plural,one{{number} string} other{{number} strings}}"
+                      description="number of metadata fields in model"
+                      values={{
+                        number: data.length,
+                      }}
+                    />
+                  </Text>
+                )}
+
+                {data?.length === 0 && (
+                  <Text variant="caption" color="textNeutralSubdued">
+                    <FormattedMessage
+                      id="kAPaN6"
+                      defaultMessage="Empty"
                       description="empty metadata text"
                     />
                   </Text>
-                </DashboardCard.Content>
+                )}
+              </Box>
+
+              <Accordion.TriggerButton dataTestId="expand" />
+            </Accordion.Trigger>
+            <Accordion.Content>
+              {data === undefined ? (
+                <Skeleton />
               ) : (
-                <Table>
-                  <TableHead>
-                    <TableRowLink>
-                      <TableCell style={{ paddingLeft: vars.spacing[6] }}>
-                        <Text variant="caption" color="textNeutralSubdued">
-                          <FormattedMessage
-                            id="nudPsY"
-                            defaultMessage="Field"
-                            description="metadata field name, header"
-                          />
-                        </Text>
-                      </TableCell>
-                      <TableCell style={{ paddingLeft: vars.spacing[8] }}>
-                        <Text variant="caption" color="textNeutralSubdued">
-                          <FormattedMessage
-                            id="LkuDEb"
-                            defaultMessage="Value"
-                            description="metadata field value, header"
-                          />
-                        </Text>
-                      </TableCell>
-                      <TableCell
-                        style={{
-                          textAlign: "end",
-                          paddingRight: vars.spacing[6],
-                        }}
-                      >
-                        <Text variant="caption" color="textNeutralSubdued">
-                          <FormattedMessage
-                            id="nEixpu"
-                            defaultMessage="Actions"
-                            description="table action"
-                          />
-                        </Text>
-                      </TableCell>
-                    </TableRowLink>
-                  </TableHead>
-                  <TableBody>
-                    {data.map((field, fieldIndex) => (
-                      <TableRowLink data-test-id="field" key={fieldIndex}>
-                        <TableCell style={{ paddingLeft: vars.spacing[6] }}>
-                          <TextField
-                            InputProps={{
-                              classes: {
-                                input: classes.nameInput,
-                              },
-                            }}
-                            inputProps={{
-                              "aria-label": `${nameInputPrefix}${nameSeparator}${fieldIndex}`,
-                            }}
-                            name={`${nameInputPrefix}${nameSeparator}${fieldIndex}`}
-                            fullWidth
-                            onChange={onChange}
-                            value={field.key}
-                          />
-                        </TableCell>
-                        <TableCell>
-                          <TextField
-                            InputProps={{
-                              classes: {
-                                root: classes.input,
-                              },
-                            }}
-                            inputProps={{
-                              "aria-label": `${valueInputPrefix}${nameSeparator}${fieldIndex}`,
-                            }}
-                            multiline
-                            name={`${valueInputPrefix}${nameSeparator}${fieldIndex}`}
-                            fullWidth
-                            onChange={onChange}
-                            value={field.value}
-                          />
-                        </TableCell>
-                        <TableCell style={{ paddingRight: vars.spacing[6] }}>
-                          <Box display="flex" justifyContent="flex-end">
-                            <Button
-                              variant="secondary"
-                              data-test-id={"delete-field-" + fieldIndex}
-                              onClick={() =>
-                                onChange({
-                                  target: {
-                                    name: EventDataAction.delete,
-                                    value: fieldIndex,
-                                  },
-                                })
-                              }
-                              type="button"
-                              icon={<TrashBinIcon />}
-                            />
-                          </Box>
-                        </TableCell>
-                      </TableRowLink>
-                    ))}
-                  </TableBody>
-                </Table>
+                <>
+                  <MetadataCardTable data={data} onChange={onChange} />
+
+                  <Button
+                    marginTop={2}
+                    variant="secondary"
+                    data-test-id="add-field"
+                    onClick={() =>
+                      onChange({
+                        target: {
+                          name: EventDataAction.add,
+                          value: null,
+                        },
+                      })
+                    }
+                  >
+                    <FormattedMessage
+                      id="GiDxS4"
+                      defaultMessage="Add Field"
+                      description="add metadata field,button"
+                    />
+                  </Button>
+                </>
               )}
-              <DashboardCard.Content marginTop={2} paddingLeft={6}>
-                <Button
-                  variant="secondary"
-                  data-test-id="add-field"
-                  type="button"
-                  onClick={() =>
-                    onChange({
-                      target: {
-                        name: EventDataAction.add,
-                        value: null,
-                      },
-                    })
-                  }
-                >
-                  <FormattedMessage
-                    id="GiDxS4"
-                    defaultMessage="Add Field"
-                    description="add metadata field,button"
-                  />
-                </Button>
-              </DashboardCard.Content>
-            </>
-          )}
-        </>
-      )}
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </DashboardCard.Content>
     </DashboardCard>
   );
 };
diff --git a/src/components/Metadata/MetadataCardTable.tsx b/src/components/Metadata/MetadataCardTable.tsx
new file mode 100644
index 00000000000..de04fb95002
--- /dev/null
+++ b/src/components/Metadata/MetadataCardTable.tsx
@@ -0,0 +1,122 @@
+import TableRowLink from "@dashboard/components/TableRowLink";
+import { MetadataInput } from "@dashboard/graphql";
+import { FormChange } from "@dashboard/hooks/useForm";
+import { Table, TableBody, TableCell, TableHead } from "@material-ui/core";
+import {
+  Box,
+  Button,
+  Input,
+  Text,
+  Textarea,
+  TrashBinIcon,
+  vars,
+} from "@saleor/macaw-ui/next";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { EventDataAction } from "./types";
+import { nameInputPrefix, nameSeparator, valueInputPrefix } from "./utils";
+
+interface MetadataCardTableProps {
+  data: MetadataInput[];
+  onChange: FormChange;
+}
+
+export const MetadataCardTable = ({
+  data,
+  onChange,
+}: MetadataCardTableProps) => {
+  if (!data || data.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box __marginLeft={-24} __marginRight={-24}>
+      <Table>
+        <TableHead>
+          <TableRowLink>
+            <TableCell style={{ paddingLeft: vars.spacing[6] }}>
+              <Text variant="caption" color="textNeutralSubdued">
+                <FormattedMessage
+                  id="nudPsY"
+                  defaultMessage="Field"
+                  description="metadata field name, header"
+                />
+              </Text>
+            </TableCell>
+            <TableCell style={{ paddingLeft: vars.spacing[8] }}>
+              <Text variant="caption" color="textNeutralSubdued">
+                <FormattedMessage
+                  id="LkuDEb"
+                  defaultMessage="Value"
+                  description="metadata field value, header"
+                />
+              </Text>
+            </TableCell>
+            <TableCell
+              style={{
+                textAlign: "end",
+                paddingRight: vars.spacing[6],
+              }}
+            >
+              <Text variant="caption" color="textNeutralSubdued">
+                <FormattedMessage
+                  id="nEixpu"
+                  defaultMessage="Actions"
+                  description="table action"
+                />
+              </Text>
+            </TableCell>
+          </TableRowLink>
+        </TableHead>
+        <TableBody>
+          {data.map((field, fieldIndex) => (
+            <TableRowLink data-test-id="field" key={fieldIndex}>
+              <TableCell style={{ paddingLeft: vars.spacing[6] }}>
+                <Input
+                  width="100%"
+                  size="small"
+                  aria-label={`${nameInputPrefix}${nameSeparator}${fieldIndex}`}
+                  name={`${nameInputPrefix}${nameSeparator}${fieldIndex}`}
+                  onChange={onChange}
+                  value={field.key}
+                />
+              </TableCell>
+              <TableCell>
+                <Box paddingY={3}>
+                  <Textarea
+                    width="100%"
+                    rows={1}
+                    size="small"
+                    aria-label={`${valueInputPrefix}${nameSeparator}${fieldIndex}`}
+                    name={`${valueInputPrefix}${nameSeparator}${fieldIndex}`}
+                    onChange={onChange}
+                    value={field.value}
+                  />
+                </Box>
+              </TableCell>
+              <TableCell style={{ paddingRight: vars.spacing[6] }}>
+                <Box display="flex" justifyContent="flex-end">
+                  <Button
+                    variant="secondary"
+                    data-test-id={"delete-field-" + fieldIndex}
+                    onClick={() =>
+                      onChange({
+                        target: {
+                          name: EventDataAction.delete,
+                          value: fieldIndex,
+                        },
+                      })
+                    }
+                    type="button"
+                    icon={<TrashBinIcon />}
+                  />
+                </Box>
+              </TableCell>
+            </TableRowLink>
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  );
+};
diff --git a/src/components/PriceField/PriceField.tsx b/src/components/PriceField/PriceField.tsx
index abe3865828b..5ee0c625850 100644
--- a/src/components/PriceField/PriceField.tsx
+++ b/src/components/PriceField/PriceField.tsx
@@ -1,36 +1,9 @@
 // @ts-strict-ignore
-import { InputAdornment, InputLabelProps, TextField } from "@material-ui/core";
-import { InputProps } from "@material-ui/core/Input";
-import { makeStyles } from "@saleor/macaw-ui";
+import { Input, InputProps, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 
 import { usePriceField } from "./usePriceField";
-
-const useStyles = makeStyles(
-  theme => ({
-    currencySymbol: {
-      fontSize: "0.875rem",
-    },
-    inputContainer: {
-      display: "grid",
-      gridTemplateColumns: "1fr 2rem 1fr",
-    },
-    pullDown: {
-      marginTop: theme.spacing(2),
-    },
-    separator: {
-      marginTop: theme.spacing(3),
-      textAlign: "center",
-      width: "100%",
-    },
-    widgetContainer: {
-      marginTop: theme.spacing(2),
-    },
-  }),
-  { name: "PriceField" },
-);
-
-export interface PriceFieldProps {
+export interface PriceFieldProps extends InputProps {
   className?: string;
   currencySymbol?: string;
   disabled?: boolean;
@@ -39,9 +12,7 @@ export interface PriceFieldProps {
   label?: string;
   name?: string;
   value?: string;
-  InputProps?: InputProps;
-  inputProps?: InputProps["inputProps"];
-  InputLabelProps?: InputLabelProps;
+  minValue?: string;
   required?: boolean;
   onChange: (event: any) => any;
 }
@@ -58,53 +29,37 @@ export const PriceField: React.FC<PriceFieldProps> = props => {
     onChange: onChangeBase,
     required,
     value,
-    InputProps,
-    InputLabelProps,
-    inputProps,
+    ...inputProps
   } = props;
 
-  const classes = useStyles(props);
   const { onChange, onKeyDown, minValue, step } = usePriceField(
     currencySymbol,
     onChangeBase,
   );
 
   return (
-    <TextField
+    <Input
+      size="small"
       className={className}
+      disabled={disabled}
+      label={label}
+      data-test-id="price-field"
       error={error}
       helperText={hint}
-      label={label}
-      fullWidth
       value={value}
-      InputLabelProps={InputLabelProps}
-      data-test-id="price-field"
-      InputProps={{
-        ...InputProps,
-        endAdornment: currencySymbol ? (
-          <InputAdornment position="end" className={classes.currencySymbol}>
-            {currencySymbol}
-          </InputAdornment>
-        ) : (
-          <span />
-        ),
-        inputProps: {
-          min: 0,
-          step,
-          ...InputProps?.inputProps,
-        },
-        type: "number",
-      }}
-      inputProps={{
-        min: minValue,
-        type: "number",
-        ...inputProps,
-      }}
+      min={props.minValue || minValue}
+      step={step}
       name={name}
-      disabled={disabled}
       required={required}
       onChange={onChange}
       onKeyDown={onKeyDown}
+      type="number"
+      endAdornment={
+        <Text variant="caption" marginRight={2}>
+          {currencySymbol || ""}
+        </Text>
+      }
+      {...inputProps}
     />
   );
 };
diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
index fadcdb76134..c619519a1e5 100644
--- a/src/components/RichTextEditor/RichTextEditor.tsx
+++ b/src/components/RichTextEditor/RichTextEditor.tsx
@@ -1,8 +1,9 @@
 // @ts-strict-ignore
 import { LogLevels } from "@editorjs/editorjs";
-import { FormControl, FormHelperText, InputLabel } from "@material-ui/core";
+import { FormControl, FormHelperText } from "@material-ui/core";
 import { useId } from "@reach/auto-id";
 import { EditorCore, Props as ReactEditorJSProps } from "@react-editor-js/core";
+import { Box } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
 import { createReactEditorJS } from "react-editor-js";
@@ -72,19 +73,19 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
       fullWidth
       variant="outlined"
     >
-      <InputLabel
-        focused={true}
-        shrink={true}
-        classes={{
-          disabled: classes.labelDisabled,
-          error: classes.labelError,
-          root: classes.labelRoot,
-        }}
-        error={error}
-        disabled={disabled}
+      <Box
+        as="label"
+        color={error ? "textCriticalSubdued" : "textNeutralSubdued"}
+        fontWeight="bodySmall"
+        fontSize="captionSmall"
+        position="absolute"
+        htmlFor={id}
+        zIndex="2"
+        __top={9}
+        __left={9}
       >
         {label}
-      </InputLabel>
+      </Box>
       {hasRendered && (
         <ReactEditorJS
           // match with the id of holder div
@@ -107,6 +108,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
               [classes.rootActive]: isFocused,
               [classes.rootDisabled]: disabled,
               [classes.rootError]: error,
+              [classes.rootHasLabel]: label !== "",
               [classes.rootTyped]:
                 isTyped || props.defaultValue?.blocks?.length > 0,
             })}
@@ -115,7 +117,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
           />
         </ReactEditorJS>
       )}
-      <FormHelperText>{helperText}</FormHelperText>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </FormControl>
   );
 };
diff --git a/src/components/RichTextEditor/styles.ts b/src/components/RichTextEditor/styles.ts
index 470be757df4..4f5b9628c38 100644
--- a/src/components/RichTextEditor/styles.ts
+++ b/src/components/RichTextEditor/styles.ts
@@ -114,16 +114,13 @@ const useStyles = makeStyles(
         },
       },
       root: {
-        border: "1px solid transparent",
+        border: `1px solid ${vars.colors.border.neutralPlain}`,
         borderRadius: vars.borderRadius[3],
         fontSize: vars.fontSize.bodyMedium,
-        backgroundColor: vars.colors.background.surfaceNeutralHighlight,
-        minHeight: 56,
         position: "relative",
         transition: theme.transitions.duration.short + "ms",
-        padding: theme.spacing(3, 2),
-        paddingBottom: theme.spacing(),
-        paddingLeft: vars.spacing[4],
+        padding: theme.spacing(0, 2),
+        paddingLeft: vars.spacing[2],
         "&:hover": {
           border: `1px solid ${vars.colors.border.neutralHighlight}`,
         },
@@ -145,7 +142,7 @@ const useStyles = makeStyles(
         fontSize: theme.typography.body1.fontSize,
       },
       labelRoot: {
-        marginLeft: "-6px",
+        marginLeft: "-4px",
         color: `${vars.colors.foreground.textNeutralSubdued} !important`,
       },
       labelError: {
@@ -160,6 +157,11 @@ const useStyles = makeStyles(
       rootTyped: {
         backgroundColor: vars.colors.background.surfaceNeutralPlain,
       },
+      rootHasLabel: {
+        minHeight: 56,
+        padding: `${vars.spacing[6]} ${vars.spacing[2]}`,
+        paddingBottom: vars.spacing[1.5],
+      },
     };
   },
   { name: "RichTextEditor" },
diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx
index bfc79338757..258e6877ec7 100644
--- a/src/components/SeoForm/SeoForm.tsx
+++ b/src/components/SeoForm/SeoForm.tsx
@@ -6,9 +6,7 @@ import {
 } from "@dashboard/graphql";
 import { getFieldError, getProductErrorMessage } from "@dashboard/utils/errors";
 import getPageErrorMessage from "@dashboard/utils/errors/page";
-import { TextField } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
-import { Box, Button, Input, Text } from "@saleor/macaw-ui/next";
+import { Accordion, Box, Input, Text, Textarea } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -25,21 +23,6 @@ const maxSlugLength = 255;
 const maxTitleLength = 70;
 const maxDescriptionLength = 300;
 
-const useStyles = makeStyles(
-  {
-    label: {
-      flex: 1,
-    },
-    labelContainer: {
-      "& span": {
-        paddingRight: 30,
-      },
-      display: "flex",
-    },
-  },
-  { name: "SeoForm" },
-);
-
 interface SeoFormProps {
   description?: string | null;
   descriptionPlaceholder: string;
@@ -64,7 +47,6 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
     descriptionPlaceholder,
     disabled,
     errors = [],
-    helperText,
     loading,
     title,
     slug,
@@ -72,16 +54,8 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
     titlePlaceholder,
     onChange,
   } = props;
-  const classes = useStyles(props);
-
   const intl = useIntl();
 
-  const [expanded, setExpansionStatus] = React.useState(false);
-
-  const toggleExpansion = () => setExpansionStatus(!expanded);
-
-  const shouldDisplayHelperText = helperText && !expanded;
-
   const getSlugHelperMessage = () => {
     const error = !!getError(SeoField.slug);
 
@@ -105,139 +79,147 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
     }
   };
 
+  const completed =
+    slug?.length > 0 && title.length > 0 && description?.length > 0;
+
   const getError = (fieldName: SeoField) => getFieldError(errors, fieldName);
 
   return (
-    <DashboardCard>
-      <DashboardCard.Title>
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <FormattedMessage
-            defaultMessage="Search Engine Preview"
-            id="TGX4T1"
-          />
-          <Button
-            variant="secondary"
-            onClick={toggleExpansion}
-            data-test-id="edit-seo"
-            type="button"
-          >
-            <FormattedMessage
-              id="s5Imt5"
-              defaultMessage="Edit website SEO"
-              description="button"
-            />
-          </Button>
-        </Box>
-      </DashboardCard.Title>
+    <DashboardCard paddingTop={6}>
       <DashboardCard.Content>
-        {shouldDisplayHelperText && <Text>{helperText}</Text>}
-        {expanded && (
-          <Box display="grid" gap={2}>
-            <Box>
-              <Input
-                error={!!getError(SeoField.slug) || slug.length > maxSlugLength}
-                name={SeoField.slug}
-                label={
-                  <Box display="flex" gap={1}>
-                    <Box as="span">
-                      <FormattedMessage defaultMessage="Slug" id="IoDlcd" />
-                    </Box>
-                    {slug?.length > 0 && (
-                      <Box as="span">
-                        <FormattedMessage
-                          defaultMessage="({numberOfCharacters} of {maxCharacters} characters)"
-                          id="yi1HSj"
-                          values={{
-                            maxCharacters: maxSlugLength,
-                            numberOfCharacters: slug?.length,
-                          }}
-                        />
-                      </Box>
-                    )}
-                  </Box>
-                }
-                helperText={getSlugHelperMessage()}
-                size="small"
-                value={slug}
-                onChange={handleSlugChange}
-                disabled={loading || disabled}
-                maxLength={maxSlugLength}
-                placeholder={slugPlaceholder}
-              />
-            </Box>
-            <Input
-              size="small"
-              error={title?.length > maxTitleLength}
-              name={SeoField.title}
-              value={title ?? ""}
-              disabled={loading || disabled}
-              onChange={onChange}
-              maxLength={maxTitleLength}
-              placeholder={titlePlaceholder}
-              label={
-                <Box display="flex" gap={1}>
-                  <Box as="span">
+        <Accordion>
+          <Accordion.Item value="seo-accordion">
+            <Accordion.Trigger>
+              <Box display="grid" gap={2}>
+                <Text variant="heading">
+                  <FormattedMessage
+                    defaultMessage="Search Engine Preview"
+                    id="TGX4T1"
+                  />
+                </Text>
+                <Text variant="caption" color="textNeutralSubdued">
+                  {completed ? (
                     <FormattedMessage
-                      defaultMessage="Search engine title"
-                      id="w2Cewo"
+                      id="bGqAdR"
+                      defaultMessage="Complete"
+                      description="seo complete text"
                     />
-                  </Box>
-                  {title?.length > 0 && (
-                    <Box as="span">
-                      <FormattedMessage
-                        defaultMessage="({numberOfCharacters} of {maxCharacters} characters)"
-                        id="yi1HSj"
-                        values={{
-                          maxCharacters: maxTitleLength,
-                          numberOfCharacters: title?.length,
-                        }}
-                      />
-                    </Box>
-                  )}
-                </Box>
-              }
-            />
-            <TextField
-              error={description?.length > maxDescriptionLength}
-              name={SeoField.description}
-              label={
-                <div className={classes.labelContainer}>
-                  <div className={classes.label}>
+                  ) : (
                     <FormattedMessage
-                      id="CXTIq8"
-                      defaultMessage="Search engine description"
+                      id="y8E0iG"
+                      defaultMessage="Incomplete"
+                      description="seo incomplete text"
                     />
-                  </div>
-                  {description?.length > 0 && (
-                    <span>
-                      <FormattedMessage
-                        id="ChAjJu"
-                        defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
-                        description="character limit"
-                        values={{
-                          maxCharacters: maxDescriptionLength,
-                          numberOfCharacters: description.length,
-                        }}
-                      />
-                    </span>
                   )}
-                </div>
-              }
-              InputProps={{
-                inputProps: {
-                  maxLength: maxDescriptionLength,
-                },
-              }}
-              value={description ?? ""}
-              onChange={onChange}
-              disabled={loading || disabled}
-              fullWidth
-              multiline
-              placeholder={descriptionPlaceholder}
-              rows={10}
-            />
-          </Box>
-        )}
+                </Text>
+              </Box>
+              <Accordion.TriggerButton dataTestId="edit-seo" />
+            </Accordion.Trigger>
+            <Accordion.Content>
+              <Box display="grid" gap={2} marginTop={4}>
+                <Box>
+                  <Input
+                    error={
+                      !!getError(SeoField.slug) || slug.length > maxSlugLength
+                    }
+                    name={SeoField.slug}
+                    label={
+                      <Box display="flex" gap={1}>
+                        <Box as="span">
+                          <FormattedMessage defaultMessage="Slug" id="IoDlcd" />
+                        </Box>
+                        {slug?.length > 0 && (
+                          <Box as="span">
+                            <FormattedMessage
+                              defaultMessage="({numberOfCharacters} of {maxCharacters} characters)"
+                              id="yi1HSj"
+                              values={{
+                                maxCharacters: maxSlugLength,
+                                numberOfCharacters: slug?.length,
+                              }}
+                            />
+                          </Box>
+                        )}
+                      </Box>
+                    }
+                    helperText={getSlugHelperMessage()}
+                    size="small"
+                    value={slug}
+                    onChange={handleSlugChange}
+                    disabled={loading || disabled}
+                    maxLength={maxSlugLength}
+                    placeholder={slugPlaceholder}
+                  />
+                </Box>
+                <Input
+                  size="small"
+                  error={title?.length > maxTitleLength}
+                  name={SeoField.title}
+                  value={title ?? ""}
+                  disabled={loading || disabled}
+                  onChange={onChange}
+                  maxLength={maxTitleLength}
+                  placeholder={titlePlaceholder}
+                  label={
+                    <Box display="flex" gap={1}>
+                      <Box as="span">
+                        <FormattedMessage
+                          defaultMessage="Search engine title"
+                          id="w2Cewo"
+                        />
+                      </Box>
+                      {title?.length > 0 && (
+                        <Box as="span">
+                          <FormattedMessage
+                            defaultMessage="({numberOfCharacters} of {maxCharacters} characters)"
+                            id="yi1HSj"
+                            values={{
+                              maxCharacters: maxTitleLength,
+                              numberOfCharacters: title?.length,
+                            }}
+                          />
+                        </Box>
+                      )}
+                    </Box>
+                  }
+                />
+
+                <Textarea
+                  error={description?.length > maxDescriptionLength}
+                  name={SeoField.description}
+                  value={description ?? ""}
+                  disabled={loading || disabled}
+                  onChange={onChange}
+                  maxLength={maxDescriptionLength}
+                  placeholder={descriptionPlaceholder}
+                  label={
+                    <Box display="flex" gap={1}>
+                      <span>
+                        <FormattedMessage
+                          id="CXTIq8"
+                          defaultMessage="Search engine description"
+                        />
+                      </span>
+                      {description?.length > 0 && (
+                        <span>
+                          <FormattedMessage
+                            id="ChAjJu"
+                            defaultMessage="{numberOfCharacters} of {maxCharacters} characters"
+                            description="character limit"
+                            values={{
+                              maxCharacters: maxDescriptionLength,
+                              numberOfCharacters: description.length,
+                            }}
+                          />
+                        </span>
+                      )}
+                    </Box>
+                  }
+                />
+              </Box>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
       </DashboardCard.Content>
     </DashboardCard>
   );
diff --git a/src/components/SortableChipsField/SortableChipsField.tsx b/src/components/SortableChipsField/SortableChipsField.tsx
index 0ba4eb1465a..7fe50291088 100644
--- a/src/components/SortableChipsField/SortableChipsField.tsx
+++ b/src/components/SortableChipsField/SortableChipsField.tsx
@@ -1,6 +1,6 @@
 import { ReorderAction, ReorderEvent } from "@dashboard/types";
-import { Typography } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
+import { Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { SortableContainerProps } from "react-sortable-hoc";
 
@@ -85,9 +85,9 @@ const SortableChipsField: React.FC<SortableChipsFieldProps> = props => {
           ))
         )}
         {error && (
-          <Typography variant="caption" className={classes.errorText}>
+          <Text variant="caption" color="textCriticalDefault">
             {helperText}
-          </Typography>
+          </Text>
         )}
       </div>
     </SortableContainer>
diff --git a/src/fragments/products.ts b/src/fragments/products.ts
index 84d52b8fd74..fd60743123d 100644
--- a/src/fragments/products.ts
+++ b/src/fragments/products.ts
@@ -46,7 +46,7 @@ export const fragmentProductMedia = gql`
     id
     alt
     sortOrder
-    url
+    url(size: 1024)
     type
     oembedData
   }
diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts
index 3763dd2df36..aa3e9ae4492 100644
--- a/src/graphql/hooks.generated.ts
+++ b/src/graphql/hooks.generated.ts
@@ -2353,7 +2353,7 @@ export const ProductMediaFragmentDoc = gql`
   id
   alt
   sortOrder
-  url
+  url(size: 1024)
   type
   oembedData
 }
diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts
index 207bfcb71d9..9f11c5a7ba2 100644
--- a/src/hooks/useForm.ts
+++ b/src/hooks/useForm.ts
@@ -46,6 +46,7 @@ export interface UseFormResult<TData>
   triggerChange: () => void;
   handleChange: FormChange;
   toggleValue: FormChange;
+  toggleValues: FormChange;
   errors: FormErrors<TData>;
   setError: (name: keyof TData, error: string | React.ReactNode) => void;
   clearErrors: (name?: keyof TData | Array<keyof TData>) => void;
@@ -156,6 +157,24 @@ function useForm<T extends FormData, TErrors>(
     }
   }
 
+  function toggleValues(event: ChangeEvent, cb?: () => void) {
+    const { name, value } = event.target;
+    const field = data[name as keyof T];
+
+    if (Array.isArray(field)) {
+      handleSetChanged(true);
+
+      setData({
+        ...data,
+        [name]: value,
+      });
+    }
+
+    if (typeof cb === "function") {
+      cb();
+    }
+  }
+
   const handleChange: FormChange = event => {
     change(event);
     handleSetChanged(true);
@@ -220,6 +239,7 @@ function useForm<T extends FormData, TErrors>(
     set,
     submit,
     toggleValue,
+    toggleValues,
     handleChange,
     triggerChange: handleSetChanged,
     setIsSubmitDisabled,
diff --git a/src/intl.ts b/src/intl.ts
index 172867d72d6..45fa85e39f4 100644
--- a/src/intl.ts
+++ b/src/intl.ts
@@ -215,6 +215,10 @@ export const commonMessages = defineMessages({
     defaultMessage: "Product",
     id: "x/ZVlU",
   },
+  loading: {
+    defaultMessage: "Loading...",
+    id: "gjBiyj",
+  },
 });
 
 export const errorMessages = defineMessages({
diff --git a/src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx b/src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx
index 9308df9a5be..7b32841b05b 100644
--- a/src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx
+++ b/src/orders/components/OrderGrantRefundPage/components/RefundCard.tsx
@@ -122,11 +122,7 @@ export const RefundCard = ({
             name={"amount" as keyof OrderGrantRefundFormData}
             currencySymbol={currency}
             value={form.data.amount}
-            InputProps={{
-              inputProps: {
-                "data-test-id": "amountInput",
-              },
-            }}
+            data-test-id="amountInput"
           />
         </div>
         <div className={classes.submitLine}>
diff --git a/src/orders/components/OrderManualTransactionForm/components/PriceInputField.tsx b/src/orders/components/OrderManualTransactionForm/components/PriceInputField.tsx
index 9140f49d36a..b616a4c2998 100644
--- a/src/orders/components/OrderManualTransactionForm/components/PriceInputField.tsx
+++ b/src/orders/components/OrderManualTransactionForm/components/PriceInputField.tsx
@@ -17,11 +17,7 @@ export const PriceInputField: React.FC<
       disabled={submitState === "loading" || disabled}
       onChange={handleChangeAmount}
       value={amount?.toString() ?? ""}
-      InputProps={{
-        inputProps: {
-          "data-test-id": "transactAmountInput",
-        },
-      }}
+      data-test-id="transactAmountInput"
     />
   );
 };
diff --git a/src/orders/components/OrderRefundReturnAmount/RefundAmountInput.tsx b/src/orders/components/OrderRefundReturnAmount/RefundAmountInput.tsx
index 59ef0c8c98a..359b2429dbf 100644
--- a/src/orders/components/OrderRefundReturnAmount/RefundAmountInput.tsx
+++ b/src/orders/components/OrderRefundReturnAmount/RefundAmountInput.tsx
@@ -94,11 +94,8 @@ const RefundAmountInput: React.FC<RefundAmountInputProps> = props => {
       value={data.amount}
       label={intl.formatMessage(messages.label)}
       className={classes.priceField}
-      InputProps={{ inputProps: { max: maxRefund?.amount } }}
-      inputProps={{
-        "data-test-id": "amountInput",
-        max: maxRefund?.amount,
-      }}
+      max={maxRefund?.amount}
+      data-test-id="amountInput"
       error={isError}
       hint={
         getOrderErrorMessage(formErrors.amount, intl) ||
diff --git a/src/orders/components/OrderSendRefundPage/components/TransactionCard.tsx b/src/orders/components/OrderSendRefundPage/components/TransactionCard.tsx
index 0ea19700317..34f7ed0471c 100644
--- a/src/orders/components/OrderSendRefundPage/components/TransactionCard.tsx
+++ b/src/orders/components/OrderSendRefundPage/components/TransactionCard.tsx
@@ -110,12 +110,9 @@ export const TransactionCard: React.FC<TransactionCardProps> = ({
                 <FormattedMessage {...refundPageMessages.setMax} />
               </Button>
               <PriceField
-                InputLabelProps={{ shrink: value !== undefined }}
-                inputProps={{
-                  id: inputId,
-                  "aria-invalid": !!submitError ? "true" : "false",
-                  "aria-describedby": errorId,
-                }}
+                id={inputId}
+                aria-invalid={!!submitError ? "true" : "false"}
+                aria-describedby={errorId}
                 disabled={loading}
                 className={classes.input}
                 label={intl.formatMessage(refundPageMessages.refundAmount)}
diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
index 391a5c52622..4f072c368fd 100644
--- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx
+++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx
@@ -8,12 +8,10 @@ import { ChannelData } from "@dashboard/channels/utils";
 import { TopNav } from "@dashboard/components/AppLayout/TopNav";
 import AssignAttributeValueDialog from "@dashboard/components/AssignAttributeValueDialog";
 import { AttributeInput, Attributes } from "@dashboard/components/Attributes";
-import CardSpacer from "@dashboard/components/CardSpacer";
 import ChannelsAvailabilityCard from "@dashboard/components/ChannelsAvailabilityCard";
 import { ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata";
-import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
 import Savebar from "@dashboard/components/Savebar";
 import { SeoForm } from "@dashboard/components/SeoForm";
 import {
@@ -39,6 +37,7 @@ import {
   productListUrl,
 } from "@dashboard/products/urls";
 import { getChoices } from "@dashboard/products/utils/data";
+import { Box, Option } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -153,7 +152,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
   );
 
   const [selectedCollections, setSelectedCollections] = useStateFromProps<
-    MultiAutocompleteChoiceType[]
+    Option[]
   >([]);
 
   const [selectedTaxClass, setSelectedTaxClass] = useStateFromProps(
@@ -217,7 +216,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
       {({
         change,
         data,
-        formErrors,
         validationErrors,
         handlers,
         submit,
@@ -243,7 +241,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                 errors={errors}
                 onChange={change}
               />
-              <CardSpacer />
               {data.attributes.length > 0 && (
                 <Attributes
                   attributes={data.attributes}
@@ -273,7 +270,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                     onChange={change}
                   />
                   <ProductVariantPrice
-                    ProductVariantChannelListings={data.channelListings}
+                    productVariantChannelListings={data.channelListings}
                     errors={[...errors, ...channelsErrors]}
                     loading={loading}
                     onChange={handlers.changeChannelPrice}
@@ -284,16 +281,13 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                     hasVariants={false}
                     onFormDataChange={change}
                     errors={errors}
-                    formErrors={formErrors}
                     stocks={data.stocks}
                     warehouses={warehouses}
                     onChange={handlers.changeStock}
-                    onChangePreorderEndDate={handlers.changePreorderEndDate}
                     onWarehouseStockAdd={handlers.addStock}
                     onWarehouseStockDelete={handlers.deleteStock}
                     onWarehouseConfigure={onWarehouseConfigure}
                   />
-                  <CardSpacer />
                 </>
               )}
               <SeoForm
@@ -363,15 +357,16 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
               ) : (
                 <CannotDefineChannelsAvailabilityCard />
               )}
-              <CardSpacer />
-              <ProductTaxes
-                value={data.taxClassId}
-                disabled={loading}
-                onChange={handlers.selectTaxClass}
-                taxClassDisplayName={selectedTaxClass}
-                taxClasses={taxClasses}
-                onFetchMore={fetchMoreTaxClasses}
-              />
+              <Box paddingBottom={52}>
+                <ProductTaxes
+                  value={data.taxClassId}
+                  disabled={loading}
+                  onChange={handlers.selectTaxClass}
+                  taxClassDisplayName={selectedTaxClass}
+                  taxClasses={taxClasses}
+                  onFetchMore={fetchMoreTaxClasses}
+                />
+              </Box>
             </DetailPageLayout.RightSidebar>
             <Savebar
               onCancel={() => navigate(productListUrl())}
diff --git a/src/products/components/ProductCreatePage/form.tsx b/src/products/components/ProductCreatePage/form.tsx
index 77cfaa46cae..b68b39b9367 100644
--- a/src/products/components/ProductCreatePage/form.tsx
+++ b/src/products/components/ProductCreatePage/form.tsx
@@ -60,13 +60,14 @@ import {
 } from "@dashboard/products/utils/validation";
 import { PRODUCT_CREATE_FORM_ID } from "@dashboard/products/views/ProductCreate/consts";
 import { FetchMoreProps, RelayToFlat, ReorderEvent } from "@dashboard/types";
-import createMultiAutocompleteSelectHandler from "@dashboard/utils/handlers/multiAutocompleteSelectChangeHandler";
+import createMultiselectChangeHandler from "@dashboard/utils/handlers/multiselectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@dashboard/utils/handlers/singleAutocompleteSelectChangeHandler";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
 import { RichTextContext } from "@dashboard/utils/richText/context";
 import { useMultipleRichText } from "@dashboard/utils/richText/useMultipleRichText";
 import useRichText from "@dashboard/utils/richText/useRichText";
 import { OutputData } from "@editorjs/editorjs";
+import { Option } from "@saleor/macaw-ui/next";
 import React, { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 
@@ -76,7 +77,7 @@ import { ProductStockFormsetData, ProductStockInput } from "../ProductStocks";
 export interface ProductCreateFormData extends MetadataFormData {
   category: string;
   channelListings: ChannelData[];
-  collections: string[];
+  collections: Option[];
   description: OutputData;
   isAvailable: boolean;
   name: string;
@@ -228,7 +229,7 @@ function useProductCreateForm(
 
   const {
     triggerChange,
-    toggleValue,
+    toggleValues,
     handleChange,
     data: formData,
     formId,
@@ -256,11 +257,9 @@ function useProductCreateForm(
   const { makeChangeHandler: makeMetadataChangeHandler } =
     useMetadataChangeTrigger();
 
-  const handleCollectionSelect = createMultiAutocompleteSelectHandler(
-    toggleValue,
+  const handleCollectionSelect = createMultiselectChangeHandler(
+    toggleValues,
     opts.setSelectedCollections,
-    opts.selectedCollections,
-    opts.collections,
   );
   const handleCategorySelect = createSingleAutocompleteSelectHandler(
     handleChange,
diff --git a/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx b/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx
index a62320f0f2d..99e5b2ab280 100644
--- a/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx
+++ b/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx
@@ -39,7 +39,7 @@ export const ProductDetailsForm: React.FC<ProductDetailsFormProps> = ({
       <DashboardCard.Title>
         {intl.formatMessage(commonMessages.generalInformations)}
       </DashboardCard.Title>
-      <DashboardCard.Content display="grid" gap={2} paddingX={5}>
+      <DashboardCard.Content display="grid" gap={2}>
         <Input
           label={intl.formatMessage({
             id: "6AMFki",
diff --git a/src/products/components/ProductMedia/ProductMedia.tsx b/src/products/components/ProductMedia/ProductMedia.tsx
index ff5d5395765..926276c68a9 100644
--- a/src/products/components/ProductMedia/ProductMedia.tsx
+++ b/src/products/components/ProductMedia/ProductMedia.tsx
@@ -212,9 +212,9 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
                     preview={imagesToUpload}
                     onSortEnd={onImageReorder}
                     className={sprinkles({
-                      display: "grid",
+                      display: "flex",
                       gap: 5,
-                      gridTemplateColumns: { mobile: 2, tablet: 3, desktop: 4 },
+                      flexWrap: "wrap",
                       opacity: isDragActive ? "0.2" : "1",
                     })}
                     onDelete={onImageDelete}
diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx
index cf5f26c2845..f61cafb17c3 100644
--- a/src/products/components/ProductOrganization/ProductOrganization.tsx
+++ b/src/products/components/ProductOrganization/ProductOrganization.tsx
@@ -1,12 +1,7 @@
 // @ts-strict-ignore
 import { DashboardCard } from "@dashboard/components/Card";
+import { Combobox, Multiselect } from "@dashboard/components/Combobox";
 import Link from "@dashboard/components/Link";
-import MultiAutocompleteSelectField, {
-  MultiAutocompleteChoiceType,
-} from "@dashboard/components/MultiAutocompleteSelectField";
-import SingleAutocompleteSelectField, {
-  SingleAutocompleteChoiceType,
-} from "@dashboard/components/SingleAutocompleteSelectField";
 import {
   ProductChannelListingErrorFragment,
   ProductErrorCode,
@@ -16,7 +11,7 @@ import { ChangeEvent } from "@dashboard/hooks/useForm";
 import { productTypeUrl } from "@dashboard/productTypes/urls";
 import { FetchMoreProps } from "@dashboard/types";
 import { getFormErrors, getProductErrorMessage } from "@dashboard/utils/errors";
-import { Box, Text } from "@saleor/macaw-ui/next";
+import { Box, Option, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -28,20 +23,20 @@ interface ProductType {
 
 interface ProductOrganizationProps {
   canChangeType: boolean;
-  categories?: SingleAutocompleteChoiceType[];
+  categories?: Option[];
   categoryInputDisplayValue: string;
-  collections?: MultiAutocompleteChoiceType[];
-  collectionsInputDisplayValue: MultiAutocompleteChoiceType[];
+  collections?: Option[];
+  collectionsInputDisplayValue: Option[];
   data: {
     category: string;
-    collections: string[];
+    collections: Option[];
     productType?: ProductType;
   };
   disabled: boolean;
   errors: Array<ProductErrorFragment | ProductChannelListingErrorFragment>;
   productType?: ProductType;
   productTypeInputDisplayValue?: string;
-  productTypes?: SingleAutocompleteChoiceType[];
+  productTypes?: Option[];
   fetchCategories: (query: string) => void;
   fetchCollections: (query: string) => void;
   fetchMoreCategories: FetchMoreProps;
@@ -99,24 +94,30 @@ export const ProductOrganization: React.FC<
           description: "section header",
         })}
       </DashboardCard.Title>
-      <DashboardCard.Content gap={5} display="flex" flexDirection="column">
+      <DashboardCard.Content gap={2} display="flex" flexDirection="column">
         {canChangeType ? (
-          <SingleAutocompleteSelectField
-            displayValue={productTypeInputDisplayValue}
+          <Combobox
+            disabled={disabled}
+            data-test-id="product-type"
+            options={productTypes}
+            value={
+              data.productType?.id
+                ? {
+                    value: data.productType.id,
+                    label: productTypeInputDisplayValue,
+                  }
+                : null
+            }
             error={!!formErrors.productType}
             helperText={getProductErrorMessage(formErrors.productType, intl)}
+            onChange={onProductTypeChange}
+            fetchOptions={fetchProductTypes}
+            fetchMore={fetchMoreProductTypes}
             name="productType"
-            disabled={disabled}
             label={intl.formatMessage({
               id: "anK7jD",
               defaultMessage: "Product Type",
             })}
-            choices={productTypes}
-            value={data.productType?.id}
-            onChange={onProductTypeChange}
-            fetchChoices={fetchProductTypes}
-            data-test-id="product-type"
-            {...fetchMoreProductTypes}
           />
         ) : (
           <Box display="flex" flexDirection="column" gap={3}>
@@ -135,50 +136,49 @@ export const ProductOrganization: React.FC<
             </Box>
           </Box>
         )}
-        <SingleAutocompleteSelectField
-          displayValue={categoryInputDisplayValue}
+
+        <Combobox
+          disabled={disabled}
+          data-test-id="category"
+          options={disabled ? [] : categories}
+          value={
+            data.category
+              ? {
+                  value: data.category,
+                  label: categoryInputDisplayValue,
+                }
+              : null
+          }
           error={!!(formErrors.category || noCategoryError)}
           helperText={getProductErrorMessage(
             formErrors.category || noCategoryError,
             intl,
           )}
-          disabled={disabled}
+          onChange={onCategoryChange}
+          fetchOptions={fetchCategories}
+          fetchMore={fetchMoreCategories}
+          name="category"
           label={intl.formatMessage({
             id: "ccXLVi",
             defaultMessage: "Category",
           })}
-          choices={disabled ? [] : categories}
-          name="category"
-          value={data.category}
-          onChange={onCategoryChange}
-          fetchChoices={fetchCategories}
-          data-test-id="category"
-          {...fetchMoreCategories}
         />
-        <MultiAutocompleteSelectField
-          displayValues={collectionsInputDisplayValue}
+
+        <Multiselect
+          disabled={disabled}
+          options={collections}
+          data-test-id="collections"
+          value={collectionsInputDisplayValue}
           error={!!formErrors.collections}
+          name="collections"
+          onChange={onCollectionChange}
+          fetchOptions={fetchCollections}
+          fetchMore={fetchMoreCollections}
           label={intl.formatMessage({
             id: "ulh3kf",
             defaultMessage: "Collections",
           })}
-          choices={disabled ? [] : collections}
-          name="collections"
-          value={data.collections}
-          helperText={
-            getProductErrorMessage(formErrors.collections, intl) ||
-            intl.formatMessage({
-              id: "v+Pkm+",
-              defaultMessage:
-                "*Optional. Adding product to collection helps users find it.",
-              description: "field is optional",
-            })
-          }
-          onChange={onCollectionChange}
-          fetchChoices={fetchCollections}
-          data-test-id="collections"
-          testId="collection"
-          {...fetchMoreCollections}
+          helperText={getProductErrorMessage(formErrors.collections, intl)}
         />
       </DashboardCard.Content>
     </DashboardCard>
diff --git a/src/products/components/ProductShipping/ProductShipping.tsx b/src/products/components/ProductShipping/ProductShipping.tsx
index 04b4164358f..4e6edddb69c 100644
--- a/src/products/components/ProductShipping/ProductShipping.tsx
+++ b/src/products/components/ProductShipping/ProductShipping.tsx
@@ -3,7 +3,7 @@ import { DashboardCard } from "@dashboard/components/Card";
 import { ProductErrorFragment } from "@dashboard/graphql";
 import { getFormErrors, getProductErrorMessage } from "@dashboard/utils/errors";
 import createNonNegativeValueChangeHandler from "@dashboard/utils/handlers/nonNegativeValueChangeHandler";
-import { InputAdornment, TextField } from "@material-ui/core";
+import { Box, Input, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -35,28 +35,24 @@ export const ProductShipping: React.FC<ProductShippingProps> = props => {
         })}
       </DashboardCard.Title>
       <DashboardCard.Content>
-        <TextField
-          disabled={disabled}
-          label={intl.formatMessage({
-            id: "SUbxSK",
-            defaultMessage: "Weight",
-            description: "product weight",
-          })}
-          error={!!formErrors.weight}
-          helperText={getProductErrorMessage(formErrors.weight, intl)}
-          name="weight"
-          type="number"
-          value={data.weight}
-          onChange={handleChange}
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">{weightUnit || ""}</InputAdornment>
-            ),
-            inputProps: {
-              min: 0,
-            },
-          }}
-        />
+        <Box __width="25%">
+          <Input
+            disabled={disabled}
+            label={intl.formatMessage({
+              id: "SUbxSK",
+              defaultMessage: "Weight",
+              description: "product weight",
+            })}
+            error={!!formErrors.weight}
+            helperText={getProductErrorMessage(formErrors.weight, intl)}
+            name="weight"
+            type="number"
+            size="small"
+            value={data.weight}
+            onChange={handleChange}
+            endAdornment={<Text marginRight={2}>{weightUnit || ""}</Text>}
+          />
+        </Box>
       </DashboardCard.Content>
     </DashboardCard>
   );
diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx
index 60e2c6135e6..eba80274c92 100644
--- a/src/products/components/ProductStocks/ProductStocks.tsx
+++ b/src/products/components/ProductStocks/ProductStocks.tsx
@@ -1,17 +1,11 @@
 // @ts-strict-ignore
-import {
-  ChannelData,
-  ChannelPriceAndPreorderArgs,
-} from "@dashboard/channels/utils";
+import { ChannelData } from "@dashboard/channels/utils";
 import { DashboardCard } from "@dashboard/components/Card";
-import { DateTimeTimezoneField } from "@dashboard/components/DateTimeTimezoneField";
 import Link from "@dashboard/components/Link";
-import PreviewPill from "@dashboard/components/PreviewPill";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { ProductErrorFragment, WarehouseFragment } from "@dashboard/graphql";
-import { FormChange, FormErrors } from "@dashboard/hooks/useForm";
+import { FormChange } from "@dashboard/hooks/useForm";
 import { FormsetAtomicData, FormsetChange } from "@dashboard/hooks/useFormset";
-import { sectionNames } from "@dashboard/intl";
 import { renderCollection } from "@dashboard/misc";
 import { getFormErrors, getProductErrorMessage } from "@dashboard/utils/errors";
 import createNonNegativeValueChangeHandler from "@dashboard/utils/handlers/nonNegativeValueChangeHandler";
@@ -32,9 +26,6 @@ import {
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { ProductCreateData } from "../ProductCreatePage";
-import { ProductVariantCreateData } from "../ProductVariantCreatePage/form";
-import { ProductVariantUpdateData } from "../ProductVariantPage/form";
 import { messages } from "./messages";
 
 export interface ProductStockFormsetData {
@@ -47,7 +38,6 @@ export type ProductStockInput = FormsetAtomicData<
 export interface ProductStockFormData {
   sku: string;
   trackInventory: boolean;
-  isPreorder: boolean;
   globalThreshold: string;
   globalSoldUnits: number;
   hasPreorderEndDate: boolean;
@@ -59,20 +49,10 @@ export interface ProductStocksProps {
   data: ProductStockFormData;
   disabled: boolean;
   errors: ProductErrorFragment[];
-  formErrors:
-    | FormErrors<ProductVariantCreateData>
-    | FormErrors<ProductVariantUpdateData>
-    | FormErrors<ProductCreateData>;
   hasVariants: boolean;
   stocks: ProductStockInput[];
   warehouses: WarehouseFragment[];
-  onVariantChannelListingChange?: (
-    id: string,
-    data: Partial<ChannelPriceAndPreorderArgs>,
-  ) => void;
   onChange: FormsetChange;
-  onChangePreorderEndDate: FormChange;
-  onEndPreorderTrigger?: () => void;
   onFormDataChange: FormChange;
   onWarehouseStockAdd: (warehouseId: string) => void;
   onWarehouseStockDelete: (warehouseId: string) => void;
@@ -84,22 +64,17 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
   disabled,
   hasVariants,
   errors,
-  formErrors: localFormErrors,
-  onChangePreorderEndDate,
   stocks,
   warehouses,
   productVariantChannelListings = [],
   onChange,
-  onEndPreorderTrigger,
   onFormDataChange,
-  onVariantChannelListingChange,
   onWarehouseStockAdd,
   onWarehouseStockDelete,
   onWarehouseConfigure,
 }) => {
   const intl = useIntl();
   const [lastStockRowFocus, setLastStockRowFocus] = React.useState(false);
-  const unitsLeft = parseInt(data.globalThreshold, 10) - data.globalSoldUnits;
 
   const warehousesToAssign =
     warehouses?.filter(
@@ -107,9 +82,6 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
     ) || [];
   const formErrors = getFormErrors(["sku"], errors);
 
-  const onThresholdChange =
-    createNonNegativeValueChangeHandler(onFormDataChange);
-
   const handleWarehouseStockAdd = (warehouseId: string) => {
     onWarehouseStockAdd(warehouseId);
     setLastStockRowFocus(true);
@@ -148,350 +120,176 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
 
         <Box paddingY={2} display="grid" gap={2}>
           <Checkbox
-            checked={data.isPreorder}
-            name="isPreorder"
-            onCheckedChange={value => {
-              if (onEndPreorderTrigger && data.isPreorder) {
-                onEndPreorderTrigger();
-              } else {
-                onFormDataChange({ target: { name: "isPreorder", value } });
-              }
-            }}
+            checked={data.trackInventory}
+            name="trackInventory"
             disabled={disabled}
+            onCheckedChange={value =>
+              onFormDataChange({ target: { name: "trackInventory", value } })
+            }
           >
-            <Box display="flex" gap={1} paddingY={1.5}>
+            <Box display="flex" flexDirection="column">
               <Text>
-                <FormattedMessage {...messages.variantInPreorder} />
+                <FormattedMessage {...messages.trackInventory} />
+              </Text>
+              <Text variant="caption" color="textNeutralSubdued">
+                <FormattedMessage {...messages.trackInventoryDescription} />
               </Text>
-              <PreviewPill />
             </Box>
           </Checkbox>
 
-          {!data.isPreorder && (
-            <Checkbox
-              checked={data.trackInventory}
-              name="trackInventory"
-              disabled={disabled}
-              onCheckedChange={value =>
-                onFormDataChange({ target: { name: "trackInventory", value } })
-              }
-            >
-              <Box display="flex" flexDirection="column">
-                <Text>
-                  <FormattedMessage {...messages.trackInventory} />
-                </Text>
+          <Box display="grid" gap={2}>
+            <Box display="flex" flexDirection="column">
+              <Text>
+                <FormattedMessage {...messages.quantity} />
+              </Text>
+              {!productVariantChannelListings?.length && (
                 <Text variant="caption" color="textNeutralSubdued">
-                  <FormattedMessage {...messages.trackInventoryDescription} />
-                </Text>
-              </Box>
-            </Checkbox>
-          )}
-
-          {!data.isPreorder && (
-            <Box display="grid" gap={2}>
-              <Box display="flex" flexDirection="column">
-                <Text>
-                  <FormattedMessage {...messages.quantity} />
-                </Text>
-                {!productVariantChannelListings?.length && (
-                  <Text variant="caption" color="textNeutralSubdued">
-                    <FormattedMessage
-                      {...messages.noChannelWarehousesAllocation}
-                    />
-                  </Text>
-                )}
-              </Box>
-              {!warehouses?.length && (
-                <Text color="textNeutralSubdued">
-                  {hasVariants ? (
-                    <FormattedMessage
-                      {...messages.configureWarehouseForVariant}
-                      values={{
-                        a: chunks => (
-                          <Link onClick={onWarehouseConfigure}>{chunks}</Link>
-                        ),
-                      }}
-                    />
-                  ) : (
-                    <FormattedMessage
-                      {...messages.configureWarehouseForProduct}
-                      values={{
-                        a: chunks => (
-                          <Link onClick={onWarehouseConfigure}>{chunks}</Link>
-                        ),
-                      }}
-                    />
-                  )}
+                  <FormattedMessage
+                    {...messages.noChannelWarehousesAllocation}
+                  />
                 </Text>
               )}
             </Box>
-          )}
-        </Box>
-      </DashboardCard.Content>
-      {productVariantChannelListings?.length > 0 &&
-        warehouses?.length > 0 &&
-        !data.isPreorder && (
-          <Table>
-            <TableHead>
-              <TableRowLink>
-                <TableCell style={{ paddingLeft: vars.spacing[6] }}>
-                  <Text variant="caption" color="textNeutralSubdued">
-                    <FormattedMessage {...messages.warehouseName} />
-                  </Text>
-                </TableCell>
-                <TableCell style={{ width: 200, verticalAlign: "middle" }}>
-                  <Text variant="caption" color="textNeutralSubdued">
-                    <FormattedMessage {...messages.allocated} />
-                  </Text>
-                </TableCell>
-                <TableCell style={{ width: 200, verticalAlign: "middle" }}>
-                  <Text variant="caption" color="textNeutralSubdued">
-                    <FormattedMessage {...messages.quantity} />
-                  </Text>
-                </TableCell>
-                <TableCell />
-              </TableRowLink>
-            </TableHead>
-            <TableBody>
-              {renderCollection(stocks, (stock, index) => {
-                const handleQuantityChange =
-                  createNonNegativeValueChangeHandler(event =>
-                    onChange(stock.id, event.target.value),
-                  );
-
-                return (
-                  <TableRowLink key={stock.id}>
-                    <TableCell style={{ paddingLeft: vars.spacing[6] }}>
-                      <Text>{stock.label}</Text>
-                    </TableCell>
-                    <TableCell>
-                      <Text>{stock.data?.quantityAllocated || 0}</Text>
-                    </TableCell>
-                    <TableCell>
-                      <Input
-                        data-test-id="stock-input"
-                        disabled={disabled}
-                        onChange={handleQuantityChange}
-                        value={stock.value}
-                        size="small"
-                        type="number"
-                        min={0}
-                        ref={input =>
-                          stocks.length === index + 1 &&
-                          handleStockInputFocus(input)
-                        }
-                      />
-                    </TableCell>
-                    <TableCell>
-                      <Button
-                        type="button"
-                        variant="secondary"
-                        icon={<TrashBinIcon />}
-                        onClick={() => onWarehouseStockDelete(stock.id)}
-                      />
-                    </TableCell>
-                  </TableRowLink>
-                );
-              })}
-              {warehousesToAssign.length > 0 && (
-                <Dropdown>
-                  <Dropdown.Trigger>
-                    <TableRowLink className={sprinkles({ cursor: "pointer" })}>
-                      <TableCell
-                        colSpan={3}
-                        style={{ paddingLeft: vars.spacing[6] }}
-                      >
-                        <Text>
-                          <FormattedMessage {...messages.assignWarehouse} />
-                        </Text>
-                      </TableCell>
-                      <TableCell style={{ paddingRight: vars.spacing[6] }}>
-                        <Button
-                          type="button"
-                          icon={<PlusIcon />}
-                          variant="secondary"
-                        />
-                      </TableCell>
-                    </TableRowLink>
-                  </Dropdown.Trigger>
-
-                  <Dropdown.Content align="end">
-                    <Box>
-                      <List
-                        id="warehouse-list"
-                        padding={2}
-                        borderRadius={4}
-                        boxShadow="overlay"
-                        backgroundColor="surfaceNeutralPlain"
-                        __maxHeight={400}
-                        overflowY="auto"
-                      >
-                        {warehousesToAssign.map(warehouse => (
-                          <Dropdown.Item key={warehouse.id}>
-                            <List.Item
-                              paddingX={1.5}
-                              paddingY={2}
-                              borderRadius={4}
-                              onClick={() =>
-                                handleWarehouseStockAdd(warehouse.id)
-                              }
-                            >
-                              <Text>{warehouse.name}</Text>
-                            </List.Item>
-                          </Dropdown.Item>
-                        ))}
-                      </List>
-                    </Box>
-                  </Dropdown.Content>
-                </Dropdown>
-              )}
-            </TableBody>
-          </Table>
-        )}
-      {data.isPreorder && (
-        <DashboardCard.Content>
-          <Box display="grid" gap={2}>
-            <Text variant="caption">
-              <FormattedMessage {...messages.preorderEndDateSetup} />
-            </Text>
-            {data.hasPreorderEndDate && (
-              <Box>
-                <DateTimeTimezoneField
-                  name={"preorderEndDateTime"}
-                  disabled={disabled}
-                  futureDatesOnly
-                  fullWidth={false}
-                  error={localFormErrors.preorderEndDateTime}
-                  value={data?.preorderEndDateTime}
-                  onChange={event =>
-                    onChangePreorderEndDate({
-                      target: {
-                        name: "preorderEndDateTime",
-                        value: event,
-                      },
-                    })
-                  }
-                />
-              </Box>
+            {!warehouses?.length && (
+              <Text color="textNeutralSubdued">
+                {hasVariants ? (
+                  <FormattedMessage
+                    {...messages.configureWarehouseForVariant}
+                    values={{
+                      a: chunks => (
+                        <Link onClick={onWarehouseConfigure}>{chunks}</Link>
+                      ),
+                    }}
+                  />
+                ) : (
+                  <FormattedMessage
+                    {...messages.configureWarehouseForProduct}
+                    values={{
+                      a: chunks => (
+                        <Link onClick={onWarehouseConfigure}>{chunks}</Link>
+                      ),
+                    }}
+                  />
+                )}
+              </Text>
             )}
-            <Box __alignSelf="end">
-              <Button
-                name="hasPreorderEndDate"
-                variant="secondary"
-                disabled={disabled}
-                type="button"
-                onClick={() =>
-                  onFormDataChange({
-                    target: {
-                      name: "hasPreorderEndDate",
-                      value: !data.hasPreorderEndDate,
-                    },
-                  })
-                }
-              >
-                {data.hasPreorderEndDate
-                  ? intl.formatMessage(messages.endDateCancel)
-                  : intl.formatMessage(messages.endDateSetup)}
-              </Button>
-            </Box>
-          </Box>
-
-          <Box display="grid" gap={1} paddingTop={2}>
-            <Text variant="caption" color="textNeutralSubdued">
-              <FormattedMessage {...messages.preorderProductsAvailability} />
-            </Text>
-            <Box display="grid" gap={1.5}>
-              <Box __width="50%">
-                <Input
-                  min={0}
-                  type="text"
-                  disabled={disabled}
-                  label={intl.formatMessage(messages.preorderTresholdLabel)}
-                  name="globalThreshold"
-                  onChange={onThresholdChange}
-                  value={data.globalThreshold ?? ""}
-                  size="small"
-                  helperText={intl.formatMessage(
-                    messages.preorderTresholdDescription,
-                  )}
-                />
-              </Box>
-
-              {productVariantChannelListings?.length > 0 && (
-                <Text variant="caption">
-                  {data.globalThreshold
-                    ? intl.formatMessage(messages.preorderTresholdUnitsLeft, {
-                        unitsLeft,
-                      })
-                    : intl.formatMessage(messages.preorderTresholdUnlimited)}
-                </Text>
-              )}
-            </Box>
           </Box>
-        </DashboardCard.Content>
-      )}
-
-      {productVariantChannelListings?.length > 0 && data.isPreorder && (
+        </Box>
+      </DashboardCard.Content>
+      {productVariantChannelListings?.length > 0 && warehouses?.length > 0 && (
         <Table>
           <TableHead>
             <TableRowLink>
               <TableCell style={{ paddingLeft: vars.spacing[6] }}>
                 <Text variant="caption" color="textNeutralSubdued">
-                  <FormattedMessage {...sectionNames.channels} />
+                  <FormattedMessage {...messages.warehouseName} />
                 </Text>
               </TableCell>
               <TableCell style={{ width: 200, verticalAlign: "middle" }}>
                 <Text variant="caption" color="textNeutralSubdued">
-                  <FormattedMessage {...messages.soldUnits} />
+                  <FormattedMessage {...messages.allocated} />
                 </Text>
               </TableCell>
               <TableCell style={{ width: 200, verticalAlign: "middle" }}>
                 <Text variant="caption" color="textNeutralSubdued">
-                  <FormattedMessage {...messages.channelTreshold} />
+                  <FormattedMessage {...messages.quantity} />
                 </Text>
               </TableCell>
+              <TableCell />
             </TableRowLink>
           </TableHead>
           <TableBody>
-            {renderCollection(productVariantChannelListings, listing => {
-              if (!listing) {
-                return;
-              }
+            {renderCollection(stocks, (stock, index) => {
+              const handleQuantityChange = createNonNegativeValueChangeHandler(
+                event => onChange(stock.id, event.target.value),
+              );
 
               return (
-                <TableRowLink key={listing.id}>
+                <TableRowLink key={stock.id}>
                   <TableCell style={{ paddingLeft: vars.spacing[6] }}>
-                    <Text>{listing.name}</Text>
+                    <Text>{stock.label}</Text>
                   </TableCell>
                   <TableCell>
-                    <Text>{listing?.unitsSold || 0}</Text>
+                    <Text>{stock.data?.quantityAllocated || 0}</Text>
                   </TableCell>
                   <TableCell>
                     <Input
-                      min={0}
-                      type="number"
-                      name="channel-threshold"
+                      data-test-id="stock-input"
                       disabled={disabled}
-                      onChange={e => {
-                        onVariantChannelListingChange(listing.id, {
-                          costPrice: listing.costPrice,
-                          price: listing.price,
-                          preorderThreshold:
-                            e.target.value === ""
-                              ? undefined
-                              : Number(e.target.value),
-                        });
-                      }}
-                      value={listing?.preorderThreshold ?? ""}
+                      onChange={handleQuantityChange}
+                      value={stock.value}
                       size="small"
-                      placeholder={intl.formatMessage(
-                        messages.preorderTresholdUnlimited,
-                      )}
+                      type="number"
+                      min={0}
+                      ref={input =>
+                        stocks.length === index + 1 &&
+                        handleStockInputFocus(input)
+                      }
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      icon={<TrashBinIcon />}
+                      onClick={() => onWarehouseStockDelete(stock.id)}
                     />
                   </TableCell>
                 </TableRowLink>
               );
             })}
+            {warehousesToAssign.length > 0 && (
+              <Dropdown>
+                <Dropdown.Trigger>
+                  <TableRowLink className={sprinkles({ cursor: "pointer" })}>
+                    <TableCell
+                      colSpan={3}
+                      style={{ paddingLeft: vars.spacing[6] }}
+                    >
+                      <Text>
+                        <FormattedMessage {...messages.assignWarehouse} />
+                      </Text>
+                    </TableCell>
+                    <TableCell style={{ paddingRight: vars.spacing[6] }}>
+                      <Button
+                        type="button"
+                        icon={<PlusIcon />}
+                        variant="secondary"
+                      />
+                    </TableCell>
+                  </TableRowLink>
+                </Dropdown.Trigger>
+
+                <Dropdown.Content align="end">
+                  <Box>
+                    <List
+                      id="warehouse-list"
+                      padding={2}
+                      borderRadius={4}
+                      boxShadow="overlay"
+                      backgroundColor="surfaceNeutralPlain"
+                      __maxHeight={400}
+                      overflowY="auto"
+                    >
+                      {warehousesToAssign.map(warehouse => (
+                        <Dropdown.Item key={warehouse.id}>
+                          <List.Item
+                            paddingX={1.5}
+                            paddingY={2}
+                            borderRadius={4}
+                            onClick={() =>
+                              handleWarehouseStockAdd(warehouse.id)
+                            }
+                          >
+                            <Text>{warehouse.name}</Text>
+                          </List.Item>
+                        </Dropdown.Item>
+                      ))}
+                    </List>
+                  </Box>
+                </Dropdown.Content>
+              </Dropdown>
+            )}
           </TableBody>
         </Table>
       )}
diff --git a/src/products/components/ProductStocks/messages.ts b/src/products/components/ProductStocks/messages.ts
index 3c0c2bbad15..01ac9b62761 100644
--- a/src/products/components/ProductStocks/messages.ts
+++ b/src/products/components/ProductStocks/messages.ts
@@ -72,13 +72,13 @@ export const messages = defineMessages({
     description: "info text",
   },
   endDateCancel: {
-    id: "v9ILn/",
-    defaultMessage: "CANCEL END DATE",
+    id: "bk2M4q",
+    defaultMessage: "Cancel end date",
     description: "button",
   },
   endDateSetup: {
-    id: "9IWg/f",
-    defaultMessage: "SETUP END DATE",
+    id: "tqJwfo",
+    defaultMessage: "Set end date",
     description: "button",
   },
   preorderProductsAvailability: {
diff --git a/src/products/components/ProductTaxes/ProductTaxes.tsx b/src/products/components/ProductTaxes/ProductTaxes.tsx
index 39a7c3994d2..3625eae8073 100644
--- a/src/products/components/ProductTaxes/ProductTaxes.tsx
+++ b/src/products/components/ProductTaxes/ProductTaxes.tsx
@@ -1,34 +1,22 @@
-import CardTitle from "@dashboard/components/CardTitle";
-import SingleAutocompleteSelectField from "@dashboard/components/SingleAutocompleteSelectField";
+import { DashboardCard } from "@dashboard/components/Card";
+import { Combobox } from "@dashboard/components/Combobox";
 import { TaxClassBaseFragment } from "@dashboard/graphql";
+import { ChangeEvent } from "@dashboard/hooks/useForm";
 import { sectionNames } from "@dashboard/intl";
 import { taxesMessages } from "@dashboard/taxes/messages";
 import { FetchMoreProps } from "@dashboard/types";
-import { Card, CardContent } from "@material-ui/core";
-import { makeStyles } from "@saleor/macaw-ui";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { ProductCreateFormData } from "../ProductCreatePage";
-
 interface ProductTaxesProps {
   value: string;
   taxClassDisplayName: string;
   taxClasses: TaxClassBaseFragment[];
   disabled: boolean;
-  onChange: (event: React.ChangeEvent<any>) => void;
+  onChange: (event: ChangeEvent) => void;
   onFetchMore: FetchMoreProps;
 }
 
-const useStyles = makeStyles(
-  {
-    root: {
-      overflow: "visible",
-    },
-  },
-  { name: "ProductTaxes" },
-);
-
 const ProductTaxes: React.FC<ProductTaxesProps> = props => {
   const {
     value,
@@ -38,32 +26,36 @@ const ProductTaxes: React.FC<ProductTaxesProps> = props => {
     onChange,
     onFetchMore,
   } = props;
-  const classes = useStyles(props);
-
   const intl = useIntl();
 
   return (
-    <Card className={classes.root}>
-      <CardTitle title={intl.formatMessage(sectionNames.taxes)} />
-      <CardContent>
-        <SingleAutocompleteSelectField
+    <DashboardCard>
+      <DashboardCard.Title>
+        {intl.formatMessage(sectionNames.taxes)}
+      </DashboardCard.Title>
+      <DashboardCard.Content>
+        <Combobox
           disabled={disabled}
-          displayValue={taxClassDisplayName}
-          label={intl.formatMessage(taxesMessages.taxClass)}
-          name={"taxClassId" as keyof ProductCreateFormData}
-          onChange={onChange}
-          value={value}
-          choices={taxClasses.map(choice => ({
+          options={taxClasses.map(choice => ({
             label: choice.name,
             value: choice.id,
           }))}
-          InputProps={{
-            autoComplete: "off",
-          }}
-          {...onFetchMore}
+          fetchOptions={() => {}}
+          value={
+            value
+              ? {
+                  value,
+                  label: taxClassDisplayName,
+                }
+              : null
+          }
+          name="taxClassId"
+          label={intl.formatMessage(taxesMessages.taxClass)}
+          onChange={onChange}
+          fetchMore={onFetchMore}
         />
-      </CardContent>
-    </Card>
+      </DashboardCard.Content>
+    </DashboardCard>
   );
 };
 ProductTaxes.displayName = "ProductTaxes";
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
index 08f72827d24..8e948fa46b5 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
@@ -49,6 +49,7 @@ import { productImageUrl, productListUrl } from "@dashboard/products/urls";
 import { ProductVariantListError } from "@dashboard/products/views/ProductUpdate/handlers/errors";
 import { UseProductUpdateHandlerError } from "@dashboard/products/views/ProductUpdate/handlers/useProductUpdateHandler";
 import { FetchMoreProps, RelayToFlat } from "@dashboard/types";
+import { Box } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -343,7 +344,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                 errors={productErrors}
                 onChange={change}
               />
-              <CardSpacer />
               <ProductMedia
                 media={media}
                 onImageDelete={onImageDelete}
@@ -352,7 +352,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                 openMediaUrlModal={() => setMediaUrlModalStatus(true)}
                 getImageEditUrl={imageId => productImageUrl(productId, imageId)}
               />
-              <CardSpacer />
               {data.attributes.length > 0 && (
                 <Attributes
                   attributes={data.attributes}
@@ -372,7 +371,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                   richTextGetters={attributeRichTextGetters}
                 />
               )}
-              <CardSpacer />
               <ProductVariants
                 productName={product?.name}
                 errors={variantListErrors}
@@ -403,7 +401,6 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                     "Add search engine title and description to make this product easier to find",
                 })}
               />
-              <CardSpacer />
               <Metadata data={data} onChange={handlers.changeMetadata} />
             </DetailPageLayout.Content>
             <DetailPageLayout.RightSidebar>
@@ -424,20 +421,20 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                 onCategoryChange={handlers.selectCategory}
                 onCollectionChange={handlers.selectCollection}
               />
-              <CardSpacer />
               <ChannelsAvailabilityCard
                 {...availabilityCommonProps}
                 channels={listings}
               />
-              <CardSpacer />
-              <ProductTaxes
-                value={data.taxClassId}
-                disabled={disabled}
-                onChange={handlers.selectTaxClass}
-                taxClassDisplayName={selectedTaxClass}
-                taxClasses={taxClasses}
-                onFetchMore={fetchMoreTaxClasses}
-              />
+              <Box paddingBottom={52}>
+                <ProductTaxes
+                  value={data.taxClassId}
+                  disabled={disabled}
+                  onChange={handlers.selectTaxClass}
+                  taxClassDisplayName={selectedTaxClass}
+                  taxClasses={taxClasses}
+                  onFetchMore={fetchMoreTaxClasses}
+                />
+              </Box>
             </DetailPageLayout.RightSidebar>
 
             <Savebar
diff --git a/src/products/components/ProductUpdatePage/form.tsx b/src/products/components/ProductUpdatePage/form.tsx
index 982f52a322c..305b18a68d8 100644
--- a/src/products/components/ProductUpdatePage/form.tsx
+++ b/src/products/components/ProductUpdatePage/form.tsx
@@ -30,7 +30,7 @@ import {
   getProductUpdatePageFormData,
 } from "@dashboard/products/utils/data";
 import { PRODUCT_UPDATE_FORM_ID } from "@dashboard/products/views/ProductUpdate/consts";
-import createMultiAutocompleteSelectHandler from "@dashboard/utils/handlers/multiAutocompleteSelectChangeHandler";
+import createMultiselectChangeHandler from "@dashboard/utils/handlers/multiselectChangeHandler";
 import createSingleAutocompleteSelectHandler from "@dashboard/utils/handlers/singleAutocompleteSelectChangeHandler";
 import getMetadata from "@dashboard/utils/metadata/getMetadata";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
@@ -70,7 +70,7 @@ function useProductUpdateForm(
   const {
     handleChange,
     triggerChange,
-    toggleValue,
+    toggleValues,
     data: formData,
     setIsSubmitDisabled,
   } = form;
@@ -123,11 +123,9 @@ function useProductUpdateForm(
     touched: touchedChannels,
   } = useProductChannelListingsForm(product, triggerChange);
 
-  const handleCollectionSelect = createMultiAutocompleteSelectHandler(
-    event => toggleValue(event),
+  const handleCollectionSelect = createMultiselectChangeHandler(
+    toggleValues,
     opts.setSelectedCollections,
-    opts.selectedCollections,
-    opts.collections,
   );
   const handleCategorySelect = createSingleAutocompleteSelectHandler(
     handleChange,
diff --git a/src/products/components/ProductUpdatePage/types.ts b/src/products/components/ProductUpdatePage/types.ts
index b02c3768f90..760ca9c2c93 100644
--- a/src/products/components/ProductUpdatePage/types.ts
+++ b/src/products/components/ProductUpdatePage/types.ts
@@ -31,13 +31,14 @@ import {
 import { UseProductUpdateHandlerError } from "@dashboard/products/views/ProductUpdate/handlers/useProductUpdateHandler";
 import { FetchMoreProps, RelayToFlat, ReorderEvent } from "@dashboard/types";
 import { OutputData } from "@editorjs/editorjs";
+import { Option } from "@saleor/macaw-ui/next";
 
 import { ProductChannelsListingDialogSubmit } from "./ProductChannelsListingsDialog";
 
 export interface ProductUpdateFormData extends MetadataFormData {
   category: string | null;
   taxClassId: string;
-  collections: string[];
+  collections: Option[];
   isAvailable: boolean;
   name: string;
   rating: number;
@@ -74,7 +75,7 @@ export interface ProductUpdateSubmitData extends ProductUpdateFormData {
   attributes: AttributeInput[];
   attributesWithNewFileValue: FormsetData<null, File>;
   channels: ProductChannelListingUpdateInput;
-  collections: string[];
+  collections: Option[];
   description: OutputData;
   variants: DatagridChangeOpts;
 }
diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
index 2798bd93516..f33ef6c63f9 100644
--- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
+++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx
@@ -171,7 +171,6 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
       {({
         change,
         data,
-        formErrors,
         validationErrors,
         handlers,
         submit,
@@ -271,7 +270,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                   <CardSpacer />
                   <ProductVariantPrice
                     disabled={!product}
-                    ProductVariantChannelListings={data.channelListings.map(
+                    productVariantChannelListings={data.channelListings.map(
                       channel => ({
                         ...channel.data,
                         ...channel.value,
@@ -287,12 +286,10 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = ({
                     disabled={disabled}
                     hasVariants={true}
                     onFormDataChange={change}
-                    formErrors={formErrors}
                     errors={errors}
                     stocks={data.stocks}
                     warehouses={warehouses}
                     onChange={handlers.changeStock}
-                    onChangePreorderEndDate={handlers.changePreorderEndDate}
                     onWarehouseStockAdd={handlers.addStock}
                     onWarehouseStockDelete={handlers.deleteStock}
                     onWarehouseConfigure={onWarehouseConfigure}
diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
index c79219f799c..3221fdd1c52 100644
--- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx
+++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx
@@ -220,7 +220,6 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
           {({
             change,
             data,
-            formErrors,
             validationErrors,
             isSaveDisabled,
             handlers,
@@ -321,7 +320,7 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                     <CardSpacer />
                     <ProductVariantPrice
                       disabled={!variant}
-                      ProductVariantChannelListings={data.channelListings.map(
+                      productVariantChannelListings={data.channelListings.map(
                         channel => ({
                           ...channel.data,
                           ...channel.value,
@@ -355,22 +354,14 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
                           ...channel.value,
                         }),
                       )}
-                      onVariantChannelListingChange={handlers.changeChannels}
                       data={data}
                       disabled={loading}
                       hasVariants={true}
                       errors={errors}
-                      formErrors={formErrors}
                       stocks={data.stocks}
                       warehouses={warehouses}
                       onChange={handlers.changeStock}
                       onFormDataChange={change}
-                      onChangePreorderEndDate={handlers.changePreorderEndDate}
-                      onEndPreorderTrigger={
-                        !!variant?.preorder
-                          ? () => setIsEndPreorderModalOpened(true)
-                          : null
-                      }
                       onWarehouseStockAdd={handlers.addStock}
                       onWarehouseStockDelete={handlers.deleteStock}
                       onWarehouseConfigure={onWarehouseConfigure}
diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
index a3b2255e6cd..c68eb112024 100644
--- a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
+++ b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
@@ -21,12 +21,12 @@ import {
 } from "@dashboard/utils/errors";
 import getProductErrorMessage from "@dashboard/utils/errors/product";
 import { TableBody, TableCell, TableHead } from "@material-ui/core";
-import { Text, vars } from "@saleor/macaw-ui/next";
+import { sprinkles, Text, vars } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
 
 interface ProductVariantPriceProps {
-  ProductVariantChannelListings?: ChannelData[];
+  productVariantChannelListings?: ChannelData[];
   errors: Array<ProductErrorFragment | ProductChannelListingErrorFragment>;
   loading?: boolean;
   disabled?: boolean;
@@ -45,7 +45,7 @@ export const ProductVariantPrice: React.FC<
   const {
     disabled = false,
     errors = [],
-    ProductVariantChannelListings = [],
+    productVariantChannelListings = [],
     loading,
     onChange,
     disabledMessage,
@@ -56,7 +56,7 @@ export const ProductVariantPrice: React.FC<
   ) as ProductChannelListingErrorFragment[];
   const apiErrors = getFormChannelErrors(["price", "costPrice"], channelErrors);
 
-  if (disabled || !ProductVariantChannelListings.length) {
+  if (disabled || !productVariantChannelListings.length) {
     return (
       <DashboardCard>
         <DashboardCard.Title>
@@ -125,7 +125,7 @@ export const ProductVariantPrice: React.FC<
         </TableHead>
         <TableBody>
           {renderCollection(
-            ProductVariantChannelListings,
+            productVariantChannelListings,
             (listing, index) => {
               const fieldName = `${listing.id}-channel-price`;
               const formErrors = getFormErrors([fieldName], errors);
@@ -147,6 +147,9 @@ export const ProductVariantPrice: React.FC<
                   <TableCell>
                     {listing ? (
                       <PriceField
+                        className={sprinkles({
+                          marginY: 2,
+                        })}
                         error={!!priceError}
                         label={intl.formatMessage({
                           id: "b1zuN9",
@@ -175,6 +178,9 @@ export const ProductVariantPrice: React.FC<
                   <TableCell>
                     {listing ? (
                       <PriceField
+                        className={sprinkles({
+                          marginY: 2,
+                        })}
                         error={!!costPriceError}
                         label={intl.formatMessage({
                           id: "KQSONM",
diff --git a/src/products/utils/data.ts b/src/products/utils/data.ts
index 23622467aab..551ec5ded88 100644
--- a/src/products/utils/data.ts
+++ b/src/products/utils/data.ts
@@ -205,7 +205,11 @@ export function getProductUpdatePageFormData(
     category: maybe(() => product.category.id, ""),
     taxClassId: product?.taxClass?.id,
     collections: maybe(
-      () => product.collections.map(collection => collection.id),
+      () =>
+        product.collections.map(collection => ({
+          label: collection.name,
+          value: collection.id,
+        })),
       [],
     ),
     isAvailable: !!product?.isAvailable,
diff --git a/src/products/views/ProductCreate/ProductCreate.tsx b/src/products/views/ProductCreate/ProductCreate.tsx
index e1419509407..653d4fbcf58 100644
--- a/src/products/views/ProductCreate/ProductCreate.tsx
+++ b/src/products/views/ProductCreate/ProductCreate.tsx
@@ -90,6 +90,7 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
   } = useCategorySearch({
     variables: DEFAULT_INITIAL_SEARCH_DATA,
   });
+
   const {
     loadMore: loadMoreCollections,
     search: searchCollection,
@@ -330,8 +331,9 @@ export const ProductCreateView: React.FC<ProductCreateProps> = ({ params }) => {
         categories={mapEdgesToItems(searchCategoryOpts?.data?.search) || []}
         collections={mapEdgesToItems(searchCollectionOpts?.data?.search) || []}
         attributeValues={
-          mapEdgesToItems(searchAttributeValuesOpts?.data?.attribute.choices) ||
-          []
+          mapEdgesToItems(
+            searchAttributeValuesOpts?.data?.attribute?.choices,
+          ) ?? []
         }
         loading={loading}
         channelsErrors={channelsErrors}
diff --git a/src/products/views/ProductCreate/handlers.ts b/src/products/views/ProductCreate/handlers.ts
index bce96e315e5..5b79c9943f5 100644
--- a/src/products/views/ProductCreate/handlers.ts
+++ b/src/products/views/ProductCreate/handlers.ts
@@ -114,7 +114,7 @@ export function createHandler(
           updatedFileAttributes,
         }),
         category: formData.category,
-        collections: formData.collections,
+        collections: formData.collections.map(collection => collection.value),
         description: getParsedDataForJsonStringField(formData.description),
         name: formData.name,
         productType: formData.productType?.id,
diff --git a/src/products/views/ProductUpdate/handlers/utils.ts b/src/products/views/ProductUpdate/handlers/utils.ts
index d28535f046b..7750d0d0696 100644
--- a/src/products/views/ProductUpdate/handlers/utils.ts
+++ b/src/products/views/ProductUpdate/handlers/utils.ts
@@ -46,7 +46,7 @@ export function getProductUpdateVariables(
         updatedFileAttributes,
       }),
       category: data.category,
-      collections: data.collections,
+      collections: data.collections.map(collection => collection.value),
       description: getParsedDataForJsonStringField(data.description),
       name: data.name,
       rating: data.rating,
diff --git a/src/shipping/components/OrderValue/OrderValue.tsx b/src/shipping/components/OrderValue/OrderValue.tsx
index a1875f5b2a7..ad2e24bd9fc 100644
--- a/src/shipping/components/OrderValue/OrderValue.tsx
+++ b/src/shipping/components/OrderValue/OrderValue.tsx
@@ -162,7 +162,7 @@ export const OrderValue: React.FC<OrderValueProps> = ({
                         })}
                         name={`maxValue:${channel.name}`}
                         value={channel.maxValue}
-                        InputProps={{ inputProps: { min: channel.minValue } }}
+                        minValue={channel.minValue}
                         onChange={e =>
                           onChannelsChange(channel.id, {
                             ...channel,
diff --git a/src/utils/handlers/attributeValueSearchHandler.ts b/src/utils/handlers/attributeValueSearchHandler.ts
index 017e7287831..5327035729f 100644
--- a/src/utils/handlers/attributeValueSearchHandler.ts
+++ b/src/utils/handlers/attributeValueSearchHandler.ts
@@ -40,7 +40,7 @@ function useAttributeValueSearchHandler(
   });
 
   const handleSearch = (query: string, id: string | null) => {
-    if (query !== state.query) {
+    if (query === "" || query !== state.query) {
       search(query);
     }
     if (id !== state.id || query !== state.query) {
diff --git a/src/utils/handlers/multiselectChangeHandler.ts b/src/utils/handlers/multiselectChangeHandler.ts
new file mode 100644
index 00000000000..68116269d5d
--- /dev/null
+++ b/src/utils/handlers/multiselectChangeHandler.ts
@@ -0,0 +1,17 @@
+import { ChangeEvent, FormChange } from "@dashboard/hooks/useForm";
+import { Option } from "@saleor/macaw-ui/next";
+
+/**
+ * @param change Use toggleValue callback delivered by form
+ */
+function createMultiselectChangeHandler(
+  change: FormChange,
+  setSelected: (choices: Option[]) => void,
+): FormChange {
+  return (event: ChangeEvent<Option[]>) => {
+    change(event);
+    setSelected(event.target.value);
+  };
+}
+
+export default createMultiselectChangeHandler;