diff --git a/codegen.yml b/codegen.yml
deleted file mode 100644
index 8e3841a9b..000000000
--- a/codegen.yml
+++ /dev/null
@@ -1,53 +0,0 @@
-overwrite: true
-schema: ./introspection.json
-generates:
-  ./src/graphql/fragmentTypes.generated.ts:
-    plugins:
-      - add:
-          content: /* eslint-disable */
-      - fragment-matcher
-    config:
-      minify: false
-      apolloClientVersion: 3
-  ./src/graphql/typePolicies.generated.ts:
-    plugins:
-      - add:
-          content: /* eslint-disable */
-      - typescript-apollo-client-helpers
-  ./src/graphql/types.generated.ts:
-    documents:
-      - ./src/**/queries.ts
-      - ./src/**/mutations.ts
-      - ./src/**/fragments/*.ts
-      - ./src/searches/*.ts
-    config:
-      nonOptionalTypename: true
-      avoidOptionals:
-        field: true
-        inputValue: false
-        object: false
-        defaultValue: false
-      namingConvention:
-        enumValues: change-case-all#upperCase
-      onlyOperationTypes: true
-    plugins:
-      - add:
-          content: /* eslint-disable */
-      - typescript
-      - typescript-operations
-  ./src/graphql/hooks.generated.ts:
-    documents:
-      - ./src/**/queries.ts
-      - ./src/**/mutations.ts
-      - ./src/**/fragments/*.ts
-      - ./src/searches/*.ts
-    preset: import-types
-    presetConfig:
-      typesPath: ./types.generated
-    config:
-      withHooks: true
-      apolloReactHooksImportFrom: "@dashboard/hooks/graphql"
-    plugins:
-      - add:
-          content: /* eslint-disable */
-      - typescript-react-apollo
diff --git a/cypress/e2e/apps.js b/cypress/e2e/apps.js
index 49eba7830..34f2d7141 100644
--- a/cypress/e2e/apps.js
+++ b/cypress/e2e/apps.js
@@ -85,8 +85,16 @@ describe("As a staff user I want to manage apps", () => {
         });
       })
       .then(({ variantsList: variants }) => {
-        variantsList = variants
-        cy.checkIfDataAreNotNull({createdApp,defaultChannel,address,warehouse,shippingMethod,variantsList,checkout})
+        variantsList = variants;
+        cy.checkIfDataAreNotNull({
+          createdApp,
+          defaultChannel,
+          address,
+          warehouse,
+          shippingMethod,
+          variantsList,
+          checkout,
+        });
       });
   });
 
diff --git a/cypress/e2e/catalog/collections.js b/cypress/e2e/catalog/collections.js
index 0ab6aac73..f44660abd 100644
--- a/cypress/e2e/catalog/collections.js
+++ b/cypress/e2e/catalog/collections.js
@@ -71,8 +71,14 @@ describe("As an admin I want to manage collections.", () => {
         },
       )
       .then(({ product: productResp }) => {
-        product = productResp
-      cy.checkIfDataAreNotNull({attribute, category, productType, product, defaultChannel})
+        product = productResp;
+        cy.checkIfDataAreNotNull({
+          attribute,
+          category,
+          productType,
+          product,
+          defaultChannel,
+        });
       });
   });
 
diff --git a/cypress/e2e/catalog/giftCards/purchaseGiftCard.js b/cypress/e2e/catalog/giftCards/purchaseGiftCard.js
index 8e9a134be..fe8cf5e3d 100644
--- a/cypress/e2e/catalog/giftCards/purchaseGiftCard.js
+++ b/cypress/e2e/catalog/giftCards/purchaseGiftCard.js
@@ -79,7 +79,15 @@ describe("As a customer I should be able to purchase gift card as a product", ()
       })
       .then(({ variantsList: variantsResp }) => {
         variants = variantsResp;
-        cy.checkIfDataAreNotNull({defaultChannel, productType, attribute, category, shippingMethod, variants, address})
+        cy.checkIfDataAreNotNull({
+          defaultChannel,
+          productType,
+          attribute,
+          category,
+          shippingMethod,
+          variants,
+          address,
+        });
       });
   });
 
diff --git a/cypress/e2e/checkout/clickAndCollect.js b/cypress/e2e/checkout/clickAndCollect.js
index 28000bdc8..7a9fc5920 100644
--- a/cypress/e2e/checkout/clickAndCollect.js
+++ b/cypress/e2e/checkout/clickAndCollect.js
@@ -83,7 +83,14 @@ describe("Warehouses in checkout", () => {
       })
       .then(({ variantsList }) => {
         variantsInOtherWarehouse = variantsList;
-        cy.checkIfDataAreNotNull({defaultChannel, usAddress, secondUsAddress, productData, checkoutData, variantsInOtherWarehouse})
+        cy.checkIfDataAreNotNull({
+          defaultChannel,
+          usAddress,
+          secondUsAddress,
+          productData,
+          checkoutData,
+          variantsInOtherWarehouse,
+        });
       });
   });
 
diff --git a/cypress/e2e/checkout/productWithoutShipping.js b/cypress/e2e/checkout/productWithoutShipping.js
index 951977652..2587693c8 100644
--- a/cypress/e2e/checkout/productWithoutShipping.js
+++ b/cypress/e2e/checkout/productWithoutShipping.js
@@ -83,12 +83,17 @@ describe("Products without shipment option", () => {
             name: nameProdWithoutShipping,
             productTypeId: productTypeResp.id,
             warehouseId: warehouse.id,
-          }).then(
-            ({ variantsList }) => {
-              productWithoutShipping = variantsList
-              cy.checkIfDataAreNotNull({channel, address, warehouse, shippingMethod, productWithShipping, productWithoutShipping})
-            }
-          );
+          }).then(({ variantsList }) => {
+            productWithoutShipping = variantsList;
+            cy.checkIfDataAreNotNull({
+              channel,
+              address,
+              warehouse,
+              shippingMethod,
+              productWithShipping,
+              productWithoutShipping,
+            });
+          });
         },
       );
   });
diff --git a/cypress/e2e/checkout/stocksInCheckout.js b/cypress/e2e/checkout/stocksInCheckout.js
index 099d3684b..bf0a4f4d8 100644
--- a/cypress/e2e/checkout/stocksInCheckout.js
+++ b/cypress/e2e/checkout/stocksInCheckout.js
@@ -56,7 +56,14 @@ describe("Manage products stocks in checkout", () => {
       lastVariantInStock = resp.createdVariants.find(
         variant => variant.name === "lastVariantInStock",
       );
-      cy.checkIfDataAreNotNull({defaultChannel, address,shippingMethod, variantsWithLowStock, variantsWithoutTrackInventory, lastVariantInStock})
+      cy.checkIfDataAreNotNull({
+        defaultChannel,
+        address,
+        shippingMethod,
+        variantsWithLowStock,
+        variantsWithoutTrackInventory,
+        lastVariantInStock,
+      });
     });
   });
 
diff --git a/cypress/e2e/configuration/attributes/attributeVariantSelection.js b/cypress/e2e/configuration/attributes/attributeVariantSelection.js
index ee47f4ff1..2fd95fe55 100644
--- a/cypress/e2e/configuration/attributes/attributeVariantSelection.js
+++ b/cypress/e2e/configuration/attributes/attributeVariantSelection.js
@@ -32,7 +32,7 @@ describe("As an admin I want to use attributes in variant selection", () => {
     getDefaultChannel().then(defaultChannel => (channel = defaultChannel));
     createCategory({ name: startsWith }).then(
       categoryResp => (category = categoryResp),
-      cy.checkIfDataAreNotNull({channel, category})
+      cy.checkIfDataAreNotNull({ channel, category }),
     );
   });
 
diff --git a/cypress/e2e/configuration/attributes/deleteAndUpdateContentAttribute.js b/cypress/e2e/configuration/attributes/deleteAndUpdateContentAttribute.js
index 237da7397..b7d54ebae 100644
--- a/cypress/e2e/configuration/attributes/deleteAndUpdateContentAttribute.js
+++ b/cypress/e2e/configuration/attributes/deleteAndUpdateContentAttribute.js
@@ -29,7 +29,7 @@ describe("As an admin I want to delete and update content attribute", () => {
     }).then(attributeResp => {
       attribute = attributeResp;
     });
-    cy.checkIfDataAreNotNull(attribute)
+    cy.checkIfDataAreNotNull(attribute);
   });
 
   it(
diff --git a/cypress/e2e/configuration/navigation.js b/cypress/e2e/configuration/navigation.js
index 0e5ecd2d5..44ca4f037 100644
--- a/cypress/e2e/configuration/navigation.js
+++ b/cypress/e2e/configuration/navigation.js
@@ -24,12 +24,10 @@ describe("Tests for menu navigation", () => {
   before(() => {
     cy.clearSessionData().loginUserViaRequest();
     deleteMenusStartsWith(startsWith);
-    createMenuViaApi(randomName).then(
-      ({ menu: menuResp }) => {
-        menu = menuResp
-        cy.checkIfDataAreNotNull(menu)
-      },
-    );
+    createMenuViaApi(randomName).then(({ menu: menuResp }) => {
+      menu = menuResp;
+      cy.checkIfDataAreNotNull(menu);
+    });
   });
 
   beforeEach(() => {
diff --git a/cypress/e2e/configuration/plugins/adyen.js b/cypress/e2e/configuration/plugins/adyen.js
index c2b966804..d8c715da0 100644
--- a/cypress/e2e/configuration/plugins/adyen.js
+++ b/cypress/e2e/configuration/plugins/adyen.js
@@ -92,8 +92,17 @@ describe("Adyen payments", () => {
         });
       })
       .then(({ variantsList: variants }) => {
-        variantsList = variants
-        cy.checkIfDataAreNotNull({address,defaultChannel,warehouse,shippingMethod,variantsList,checkout,paymentCards,cardData})
+        variantsList = variants;
+        cy.checkIfDataAreNotNull({
+          address,
+          defaultChannel,
+          warehouse,
+          shippingMethod,
+          variantsList,
+          checkout,
+          paymentCards,
+          cardData,
+        });
       });
   });
 
diff --git a/cypress/e2e/configuration/plugins/stripe.js b/cypress/e2e/configuration/plugins/stripe.js
index 0bddccdd2..051bb43ea 100644
--- a/cypress/e2e/configuration/plugins/stripe.js
+++ b/cypress/e2e/configuration/plugins/stripe.js
@@ -50,7 +50,15 @@ describe("Stripe payments", () => {
       defaultChannel = values.defaultChannel;
       shippingMethod = values.shippingMethod;
       variantsList = values.variantsList;
-      cy.checkIfDataAreNotNull({address,defaultChannel,shippingMethod,variantsList,checkout,paymentCards,cardData})
+      cy.checkIfDataAreNotNull({
+        address,
+        defaultChannel,
+        shippingMethod,
+        variantsList,
+        checkout,
+        paymentCards,
+        cardData,
+      });
     });
   });
 
diff --git a/cypress/e2e/configuration/productTypes/deleteProductType.js b/cypress/e2e/configuration/productTypes/deleteProductType.js
index a6ce2ca74..7e7ac50d5 100644
--- a/cypress/e2e/configuration/productTypes/deleteProductType.js
+++ b/cypress/e2e/configuration/productTypes/deleteProductType.js
@@ -30,8 +30,8 @@ describe("As an admin I want to manage product types", () => {
     createAttribute({ name: startsWith }).then(resp => (attribute = resp));
     createCategory({ name: startsWith }).then(resp => (category = resp));
     getDefaultChannel().then(resp => {
-      channel = resp 
-      cy.checkIfDataAreNotNull({attribute, channel, category})
+      channel = resp;
+      cy.checkIfDataAreNotNull({ attribute, channel, category });
     });
   });
 
diff --git a/cypress/e2e/configuration/shippingMethods/createShippingMethod.js b/cypress/e2e/configuration/shippingMethods/createShippingMethod.js
index 8c85a1460..e4121ecdb 100644
--- a/cypress/e2e/configuration/shippingMethods/createShippingMethod.js
+++ b/cypress/e2e/configuration/shippingMethods/createShippingMethod.js
@@ -95,7 +95,14 @@ describe("As a staff user I want to create shipping zone and rate", () => {
       })
       .then(variantsListResp => {
         secondVariantsList = variantsListResp;
-        cy.checkIfDataAreNotNull({defaultChannel,address,warehouse,variantsList, secondVariantsList, attribute})
+        cy.checkIfDataAreNotNull({
+          defaultChannel,
+          address,
+          warehouse,
+          variantsList,
+          secondVariantsList,
+          attribute,
+        });
       });
   });
 
diff --git a/cypress/e2e/configuration/shippingMethods/editShippingMethod.js b/cypress/e2e/configuration/shippingMethods/editShippingMethod.js
index dc8d07c4a..59f80b977 100644
--- a/cypress/e2e/configuration/shippingMethods/editShippingMethod.js
+++ b/cypress/e2e/configuration/shippingMethods/editShippingMethod.js
@@ -50,7 +50,13 @@ describe("As a user I should be able to update and delete shipping method", () =
           createShippingZone(name, "US", defaultChannel.id, warehouse.id).then(
             shippingZoneResp => {
               shippingZone = shippingZoneResp;
-              cy.checkIfDataAreNotNull({defaultChannel, shippingZone, shippingMethod, warehouse, usAddress})
+              cy.checkIfDataAreNotNull({
+                defaultChannel,
+                shippingZone,
+                shippingMethod,
+                warehouse,
+                usAddress,
+              });
             },
           );
         });
diff --git a/cypress/e2e/configuration/shippingMethods/editShippingZone.js b/cypress/e2e/configuration/shippingMethods/editShippingZone.js
index c827d71cb..85e57bbb0 100644
--- a/cypress/e2e/configuration/shippingMethods/editShippingZone.js
+++ b/cypress/e2e/configuration/shippingMethods/editShippingZone.js
@@ -40,13 +40,17 @@ describe("As a user I should be able to update and delete shipping zone", () =>
           warehouse = warehouseResp;
 
           updateChannelWarehouses(defaultChannel.id, warehouse.id);
-          cy.checkIfDataAreNotNull({defaultChannel, shippingZone, plAddress, warehouse})
+          cy.checkIfDataAreNotNull({
+            defaultChannel,
+            shippingZone,
+            plAddress,
+            warehouse,
+          });
         });
       });
   });
 
   beforeEach(() => {
-
     cy.clearSessionData().loginUserViaRequest();
     createShippingZone(name, "US", defaultChannel.id, warehouse.id).then(
       shippingZoneResp => {
diff --git a/cypress/e2e/configuration/shippingMethods/postalCodes.js b/cypress/e2e/configuration/shippingMethods/postalCodes.js
index 5b7c4c3f5..4a8e09090 100644
--- a/cypress/e2e/configuration/shippingMethods/postalCodes.js
+++ b/cypress/e2e/configuration/shippingMethods/postalCodes.js
@@ -83,7 +83,14 @@ describe("As a user I want to create shipping method with postal codes", () => {
       })
       .then(({ variantsList: variantsListResp }) => {
         variantsList = variantsListResp;
-        cy.checkIfDataAreNotNull({defaultChannel,usAddress,secondUsAddress,shippingZone,warehouse,variantsList})
+        cy.checkIfDataAreNotNull({
+          defaultChannel,
+          usAddress,
+          secondUsAddress,
+          shippingZone,
+          warehouse,
+          variantsList,
+        });
       });
   });
 
diff --git a/cypress/e2e/configuration/shippingMethods/shippingWeights/shippingWeightsLimits.js b/cypress/e2e/configuration/shippingMethods/shippingWeights/shippingWeightsLimits.js
index a930c8355..c0fcefb15 100644
--- a/cypress/e2e/configuration/shippingMethods/shippingWeights/shippingWeightsLimits.js
+++ b/cypress/e2e/configuration/shippingMethods/shippingWeights/shippingWeightsLimits.js
@@ -74,7 +74,13 @@ describe("As a staff user I want to manage shipping weights", () => {
       })
       .then(({ variantsList: variantsListResp }) => {
         variantsList = variantsListResp;
-        cy.checkIfDataAreNotNull({defaultChannel,usAddress,shippingZone,warehouse,variantsList})
+        cy.checkIfDataAreNotNull({
+          defaultChannel,
+          usAddress,
+          shippingZone,
+          warehouse,
+          variantsList,
+        });
       });
   });
 
diff --git a/cypress/e2e/configuration/shippingMethods/shippingWeights/weightRecalculate.js b/cypress/e2e/configuration/shippingMethods/shippingWeights/weightRecalculate.js
index 0966e4bf7..e5cd43b6f 100644
--- a/cypress/e2e/configuration/shippingMethods/shippingWeights/weightRecalculate.js
+++ b/cypress/e2e/configuration/shippingMethods/shippingWeights/weightRecalculate.js
@@ -51,7 +51,12 @@ describe("As a staff user I want to change shop default weight unit", () => {
       })
       .then(shippingZoneResp => {
         shippingZone = shippingZoneResp;
-        cy.checkIfDataAreNotNull({defaultChannel,usAddress,shippingZone,warehouse})
+        cy.checkIfDataAreNotNull({
+          defaultChannel,
+          usAddress,
+          shippingZone,
+          warehouse,
+        });
       });
   });
 
diff --git a/cypress/e2e/configuration/siteSettings.js b/cypress/e2e/configuration/siteSettings.js
index 8cda56512..0a15d6b92 100644
--- a/cypress/e2e/configuration/siteSettings.js
+++ b/cypress/e2e/configuration/siteSettings.js
@@ -17,7 +17,7 @@ describe("Tests for site settings", () => {
     cy.fixture("addresses").then(({ usAddress, plAddress }) => {
       address = usAddress;
       updateShopAddress(plAddress);
-      cy.checkIfDataAreNotNull(address)
+      cy.checkIfDataAreNotNull(address);
     });
   });
 
diff --git a/cypress/e2e/configuration/warehouses/warehouse.js b/cypress/e2e/configuration/warehouses/warehouse.js
index d94d4f28b..62b877cc3 100644
--- a/cypress/e2e/configuration/warehouses/warehouse.js
+++ b/cypress/e2e/configuration/warehouses/warehouse.js
@@ -35,7 +35,7 @@ describe("As an admin I want to manage warehouses", () => {
     cy.fixture("addresses").then(addresses => {
       usAddress = addresses.usAddress;
       secondUsAddress = addresses.secondUsAddress;
-      cy.checkIfDataAreNotNull({usAddress,secondUsAddress})
+      cy.checkIfDataAreNotNull({ usAddress, secondUsAddress });
     });
   });
 
diff --git a/cypress/e2e/customerRegistration.js b/cypress/e2e/customerRegistration.js
index ee43fc329..049b36827 100644
--- a/cypress/e2e/customerRegistration.js
+++ b/cypress/e2e/customerRegistration.js
@@ -25,7 +25,7 @@ describe("Tests for customer registration", () => {
     deleteCustomersStartsWith(startsWith);
     getDefaultChannel().then(channel => {
       defaultChannel = channel;
-      cy.checkIfDataAreNotNull({defaultChannel})
+      cy.checkIfDataAreNotNull({ defaultChannel });
     });
   });
 
diff --git a/cypress/e2e/discounts/sales/createSalesForProducts.js b/cypress/e2e/discounts/sales/createSalesForProducts.js
index 33ec8051d..f52cd081b 100644
--- a/cypress/e2e/discounts/sales/createSalesForProducts.js
+++ b/cypress/e2e/discounts/sales/createSalesForProducts.js
@@ -69,7 +69,13 @@ describe("As an admin I want to create sale for products", () => {
       })
       .then(({ warehouse: warehouseResp }) => {
         warehouse = warehouseResp;
-        cy.checkIfDataAreNotNull({productType,attribute,category,defaultChannel,warehouse})
+        cy.checkIfDataAreNotNull({
+          productType,
+          attribute,
+          category,
+          defaultChannel,
+          warehouse,
+        });
       });
   });
 
diff --git a/cypress/e2e/discounts/sales/createSalesForVariants.js b/cypress/e2e/discounts/sales/createSalesForVariants.js
index 77dd2e973..9c76dd9e1 100644
--- a/cypress/e2e/discounts/sales/createSalesForVariants.js
+++ b/cypress/e2e/discounts/sales/createSalesForVariants.js
@@ -71,7 +71,12 @@ describe("Sales discounts for variant", () => {
           warehouseId: warehouse.id,
           price: productPrice,
         };
-        cy.checkIfDataAreNotNull({productData, defaultChannel, warehouse, address})
+        cy.checkIfDataAreNotNull({
+          productData,
+          defaultChannel,
+          warehouse,
+          address,
+        });
       });
   });
 
diff --git a/cypress/e2e/discounts/sales/updateSales.js b/cypress/e2e/discounts/sales/updateSales.js
index e39ab5b2b..c1d4eb508 100644
--- a/cypress/e2e/discounts/sales/updateSales.js
+++ b/cypress/e2e/discounts/sales/updateSales.js
@@ -82,7 +82,14 @@ describe("As an admin I want to update sales", () => {
         warehouseId: warehouse.id,
         price: productPrice,
       };
-      cy.checkIfDataAreNotNull({productData, defaultChannel, warehouse, address, sale, variants})
+      cy.checkIfDataAreNotNull({
+        productData,
+        defaultChannel,
+        warehouse,
+        address,
+        sale,
+        variants,
+      });
     });
   });
 
diff --git a/cypress/e2e/discounts/vouchers/createVouchers.js b/cypress/e2e/discounts/vouchers/createVouchers.js
index d2579c2a3..41b616495 100644
--- a/cypress/e2e/discounts/vouchers/createVouchers.js
+++ b/cypress/e2e/discounts/vouchers/createVouchers.js
@@ -53,7 +53,11 @@ describe("As an admin I want to create voucher", () => {
             auth: "token",
           };
         },
-        cy.checkIfDataAreNotNull({createdChannel, dataForCheckout, defaultChannel})
+        cy.checkIfDataAreNotNull({
+          createdChannel,
+          dataForCheckout,
+          defaultChannel,
+        }),
       );
   });
 
diff --git a/cypress/e2e/discounts/vouchers/createVouchersWithLimits.js b/cypress/e2e/discounts/vouchers/createVouchersWithLimits.js
index 33ecd7ccd..b49c27126 100644
--- a/cypress/e2e/discounts/vouchers/createVouchersWithLimits.js
+++ b/cypress/e2e/discounts/vouchers/createVouchersWithLimits.js
@@ -49,7 +49,7 @@ describe("As an admin I want to create voucher", () => {
             shippingMethodName: shippingMethodResp.name,
             auth: "token",
           };
-          cy.checkIfDataAreNotNull({dataForCheckout, defaultChannel})
+          cy.checkIfDataAreNotNull({ dataForCheckout, defaultChannel });
           cy.clearSessionData();
         },
       );
diff --git a/cypress/e2e/discounts/vouchers/updateVouchers.js b/cypress/e2e/discounts/vouchers/updateVouchers.js
index a3f1c4b6d..e97712240 100644
--- a/cypress/e2e/discounts/vouchers/updateVouchers.js
+++ b/cypress/e2e/discounts/vouchers/updateVouchers.js
@@ -51,7 +51,7 @@ describe("As an admin I want to update vouchers", () => {
             auth: "token",
           };
         },
-        cy.checkIfDataAreNotNull({dataForCheckout, defaultChannel, product})
+        cy.checkIfDataAreNotNull({ dataForCheckout, defaultChannel, product }),
       );
   });
 
diff --git a/cypress/e2e/metadata.js b/cypress/e2e/metadata.js
index da5ab9473..7c62aa2be 100644
--- a/cypress/e2e/metadata.js
+++ b/cypress/e2e/metadata.js
@@ -41,7 +41,7 @@ describe("Test for metadata", () => {
       })
       .then(({ product: productResp }) => {
         product = productResp;
-        cy.checkIfDataAreNotNull({channel, product})
+        cy.checkIfDataAreNotNull({ channel, product });
       });
   });
 
diff --git a/cypress/e2e/orders/manageStockReservation.js b/cypress/e2e/orders/manageStockReservation.js
index a3001d2a1..8157d7772 100644
--- a/cypress/e2e/orders/manageStockReservation.js
+++ b/cypress/e2e/orders/manageStockReservation.js
@@ -67,7 +67,15 @@ describe("As an admin I want to manage stock reservation", () => {
               productType = productTypeResp;
             },
           );
-          cy.checkIfDataAreNotNull({defaultChannel,address,warehouse,attribute,category,productType,dataForCheckout})
+          cy.checkIfDataAreNotNull({
+            defaultChannel,
+            address,
+            warehouse,
+            attribute,
+            category,
+            productType,
+            dataForCheckout,
+          });
         });
       });
     });
diff --git a/cypress/e2e/orders/orders.js b/cypress/e2e/orders/orders.js
index 9f896b57b..f4fb5b3fa 100644
--- a/cypress/e2e/orders/orders.js
+++ b/cypress/e2e/orders/orders.js
@@ -105,7 +105,14 @@ describe("Orders", () => {
       )
       .then(({ variantsList: variantsResp }) => {
         variantsList = variantsResp;
-        cy.checkIfDataAreNotNull({customer,defaultChannel,warehouse,shippingMethod,variantsList,address})
+        cy.checkIfDataAreNotNull({
+          customer,
+          defaultChannel,
+          warehouse,
+          shippingMethod,
+          variantsList,
+          address,
+        });
       });
   });
 
diff --git a/cypress/e2e/products/createProduct.js b/cypress/e2e/products/createProduct.js
index aa48aadc5..145234241 100644
--- a/cypress/e2e/products/createProduct.js
+++ b/cypress/e2e/products/createProduct.js
@@ -55,7 +55,7 @@ describe("As an admin I should be able to create product", () => {
     cy.clearSessionData().loginUserViaRequest();
     createAttribute({ name }).then(attributeResp => {
       attribute = attributeResp;
-      cy.checkIfDataAreNotNull({attribute})
+      cy.checkIfDataAreNotNull({ attribute });
     });
   });
   beforeEach(() => {
diff --git a/cypress/e2e/products/productsList/sortingProducts.js b/cypress/e2e/products/productsList/sortingProducts.js
index 2f822b862..f3343169a 100644
--- a/cypress/e2e/products/productsList/sortingProducts.js
+++ b/cypress/e2e/products/productsList/sortingProducts.js
@@ -27,7 +27,7 @@ describe("As an admin I should be able to sort products", () => {
     cy.clearSessionData().loginUserViaRequest();
     getDefaultChannel().then(channel => {
       defaultChannel = channel;
-      cy.checkIfDataAreNotNull({defaultChannel})
+      cy.checkIfDataAreNotNull({ defaultChannel });
     });
   });
 
diff --git a/cypress/e2e/products/productsVariants.js b/cypress/e2e/products/productsVariants.js
index 2c0dae032..625b225e0 100644
--- a/cypress/e2e/products/productsVariants.js
+++ b/cypress/e2e/products/productsVariants.js
@@ -49,8 +49,15 @@ describe("As an admin I should be able to create variant", () => {
         createChannel({ isActive: true, name, currencyCode: "PLN" });
       })
       .then(resp => {
-        newChannel = resp
-        cy.checkIfDataAreNotNull({defaultChannel,warehouse,attribute,productType,category,newChannel})
+        newChannel = resp;
+        cy.checkIfDataAreNotNull({
+          defaultChannel,
+          warehouse,
+          attribute,
+          productType,
+          category,
+          newChannel,
+        });
       });
   });
 
diff --git a/cypress/e2e/staffMembers.js b/cypress/e2e/staffMembers.js
index 065503472..6891e8f6b 100644
--- a/cypress/e2e/staffMembers.js
+++ b/cypress/e2e/staffMembers.js
@@ -52,7 +52,7 @@ describe("Staff members", () => {
         cy.clearSessionData().visit(urlLink);
         fillUpSetPassword(password);
         cy.clearSessionData();
-        cy.checkIfDataAreNotNull({user})
+        cy.checkIfDataAreNotNull({ user });
       });
   });
 
diff --git a/cypress/e2e/translations.js b/cypress/e2e/translations.js
index 49f12386b..11ac9faf7 100644
--- a/cypress/e2e/translations.js
+++ b/cypress/e2e/translations.js
@@ -20,12 +20,10 @@ describe("As an admin I want to manage translations", () => {
   before(() => {
     cy.clearSessionData().loginUserViaRequest();
     deleteCategoriesStartsWith(startsWith);
-    createCategory({ name: startsWith }).then(
-      categoryResp => {
-        category = categoryResp
-        cy.checkIfDataAreNotNull({category})
-      },
-    );
+    createCategory({ name: startsWith }).then(categoryResp => {
+      category = categoryResp;
+      cy.checkIfDataAreNotNull({ category });
+    });
   });
 
   beforeEach(() => {
diff --git a/cypress/support/customCommands/basicOperations/index.js b/cypress/support/customCommands/basicOperations/index.js
index 4f33de223..e775de237 100644
--- a/cypress/support/customCommands/basicOperations/index.js
+++ b/cypress/support/customCommands/basicOperations/index.js
@@ -1,5 +1,5 @@
 Cypress.Commands.add("getTextFromElement", element =>
-  cy.get(element).invoke("text")
+  cy.get(element).invoke("text"),
 );
 
 Cypress.Commands.add("clearAndType", { prevSubject: true }, (subject, text) => {
@@ -12,22 +12,22 @@ Cypress.Commands.add("waitForRequestAndCheckIfNoErrors", alias => {
   cy.wait(alias).then(resp => {
     expect(
       resp.response.body.errors,
-      `No errors in ${alias} operation in graphql response`
+      `No errors in ${alias} operation in graphql response`,
     ).to.be.undefined;
     return resp;
   });
 });
 
-Cypress.Commands.add("checkIfDataAreNotNull", (data) => {
+Cypress.Commands.add("checkIfDataAreNotNull", data => {
   expect(data, "Created data should not be null").to.be.not.null;
-  if(typeof data === "object"){
+  if (typeof data === "object") {
     Object.keys(data).forEach(key => {
-        cy.checkIfDataAreNotNull(data[key])
-    })
-  }else if(Array.isArray(data)){
+      cy.checkIfDataAreNotNull(data[key]);
+    });
+  } else if (Array.isArray(data)) {
     expect(data).not.to.be.empty;
     data.forEach(singleData => {
-      cy.checkIfDataAreNotNull(singleData)
-    })
+      cy.checkIfDataAreNotNull(singleData);
+    });
   }
-})
\ No newline at end of file
+});
diff --git a/docs/configuration.md b/docs/configuration.md
index 3b7ad8252..588bd7a0d 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -23,3 +23,9 @@ Create `.env` file in a root directory or set environment variables with the fol
 - `APPS_MARKETPLACE_API_URI` - URI of Marketplace API to fetch list of Apps in JSON.
 
 - `APPS_TUNNEL_URL_KEYWORDS` - Custom apps tunnel URL keywords.
+
+- `FLAGS_SERVICE_ENABLED` - Boolean flag determines whether we use external feature flags provider.
+  If you set `FLAGS_SERVICE_ENABLED` to "true", we'll be using external feature flag provider as source or flags.
+  If you set `FLAGS_SERVICE_ENABLED` to "false" or not set, we'll use fallback flags from environment variables.
+
+- `FLAGSMITH_ID` - Flagsmith environment id
diff --git a/package-lock.json b/package-lock.json
index 9b4714fe7..9efe3c4f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "faker": "^5.1.0",
         "fast-array-diff": "^0.2.0",
         "find-test-names": "^1.17.1",
+        "flagsmith": "^3.15.1",
         "fuse.js": "^6.6.2",
         "fuzzaldrin": "^2.1.0",
         "graphql": "^15.4.0",
@@ -21046,6 +21047,11 @@
       "resolved": "https://registry.npmjs.org/first-match/-/first-match-0.0.1.tgz",
       "integrity": "sha1-pg7GQnAPD0NyNOu37D84JHblQv0="
     },
+    "node_modules/flagsmith": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/flagsmith/-/flagsmith-3.15.1.tgz",
+      "integrity": "sha512-4OHVCCYuW1doYceEJbrQWJgefwRaC9oi2VeswVzCqCe0WCoT0pOIxgi14l3Am0a0fcN9wUd93Dv2OQaF6GqKjA=="
+    },
     "node_modules/flat": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
@@ -59661,6 +59667,11 @@
       "resolved": "https://registry.npmjs.org/first-match/-/first-match-0.0.1.tgz",
       "integrity": "sha1-pg7GQnAPD0NyNOu37D84JHblQv0="
     },
+    "flagsmith": {
+      "version": "3.15.1",
+      "resolved": "https://registry.npmjs.org/flagsmith/-/flagsmith-3.15.1.tgz",
+      "integrity": "sha512-4OHVCCYuW1doYceEJbrQWJgefwRaC9oi2VeswVzCqCe0WCoT0pOIxgi14l3Am0a0fcN9wUd93Dv2OQaF6GqKjA=="
+    },
     "flat": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
diff --git a/package.json b/package.json
index cb084a8b2..06a08055e 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "faker": "^5.1.0",
     "fast-array-diff": "^0.2.0",
     "find-test-names": "^1.17.1",
+    "flagsmith": "^3.15.1",
     "fuse.js": "^6.6.2",
     "fuzzaldrin": "^2.1.0",
     "graphql": "^15.4.0",
@@ -212,6 +213,10 @@
   },
   "jest": {
     "resetMocks": false,
+    "globals": {
+      "FLAGS_SERVICE_ENABLED": false,
+      "FLAGS": {}
+    },
     "setupFilesAfterEnv": [
       "jest-canvas-mock",
       "jest-localstorage-mock",
@@ -262,7 +267,7 @@
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=16384 vite build",
     "preview": "vite preview",
     "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook -c src/storybook/ -o build/storybook",
-    "build-types": "graphql-codegen",
+    "build-types": "node scripts/build-types.js",
     "prebuild": "npm run build-types",
     "check-strict-null-errors": "tsc --noEmit --strictNullChecks | node scripts/count-strict-null-check-errors.js",
     "check-types": "tsc --noEmit",
diff --git a/scripts/build-types.js b/scripts/build-types.js
new file mode 100644
index 000000000..ed3a5b09a
--- /dev/null
+++ b/scripts/build-types.js
@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { generate } = require("@graphql-codegen/cli");
+
+// Feature flags names that will be used as suffix for generated files
+const FEATURE_FLAGS = [];
+
+const schemaSuffixes = ["default", ...FEATURE_FLAGS];
+
+for (const rawSuffix of schemaSuffixes) {
+  const suffix = prepareSuffix(rawSuffix);
+
+  generate(
+    {
+      schema: `./introspection${suffix}.json`,
+      overwrite: true,
+      generates: {
+        [getOutputPath("fragmentTypes", suffix)]: {
+          plugins: [
+            {
+              add: {
+                content: "/* eslint-disable */",
+              },
+            },
+            "fragment-matcher",
+          ],
+          config: {
+            minify: false,
+            apolloClientVersion: 3,
+          },
+        },
+        [getOutputPath("typePolicies", suffix)]: {
+          plugins: [
+            {
+              add: {
+                content: "/* eslint-disable */",
+              },
+            },
+            "typescript-apollo-client-helpers",
+          ],
+        },
+        [getOutputPath("types", suffix)]: {
+          documents: getDocumentsPaths(suffix),
+          config: {
+            nonOptionalTypename: true,
+            avoidOptionals: {
+              field: true,
+              inputValue: false,
+              object: false,
+              defaultValue: false,
+            },
+            namingConvention: {
+              enumValues: "change-case-all#upperCase",
+            },
+            onlyOperationTypes: true,
+          },
+          plugins: [
+            {
+              add: {
+                content: "/* eslint-disable */",
+              },
+            },
+            "typescript",
+            "typescript-operations",
+          ],
+        },
+        [getOutputPath("hooks", suffix)]: {
+          documents: getDocumentsPaths(suffix),
+          preset: "import-types",
+          presetConfig: {
+            typesPath: "./types" + suffix + ".generated",
+          },
+          config: {
+            withHooks: true,
+            apolloReactHooksImportFrom: "@dashboard/hooks/graphql",
+          },
+          plugins: [
+            {
+              add: {
+                content: "/* eslint-disable */",
+              },
+            },
+            "typescript-react-apollo",
+          ],
+        },
+      },
+    },
+    true,
+  );
+}
+
+function getOutputPath(path, suffix) {
+  return `./src/graphql/${path}${suffix}.generated.ts`;
+}
+
+function getDocumentsPaths(suffix) {
+  return [
+    `./src/**/queries${suffix}.ts`,
+    `./src/**/mutations${suffix}.ts`,
+    `./src/**/fragments/*${suffix}.ts`,
+    `./src/searches/*${suffix}.ts`,
+  ];
+}
+
+function prepareSuffix(suffix) {
+  if (suffix === "default") {
+    return "";
+  }
+
+  return "." + suffix;
+}
diff --git a/src/apps/components/AppFrame/AppFrame.tsx b/src/apps/components/AppFrame/AppFrame.tsx
index d8c61a352..a88176047 100644
--- a/src/apps/components/AppFrame/AppFrame.tsx
+++ b/src/apps/components/AppFrame/AppFrame.tsx
@@ -1,8 +1,10 @@
 import {
   AppDetailsUrlQueryParams,
   getAppDeepPathFromDashboardUrl,
+  prepareFeatureFlagsList,
   resolveAppIframeUrl,
 } from "@dashboard/apps/urls";
+import { useAllFlags } from "@dashboard/hooks/useFlags";
 import useLocale from "@dashboard/hooks/useLocale";
 import useShop from "@dashboard/hooks/useShop";
 import { useTheme } from "@saleor/macaw-ui";
@@ -42,6 +44,7 @@ export const AppFrame: React.FC<Props> = ({
   const { themeType } = useTheme();
   const classes = useStyles();
   const appOrigin = getOrigin(src);
+  const flags = useAllFlags();
   const { postToExtension } = useAppActions(frameRef, appOrigin, appId);
   const location = useLocation();
   const { locale } = useLocale();
@@ -102,7 +105,10 @@ export const AppFrame: React.FC<Props> = ({
   return (
     <iframe
       ref={frameRef}
-      src={resolveAppIframeUrl(appId, src, params)}
+      src={resolveAppIframeUrl(appId, src, {
+        ...params,
+        featureFlags: prepareFeatureFlagsList(flags),
+      })}
       onError={onError}
       onLoad={handleLoad}
       className={clsx(classes.iframe, className)}
diff --git a/src/apps/urls.ts b/src/apps/urls.ts
index d6a4235fc..a064aab3c 100644
--- a/src/apps/urls.ts
+++ b/src/apps/urls.ts
@@ -1,4 +1,5 @@
 import { getApiUrl } from "@dashboard/config";
+import { FlagWithName } from "@dashboard/hooks/useFlags/types";
 import { stringifyQs } from "@dashboard/utils/urls";
 import urlJoin from "url-join";
 
@@ -26,9 +27,14 @@ export interface AppDetailsUrlMountQueryParams {
   customerIds?: string[];
 }
 
+interface FeatureFlagsQueryParams {
+  featureFlags?: Record<string, string>;
+}
+
 export type AppDetailsUrlQueryParams = Dialog<AppDetailsUrlDialog> &
   SingleAction &
-  AppDetailsUrlMountQueryParams;
+  AppDetailsUrlMountQueryParams &
+  FeatureFlagsQueryParams;
 
 export type AppInstallUrlQueryParams = Partial<{ [MANIFEST_ATTR]: string }>;
 
@@ -130,3 +136,13 @@ export const resolveAppIframeUrl = (
 
   return urlJoin(appUrl, window.location.search, iframeContextQueryString);
 };
+
+export const prepareFeatureFlagsList = (
+  flags: FlagWithName[],
+): Record<string, string> =>
+  flags.reduce<Record<string, string>>((acc, flag) => {
+    if (flag.enabled) {
+      acc[flag.name] = `${flag.value || true}`;
+    }
+    return acc;
+  }, {});
diff --git a/src/hooks/useFlags/env/const.ts b/src/hooks/useFlags/env/const.ts
new file mode 100644
index 000000000..417bb1bc4
--- /dev/null
+++ b/src/hooks/useFlags/env/const.ts
@@ -0,0 +1 @@
+export const ENV_FLAG_PREFIX = "FF_";
diff --git a/src/hooks/useFlags/env/helpers.ts b/src/hooks/useFlags/env/helpers.ts
new file mode 100644
index 000000000..9b4a20691
--- /dev/null
+++ b/src/hooks/useFlags/env/helpers.ts
@@ -0,0 +1,32 @@
+import camelCase from "lodash/camelCase";
+import snakeCase from "lodash/snakeCase";
+
+import { ENV_FLAG_PREFIX } from "./const";
+
+export const envNameToFlagName = (envName: string) => {
+  const name = envName.split(ENV_FLAG_PREFIX)[1];
+  return camelCase(name);
+};
+
+export const flagNameToEnvName = (flagName: string) =>
+  `${ENV_FLAG_PREFIX}${snakeCase(flagName).toUpperCase()}`;
+
+/**
+ Referencing an virtual constant FLAGS, prepared by Vite. It populates env-based feature flags into client-side, under the virtual property FLAGS,
+ Please do not use FLAGS constant directly anywhere.
+*/
+export const readFlagFromEnv = (flagName: string): string | undefined => {
+  if (FLAGS) {
+    return FLAGS[flagName];
+  }
+
+  return undefined;
+};
+
+export const readAllFlagsFromEnv = (): Record<string, string> => {
+  if (FLAGS) {
+    return FLAGS;
+  }
+
+  return {};
+};
diff --git a/src/hooks/useFlags/env/index.ts b/src/hooks/useFlags/env/index.ts
new file mode 100644
index 000000000..48904003e
--- /dev/null
+++ b/src/hooks/useFlags/env/index.ts
@@ -0,0 +1,2 @@
+export { useEnvFlags } from "./useEnvFlags";
+export { useAllEnvFlags } from "./useAllEnvFlags";
diff --git a/src/hooks/useFlags/env/useAllEnvFlags.test.tsx b/src/hooks/useFlags/env/useAllEnvFlags.test.tsx
new file mode 100644
index 000000000..07b43acbb
--- /dev/null
+++ b/src/hooks/useFlags/env/useAllEnvFlags.test.tsx
@@ -0,0 +1,40 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useAllEnvFlags } from "./useAllEnvFlags";
+
+describe("useAllEnvFlags hook", () => {
+  afterEach(() => {
+    delete FLAGS.FF_FLAG_ONE;
+    delete FLAGS.FF_FLAG_TWO;
+  });
+
+  test("should return all environment flags", () => {
+    // Arrange && Act
+    FLAGS.FF_FLAG_ONE = "1";
+    FLAGS.FF_FLAG_TWO = "2";
+
+    const { result } = renderHook(() => useAllEnvFlags());
+
+    // Assert
+    expect(result.current).toEqual([
+      {
+        name: "flagOne",
+        enabled: true,
+        value: "1",
+      },
+      {
+        name: "flagTwo",
+        enabled: true,
+        value: "2",
+      },
+    ]);
+  });
+
+  test("should return empty array when there is no flags", () => {
+    // Arrange && Act
+    const { result } = renderHook(() => useAllEnvFlags());
+
+    // Assert
+    expect(result.current).toEqual([]);
+  });
+});
diff --git a/src/hooks/useFlags/env/useAllEnvFlags.ts b/src/hooks/useFlags/env/useAllEnvFlags.ts
new file mode 100644
index 000000000..d52dfafa2
--- /dev/null
+++ b/src/hooks/useFlags/env/useAllEnvFlags.ts
@@ -0,0 +1,12 @@
+import { FlagWithName } from "../types";
+import { envNameToFlagName, readAllFlagsFromEnv } from "./helpers";
+
+export const useAllEnvFlags = (): FlagWithName[] => {
+  const flags = readAllFlagsFromEnv();
+
+  return Object.entries(flags).map(([flagKey, flagValue]) => ({
+    name: envNameToFlagName(flagKey),
+    enabled: flagValue !== "",
+    value: flagValue,
+  }));
+};
diff --git a/src/hooks/useFlags/env/useEnvFlags.test.tsx b/src/hooks/useFlags/env/useEnvFlags.test.tsx
new file mode 100644
index 000000000..590aab543
--- /dev/null
+++ b/src/hooks/useFlags/env/useEnvFlags.test.tsx
@@ -0,0 +1,57 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useEnvFlags } from "./useEnvFlags";
+
+describe("useEnvFlags hook", () => {
+  afterEach(() => {
+    delete FLAGS.FF_FLAG_ONE;
+    delete FLAGS.FF_FLAG_TWO;
+  });
+
+  test("should return results for given flags when exists in process.env", () => {
+    // Arrange && Act
+    FLAGS.FF_FLAG_ONE = "1";
+    FLAGS.FF_FLAG_TWO = "2";
+
+    const { result } = renderHook(() => useEnvFlags(["flagOne", "flag_two"]));
+
+    // Assert
+    expect(result.current).toEqual({
+      flagOne: {
+        enabled: true,
+        value: "1",
+      },
+      flag_two: {
+        enabled: true,
+        value: "2",
+      },
+    });
+  });
+
+  test("should return results for given flags even when flag does not exist", () => {
+    // Arrange && Act
+
+    const { result } = renderHook(() => useEnvFlags(["flagOne", "flag_two"]));
+
+    // Assert
+    expect(result.current).toEqual({
+      flagOne: {
+        enabled: false,
+        value: "",
+      },
+      flag_two: {
+        enabled: false,
+        value: "",
+      },
+    });
+  });
+
+  test("should return empty object when not flags provided", () => {
+    // Arrange && Act
+
+    const { result } = renderHook(() => useEnvFlags([]));
+
+    // Assert
+    expect(result.current).toEqual({});
+  });
+});
diff --git a/src/hooks/useFlags/env/useEnvFlags.ts b/src/hooks/useFlags/env/useEnvFlags.ts
new file mode 100644
index 000000000..060aac827
--- /dev/null
+++ b/src/hooks/useFlags/env/useEnvFlags.ts
@@ -0,0 +1,23 @@
+import { FlagsResults } from "../types";
+import { flagNameToEnvName, readFlagFromEnv } from "./helpers";
+
+export const useEnvFlags = <T extends readonly string[]>(
+  flags: readonly [...T],
+): FlagsResults<T> =>
+  flags.reduce((acc, flag) => {
+    const envFlag = readFlagFromEnv(flagNameToEnvName(flag));
+
+    if (envFlag) {
+      acc[flag] = {
+        enabled: envFlag !== "",
+        value: envFlag,
+      };
+    } else {
+      acc[flag] = {
+        enabled: false,
+        value: "",
+      };
+    }
+
+    return acc;
+  }, {} as FlagsResults<T>);
diff --git a/src/hooks/useFlags/flagsService/flagsServiceProvider.tsx b/src/hooks/useFlags/flagsService/flagsServiceProvider.tsx
new file mode 100644
index 000000000..adc1ff567
--- /dev/null
+++ b/src/hooks/useFlags/flagsService/flagsServiceProvider.tsx
@@ -0,0 +1,27 @@
+import flagsmith from "flagsmith";
+import { FlagsmithProvider as Provider } from "flagsmith/react";
+import React from "react";
+
+interface FlagsServiceProviderProps {
+  children: React.ReactElement;
+}
+
+export const FlagsServiceProvider = ({
+  children,
+}: FlagsServiceProviderProps) => {
+  if (!FLAGS_SERVICE_ENABLED) {
+    return children;
+  }
+
+  return (
+    <Provider
+      flagsmith={flagsmith}
+      options={{
+        environmentID: FLAGSMITH_ID,
+        cacheFlags: true,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+};
diff --git a/src/hooks/useFlags/flagsService/index.ts b/src/hooks/useFlags/flagsService/index.ts
new file mode 100644
index 000000000..534bcfbc3
--- /dev/null
+++ b/src/hooks/useFlags/flagsService/index.ts
@@ -0,0 +1,3 @@
+export { useServiceFlags } from "./useServiceFlags";
+export { useAllServiceFlags } from "./useAllServiceFlags";
+export { FlagsServiceProvider } from "./flagsServiceProvider";
diff --git a/src/hooks/useFlags/flagsService/useAllServiceFlags.test.tsx b/src/hooks/useFlags/flagsService/useAllServiceFlags.test.tsx
new file mode 100644
index 000000000..d6843277d
--- /dev/null
+++ b/src/hooks/useFlags/flagsService/useAllServiceFlags.test.tsx
@@ -0,0 +1,44 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useAllServiceFlags } from "./useAllServiceFlags";
+
+jest.mock("flagsmith/react", () => ({
+  __esModule: true,
+  useFlagsmith: () => ({
+    getAllFlags: () => ({
+      flag_one: {
+        enabled: true,
+        value: "1",
+      },
+      flag_two: {
+        enabled: true,
+        value: "2",
+      },
+    }),
+  }),
+}));
+
+afterAll(() => {
+  jest.clearAllMocks();
+});
+
+describe("useAllServiceFlags hook", () => {
+  test("should return all flags from flag service", () => {
+    // Arrange && Act
+    const { result } = renderHook(() => useAllServiceFlags());
+
+    // Assert
+    expect(result.current).toEqual([
+      {
+        name: "flagOne",
+        enabled: true,
+        value: "1",
+      },
+      {
+        name: "flagTwo",
+        enabled: true,
+        value: "2",
+      },
+    ]);
+  });
+});
diff --git a/src/hooks/useFlags/flagsService/useAllServiceFlags.ts b/src/hooks/useFlags/flagsService/useAllServiceFlags.ts
new file mode 100644
index 000000000..4721a0dbf
--- /dev/null
+++ b/src/hooks/useFlags/flagsService/useAllServiceFlags.ts
@@ -0,0 +1,15 @@
+import { useFlagsmith } from "flagsmith/react";
+import camelCase from "lodash/camelCase";
+
+import { FlagWithName } from "../types";
+
+export const useAllServiceFlags = (): FlagWithName[] => {
+  const flagsmith = useFlagsmith();
+  const flags = flagsmith.getAllFlags();
+
+  return Object.entries(flags).map(([name, { value, enabled }]) => ({
+    name: camelCase(name),
+    value: value ?? "",
+    enabled,
+  }));
+};
diff --git a/src/hooks/useFlags/flagsService/useServiceFlags.test.tsx b/src/hooks/useFlags/flagsService/useServiceFlags.test.tsx
new file mode 100644
index 000000000..4033a7131
--- /dev/null
+++ b/src/hooks/useFlags/flagsService/useServiceFlags.test.tsx
@@ -0,0 +1,50 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+import { useServiceFlags } from "./useServiceFlags";
+
+jest.mock("flagsmith/react", () => ({
+  __esModule: true,
+  useFlags: () => ({
+    flag_one: {
+      enabled: true,
+      value: "1",
+    },
+    flag_two: {
+      enabled: true,
+      value: "2",
+    },
+  }),
+}));
+
+afterAll(() => {
+  jest.clearAllMocks();
+});
+
+describe("useServiceFlags", () => {
+  test("should return flags with values", () => {
+    // Arrange && Ac
+    const { result } = renderHook(() =>
+      useServiceFlags(["flagOne", "flag_two"]),
+    );
+
+    // Assert
+    expect(result.current).toEqual({
+      flagOne: {
+        enabled: true,
+        value: "1",
+      },
+      flag_two: {
+        enabled: true,
+        value: "2",
+      },
+    });
+  });
+
+  test("should return empty object when not flags provided", () => {
+    // Arrange && Act
+    const { result } = renderHook(() => useServiceFlags([]));
+
+    // Assert
+    expect(result.current).toEqual({});
+  });
+});
diff --git a/src/hooks/useFlags/flagsService/useServiceFlags.ts b/src/hooks/useFlags/flagsService/useServiceFlags.ts
new file mode 100644
index 000000000..b15c58e17
--- /dev/null
+++ b/src/hooks/useFlags/flagsService/useServiceFlags.ts
@@ -0,0 +1,27 @@
+import { useFlags } from "flagsmith/react";
+import snakeCase from "lodash/snakeCase";
+
+import { FlagsResults } from "../types";
+
+export const useServiceFlags = <T extends readonly string[]>(
+  flags: readonly [...T],
+  traits?: string[],
+): FlagsResults<T> => {
+  const flagsmithFlags = useFlags(transformFlagsToSnakeCase(flags), traits);
+
+  return flags.reduce((acc, flag) => {
+    const flagName = snakeCase(flag);
+    if (flagsmithFlags[flagName]) {
+      acc[flag] = {
+        enabled: flagsmithFlags[flagName].enabled,
+        value: flagsmithFlags[flagName].value ?? "",
+      };
+    }
+
+    return acc;
+  }, {} as FlagsResults<T>);
+};
+
+function transformFlagsToSnakeCase(flags: readonly string[]): string[] {
+  return flags.map(flag => snakeCase(flag));
+}
diff --git a/src/hooks/useFlags/index.ts b/src/hooks/useFlags/index.ts
new file mode 100644
index 000000000..9d93e6073
--- /dev/null
+++ b/src/hooks/useFlags/index.ts
@@ -0,0 +1,7 @@
+import { useAllEnvFlags, useEnvFlags } from "./env";
+import { useAllServiceFlags, useServiceFlags } from "./flagsService";
+
+export const useFlags = FLAGS_SERVICE_ENABLED ? useServiceFlags : useEnvFlags;
+export const useAllFlags = FLAGS_SERVICE_ENABLED
+  ? useAllServiceFlags
+  : useAllEnvFlags;
diff --git a/src/hooks/useFlags/types.ts b/src/hooks/useFlags/types.ts
new file mode 100644
index 000000000..4f29445fc
--- /dev/null
+++ b/src/hooks/useFlags/types.ts
@@ -0,0 +1,12 @@
+export interface Flag {
+  value: string | number | boolean;
+  enabled: boolean;
+}
+
+export interface FlagWithName extends Flag {
+  name: string;
+}
+
+export type FlagsResults<T extends readonly string[]> = {
+  [Key in T[number]]: Flag;
+};
diff --git a/src/index.tsx b/src/index.tsx
index 158fae5a8..ebff93ed3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -50,6 +50,7 @@ import GiftCardSection from "./giftCards";
 import { giftCardsSectionUrlName } from "./giftCards/urls";
 import { apolloClient, saleorClient } from "./graphql/client";
 import HomePage from "./home";
+import { FlagsServiceProvider } from "./hooks/useFlags/flagsService";
 import { commonMessages } from "./intl";
 import MarketplaceSection from "./marketplace";
 import { marketplaceUrl } from "./marketplace/urls";
@@ -92,17 +93,19 @@ const App: React.FC = () => (
                 <ServiceWorker />
                 <BackgroundTasksProvider>
                   <AppStateProvider>
-                    <AuthProvider>
-                      <ShopProvider>
-                        <AppChannelProvider>
-                          <ExternalAppProvider>
-                            <ExitFormDialogProvider>
-                              <Routes />
-                            </ExitFormDialogProvider>
-                          </ExternalAppProvider>
-                        </AppChannelProvider>
-                      </ShopProvider>
-                    </AuthProvider>
+                    <FlagsServiceProvider>
+                      <AuthProvider>
+                        <ShopProvider>
+                          <AppChannelProvider>
+                            <ExternalAppProvider>
+                              <ExitFormDialogProvider>
+                                <Routes />
+                              </ExitFormDialogProvider>
+                            </ExternalAppProvider>
+                          </AppChannelProvider>
+                        </ShopProvider>
+                      </AuthProvider>
+                    </FlagsServiceProvider>
                   </AppStateProvider>
                 </BackgroundTasksProvider>
               </MessageManagerProvider>
diff --git a/src/storybook/Decorator.tsx b/src/storybook/Decorator.tsx
index fe3e28dfa..08dd5d41d 100644
--- a/src/storybook/Decorator.tsx
+++ b/src/storybook/Decorator.tsx
@@ -1,5 +1,6 @@
 import { ExternalAppProvider } from "@dashboard/apps/components/ExternalAppContext";
 import { Locale, RawLocaleProvider } from "@dashboard/components/Locale";
+import { FlagsServiceProvider } from "@dashboard/hooks/useFlags/flagsService";
 import themeOverrides from "@dashboard/themeOverrides";
 import { ThemeProvider } from "@saleor/macaw-ui";
 import React from "react";
@@ -26,15 +27,17 @@ export const Decorator = storyFn => (
             <ThemeProvider overrides={themeOverrides}>
               <BrowserRouter basename={getAppMountUri()}>
                 <ExternalAppProvider>
-                  <MessageManagerProvider>
-                    <div
-                      style={{
-                        padding: 24,
-                      }}
-                    >
-                      {storyFn()}
-                    </div>
-                  </MessageManagerProvider>
+                  <FlagsServiceProvider>
+                    <MessageManagerProvider>
+                      <div
+                        style={{
+                          padding: 24,
+                        }}
+                      >
+                        {storyFn()}
+                      </div>
+                    </MessageManagerProvider>
+                  </FlagsServiceProvider>
                 </ExternalAppProvider>
               </BrowserRouter>
             </ThemeProvider>
diff --git a/types.d.ts b/types.d.ts
index 220bf60f0..b883a30d2 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -5,6 +5,10 @@ declare module "*.svg" {
   export default content;
 }
 
+declare const FLAGS_SERVICE_ENABLED: boolean;
+declare const FLAGSMITH_ID: string;
+declare const FLAGS: Record<string, string>;
+
 declare interface Window {
   PasswordCredential: PasswordCredential;
   __SALEOR_CONFIG__: {
diff --git a/vite.config.js b/vite.config.js
index 43ce3e47a..5635b54bc 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -35,8 +35,14 @@ export default defineConfig(({ command, mode }) => {
     APPS_TUNNEL_URL_KEYWORDS,
     SKIP_SOURCEMAPS,
     DEMO_MODE,
+    FLAGS_SERVICE_ENABLED,
+    FLAGSMITH_ID,
   } = env;
 
+  const featureFlagsEnvs = Object.fromEntries(
+    Object.entries(env).filter(([flagKey]) => flagKey.startsWith("FF_")),
+  );
+
   const sourcemap = SKIP_SOURCEMAPS ? false : true;
 
   const enableSentry =
@@ -96,11 +102,17 @@ export default defineConfig(({ command, mode }) => {
     );
   }
 
-  /*
-   "qs" package uses 'get-intrinsic' whish refers to the global object, we need to recreate it.
-   Issue presents only on development mode.
-  */
-  const globals = isDev ? { global: {} } : {};
+  const globals = {
+    /*
+      "qs" package uses 'get-intrinsic' whish refers to the global object, we need to recreate it.
+      Issue presents only on development mode.
+    */
+    ...(isDev ? { global: {} } : {}),
+    FLAGS_SERVICE_ENABLED: FLAGS_SERVICE_ENABLED === "true",
+    FLAGSMITH_ID: JSON.stringify(FLAGSMITH_ID),
+    // Keep all feature flags from env in global variable
+    FLAGS: JSON.stringify(featureFlagsEnvs),
+  };
 
   return {
     root: "src",