diff --git a/admin-ui/cypress.config.ts b/admin-ui/cypress.config.ts
index ab4c12f186..94baf4cbc1 100644
--- a/admin-ui/cypress.config.ts
+++ b/admin-ui/cypress.config.ts
@@ -4,8 +4,8 @@ export default defineConfig({
   defaultCommandTimeout: 5000,
 
   retries: {
-    runMode: 3,
-    openMode: 2,
+    runMode: 2,
+    openMode: 1,
   },
 
   e2e: {
@@ -14,8 +14,8 @@ export default defineConfig({
     baseUrl: 'http://localhost:3000',
     supportFile: 'cypress/support/e2e.ts',
     retries: {
-      openMode: 2,
-      runMode: 3,
+      openMode: 1,
+      runMode: 1,
     },
   },
 
diff --git a/admin-ui/cypress/e2e/account.cy.ts b/admin-ui/cypress/e2e/account.cy.ts
index 1bd20f94f2..aa8a2c1571 100644
--- a/admin-ui/cypress/e2e/account.cy.ts
+++ b/admin-ui/cypress/e2e/account.cy.ts
@@ -269,7 +269,7 @@ describe('Account', () => {
         .contains(localizations.en.send_verification_mail)
         .should('be.visible');
 
-      cy.get('button#delete_button').should('be.visible');
+      cy.get('button.border-rose-500').should('be.visible');
     });
 
     it('Should [SEND VERIFICATION EMAIL] successfully', () => {
@@ -296,7 +296,7 @@ describe('Account', () => {
     it('Should [DELETE EMAIL] successfully', () => {
       const { me: currentUser } = CurrentUserResponse.data;
 
-      cy.get('button#delete_button').first().click();
+      cy.get('button.border-rose-500').eq(1).click();
 
       cy.get('button#danger_continue')
         .contains(localizations.en.delete_email)
diff --git a/admin-ui/cypress/e2e/assortment-media.cy.ts b/admin-ui/cypress/e2e/assortment-media.cy.ts
index e0ecf49759..02f33ef46f 100644
--- a/admin-ui/cypress/e2e/assortment-media.cy.ts
+++ b/admin-ui/cypress/e2e/assortment-media.cy.ts
@@ -147,7 +147,7 @@ describe('Assortment Detail Media', () => {
   });
 
   it('Should [DELETE] media successfully', () => {
-    cy.get('button#delete_button').first().click({ force: true });
+    cy.get('li button.border-rose-500').first().click({ force: true });
     cy.get('button[type="button"]#danger_continue')
       .contains(localizations.en.delete_assortment_media)
       .click();
@@ -175,7 +175,7 @@ describe('Assortment Detail Media', () => {
   });
 
   it('Should [CANCEL] delete media successfully', () => {
-    cy.get('button#delete_button').first().click({ force: true });
+    cy.get('li button.border-rose-500').first().click({ force: true });
     cy.get('button[type="button"]#danger_cancel')
       .contains(localizations.en.cancel)
       .click();
@@ -186,7 +186,7 @@ describe('Assortment Detail Media', () => {
       TranslatedAssortmentMediaTextsResponse.data
         .translatedAssortmentMediaTexts;
 
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').should('have.value', firstText.title);
     cy.get('input#subtitle').should('have.value', firstText.subtitle);
   });
@@ -197,7 +197,7 @@ describe('Assortment Detail Media', () => {
         .translatedAssortmentMediaTexts;
 
     cy.selectLocale(1);
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').should('have.value', secondTexts.title);
     cy.get('input#subtitle').should('have.value', secondTexts.subtitle);
   });
@@ -207,7 +207,7 @@ describe('Assortment Detail Media', () => {
       TranslatedAssortmentMediaTextsResponse.data
         .translatedAssortmentMediaTexts;
 
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type(firstText.title);
     cy.get('input#subtitle').clear().type(firstText.subtitle);
 
@@ -239,7 +239,7 @@ describe('Assortment Detail Media', () => {
 
     cy.selectLocale(1);
     cy.get('select#locale-wrapper').should('not.have.value', '');
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type(secondTexts.title);
     cy.get('input#subtitle').clear().type(secondTexts.subtitle);
 
@@ -259,7 +259,7 @@ describe('Assortment Detail Media', () => {
   });
 
   it('Should [CANCEL] in media texts update form', () => {
-    cy.get('button#edit').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type('title');
     cy.get('button[type="button"][data-id="cancel_update"]')
       .contains(localizations.en.cancel)
diff --git a/admin-ui/cypress/e2e/country.cy.ts b/admin-ui/cypress/e2e/country.cy.ts
index c46ba65b31..0a200ff5ff 100644
--- a/admin-ui/cypress/e2e/country.cy.ts
+++ b/admin-ui/cypress/e2e/country.cy.ts
@@ -265,7 +265,7 @@ describe('Countries', () => {
       .click({ force: true });
     cy.get('button').contains(localizations.en.edit).click();
     cy.url().should('include', `/country/?countryId=${country._id}`);
-    cy.get('button[aria-describedby="header-delete-button"]')
+    cy.get('button')
       .contains(localizations.en.delete)
       .click();
     cy.get('button#danger_continue')
diff --git a/admin-ui/cypress/e2e/currency.cy.ts b/admin-ui/cypress/e2e/currency.cy.ts
index 97ba461c1d..7a5097bcea 100644
--- a/admin-ui/cypress/e2e/currency.cy.ts
+++ b/admin-ui/cypress/e2e/currency.cy.ts
@@ -325,7 +325,7 @@ describe('Currencies', () => {
       .click({ force: true });
     cy.get('button').contains(localizations.en.edit).click();
     cy.url().should('include', `/currency/?currencyId=${currency._id}`);
-    cy.get('button[aria-describedby="header-delete-button"]')
+    cy.get('button')
       .contains(localizations.en.delete)
       .click();
     cy.get('button#danger_continue')
diff --git a/admin-ui/cypress/e2e/filter.cy.ts b/admin-ui/cypress/e2e/filter.cy.ts
index 9a9f3033e1..3bf9b33571 100644
--- a/admin-ui/cypress/e2e/filter.cy.ts
+++ b/admin-ui/cypress/e2e/filter.cy.ts
@@ -114,28 +114,15 @@ describe('Filter', () => {
 
     it('Toggling status [ACTIVE/INACTIVE] toggle should update route', () => {
       cy.get('button[role="switch"]').click();
-      cy.location().then((current) => {
+      cy.location().should((current) => {
         expect(current.pathname).to.eq('/filters/');
         expect(convertURLSearchParamToObj(current.search)).to.deep.eq({
           includeInactive: 'false',
         });
       });
 
-      cy.wait(fullAliasName(FilterOperations.GetFiltersList)).then(
-        (currentSubject) => {
-          const { request } = currentSubject;
-          expect(request.body.variables.includeInactive).to.eq(false);
-        },
-      );
-
       cy.get('button[role="switch"]').click();
-      cy.wait(fullAliasName(FilterOperations.GetFiltersList)).then(
-        (currentSubject) => {
-          const { request } = currentSubject;
-          expect(request.body.variables.includeInactive).to.eq(true);
-        },
-      );
-      cy.location().then((current) => {
+      cy.location().should((current) => {
         expect(current.pathname).to.eq('/filters/');
         expect(convertURLSearchParamToObj(current.search)).to.deep.eq({
           includeInactive: 'true',
@@ -531,7 +518,7 @@ describe('Filter', () => {
       );
       cy.get('input[name="key"]').type(SingleFilterResponse.data.filter.key);
       cy.get('select[name="type"]').select(firstFilterType.value);
-      cy.get(`button[aria-label="${localizations.en.delete}"]`).click();
+      cy.get('button.border-rose-500').first().click();
       cy.get('input[type="submit"]')
         .contains(localizations.en.create_filter)
         .click();
@@ -608,7 +595,7 @@ describe('Filter', () => {
       );
       cy.get('input[name="key"]').type(SingleFilterResponse.data.filter.key);
       cy.get('select[name="type"]').select(firstFilterType.value);
-      cy.get(`button[aria-label="${localizations.en.delete}"]`).click();
+      cy.get('button.border-rose-500').first().click();
       cy.get('input[type="submit"]')
         .contains(localizations.en.create_filter)
         .click();
diff --git a/admin-ui/cypress/e2e/language.cy.ts b/admin-ui/cypress/e2e/language.cy.ts
index 164c116913..66e65a5a5c 100644
--- a/admin-ui/cypress/e2e/language.cy.ts
+++ b/admin-ui/cypress/e2e/language.cy.ts
@@ -212,7 +212,7 @@ describe('Languages', () => {
     cy.location('pathname').should('eq', '/language/');
     cy.visit(`/language?languageId=${language._id}`);
     cy.url().should('include', `/language/?languageId=${language._id}`);
-    cy.get('button[aria-describedby="header-delete-button"]')
+    cy.get('button')
       .contains(localizations.en.delete)
       .click();
     cy.get('button#danger_continue')
diff --git a/admin-ui/cypress/e2e/order.cy.ts b/admin-ui/cypress/e2e/order.cy.ts
index 5c007f775f..eb2cf5ec18 100644
--- a/admin-ui/cypress/e2e/order.cy.ts
+++ b/admin-ui/cypress/e2e/order.cy.ts
@@ -260,36 +260,6 @@ describe('Order', () => {
         },
       );
 
-      cy.wait(fullAliasName(OrderOperations.OrderDeliveryStatus)).then(
-        (currentSubject) => {
-          expect(currentSubject.response.body).to.deep.eq(
-            OrderDeliveryStatusResponse,
-          );
-        },
-      );
-
-      cy.wait(fullAliasName(OrderOperations.PaymentProvidersType)).then(
-        (currentSubject) => {
-          expect(currentSubject.response.body).to.deep.eq(
-            PaymentProvidersTypeResponse,
-          );
-        },
-      );
-
-      cy.wait(fullAliasName(OrderOperations.OrderStatus)).then(
-        (currentSubject) => {
-          expect(currentSubject.response.body).to.deep.eq(OrderStatusResponse);
-        },
-      );
-
-      cy.wait(fullAliasName(OrderOperations.OrderPaymentStatus)).then(
-        (currentSubject) => {
-          expect(currentSubject.response.body).to.deep.eq(
-            OrderPaymentStatusResponse,
-          );
-        },
-      );
-
       cy.url().should('include', `/orders/?orderId=${order._id}`);
       cy.get('h2').should('contain.text', localizations.en.order);
     });
diff --git a/admin-ui/cypress/e2e/product-assignment.cy.ts b/admin-ui/cypress/e2e/product-assignment.cy.ts
index 373a8a2621..8a9de84bc9 100644
--- a/admin-ui/cypress/e2e/product-assignment.cy.ts
+++ b/admin-ui/cypress/e2e/product-assignment.cy.ts
@@ -151,9 +151,7 @@ describe('Product Assignment', () => {
     });
 
     it('Should [REMOVE productASSIGNMENT ] successfully', () => {
-      cy.get(
-        `button[type=button][aria-label="${localizations.en.delete}"]#delete_button`,
-      ).first().click();
+      cy.get('button.border-rose-500').first().click();
       cy.get('[aria-modal="true"]').should('exist');
       cy.get('button[type="button"]#danger_continue')
         .should('contain.text', localizations.en.delete_variation_assignment)
diff --git a/admin-ui/cypress/e2e/product-media.cy.ts b/admin-ui/cypress/e2e/product-media.cy.ts
index 3be616f1d4..5cccca995b 100644
--- a/admin-ui/cypress/e2e/product-media.cy.ts
+++ b/admin-ui/cypress/e2e/product-media.cy.ts
@@ -141,7 +141,7 @@ describe('Product Media', () => {
   });
 
   it('Should [DELETE] media successfully', () => {
-    cy.get('button#delete_button').first().click({ force: true });
+    cy.get('button.border-rose-500').first().click({ force: true });
     cy.get('button[type="button"]#danger_continue')
       .contains(localizations.en.delete_product_media)
       .click();
@@ -176,7 +176,7 @@ describe('Product Media', () => {
   });
 
   it('Should [CANCEL] delete media successfully', () => {
-    cy.get('button#delete_button').first().click({ force: true });
+    cy.get('button.border-rose-500').first().click({ force: true });
     cy.get('button[type="button"]#danger_cancel')
       .contains(localizations.en.cancel)
       .click();
@@ -194,7 +194,7 @@ describe('Product Media', () => {
     const { translatedProductMediaTexts: mediaTexts } =
       TranslatedProductMediaTextsResponse.data;
 
-    cy.get('div#edit__icon_button').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type(mediaTexts[0].title);
     cy.get('input#subtitle').clear().type(mediaTexts[0].subtitle);
 
@@ -239,7 +239,7 @@ describe('Product Media', () => {
   });
 
   it('Should [CANCEL] in media texts update form', () => {
-    cy.get('div#edit__icon_button').first().click();
+    cy.get('button.bg-transparent.border-transparent').first().click();
     cy.get('input#title').clear().type('title');
     cy.get('button[type="button"][data-id="cancel_update"]')
       .contains(localizations.en.cancel)
diff --git a/admin-ui/cypress/e2e/product-variation.cy.ts b/admin-ui/cypress/e2e/product-variation.cy.ts
index 347ebeb7f6..8f3145f186 100644
--- a/admin-ui/cypress/e2e/product-variation.cy.ts
+++ b/admin-ui/cypress/e2e/product-variation.cy.ts
@@ -220,7 +220,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click({ force: true });
       cy.get('div[aria-modal="true"]').should('exist');
       cy.get('#danger_continue')
         .should('contain.text', localizations.en.delete_product_variation)
@@ -240,7 +240,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click({ force: true });
       cy.get('div[aria-modal="true"]').should('exist');
       cy.get('#danger_cancel')
         .should('contain.text', localizations.en.cancel)
@@ -254,7 +254,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
 
       cy.get('form.variation-update-form input[name="title"]')
         .should('have.value', firstVariation.texts.title);
@@ -270,7 +270,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
 
       cy.get('form.variation-update-form input[name="title"]')
         .clear()
@@ -301,7 +301,7 @@ describe('Product Variation', () => {
       cy.get('.variation-display').first().within(() => {
         cy.get('button').last().click({ force: true });
       });
-      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click();
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
 
       cy.get('form.variation-update-form input[name="title"]')
         .clear()
@@ -361,5 +361,82 @@ describe('Product Variation', () => {
         .should('have.value', localizations.en.add_option)
         .should('be.disabled');
     });
+
+    it('Should  [UPDATE VARIATION OPTION TEXT] successfully', () => {
+      const [firstOption] = firstVariation.options;
+      cy.get('.variation-display').first().click();
+
+      cy.get('form.variation-option-update-form button[aria-label="Actions menu"]').first().click({ force: true });
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
+
+      cy.get('form.variation-option-update-form input[name="title"]')
+        .clear()
+        .type('updated option title');
+      cy.get('form.variation-option-update-form input[name="subtitle"]')
+        .clear()
+        .type('updated option subtitle');
+      cy.get('form.variation-option-update-form button[type="submit"]')
+        .contains(localizations.en.save)
+        .click();
+
+      cy.wait(
+        fullAliasMutationName(ProductOperations.UpdateProductVariationTexts),
+      ).then((currentSubject) => {
+        const { request, response } = currentSubject;
+        expect(request.body.variables.productVariationId).to.eq(firstVariation._id);
+        expect(request.body.variables.productVariationOptionValue).to.eq(firstOption.value);
+        expect(request.body.variables.texts[0].title).to.eq('updated option title');
+        expect(request.body.variables.texts[0].subtitle).to.eq('updated option subtitle');
+        expect(response.body).to.deep.eq(UpdateProductVariationTextResponse);
+      });
+    });
+
+    it('Should  [CANCEL UPDATE VARIATION OPTION] successfully', () => {
+      cy.get('.variation-display').first().click();
+
+      cy.get('form.variation-option-update-form button[aria-label="Actions menu"]').first().click({ force: true });
+      cy.get('.fixed.w-48 button').contains(localizations.en.edit).click({ force: true });
+
+      cy.get('form.variation-option-update-form input[name="title"]')
+        .clear()
+        .type('updated option title');
+      cy.get('form.variation-option-update-form button[type="button"]')
+        .contains(localizations.en.cancel)
+        .click();
+
+      cy.get('form.variation-option-update-form input[name="title"]').should('not.exist');
+    });
+
+    it('Should  [REMOVE VARIATION OPTION] successfully', () => {
+      const [firstOption] = firstVariation.options;
+      cy.get('.variation-display').first().click();
+
+      cy.get('form.variation-option-update-form button[aria-label="Actions menu"]').first().click({ force: true });
+      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click({ force: true });
+
+      cy.get('button#danger_continue')
+        .should('contain.text', localizations.en.delete_variation_option)
+        .click();
+
+      cy.wait(
+        fullAliasMutationName(ProductOperations.RemoveProductVariationOption),
+      ).then((currentSubject) => {
+        const { request, response } = currentSubject;
+        expect(request.body.variables.productVariationId).to.eq(firstVariation._id);
+        expect(request.body.variables.productVariationOptionValue).to.eq(firstOption.value);
+        expect(response.body).to.deep.eq(RemoveProductVariationOptionResponse);
+      });
+    });
+
+    it('Should  [CANCEL REMOVING VARIATION OPTION] successfully', () => {
+      cy.get('.variation-display').first().click();
+
+      cy.get('form.variation-option-update-form button[aria-label="Actions menu"]').first().click({ force: true });
+      cy.get('.fixed.w-48 button').contains(localizations.en.delete).click({ force: true });
+
+      cy.get('button#danger_cancel')
+        .should('contain.text', localizations.en.cancel)
+        .click();
+    });
   });
 });
diff --git a/admin-ui/cypress/e2e/product.cy.ts b/admin-ui/cypress/e2e/product.cy.ts
index 60d0d53321..2f5c0d4ff6 100644
--- a/admin-ui/cypress/e2e/product.cy.ts
+++ b/admin-ui/cypress/e2e/product.cy.ts
@@ -31,8 +31,11 @@ const ProductTypes = {
   TokenizedProduct: 'TOKENIZED_PRODUCT',
 };
 
+let productTypeOverride: string | null = null;
+
 describe('Product', () => {
   beforeEach(() => {
+    productTypeOverride = null;
     cy.intercept('POST', '/graphql', (req) => {
       const { body } = req;
       if (hasOperationName(req, LanguageOperations.GetLanguagesList)) {
@@ -43,11 +46,14 @@ describe('Product', () => {
         req.reply(ProductListResponse);
       }
       if (hasOperationName(req, ProductOperations.GetSingleProduct)) {
+        const foundProduct = ProductListResponse.data.products.find(
+          ({ _id }) => _id === body.variables.productId,
+        );
         req.reply({
           data: {
-            product: ProductListResponse.data.products.find(
-              ({ _id }) => _id === body.variables.productId,
-            ),
+            product: productTypeOverride
+              ? { ...foundProduct, __typename: productTypeOverride }
+              : foundProduct,
           },
         });
       }
@@ -423,18 +429,14 @@ describe('Product', () => {
 
     it('Delete product button should be visible for unpublished/draft product', () => {
       cy.get(`a[href="/products/?slug=${DRAFT_PRODUCT_SLUG}"]`).first().click();
-      cy.get(
-        'button[aria-describedby="header-delete-button"]',
-      )
+      cy.get('button').contains(localizations.en.delete)
         .contains(localizations.en.delete)
         .should('be.visible');
     });
 
     it('Delete product button should [NOT] be visible for published product', () => {
       cy.get(`a[href="/products/?slug=${ACTIVE_PRODUCT_SLUG}"]`).first().click();
-      cy.get(
-        'button[aria-describedby="header-delete-button"]',
-      ).should('not.exist');
+      cy.get('button').contains(localizations.en.delete).should('not.exist');
     });
 
     it('[UNPUBLISH] product successfully', () => {
@@ -464,9 +466,7 @@ describe('Product', () => {
       cy.get(`a[href="/products/?slug=${generateUniqueId(firstProduct)}"]`)
         .first()
         .click();
-      cy.get(
-        'button[aria-describedby="header-delete-button"]',
-      ).click();
+      cy.get('button').contains(localizations.en.delete).click();
 
       cy.get('button#danger_continue')
         .should('contain.text', localizations.en.continue)
@@ -492,9 +492,7 @@ describe('Product', () => {
       cy.get(`a[href="/products/?slug=${generateUniqueId(firstProduct)}"]`)
         .first()
         .click();
-      cy.get(
-        'button[aria-describedby="header-delete-button"]',
-      ).click();
+      cy.get('button').contains(localizations.en.delete).click();
 
       cy.get('button#danger_cancel')
         .should('contain.text', localizations.en.cancel)
@@ -526,41 +524,66 @@ describe('Product', () => {
   });
 
   context('Displayed tabs for types', () => {
-    beforeEach(() => {
+    it('SimpleProduct should show texts, media, commerce, supply, warehousing tabs', () => {
+      productTypeOverride = 'SimpleProduct';
       cy.get(`a[href="/products/?slug=${DRAFT_PRODUCT_SLUG}"]`).first().click();
-    });
-    it('SimpleProduct', () => {
       cy.get('a#texts').should('contain.text', localizations.en.text);
       cy.get('a#media').should('contain.text', localizations.en.media);
       cy.get('a#commerce').should('contain.text', localizations.en.commerce);
       cy.get('a#supply').should('contain.text', localizations.en.supply);
-      cy.get('a#warehousing').should(
-        'contain.text',
-        localizations.en.warehousing,
-      );
-      /* Tabs not applicable to this product type */
+      cy.get('a#warehousing').should('contain.text', localizations.en.warehousing);
+      cy.get('a#variations').should('not.exist');
+      cy.get('a#assignments').should('not.exist');
+      cy.get('a#subscriptions').should('not.exist');
+      cy.get('a#bundled_products').should('not.exist');
     });
 
-    it('ConfigurableProduct', () => {
+    it('ConfigurableProduct should show texts, media, variations, assignments tabs', () => {
+      productTypeOverride = 'ConfigurableProduct';
+      cy.get(`a[href="/products/?slug=${DRAFT_PRODUCT_SLUG}"]`).first().click();
       cy.get('a#texts').should('contain.text', localizations.en.text);
       cy.get('a#media').should('contain.text', localizations.en.media);
+      cy.get('a#variations').should('contain.text', localizations.en.variations);
+      cy.get('a#assignments').should('contain.text', localizations.en.assignments);
+      cy.get('a#commerce').should('not.exist');
+      cy.get('a#supply').should('not.exist');
+      cy.get('a#warehousing').should('not.exist');
     });
 
-    it('PlanProduct', () => {
+    it('PlanProduct should show texts, media, commerce, subscriptions tabs', () => {
+      productTypeOverride = 'PlanProduct';
+      cy.get(`a[href="/products/?slug=${DRAFT_PRODUCT_SLUG}"]`).first().click();
       cy.get('a#texts').should('contain.text', localizations.en.text);
       cy.get('a#media').should('contain.text', localizations.en.media);
       cy.get('a#commerce').should('contain.text', localizations.en.commerce);
+      cy.get('a#subscriptions').should('contain.text', localizations.en.subscriptions);
+      cy.get('a#variations').should('not.exist');
+      cy.get('a#supply').should('not.exist');
+      cy.get('a#warehousing').should('not.exist');
     });
 
-    it('BundleProduct', () => {
+    it('BundleProduct should show texts, media, commerce, bundled_products tabs', () => {
+      productTypeOverride = 'BundleProduct';
+      cy.get(`a[href="/products/?slug=${DRAFT_PRODUCT_SLUG}"]`).first().click();
       cy.get('a#texts').should('contain.text', localizations.en.text);
       cy.get('a#media').should('contain.text', localizations.en.media);
       cy.get('a#commerce').should('contain.text', localizations.en.commerce);
+      cy.get('a#bundled_products').should('contain.text', localizations.en.bundled_items);
+      cy.get('a#variations').should('not.exist');
+      cy.get('a#supply').should('not.exist');
+      cy.get('a#warehousing').should('not.exist');
     });
-    it('TokenizedProduct', () => {
+
+    it('TokenizedProduct should show texts, media, commerce, token tabs', () => {
+      productTypeOverride = 'TokenizedProduct';
+      cy.get(`a[href="/products/?slug=${DRAFT_PRODUCT_SLUG}"]`).first().click();
       cy.get('a#texts').should('contain.text', localizations.en.text);
       cy.get('a#media').should('contain.text', localizations.en.media);
       cy.get('a#commerce').should('contain.text', localizations.en.commerce);
+      cy.get('a#token').should('contain.text', localizations.en.token);
+      cy.get('a#variations').should('not.exist');
+      cy.get('a#supply').should('not.exist');
+      cy.get('a#warehousing').should('not.exist');
     });
   });
 });
diff --git a/admin-ui/cypress/e2e/user-account.cy.ts b/admin-ui/cypress/e2e/user-account.cy.ts
index 721386ae0a..a99c895872 100644
--- a/admin-ui/cypress/e2e/user-account.cy.ts
+++ b/admin-ui/cypress/e2e/user-account.cy.ts
@@ -194,7 +194,7 @@ describe('User', () => {
             .contains(localizations.en.send_verification_mail)
             .should('be.visible');
         }
-        cy.get('button#delete_button').should('be.visible');
+        cy.get('button.border-rose-500').should('be.visible');
       });
     });
 
@@ -226,7 +226,7 @@ describe('User', () => {
     });
 
     it('Should [DELETE EMAIL] successfully', () => {
-      cy.get('button#delete_button').first().click();
+      cy.get('button.border-rose-500').eq(1).click();
 
       cy.get('button#danger_continue')
         .contains(localizations.en.delete_email)
diff --git a/admin-ui/eslint.config.mjs b/admin-ui/eslint.config.mjs
index fb2d73bcc9..fb0a20e4fb 100644
--- a/admin-ui/eslint.config.mjs
+++ b/admin-ui/eslint.config.mjs
@@ -98,6 +98,153 @@ export default [
       ...nextPlugin.configs['core-web-vitals'].rules,
       '@next/next/no-img-element': 'warn',
       '@next/next/no-sync-scripts': 'warn',
+
+      // Prevent importing moved primitives from old locations
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['**/common/components/Button'],
+              message: 'Use @/components/ui/Button',
+            },
+            {
+              group: ['**/common/components/Badge'],
+              message: 'Use @/components/ui/Badge',
+            },
+            {
+              group: ['**/common/components/Toggle'],
+              message: 'Use @/components/ui/Toggle',
+            },
+            {
+              group: ['**/common/components/Loading'],
+              message: 'Use @/components/ui/Loading',
+            },
+            {
+              group: ['**/common/components/NoData'],
+              message: 'Use @/components/ui/NoData',
+            },
+            {
+              group: ['**/common/components/BlockingContent'],
+              message: 'Use @/components/ui/BlockingContent',
+            },
+            {
+              group: ['**/common/components/SearchField'],
+              message: 'Use @/components/ui/SearchField',
+            },
+            {
+              group: ['**/common/components/CopyableText'],
+              message: 'Use @/components/ui/CopyableText',
+            },
+            {
+              group: ['**/common/components/Tab'],
+              message: 'Use @/components/ui/Tab',
+            },
+            {
+              group: ['**/common/components/BreadCrumbs'],
+              message: 'Use @/components/ui/BreadCrumbs',
+            },
+            {
+              group: ['**/common/components/PageHeader'],
+              message: 'Use @/components/ui/PageHeader',
+            },
+            {
+              group: ['**/common/components/ListHeader'],
+              message: 'Use @/components/ui/ListHeader',
+            },
+            {
+              group: ['**/common/components/DetailHeader'],
+              message: 'Use @/components/ui/DetailHeader',
+            },
+            {
+              group: ['**/common/components/JSONView'],
+              message: 'Use @/components/ui/JSONView',
+            },
+            {
+              group: ['**/common/components/Pagination'],
+              message: 'Use @/components/ui/Pagination',
+            },
+            {
+              group: ['**/common/components/ToolTip'],
+              message: 'Use @/components/ui/ToolTip',
+            },
+            {
+              group: ['**/common/components/ErrorBoundary'],
+              message: 'Use @/components/ui/ErrorBoundary',
+            },
+            {
+              group: ['**/common/components/ErrorFallback'],
+              message: 'Use @/components/ui/ErrorFallback',
+            },
+            {
+              group: ['**/common/components/DateInput'],
+              message: 'Use @/components/ui/DateInput',
+            },
+            {
+              group: ['**/common/components/DateRangeFilterInput'],
+              message: 'Use @/components/ui/DateRangeFilterInput',
+            },
+            {
+              group: ['**/common/components/AnimatedCounter'],
+              message: 'Use @/components/ui/AnimatedCounter',
+            },
+            {
+              group: ['**/common/components/HelpText'],
+              message: 'Use @/components/ui/HelpText',
+            },
+            {
+              group: ['**/common/components/InfoTextBanner'],
+              message: 'Use @/components/ui/InfoTextBanner',
+            },
+            {
+              group: ['**/common/components/SaveAndCancelButtons'],
+              message: 'Use @/components/ui/SaveAndCancelButtons',
+            },
+            {
+              group: ['**/common/components/ActiveInActive'],
+              message: 'Use @/components/ui/ActiveInActive',
+            },
+            {
+              group: ['**/common/components/ImageWithFallback'],
+              message: 'Use @/components/ui/ImageWithFallback',
+            },
+            {
+              group: ['**/common/components/NoImage'],
+              message: 'Use @/components/ui/NoImage',
+            },
+            {
+              group: ['**/common/components/DraggableIcon'],
+              message: 'Use @/components/ui/DraggableIcon',
+            },
+            {
+              group: ['**/common/components/Accordion*'],
+              message: 'Use @/components/ui/Accordion/*',
+            },
+            {
+              group: ['**/common/components/TagInput', '**/common/components/TagList*'],
+              message: 'Use @/components/ui/Tag/*',
+            },
+            {
+              group: ['**/common/components/Portal*'],
+              message: 'Use @/components/ui/Portal/*',
+            },
+            {
+              group: ['**/forms/components/TextField', '**/forms/components/TextAreaField', '**/forms/components/SelectField', '**/forms/components/CheckboxField', '**/forms/components/ChoicesField', '**/forms/components/DatePickerField', '**/forms/components/EmailField', '**/forms/components/PasswordField', '**/forms/components/JSONAreaField', '**/forms/components/MarkdownTextAreaField', '**/forms/components/TagInputField', '**/forms/components/FieldWrapper', '**/forms/components/FormErrors', '**/forms/components/SubmitButton', '**/forms/components/FieldWithHelp'],
+              message: 'Use @/components/ui/form/*',
+            },
+            {
+              group: ['**/common/components/DeleteButton', '**/common/components/HeaderDeleteButton', '**/common/components/EditIcon'],
+              message: 'Deleted — use <Button> from @/components/ui/Button with appropriate variant/icon',
+            },
+          ],
+          paths: [
+            {
+              name: 'classnames',
+              message: 'Use clsx instead of classnames',
+            },
+          ],
+        },
+      ],
     },
   },
 ];
diff --git a/admin-ui/package.json b/admin-ui/package.json
index 718528e50c..249b17b9a3 100644
--- a/admin-ui/package.json
+++ b/admin-ui/package.json
@@ -63,7 +63,6 @@
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
     "ai": "^6.0.14",
-    "classnames": "^2.5.1",
     "clsx": "^2.1.1",
     "cypress": "^15.0.0",
     "d3": "^7.9.0",
diff --git a/admin-ui/src/modules/common/components/Accordion.tsx b/admin-ui/src/components/ui/Accordion/Accordion.tsx
similarity index 85%
rename from admin-ui/src/modules/common/components/Accordion.tsx
rename to admin-ui/src/components/ui/Accordion/Accordion.tsx
index c87694c704..ed9a4a83d2 100644
--- a/admin-ui/src/modules/common/components/Accordion.tsx
+++ b/admin-ui/src/components/ui/Accordion/Accordion.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import AccordionItem from './AccordionItem';
 
 const Accordion = ({
@@ -11,7 +11,7 @@ const Accordion = ({
   ...rest
 }) => {
   return (
-    <div className={classNames('my-3', containerCSS)} {...rest}>
+    <div className={clsx('my-3', containerCSS)} {...rest}>
       {data.map(({ header, body }, key) => (
         <AccordionItem
           itemindex={key}
diff --git a/admin-ui/src/modules/common/components/AccordionHeader.tsx b/admin-ui/src/components/ui/Accordion/AccordionHeader.tsx
similarity index 84%
rename from admin-ui/src/modules/common/components/AccordionHeader.tsx
rename to admin-ui/src/components/ui/Accordion/AccordionHeader.tsx
index 218acc8a56..0477cfa75e 100644
--- a/admin-ui/src/modules/common/components/AccordionHeader.tsx
+++ b/admin-ui/src/components/ui/Accordion/AccordionHeader.tsx
@@ -1,11 +1,11 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 const AccordionHeader = ({ name, className = '' }) => {
   if (!name) return null;
   return (
     <div
       aria-description="accordion header"
-      className={classNames(
+      className={clsx(
         'mr-4 text-base capitalize font-semibold text-slate-500 dark:text-slate-200 sm:text-lg sm:font-semibold',
         className,
       )}
diff --git a/admin-ui/src/modules/common/components/AccordionItem.tsx b/admin-ui/src/components/ui/Accordion/AccordionItem.tsx
similarity index 85%
rename from admin-ui/src/modules/common/components/AccordionItem.tsx
rename to admin-ui/src/components/ui/Accordion/AccordionItem.tsx
index 4f64b0a3e2..bbc025e732 100644
--- a/admin-ui/src/modules/common/components/AccordionItem.tsx
+++ b/admin-ui/src/components/ui/Accordion/AccordionItem.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 
 const AccordionItem = ({
@@ -13,14 +13,11 @@ const AccordionItem = ({
 }) => {
   const [show, setShow] = useState(false);
   return (
-    <div
-      className={classNames('mt-3', itemContainerCSS)}
-      data-itemindex={itemindex}
-    >
+    <div className={clsx('mt-3', itemContainerCSS)} data-itemindex={itemindex}>
       <button
         type="button"
         onClick={() => setShow(!show)}
-        className={classNames(
+        className={clsx(
           'relative cursor-pointer border dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-500 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 w-full max-w-full overflow-hidden',
           headerCSS,
         )}
@@ -39,7 +36,7 @@ const AccordionItem = ({
 
       {show ? (
         <div
-          className={classNames(
+          className={clsx(
             'rounded-lg sm:p-4 xl:p-10 relative overflow-visible',
             bodyCSS,
           )}
diff --git a/admin-ui/src/modules/common/components/ActiveInActive.tsx b/admin-ui/src/components/ui/ActiveInActive.tsx
similarity index 88%
rename from admin-ui/src/modules/common/components/ActiveInActive.tsx
rename to admin-ui/src/components/ui/ActiveInActive.tsx
index d64198df20..4006318bfd 100644
--- a/admin-ui/src/modules/common/components/ActiveInActive.tsx
+++ b/admin-ui/src/components/ui/ActiveInActive.tsx
@@ -1,5 +1,5 @@
 import { CheckBadgeIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useIntl } from 'react-intl';
 
 const ActiveInActive = ({
@@ -12,10 +12,10 @@ const ActiveInActive = ({
 }) => {
   const { formatMessage } = useIntl();
   return (
-    <span className={classNames('', containerClassName)}>
+    <span className={clsx('', containerClassName)}>
       {isActive ? (
         <span
-          className={classNames(
+          className={clsx(
             'inline-flex items-center border rounded-full px-2.5 py-0.5 text-sm font-medium bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-800 uppercase',
             activeClassName,
           )}
@@ -28,7 +28,7 @@ const ActiveInActive = ({
         </span>
       ) : (
         <span
-          className={classNames(
+          className={clsx(
             'inline-flex items-center border rounded-full px-2.5 py-0.5 text-sm font-medium bg-amber-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-amber-400 dark:border-yellow-800 uppercase',
             inActiveClassName,
           )}
diff --git a/admin-ui/src/modules/common/components/AnimatedCounter.tsx b/admin-ui/src/components/ui/AnimatedCounter.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/AnimatedCounter.tsx
rename to admin-ui/src/components/ui/AnimatedCounter.tsx
diff --git a/admin-ui/src/modules/common/components/Badge.tsx b/admin-ui/src/components/ui/Badge.tsx
similarity index 95%
rename from admin-ui/src/modules/common/components/Badge.tsx
rename to admin-ui/src/components/ui/Badge.tsx
index 279c1bfdc2..4b15ad88e5 100644
--- a/admin-ui/src/modules/common/components/Badge.tsx
+++ b/admin-ui/src/components/ui/Badge.tsx
@@ -1,5 +1,9 @@
-import classnames from 'classnames';
-import { bgColor, textColor, borderColor } from '../data/miscellaneous';
+import clsx from 'clsx';
+import {
+  bgColor,
+  textColor,
+  borderColor,
+} from '../../modules/common/data/miscellaneous';
 
 const Badge = ({
   text,
@@ -15,7 +19,7 @@ const Badge = ({
   return (
     <span
       id="badge"
-      className={classnames(
+      className={clsx(
         isRainbow
           ? 'inline-flex items-center text-sm font-bold text-slate-900 dark:text-white shadow-lg relative p-[2px] bg-gradient-to-r from-rose-500 via-emerald-500 to-sky-500'
           : `inline-flex items-center border ${borderColor(
@@ -34,7 +38,7 @@ const Badge = ({
     >
       {isRainbow ? (
         <span
-          className={classnames(
+          className={clsx(
             'inline-flex items-center bg-white dark:bg-slate-700 px-2.5 py-0.5',
             {
               'rounded-full': !square,
diff --git a/admin-ui/src/modules/common/components/BlockingContent.tsx b/admin-ui/src/components/ui/BlockingContent.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/BlockingContent.tsx
rename to admin-ui/src/components/ui/BlockingContent.tsx
diff --git a/admin-ui/src/modules/common/components/BreadCrumbs.tsx b/admin-ui/src/components/ui/BreadCrumbs.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/BreadCrumbs.tsx
rename to admin-ui/src/components/ui/BreadCrumbs.tsx
diff --git a/admin-ui/src/modules/common/components/Button.tsx b/admin-ui/src/components/ui/Button.tsx
similarity index 98%
rename from admin-ui/src/modules/common/components/Button.tsx
rename to admin-ui/src/components/ui/Button.tsx
index 2fc62136f5..724d4b393d 100644
--- a/admin-ui/src/modules/common/components/Button.tsx
+++ b/admin-ui/src/components/ui/Button.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 
 export interface ButtonProps {
@@ -111,7 +111,7 @@ const Button: React.FC<ButtonProps> = ({
       disabled={disabled || loading}
       onClick={onClick}
       aria-label={ariaLabel}
-      className={classnames(
+      className={clsx(
         baseClasses,
         sizeClasses[size],
         roundedClasses[rounded],
diff --git a/admin-ui/src/components/ui/CONTRIBUTING.md b/admin-ui/src/components/ui/CONTRIBUTING.md
new file mode 100644
index 0000000000..8d1c98c5ba
--- /dev/null
+++ b/admin-ui/src/components/ui/CONTRIBUTING.md
@@ -0,0 +1,29 @@
+# Contributing to the UI Kit
+
+## Rules
+
+1. **New shared primitives go here**, gated by a doc entry + `/styleguide` section.
+2. **Module-specific components** stay in `src/modules/<domain>/components/`.
+3. **Use `clsx`** (not `classnames`) for conditional class merging.
+4. **Variant/size pattern**: follow the Button.tsx pattern (mapped record objects, not conditional class strings).
+5. **Dark mode**: `bg-white dark:bg-slate-800` pairs are acceptable for now. Phase B will replace with semantic tokens.
+6. **No standalone `types.ts`** for internal types. Place types in the implementation file.
+7. **Barrel exports**: update `index.ts` (or `form/index.ts`) when adding a new component.
+8. **ESLint guard**: old import paths are blocked by `no-restricted-imports`. Do not bypass.
+
+## Adding a new component
+
+1. Create the component in `src/components/ui/`.
+2. Add it to the barrel export in `index.ts`.
+3. Add a demo section in `src/pages/styleguide.tsx`.
+4. Update this README's component list.
+
+## Deferred work
+
+| Item | Phase | Notes |
+|------|-------|-------|
+| Modal -> Headless UI Dialog | C | Behavioral rewrite |
+| Table -> TanStack Table | C | New dep + virtualization |
+| Combobox consolidation | D | 4 consumers need careful API |
+| Semantic tokens | B | After primitives are settled |
+| `@unchainedshop/client/ui` export | E | After tokens land |
diff --git a/admin-ui/src/modules/common/components/CopyableText.tsx b/admin-ui/src/components/ui/CopyableText.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/CopyableText.tsx
rename to admin-ui/src/components/ui/CopyableText.tsx
diff --git a/admin-ui/src/modules/common/components/DateInput.tsx b/admin-ui/src/components/ui/DateInput.tsx
similarity index 89%
rename from admin-ui/src/modules/common/components/DateInput.tsx
rename to admin-ui/src/components/ui/DateInput.tsx
index 43bb4883be..b379c71d59 100644
--- a/admin-ui/src/modules/common/components/DateInput.tsx
+++ b/admin-ui/src/components/ui/DateInput.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 type DateInputFieldProps = {
   id: string;
@@ -25,7 +25,7 @@ const DateInputField: React.FC<DateInputFieldProps> = ({
   containerClassName,
 }) => {
   return (
-    <div className={classNames('flex flex-col gap-1', containerClassName)}>
+    <div className={clsx('flex flex-col gap-1', containerClassName)}>
       {label && (
         <label
           htmlFor={id}
@@ -45,7 +45,7 @@ const DateInputField: React.FC<DateInputFieldProps> = ({
         placeholder={placeholder}
         min={min}
         max={max}
-        className={classNames(
+        className={clsx(
           'w-full rounded-md border-1 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2 text-sm shadow-xs text-slate-900 dark:text-slate-200 focus:outline-hidden focus:ring-2 focus:ring-slate-800 dark:[color-scheme:dark]',
           className,
         )}
diff --git a/admin-ui/src/modules/common/components/DateRangeFilterInput.tsx b/admin-ui/src/components/ui/DateRangeFilterInput.tsx
similarity index 93%
rename from admin-ui/src/modules/common/components/DateRangeFilterInput.tsx
rename to admin-ui/src/components/ui/DateRangeFilterInput.tsx
index 04b700414d..4473e54c9a 100644
--- a/admin-ui/src/modules/common/components/DateRangeFilterInput.tsx
+++ b/admin-ui/src/components/ui/DateRangeFilterInput.tsx
@@ -2,10 +2,10 @@
 
 import React from 'react';
 import { useRouter } from 'next/router';
-import { normalizeQuery } from '../utils/utils';
+import { normalizeQuery } from '../../modules/common/utils/utils';
 import DateInputField from './DateInput';
 import { useIntl } from 'react-intl';
-import useFormatDateTime from '../utils/useFormatDateTime';
+import useFormatDateTime from '../../modules/common/utils/useFormatDateTime';
 
 const DateRangeFilterInput = () => {
   const { parseDate } = useFormatDateTime();
diff --git a/admin-ui/src/modules/common/components/DetailHeader.tsx b/admin-ui/src/components/ui/DetailHeader.tsx
similarity index 97%
rename from admin-ui/src/modules/common/components/DetailHeader.tsx
rename to admin-ui/src/components/ui/DetailHeader.tsx
index 13d117c406..05e1d07b1d 100644
--- a/admin-ui/src/modules/common/components/DetailHeader.tsx
+++ b/admin-ui/src/components/ui/DetailHeader.tsx
@@ -6,7 +6,7 @@ import {
   UserCircleIcon,
 } from '@heroicons/react/24/outline';
 import Link from 'next/link';
-import formatUsername from '../utils/formatUsername';
+import formatUsername from '../../modules/common/utils/formatUsername';
 import ImageWithFallback from './ImageWithFallback';
 
 const FallbackAvatar = ({ username }) => {
diff --git a/admin-ui/src/modules/common/components/DraggableIcon.tsx b/admin-ui/src/components/ui/DraggableIcon.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/DraggableIcon.tsx
rename to admin-ui/src/components/ui/DraggableIcon.tsx
diff --git a/admin-ui/src/modules/common/components/ErrorBoundary.tsx b/admin-ui/src/components/ui/ErrorBoundary.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/ErrorBoundary.tsx
rename to admin-ui/src/components/ui/ErrorBoundary.tsx
diff --git a/admin-ui/src/modules/common/components/ErrorFallback.tsx b/admin-ui/src/components/ui/ErrorFallback.tsx
similarity index 98%
rename from admin-ui/src/modules/common/components/ErrorFallback.tsx
rename to admin-ui/src/components/ui/ErrorFallback.tsx
index 27deaabcc6..36a537c6f7 100644
--- a/admin-ui/src/modules/common/components/ErrorFallback.tsx
+++ b/admin-ui/src/components/ui/ErrorFallback.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import Button from './Button';
-import FormWrapper from './FormWrapper';
+import FormWrapper from '../../modules/common/components/FormWrapper';
 import ImageWithFallback from './ImageWithFallback';
 
 const ErrorFallback = ({ error = null, resetError = null }) => {
diff --git a/admin-ui/src/modules/common/components/HelpText.tsx b/admin-ui/src/components/ui/HelpText.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/HelpText.tsx
rename to admin-ui/src/components/ui/HelpText.tsx
diff --git a/admin-ui/src/modules/common/components/ImageWithFallback.tsx b/admin-ui/src/components/ui/ImageWithFallback.tsx
similarity index 93%
rename from admin-ui/src/modules/common/components/ImageWithFallback.tsx
rename to admin-ui/src/components/ui/ImageWithFallback.tsx
index a6277a46c4..cce230e730 100644
--- a/admin-ui/src/modules/common/components/ImageWithFallback.tsx
+++ b/admin-ui/src/components/ui/ImageWithFallback.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import defaultNextImageLoader from '../utils/defaultNextImageLoader';
+import defaultNextImageLoader from '../../modules/common/utils/defaultNextImageLoader';
 import NoImageSvg from './NoImageSvg';
 
 const ImageWithFallback = ({ fallbackSrc = '', src, ...props }) => {
diff --git a/admin-ui/src/modules/common/components/InfoTextBanner.tsx b/admin-ui/src/components/ui/InfoTextBanner.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/InfoTextBanner.tsx
rename to admin-ui/src/components/ui/InfoTextBanner.tsx
diff --git a/admin-ui/src/modules/common/components/JSONView.tsx b/admin-ui/src/components/ui/JSONView.tsx
similarity index 81%
rename from admin-ui/src/modules/common/components/JSONView.tsx
rename to admin-ui/src/components/ui/JSONView.tsx
index f3677c11d8..e6e2677e12 100644
--- a/admin-ui/src/modules/common/components/JSONView.tsx
+++ b/admin-ui/src/components/ui/JSONView.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames';
-import { CommonFieldProps } from '../../forms/hooks/useField';
+import clsx from 'clsx';
+import { CommonFieldProps } from '../../modules/forms/hooks/useField';
 
 const JSONView = ({
   value,
@@ -13,7 +13,7 @@ const JSONView = ({
 
   return (
     <textarea
-      className={classNames(
+      className={clsx(
         'text-black dark:bg-slate-900 dark:text-slate-200 border-transparent border-t border-t-slate-200 dark:border-t-slate-800 resize-y',
         className,
       )}
diff --git a/admin-ui/src/modules/common/components/ListHeader.tsx b/admin-ui/src/components/ui/ListHeader.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/ListHeader.tsx
rename to admin-ui/src/components/ui/ListHeader.tsx
diff --git a/admin-ui/src/modules/common/components/Loading.tsx b/admin-ui/src/components/ui/Loading.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/Loading.tsx
rename to admin-ui/src/components/ui/Loading.tsx
diff --git a/admin-ui/src/modules/common/components/NoData.tsx b/admin-ui/src/components/ui/NoData.tsx
similarity index 94%
rename from admin-ui/src/modules/common/components/NoData.tsx
rename to admin-ui/src/components/ui/NoData.tsx
index f26c5a1655..79968a780c 100644
--- a/admin-ui/src/modules/common/components/NoData.tsx
+++ b/admin-ui/src/components/ui/NoData.tsx
@@ -1,11 +1,11 @@
 import { NoSymbolIcon } from '@heroicons/react/24/outline';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { FormattedMessage } from 'react-intl';
 
 const NoData = ({ message, className = '', Icon = null }) => {
   return (
     <div
-      className={classnames(
+      className={clsx(
         'rounded-md flex w-full flex-col items-center justify-center min-h-[176px] py-8 border-1 border-dashed border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-600',
         className,
       )}
diff --git a/admin-ui/src/modules/common/components/NoImage.tsx b/admin-ui/src/components/ui/NoImage.tsx
similarity index 52%
rename from admin-ui/src/modules/common/components/NoImage.tsx
rename to admin-ui/src/components/ui/NoImage.tsx
index eaaac0be41..c2d579ddd4 100644
--- a/admin-ui/src/modules/common/components/NoImage.tsx
+++ b/admin-ui/src/components/ui/NoImage.tsx
@@ -1,10 +1,10 @@
 import { PhotoIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 const NoImage = ({ className = '', containerClassName = '', Icon = null }) => {
   return (
-    <span className={classNames('text-slate-400', containerClassName)}>
-      {Icon || <PhotoIcon className={classNames(className)} />}
+    <span className={clsx('text-slate-400', containerClassName)}>
+      {Icon || <PhotoIcon className={clsx(className)} />}
     </span>
   );
 };
diff --git a/admin-ui/src/modules/common/components/NoImageSvg.tsx b/admin-ui/src/components/ui/NoImageSvg.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/NoImageSvg.tsx
rename to admin-ui/src/components/ui/NoImageSvg.tsx
diff --git a/admin-ui/src/modules/common/components/PageHeader.tsx b/admin-ui/src/components/ui/PageHeader.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/PageHeader.tsx
rename to admin-ui/src/components/ui/PageHeader.tsx
diff --git a/admin-ui/src/modules/common/components/Pagination.tsx b/admin-ui/src/components/ui/Pagination.tsx
similarity index 97%
rename from admin-ui/src/modules/common/components/Pagination.tsx
rename to admin-ui/src/components/ui/Pagination.tsx
index 739a9126a2..255bb2a7da 100644
--- a/admin-ui/src/modules/common/components/Pagination.tsx
+++ b/admin-ui/src/components/ui/Pagination.tsx
@@ -1,8 +1,11 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useRouter } from 'next/router';
 
 import { FormattedMessage, useIntl } from 'react-intl';
-import { DefaultLimit, LimitSteps } from '../data/miscellaneous';
+import {
+  DefaultLimit,
+  LimitSteps,
+} from '../../modules/common/data/miscellaneous';
 import Button from './Button';
 import Loading from './Loading';
 
@@ -25,7 +28,7 @@ const MobilePaginator = ({
           e.stopPropagation();
           onOffsetChange(offset - limit);
         }}
-        className={classNames(
+        className={clsx(
           'relative inline-flex items-center rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-2 text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-600',
           {
             'text-slate-200': !offset,
@@ -64,7 +67,7 @@ const MobilePaginator = ({
           e.stopPropagation();
           onOffsetChange(offset + limit);
         }}
-        className={classNames(
+        className={clsx(
           'relative ml-3 inline-flex items-center rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-2 text-sm font-medium  hover:bg-slate-50 dark:hover:bg-slate-600',
           {
             'text-slate-200': offset + limit >= total,
@@ -85,7 +88,7 @@ const Step = ({ onClick, disabled = false, label }) => {
       onClick={onClick}
       aria-current="page"
       disabled={disabled}
-      className={classNames(
+      className={clsx(
         'relative inline-flex items-center border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-2 text-sm font-medium  hover:bg-slate-50 ',
         {
           'z-10 border-slate-900 bg-slate-50 text-slate-800 dark:bg-slate-600 dark:border-slate-400 dark:text-slate-200':
@@ -264,7 +267,7 @@ const Pagination = ({
                     e.stopPropagation();
                     changeOffset(offset - limit);
                   }}
-                  className={classNames(
+                  className={clsx(
                     'relative inline-flex items-center rounded-l-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-2 py-2 text-sm font-medium  hover:bg-slate-50 dark:hover:bg-slate-600',
                     {
                       'text-slate-200': !offset,
@@ -303,7 +306,7 @@ const Pagination = ({
                     changeOffset(offset + limit);
                   }}
                   disabled={offset + limit >= total}
-                  className={classNames(
+                  className={clsx(
                     'relative inline-flex items-center rounded-r-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-2 py-2 text-sm font-medium  hover:bg-slate-50 dark:hover:bg-slate-600',
                     {
                       'text-slate-200': offset + limit >= total,
diff --git a/admin-ui/src/modules/common/components/Portal.tsx b/admin-ui/src/components/ui/Portal/Portal.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/Portal.tsx
rename to admin-ui/src/components/ui/Portal/Portal.tsx
diff --git a/admin-ui/src/modules/common/components/Portal.types.ts b/admin-ui/src/components/ui/Portal/Portal.types.ts
similarity index 100%
rename from admin-ui/src/modules/common/components/Portal.types.ts
rename to admin-ui/src/components/ui/Portal/Portal.types.ts
diff --git a/admin-ui/src/components/ui/README.md b/admin-ui/src/components/ui/README.md
new file mode 100644
index 0000000000..5d5819e1ba
--- /dev/null
+++ b/admin-ui/src/components/ui/README.md
@@ -0,0 +1,59 @@
+# UI Component Kit
+
+Canonical shared primitives for the Unchained Admin UI.
+
+## Importing
+
+```tsx
+import Button from '@/components/ui/Button';
+import { Badge, Loading, NoData } from '@/components/ui';
+import { TextField, SelectField } from '@/components/ui/form';
+```
+
+## What's in the kit
+
+### Core primitives
+Button, Badge, Toggle, Tab, Loading, NoData, BlockingContent
+
+### Navigation & layout
+BreadCrumbs, PageHeader, ListHeader, DetailHeader, Pagination
+
+### Data display
+JSONView, ToolTip, CopyableText, AnimatedCounter, ActiveInActive
+
+### Feedback
+ErrorBoundary, ErrorFallback, InfoTextBanner, HelpText
+
+### Form fields (`@/components/ui/form`)
+TextField, TextAreaField, SelectField, CheckboxField, ChoicesField,
+DatePickerField, EmailField, PasswordField, JSONAreaField,
+MarkdownTextAreaField, TagInputField, FieldWrapper, FormErrors,
+SubmitButton, FieldWithHelp
+
+### Tags
+TagInput, TagList, TagListForm (in `@/components/ui/Tag/`)
+
+### Dates
+DateInput, DateRangeFilterInput
+
+### Images
+ImageWithFallback, NoImage, NoImageSvg
+
+### Misc
+Portal, DraggableIcon, SearchField, SaveAndCancelButtons
+
+### Icons
+Central re-export in `@/components/ui/icons.ts`.
+
+### Shadcn-style
+card.tsx, chart.tsx (pre-existing)
+
+## Live reference
+
+Visit `/styleguide` in the running admin UI to see every primitive rendered in light and dark mode.
+
+## When to extend vs. add new
+
+- If a variant of an existing component covers your use case, use the variant.
+- If you need a genuinely new primitive, add it here with a `/styleguide` entry.
+- Domain-specific components stay in `src/modules/<domain>/components/`.
diff --git a/admin-ui/src/modules/common/components/SaveAndCancelButtons.tsx b/admin-ui/src/components/ui/SaveAndCancelButtons.tsx
similarity index 88%
rename from admin-ui/src/modules/common/components/SaveAndCancelButtons.tsx
rename to admin-ui/src/components/ui/SaveAndCancelButtons.tsx
index 2be3b07704..680e8cef2f 100644
--- a/admin-ui/src/modules/common/components/SaveAndCancelButtons.tsx
+++ b/admin-ui/src/components/ui/SaveAndCancelButtons.tsx
@@ -1,6 +1,6 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useIntl } from 'react-intl';
-import SubmitButton from '../../forms/components/SubmitButton';
+import SubmitButton from './form/SubmitButton';
 
 const SaveAndCancelButtons = ({
   cancelText = null,
@@ -13,7 +13,7 @@ const SaveAndCancelButtons = ({
   const { formatMessage } = useIntl();
   return (
     <span
-      className={classNames(
+      className={clsx(
         'flex shrink-0 items-center space-x-4 py-5 pl-1',
         className,
       )}
@@ -23,7 +23,7 @@ const SaveAndCancelButtons = ({
           onClick={onCancel}
           data-id="cancel_update"
           type="button"
-          className={classNames(
+          className={clsx(
             'focus:ring-slate-800',
             'inline-flex items-center rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 shadow-xs hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-hidden focus:ring-2 focus:ring-slate-800 focus:ring-offset-2',
           )}
diff --git a/admin-ui/src/modules/common/components/SearchField.tsx b/admin-ui/src/components/ui/SearchField.tsx
similarity index 96%
rename from admin-ui/src/modules/common/components/SearchField.tsx
rename to admin-ui/src/components/ui/SearchField.tsx
index e3b59fbfe4..84f403b946 100644
--- a/admin-ui/src/modules/common/components/SearchField.tsx
+++ b/admin-ui/src/components/ui/SearchField.tsx
@@ -1,5 +1,5 @@
 import { useIntl } from 'react-intl';
-import deBounce from '../utils/deBounce';
+import deBounce from '../../modules/common/utils/deBounce';
 
 const SearchField = ({ inputText = null, onInputChange, defaultValue }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/common/components/Tab.tsx b/admin-ui/src/components/ui/Tab.tsx
similarity index 98%
rename from admin-ui/src/modules/common/components/Tab.tsx
rename to admin-ui/src/components/ui/Tab.tsx
index 220dd813dc..db4858ac73 100644
--- a/admin-ui/src/modules/common/components/Tab.tsx
+++ b/admin-ui/src/components/ui/Tab.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -83,7 +83,7 @@ const Tab = ({
                     onTabSelected(option.id);
                   }
                 }}
-                className={classNames(
+                className={clsx(
                   {
                     'cursor-pointer rounded-lg border border-slate-300 dark:border-slate-600 bg-white text-slate-900 dark:text-slate-100 dark:bg-slate-900 shadow-sm dark:hover:border-slate-500 hover:border-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-800 dark:focus:ring-slate-400 focus:ring-offset-2 dark:focus:ring-offset-slate-900':
                       currentTab === option.id,
diff --git a/admin-ui/src/modules/common/components/TagInput.tsx b/admin-ui/src/components/ui/Tag/TagInput.tsx
similarity index 97%
rename from admin-ui/src/modules/common/components/TagInput.tsx
rename to admin-ui/src/components/ui/Tag/TagInput.tsx
index 3f79628153..797c2c5e1b 100644
--- a/admin-ui/src/modules/common/components/TagInput.tsx
+++ b/admin-ui/src/components/ui/Tag/TagInput.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo, useState } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useIntl } from 'react-intl';
 import CreatableSelect from 'react-select/creatable';
-import Badge from './Badge';
-import useTheme from '../hooks/useTheme';
+import Badge from '../Badge';
+import useTheme from '../../../modules/common/hooks/useTheme';
 
 const normalizeTagValue = (tags) => {
   if (tags) {
@@ -220,7 +220,7 @@ const TagInput = ({
       {TagInputComponent}
 
       <div
-        className={classNames(
+        className={clsx(
           'ml-4 flex items-center flex-wrap gap-5',
           tagList.length > 0 && 'mt-1',
         )}
diff --git a/admin-ui/src/modules/common/components/TagList.tsx b/admin-ui/src/components/ui/Tag/TagList.tsx
similarity index 94%
rename from admin-ui/src/modules/common/components/TagList.tsx
rename to admin-ui/src/components/ui/Tag/TagList.tsx
index 5215422efb..19fd9a92cb 100644
--- a/admin-ui/src/modules/common/components/TagList.tsx
+++ b/admin-ui/src/components/ui/Tag/TagList.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
-import useModal from '../../modal/hooks/useModal';
+import useModal from '../../../modules/modal/hooks/useModal';
 
-import Badge from './Badge';
+import Badge from '../Badge';
 import TagListForm from './TagListForm';
 
 const TagList = ({
diff --git a/admin-ui/src/modules/common/components/TagListForm.tsx b/admin-ui/src/components/ui/Tag/TagListForm.tsx
similarity index 80%
rename from admin-ui/src/modules/common/components/TagListForm.tsx
rename to admin-ui/src/components/ui/Tag/TagListForm.tsx
index 6c1d718cba..3b17e53dbb 100644
--- a/admin-ui/src/modules/common/components/TagListForm.tsx
+++ b/admin-ui/src/components/ui/Tag/TagListForm.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
-import Form from '../../forms/components/Form';
-import TagInputField from '../../forms/components/TagInputField';
-import useForm from '../../forms/hooks/useForm';
-import SaveAndCancelButtons from './SaveAndCancelButtons';
+import Form from '../../../modules/forms/components/Form';
+import TagInputField from '../form/TagInputField';
+import useForm from '../../../modules/forms/hooks/useForm';
+import SaveAndCancelButtons from '../SaveAndCancelButtons';
 
 const TagListForm = ({ tags, onSubmit, onCancel, selectOptions = [] }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/common/components/Toggle.tsx b/admin-ui/src/components/ui/Toggle.tsx
similarity index 92%
rename from admin-ui/src/modules/common/components/Toggle.tsx
rename to admin-ui/src/components/ui/Toggle.tsx
index dfd6d04171..57c2251788 100644
--- a/admin-ui/src/modules/common/components/Toggle.tsx
+++ b/admin-ui/src/components/ui/Toggle.tsx
@@ -1,6 +1,6 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useRouter } from 'next/router';
-import { normalizeQuery } from '../utils/utils';
+import { normalizeQuery } from '../../modules/common/utils/utils';
 
 const Toggle = ({
   toggleText = '',
@@ -23,12 +23,12 @@ const Toggle = ({
   };
 
   return (
-    <div className={classNames('', className)}>
+    <div className={clsx('', className)}>
       <button
         id={toggleKey}
         disabled={disabled}
         type="button"
-        className={classNames(
+        className={clsx(
           'relative inline-flex h-3.5 w-9 shrink-0 cursor-pointer rounded-full border-1 border-transparent transition-all duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2',
           {
             'bg-slate-200 dark:bg-slate-700': !toggleState,
@@ -43,7 +43,7 @@ const Toggle = ({
         <span className="sr-only">{toggleText}</span>
 
         <span
-          className={classNames(
+          className={clsx(
             'ml-0.5 pointer-events-none relative inline-block h-3 w-3 transform rounded-full bg-white shadow-sm ring-0 transition-all duration-200 ease-in-out',
             {
               'translate-x-5 shadow-md': toggleState,
@@ -52,7 +52,7 @@ const Toggle = ({
           )}
         >
           <span
-            className={classNames(
+            className={clsx(
               'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
               {
                 'opacity-0 duration-100 ease-out': toggleState,
@@ -77,7 +77,7 @@ const Toggle = ({
           </span>
 
           <span
-            className={classNames(
+            className={clsx(
               'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity',
               {
                 'opacity-100 duration-200 ease-in': toggleState,
diff --git a/admin-ui/src/modules/common/components/ToolTip.tsx b/admin-ui/src/components/ui/ToolTip.tsx
similarity index 100%
rename from admin-ui/src/modules/common/components/ToolTip.tsx
rename to admin-ui/src/components/ui/ToolTip.tsx
diff --git a/admin-ui/src/modules/forms/components/CheckboxField.tsx b/admin-ui/src/components/ui/form/CheckboxField.tsx
similarity index 86%
rename from admin-ui/src/modules/forms/components/CheckboxField.tsx
rename to admin-ui/src/components/ui/form/CheckboxField.tsx
index 1d3c4a99ac..54c268a772 100644
--- a/admin-ui/src/modules/forms/components/CheckboxField.tsx
+++ b/admin-ui/src/components/ui/form/CheckboxField.tsx
@@ -1,6 +1,8 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
-import useField, { CommonFieldProps } from '../hooks/useField';
+import useField, {
+  CommonFieldProps,
+} from '../../../modules/forms/hooks/useField';
 
 const CheckboxField = (props: CommonFieldProps) => {
   const {
@@ -13,7 +15,7 @@ const CheckboxField = (props: CommonFieldProps) => {
   const field = useField({ ...props, type: 'checkbox' });
   return (
     <div
-      className={classNames(
+      className={clsx(
         '',
         {
           'text-rose-600': !!field.error,
@@ -32,7 +34,7 @@ const CheckboxField = (props: CommonFieldProps) => {
         onChange={field.onChange}
         onBlur={field.onBlur}
         type="checkbox"
-        className={classNames(
+        className={clsx(
           'h-4 w-4 rounded-xs border-slate-300 dark:border-slate-600 bg-white dark:!bg-slate-800 text-indigo-600 dark:text-slate-200 focus:ring-slate-800',
           inputClassName,
           props.className,
@@ -41,7 +43,7 @@ const CheckboxField = (props: CommonFieldProps) => {
       />
       <label
         htmlFor={field.name}
-        className={classNames(
+        className={clsx(
           'text-sm text-slate-900 dark:text-slate-200',
           labelClassName,
           {
diff --git a/admin-ui/src/modules/forms/components/ChoicesField.tsx b/admin-ui/src/components/ui/form/ChoicesField.tsx
similarity index 82%
rename from admin-ui/src/modules/forms/components/ChoicesField.tsx
rename to admin-ui/src/components/ui/form/ChoicesField.tsx
index c08717c570..1c596cc488 100644
--- a/admin-ui/src/modules/forms/components/ChoicesField.tsx
+++ b/admin-ui/src/components/ui/form/ChoicesField.tsx
@@ -1,6 +1,8 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
-import useField, { FieldHookProps } from '../hooks/useField';
+import useField, {
+  FieldHookProps,
+} from '../../../modules/forms/hooks/useField';
 import { SelectFieldOptions } from './SelectField';
 
 interface ChoicesFieldProps extends FieldHookProps {
@@ -25,14 +27,14 @@ const ChoicesField = ({ multiple, options, ...props }: ChoicesFieldProps) => {
   const { className, hideLabel } = props;
   return (
     <div
-      className={classNames('container', className, {
+      className={clsx('container', className, {
         'is-invalid': !!field.error,
         disabled: field.disabled,
         required: field.required,
       })}
     >
       <label
-        className={classNames('text-sm', className, {
+        className={clsx('text-sm', className, {
           'text-rose-600': !!field.error,
           'sr-only': hideLabel,
         })}
@@ -41,24 +43,24 @@ const ChoicesField = ({ multiple, options, ...props }: ChoicesFieldProps) => {
       </label>
 
       <div
-        className={classNames(
+        className={clsx(
           `row flex flex-row gap-3 ${choiceContainerClassName}`,
           className,
         )}
       >
         {Object.entries(field.options).map(([value, display]: any) => (
           <div
-            className={classNames(`-ml-2 ${choiceClassName}`, className)}
+            className={clsx(`-ml-2 ${choiceClassName}`, className)}
             key={value}
           >
             <label
               htmlFor={`${field.name}-${value}`}
-              className={classNames('', labelClassName)}
+              className={clsx('', labelClassName)}
             >
               <input
                 value={value}
                 checked={mappableValue.includes(value)}
-                className={classNames(
+                className={clsx(
                   'mr-2 h-4 w-4 rounded-sm border-slate-300 dark:border-slate-600 bg-white dark:!bg-slate-800 text-slate-950 focus:ring-slate-800',
                   inputClassName,
                 )}
diff --git a/admin-ui/src/modules/forms/components/DatePickerField.tsx b/admin-ui/src/components/ui/form/DatePickerField.tsx
similarity index 87%
rename from admin-ui/src/modules/forms/components/DatePickerField.tsx
rename to admin-ui/src/components/ui/form/DatePickerField.tsx
index 7d0256ce5c..1bf2f2fe77 100644
--- a/admin-ui/src/modules/forms/components/DatePickerField.tsx
+++ b/admin-ui/src/components/ui/form/DatePickerField.tsx
@@ -1,7 +1,9 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
-import useField, { FieldHookProps } from '../hooks/useField';
-import { validateDate } from '../lib/validators';
+import useField, {
+  FieldHookProps,
+} from '../../../modules/forms/hooks/useField';
+import { validateDate } from '../../../modules/forms/lib/validators';
 import FieldWrapper from './FieldWrapper';
 
 const defaultParseDate = (value: string) => {
@@ -31,7 +33,7 @@ const DatePickerField = ({
         id={field.id}
         name={field.name}
         disabled={field.disabled}
-        className={classnames(
+        className={clsx(
           'relative mt-0 block w-full appearance-none rounded-md rounded-b-md border-1 border-slate-300 dark:border-slate-700 px-4 py-2.5 text-sm text-slate-900 dark:text-slate-200 dark:bg-slate-900 placeholder-slate-400 shadow-xs focus:z-10  focus:outline-hidden focus:ring-2 focus:ring-slate-800',
           className,
           {
diff --git a/admin-ui/src/modules/forms/components/EmailField.tsx b/admin-ui/src/components/ui/form/EmailField.tsx
similarity index 83%
rename from admin-ui/src/modules/forms/components/EmailField.tsx
rename to admin-ui/src/components/ui/form/EmailField.tsx
index 195fe245e9..900c983e27 100644
--- a/admin-ui/src/modules/forms/components/EmailField.tsx
+++ b/admin-ui/src/components/ui/form/EmailField.tsx
@@ -1,5 +1,5 @@
 import TextField from './TextField';
-import { validateEmail } from '../lib/validators';
+import { validateEmail } from '../../../modules/forms/lib/validators';
 
 const EmailField = ({ validators = [], value = '', ...props }) => {
   return (
diff --git a/admin-ui/src/modules/forms/components/FieldWithHelp.tsx b/admin-ui/src/components/ui/form/FieldWithHelp.tsx
similarity index 92%
rename from admin-ui/src/modules/forms/components/FieldWithHelp.tsx
rename to admin-ui/src/components/ui/form/FieldWithHelp.tsx
index e6a331ea69..8fac752b8e 100644
--- a/admin-ui/src/modules/forms/components/FieldWithHelp.tsx
+++ b/admin-ui/src/components/ui/form/FieldWithHelp.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TextField, { TextFieldProps } from './TextField';
-import HelpText from '../../common/components/HelpText';
+import HelpText from '../HelpText';
 
 interface FieldWithHelpProps extends TextFieldProps {
   helpKey?: string;
diff --git a/admin-ui/src/modules/forms/components/FieldWrapper.tsx b/admin-ui/src/components/ui/form/FieldWrapper.tsx
similarity index 86%
rename from admin-ui/src/modules/forms/components/FieldWrapper.tsx
rename to admin-ui/src/components/ui/form/FieldWrapper.tsx
index f59b55acca..2bf21fc427 100644
--- a/admin-ui/src/modules/forms/components/FieldWrapper.tsx
+++ b/admin-ui/src/components/ui/form/FieldWrapper.tsx
@@ -1,6 +1,6 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
-import { ComputedProps } from '../hooks/useField';
+import { ComputedProps } from '../../../modules/forms/hooks/useField';
 
 import type { JSX } from 'react';
 
@@ -21,7 +21,7 @@ const FieldWrapper = ({
 }: FieldWrapperProps) => {
   return (
     <div
-      className={classnames(
+      className={clsx(
         'container',
         {
           'is-invalid': !!error,
@@ -34,7 +34,7 @@ const FieldWrapper = ({
       <label
         aria-label={label}
         htmlFor={name}
-        className={classnames(
+        className={clsx(
           'mb-2 block text-left text-sm font-light text-slate-800 dark:text-slate-200',
           {
             'mt-1 rounded-sm border border-rose-100 dark:border-rose-800 bg-rose-50 dark:bg-rose-900/20 p-2 pl-4 text-rose-700 dark:text-rose-400':
diff --git a/admin-ui/src/modules/forms/components/FormErrors.tsx b/admin-ui/src/components/ui/form/FormErrors.tsx
similarity index 96%
rename from admin-ui/src/modules/forms/components/FormErrors.tsx
rename to admin-ui/src/components/ui/form/FormErrors.tsx
index 917617adaf..8556373679 100644
--- a/admin-ui/src/modules/forms/components/FormErrors.tsx
+++ b/admin-ui/src/components/ui/form/FormErrors.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import useFormContext from '../hooks/useFormContext';
+import useFormContext from '../../../modules/forms/hooks/useFormContext';
 
 const createHandler = (name) => () => {
   const element = document.getElementById(name);
diff --git a/admin-ui/src/modules/forms/components/JSONAreaField.tsx b/admin-ui/src/components/ui/form/JSONAreaField.tsx
similarity index 91%
rename from admin-ui/src/modules/forms/components/JSONAreaField.tsx
rename to admin-ui/src/components/ui/form/JSONAreaField.tsx
index 0cf8e76b51..fc263dad8c 100644
--- a/admin-ui/src/modules/forms/components/JSONAreaField.tsx
+++ b/admin-ui/src/components/ui/form/JSONAreaField.tsx
@@ -1,8 +1,10 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 import { useIntl } from 'react-intl';
-import JSONView from '../../common/components/JSONView';
-import useField, { FieldHookProps } from '../hooks/useField';
+import JSONView from '../JSONView';
+import useField, {
+  FieldHookProps,
+} from '../../../modules/forms/hooks/useField';
 import FieldWrapper from './FieldWrapper';
 
 interface JSONAreaProps extends FieldHookProps {
@@ -62,7 +64,7 @@ const JSONAreaField = ({
   return (
     <FieldWrapper {...field}>
       <JSONView
-        className={classnames(
+        className={clsx(
           'mt-1 block w-full max-w-full rounded-md border-1 border-slate-300 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 shadow-xs dark:shadow-none focus:ring-slate-800 sm:text-sm',
           {
             'border-rose-300 text-rose-600 focus:border-rose-600 focus:ring-rose-600':
diff --git a/admin-ui/src/modules/forms/components/MarkdownTextAreaField.tsx b/admin-ui/src/components/ui/form/MarkdownTextAreaField.tsx
similarity index 91%
rename from admin-ui/src/modules/forms/components/MarkdownTextAreaField.tsx
rename to admin-ui/src/components/ui/form/MarkdownTextAreaField.tsx
index 0b7dd3b79f..a4de734ef5 100644
--- a/admin-ui/src/modules/forms/components/MarkdownTextAreaField.tsx
+++ b/admin-ui/src/components/ui/form/MarkdownTextAreaField.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 import { useIntl } from 'react-intl';
 import { EyeIcon, PencilIcon } from '@heroicons/react/24/outline';
@@ -6,10 +6,12 @@ import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import rehypeSanitize from 'rehype-sanitize';
-import { validateMaxLength } from '../lib/validators';
-import useField, { FieldHookProps } from '../hooks/useField';
+import { validateMaxLength } from '../../../modules/forms/lib/validators';
+import useField, {
+  FieldHookProps,
+} from '../../../modules/forms/hooks/useField';
 import FieldWrapper from './FieldWrapper';
-import Tab from '../../common/components/Tab';
+import Tab from '../Tab';
 
 const GetCurrentTab = ({ selectedView = 'edit', ...field }) => {
   if (selectedView === 'preview') {
@@ -25,7 +27,7 @@ const GetCurrentTab = ({ selectedView = 'edit', ...field }) => {
   }
   return (
     <textarea
-      className={classnames(
+      className={clsx(
         'relative mt-1 block w-full dark:focus:autofill dark:hover:autofill dark:autofill dark:placeholder:text-slate-400 dark:bg-slate-900 dark:text-slate-200 appearance-none rounded-md border-1 border-slate-300 dark:border-slate-700 px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 shadow-xs placeholder:text-slate-400  focus:outline-hidden focus:ring-2 focus:ring-slate-800',
         field.className,
         {
diff --git a/admin-ui/src/modules/forms/components/PasswordField.tsx b/admin-ui/src/components/ui/form/PasswordField.tsx
similarity index 95%
rename from admin-ui/src/modules/forms/components/PasswordField.tsx
rename to admin-ui/src/components/ui/form/PasswordField.tsx
index 5cbba313d4..595c5a8e67 100644
--- a/admin-ui/src/modules/forms/components/PasswordField.tsx
+++ b/admin-ui/src/components/ui/form/PasswordField.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 
 import TextField from './TextField';
@@ -12,7 +12,7 @@ const PasswordField = ({ autoComplete = 'on', ...props }: any) => {
   };
 
   return (
-    <div className={classNames('relative', props.className)}>
+    <div className={clsx('relative', props.className)}>
       <TextField
         {...{
           autoComplete: autoComplete || 'on',
diff --git a/admin-ui/src/modules/forms/components/SelectField.tsx b/admin-ui/src/components/ui/form/SelectField.tsx
similarity index 92%
rename from admin-ui/src/modules/forms/components/SelectField.tsx
rename to admin-ui/src/components/ui/form/SelectField.tsx
index 016f7d9ad1..df77207fa0 100644
--- a/admin-ui/src/modules/forms/components/SelectField.tsx
+++ b/admin-ui/src/components/ui/form/SelectField.tsx
@@ -1,6 +1,8 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
-import useField, { FieldHookProps } from '../hooks/useField';
+import useField, {
+  FieldHookProps,
+} from '../../../modules/forms/hooks/useField';
 import FieldWrapper from './FieldWrapper';
 
 import type { JSX } from 'react';
@@ -20,7 +22,7 @@ const SelectField = (props: SelectFieldProps) => {
     <FieldWrapper {...field}>
       <div className="select-wrap">
         <select
-          className={classnames(
+          className={clsx(
             'block w-full dark:bg-slate-900 dark:text-white rounded-md border-1 border-slate-300 dark:border-slate-700 py-2.5 pl-3 pr-10 text-base text-black shadow-xs  focus:outline-hidden focus:ring-2 focus:ring-slate-800 sm:text-sm',
             className,
             {
diff --git a/admin-ui/src/modules/forms/components/SubmitButton.tsx b/admin-ui/src/components/ui/form/SubmitButton.tsx
similarity index 93%
rename from admin-ui/src/modules/forms/components/SubmitButton.tsx
rename to admin-ui/src/components/ui/form/SubmitButton.tsx
index 3ea72d0156..d1cf8621ec 100644
--- a/admin-ui/src/modules/forms/components/SubmitButton.tsx
+++ b/admin-ui/src/components/ui/form/SubmitButton.tsx
@@ -1,7 +1,7 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useFormikContext } from 'formik';
 
-import useFormContext from '../hooks/useFormContext';
+import useFormContext from '../../../modules/forms/hooks/useFormContext';
 
 const SubmitButton = ({
   label,
@@ -37,7 +37,7 @@ const SubmitButton = ({
     (disabledProp || contextDisabled || hasError) && !formik.isSubmitting;
   return (
     <input
-      className={classNames(
+      className={clsx(
         'inline-flex cursor-pointer justify-center rounded-sm border border-slate-300 px-4 py-2 text-center text-sm font-medium leading-5 shadow-sm hover:shadow-md focus:ring-slate-800 dark:focus:ring-slate-400',
         className,
         {
diff --git a/admin-ui/src/modules/forms/components/TagInputField.tsx b/admin-ui/src/components/ui/form/TagInputField.tsx
similarity index 75%
rename from admin-ui/src/modules/forms/components/TagInputField.tsx
rename to admin-ui/src/components/ui/form/TagInputField.tsx
index 050d1d2336..701d80d7ec 100644
--- a/admin-ui/src/modules/forms/components/TagInputField.tsx
+++ b/admin-ui/src/components/ui/form/TagInputField.tsx
@@ -1,8 +1,10 @@
-import classnames from 'classnames';
-import TagInput from '../../common/components/TagInput';
+import clsx from 'clsx';
+import TagInput from '../Tag/TagInput';
 
-import useField, { FieldHookProps } from '../hooks/useField';
-import { validateRequiredTag } from '../lib/validators';
+import useField, {
+  FieldHookProps,
+} from '../../../modules/forms/hooks/useField';
+import { validateRequiredTag } from '../../../modules/forms/lib/validators';
 import FieldWrapper from './FieldWrapper';
 
 const TagInputField = ({
@@ -22,7 +24,7 @@ const TagInputField = ({
         disabled={field.disabled}
         id={field.id}
         name={field.name}
-        className={classnames({
+        className={clsx({
           'border-rose-300': !!field.error,
         })}
         onChange={(value) => field.setValue(value)}
diff --git a/admin-ui/src/modules/forms/components/TextAreaField.tsx b/admin-ui/src/components/ui/form/TextAreaField.tsx
similarity index 86%
rename from admin-ui/src/modules/forms/components/TextAreaField.tsx
rename to admin-ui/src/components/ui/form/TextAreaField.tsx
index 22af410eef..9ace48b7bb 100644
--- a/admin-ui/src/modules/forms/components/TextAreaField.tsx
+++ b/admin-ui/src/components/ui/form/TextAreaField.tsx
@@ -1,7 +1,9 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
-import { validateMaxLength } from '../lib/validators';
-import useField, { FieldHookProps } from '../hooks/useField';
+import { validateMaxLength } from '../../../modules/forms/lib/validators';
+import useField, {
+  FieldHookProps,
+} from '../../../modules/forms/hooks/useField';
 import FieldWrapper from './FieldWrapper';
 
 interface TextAreaFieldProps extends FieldHookProps {
@@ -23,7 +25,7 @@ const TextAreaField = ({
   return (
     <FieldWrapper {...field}>
       <textarea
-        className={classnames(
+        className={clsx(
           'relative mt-1 block w-full dark:focus:autofill dark:hover:autofill dark:autofill dark:placeholder:text-slate-400 dark:bg-slate-900 dark:text-slate-200 appearance-none rounded-md border-1 border-slate-300 dark:border-slate-700 px-4 py-2.5 text-sm text-slate-900 placeholder-slate-400 shadow-xs placeholder:text-slate-400  focus:outline-hidden focus:ring-2 focus:ring-slate-800',
           field.className,
           {
diff --git a/admin-ui/src/modules/forms/components/TextField.tsx b/admin-ui/src/components/ui/form/TextField.tsx
similarity index 87%
rename from admin-ui/src/modules/forms/components/TextField.tsx
rename to admin-ui/src/components/ui/form/TextField.tsx
index fca25f105f..993ddc7fd1 100644
--- a/admin-ui/src/modules/forms/components/TextField.tsx
+++ b/admin-ui/src/components/ui/form/TextField.tsx
@@ -1,7 +1,9 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 
-import { validateMaxLength } from '../lib/validators';
-import useField, { FieldHookProps } from '../hooks/useField';
+import { validateMaxLength } from '../../../modules/forms/lib/validators';
+import useField, {
+  FieldHookProps,
+} from '../../../modules/forms/hooks/useField';
 import FieldWrapper from './FieldWrapper';
 
 export interface TextFieldProps extends FieldHookProps {
@@ -25,7 +27,7 @@ const TextField = ({
   return (
     <FieldWrapper {...field}>
       <input
-        className={classnames(
+        className={clsx(
           'relative mt-1 block w-full dark:focus:autofill dark:hover:autofill dark:autofill dark:placeholder:text-slate-600 dark:bg-slate-900 dark:text-slate-200 appearance-none rounded-md border-1 dark:border-slate-700 px-4 py-2.5 text-sm text-slate-900 focus:outline-hidden focus:ring-2 focus:ring-slate-800 shadow-xs',
           {
             'border-rose-700 placeholder:text-rose-500': !!field.error,
diff --git a/admin-ui/src/components/ui/form/index.ts b/admin-ui/src/components/ui/form/index.ts
new file mode 100644
index 0000000000..7b119838cb
--- /dev/null
+++ b/admin-ui/src/components/ui/form/index.ts
@@ -0,0 +1,15 @@
+export { default as FieldWrapper } from './FieldWrapper';
+export { default as FormErrors } from './FormErrors';
+export { default as SubmitButton } from './SubmitButton';
+export { default as FieldWithHelp } from './FieldWithHelp';
+export { default as TextField } from './TextField';
+export { default as TextAreaField } from './TextAreaField';
+export { default as SelectField } from './SelectField';
+export { default as CheckboxField } from './CheckboxField';
+export { default as ChoicesField } from './ChoicesField';
+export { default as DatePickerField } from './DatePickerField';
+export { default as EmailField } from './EmailField';
+export { default as PasswordField } from './PasswordField';
+export { default as JSONAreaField } from './JSONAreaField';
+export { default as MarkdownTextAreaField } from './MarkdownTextAreaField';
+export { default as TagInputField } from './TagInputField';
diff --git a/admin-ui/src/components/ui/icons.ts b/admin-ui/src/components/ui/icons.ts
new file mode 100644
index 0000000000..f02231dc09
--- /dev/null
+++ b/admin-ui/src/components/ui/icons.ts
@@ -0,0 +1,64 @@
+export {
+  ArrowLeftIcon,
+  ArrowPathIcon,
+  ArrowRightEndOnRectangleIcon,
+  BanknotesIcon,
+  CalculatorIcon,
+  CalendarIcon,
+  ChatBubbleLeftIcon,
+  ChatBubbleLeftRightIcon,
+  CheckBadgeIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  ClockIcon,
+  Cog6ToothIcon,
+  CommandLineIcon,
+  CreditCardIcon,
+  EllipsisHorizontalIcon,
+  EnvelopeIcon,
+  EnvelopeOpenIcon,
+  EyeIcon,
+  FolderIcon,
+  GlobeAltIcon,
+  InboxIcon,
+  InformationCircleIcon,
+  LinkIcon,
+  ListBulletIcon,
+  LockClosedIcon,
+  MoonIcon,
+  NoSymbolIcon,
+  PaperAirplaneIcon,
+  PencilIcon,
+  PhotoIcon,
+  PlusIcon,
+  QuestionMarkCircleIcon,
+  RectangleStackIcon,
+  ShoppingBagIcon,
+  ShoppingCartIcon,
+  SparklesIcon,
+  Squares2X2Icon,
+  SunIcon,
+  TrashIcon,
+  UserCircleIcon,
+  VariableIcon,
+  XCircleIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
+
+export {
+  ChevronDownIcon as ChevronDownSolidIcon,
+  ChevronUpIcon as ChevronUpSolidIcon,
+  PencilIcon as PencilSolidIcon,
+  PencilSquareIcon,
+  TrashIcon as TrashSolidIcon,
+} from '@heroicons/react/20/solid';
+
+export {
+  CheckCircleIcon as CheckCircleSolidIcon,
+  ChevronDownIcon as ChevronDownSolid24Icon,
+  StarIcon,
+  XCircleIcon as XCircleSolidIcon,
+} from '@heroicons/react/24/solid';
diff --git a/admin-ui/src/components/ui/index.ts b/admin-ui/src/components/ui/index.ts
new file mode 100644
index 0000000000..a0e7d338fa
--- /dev/null
+++ b/admin-ui/src/components/ui/index.ts
@@ -0,0 +1,66 @@
+export { default as Button } from './Button';
+export type { ButtonProps } from './Button';
+export { default as Badge } from './Badge';
+export { default as Toggle } from './Toggle';
+export { default as SearchField } from './SearchField';
+export { default as CopyableText } from './CopyableText';
+
+export { default as Loading } from './Loading';
+export { default as NoData } from './NoData';
+export { default as BlockingContent } from './BlockingContent';
+
+export { default as Accordion } from './Accordion/Accordion';
+export { default as AccordionItem } from './Accordion/AccordionItem';
+export { default as AccordionHeader } from './Accordion/AccordionHeader';
+
+export { default as Tab } from './Tab';
+export { default as BreadCrumbs } from './BreadCrumbs';
+export { default as PageHeader } from './PageHeader';
+export { default as ListHeader } from './ListHeader';
+export { default as DetailHeader } from './DetailHeader';
+
+export { default as JSONView } from './JSONView';
+export { default as Pagination } from './Pagination';
+export { default as ToolTip } from './ToolTip';
+
+export { default as ErrorBoundary } from './ErrorBoundary';
+export { default as ErrorFallback } from './ErrorFallback';
+
+export { default as DateInput } from './DateInput';
+export { default as DateRangeFilterInput } from './DateRangeFilterInput';
+
+export { default as TagInput } from './Tag/TagInput';
+export { default as TagList } from './Tag/TagList';
+export { default as TagListForm } from './Tag/TagListForm';
+
+export { default as AnimatedCounter } from './AnimatedCounter';
+export { default as HelpText } from './HelpText';
+export { default as InfoTextBanner } from './InfoTextBanner';
+
+export { default as SaveAndCancelButtons } from './SaveAndCancelButtons';
+export { default as ActiveInActive } from './ActiveInActive';
+
+export { default as Portal } from './Portal/Portal';
+export type { PortalProps, PortalRef } from './Portal/Portal.types';
+
+export { default as ImageWithFallback } from './ImageWithFallback';
+export { default as NoImage } from './NoImage';
+export { default as NoImageSvg } from './NoImageSvg';
+export { default as DraggableIcon } from './DraggableIcon';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from './card';
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartStyle,
+} from './chart';
+export type { ChartConfig } from './chart';
diff --git a/admin-ui/src/modules/Auth/AuthWrapper.tsx b/admin-ui/src/modules/Auth/AuthWrapper.tsx
index 0ca03caef2..fd36558b36 100644
--- a/admin-ui/src/modules/Auth/AuthWrapper.tsx
+++ b/admin-ui/src/modules/Auth/AuthWrapper.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useMemo } from 'react';
 import useCurrentUser from '../accounts/hooks/useCurrentUser';
 import AuthContext from './AuthContext';
 import loadRoleConfig from '../common/utils/loadRoleConfig';
-import Loading from '../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import useUsersCount from '../accounts/hooks/useUsersCount';
 
 const AuthWrapper = ({ children }) => {
diff --git a/admin-ui/src/modules/accounts/components/AddressFields.tsx b/admin-ui/src/modules/accounts/components/AddressFields.tsx
index 1f5b33cdf2..2cdf2aef71 100644
--- a/admin-ui/src/modules/accounts/components/AddressFields.tsx
+++ b/admin-ui/src/modules/accounts/components/AddressFields.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
-import SaveAndCancelButtons from '../../common/components/SaveAndCancelButtons';
-import TextField from '../../forms/components/TextField';
+import SaveAndCancelButtons from '@/components/ui/SaveAndCancelButtons';
+import TextField from '@/components/ui/form/TextField';
 
 const AddressFields = ({ isEdit, address, setIsEdit }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/accounts/components/ChangePassword.tsx b/admin-ui/src/modules/accounts/components/ChangePassword.tsx
index 1841292ce5..45efbdf3f1 100644
--- a/admin-ui/src/modules/accounts/components/ChangePassword.tsx
+++ b/admin-ui/src/modules/accounts/components/ChangePassword.tsx
@@ -1,9 +1,9 @@
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import PasswordField from '../../forms/components/PasswordField';
-import SubmitButton from '../../forms/components/SubmitButton';
+import FormErrors from '@/components/ui/form/FormErrors';
+import PasswordField from '@/components/ui/form/PasswordField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useChangePassword from '../hooks/useChangePassword';
diff --git a/admin-ui/src/modules/accounts/components/CreateUserForm.tsx b/admin-ui/src/modules/accounts/components/CreateUserForm.tsx
index f2f6b84b4e..248eabfd88 100644
--- a/admin-ui/src/modules/accounts/components/CreateUserForm.tsx
+++ b/admin-ui/src/modules/accounts/components/CreateUserForm.tsx
@@ -3,13 +3,13 @@ import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import useForm from '../../forms/hooks/useForm';
 import Form from '../../forms/components/Form';
-import TextField from '../../forms/components/TextField';
-import SelectField from '../../forms/components/SelectField';
-import DatePickerField from '../../forms/components/DatePickerField';
-import EmailField from '../../forms/components/EmailField';
-import PasswordField from '../../forms/components/PasswordField';
-import SaveAndCancelButtons from '../../common/components/SaveAndCancelButtons';
-import FormErrors from '../../forms/components/FormErrors';
+import TextField from '@/components/ui/form/TextField';
+import SelectField from '@/components/ui/form/SelectField';
+import DatePickerField from '@/components/ui/form/DatePickerField';
+import EmailField from '@/components/ui/form/EmailField';
+import PasswordField from '@/components/ui/form/PasswordField';
+import SaveAndCancelButtons from '@/components/ui/SaveAndCancelButtons';
+import FormErrors from '@/components/ui/form/FormErrors';
 import { validateBirthdate } from '../../forms/lib/validators';
 
 const CreateUserForm = ({ onSubmit, onSubmitSuccess }) => {
diff --git a/admin-ui/src/modules/accounts/components/EmailAddresses.tsx b/admin-ui/src/modules/accounts/components/EmailAddresses.tsx
index e3126a239d..c6a6ebdaa0 100644
--- a/admin-ui/src/modules/accounts/components/EmailAddresses.tsx
+++ b/admin-ui/src/modules/accounts/components/EmailAddresses.tsx
@@ -2,21 +2,22 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../../gql/types';
 
 import { toast } from 'react-toastify';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useAddEmail from '../hooks/useAddEmail';
 import useRemoveEmail from '../hooks/useRemoveEmail';
 import useSendVerificationEmail from '../hooks/useSendVerificationEmail';
 import useModal from '../../modal/hooks/useModal';
 import DangerMessage from '../../modal/components/DangerMessage';
-import ActiveInActive from '../../common/components/ActiveInActive';
-import DeleteButton from '../../common/components/DeleteButton';
+import ActiveInActive from '@/components/ui/ActiveInActive';
+import Button from '@/components/ui/Button';
+import { TrashIcon } from '@heroicons/react/20/solid';
 import useAuth from '../../Auth/useAuth';
 import { CombinedGraphQLErrors } from '@apollo/client';
-import FormErrors from '../../forms/components/FormErrors';
+import FormErrors from '@/components/ui/form/FormErrors';
 
 const EmailAddresses = ({
   emails,
@@ -112,7 +113,7 @@ const EmailAddresses = ({
   });
   return (
     <div
-      className={classNames(
+      className={clsx(
         'rounded-md shadow-sm px-4 py-5 sm:p-6 bg-white dark:bg-slate-800',
         emailBodyContainer,
       )}
@@ -156,8 +157,12 @@ const EmailAddresses = ({
                   )}
 
                 {hasRole(IRoleAction.UpdateUser) && (
-                  <DeleteButton
-                    className="ml-2 inline-flex items-center rounded-full hover:bg-rose-50"
+                  <Button
+                    variant="danger"
+                    size="xs"
+                    rounded="full"
+                    icon={<TrashIcon className="h-5 w-5" />}
+                    className="ml-2"
                     onClick={() =>
                       onRemoveEmail({
                         email: address,
diff --git a/admin-ui/src/modules/accounts/components/ExportToken.tsx b/admin-ui/src/modules/accounts/components/ExportToken.tsx
index e0402c0e1d..c07ad932f8 100644
--- a/admin-ui/src/modules/accounts/components/ExportToken.tsx
+++ b/admin-ui/src/modules/accounts/components/ExportToken.tsx
@@ -1,5 +1,5 @@
 import { LinkIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import useExportToken from '../../product/hooks/useExportToken';
@@ -36,7 +36,7 @@ const ExportToken = ({ tokenId, tokenStatus, addresses = [] }) => {
           type="button"
           onClick={() => setShowModal(true)}
           disabled={tokenStatus === 'EXPORTING'}
-          className={classNames(
+          className={clsx(
             ' text-center   inline-flex truncate rounded-md border border-transparent bg-slate-950 px-5 py-1 text-base font-medium text-white shadow-xs hover:bg-slate-950 focus:outline-hidden focus:ring-2 focus:ring-slate-900 focus:ring-offset-2',
             { 'bg-slate-400 hover:bg-slate-500': tokenStatus === 'EXPORTING' },
           )}
diff --git a/admin-ui/src/modules/accounts/components/ForgotPasswordForm.tsx b/admin-ui/src/modules/accounts/components/ForgotPasswordForm.tsx
index 56c44a8a39..63d9039fad 100644
--- a/admin-ui/src/modules/accounts/components/ForgotPasswordForm.tsx
+++ b/admin-ui/src/modules/accounts/components/ForgotPasswordForm.tsx
@@ -1,10 +1,10 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import FormWrapper from '../../common/components/FormWrapper';
-import EmailField from '../../forms/components/EmailField';
+import EmailField from '@/components/ui/form/EmailField';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import SubmitButton from '../../forms/components/SubmitButton';
+import FormErrors from '@/components/ui/form/FormErrors';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useForm, {
   OnSubmitSuccessType,
   OnSubmitType,
diff --git a/admin-ui/src/modules/accounts/components/LogInForm.tsx b/admin-ui/src/modules/accounts/components/LogInForm.tsx
index 7689536e04..5c60cd964a 100644
--- a/admin-ui/src/modules/accounts/components/LogInForm.tsx
+++ b/admin-ui/src/modules/accounts/components/LogInForm.tsx
@@ -5,9 +5,9 @@ import { toast } from 'react-toastify';
 
 import FormWrapper from '../../common/components/FormWrapper';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import PasswordField from '../../forms/components/PasswordField';
-import TextField from '../../forms/components/TextField';
+import FormErrors from '@/components/ui/form/FormErrors';
+import PasswordField from '@/components/ui/form/PasswordField';
+import TextField from '@/components/ui/form/TextField';
 
 import useForm, {
   OnSubmitSuccessType,
diff --git a/admin-ui/src/modules/accounts/components/PaymentCredentialsView.tsx b/admin-ui/src/modules/accounts/components/PaymentCredentialsView.tsx
index 23bccd3804..7798c010ee 100644
--- a/admin-ui/src/modules/accounts/components/PaymentCredentialsView.tsx
+++ b/admin-ui/src/modules/accounts/components/PaymentCredentialsView.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
-import NoData from '../../common/components/NoData';
+import Badge from '@/components/ui/Badge';
+import NoData from '@/components/ui/NoData';
 
 const PaymentCredentialsView = ({ paymentCredentials }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/accounts/components/ProfileView.tsx b/admin-ui/src/modules/accounts/components/ProfileView.tsx
index 33e0de6280..d12c375f45 100644
--- a/admin-ui/src/modules/accounts/components/ProfileView.tsx
+++ b/admin-ui/src/modules/accounts/components/ProfileView.tsx
@@ -2,22 +2,22 @@ import React, { useEffect, useRef, useState } from 'react';
 import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
-import DatePickerField from '../../forms/components/DatePickerField';
+import DatePickerField from '@/components/ui/form/DatePickerField';
 import Form from '../../forms/components/Form';
-import SelectField from '../../forms/components/SelectField';
-import TextField from '../../forms/components/TextField';
+import SelectField from '@/components/ui/form/SelectField';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useUpdateUserAvatar from '../hooks/useUpdateUserAvatar';
 import useUpdateUserProfile from '../hooks/useUpdateUserProfile';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
-import SaveAndCancelButtons from '../../common/components/SaveAndCancelButtons';
+import SaveAndCancelButtons from '@/components/ui/SaveAndCancelButtons';
 import AddressFields from './AddressFields';
 import { UserCircleIcon } from '@heroicons/react/24/outline';
 
 import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
 import useCurrentUser from '../hooks/useCurrentUser';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import { validateBirthdate } from '../../forms/lib/validators';
 
 const ProfileView = ({ profile, avatar, _id }) => {
diff --git a/admin-ui/src/modules/accounts/components/RegisteredWebAuthItem.tsx b/admin-ui/src/modules/accounts/components/RegisteredWebAuthItem.tsx
index 14af50912c..1c46cb4cbc 100644
--- a/admin-ui/src/modules/accounts/components/RegisteredWebAuthItem.tsx
+++ b/admin-ui/src/modules/accounts/components/RegisteredWebAuthItem.tsx
@@ -1,7 +1,8 @@
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
-import DeleteButton from '../../common/components/DeleteButton';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import Badge from '@/components/ui/Badge';
+import Button from '@/components/ui/Button';
+import { TrashIcon } from '@heroicons/react/20/solid';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import defaultNextImageLoader from '../../common/utils/defaultNextImageLoader';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 
@@ -47,7 +48,13 @@ const RegisteredWebAuthItem = ({
           <div>{formatDateTime(created)}</div>
           {!removeDisabled && (
             <div className="align-bottom">
-              <DeleteButton onClick={() => onRemoveCredential(_id)} />
+              <Button
+                variant="danger"
+                size="xs"
+                rounded="full"
+                icon={<TrashIcon className="h-5 w-5" />}
+                onClick={() => onRemoveCredential(_id)}
+              />
             </div>
           )}
         </div>
diff --git a/admin-ui/src/modules/accounts/components/ResetPasswordForm.tsx b/admin-ui/src/modules/accounts/components/ResetPasswordForm.tsx
index c7a07e85d3..7795a9f9b8 100644
--- a/admin-ui/src/modules/accounts/components/ResetPasswordForm.tsx
+++ b/admin-ui/src/modules/accounts/components/ResetPasswordForm.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import PasswordField from '../../forms/components/PasswordField';
-import SubmitButton from '../../forms/components/SubmitButton';
+import FormErrors from '@/components/ui/form/FormErrors';
+import PasswordField from '@/components/ui/form/PasswordField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useForm, {
   OnSubmitSuccessType,
   OnSubmitType,
diff --git a/admin-ui/src/modules/accounts/components/SetPassword.tsx b/admin-ui/src/modules/accounts/components/SetPassword.tsx
index 31da118f63..2868146b15 100644
--- a/admin-ui/src/modules/accounts/components/SetPassword.tsx
+++ b/admin-ui/src/modules/accounts/components/SetPassword.tsx
@@ -4,14 +4,14 @@ import { IRoleAction } from '../../../gql/types';
 import { toast } from 'react-toastify';
 import useAuth from '../../Auth/useAuth';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import PasswordField from '../../forms/components/PasswordField';
-import SubmitButton from '../../forms/components/SubmitButton';
+import FormErrors from '@/components/ui/form/FormErrors';
+import PasswordField from '@/components/ui/form/PasswordField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useSendEnrollmentEmail from '../../enrollment/hooks/useSendEnrollmentEmail';
 
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useSetPassword from '../hooks/useSetPassword';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import { CombinedGraphQLErrors } from '@apollo/client';
 
 const SetPassword = ({ userId, isInitialPassword, primaryEmail }) => {
diff --git a/admin-ui/src/modules/accounts/components/SignUpForm.tsx b/admin-ui/src/modules/accounts/components/SignUpForm.tsx
index fde5097a8e..35f0a2f17b 100644
--- a/admin-ui/src/modules/accounts/components/SignUpForm.tsx
+++ b/admin-ui/src/modules/accounts/components/SignUpForm.tsx
@@ -1,15 +1,15 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import FormWrapper from '../../common/components/FormWrapper';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import PasswordField from '../../forms/components/PasswordField';
-import TextField from '../../forms/components/TextField';
+import FormErrors from '@/components/ui/form/FormErrors';
+import PasswordField from '@/components/ui/form/PasswordField';
+import TextField from '@/components/ui/form/TextField';
 
 import useForm from '../../forms/hooks/useForm';
-import Toggle from '../../common/components/Toggle';
+import Toggle from '@/components/ui/Toggle';
 import { useEffect, useState } from 'react';
 const SignUpForm = ({
   onSubmit,
diff --git a/admin-ui/src/modules/accounts/components/SignWeb3AddressForm.tsx b/admin-ui/src/modules/accounts/components/SignWeb3AddressForm.tsx
index 5f583745eb..c4289d0df5 100644
--- a/admin-ui/src/modules/accounts/components/SignWeb3AddressForm.tsx
+++ b/admin-ui/src/modules/accounts/components/SignWeb3AddressForm.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage, useIntl } from 'react-intl';
-import CopyableText from '../../common/components/CopyableText';
+import CopyableText from '@/components/ui/CopyableText';
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
-import MarkdownTextAreaField from '../../forms/components/MarkdownTextAreaField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import MarkdownTextAreaField from '@/components/ui/form/MarkdownTextAreaField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useVerifyWeb3Address from '../hooks/useVerifyWeb3Address';
 
diff --git a/admin-ui/src/modules/accounts/components/UserEnrollments.tsx b/admin-ui/src/modules/accounts/components/UserEnrollments.tsx
index 21a26a1508..18b496b6ce 100644
--- a/admin-ui/src/modules/accounts/components/UserEnrollments.tsx
+++ b/admin-ui/src/modules/accounts/components/UserEnrollments.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import SearchField from '../../common/components/SearchField';
+import SearchField from '@/components/ui/SearchField';
 import EnrollmentList from '../../enrollment/components/EnrollmentList';
 import useUserEnrollments from '../../enrollment/hooks/useUserEnrollments';
 
diff --git a/admin-ui/src/modules/accounts/components/UserExport.tsx b/admin-ui/src/modules/accounts/components/UserExport.tsx
index 09979aa1ea..ee39b46362 100644
--- a/admin-ui/src/modules/accounts/components/UserExport.tsx
+++ b/admin-ui/src/modules/accounts/components/UserExport.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import { useIntl } from 'react-intl';
 import { useUserExport } from '../hooks/useUserExport';
 import ExportOptionsForm, {
diff --git a/admin-ui/src/modules/accounts/components/UserFilter.tsx b/admin-ui/src/modules/accounts/components/UserFilter.tsx
index 1288d6e6a9..6b1d76912c 100644
--- a/admin-ui/src/modules/accounts/components/UserFilter.tsx
+++ b/admin-ui/src/modules/accounts/components/UserFilter.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
-import DateInputField from '../../common/components/DateInput';
+import DateInputField from '@/components/ui/DateInput';
 
 const UserFilter: React.FC = () => {
   const { parseDate } = useFormatDateTime();
diff --git a/admin-ui/src/modules/accounts/components/UserListItem.tsx b/admin-ui/src/modules/accounts/components/UserListItem.tsx
index f60890d12f..3478119afc 100644
--- a/admin-ui/src/modules/accounts/components/UserListItem.tsx
+++ b/admin-ui/src/modules/accounts/components/UserListItem.tsx
@@ -3,7 +3,7 @@ import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import MiniUserAvatar from '../../common/components/MiniUserAvatar';
 import Table from '../../common/components/Table';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
@@ -13,7 +13,7 @@ import useAuth from '../../Auth/useAuth';
 import useModal from '../../modal/hooks/useModal';
 import DangerMessage from '../../modal/components/DangerMessage';
 import useDeleteUser from '../hooks/useDeleteUser';
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import { ShoppingBagIcon, ShoppingCartIcon } from '@heroicons/react/24/outline';
 
 const UserLastLogin = ({ lastLogin }) => {
diff --git a/admin-ui/src/modules/accounts/components/UserNameView.tsx b/admin-ui/src/modules/accounts/components/UserNameView.tsx
index 024a41d346..16bd1afcb1 100644
--- a/admin-ui/src/modules/accounts/components/UserNameView.tsx
+++ b/admin-ui/src/modules/accounts/components/UserNameView.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { IRoleAction } from '../../../gql/types';
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useIntl } from 'react-intl';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import TextField from '../../forms/components/TextField';
+import FormErrors from '@/components/ui/form/FormErrors';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useSetUserName from '../hooks/useSetUsername';
 import useAuth from '../../Auth/useAuth';
@@ -74,7 +74,7 @@ const UserNameView = ({ _id: userId, username }) => {
                   data-id="cancel_update"
                   onClick={() => setIsEdit(!isEdit)}
                   type="button"
-                  className={classNames(
+                  className={clsx(
                     isEdit ? '' : 'focus:ring-slate-800',
                     'inline-flex items-center rounded-md border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-200 shadow-xs hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-hidden focus:ring-2 focus:ring-slate-800 dark:focus:ring-slate-400 focus:ring-offset-2',
                   )}
diff --git a/admin-ui/src/modules/accounts/components/UserOrders.tsx b/admin-ui/src/modules/accounts/components/UserOrders.tsx
index c7cb67ad31..4c06b2dc4a 100644
--- a/admin-ui/src/modules/accounts/components/UserOrders.tsx
+++ b/admin-ui/src/modules/accounts/components/UserOrders.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { useRouter } from 'next/router';
-import SearchField from '../../common/components/SearchField';
+import SearchField from '@/components/ui/SearchField';
 import OrderList from '../../order/components/OrderList';
 
 import useUserOrders from '../../order/hooks/useUserOrders';
 import { convertSortFieldsToQueryFormat } from '../../common/utils/utils';
-import Toggle from '../../common/components/Toggle';
+import Toggle from '@/components/ui/Toggle';
 import { useIntl } from 'react-intl';
 
 const UserOrders = ({ _id: userId }) => {
diff --git a/admin-ui/src/modules/accounts/components/UserProductReviews.tsx b/admin-ui/src/modules/accounts/components/UserProductReviews.tsx
index b6e19a5b04..bf24f36ce7 100644
--- a/admin-ui/src/modules/accounts/components/UserProductReviews.tsx
+++ b/admin-ui/src/modules/accounts/components/UserProductReviews.tsx
@@ -1,6 +1,6 @@
 import useUserProductReviews from '../../product-review/hooks/useUserProductReviews';
 import ProductReviewsList from '../../product-review/components/ProductReviewsList';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import { useIntl } from 'react-intl';
 
 const UserProductReviews = ({ _id }) => {
diff --git a/admin-ui/src/modules/accounts/components/UserQuotations.tsx b/admin-ui/src/modules/accounts/components/UserQuotations.tsx
index a1b62ab2d8..ddb276c195 100644
--- a/admin-ui/src/modules/accounts/components/UserQuotations.tsx
+++ b/admin-ui/src/modules/accounts/components/UserQuotations.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
-import Loading from '../../common/components/Loading';
-import SearchField from '../../common/components/SearchField';
+import Loading from '@/components/ui/Loading';
+import SearchField from '@/components/ui/SearchField';
 import QuotationList from '../../quotation/components/QuotationList';
 import useUserQuotations from '../../quotation/hooks/useUserQuotations';
 
diff --git a/admin-ui/src/modules/accounts/components/UserRolesView.tsx b/admin-ui/src/modules/accounts/components/UserRolesView.tsx
index 061350bc89..e6998a23e9 100644
--- a/admin-ui/src/modules/accounts/components/UserRolesView.tsx
+++ b/admin-ui/src/modules/accounts/components/UserRolesView.tsx
@@ -3,11 +3,11 @@ import { IRoleAction } from '../../../gql/types';
 
 import useAuth from '../../Auth/useAuth';
 import useSystemRoles from '../../common/hooks/useSystemRoles';
-import ChoicesField from '../../forms/components/ChoicesField';
+import ChoicesField from '@/components/ui/form/ChoicesField';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
+import FormErrors from '@/components/ui/form/FormErrors';
 
-import SubmitButton from '../../forms/components/SubmitButton';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 
 import useSetRoles from '../hooks/useSetRoles';
diff --git a/admin-ui/src/modules/accounts/components/UserSettings.tsx b/admin-ui/src/modules/accounts/components/UserSettings.tsx
index 1bbc7b13b9..4b2770031a 100644
--- a/admin-ui/src/modules/accounts/components/UserSettings.tsx
+++ b/admin-ui/src/modules/accounts/components/UserSettings.tsx
@@ -15,8 +15,8 @@ import { IRoleAction } from '../../../gql/types';
 
 import DisplayExtendedFields from '../../common/components/DisplayExtendedFields';
 import DisplayUserLastLogs from '../../common/components/DisplayUserLastLogs';
-import Loading from '../../common/components/Loading';
-import Tab from '../../common/components/Tab';
+import Loading from '@/components/ui/Loading';
+import Tab from '@/components/ui/Tab';
 import UserProductReviews from './UserProductReviews';
 import AccountView from './AccountView';
 import PaymentCredentialsView from './PaymentCredentialsView';
diff --git a/admin-ui/src/modules/accounts/components/UserTagsView.tsx b/admin-ui/src/modules/accounts/components/UserTagsView.tsx
index a46695ec52..cbabc80104 100644
--- a/admin-ui/src/modules/accounts/components/UserTagsView.tsx
+++ b/admin-ui/src/modules/accounts/components/UserTagsView.tsx
@@ -1,7 +1,7 @@
 import useSetUserTags from '../hooks/useSetUserTags';
 import { IRoleAction } from '../../../gql/types';
 
-import TagList from '../../common/components/TagList';
+import TagList from '@/components/ui/Tag/TagList';
 import useAuth from '../../Auth/useAuth';
 import useApp from '../../common/hooks/useApp';
 
diff --git a/admin-ui/src/modules/accounts/components/UserTokens.tsx b/admin-ui/src/modules/accounts/components/UserTokens.tsx
index df2fd1a4b9..4453a1043b 100644
--- a/admin-ui/src/modules/accounts/components/UserTokens.tsx
+++ b/admin-ui/src/modules/accounts/components/UserTokens.tsx
@@ -1,11 +1,11 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 
-import Badge from '../../common/components/Badge';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
-import Loading from '../../common/components/Loading';
+import Badge from '@/components/ui/Badge';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
+import Loading from '@/components/ui/Loading';
 
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import defaultNextImageLoader from '../../common/utils/defaultNextImageLoader';
 import generateUniqueId from '../../common/utils/getUniqueId';
 import shortenAddress from '../../common/utils/shortAddress';
diff --git a/admin-ui/src/modules/accounts/components/UserWebAuthCredentials.tsx b/admin-ui/src/modules/accounts/components/UserWebAuthCredentials.tsx
index 61895fecf4..3d25db46f4 100644
--- a/admin-ui/src/modules/accounts/components/UserWebAuthCredentials.tsx
+++ b/admin-ui/src/modules/accounts/components/UserWebAuthCredentials.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
@@ -88,7 +88,7 @@ const UserWebAuthCredentials = ({ userId }) => {
       <button
         type="button"
         disabled={userId !== currentUser?._id}
-        className={classNames(
+        className={clsx(
           'inline-flex cursor-pointer ml-4 justify-center rounded-md border border-transparent px-4 py-2 text-center text-sm font-medium leading-5 text-white shadow-xs focus:ring-slate-800 bg-slate-800 hover:bg-slate-950 focus:outline-hidden focus:ring-2 focus:ring-offset-2',
           {
             'focus:ring-slate-300 bg-slate-400 hover:bg-slate-300':
diff --git a/admin-ui/src/modules/accounts/components/Web3Addresses.tsx b/admin-ui/src/modules/accounts/components/Web3Addresses.tsx
index 5709a20207..a9debd08b1 100644
--- a/admin-ui/src/modules/accounts/components/Web3Addresses.tsx
+++ b/admin-ui/src/modules/accounts/components/Web3Addresses.tsx
@@ -2,14 +2,15 @@ import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useModal from '../../modal/hooks/useModal';
 import DangerMessage from '../../modal/components/DangerMessage';
 
-import ActiveInActive from '../../common/components/ActiveInActive';
-import DeleteButton from '../../common/components/DeleteButton';
+import ActiveInActive from '@/components/ui/ActiveInActive';
+import Button from '@/components/ui/Button';
+import { TrashIcon } from '@heroicons/react/20/solid';
 import useRemoveWeb3Address from '../hooks/useRemoveWeb3Address';
 import useAddWeb3Address from '../hooks/useAddWeb3Address';
 import SignWeb3AddressForm from './SignWeb3AddressForm';
@@ -111,9 +112,13 @@ const Web3Addresses = ({ web3Addresses }) => {
                   </a>
                 )}
 
-                <DeleteButton
+                <Button
+                  variant="danger"
+                  size="xs"
+                  rounded="full"
+                  icon={<TrashIcon className="h-5 w-5" />}
                   onClick={() => onRemoveWeb3Address({ address })}
-                  className="ml-2 inline-flex items-center rounded-full bg-white hover:bg-rose-50"
+                  className="ml-2"
                 />
               </div>
             </div>
diff --git a/admin-ui/src/modules/assortment/components/AssortmentDetail.tsx b/admin-ui/src/modules/assortment/components/AssortmentDetail.tsx
index 9decf96672..66c0767a9e 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentDetail.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentDetail.tsx
@@ -14,8 +14,9 @@ import { toast } from 'react-toastify';
 import { useRouter } from 'next/router';
 import LocaleWrapper from '../../common/components/LocaleWrapper';
 import SelectOptions from '../../common/components/SelectOptions';
-import HeaderDeleteButton from '../../common/components/HeaderDeleteButton';
-import ErrorBoundary from '../../common/components/ErrorBoundary';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import ErrorBoundary from '@/components/ui/ErrorBoundary';
 import DangerMessage from '../../modal/components/DangerMessage';
 import useRemoveAssortment from '../hooks/useRemoveAssortment';
 import AssortmentTextForm from './AssortmentTextForm';
@@ -24,8 +25,8 @@ import AssortmentLinks from './AssortmentLinks';
 import AssortmentProducts from './AssortmentProducts';
 import AssortmentFilters from './AssortmentFilters';
 import useUpdateAssortment from '../hooks/useUpdateAssortment';
-import Tab from '../../common/components/Tab';
-import TagList from '../../common/components/TagList';
+import Tab from '@/components/ui/Tab';
+import TagList from '@/components/ui/Tag/TagList';
 import useAuth from '../../Auth/useAuth';
 import useModal from '../../modal/hooks/useModal';
 import DisplayExtendedFields from '../../common/components/DisplayExtendedFields';
@@ -361,7 +362,12 @@ const AssortmentDetail = ({
               })}
             />
             {hasRole(IRoleAction.ManageAssortments) && (
-              <HeaderDeleteButton onClick={handleDeleteAssortment} />
+              <Button
+                variant="danger"
+                icon={<XMarkIcon className="h-5 w-5" />}
+                text="Delete"
+                onClick={handleDeleteAssortment}
+              />
             )}
           </div>
         )}
diff --git a/admin-ui/src/modules/assortment/components/AssortmentExport.tsx b/admin-ui/src/modules/assortment/components/AssortmentExport.tsx
index 1b67f89eb9..bcbdaad0ef 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentExport.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentExport.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import { useIntl } from 'react-intl';
 import { useAssortmentExport } from '../hooks/useAssortmentExport';
 import useAssortmentsCount from '../hooks/useAssortmentsCount';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentFilters.tsx b/admin-ui/src/modules/assortment/components/AssortmentFilters.tsx
index 41ce333af0..9066bd81f1 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentFilters.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentFilters.tsx
@@ -18,7 +18,7 @@ import useAssortmentFilters from '../hooks/useAssortmentFilters';
 import useRemoveAssortmentFilter from '../hooks/useRemoveAssortmentFilter';
 import AssortmentFiltersList from './AssortmentFiltersList';
 import AssortmentFiltersForm from './AssortmentFiltersForm';
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import useReorderAssortmentFilters from '../hooks/useReorderAssortmentFilters';
 import SelfDocumentingView from '../../common/components/SelfDocumentingView';
 import useAuth from '../../Auth/useAuth';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentFiltersForm.tsx b/admin-ui/src/modules/assortment/components/AssortmentFiltersForm.tsx
index 7f70245f79..3c37a0ddc1 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentFiltersForm.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentFiltersForm.tsx
@@ -4,18 +4,18 @@ import { IRoleAction } from '../../../gql/types';
 import { useIntl } from 'react-intl';
 
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 
 import useAddAssortmentFilter from '../hooks/useAddAssortmentFilter';
 
 import FilterableDropdown from '../../common/components/FilterableDropdown';
 
-import TagInputField from '../../forms/components/TagInputField';
+import TagInputField from '@/components/ui/form/TagInputField';
 
 import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
-import FormErrors from '../../forms/components/FormErrors';
+import FormErrors from '@/components/ui/form/FormErrors';
 import useFilters from '../../filter/hooks/useFilters';
 import { ISortDirection } from '../../../gql/types';
 
diff --git a/admin-ui/src/modules/assortment/components/AssortmentFiltersList.tsx b/admin-ui/src/modules/assortment/components/AssortmentFiltersList.tsx
index dce8bfe057..b7a5d10327 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentFiltersList.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentFiltersList.tsx
@@ -4,7 +4,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import AssortmentFiltersListItem from './AssortmentFiltersListItem';
 import { IFilter } from '../../../gql/types';
 
diff --git a/admin-ui/src/modules/assortment/components/AssortmentFiltersListItem.tsx b/admin-ui/src/modules/assortment/components/AssortmentFiltersListItem.tsx
index 9fa2c8bb05..37766acd34 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentFiltersListItem.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentFiltersListItem.tsx
@@ -4,8 +4,8 @@ import { IRoleAction } from '../../../gql/types';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-import Badge from '../../common/components/Badge';
-import DraggableIcon from '../../common/components/DraggableIcon';
+import Badge from '@/components/ui/Badge';
+import DraggableIcon from '@/components/ui/DraggableIcon';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 import useAuth from '../../Auth/useAuth';
 import Link from 'next/link';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentForm.tsx b/admin-ui/src/modules/assortment/components/AssortmentForm.tsx
index 3c3169a3eb..7fd1c56ff9 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentForm.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentForm.tsx
@@ -2,12 +2,12 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../../gql/types';
 
 import useAuth from '../../Auth/useAuth';
-import Toggle from '../../common/components/Toggle';
+import Toggle from '@/components/ui/Toggle';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TagInputField from '../../forms/components/TagInputField';
-import TextField from '../../forms/components/TextField';
+import FormErrors from '@/components/ui/form/FormErrors';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TagInputField from '@/components/ui/form/TagInputField';
+import TextField from '@/components/ui/form/TextField';
 import useForm from '../../forms/hooks/useForm';
 import useApp from '../../common/hooks/useApp';
 
diff --git a/admin-ui/src/modules/assortment/components/AssortmentGraphView.tsx b/admin-ui/src/modules/assortment/components/AssortmentGraphView.tsx
index e2400a99f3..d1d2126f81 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentGraphView.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentGraphView.tsx
@@ -1,4 +1,4 @@
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import AssortmentGraph from './AssortmentGraph';
 import useAssortmentChildren from '../hooks/useAssortmentChildren';
 import useApp from '../../common/hooks/useApp';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentImageGallery.tsx b/admin-ui/src/modules/assortment/components/AssortmentImageGallery.tsx
index 8689006906..f76a7a7486 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentImageGallery.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentImageGallery.tsx
@@ -1,4 +1,4 @@
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import { IAssortmentMediaFragment } from '../../../gql/types';
 
 interface AssortmentImageGalleryProps {
diff --git a/admin-ui/src/modules/assortment/components/AssortmentImport.tsx b/admin-ui/src/modules/assortment/components/AssortmentImport.tsx
index fc2488807b..0a0ec75da4 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentImport.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentImport.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import useAuth from '../../Auth/useAuth';
 import useModal from '../../modal/hooks/useModal';
 import { useCSVImport } from '../../common/hooks/useCSVImport';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentImportForm.tsx b/admin-ui/src/modules/assortment/components/AssortmentImportForm.tsx
index 8140e287b6..2fdbb1bdda 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentImportForm.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentImportForm.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import parseCSV from 'papaparse';
 import { useIntl } from 'react-intl';
 import { CSVRow, downloadCSV } from '../../common/utils/csvUtils';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentLinkForm.tsx b/admin-ui/src/modules/assortment/components/AssortmentLinkForm.tsx
index 7ba29dac63..909cc32d80 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentLinkForm.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentLinkForm.tsx
@@ -4,14 +4,14 @@ import { IRoleAction } from '../../../gql/types';
 import { useIntl } from 'react-intl';
 
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useAddAssortmentLink from '../hooks/useAddAssortmentLink';
 import FilterableDropdown from '../../common/components/FilterableDropdown';
-import TagInputField from '../../forms/components/TagInputField';
+import TagInputField from '@/components/ui/form/TagInputField';
 import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
-import FormErrors from '../../forms/components/FormErrors';
+import FormErrors from '@/components/ui/form/FormErrors';
 import useAssortments from '../hooks/useAssortments';
 import useAssortmentPaths from '../hooks/useAssortmentPaths';
 import { ISortDirection } from '../../../gql/types';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentLinks.tsx b/admin-ui/src/modules/assortment/components/AssortmentLinks.tsx
index 73141acd32..0ebfb375f7 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentLinks.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentLinks.tsx
@@ -12,7 +12,7 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import DangerMessage from '../../modal/components/DangerMessage';
 import useModal from '../../modal/hooks/useModal';
 import useAssortmentLinks from '../hooks/useAssortmentLinks';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentLinksList.tsx b/admin-ui/src/modules/assortment/components/AssortmentLinksList.tsx
index a1afecdf37..91a13b65a3 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentLinksList.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentLinksList.tsx
@@ -3,7 +3,7 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import AssortmentLinksListItem from './AssortmentLinksListItem';
 import { IAssortmentLink } from '../../../gql/types';
 
diff --git a/admin-ui/src/modules/assortment/components/AssortmentLinksListItem.tsx b/admin-ui/src/modules/assortment/components/AssortmentLinksListItem.tsx
index 0e10337143..354d933a47 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentLinksListItem.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentLinksListItem.tsx
@@ -2,8 +2,8 @@ import { useSortable } from '@dnd-kit/sortable';
 import { IRoleAction } from '../../../gql/types';
 
 import { CSS } from '@dnd-kit/utilities';
-import Badge from '../../common/components/Badge';
-import DraggableIcon from '../../common/components/DraggableIcon';
+import Badge from '@/components/ui/Badge';
+import DraggableIcon from '@/components/ui/DraggableIcon';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 import generateUniqueId from '../../common/utils/getUniqueId';
 import useAuth from '../../Auth/useAuth';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentListItem.tsx b/admin-ui/src/modules/assortment/components/AssortmentListItem.tsx
index 73a8524546..04ffef04a6 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentListItem.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentListItem.tsx
@@ -3,7 +3,7 @@ import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import MediaAvatar from '../../common/components/MediaAvatar';
 import Table from '../../common/components/Table';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentListView.tsx b/admin-ui/src/modules/assortment/components/AssortmentListView.tsx
index 1aff6245fd..a62831e8b0 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentListView.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentListView.tsx
@@ -1,4 +1,4 @@
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import InfiniteScroll from '../../common/components/InfiniteScroll';
 import { convertSortFieldsToQueryFormat } from '../../common/utils/utils';
 import useAssortments from '../hooks/useAssortments';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentMediaList.tsx b/admin-ui/src/modules/assortment/components/AssortmentMediaList.tsx
index 6c6f29ead5..9c58f12678 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentMediaList.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentMediaList.tsx
@@ -4,7 +4,7 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import AssortmentMediaListItem from './AssortmentMediaListItem';
 import { IAssortmentMedia } from '../../../gql/types';
 import useApp from '../../common/hooks/useApp';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentProductForm.tsx b/admin-ui/src/modules/assortment/components/AssortmentProductForm.tsx
index 3011fccd4f..6f59a0640a 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentProductForm.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentProductForm.tsx
@@ -4,12 +4,12 @@ import { IRoleAction } from '../../../gql/types';
 import { useIntl } from 'react-intl';
 
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 
 import useAddAssortmentProduct from '../hooks/useAddAssortmentProduct';
 import FilterableDropdown from '../../common/components/FilterableDropdown';
-import TagInputField from '../../forms/components/TagInputField';
+import TagInputField from '@/components/ui/form/TagInputField';
 import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
 import useProducts from '../../product/hooks/useProducts';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentProductList.tsx b/admin-ui/src/modules/assortment/components/AssortmentProductList.tsx
index ea74526b25..e057687e1c 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentProductList.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentProductList.tsx
@@ -3,7 +3,7 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import AssortmentProductListItem from './AssortmentProductListItem';
 import { IProduct } from '../../../gql/types';
 
diff --git a/admin-ui/src/modules/assortment/components/AssortmentProductListItem.tsx b/admin-ui/src/modules/assortment/components/AssortmentProductListItem.tsx
index 566334d8a5..ab9a2a2250 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentProductListItem.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentProductListItem.tsx
@@ -3,8 +3,8 @@ import { IRoleAction } from '../../../gql/types';
 
 import { CSS } from '@dnd-kit/utilities';
 
-import Badge from '../../common/components/Badge';
-import DraggableIcon from '../../common/components/DraggableIcon';
+import Badge from '@/components/ui/Badge';
+import DraggableIcon from '@/components/ui/DraggableIcon';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 import generateUniqueId from '../../common/utils/getUniqueId';
 import useAuth from '../../Auth/useAuth';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentProducts.tsx b/admin-ui/src/modules/assortment/components/AssortmentProducts.tsx
index 307d9dfcc0..2e7495d747 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentProducts.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentProducts.tsx
@@ -19,7 +19,7 @@ import useAssortmentProducts from '../hooks/useAssortmentProducts';
 import useRemoveAssortmentProduct from '../hooks/useRemoveAssortmentProduct';
 import AssortmentProductForm from './AssortmentProductForm';
 import AssortmentProductList from './AssortmentProductList';
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import useReorderAssortmentProducts from '../hooks/useReorderAssortmentProducts';
 import SelfDocumentingView from '../../common/components/SelfDocumentingView';
 import useAuth from '../../Auth/useAuth';
diff --git a/admin-ui/src/modules/assortment/components/AssortmentTextForm.tsx b/admin-ui/src/modules/assortment/components/AssortmentTextForm.tsx
index 383485a557..4217cc2ac5 100644
--- a/admin-ui/src/modules/assortment/components/AssortmentTextForm.tsx
+++ b/admin-ui/src/modules/assortment/components/AssortmentTextForm.tsx
@@ -5,8 +5,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import Form from '../../forms/components/Form';
 
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 
 import useTranslatedAssortmentTexts from '../hooks/useTranslatedAssortmentTexts';
@@ -14,7 +14,7 @@ import useUpdateAssortmentTexts from '../hooks/useUpdateAssortmentTexts';
 import SelfDocumentingView from '../../common/components/SelfDocumentingView';
 import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
-import MarkdownTextAreaField from '../../forms/components/MarkdownTextAreaField';
+import MarkdownTextAreaField from '@/components/ui/form/MarkdownTextAreaField';
 import useApp from '../../common/hooks/useApp';
 import useShopInfo from '../../common/hooks/useShopInfo';
 
diff --git a/admin-ui/src/modules/assortment/components/TangleTree.tsx b/admin-ui/src/modules/assortment/components/TangleTree.tsx
index a75331a0ae..b6195756d3 100644
--- a/admin-ui/src/modules/assortment/components/TangleTree.tsx
+++ b/admin-ui/src/modules/assortment/components/TangleTree.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { ArrowLeftIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import constructTangleLayout from '../utils/contructTangleLayout';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import generateUniqueId from '../../common/utils/getUniqueId';
 
 const color = scaleOrdinal(schemeDark2);
diff --git a/admin-ui/src/modules/common/components/DashboardShortcutCard.tsx b/admin-ui/src/modules/common/components/DashboardShortcutCard.tsx
index 806efb6f6f..99e1f808ed 100644
--- a/admin-ui/src/modules/common/components/DashboardShortcutCard.tsx
+++ b/admin-ui/src/modules/common/components/DashboardShortcutCard.tsx
@@ -4,7 +4,7 @@ import { IRoleAction } from '../../../gql/types';
 import { useRouter } from 'next/router';
 import { PlusIcon } from '@heroicons/react/24/outline';
 import { useIntl } from 'react-intl';
-import Button from './Button';
+import Button from '@/components/ui/Button';
 import useAuth from '../../Auth/useAuth';
 
 const DashboardShortcutCard = () => {
diff --git a/admin-ui/src/modules/common/components/DeleteButton.tsx b/admin-ui/src/modules/common/components/DeleteButton.tsx
deleted file mode 100644
index b5f042c6e9..0000000000
--- a/admin-ui/src/modules/common/components/DeleteButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { TrashIcon } from '@heroicons/react/20/solid';
-import classNames from 'classnames';
-import { useIntl } from 'react-intl';
-
-const DeleteButton = ({
-  onClick,
-  className: classes = '',
-  icon = null,
-  textRight = '',
-  textLeft = '',
-  ariaLabel = '',
-}) => {
-  const { formatMessage } = useIntl();
-  return (
-    <button
-      aria-label={
-        ariaLabel || formatMessage({ id: 'delete', defaultMessage: 'Delete' })
-      }
-      id="delete_button"
-      type="button"
-      onClick={onClick}
-      className={classNames(
-        'flex justify-center items-center rounded-full dark:bg-slate-800 p-2 w-8 h-8 text-sm text-rose-500 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 focus:outline-hidden focus:ring-2 focus:ring-rose-500 focus:ring-offset-2',
-        classes,
-      )}
-    >
-      {textLeft || ''}
-      {icon || <TrashIcon className="h-5 w-5" />}
-      {textRight || ''}
-    </button>
-  );
-};
-
-export default DeleteButton;
diff --git a/admin-ui/src/modules/common/components/DisplayExtendedFields.tsx b/admin-ui/src/modules/common/components/DisplayExtendedFields.tsx
index 0c5ee2d244..a0ca01c3a1 100644
--- a/admin-ui/src/modules/common/components/DisplayExtendedFields.tsx
+++ b/admin-ui/src/modules/common/components/DisplayExtendedFields.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 import useFormatDateTime from '../utils/useFormatDateTime';
-import ImageWithFallback from './ImageWithFallback';
-import Toggle from './Toggle';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
+import Toggle from '@/components/ui/Toggle';
 
 const isBoolean = (value) => {
   try {
diff --git a/admin-ui/src/modules/common/components/EditIcon.tsx b/admin-ui/src/modules/common/components/EditIcon.tsx
deleted file mode 100644
index 7d17cca94c..0000000000
--- a/admin-ui/src/modules/common/components/EditIcon.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { PencilSquareIcon } from '@heroicons/react/20/solid';
-
-const EditIcon = () => {
-  return (
-    <div
-      id="edit__icon_button"
-      className="rounded-full dark:bg-slate-800 dark:hover:bg-slate-600 p-2 text-sm text-slate-900 dark:text-slate-200 hover:bg-transparent focus:outline-hidden focus:ring-0 focus:ring-rose-500 focus:ring-offset-2"
-    >
-      <PencilSquareIcon className="h-5 w-5" />
-    </div>
-  );
-};
-
-export default EditIcon;
diff --git a/admin-ui/src/modules/common/components/ExportOptionsForm.tsx b/admin-ui/src/modules/common/components/ExportOptionsForm.tsx
index f81411b679..b06dd5f74f 100644
--- a/admin-ui/src/modules/common/components/ExportOptionsForm.tsx
+++ b/admin-ui/src/modules/common/components/ExportOptionsForm.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import Form from '../../forms/components/Form';
-import CheckboxField from '../../forms/components/CheckboxField';
+import CheckboxField from '@/components/ui/form/CheckboxField';
 import useForm from '../../forms/hooks/useForm';
-import SubmitButton from '../../forms/components/SubmitButton';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import { useIntl } from 'react-intl';
 
 export type ExportOption = {
diff --git a/admin-ui/src/modules/common/components/FilterableDropdown.tsx b/admin-ui/src/modules/common/components/FilterableDropdown.tsx
index 09b6aeefde..0d00065604 100644
--- a/admin-ui/src/modules/common/components/FilterableDropdown.tsx
+++ b/admin-ui/src/modules/common/components/FilterableDropdown.tsx
@@ -1,7 +1,7 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
-import FieldWrapper from '../../forms/components/FieldWrapper';
-import { TextFieldProps } from '../../forms/components/TextField';
+import FieldWrapper from '@/components/ui/form/FieldWrapper';
+import { TextFieldProps } from '@/components/ui/form/TextField';
 import useField from '../../forms/hooks/useField';
 import deBounce from '../utils/deBounce';
 import UnchainedSelect from './UnchainedSelect';
@@ -31,10 +31,7 @@ const FilterableDropdown = ({
     <div className="relative flex flex-col items-center">
       <div className="w-full">
         <div
-          className={classNames(
-            'my-2 flex items-center rounded-sm',
-            props.className,
-          )}
+          className={clsx('my-2 flex items-center rounded-sm', props.className)}
         >
           <div className="w-full">
             <FieldWrapper {...field}>
diff --git a/admin-ui/src/modules/common/components/FormWrapper.tsx b/admin-ui/src/modules/common/components/FormWrapper.tsx
index ffcc4dd2bf..2f5ced9640 100644
--- a/admin-ui/src/modules/common/components/FormWrapper.tsx
+++ b/admin-ui/src/modules/common/components/FormWrapper.tsx
@@ -1,5 +1,5 @@
 import React, { createContext } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 export const FormWrapperContext = createContext(false);
 
@@ -8,7 +8,7 @@ const FormWrapper = ({ children, className = '' }) => {
     <FormWrapperContext.Provider value={true}>
       <div className="sm:max-w-full">
         <div
-          className={classNames(
+          className={clsx(
             'bg-white dark:bg-slate-800 rounded-md shadow-sm overflow-hidden',
             className,
           )}
diff --git a/admin-ui/src/modules/common/components/HeaderDeleteButton.tsx b/admin-ui/src/modules/common/components/HeaderDeleteButton.tsx
deleted file mode 100644
index 9554fb0896..0000000000
--- a/admin-ui/src/modules/common/components/HeaderDeleteButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import { useIntl } from 'react-intl';
-
-const HeaderDeleteButton = ({ onClick, text = null, Icon = null }) => {
-  const { formatMessage } = useIntl();
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-describedby="header-delete-button"
-      className="inline-flex items-center gap-2 justify-center rounded-md border border-rose-500 px-4 py-2 text-sm font-medium leading-5 text-rose-600 dark:text-rose-200 shadow-sm hover:border-rose-600 hover:bg-rose-600 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 h-[38px]"
-    >
-      <span>{Icon || <XMarkIcon className="h-5 w-5" />}</span>
-      {text ||
-        formatMessage({
-          id: 'delete',
-          defaultMessage: 'Delete',
-        })}
-    </button>
-  );
-};
-
-export default HeaderDeleteButton;
diff --git a/admin-ui/src/modules/common/components/InfiniteScroll.tsx b/admin-ui/src/modules/common/components/InfiniteScroll.tsx
index eaf56cf605..dac34f3071 100644
--- a/admin-ui/src/modules/common/components/InfiniteScroll.tsx
+++ b/admin-ui/src/modules/common/components/InfiniteScroll.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useCallback } from 'react';
-import Loading from './Loading';
+import Loading from '@/components/ui/Loading';
 
 interface InfiniteScrollProps {
   loading: boolean;
diff --git a/admin-ui/src/modules/common/components/Layout.tsx b/admin-ui/src/modules/common/components/Layout.tsx
index 433794e4d9..304e183dcf 100644
--- a/admin-ui/src/modules/common/components/Layout.tsx
+++ b/admin-ui/src/modules/common/components/Layout.tsx
@@ -25,7 +25,7 @@ import SideNav from './SideNav';
 import ThemeToggle from './ThemeToggle';
 import LanguageToggle from './LanguageToggle';
 import useOutsideClick from '../hooks/useOutsideClick';
-import ImageWithFallback from './ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import AuthWrapper from '../../Auth/AuthWrapper';
 import formatUsername from '../utils/formatUsername';
 import { useApolloClient } from '@apollo/client/react';
diff --git a/admin-ui/src/modules/common/components/MediaAvatar.tsx b/admin-ui/src/modules/common/components/MediaAvatar.tsx
index 84a8d43e84..562f332a63 100644
--- a/admin-ui/src/modules/common/components/MediaAvatar.tsx
+++ b/admin-ui/src/modules/common/components/MediaAvatar.tsx
@@ -1,12 +1,12 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useIntl } from 'react-intl';
-import ImageWithFallback from './ImageWithFallback';
-import NoImage from './NoImage';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
+import NoImage from '@/components/ui/NoImage';
 
 const MediaAvatar = ({ file, className = '' }) => {
   const { formatMessage } = useIntl();
   return (
-    <div className={classNames('h-10 w-10 shrink-0', className)}>
+    <div className={clsx('h-10 w-10 shrink-0', className)}>
       {file ? (
         <ImageWithFallback
           className="relative h-10 w-10 rounded-sm"
diff --git a/admin-ui/src/modules/common/components/MediaListItem.tsx b/admin-ui/src/modules/common/components/MediaListItem.tsx
index bedce892c7..68bfb6baeb 100644
--- a/admin-ui/src/modules/common/components/MediaListItem.tsx
+++ b/admin-ui/src/modules/common/components/MediaListItem.tsx
@@ -4,15 +4,16 @@ import { useIntl } from 'react-intl';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import Form from '../../forms/components/Form';
-import TextField from '../../forms/components/TextField';
+import TextField from '@/components/ui/form/TextField';
 import useForm from '../../forms/hooks/useForm';
 import useDisplayImageInModal from '../utils/useDisplayImageInModal';
-import DeleteButton from './DeleteButton';
-import EditIcon from './EditIcon';
-import SaveAndCancelButtons from './SaveAndCancelButtons';
-import FormErrors from '../../forms/components/FormErrors';
-import DraggableIcon from './DraggableIcon';
-import ImageWithFallback from './ImageWithFallback';
+import Button from '@/components/ui/Button';
+import { TrashIcon } from '@heroicons/react/20/solid';
+import { PencilSquareIcon } from '@heroicons/react/20/solid';
+import SaveAndCancelButtons from '@/components/ui/SaveAndCancelButtons';
+import FormErrors from '@/components/ui/form/FormErrors';
+import DraggableIcon from '@/components/ui/DraggableIcon';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const MediaListItem = ({
   media,
@@ -155,16 +156,16 @@ const MediaListItem = ({
         }}
       >
         {!isEdit && onEdit && (
-          <button
-            id="edit"
-            type="button"
+          <Button
+            variant="ghost"
+            size="xs"
+            rounded="full"
+            icon={<PencilSquareIcon className="h-5 w-5" />}
             onClick={(e) => {
               e.stopPropagation();
               onEdit(!isEdit);
             }}
-          >
-            <EditIcon />
-          </button>
+          />
         )}
         <button
           type="button"
@@ -175,7 +176,11 @@ const MediaListItem = ({
           <DraggableIcon />
         </button>
         {onDelete && (
-          <DeleteButton
+          <Button
+            variant="danger"
+            size="xs"
+            rounded="full"
+            icon={<TrashIcon className="h-5 w-5" />}
             onClick={async (e) => {
               e.stopPropagation();
               onDelete(media._id);
diff --git a/admin-ui/src/modules/common/components/MediaUploader.tsx b/admin-ui/src/modules/common/components/MediaUploader.tsx
index b3e248038a..77ffab6c93 100644
--- a/admin-ui/src/modules/common/components/MediaUploader.tsx
+++ b/admin-ui/src/modules/common/components/MediaUploader.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { UserCircleIcon } from '@heroicons/react/24/outline';
@@ -85,7 +85,7 @@ const MediaUploader = ({
         >
           <label htmlFor="file-upload" className="block">
             <div
-              className={classNames(
+              className={clsx(
                 'flex justify-center rounded-md border-1 border-dashed border-slate-300 px-6 py-10 cursor-pointer hover:border-slate-400 dark:hover:border-slate-500 dark:border-slate-600 dark:text-slate-400 transition-colors',
                 {
                   'border-slate-950': dragArea,
diff --git a/admin-ui/src/modules/common/components/MultipleSelect.tsx b/admin-ui/src/modules/common/components/MultipleSelect.tsx
index ed648281d4..51a3c22377 100644
--- a/admin-ui/src/modules/common/components/MultipleSelect.tsx
+++ b/admin-ui/src/modules/common/components/MultipleSelect.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import Badge from './Badge';
+import Badge from '@/components/ui/Badge';
 
 const MultipleSelect = ({ tagList: tags, onChange, options, label }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/common/components/NewProviderForm.tsx b/admin-ui/src/modules/common/components/NewProviderForm.tsx
index 10966baef9..541983bf1e 100644
--- a/admin-ui/src/modules/common/components/NewProviderForm.tsx
+++ b/admin-ui/src/modules/common/components/NewProviderForm.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 import Form from '../../forms/components/Form';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useForm from '../../forms/hooks/useForm';
 import FormWrapper from './FormWrapper';
 
diff --git a/admin-ui/src/modules/common/components/ProviderConfigurationForm.tsx b/admin-ui/src/modules/common/components/ProviderConfigurationForm.tsx
index a9ab8c5c50..acd3fa0402 100644
--- a/admin-ui/src/modules/common/components/ProviderConfigurationForm.tsx
+++ b/admin-ui/src/modules/common/components/ProviderConfigurationForm.tsx
@@ -1,10 +1,10 @@
 import { useIntl } from 'react-intl';
 
-import JSONAreaField from '../../forms/components/JSONAreaField';
-import SubmitButton from '../../forms/components/SubmitButton';
+import JSONAreaField from '@/components/ui/form/JSONAreaField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useForm from '../../forms/hooks/useForm';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
+import FormErrors from '@/components/ui/form/FormErrors';
 
 const ProviderConfigurationForm = ({
   onSubmit,
diff --git a/admin-ui/src/modules/common/components/ProviderDetail.tsx b/admin-ui/src/modules/common/components/ProviderDetail.tsx
index 54df7ccfbc..ee8345c61a 100644
--- a/admin-ui/src/modules/common/components/ProviderDetail.tsx
+++ b/admin-ui/src/modules/common/components/ProviderDetail.tsx
@@ -5,8 +5,8 @@ import { getInterfaceLabel } from '../utils/utils';
 import useFormatDateTime from '../utils/useFormatDateTime';
 import { PROVIDER_TYPE_CLASSES } from '../data/miscellaneous';
 import ProviderConfigurationForm from './ProviderConfigurationForm';
-import ActiveInActive from './ActiveInActive';
-import Badge from './Badge';
+import ActiveInActive from '@/components/ui/ActiveInActive';
+import Badge from '@/components/ui/Badge';
 const ProviderDetail = ({
   provider,
   onSubmit,
diff --git a/admin-ui/src/modules/common/components/ProviderNameConfiguration.tsx b/admin-ui/src/modules/common/components/ProviderNameConfiguration.tsx
index 37dba4295a..9e20bfe600 100644
--- a/admin-ui/src/modules/common/components/ProviderNameConfiguration.tsx
+++ b/admin-ui/src/modules/common/components/ProviderNameConfiguration.tsx
@@ -1,4 +1,4 @@
-import Badge from './Badge';
+import Badge from '@/components/ui/Badge';
 
 const ProviderNameConfiguration = ({ configuration, color }) => {
   let normalizedJSON = null;
diff --git a/admin-ui/src/modules/common/components/ProvidersListItem.tsx b/admin-ui/src/modules/common/components/ProvidersListItem.tsx
index 21d31b15a8..5e3aeba684 100644
--- a/admin-ui/src/modules/common/components/ProvidersListItem.tsx
+++ b/admin-ui/src/modules/common/components/ProvidersListItem.tsx
@@ -1,12 +1,12 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-import Badge from './Badge';
+import Badge from '@/components/ui/Badge';
 import Table from './Table';
 import TableActionsMenu from './TableActionsMenu';
 import { PROVIDER_TYPE_CLASSES } from '../data/miscellaneous';
 import { getInterfaceLabel } from '../utils/utils';
-import ActiveInActive from './ActiveInActive';
+import ActiveInActive from '@/components/ui/ActiveInActive';
 import ProviderNameConfiguration from './ProviderNameConfiguration';
 
 const ProviderListItem = ({
diff --git a/admin-ui/src/modules/common/components/SearchWithTags.tsx b/admin-ui/src/modules/common/components/SearchWithTags.tsx
index cc8e8061db..d73750bcfe 100644
--- a/admin-ui/src/modules/common/components/SearchWithTags.tsx
+++ b/admin-ui/src/modules/common/components/SearchWithTags.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
-import SearchField from './SearchField';
-import TagInput from './TagInput';
-import Badge from './Badge';
+import SearchField from '@/components/ui/SearchField';
+import TagInput from '@/components/ui/Tag/TagInput';
+import Badge from '@/components/ui/Badge';
 import { normalizeQuery } from '../utils/utils';
 import { isTruthy } from '../utils/normalizeFilterKeys';
 
diff --git a/admin-ui/src/modules/common/components/SelectOptions.tsx b/admin-ui/src/modules/common/components/SelectOptions.tsx
index c4eb44436c..af00bda75a 100644
--- a/admin-ui/src/modules/common/components/SelectOptions.tsx
+++ b/admin-ui/src/modules/common/components/SelectOptions.tsx
@@ -3,7 +3,7 @@ import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
 import { useIntl } from 'react-intl';
 
-function classNames(...classes) {
+function clsx(...classes) {
   return classes.filter(Boolean).join(' ');
 }
 
@@ -131,7 +131,7 @@ const SelectOptions = ({
             <Listbox.Button
               onMouseEnter={() => setIsHover(true)}
               onMouseLeave={() => setIsHover(false)}
-              className={classNames(
+              className={clsx(
                 'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 h-[38px]',
                 colorConfig.button,
                 colorConfig.hover,
@@ -142,7 +142,7 @@ const SelectOptions = ({
               <CheckIcon className="h-4 w-4" aria-hidden="true" />
               <span>{select?.selectedTitle || select.title}</span>
               <ChevronDownIcon
-                className={classNames(
+                className={clsx(
                   'h-4 w-4 -mr-1 transition-transform duration-200',
                   open && 'rotate-180',
                 )}
@@ -162,7 +162,7 @@ const SelectOptions = ({
                   <Listbox.Option
                     key={option.title}
                     className={() =>
-                      classNames(
+                      clsx(
                         'group',
                         option?.disable && 'cursor-not-allowed',
                         'relative cursor-default select-none p-3 text-sm',
@@ -179,7 +179,7 @@ const SelectOptions = ({
                         <div className="flex-1">
                           <div className="flex items-center gap-2">
                             <span
-                              className={classNames(
+                              className={clsx(
                                 'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium',
                                 getOptionClasses(option),
                               )}
@@ -195,7 +195,7 @@ const SelectOptions = ({
                           </div>
                           {option?.description && (
                             <div
-                              className={classNames(
+                              className={clsx(
                                 'mt-2 ms-1 text-sm text-slate-600 dark:text-slate-400',
                               )}
                             >
diff --git a/admin-ui/src/modules/common/components/SelfDocumentingView.tsx b/admin-ui/src/modules/common/components/SelfDocumentingView.tsx
index c4cf90cc9f..6493e69380 100644
--- a/admin-ui/src/modules/common/components/SelfDocumentingView.tsx
+++ b/admin-ui/src/modules/common/components/SelfDocumentingView.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 const SelfDocumentingView = ({
   documentationLabel,
@@ -10,12 +10,7 @@ const SelfDocumentingView = ({
 }) => {
   return (
     <>
-      <div
-        className={classNames(
-          'mt-5 lg:grid lg:grid-cols-3 lg:gap-6',
-          className,
-        )}
-      >
+      <div className={clsx('mt-5 lg:grid lg:grid-cols-3 lg:gap-6', className)}>
         <div className="lg:col-span-1 mt-10 lg:mt-1">
           <div className="px-4 sm:px-0">
             <h3 className="text-lg text-slate-900 dark:text-slate-200">
diff --git a/admin-ui/src/modules/common/components/SideNav.tsx b/admin-ui/src/modules/common/components/SideNav.tsx
index be2bd2ac5c..1bcb400233 100644
--- a/admin-ui/src/modules/common/components/SideNav.tsx
+++ b/admin-ui/src/modules/common/components/SideNav.tsx
@@ -4,13 +4,13 @@ import {
   DisclosurePanel,
 } from '@headlessui/react';
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState, useRef, useEffect } from 'react';
 import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import useAuth from '../../Auth/useAuth';
-import Badge from './Badge';
+import Badge from '@/components/ui/Badge';
 
 const ChildrenNav = ({ item, hasRole, onSelected, narrowView }) => {
   const router = useRouter();
@@ -44,7 +44,7 @@ const ChildrenNav = ({ item, hasRole, onSelected, narrowView }) => {
     ) ? (
       <div key={item.name} className="relative group" ref={dropdownRef}>
         <button
-          className={classNames(
+          className={clsx(
             'flex w-full justify-center items-center p-2 rounded-md transition-colors focus:outline-hidden focus:ring-2 focus:ring-slate-800',
             isChildActive
               ? 'text-slate-900 dark:text-slate-100 bg-slate-100 dark:bg-slate-800'
@@ -55,7 +55,7 @@ const ChildrenNav = ({ item, hasRole, onSelected, narrowView }) => {
         >
           {item?.icon && (
             <item.icon
-              className={classNames(
+              className={clsx(
                 'h-6 w-6',
                 isChildActive
                   ? 'text-slate-900 dark:text-slate-100'
@@ -82,7 +82,7 @@ const ChildrenNav = ({ item, hasRole, onSelected, narrowView }) => {
                   <Link
                     key={subItem.name}
                     href={subItem.href}
-                    className={classNames(
+                    className={clsx(
                       'block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 focus:outline-hidden focus:ring-2 focus:ring-slate-800',
                       {
                         'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100':
@@ -111,7 +111,7 @@ const ChildrenNav = ({ item, hasRole, onSelected, narrowView }) => {
       {({ open }) => (
         <>
           <DisclosureButton
-            className={classNames(
+            className={clsx(
               'group flex w-full cursor-pointer hover:bg-slate-50 dark:bg-slate-900 dark:hover:bg-slate-700 dark:text-slate-400 items-center rounded-md py-2 pl-2 pr-4 text-left text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-slate-800',
             )}
             onMouseEnter={() => setIsHovered(true)}
@@ -127,7 +127,7 @@ const ChildrenNav = ({ item, hasRole, onSelected, narrowView }) => {
               {item.name}
             </span>
             <ChevronDownIcon
-              className={classNames(
+              className={clsx(
                 'h-5 w-5 transition-all duration-200 ease-out',
                 isHovered || open
                   ? 'opacity-100 text-slate-600 dark:text-slate-300'
@@ -143,7 +143,7 @@ const ChildrenNav = ({ item, hasRole, onSelected, narrowView }) => {
                 <Link
                   key={subItem.name}
                   href={subItem.href}
-                  className={classNames(
+                  className={clsx(
                     'group flex w-full items-center rounded-md py-2 pl-5 pr-2 text-sm font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-900 focus:outline-hidden focus:ring-2 focus:ring-slate-800',
                     {
                       ' dark:bg-slate-800 text-slate-900 dark:text-slate-300 dark:hover:text-white bg-slate-50 hover:bg-slate-100':
@@ -177,7 +177,7 @@ const SideNav = ({ navigation, onClick = null, narrowView = false }) => {
             <div key={item.name} onClick={onClick}>
               <Link
                 href={item?.href || '#'}
-                className={classNames(
+                className={clsx(
                   'group flex w-full items-center rounded-md py-2 text-sm font-medium focus:outline-hidden focus:ring-2 focus:ring-slate-800',
                   router.asPath === item.href || router.pathname === item.href
                     ? 'text-slate-900 dark:text-slate-100 bg-slate-100 dark:bg-slate-800'
@@ -192,7 +192,7 @@ const SideNav = ({ navigation, onClick = null, narrowView = false }) => {
                 <>
                   {item?.icon && (
                     <item.icon
-                      className={classNames('h-6 w-6 shrink-0', {
+                      className={clsx('h-6 w-6 shrink-0', {
                         'text-slate-900 dark:text-slate-100':
                           router.asPath === item.href ||
                           router.pathname === item.href,
diff --git a/admin-ui/src/modules/common/components/SystemInformation.tsx b/admin-ui/src/modules/common/components/SystemInformation.tsx
index f0a8d47578..e91ee0ff8d 100644
--- a/admin-ui/src/modules/common/components/SystemInformation.tsx
+++ b/admin-ui/src/modules/common/components/SystemInformation.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 import useShopInfo from '../hooks/useShopInfo';
-import Badge from './Badge';
-import Loading from './Loading';
+import Badge from '@/components/ui/Badge';
+import Loading from '@/components/ui/Loading';
 
 const ShopInformation = () => {
   const { formatMessage, locale } = useIntl();
diff --git a/admin-ui/src/modules/common/components/Table.tsx b/admin-ui/src/modules/common/components/Table.tsx
index 8b43f4abd5..8df39cd085 100644
--- a/admin-ui/src/modules/common/components/Table.tsx
+++ b/admin-ui/src/modules/common/components/Table.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useIntl } from 'react-intl';
 import Cell from './TableCell';
 import Row from './TableRow';
-import NoData from './NoData';
+import NoData from '@/components/ui/NoData';
 
 const buildRows = (props) => {
   const header = [];
@@ -39,7 +39,7 @@ const Table = ({ className = '', ...props }) => {
 
   return rowsWithSort.header.length || rowsWithSort.body.length ? (
     <table
-      className={classNames(
+      className={clsx(
         'overflow-hidden my-3 flex w-full flex-row flex-nowrap divide-y divide-slate-200 dark:divide-slate-600  shadow-sm sm:rounded-lg sm:bg-white dark:bg-slate-950',
         className,
       )}
diff --git a/admin-ui/src/modules/common/components/TableActionsMenu.tsx b/admin-ui/src/modules/common/components/TableActionsMenu.tsx
index 6d34a26910..ab10796138 100644
--- a/admin-ui/src/modules/common/components/TableActionsMenu.tsx
+++ b/admin-ui/src/modules/common/components/TableActionsMenu.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
 import { PencilIcon, TrashIcon } from '@heroicons/react/20/solid';
-import Portal from './Portal';
+import Portal from '@/components/ui/Portal/Portal';
 
 export interface TableActionsMenuProps {
   onEdit?: () => void;
diff --git a/admin-ui/src/modules/common/components/TableCell.tsx b/admin-ui/src/modules/common/components/TableCell.tsx
index a0953354d1..e4bcb388cd 100644
--- a/admin-ui/src/modules/common/components/TableCell.tsx
+++ b/admin-ui/src/modules/common/components/TableCell.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/20/solid';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { getSortKeys, normalizeQuery } from '../utils/utils';
@@ -89,7 +89,7 @@ const TableCell = ({
   const Td = header ? 'th' : 'td';
   return (
     <Td
-      className={classNames(
+      className={clsx(
         header
           ? 'px-4 py-3 text-left text-slate-500 dark:text-slate-200'
           : 'whitespace-nowrap px-4 py-3 text-slate-500 dark:text-slate-200 border-b dark:border-slate-300 last:border-b-0 sm:border-b-0 text-left flex items-center sm:table-cell',
diff --git a/admin-ui/src/modules/common/components/TableRow.tsx b/admin-ui/src/modules/common/components/TableRow.tsx
index 48a00c3c18..00a9d0574e 100644
--- a/admin-ui/src/modules/common/components/TableRow.tsx
+++ b/admin-ui/src/modules/common/components/TableRow.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 
 const TableRow = ({
@@ -13,7 +13,7 @@ const TableRow = ({
   const cells = React.Children.map(children, clone);
   return (
     <tr
-      className={classNames(
+      className={clsx(
         'grid grid-cols-1 auto-rows-fr border border-slate-100 dark:border-slate-700 sm:border-0 rounded-md sm:mb-0 sm:table-row sm:rounded-none bg-white dark:bg-slate-800 sm:bg-inherit dark:sm:bg-inherit',
         className,
       )}
diff --git a/admin-ui/src/modules/common/components/ThemeToggle.tsx b/admin-ui/src/modules/common/components/ThemeToggle.tsx
index 66dde07aee..0180ad7694 100644
--- a/admin-ui/src/modules/common/components/ThemeToggle.tsx
+++ b/admin-ui/src/modules/common/components/ThemeToggle.tsx
@@ -1,5 +1,5 @@
 import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import useTheme from '../hooks/useTheme';
 
 const ThemeToggle = () => {
@@ -25,7 +25,7 @@ const ThemeToggle = () => {
         onClick={handleToggleTheme}
       >
         <SunIcon
-          className={classNames(
+          className={clsx(
             'w-6 h-6 text-slate-600 transition-all ease-out delay-1000',
             {
               hidden: theme === 'dark',
@@ -33,7 +33,7 @@ const ThemeToggle = () => {
           )}
         />
         <MoonIcon
-          className={classNames(
+          className={clsx(
             'w-6 h-6 text-yellow-200 group-hover:text-white transition-colors duration-200',
             {
               hidden: theme === 'light',
diff --git a/admin-ui/src/modules/common/components/UserAvatar.tsx b/admin-ui/src/modules/common/components/UserAvatar.tsx
index f08c03c20f..9fd7df544f 100644
--- a/admin-ui/src/modules/common/components/UserAvatar.tsx
+++ b/admin-ui/src/modules/common/components/UserAvatar.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 import defaultNextImageLoader from '../utils/defaultNextImageLoader';
 import formatUsername from '../utils/formatUsername';
-import ImageWithFallback from './ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import { useApolloClient } from '@apollo/client/react';
 import { toast } from 'react-toastify';
 import logOut from '../../accounts/hooks/logOut';
diff --git a/admin-ui/src/modules/common/hooks/useStatusTypes.ts b/admin-ui/src/modules/common/hooks/useStatusTypes.ts
new file mode 100644
index 0000000000..f685ad19a3
--- /dev/null
+++ b/admin-ui/src/modules/common/hooks/useStatusTypes.ts
@@ -0,0 +1,29 @@
+import { gql } from '@apollo/client';
+import { useQuery } from '@apollo/client/react';
+
+const StatusTypesQuery = gql`
+  query StatusTypes($enumName: String!) {
+    statusTypes: __type(name: $enumName) {
+      options: enumValues {
+        value: name
+        label: description
+      }
+    }
+  }
+`;
+
+type StatusTypesData = {
+  statusTypes: { options: { value: string; label: string }[] } | null;
+};
+
+const useStatusTypes = (enumName: string) => {
+  const { data, loading, error } = useQuery<StatusTypesData>(StatusTypesQuery, {
+    variables: { enumName },
+  });
+
+  const statusTypes = data?.statusTypes?.options || [];
+
+  return { statusTypes, loading, error };
+};
+
+export default useStatusTypes;
diff --git a/admin-ui/src/modules/common/utils/useDisplayImageInModal.tsx b/admin-ui/src/modules/common/utils/useDisplayImageInModal.tsx
index 92a322e26c..d8db9a9003 100644
--- a/admin-ui/src/modules/common/utils/useDisplayImageInModal.tsx
+++ b/admin-ui/src/modules/common/utils/useDisplayImageInModal.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 import useModal from '../../modal/hooks/useModal';
-import ImageWithFallback from '../components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const useDisplayImageInModal = () => {
   const { setModal } = useModal();
diff --git a/admin-ui/src/modules/copilot/components/AssortmentListItem.tsx b/admin-ui/src/modules/copilot/components/AssortmentListItem.tsx
index 4e4318a034..3c5d6e3954 100644
--- a/admin-ui/src/modules/copilot/components/AssortmentListItem.tsx
+++ b/admin-ui/src/modules/copilot/components/AssortmentListItem.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { FolderIcon, CalendarIcon } from '@heroicons/react/24/outline';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import generateUniqueId from '../../common/utils/getUniqueId';
 
 interface AssortmentListItemProps {
@@ -63,7 +63,7 @@ const AssortmentListItem: React.FC<AssortmentListItemProps> = ({
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         'bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden hover:shadow-md transition-shadow',
         className,
       )}
diff --git a/admin-ui/src/modules/copilot/components/AssortmentListItemCompact.tsx b/admin-ui/src/modules/copilot/components/AssortmentListItemCompact.tsx
index da1de4c5a4..9b6ca98128 100644
--- a/admin-ui/src/modules/copilot/components/AssortmentListItemCompact.tsx
+++ b/admin-ui/src/modules/copilot/components/AssortmentListItemCompact.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
-import Badge from '../../common/components/Badge';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
+import Badge from '@/components/ui/Badge';
 import generateUniqueId from '../../common/utils/getUniqueId';
 import CopyableId from './shared/CopyableId';
 
diff --git a/admin-ui/src/modules/copilot/components/AssortmentResultsSummary.tsx b/admin-ui/src/modules/copilot/components/AssortmentResultsSummary.tsx
index aceaa45ea1..12caf952f3 100644
--- a/admin-ui/src/modules/copilot/components/AssortmentResultsSummary.tsx
+++ b/admin-ui/src/modules/copilot/components/AssortmentResultsSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import {
   FolderIcon,
   EyeIcon,
@@ -35,7 +35,7 @@ const AssortmentResultsSummary: React.FC<AssortmentResultsSummaryProps> = ({
     return (
       <div className="flex items-center gap-2">
         <div
-          className={classNames(
+          className={clsx(
             'w-2 h-2 rounded-full',
             isActive ? 'bg-emerald-500' : 'bg-slate-400',
           )}
@@ -64,7 +64,7 @@ const AssortmentResultsSummary: React.FC<AssortmentResultsSummaryProps> = ({
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         'dark:bg-slate-900 rounded-lg border-1 dark:border-slate-700 p-4 my-5',
         className,
       )}
diff --git a/admin-ui/src/modules/copilot/components/CopilotProviderInterfaceList.tsx b/admin-ui/src/modules/copilot/components/CopilotProviderInterfaceList.tsx
index e2bd52f4e0..2e112cebfd 100644
--- a/admin-ui/src/modules/copilot/components/CopilotProviderInterfaceList.tsx
+++ b/admin-ui/src/modules/copilot/components/CopilotProviderInterfaceList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 
 import { Cog6ToothIcon } from '@heroicons/react/24/outline';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 
 export const InterfaceItemCompact = ({ iface }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/copilot/components/CopilotProviderList.tsx b/admin-ui/src/modules/copilot/components/CopilotProviderList.tsx
index e5d11393b6..ed01b9457b 100644
--- a/admin-ui/src/modules/copilot/components/CopilotProviderList.tsx
+++ b/admin-ui/src/modules/copilot/components/CopilotProviderList.tsx
@@ -1,7 +1,7 @@
 import { CreditCardIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import React from 'react';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import { useIntl } from 'react-intl';
 import CopyableId from './shared/CopyableId';
 import ConfigurationDisplay from './shared/ConfigurationDisplay';
diff --git a/admin-ui/src/modules/copilot/components/CopilotUserList.tsx b/admin-ui/src/modules/copilot/components/CopilotUserList.tsx
index e06f307573..129fe5791e 100644
--- a/admin-ui/src/modules/copilot/components/CopilotUserList.tsx
+++ b/admin-ui/src/modules/copilot/components/CopilotUserList.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
 import Link from 'next/link';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
-import Badge from '../../common/components/Badge';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import Badge from '@/components/ui/Badge';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import CopyableId from './shared/CopyableId';
 
 export const CopilotUserListItem = ({ user }) => {
diff --git a/admin-ui/src/modules/copilot/components/CopilotWorkerList.tsx b/admin-ui/src/modules/copilot/components/CopilotWorkerList.tsx
index 5dc47298cc..5803b1384b 100644
--- a/admin-ui/src/modules/copilot/components/CopilotWorkerList.tsx
+++ b/admin-ui/src/modules/copilot/components/CopilotWorkerList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 import Link from 'next/link';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import { WORK_STATUSES } from '../../common/data/miscellaneous';
 import CopyableId from './shared/CopyableId';
 
diff --git a/admin-ui/src/modules/copilot/components/ListViewWrapper.tsx b/admin-ui/src/modules/copilot/components/ListViewWrapper.tsx
index c5b5fbde02..937f6c4390 100644
--- a/admin-ui/src/modules/copilot/components/ListViewWrapper.tsx
+++ b/admin-ui/src/modules/copilot/components/ListViewWrapper.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Squares2X2Icon, ListBulletIcon } from '@heroicons/react/24/outline';
 import useLocalStorage from '../../common/hooks/useLocalStorage';
 
@@ -19,12 +19,12 @@ const ListViewWrapper: React.FC<ListViewWrapperProps> = ({
   const [viewMode, setViewMode] = useLocalStorage(storageKey, 'list');
 
   return (
-    <div className={classNames('space-y-4', className)}>
+    <div className={clsx('space-y-4', className)}>
       <div className="flex justify-end">
         <div className="flex bg-slate-100 dark:bg-slate-800 rounded-lg p-1">
           <button
             onClick={() => setViewMode('grid')}
-            className={classNames(
+            className={clsx(
               'p-2 rounded-md transition-colors',
               viewMode === 'grid'
                 ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 shadow-sm'
@@ -35,7 +35,7 @@ const ListViewWrapper: React.FC<ListViewWrapperProps> = ({
           </button>
           <button
             onClick={() => setViewMode('list')}
-            className={classNames(
+            className={clsx(
               'p-2 rounded-md transition-colors',
               viewMode === 'list'
                 ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 shadow-sm'
diff --git a/admin-ui/src/modules/copilot/components/ProgressIndicator.tsx b/admin-ui/src/modules/copilot/components/ProgressIndicator.tsx
index 87aa1c911b..d6f6cd3fc5 100644
--- a/admin-ui/src/modules/copilot/components/ProgressIndicator.tsx
+++ b/admin-ui/src/modules/copilot/components/ProgressIndicator.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 interface ProgressIndicatorProps {
   progress: number;
@@ -39,17 +39,17 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
   };
 
   return (
-    <div className={classNames('flex items-center gap-3', className)}>
+    <div className={clsx('flex items-center gap-3', className)}>
       <div className="flex-1">
         <div
-          className={classNames(
+          className={clsx(
             'w-full rounded-full overflow-hidden',
             sizeClasses[size],
             getProgressColorBg(progress),
           )}
         >
           <div
-            className={classNames(
+            className={clsx(
               'h-full transition-all duration-500 ease-out rounded-full',
               getProgressColor(progress),
             )}
@@ -59,7 +59,7 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
       </div>
       {showPercentage && (
         <span
-          className={classNames(
+          className={clsx(
             'font-medium tabular-nums',
             textSizeClasses[size],
             progress === 100
diff --git a/admin-ui/src/modules/copilot/components/SetupStepCard.tsx b/admin-ui/src/modules/copilot/components/SetupStepCard.tsx
index ba56d1a2ab..a52fb23f5b 100644
--- a/admin-ui/src/modules/copilot/components/SetupStepCard.tsx
+++ b/admin-ui/src/modules/copilot/components/SetupStepCard.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { useIntl } from 'react-intl';
 import {
   CheckIcon,
@@ -46,7 +46,7 @@ const SetupStepCard: React.FC<SetupStepCardProps> = ({ step, onStepClick }) => {
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         'relative p-4 rounded-lg border transition-all duration-200',
         step.isComplete
           ? 'bg-emerald-50 dark:bg-emerald-900/10 border-emerald-200 dark:border-emerald-700/50'
@@ -57,7 +57,7 @@ const SetupStepCard: React.FC<SetupStepCardProps> = ({ step, onStepClick }) => {
     >
       <div className="flex items-start gap-3">
         <div
-          className={classNames(
+          className={clsx(
             'flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center',
             step.isComplete
               ? 'bg-emerald-100 dark:bg-emerald-900/30'
@@ -68,7 +68,7 @@ const SetupStepCard: React.FC<SetupStepCardProps> = ({ step, onStepClick }) => {
             <CheckIcon className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
           ) : (
             <IconComponent
-              className={classNames(
+              className={clsx(
                 'w-5 h-5',
                 step.isRequired
                   ? 'text-slate-600 dark:text-slate-400'
@@ -82,7 +82,7 @@ const SetupStepCard: React.FC<SetupStepCardProps> = ({ step, onStepClick }) => {
           <div className="flex items-start justify-between gap-2">
             <div className="flex-1">
               <h4
-                className={classNames(
+                className={clsx(
                   'font-medium text-sm',
                   step.isComplete
                     ? 'text-emerald-700 dark:text-emerald-300'
@@ -95,7 +95,7 @@ const SetupStepCard: React.FC<SetupStepCardProps> = ({ step, onStepClick }) => {
                 )}
               </h4>
               <p
-                className={classNames(
+                className={clsx(
                   'text-xs mt-1',
                   step.isComplete
                     ? 'text-emerald-600 dark:text-emerald-400'
@@ -130,7 +130,7 @@ const SetupStepCard: React.FC<SetupStepCardProps> = ({ step, onStepClick }) => {
             <div className="mt-3">
               <Link href={step.setupUrl}>
                 <span
-                  className={classNames(
+                  className={clsx(
                     'inline-flex items-center px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
                     step.isRequired
                       ? 'bg-slate-900 dark:bg-slate-200 text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-300'
diff --git a/admin-ui/src/modules/copilot/components/ShopSetupChecklist.tsx b/admin-ui/src/modules/copilot/components/ShopSetupChecklist.tsx
index 5290d4da77..6e14d718dd 100644
--- a/admin-ui/src/modules/copilot/components/ShopSetupChecklist.tsx
+++ b/admin-ui/src/modules/copilot/components/ShopSetupChecklist.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -75,7 +75,7 @@ const ShopSetupChecklist: React.FC<ShopSetupChecklistProps> = ({
   if (isFullyConfigured && !isSetupMessageDismissed) {
     return (
       <div
-        className={classNames(
+        className={clsx(
           'p-6 bg-gradient-to-r from-emerald-50 to-emerald-50 dark:from-emerald-900/20 dark:to-emerald-900/20 rounded-lg border border-emerald-200 dark:border-emerald-700/50',
           className,
         )}
@@ -221,7 +221,7 @@ const ShopSetupChecklist: React.FC<ShopSetupChecklistProps> = ({
 
   return (
     <div
-      className={classNames(
+      className={clsx(
         'bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden',
         className,
       )}
diff --git a/admin-ui/src/modules/copilot/components/TextsList.tsx b/admin-ui/src/modules/copilot/components/TextsList.tsx
index 276e5465eb..8eb076fc4f 100644
--- a/admin-ui/src/modules/copilot/components/TextsList.tsx
+++ b/admin-ui/src/modules/copilot/components/TextsList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import { GlobeAltIcon } from '@heroicons/react/24/outline';
 import { useIntl } from 'react-intl';
 
diff --git a/admin-ui/src/modules/copilot/components/order/CopilotOrderItemWrapper.tsx b/admin-ui/src/modules/copilot/components/order/CopilotOrderItemWrapper.tsx
index f7b5a3041e..346b7671d4 100644
--- a/admin-ui/src/modules/copilot/components/order/CopilotOrderItemWrapper.tsx
+++ b/admin-ui/src/modules/copilot/components/order/CopilotOrderItemWrapper.tsx
@@ -3,7 +3,7 @@ import useFormatDateTime from '../../../common/utils/useFormatDateTime';
 import { useFormatPrice } from '../../../common/utils/utils';
 import { OrderStatusBadge } from '../../../order/components/OrderStatusBadge';
 import Link from 'next/link';
-import Badge from '../../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import {
   DELIVERY_STATUSES,
   PAYMENT_STATUSES,
diff --git a/admin-ui/src/modules/copilot/components/order/TopCustomerList.tsx b/admin-ui/src/modules/copilot/components/order/TopCustomerList.tsx
index b7bb1f28b0..36d734ea3f 100644
--- a/admin-ui/src/modules/copilot/components/order/TopCustomerList.tsx
+++ b/admin-ui/src/modules/copilot/components/order/TopCustomerList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import ImageWithFallback from '../../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import { useFormatPrice } from '../../../common/utils/utils';
 import useFormatDateTime from '../../../common/utils/useFormatDateTime';
 import Link from 'next/link';
diff --git a/admin-ui/src/modules/copilot/components/order/TopSellingProductList.tsx b/admin-ui/src/modules/copilot/components/order/TopSellingProductList.tsx
index 83fad57507..b846d9af94 100644
--- a/admin-ui/src/modules/copilot/components/order/TopSellingProductList.tsx
+++ b/admin-ui/src/modules/copilot/components/order/TopSellingProductList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { useFormatPrice } from '../../../common/utils/utils';
-import ImageWithFallback from '../../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import generateUniqueId from '../../../common/utils/getUniqueId';
 import { ProductStatusBadge } from '../../../product/components/ProductStatusBadge';
 import useFormatDateTime from '../../../common/utils/useFormatDateTime';
diff --git a/admin-ui/src/modules/copilot/components/product/AssignmentListCompact.tsx b/admin-ui/src/modules/copilot/components/product/AssignmentListCompact.tsx
index d3da404a30..f5243b866d 100644
--- a/admin-ui/src/modules/copilot/components/product/AssignmentListCompact.tsx
+++ b/admin-ui/src/modules/copilot/components/product/AssignmentListCompact.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useIntl } from 'react-intl';
 import Link from 'next/link';
-import ImageWithFallback from '../../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import generateUniqueId from '../../../common/utils/getUniqueId';
 import { useFormatPrice } from '../../../common/utils/utils';
 
diff --git a/admin-ui/src/modules/copilot/components/product/BundleItemCompact.tsx b/admin-ui/src/modules/copilot/components/product/BundleItemCompact.tsx
index e6f3e645e1..7e54298373 100644
--- a/admin-ui/src/modules/copilot/components/product/BundleItemCompact.tsx
+++ b/admin-ui/src/modules/copilot/components/product/BundleItemCompact.tsx
@@ -1,5 +1,5 @@
 import { useIntl } from 'react-intl';
-import ImageWithFallback from '../../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import { useFormatPrice } from '../../../common/utils/utils';
 import Link from 'next/link';
 import generateUniqueId from '../../../common/utils/getUniqueId';
diff --git a/admin-ui/src/modules/copilot/components/product/CopilotMediaList.tsx b/admin-ui/src/modules/copilot/components/product/CopilotMediaList.tsx
index 55ec636fff..0ff28613d8 100644
--- a/admin-ui/src/modules/copilot/components/product/CopilotMediaList.tsx
+++ b/admin-ui/src/modules/copilot/components/product/CopilotMediaList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import ImageWithFallback from '../../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import useFormatDateTime from '../../../common/utils/useFormatDateTime';
 
 interface CopilotMediaListProps {
diff --git a/admin-ui/src/modules/copilot/components/product/CopilotProductListItem.tsx b/admin-ui/src/modules/copilot/components/product/CopilotProductListItem.tsx
index aa6c070131..4808f8eb4a 100644
--- a/admin-ui/src/modules/copilot/components/product/CopilotProductListItem.tsx
+++ b/admin-ui/src/modules/copilot/components/product/CopilotProductListItem.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { useFormatPrice } from '../../../common/utils/utils';
-import ImageWithFallback from '../../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import generateUniqueId from '../../../common/utils/getUniqueId';
 import { ProductStatusBadge } from '../../../product/components/ProductStatusBadge';
 
diff --git a/admin-ui/src/modules/copilot/components/product/ProductItemWrapperCompact.tsx b/admin-ui/src/modules/copilot/components/product/ProductItemWrapperCompact.tsx
index 9abfaf2c49..a2d7824498 100644
--- a/admin-ui/src/modules/copilot/components/product/ProductItemWrapperCompact.tsx
+++ b/admin-ui/src/modules/copilot/components/product/ProductItemWrapperCompact.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
-import ImageWithFallback from '../../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import generateUniqueId from '../../../common/utils/getUniqueId';
 import { useFormatPrice } from '../../../common/utils/utils';
 import { ProductStatusBadge } from '../../../product/components/ProductStatusBadge';
diff --git a/admin-ui/src/modules/copilot/components/quotation/CopilotQuotationItemWrapperCompact.tsx b/admin-ui/src/modules/copilot/components/quotation/CopilotQuotationItemWrapperCompact.tsx
index 93e7734693..735b4f54e8 100644
--- a/admin-ui/src/modules/copilot/components/quotation/CopilotQuotationItemWrapperCompact.tsx
+++ b/admin-ui/src/modules/copilot/components/quotation/CopilotQuotationItemWrapperCompact.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { formatDistance } from 'date-fns';
 import CopyableId from '../shared/CopyableId';
-import Badge from '../../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import { QUOTATION_STATUS } from '../../../common/data/miscellaneous';
 import ConfigurationDisplay from '../shared/ConfigurationDisplay';
 
diff --git a/admin-ui/src/modules/copilot/components/tool-renderers/imageRenderer.tsx b/admin-ui/src/modules/copilot/components/tool-renderers/imageRenderer.tsx
index 54f1868ed3..221636a94d 100644
--- a/admin-ui/src/modules/copilot/components/tool-renderers/imageRenderer.tsx
+++ b/admin-ui/src/modules/copilot/components/tool-renderers/imageRenderer.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import ImageWithFallback from '../../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const renderImage = (data: any) => {
   const { imageUrl, media, file } = data || {};
diff --git a/admin-ui/src/modules/country/components/CountryForm.tsx b/admin-ui/src/modules/country/components/CountryForm.tsx
index 77f7175b19..fd9a24041b 100644
--- a/admin-ui/src/modules/country/components/CountryForm.tsx
+++ b/admin-ui/src/modules/country/components/CountryForm.tsx
@@ -4,12 +4,12 @@ import { IRoleAction } from '../../../gql/types';
 import useAuth from '../../Auth/useAuth';
 import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObject';
 import useCurrencies from '../../currency/hooks/useCurrencies';
-import Toggle from '../../common/components/Toggle';
+import Toggle from '@/components/ui/Toggle';
 import Form from '../../forms/components/Form';
 
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm from '../../forms/hooks/useForm';
 import { validateCountry } from '../../forms/lib/validators';
 
diff --git a/admin-ui/src/modules/country/components/CountryListItem.tsx b/admin-ui/src/modules/country/components/CountryListItem.tsx
index 0c7e6917c4..a43f3b61c5 100644
--- a/admin-ui/src/modules/country/components/CountryListItem.tsx
+++ b/admin-ui/src/modules/country/components/CountryListItem.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 
diff --git a/admin-ui/src/modules/currency/components/CurrencyForm.tsx b/admin-ui/src/modules/currency/components/CurrencyForm.tsx
index 6b23a7b157..9ad6262385 100644
--- a/admin-ui/src/modules/currency/components/CurrencyForm.tsx
+++ b/admin-ui/src/modules/currency/components/CurrencyForm.tsx
@@ -2,12 +2,12 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../../gql/types';
 
 import useAuth from '../../Auth/useAuth';
-import Toggle from '../../common/components/Toggle';
+import Toggle from '@/components/ui/Toggle';
 import Form from '../../forms/components/Form';
 
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
-import SelectField from '../../forms/components/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
+import SelectField from '@/components/ui/form/SelectField';
 import useForm from '../../forms/hooks/useForm';
 import { isContractAddress } from '../../forms/lib/validators';
 
diff --git a/admin-ui/src/modules/currency/components/CurrencyListItem.tsx b/admin-ui/src/modules/currency/components/CurrencyListItem.tsx
index 5649172e95..277bc0a4b8 100644
--- a/admin-ui/src/modules/currency/components/CurrencyListItem.tsx
+++ b/admin-ui/src/modules/currency/components/CurrencyListItem.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 import { normalizeCurrencyISOCode } from '../../common/utils/utils';
diff --git a/admin-ui/src/modules/delivery-provider/hooks/useDeliveryStatusTypes.ts b/admin-ui/src/modules/delivery-provider/hooks/useDeliveryStatusTypes.ts
deleted file mode 100644
index 302e877b87..0000000000
--- a/admin-ui/src/modules/delivery-provider/hooks/useDeliveryStatusTypes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { gql } from '@apollo/client';
-import { useQuery } from '@apollo/client/react';
-import {
-  IOrderDeliveryStatusQuery,
-  IOrderDeliveryStatusQueryVariables,
-} from '../../../gql/types';
-
-const DeliveryStatusTypesQuery = gql`
-  query OrderDeliveryStatus {
-    deliveryStatusType: __type(name: "OrderDeliveryStatus") {
-      options: enumValues {
-        value: name
-        label: description
-      }
-    }
-  }
-`;
-
-const useDeliveryStatusTypes = () => {
-  const { data, loading, error } = useQuery<
-    IOrderDeliveryStatusQuery,
-    IOrderDeliveryStatusQueryVariables
-  >(DeliveryStatusTypesQuery);
-
-  const deliveryStatusType = data?.deliveryStatusType?.options || [];
-
-  return {
-    deliveryStatusType,
-    loading,
-    error,
-  };
-};
-
-export default useDeliveryStatusTypes;
diff --git a/admin-ui/src/modules/delivery-provider/index.ts b/admin-ui/src/modules/delivery-provider/index.ts
index 96a73d31c0..bbf57814fb 100644
--- a/admin-ui/src/modules/delivery-provider/index.ts
+++ b/admin-ui/src/modules/delivery-provider/index.ts
@@ -3,6 +3,5 @@ export { default as useDeliveryInterfacesByType } from './hooks/useDeliveryInter
 export { default as useDeliveryProvider } from './hooks/useDeliveryProvider';
 export { default as useDeliveryProviderTypes } from './hooks/useDeliveryProviderTypes';
 export { default as useDeliveryProviders } from './hooks/useDeliveryProviders';
-export { default as useDeliveryStatusTypes } from './hooks/useDeliveryStatusTypes';
 export { default as useRemoveDeliveryProvider } from './hooks/useRemoveDeliveryProvider';
 export { default as useUpdateDeliveryProvider } from './hooks/useUpdateDeliveryProvider';
diff --git a/admin-ui/src/modules/enrollment/components/EnrollmentDetail.tsx b/admin-ui/src/modules/enrollment/components/EnrollmentDetail.tsx
index 45cd4910e8..593875ed11 100644
--- a/admin-ui/src/modules/enrollment/components/EnrollmentDetail.tsx
+++ b/admin-ui/src/modules/enrollment/components/EnrollmentDetail.tsx
@@ -3,13 +3,13 @@ import Link from 'next/link';
 import { toast } from 'react-toastify';
 import { InboxIcon } from '@heroicons/react/24/outline';
 
-import useEnrollmentStatusTypes from '../hooks/useEnrollmentStatusTypes';
+import useStatusTypes from '../../common/hooks/useStatusTypes';
 import StatusProgress from '../../common/components/StatusProgress';
-import Accordion from '../../common/components/Accordion';
+import Accordion from '@/components/ui/Accordion/Accordion';
 import { getInterfaceLabel } from '../../common/utils/utils';
 import defaultNextImageLoader from '../../common/utils/defaultNextImageLoader';
 import SubscriptionList from './SubscriptionList';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import useActivateEnrollment from '../hooks/useActivateEnrollment';
 import useModal from '../../modal/hooks/useModal';
 import AlertMessage from '../../modal/components/AlertMessage';
@@ -17,15 +17,16 @@ import useTerminateEnrollment from '../hooks/useTerminateEnrollment';
 import useSendEnrollmentEmail from '../hooks/useSendEnrollmentEmail';
 import DangerMessage from '../../modal/components/DangerMessage';
 import EnrollmentDetailHeader from './EnrollmentDetailHeader';
-import JSONView from '../../common/components/JSONView';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import JSONView from '@/components/ui/JSONView';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import { IEnrollment } from '../../../gql/types';
 
 const EnrollmentDetail = ({ enrollment }: { enrollment: IEnrollment }) => {
   const { formatMessage } = useIntl();
   const { setModal } = useModal();
 
-  const { enrollmentStatusTypes } = useEnrollmentStatusTypes();
+  const { statusTypes: enrollmentStatusTypes } =
+    useStatusTypes('EnrollmentStatus');
   const { activateEnrollment } = useActivateEnrollment();
   const { terminateEnrollment } = useTerminateEnrollment();
   const { sendEnrollmentEmail } = useSendEnrollmentEmail();
diff --git a/admin-ui/src/modules/enrollment/components/EnrollmentDetailHeader.tsx b/admin-ui/src/modules/enrollment/components/EnrollmentDetailHeader.tsx
index b3cec1a08d..e3b99ada34 100644
--- a/admin-ui/src/modules/enrollment/components/EnrollmentDetailHeader.tsx
+++ b/admin-ui/src/modules/enrollment/components/EnrollmentDetailHeader.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
 
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
-import Badge from '../../common/components/Badge';
-import DetailHeader from '../../common/components/DetailHeader';
+import Badge from '@/components/ui/Badge';
+import DetailHeader from '@/components/ui/DetailHeader';
 import { normalizeCurrencyISOCode } from '../../common/utils/utils';
 
 const EnrollmentDetailHeader = ({ enrollment }) => {
diff --git a/admin-ui/src/modules/enrollment/components/EnrollmentListItem.tsx b/admin-ui/src/modules/enrollment/components/EnrollmentListItem.tsx
index 3983b3d124..b125c8c0ed 100644
--- a/admin-ui/src/modules/enrollment/components/EnrollmentListItem.tsx
+++ b/admin-ui/src/modules/enrollment/components/EnrollmentListItem.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 
 import Table from '../../common/components/Table';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
diff --git a/admin-ui/src/modules/enrollment/components/SubscriptionList.tsx b/admin-ui/src/modules/enrollment/components/SubscriptionList.tsx
index d9c0f13638..93714da0e8 100644
--- a/admin-ui/src/modules/enrollment/components/SubscriptionList.tsx
+++ b/admin-ui/src/modules/enrollment/components/SubscriptionList.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 
-import NoData from '../../common/components/NoData';
-import Badge from '../../common/components/Badge';
+import NoData from '@/components/ui/NoData';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 
diff --git a/admin-ui/src/modules/enrollment/hooks/useEnrollmentStatusTypes.ts b/admin-ui/src/modules/enrollment/hooks/useEnrollmentStatusTypes.ts
deleted file mode 100644
index 2255452778..0000000000
--- a/admin-ui/src/modules/enrollment/hooks/useEnrollmentStatusTypes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { gql } from '@apollo/client';
-import { useQuery } from '@apollo/client/react';
-import {
-  IEnrollmentStatusQuery,
-  IEnrollmentStatusQueryVariables,
-} from '../../../gql/types';
-
-const EnrollmentStatusTypes = gql`
-  query EnrollmentStatus {
-    enrollmentStatusTypes: __type(name: "EnrollmentStatus") {
-      options: enumValues {
-        value: name
-        label: description
-      }
-    }
-  }
-`;
-
-const useEnrollmentStatusTypes = () => {
-  const { data, loading, error } = useQuery<
-    IEnrollmentStatusQuery,
-    IEnrollmentStatusQueryVariables
-  >(EnrollmentStatusTypes);
-
-  const enrollmentStatusTypes = data?.enrollmentStatusTypes?.options || [];
-
-  return {
-    enrollmentStatusTypes,
-    loading,
-    error,
-  };
-};
-
-export default useEnrollmentStatusTypes;
diff --git a/admin-ui/src/modules/enrollment/index.ts b/admin-ui/src/modules/enrollment/index.ts
index f3a6f4ae68..4392c42bd7 100644
--- a/admin-ui/src/modules/enrollment/index.ts
+++ b/admin-ui/src/modules/enrollment/index.ts
@@ -1,6 +1,5 @@
 export { default as useActivateEnrollment } from './hooks/useActivateEnrollment';
 export { default as useEnrollment } from './hooks/useEnrollment';
-export { default as useEnrollmentStatusTypes } from './hooks/useEnrollmentStatusTypes';
 export { default as useEnrollments } from './hooks/useEnrollments';
 export { default as useSendEnrollmentEmail } from './hooks/useSendEnrollmentEmail';
 export { default as useTerminateEnrollment } from './hooks/useTerminateEnrollment';
diff --git a/admin-ui/src/modules/event/components/EventDetail.tsx b/admin-ui/src/modules/event/components/EventDetail.tsx
index 9addbb9399..e74fc2d198 100644
--- a/admin-ui/src/modules/event/components/EventDetail.tsx
+++ b/admin-ui/src/modules/event/components/EventDetail.tsx
@@ -1,9 +1,9 @@
 import { useIntl } from 'react-intl';
-import Accordion from '../../common/components/Accordion';
-import AccordionHeader from '../../common/components/AccordionHeader';
-import Badge from '../../common/components/Badge';
-import JSONView from '../../common/components/JSONView';
-import NoData from '../../common/components/NoData';
+import Accordion from '@/components/ui/Accordion/Accordion';
+import AccordionHeader from '@/components/ui/Accordion/AccordionHeader';
+import Badge from '@/components/ui/Badge';
+import JSONView from '@/components/ui/JSONView';
+import NoData from '@/components/ui/NoData';
 
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 
diff --git a/admin-ui/src/modules/event/components/EventListItem.tsx b/admin-ui/src/modules/event/components/EventListItem.tsx
index db878e511c..604c64bb9b 100644
--- a/admin-ui/src/modules/event/components/EventListItem.tsx
+++ b/admin-ui/src/modules/event/components/EventListItem.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 
diff --git a/admin-ui/src/modules/filter/components/FilterDetail.tsx b/admin-ui/src/modules/filter/components/FilterDetail.tsx
index 39e289dc22..7192e938a2 100644
--- a/admin-ui/src/modules/filter/components/FilterDetail.tsx
+++ b/admin-ui/src/modules/filter/components/FilterDetail.tsx
@@ -7,7 +7,7 @@ import {
 
 import { toast } from 'react-toastify';
 import SelectOptions from '../../common/components/SelectOptions';
-import Tab from '../../common/components/Tab';
+import Tab from '@/components/ui/Tab';
 import FilterTextForm from './FilterTextForm';
 import FilterOptions from './FilterOptions';
 import FilterSummary from './FilterSummary';
diff --git a/admin-ui/src/modules/filter/components/FilterExport.tsx b/admin-ui/src/modules/filter/components/FilterExport.tsx
index 25482a6a47..281a44f921 100644
--- a/admin-ui/src/modules/filter/components/FilterExport.tsx
+++ b/admin-ui/src/modules/filter/components/FilterExport.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import { useIntl } from 'react-intl';
 import { useFilterExport } from '../hooks/useFilterExport';
 import useFiltersCount from '../hooks/useFiltersCount';
diff --git a/admin-ui/src/modules/filter/components/FilterForm.tsx b/admin-ui/src/modules/filter/components/FilterForm.tsx
index 22f16141f3..9b385ede35 100644
--- a/admin-ui/src/modules/filter/components/FilterForm.tsx
+++ b/admin-ui/src/modules/filter/components/FilterForm.tsx
@@ -3,14 +3,15 @@ import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
 import useAuth from '../../Auth/useAuth';
-import DeleteButton from '../../common/components/DeleteButton';
+import Button from '@/components/ui/Button';
+import { TrashIcon } from '@heroicons/react/20/solid';
 import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObject';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
+import FormErrors from '@/components/ui/form/FormErrors';
 
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, {
   OnSubmitSuccessType,
   OnSubmitType,
@@ -125,7 +126,13 @@ const FilterForm = ({
                       })}
                     />
                     <div className="ml-2 shrink-0 mt-8">
-                      <DeleteButton onClick={() => removeConfig(index)} />
+                      <Button
+                        variant="danger"
+                        size="xs"
+                        rounded="full"
+                        icon={<TrashIcon className="h-5 w-5" />}
+                        onClick={() => removeConfig(index)}
+                      />
                     </div>
                   </div>
                 );
diff --git a/admin-ui/src/modules/filter/components/FilterImport.tsx b/admin-ui/src/modules/filter/components/FilterImport.tsx
index 6687672aff..91d778ac7c 100644
--- a/admin-ui/src/modules/filter/components/FilterImport.tsx
+++ b/admin-ui/src/modules/filter/components/FilterImport.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { IRoleAction } from '../../../gql/types';
 import { useIntl } from 'react-intl';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import useAuth from '../../Auth/useAuth';
 import useModal from '../../modal/hooks/useModal';
 import { useCSVImport } from '../../common/hooks/useCSVImport';
diff --git a/admin-ui/src/modules/filter/components/FilterImportForm.tsx b/admin-ui/src/modules/filter/components/FilterImportForm.tsx
index a46a501cf7..0df942a7f6 100644
--- a/admin-ui/src/modules/filter/components/FilterImportForm.tsx
+++ b/admin-ui/src/modules/filter/components/FilterImportForm.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import parseCSV from 'papaparse';
 import { useIntl } from 'react-intl';
 import { CSVRow, downloadCSV } from '../../common/utils/csvUtils';
diff --git a/admin-ui/src/modules/filter/components/FilterList.tsx b/admin-ui/src/modules/filter/components/FilterList.tsx
index 27ea8e40ec..6d3063b8ce 100644
--- a/admin-ui/src/modules/filter/components/FilterList.tsx
+++ b/admin-ui/src/modules/filter/components/FilterList.tsx
@@ -2,7 +2,7 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../../gql/types';
 
 import useAuth from '../../Auth/useAuth';
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import InfiniteScroll from '../../common/components/InfiniteScroll';
 import Table from '../../common/components/Table';
 import useFilters from '../hooks/useFilters';
diff --git a/admin-ui/src/modules/filter/components/FilterListItem.tsx b/admin-ui/src/modules/filter/components/FilterListItem.tsx
index a7619f97c1..9d46bc63c5 100644
--- a/admin-ui/src/modules/filter/components/FilterListItem.tsx
+++ b/admin-ui/src/modules/filter/components/FilterListItem.tsx
@@ -4,7 +4,7 @@ import { IRoleAction } from '../../../gql/types';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import useAuth from '../../Auth/useAuth';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 
diff --git a/admin-ui/src/modules/filter/components/FilterOptionForm.tsx b/admin-ui/src/modules/filter/components/FilterOptionForm.tsx
index ef8983c57c..ce10b5eb21 100644
--- a/admin-ui/src/modules/filter/components/FilterOptionForm.tsx
+++ b/admin-ui/src/modules/filter/components/FilterOptionForm.tsx
@@ -2,8 +2,8 @@ import { useIntl } from 'react-intl';
 import useAuth from '../../Auth/useAuth';
 import Form from '../../forms/components/Form';
 
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 
 const FilterOptionForm = ({
diff --git a/admin-ui/src/modules/filter/components/FilterOptionsListItem.tsx b/admin-ui/src/modules/filter/components/FilterOptionsListItem.tsx
index 9079cd1572..79971e096d 100644
--- a/admin-ui/src/modules/filter/components/FilterOptionsListItem.tsx
+++ b/admin-ui/src/modules/filter/components/FilterOptionsListItem.tsx
@@ -1,13 +1,13 @@
 import { useIntl } from 'react-intl';
 import { useState } from 'react';
 
-import TextField from '../../forms/components/TextField';
+import TextField from '@/components/ui/form/TextField';
 import Form from '../../forms/components/Form';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useUpdateFilterTexts from '../hooks/useUpdateFilterTexts';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import useApp from '../../common/hooks/useApp';
 
 const FilterOptionsListItem = ({ filterId, option, onDelete }) => {
diff --git a/admin-ui/src/modules/filter/components/FilterTextForm.tsx b/admin-ui/src/modules/filter/components/FilterTextForm.tsx
index 09adb7c94d..db078e87d2 100644
--- a/admin-ui/src/modules/filter/components/FilterTextForm.tsx
+++ b/admin-ui/src/modules/filter/components/FilterTextForm.tsx
@@ -5,8 +5,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 
 import Form from '../../forms/components/Form';
 
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useUpdateFilterTexts from '../hooks/useUpdateFilterTexts';
 import useTranslatedFilterTexts from '../hooks/useTranslatedFilterTexts';
diff --git a/admin-ui/src/modules/language/components/LanguageForm.tsx b/admin-ui/src/modules/language/components/LanguageForm.tsx
index ad9ec931b6..cbc8b51c82 100644
--- a/admin-ui/src/modules/language/components/LanguageForm.tsx
+++ b/admin-ui/src/modules/language/components/LanguageForm.tsx
@@ -2,10 +2,10 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../../gql/types';
 
 import useAuth from '../../Auth/useAuth';
-import Toggle from '../../common/components/Toggle';
+import Toggle from '@/components/ui/Toggle';
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm from '../../forms/hooks/useForm';
 import { validateLanguage } from '../../forms/lib/validators';
 
diff --git a/admin-ui/src/modules/language/components/LanguageListItem.tsx b/admin-ui/src/modules/language/components/LanguageListItem.tsx
index b04a07405b..65dbd6720a 100644
--- a/admin-ui/src/modules/language/components/LanguageListItem.tsx
+++ b/admin-ui/src/modules/language/components/LanguageListItem.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 import { normalizeLanguageISOCode } from '../../common/utils/utils';
diff --git a/admin-ui/src/modules/modal/components/ImportResultMessage.tsx b/admin-ui/src/modules/modal/components/ImportResultMessage.tsx
index 716f1487d1..a3a9a46df6 100644
--- a/admin-ui/src/modules/modal/components/ImportResultMessage.tsx
+++ b/admin-ui/src/modules/modal/components/ImportResultMessage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 
 interface ImportResult {
   success: number;
diff --git a/admin-ui/src/modules/order/components/DiscountList.tsx b/admin-ui/src/modules/order/components/DiscountList.tsx
index 7e08644330..cac38591a9 100644
--- a/admin-ui/src/modules/order/components/DiscountList.tsx
+++ b/admin-ui/src/modules/order/components/DiscountList.tsx
@@ -2,9 +2,9 @@ import { useIntl } from 'react-intl';
 import { Fragment } from 'react';
 
 import Table from '../../common/components/Table';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import { useFormatPrice } from '../../common/utils/utils';
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 
 const triggerColor = {
   SYSTEM: 'teal',
diff --git a/admin-ui/src/modules/order/components/LatestOrders.tsx b/admin-ui/src/modules/order/components/LatestOrders.tsx
index a772defdcf..5630252cf5 100644
--- a/admin-ui/src/modules/order/components/LatestOrders.tsx
+++ b/admin-ui/src/modules/order/components/LatestOrders.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import { convertSortFieldsToQueryFormat } from '../../common/utils/utils';
 import useOrders from '../hooks/useOrders';
 import OrderList from './OrderList';
diff --git a/admin-ui/src/modules/order/components/OrderDetail.tsx b/admin-ui/src/modules/order/components/OrderDetail.tsx
index db14cf85d8..7e818841a7 100644
--- a/admin-ui/src/modules/order/components/OrderDetail.tsx
+++ b/admin-ui/src/modules/order/components/OrderDetail.tsx
@@ -10,7 +10,7 @@ import OrderDetailPayment from './OrderDetailPayment';
 import OrderDetailDelivery from './OrderDetailDelivery';
 import OrderDetailAddresses from './OrderDetailAddresses';
 import DiscountList from './DiscountList';
-import useOrderStatusTypes from '../hooks/useOrderStatusTypes';
+import useStatusTypes from '../../common/hooks/useStatusTypes';
 
 import useConfirmOrder from '../hooks/useConfirmOrder';
 import useModal from '../../modal/hooks/useModal';
@@ -32,7 +32,7 @@ const OrderDetail = ({ order }) => {
   const { rejectOrder } = useRejectOrder();
   const { hasRole } = useAuth();
 
-  const { orderStatusType } = useOrderStatusTypes();
+  const { statusTypes: orderStatusType } = useStatusTypes('OrderStatus');
 
   if (!order) return null;
 
diff --git a/admin-ui/src/modules/order/components/OrderDetailDelivery.tsx b/admin-ui/src/modules/order/components/OrderDetailDelivery.tsx
index 1d00330507..ba879a0db3 100644
--- a/admin-ui/src/modules/order/components/OrderDetailDelivery.tsx
+++ b/admin-ui/src/modules/order/components/OrderDetailDelivery.tsx
@@ -7,7 +7,7 @@ import { PlusIcon } from '@heroicons/react/24/outline';
 import { toast } from 'react-toastify';
 import { getInterfaceLabel, useFormatPrice } from '../../common/utils/utils';
 import useDeliveryProviderTypes from '../../delivery-provider/hooks/useDeliveryProviderTypes';
-import useDeliveryStatusTypes from '../../delivery-provider/hooks/useDeliveryStatusTypes';
+import useStatusTypes from '../../common/hooks/useStatusTypes';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 import AlertMessage from '../../modal/components/AlertMessage';
 import useModal from '../../modal/hooks/useModal';
@@ -18,7 +18,9 @@ import useAuth from '../../Auth/useAuth';
 const OrderDetailDelivery = ({ order }) => {
   const { deliveryProviderType } = useDeliveryProviderTypes();
   const { setModal } = useModal();
-  const { deliveryStatusType } = useDeliveryStatusTypes();
+  const { statusTypes: deliveryStatusType } = useStatusTypes(
+    'OrderDeliveryStatus',
+  );
   const { deliverOrder } = useDeliverOrder();
   const { formatPrice } = useFormatPrice();
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/order/components/OrderDetailHeader.tsx b/admin-ui/src/modules/order/components/OrderDetailHeader.tsx
index 8ae44bb95a..a4eecc6783 100644
--- a/admin-ui/src/modules/order/components/OrderDetailHeader.tsx
+++ b/admin-ui/src/modules/order/components/OrderDetailHeader.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
-import DetailHeader from '../../common/components/DetailHeader';
+import DetailHeader from '@/components/ui/DetailHeader';
 
 const OrderDetailHeader = ({ order }) => {
   const { formatMessage, locale } = useIntl();
diff --git a/admin-ui/src/modules/order/components/OrderDetailItem.tsx b/admin-ui/src/modules/order/components/OrderDetailItem.tsx
index 27726cf9b5..22a0a06793 100644
--- a/admin-ui/src/modules/order/components/OrderDetailItem.tsx
+++ b/admin-ui/src/modules/order/components/OrderDetailItem.tsx
@@ -2,7 +2,7 @@ import { useIntl } from 'react-intl';
 import Link from 'next/link';
 import { useFormatPrice } from '../../common/utils/utils';
 import generateUniqueId from '../../common/utils/getUniqueId';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const OrderDetailItem = ({ item }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/order/components/OrderDetailPayment.tsx b/admin-ui/src/modules/order/components/OrderDetailPayment.tsx
index 93a9135917..837e6da7c0 100644
--- a/admin-ui/src/modules/order/components/OrderDetailPayment.tsx
+++ b/admin-ui/src/modules/order/components/OrderDetailPayment.tsx
@@ -10,14 +10,15 @@ import useModal from '../../modal/hooks/useModal';
 import usePayOrder from '../hooks/usePayOrder';
 import { getInterfaceLabel, useFormatPrice } from '../../common/utils/utils';
 import usePaymentProviderTypes from '../../payment-providers/hooks/usePaymentProviderTypes';
-import usePaymentStatusTypes from '../../payment-providers/hooks/usePaymentStatusTypes';
+import useStatusTypes from '../../common/hooks/useStatusTypes';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 import StatusInformation from '../../common/components/StatusInformation';
 import useAuth from '../../Auth/useAuth';
 
 const OrderDetailPayment = ({ order }) => {
   const { paymentProviderType } = usePaymentProviderTypes();
-  const { paymentStatusTypes } = usePaymentStatusTypes();
+  const { statusTypes: paymentStatusTypes } =
+    useStatusTypes('OrderPaymentStatus');
   const { formatDateTime } = useFormatDateTime();
   const { formatPrice } = useFormatPrice();
 
diff --git a/admin-ui/src/modules/order/components/OrderFilters.tsx b/admin-ui/src/modules/order/components/OrderFilters.tsx
index 5f498e0663..a6cc32a238 100644
--- a/admin-ui/src/modules/order/components/OrderFilters.tsx
+++ b/admin-ui/src/modules/order/components/OrderFilters.tsx
@@ -5,7 +5,7 @@ import MultipleSelect from '../../common/components/MultipleSelect';
 import StatusFilter from '../../common/components/StatusFilter';
 import { extractQuery } from '../../common/utils/normalizeFilterKeys';
 import { normalizeQuery } from '../../common/utils/utils';
-import DateRangeFilterInput from '../../common/components/DateRangeFilterInput';
+import DateRangeFilterInput from '@/components/ui/DateRangeFilterInput';
 import { useMemo } from 'react';
 
 const ORDER_STATUSES = ['PENDING', 'REJECTED', 'CONFIRMED', 'FULFILLED'];
diff --git a/admin-ui/src/modules/order/components/OrderList.tsx b/admin-ui/src/modules/order/components/OrderList.tsx
index 3885affd8e..2d71fd4818 100644
--- a/admin-ui/src/modules/order/components/OrderList.tsx
+++ b/admin-ui/src/modules/order/components/OrderList.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 import Table from '../../common/components/Table';
 import OrderListItem from './OrderListItem';
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 
 const OrderList = ({ orders, showUser, loading, sortable }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/order/components/OrderListItem.tsx b/admin-ui/src/modules/order/components/OrderListItem.tsx
index 132326defc..243c8ef03c 100644
--- a/admin-ui/src/modules/order/components/OrderListItem.tsx
+++ b/admin-ui/src/modules/order/components/OrderListItem.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 import formatUsername from '../../common/utils/formatUsername';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
diff --git a/admin-ui/src/modules/order/components/OrderStatusBadge.tsx b/admin-ui/src/modules/order/components/OrderStatusBadge.tsx
index 47754a3250..790cb28b89 100644
--- a/admin-ui/src/modules/order/components/OrderStatusBadge.tsx
+++ b/admin-ui/src/modules/order/components/OrderStatusBadge.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import { ORDER_STATUSES } from '../../common/data/miscellaneous';
 
 type OrderStatus =
diff --git a/admin-ui/src/modules/order/hooks/useOrderStatusTypes.ts b/admin-ui/src/modules/order/hooks/useOrderStatusTypes.ts
deleted file mode 100644
index 4d0fb91171..0000000000
--- a/admin-ui/src/modules/order/hooks/useOrderStatusTypes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { gql } from '@apollo/client';
-import { useQuery } from '@apollo/client/react';
-import {
-  IOrderStatusQuery,
-  IOrderStatusQueryVariables,
-} from '../../../gql/types';
-
-const OrderStatusTypesQuery = gql`
-  query OrderStatus {
-    orderStatusType: __type(name: "OrderStatus") {
-      options: enumValues {
-        value: name
-        label: description
-      }
-    }
-  }
-`;
-
-const useOrderStatusTypes = () => {
-  const { data, loading, error } = useQuery<
-    IOrderStatusQuery,
-    IOrderStatusQueryVariables
-  >(OrderStatusTypesQuery);
-
-  const orderStatusType = data?.orderStatusType?.options || [];
-
-  return {
-    orderStatusType,
-    loading,
-    error,
-  };
-};
-
-export default useOrderStatusTypes;
diff --git a/admin-ui/src/modules/order/index.ts b/admin-ui/src/modules/order/index.ts
index df0b1d9060..7e653e97bc 100644
--- a/admin-ui/src/modules/order/index.ts
+++ b/admin-ui/src/modules/order/index.ts
@@ -1,7 +1,6 @@
 export { default as useConfirmOrder } from './hooks/useConfirmOrder';
 export { default as useDeliverOrder } from './hooks/useDeliverOrder';
 export { default as useOrder } from './hooks/useOrder';
-export { default as useOrderStatusTypes } from './hooks/useOrderStatusTypes';
 export { default as useOrders } from './hooks/useOrders';
 export { default as usePayOrder } from './hooks/usePayOrder';
 export { default as useRejectOrder } from './hooks/useRejectOrder';
diff --git a/admin-ui/src/modules/payment-providers/hooks/usePaymentStatusTypes.ts b/admin-ui/src/modules/payment-providers/hooks/usePaymentStatusTypes.ts
deleted file mode 100644
index 9e1a383836..0000000000
--- a/admin-ui/src/modules/payment-providers/hooks/usePaymentStatusTypes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { gql } from '@apollo/client';
-import { useQuery } from '@apollo/client/react';
-import {
-  IOrderPaymentStatusQuery,
-  IOrderPaymentStatusQueryVariables,
-} from '../../../gql/types';
-
-const PaymentStatusTypesQuery = gql`
-  query OrderPaymentStatus {
-    paymentStatusTypes: __type(name: "OrderPaymentStatus") {
-      options: enumValues {
-        value: name
-        label: description
-      }
-    }
-  }
-`;
-
-const usePaymentStatusTypes = () => {
-  const { data, loading, error } = useQuery<
-    IOrderPaymentStatusQuery,
-    IOrderPaymentStatusQueryVariables
-  >(PaymentStatusTypesQuery);
-
-  const paymentStatusTypes = data?.paymentStatusTypes?.options || [];
-
-  return {
-    paymentStatusTypes,
-    loading,
-    error,
-  };
-};
-
-export default usePaymentStatusTypes;
diff --git a/admin-ui/src/modules/payment-providers/index.ts b/admin-ui/src/modules/payment-providers/index.ts
index d0a3567b46..271c184ca7 100644
--- a/admin-ui/src/modules/payment-providers/index.ts
+++ b/admin-ui/src/modules/payment-providers/index.ts
@@ -3,6 +3,5 @@ export { default as usePaymentInterfacesByType } from './hooks/usePaymentInterfa
 export { default as usePaymentProvider } from './hooks/usePaymentProvider';
 export { default as usePaymentProviderTypes } from './hooks/usePaymentProviderTypes';
 export { default as usePaymentProviders } from './hooks/usePaymentProviders';
-export { default as usePaymentStatusTypes } from './hooks/usePaymentStatusTypes';
 export { default as useRemovePaymentProvider } from './hooks/useRemovePaymentProvider';
 export { default as useUpdatePaymentProvider } from './hooks/useUpdatePaymentProvider';
diff --git a/admin-ui/src/modules/product-review/components/ProductReviewForm.tsx b/admin-ui/src/modules/product-review/components/ProductReviewForm.tsx
index d60516ed0c..81dbb9ea67 100644
--- a/admin-ui/src/modules/product-review/components/ProductReviewForm.tsx
+++ b/admin-ui/src/modules/product-review/components/ProductReviewForm.tsx
@@ -4,10 +4,10 @@ import { IRoleAction } from '../../../gql/types';
 import useAuth from '../../Auth/useAuth';
 import Form from '../../forms/components/Form';
 
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm from '../../forms/hooks/useForm';
-import TextAreaField from '../../forms/components/TextAreaField';
+import TextAreaField from '@/components/ui/form/TextAreaField';
 
 const ProductReviewForm = ({
   onSubmit,
diff --git a/admin-ui/src/modules/product-review/components/ProductReviewReportCommentForm.tsx b/admin-ui/src/modules/product-review/components/ProductReviewReportCommentForm.tsx
index 141cdf2f73..4353bb9c63 100644
--- a/admin-ui/src/modules/product-review/components/ProductReviewReportCommentForm.tsx
+++ b/admin-ui/src/modules/product-review/components/ProductReviewReportCommentForm.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextAreaField from '../../forms/components/TextAreaField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextAreaField from '@/components/ui/form/TextAreaField';
 import useForm, {
   OnSubmitSuccessType,
   OnSubmitType,
diff --git a/admin-ui/src/modules/product-review/components/ProductReviews.tsx b/admin-ui/src/modules/product-review/components/ProductReviews.tsx
index 7695c16283..76790ad1e6 100644
--- a/admin-ui/src/modules/product-review/components/ProductReviews.tsx
+++ b/admin-ui/src/modules/product-review/components/ProductReviews.tsx
@@ -4,7 +4,7 @@ import ProductReviewsItem from './ProductReviewsItem';
 import ProductReviewsReport from './ProductReviewsReport';
 import ProductReviewForm from './ProductReviewForm';
 import useCreateProductReview from '../hooks/useCreateProductReview';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 
 const ProductReviews = ({ productId }) => {
   const { productReviews, loadMore, reviewsCount } =
diff --git a/admin-ui/src/modules/product-review/components/ProductReviewsItem.tsx b/admin-ui/src/modules/product-review/components/ProductReviewsItem.tsx
index 4aa7b648f9..3706baf475 100644
--- a/admin-ui/src/modules/product-review/components/ProductReviewsItem.tsx
+++ b/admin-ui/src/modules/product-review/components/ProductReviewsItem.tsx
@@ -7,17 +7,17 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../../gql/types';
 
 import { toast } from 'react-toastify';
-import classNames from 'classnames';
-import DeleteButton from '../../common/components/DeleteButton';
+import clsx from 'clsx';
+import Button from '@/components/ui/Button';
+import { TrashIcon } from '@heroicons/react/20/solid';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 import DangerMessage from '../../modal/components/DangerMessage';
 import useModal from '../../modal/hooks/useModal';
 import useRemoveProductReview from '../hooks/useRemoveProductReview';
-import Badge from '../../common/components/Badge';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import Badge from '@/components/ui/Badge';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import formatUsername from '../../common/utils/formatUsername';
 import useAddProductReviewVote from '../hooks/useAddProductReviewVote';
-import Button from '../../common/components/Button';
 import useRemoveProductReviewVote from '../hooks/useRemoveProductReviewVote';
 import useAuth from '../../Auth/useAuth';
 import useCurrentUser from '../../accounts/hooks/useCurrentUser';
@@ -121,7 +121,7 @@ const ProductReviewsItem = ({
   return (
     <div
       key={review._id}
-      className={classNames(
+      className={clsx(
         'mb-4 rounded-lg shadow-sm bg-white dark:bg-slate-800 p-4',
         {
           'border-rose-200 bg-rose-50 dark:bg-rose-950': review.deleted,
@@ -246,7 +246,7 @@ const ProductReviewsItem = ({
               title="Report review"
             >
               <FlagIcon
-                className={classNames('h-4 w-4', {
+                className={clsx('h-4 w-4', {
                   'text-orange-600 dark:text-orange-400': hasAlreadyVoted(
                     voteTypes.REPORT,
                   ),
@@ -258,7 +258,13 @@ const ProductReviewsItem = ({
             </button>
           )}
           {canDeleteReview && (
-            <DeleteButton onClick={() => onRemove(review._id)} className="" />
+            <Button
+              variant="danger"
+              size="xs"
+              rounded="full"
+              icon={<TrashIcon className="h-5 w-5" />}
+              onClick={() => onRemove(review._id)}
+            />
           )}
           {review.deleted && (
             <Badge
diff --git a/admin-ui/src/modules/product-review/components/ProductReviewsList.tsx b/admin-ui/src/modules/product-review/components/ProductReviewsList.tsx
index 50afce0737..0b69423f3f 100644
--- a/admin-ui/src/modules/product-review/components/ProductReviewsList.tsx
+++ b/admin-ui/src/modules/product-review/components/ProductReviewsList.tsx
@@ -1,5 +1,5 @@
 import { useIntl } from 'react-intl';
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import ProductReviewsItem from './ProductReviewsItem';
 
 const ProductReviewsList = ({
diff --git a/admin-ui/src/modules/product/components/BundleItemScaffoldForm.tsx b/admin-ui/src/modules/product/components/BundleItemScaffoldForm.tsx
index 460f4f38c8..2d7ff78eb1 100644
--- a/admin-ui/src/modules/product/components/BundleItemScaffoldForm.tsx
+++ b/admin-ui/src/modules/product/components/BundleItemScaffoldForm.tsx
@@ -4,9 +4,9 @@ import { IProductType, IRoleAction } from '../../../gql/types';
 import { useIntl } from 'react-intl';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import Form from '../../forms/components/Form';
-import TextField from '../../forms/components/TextField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import SelectField from '../../forms/components/SelectField';
+import TextField from '@/components/ui/form/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import SelectField from '@/components/ui/form/SelectField';
 import useAuth from '../../Auth/useAuth';
 import useScaffoldBundleItem from '../hooks/useScaffoldBundleItem';
 
diff --git a/admin-ui/src/modules/product/components/BundleItemsList.tsx b/admin-ui/src/modules/product/components/BundleItemsList.tsx
index acf67d52dd..24bd6b888b 100644
--- a/admin-ui/src/modules/product/components/BundleItemsList.tsx
+++ b/admin-ui/src/modules/product/components/BundleItemsList.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
-import Loading from '../../common/components/Loading';
-import NoData from '../../common/components/NoData';
+import Loading from '@/components/ui/Loading';
+import NoData from '@/components/ui/NoData';
 import DangerMessage from '../../modal/components/DangerMessage';
 import useModal from '../../modal/hooks/useModal';
 import useProductBundleItems from '../hooks/useProductBundleItems';
diff --git a/admin-ui/src/modules/product/components/BundleProductsForm.tsx b/admin-ui/src/modules/product/components/BundleProductsForm.tsx
index 36e03a8130..22377bc7e9 100644
--- a/admin-ui/src/modules/product/components/BundleProductsForm.tsx
+++ b/admin-ui/src/modules/product/components/BundleProductsForm.tsx
@@ -6,12 +6,12 @@ import { ISortDirection } from '../../../gql/types';
 import useAuth from '../../Auth/useAuth';
 import FilterableDropdown from '../../common/components/FilterableDropdown';
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useCreateProductBundleItem from '../hooks/useCreateProductBundleItem';
 import useProducts from '../hooks/useProducts';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import { SparklesIcon } from 'lucide-react';
 import useModal from '../../modal/hooks/useModal';
 import BundleItemScaffoldForm from './BundleItemScaffoldForm';
diff --git a/admin-ui/src/modules/product/components/BundleProductsListItem.tsx b/admin-ui/src/modules/product/components/BundleProductsListItem.tsx
index f746bc14c2..e110ba859d 100644
--- a/admin-ui/src/modules/product/components/BundleProductsListItem.tsx
+++ b/admin-ui/src/modules/product/components/BundleProductsListItem.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
-import Badge from '../../common/components/Badge';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
-import NoImage from '../../common/components/NoImage';
+import Badge from '@/components/ui/Badge';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
+import NoImage from '@/components/ui/NoImage';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 import generateUniqueId from '../../common/utils/getUniqueId';
 
diff --git a/admin-ui/src/modules/product/components/CommerceForm.tsx b/admin-ui/src/modules/product/components/CommerceForm.tsx
index fc84a925fb..bc5eb40112 100644
--- a/admin-ui/src/modules/product/components/CommerceForm.tsx
+++ b/admin-ui/src/modules/product/components/CommerceForm.tsx
@@ -9,13 +9,13 @@ import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObj
 import useCountries from '../../country/hooks/useCountries';
 import useCurrencies from '../../currency/hooks/useCurrencies';
 
-import CheckboxField from '../../forms/components/CheckboxField';
+import CheckboxField from '@/components/ui/form/CheckboxField';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
-import Button from '../../common/components/Button';
+import FormErrors from '@/components/ui/form/FormErrors';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
+import Button from '@/components/ui/Button';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import {
   validateProductCommerce,
diff --git a/admin-ui/src/modules/product/components/ProductAssignmentForm.tsx b/admin-ui/src/modules/product/components/ProductAssignmentForm.tsx
index fe7f6c4ac1..d0792e7c47 100644
--- a/admin-ui/src/modules/product/components/ProductAssignmentForm.tsx
+++ b/admin-ui/src/modules/product/components/ProductAssignmentForm.tsx
@@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
 import FormWrapper from '../../common/components/FormWrapper';
-import HelpText from '../../common/components/HelpText';
+import HelpText from '@/components/ui/HelpText';
 import useProductAssignments from '../hooks/useProductAssignments';
 import Table from '../../common/components/Table';
 import { matrixGenerator } from '../utils/productAssignment.utils';
 import ProductAssignmentRow from './ProductAssignmentRow';
-import InfoTextBanner from '../../common/components/InfoTextBanner';
+import InfoTextBanner from '@/components/ui/InfoTextBanner';
 
 const ProductAssignmentForm = ({ proxyId, disabled = false }) => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/modules/product/components/ProductAssignmentRow.tsx b/admin-ui/src/modules/product/components/ProductAssignmentRow.tsx
index c881217cfb..8aef88e218 100644
--- a/admin-ui/src/modules/product/components/ProductAssignmentRow.tsx
+++ b/admin-ui/src/modules/product/components/ProductAssignmentRow.tsx
@@ -3,7 +3,8 @@ import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
 import { ISortDirection } from '../../../gql/types';
-import DeleteButton from '../../common/components/DeleteButton';
+import Button from '@/components/ui/Button';
+import { TrashIcon } from '@heroicons/react/20/solid';
 import UnchainedSelect from '../../common/components/UnchainedSelect';
 import deBounce from '../../common/utils/deBounce';
 import DangerMessage from '../../modal/components/DangerMessage';
@@ -19,7 +20,6 @@ import Table from '../../common/components/Table';
 import Link from 'next/link';
 import generateUniqueId from '../../common/utils/getUniqueId';
 import { SparklesIcon } from '@heroicons/react/24/outline';
-import Button from '../../common/components/Button';
 import ProductAssignmentScaffoldForm from './ProductAssignmentScaffoldForm';
 import useAuth from '../../Auth/useAuth';
 
@@ -160,7 +160,13 @@ const ProductAssignmentRow = ({
       </Table.Cell>
       <Table.Cell>
         {variationProduct && variationProduct._id && (
-          <DeleteButton onClick={handleRemoveAssignment} />
+          <Button
+            variant="danger"
+            size="xs"
+            rounded="full"
+            icon={<TrashIcon className="h-5 w-5" />}
+            onClick={handleRemoveAssignment}
+          />
         )}
       </Table.Cell>
     </Table.Row>
diff --git a/admin-ui/src/modules/product/components/ProductAssignmentScaffoldForm.tsx b/admin-ui/src/modules/product/components/ProductAssignmentScaffoldForm.tsx
index e83c9ce742..b72feaaf35 100644
--- a/admin-ui/src/modules/product/components/ProductAssignmentScaffoldForm.tsx
+++ b/admin-ui/src/modules/product/components/ProductAssignmentScaffoldForm.tsx
@@ -2,12 +2,12 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../../gql/types';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import Form from '../../forms/components/Form';
-import TextField from '../../forms/components/TextField';
-import SubmitButton from '../../forms/components/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 import useAuth from '../../Auth/useAuth';
 import { useMemo } from 'react';
 import useScaffoldVariationProduct from '../hooks/useScaffoldVariationProduct';
-import SelectField from '../../forms/components/SelectField';
+import SelectField from '@/components/ui/form/SelectField';
 import { IProductType } from '../../../gql/types';
 import useApp from '../../common/hooks/useApp';
 
diff --git a/admin-ui/src/modules/product/components/ProductDetail.tsx b/admin-ui/src/modules/product/components/ProductDetail.tsx
index d2da44caa6..1a26e86ad8 100644
--- a/admin-ui/src/modules/product/components/ProductDetail.tsx
+++ b/admin-ui/src/modules/product/components/ProductDetail.tsx
@@ -23,16 +23,16 @@ import SubscriptionForm from './SubscriptionForm';
 import SupplyForm from './SupplyForm';
 import ProductVariation from './ProductVariation';
 import WarehousingForm from './WarehousingForm';
-import Tab from '../../common/components/Tab';
+import Tab from '@/components/ui/Tab';
 import ProductReviews from '../../product-review/components/ProductReviews';
 import BundleProducts from './BundleProducts';
-import TagList from '../../common/components/TagList';
+import TagList from '@/components/ui/Tag/TagList';
 import useUpdateProduct from '../hooks/useUpdateProduct';
 import useAuth from '../../Auth/useAuth';
 import ProductAssignmentForm from './ProductAssignmentForm';
 import ProductTokenizationForm from './ProductTokenizationForm';
 import DisplayExtendedFields from '../../common/components/DisplayExtendedFields';
-import ErrorBoundary from '../../common/components/ErrorBoundary';
+import ErrorBoundary from '@/components/ui/ErrorBoundary';
 import { IProductDetailFragment, IProductStatus } from '../../../gql/types';
 import useApp from '../../common/hooks/useApp';
 
diff --git a/admin-ui/src/modules/product/components/ProductExport.tsx b/admin-ui/src/modules/product/components/ProductExport.tsx
index f9de8e1d47..02497975b7 100644
--- a/admin-ui/src/modules/product/components/ProductExport.tsx
+++ b/admin-ui/src/modules/product/components/ProductExport.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import { useIntl } from 'react-intl';
 import { useProductExport } from '../hooks/useProductExport';
 import useProductsCount from '../hooks/useProductsCount';
diff --git a/admin-ui/src/modules/product/components/ProductForm.tsx b/admin-ui/src/modules/product/components/ProductForm.tsx
index 9b27ac66f3..961df19d4b 100644
--- a/admin-ui/src/modules/product/components/ProductForm.tsx
+++ b/admin-ui/src/modules/product/components/ProductForm.tsx
@@ -4,15 +4,15 @@ import { IProductType, IRoleAction } from '../../../gql/types';
 import useAuth from '../../Auth/useAuth';
 
 import Form from '../../forms/components/Form';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TagInputField from '../../forms/components/TagInputField';
-import TextField from '../../forms/components/TextField';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TagInputField from '@/components/ui/form/TagInputField';
+import TextField from '@/components/ui/form/TextField';
 import useForm, {
   OnSubmitSuccessType,
   OnSubmitType,
 } from '../../forms/hooks/useForm';
-import HelpText from '../../common/components/HelpText';
+import HelpText from '@/components/ui/HelpText';
 import useApp from '../../common/hooks/useApp';
 
 const ProductForm = ({
diff --git a/admin-ui/src/modules/product/components/ProductImageGallery.tsx b/admin-ui/src/modules/product/components/ProductImageGallery.tsx
index d340a678a9..6e83f0c7bf 100644
--- a/admin-ui/src/modules/product/components/ProductImageGallery.tsx
+++ b/admin-ui/src/modules/product/components/ProductImageGallery.tsx
@@ -1,4 +1,4 @@
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import { IProductMediaFragment } from '../../../gql/types';
 
 interface ProductImageGalleryProps {
diff --git a/admin-ui/src/modules/product/components/ProductImport.tsx b/admin-ui/src/modules/product/components/ProductImport.tsx
index dd6e67f974..5cdf365ad5 100644
--- a/admin-ui/src/modules/product/components/ProductImport.tsx
+++ b/admin-ui/src/modules/product/components/ProductImport.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import useAuth from '../../Auth/useAuth';
 import useModal from '../../modal/hooks/useModal';
 import { useCSVImport } from '../../common/hooks/useCSVImport';
diff --git a/admin-ui/src/modules/product/components/ProductImportForm.tsx b/admin-ui/src/modules/product/components/ProductImportForm.tsx
index e16bafc3f7..84fd00ec93 100644
--- a/admin-ui/src/modules/product/components/ProductImportForm.tsx
+++ b/admin-ui/src/modules/product/components/ProductImportForm.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Button from '../../common/components/Button';
+import Button from '@/components/ui/Button';
 import parseCSV from 'papaparse';
 import { useIntl } from 'react-intl';
 import { CSVRow, downloadCSV } from '../../common/utils/csvUtils';
diff --git a/admin-ui/src/modules/product/components/ProductList.tsx b/admin-ui/src/modules/product/components/ProductList.tsx
index 736db14670..2070774447 100644
--- a/admin-ui/src/modules/product/components/ProductList.tsx
+++ b/admin-ui/src/modules/product/components/ProductList.tsx
@@ -1,5 +1,5 @@
 import { useIntl } from 'react-intl';
-import Loading from '../../common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import InfiniteScroll from '../../common/components/InfiniteScroll';
 import Table from '../../common/components/Table';
 import useProducts from '../hooks/useProducts';
diff --git a/admin-ui/src/modules/product/components/ProductListItem.tsx b/admin-ui/src/modules/product/components/ProductListItem.tsx
index 51a01c679f..b06348476b 100644
--- a/admin-ui/src/modules/product/components/ProductListItem.tsx
+++ b/admin-ui/src/modules/product/components/ProductListItem.tsx
@@ -3,7 +3,7 @@ import { IRoleAction } from '../../../gql/types';
 
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import MediaAvatar from '../../common/components/MediaAvatar';
 import Table from '../../common/components/Table';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
diff --git a/admin-ui/src/modules/product/components/ProductMediaList.tsx b/admin-ui/src/modules/product/components/ProductMediaList.tsx
index 9b5a53f1da..5697433167 100644
--- a/admin-ui/src/modules/product/components/ProductMediaList.tsx
+++ b/admin-ui/src/modules/product/components/ProductMediaList.tsx
@@ -3,7 +3,7 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 
 import ProductMediaListItem from './ProductMediaListItem';
 import { IProductMedia } from '../../../gql/types';
diff --git a/admin-ui/src/modules/product/components/ProductStatusBadge.tsx b/admin-ui/src/modules/product/components/ProductStatusBadge.tsx
index ade155db5f..e28538f910 100644
--- a/admin-ui/src/modules/product/components/ProductStatusBadge.tsx
+++ b/admin-ui/src/modules/product/components/ProductStatusBadge.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 type ProductStatusBadgeProps = {
   status: 'DRAFT' | 'ACTIVE' | 'DELETED';
 };
diff --git a/admin-ui/src/modules/product/components/ProductTextsForm.tsx b/admin-ui/src/modules/product/components/ProductTextsForm.tsx
index aaab63916d..d76bfd7472 100644
--- a/admin-ui/src/modules/product/components/ProductTextsForm.tsx
+++ b/admin-ui/src/modules/product/components/ProductTextsForm.tsx
@@ -4,9 +4,9 @@ import { IRoleAction } from '../../../gql/types';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
+import SubmitButton from '@/components/ui/form/SubmitButton';
 
-import TextField from '../../forms/components/TextField';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useTranslatedProductTexts from '../hooks/useTranslatedProductTexts';
 import useUpdateProductTexts from '../hooks/useUpdateProductTexts';
@@ -14,9 +14,9 @@ import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
 import SelfDocumentingView from '../../common/components/SelfDocumentingView';
 
-import MarkdownTextAreaField from '../../forms/components/MarkdownTextAreaField';
-import TagInputField from '../../forms/components/TagInputField';
-import HelpText from '../../common/components/HelpText';
+import MarkdownTextAreaField from '@/components/ui/form/MarkdownTextAreaField';
+import TagInputField from '@/components/ui/form/TagInputField';
+import HelpText from '@/components/ui/HelpText';
 import useApp from '../../common/hooks/useApp';
 import useShopInfo from '../../common/hooks/useShopInfo';
 
diff --git a/admin-ui/src/modules/product/components/ProductTokenizationForm.tsx b/admin-ui/src/modules/product/components/ProductTokenizationForm.tsx
index cdce313152..f9df157d84 100644
--- a/admin-ui/src/modules/product/components/ProductTokenizationForm.tsx
+++ b/admin-ui/src/modules/product/components/ProductTokenizationForm.tsx
@@ -7,9 +7,9 @@ import FormWrapper from '../../common/components/FormWrapper';
 import SelfDocumentingView from '../../common/components/SelfDocumentingView';
 import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObject';
 import Form from '../../forms/components/Form';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useProductTokenization from '../hooks/useProductTokenization';
 import useSmartContractStandards from '../hooks/useSmartContractStandards';
diff --git a/admin-ui/src/modules/product/components/ProductVariation.tsx b/admin-ui/src/modules/product/components/ProductVariation.tsx
index c58bcf0fa1..71a9834f5e 100644
--- a/admin-ui/src/modules/product/components/ProductVariation.tsx
+++ b/admin-ui/src/modules/product/components/ProductVariation.tsx
@@ -2,9 +2,9 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../../gql/types';
 
 import { PlusIcon } from '@heroicons/react/24/outline';
-import Loading from '../../common/components/Loading';
-import NoData from '../../common/components/NoData';
-import Button from '../../common/components/Button';
+import Loading from '@/components/ui/Loading';
+import NoData from '@/components/ui/NoData';
+import Button from '@/components/ui/Button';
 import { OnSubmitType } from '../../forms/hooks/useForm';
 import useCreateProductVariation from '../hooks/useCreateProductVariation';
 import useProductVariations from '../hooks/useProductVariations';
@@ -13,10 +13,10 @@ import useAuth from '../../Auth/useAuth';
 import useModal from '../../modal/hooks/useModal';
 import useForm from '../../forms/hooks/useForm';
 import Form from '../../forms/components/Form';
-import FieldWithHelp from '../../forms/components/FieldWithHelp';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import HelpText from '../../common/components/HelpText';
+import FieldWithHelp from '@/components/ui/form/FieldWithHelp';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import HelpText from '@/components/ui/HelpText';
 import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObject';
 
 import ProductVariationsList from './ProductVariationsList';
diff --git a/admin-ui/src/modules/product/components/ProductVariationForm.tsx b/admin-ui/src/modules/product/components/ProductVariationForm.tsx
index cefceac7f5..c6b75033cf 100644
--- a/admin-ui/src/modules/product/components/ProductVariationForm.tsx
+++ b/admin-ui/src/modules/product/components/ProductVariationForm.tsx
@@ -7,10 +7,10 @@ import FormWrapper from '../../common/components/FormWrapper';
 import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObject';
 
 import Form from '../../forms/components/Form';
-import FieldWithHelp from '../../forms/components/FieldWithHelp';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import HelpText from '../../common/components/HelpText';
+import FieldWithHelp from '@/components/ui/form/FieldWithHelp';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import HelpText from '@/components/ui/HelpText';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useProductVariationTypes from '../hooks/useProductVariationTypes';
 
diff --git a/admin-ui/src/modules/product/components/ProductVariationOptionForm.tsx b/admin-ui/src/modules/product/components/ProductVariationOptionForm.tsx
index 0478399fc4..0d8c949613 100644
--- a/admin-ui/src/modules/product/components/ProductVariationOptionForm.tsx
+++ b/admin-ui/src/modules/product/components/ProductVariationOptionForm.tsx
@@ -3,9 +3,9 @@ import { IRoleAction } from '../../../gql/types';
 
 import useAuth from '../../Auth/useAuth';
 import Form from '../../forms/components/Form';
-import FieldWithHelp from '../../forms/components/FieldWithHelp';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import FieldWithHelp from '@/components/ui/form/FieldWithHelp';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 
 const ProductVariationOptionForm = ({
diff --git a/admin-ui/src/modules/product/components/ProductVariationOptionItem.tsx b/admin-ui/src/modules/product/components/ProductVariationOptionItem.tsx
index a643c0931b..371e44e8d6 100644
--- a/admin-ui/src/modules/product/components/ProductVariationOptionItem.tsx
+++ b/admin-ui/src/modules/product/components/ProductVariationOptionItem.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import TableActionsMenu from '../../common/components/TableActionsMenu';
 
 import Form from '../../forms/components/Form';
-import TextField from '../../forms/components/TextField';
+import TextField from '@/components/ui/form/TextField';
 import useForm from '../../forms/hooks/useForm';
 import useUpdateProductVariationTexts from '../hooks/useUpdateProductVariationTexts';
 import useApp from '../../common/hooks/useApp';
diff --git a/admin-ui/src/modules/product/components/ProductVariationOptionsList.tsx b/admin-ui/src/modules/product/components/ProductVariationOptionsList.tsx
index 06ec444803..5e303ac046 100644
--- a/admin-ui/src/modules/product/components/ProductVariationOptionsList.tsx
+++ b/admin-ui/src/modules/product/components/ProductVariationOptionsList.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
-import NoData from '../../common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import { OnSubmitType } from '../../forms/hooks/useForm';
 import DangerMessage from '../../modal/components/DangerMessage';
 import useModal from '../../modal/hooks/useModal';
diff --git a/admin-ui/src/modules/product/components/ProductVariationsList.tsx b/admin-ui/src/modules/product/components/ProductVariationsList.tsx
index cb5340014e..9716d7da7e 100644
--- a/admin-ui/src/modules/product/components/ProductVariationsList.tsx
+++ b/admin-ui/src/modules/product/components/ProductVariationsList.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
-import Accordion from '../../common/components/Accordion';
+import Accordion from '@/components/ui/Accordion/Accordion';
 import DangerMessage from '../../modal/components/DangerMessage';
 import useModal from '../../modal/hooks/useModal';
 import useRemoveProductVariation from '../hooks/useRemoveProductVariation';
diff --git a/admin-ui/src/modules/product/components/SubscriptionForm.tsx b/admin-ui/src/modules/product/components/SubscriptionForm.tsx
index fd3602740d..a9e271bb91 100644
--- a/admin-ui/src/modules/product/components/SubscriptionForm.tsx
+++ b/admin-ui/src/modules/product/components/SubscriptionForm.tsx
@@ -9,9 +9,9 @@ import FormWrapper from '../../common/components/FormWrapper';
 import SelfDocumentingView from '../../common/components/SelfDocumentingView';
 import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObject';
 import Form from '../../forms/components/Form';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useProductPlan from '../hooks/useProductPlan';
 import useProductPlanConfigurationOptions from '../hooks/useProductPlanConfigurationOptions';
diff --git a/admin-ui/src/modules/product/components/SupplyForm.tsx b/admin-ui/src/modules/product/components/SupplyForm.tsx
index dedf423885..1dc24f29d0 100644
--- a/admin-ui/src/modules/product/components/SupplyForm.tsx
+++ b/admin-ui/src/modules/product/components/SupplyForm.tsx
@@ -5,8 +5,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import { validateInteger } from '../../forms/lib/validators';
 import useProductSupply from '../hooks/useProductSupply';
diff --git a/admin-ui/src/modules/product/components/VariationDisplay.tsx b/admin-ui/src/modules/product/components/VariationDisplay.tsx
index 3eba839879..505c3ca241 100644
--- a/admin-ui/src/modules/product/components/VariationDisplay.tsx
+++ b/admin-ui/src/modules/product/components/VariationDisplay.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
-import Badge from '../../common/components/Badge';
-import Portal from '../../common/components/Portal';
+import Badge from '@/components/ui/Badge';
+import Portal from '@/components/ui/Portal/Portal';
 import { PencilSquareIcon, TrashIcon } from '@heroicons/react/20/solid';
 import { useMenuPosition } from '../hooks/useMenuPosition';
 
diff --git a/admin-ui/src/modules/product/components/VariationForm.tsx b/admin-ui/src/modules/product/components/VariationForm.tsx
index f35908d0d6..5a9e79f13c 100644
--- a/admin-ui/src/modules/product/components/VariationForm.tsx
+++ b/admin-ui/src/modules/product/components/VariationForm.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
 import Form from '../../forms/components/Form';
-import TextField from '../../forms/components/TextField';
-import Button from '../../common/components/Button';
-import Badge from '../../common/components/Badge';
+import TextField from '@/components/ui/form/TextField';
+import Button from '@/components/ui/Button';
+import Badge from '@/components/ui/Badge';
 import useForm, { OnSubmitType } from '../../forms/hooks/useForm';
 import useUpdateProductVariationTexts from '../hooks/useUpdateProductVariationTexts';
 import useApp from '../../common/hooks/useApp';
diff --git a/admin-ui/src/modules/product/components/WarehousingForm.tsx b/admin-ui/src/modules/product/components/WarehousingForm.tsx
index 72e3ebac4a..fefa32deb8 100644
--- a/admin-ui/src/modules/product/components/WarehousingForm.tsx
+++ b/admin-ui/src/modules/product/components/WarehousingForm.tsx
@@ -7,8 +7,8 @@ import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
 
 import Form from '../../forms/components/Form';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm from '../../forms/hooks/useForm';
 import useProductWarehousing from '../hooks/useProductWarehousing';
 import useUpdateProductWarehousing from '../hooks/useUpdateProductWarehousing';
diff --git a/admin-ui/src/modules/quotation/components/QuotationConfigurationForm.tsx b/admin-ui/src/modules/quotation/components/QuotationConfigurationForm.tsx
index a88b0d3722..35134c6b7e 100644
--- a/admin-ui/src/modules/quotation/components/QuotationConfigurationForm.tsx
+++ b/admin-ui/src/modules/quotation/components/QuotationConfigurationForm.tsx
@@ -1,8 +1,8 @@
 import { CheckIcon } from '@heroicons/react/24/outline';
 import { useIntl } from 'react-intl';
-import SaveAndCancelButtons from '../../common/components/SaveAndCancelButtons';
+import SaveAndCancelButtons from '@/components/ui/SaveAndCancelButtons';
 import Form from '../../forms/components/Form';
-import JSONAreaField from '../../forms/components/JSONAreaField';
+import JSONAreaField from '@/components/ui/form/JSONAreaField';
 import useForm from '../../forms/hooks/useForm';
 
 const QuotationConfigurationForm = ({
diff --git a/admin-ui/src/modules/quotation/components/QuotationDetail.tsx b/admin-ui/src/modules/quotation/components/QuotationDetail.tsx
index 6206293d9e..232baf4ebe 100644
--- a/admin-ui/src/modules/quotation/components/QuotationDetail.tsx
+++ b/admin-ui/src/modules/quotation/components/QuotationDetail.tsx
@@ -3,8 +3,8 @@ import { useIntl } from 'react-intl';
 
 import { PaperAirplaneIcon, XCircleIcon } from '@heroicons/react/24/outline';
 import StatusProgress from '../../common/components/StatusProgress';
-import useQuotationStatusTypes from '../hooks/useQuotationStatusTypes';
-import Button from '../../common/components/Button';
+import useStatusTypes from '../../common/hooks/useStatusTypes';
+import Button from '@/components/ui/Button';
 import useModal from '../../modal/hooks/useModal';
 
 import useVerifyQuotation from '../hooks/useVerifyQuotation';
@@ -14,14 +14,15 @@ import useRejectQuotation from '../hooks/useRejectQuotation';
 import generateUniqueId from '../../common/utils/getUniqueId';
 import QuotationConfigurationForm from './QuotationConfigurationForm';
 import useMakeQuotationProposal from '../hooks/useMakeQuotationProposal';
-import JSONView from '../../common/components/JSONView';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import JSONView from '@/components/ui/JSONView';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const QuotationDetail = ({ quotation }) => {
   const { formatMessage } = useIntl();
   const { setModal } = useModal();
 
-  const { quotationStatusTypes } = useQuotationStatusTypes();
+  const { statusTypes: quotationStatusTypes } =
+    useStatusTypes('QuotationStatus');
   const { VerifyQuotation } = useVerifyQuotation();
   const { rejectQuotation } = useRejectQuotation();
   const { makeQuotationProposal } = useMakeQuotationProposal();
diff --git a/admin-ui/src/modules/quotation/components/QuotationDetailHeader.tsx b/admin-ui/src/modules/quotation/components/QuotationDetailHeader.tsx
index f1fdfe09f3..9e2b6c3e6d 100644
--- a/admin-ui/src/modules/quotation/components/QuotationDetailHeader.tsx
+++ b/admin-ui/src/modules/quotation/components/QuotationDetailHeader.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
 
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
-import Badge from '../../common/components/Badge';
-import DetailHeader from '../../common/components/DetailHeader';
+import Badge from '@/components/ui/Badge';
+import DetailHeader from '@/components/ui/DetailHeader';
 import { normalizeCurrencyISOCode } from '../../common/utils/utils';
 
 const QuotationDetailHeader = ({ quotation }) => {
diff --git a/admin-ui/src/modules/quotation/components/QuotationListItem.tsx b/admin-ui/src/modules/quotation/components/QuotationListItem.tsx
index 1a85f04556..65455341a2 100644
--- a/admin-ui/src/modules/quotation/components/QuotationListItem.tsx
+++ b/admin-ui/src/modules/quotation/components/QuotationListItem.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import MediaAvatar from '../../common/components/MediaAvatar';
 import Table from '../../common/components/Table';
 import formatUsername from '../../common/utils/formatUsername';
diff --git a/admin-ui/src/modules/quotation/hooks/useQuotationStatusTypes.ts b/admin-ui/src/modules/quotation/hooks/useQuotationStatusTypes.ts
deleted file mode 100644
index 41b2994e9c..0000000000
--- a/admin-ui/src/modules/quotation/hooks/useQuotationStatusTypes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { gql } from '@apollo/client';
-import { useQuery } from '@apollo/client/react';
-import {
-  IQuotationStatusQuery,
-  IQuotationStatusQueryVariables,
-} from '../../../gql/types';
-
-const QuotationStatusTypesQuery = gql`
-  query QuotationStatus {
-    quotationStatusType: __type(name: "QuotationStatus") {
-      options: enumValues {
-        value: name
-        label: description
-      }
-    }
-  }
-`;
-
-const useQuotationStatusTypes = () => {
-  const { data, loading, error } = useQuery<
-    IQuotationStatusQuery,
-    IQuotationStatusQueryVariables
-  >(QuotationStatusTypesQuery);
-
-  const quotationStatusTypes = data?.quotationStatusType?.options || [];
-
-  return {
-    quotationStatusTypes,
-    loading,
-    error,
-  };
-};
-
-export default useQuotationStatusTypes;
diff --git a/admin-ui/src/modules/quotation/index.ts b/admin-ui/src/modules/quotation/index.ts
index 8a5e1105d7..2deb384eb6 100644
--- a/admin-ui/src/modules/quotation/index.ts
+++ b/admin-ui/src/modules/quotation/index.ts
@@ -1,6 +1,5 @@
 export { default as useMakeQuotationProposal } from './hooks/useMakeQuotationProposal';
 export { default as useQuotation } from './hooks/useQuotation';
-export { default as useQuotationStatusTypes } from './hooks/useQuotationStatusTypes';
 export { default as useQuotations } from './hooks/useQuotations';
 export { default as useRejectQuotation } from './hooks/useRejectQuotation';
 export { default as useUserQuotations } from './hooks/useUserQuotations';
diff --git a/admin-ui/src/modules/token/components/TokenDetail.tsx b/admin-ui/src/modules/token/components/TokenDetail.tsx
index b536de8fbc..260a09aff5 100644
--- a/admin-ui/src/modules/token/components/TokenDetail.tsx
+++ b/admin-ui/src/modules/token/components/TokenDetail.tsx
@@ -1,12 +1,12 @@
 import Link from 'next/link';
 import generateUniqueId from '../../common/utils/getUniqueId';
-import ImageWithFallback from '../../common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import defaultNextImageLoader from '../../common/utils/defaultNextImageLoader';
 import { useIntl } from 'react-intl';
 import { TOKEN_STATUSES } from '../../common/data/miscellaneous';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
-import DetailHeader from '../../common/components/DetailHeader';
+import DetailHeader from '@/components/ui/DetailHeader';
 import shortenAddress from '../../common/utils/shortAddress';
 import { useFormatPrice } from '../../common/utils/utils';
 
diff --git a/admin-ui/src/modules/token/components/TokenListItem.tsx b/admin-ui/src/modules/token/components/TokenListItem.tsx
index 750e9017a3..0addb783f2 100644
--- a/admin-ui/src/modules/token/components/TokenListItem.tsx
+++ b/admin-ui/src/modules/token/components/TokenListItem.tsx
@@ -3,7 +3,7 @@ import Table from '../../common/components/Table';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 import formatUsername from '../../common/utils/formatUsername';
 import MediaAvatar from '../../common/components/MediaAvatar';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import { TOKEN_STATUSES } from '../../common/data/miscellaneous';
 
 const TokenListItem = ({ token }) => {
diff --git a/admin-ui/src/modules/work/components/AllocateWorkForm.tsx b/admin-ui/src/modules/work/components/AllocateWorkForm.tsx
index b79aea6000..b26b28a61b 100644
--- a/admin-ui/src/modules/work/components/AllocateWorkForm.tsx
+++ b/admin-ui/src/modules/work/components/AllocateWorkForm.tsx
@@ -4,14 +4,15 @@ import { IRoleAction } from '../../../gql/types';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 import useAuth from '../../Auth/useAuth';
-import DeleteButton from '../../common/components/DeleteButton';
+import Button from '@/components/ui/Button';
+import { TrashIcon } from '@heroicons/react/20/solid';
 import FormWrapper from '../../common/components/FormWrapper';
 import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObject';
 import Form from '../../forms/components/Form';
-import FormErrors from '../../forms/components/FormErrors';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import FormErrors from '@/components/ui/form/FormErrors';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, {
   OnSubmitSuccessType,
   OnSubmitType,
@@ -112,7 +113,13 @@ const AllocateWorkForm = () => {
                         </div>
                       </div>
                       <div className="ml-2 mt-5  shrink-0 sm:mt-4">
-                        <DeleteButton onClick={() => removeConfig(index)} />
+                        <Button
+                          variant="danger"
+                          size="xs"
+                          rounded="full"
+                          icon={<TrashIcon className="h-5 w-5" />}
+                          onClick={() => removeConfig(index)}
+                        />
                       </div>
                     </div>
                   );
diff --git a/admin-ui/src/modules/work/components/MessagesList.tsx b/admin-ui/src/modules/work/components/MessagesList.tsx
index f50143ce43..bc583eedee 100644
--- a/admin-ui/src/modules/work/components/MessagesList.tsx
+++ b/admin-ui/src/modules/work/components/MessagesList.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from 'react-intl';
 import Link from 'next/link';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 import { WORK_STATUSES } from '../../common/data/miscellaneous';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
diff --git a/admin-ui/src/modules/work/components/RetryForm.tsx b/admin-ui/src/modules/work/components/RetryForm.tsx
index 86d81ed83e..dd3b02348a 100644
--- a/admin-ui/src/modules/work/components/RetryForm.tsx
+++ b/admin-ui/src/modules/work/components/RetryForm.tsx
@@ -2,11 +2,11 @@ import { useRouter } from 'next/router';
 import { IWork } from '../../../gql/types';
 import { useIntl } from 'react-intl';
 import FormWrapper from '../../common/components/FormWrapper';
-import DatePickerField from '../../forms/components/DatePickerField';
+import DatePickerField from '@/components/ui/form/DatePickerField';
 import Form from '../../forms/components/Form';
-import JSONAreaField from '../../forms/components/JSONAreaField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import JSONAreaField from '@/components/ui/form/JSONAreaField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, {
   OnSubmitSuccessType,
   OnSubmitType,
diff --git a/admin-ui/src/modules/work/components/WorkDetail.tsx b/admin-ui/src/modules/work/components/WorkDetail.tsx
index 15f00ee4f3..0af535d329 100644
--- a/admin-ui/src/modules/work/components/WorkDetail.tsx
+++ b/admin-ui/src/modules/work/components/WorkDetail.tsx
@@ -2,12 +2,12 @@ import { useIntl } from 'react-intl';
 import Link from 'next/link';
 
 import { useEffect, useState } from 'react';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 import { WORK_STATUSES, getShadowStyle } from '../../common/data/miscellaneous';
-import JSONView from '../../common/components/JSONView';
+import JSONView from '@/components/ui/JSONView';
 import useFormatWorkDurations from '../utils/useFormatWorkDurations';
-import Tooltip from '../../common/components/ToolTip';
+import Tooltip from '@/components/ui/ToolTip';
 import RetryStatistics from './RetryStatistics';
 
 const WorkDetail = ({ work }) => {
diff --git a/admin-ui/src/modules/work/components/WorkFilter.tsx b/admin-ui/src/modules/work/components/WorkFilter.tsx
index 93db0ffa1c..7ed153d143 100644
--- a/admin-ui/src/modules/work/components/WorkFilter.tsx
+++ b/admin-ui/src/modules/work/components/WorkFilter.tsx
@@ -5,7 +5,7 @@ import MultipleSelect from '../../common/components/MultipleSelect';
 import StatusFilter from '../../common/components/StatusFilter';
 import { extractQuery } from '../../common/utils/normalizeFilterKeys';
 import { normalizeQuery } from '../../common/utils/utils';
-import DateRangeFilterInput from '../../common/components/DateRangeFilterInput';
+import DateRangeFilterInput from '@/components/ui/DateRangeFilterInput';
 
 const WORK_STATUSES = ['NEW', 'ALLOCATED', 'SUCCESS', 'FAILED', 'DELETED'];
 
diff --git a/admin-ui/src/modules/work/components/WorkForm.tsx b/admin-ui/src/modules/work/components/WorkForm.tsx
index 8d7dc4f332..3f9e1c4866 100644
--- a/admin-ui/src/modules/work/components/WorkForm.tsx
+++ b/admin-ui/src/modules/work/components/WorkForm.tsx
@@ -6,12 +6,12 @@ import useAuth from '../../Auth/useAuth';
 import FormWrapper from '../../common/components/FormWrapper';
 import convertArrayOfObjectToObject from '../../common/convertArrayOfObjectToObject';
 
-import DatePickerField from '../../forms/components/DatePickerField';
+import DatePickerField from '@/components/ui/form/DatePickerField';
 import Form from '../../forms/components/Form';
-import JSONAreaField from '../../forms/components/JSONAreaField';
-import SelectField from '../../forms/components/SelectField';
-import SubmitButton from '../../forms/components/SubmitButton';
-import TextField from '../../forms/components/TextField';
+import JSONAreaField from '@/components/ui/form/JSONAreaField';
+import SelectField from '@/components/ui/form/SelectField';
+import SubmitButton from '@/components/ui/form/SubmitButton';
+import TextField from '@/components/ui/form/TextField';
 import useForm, {
   OnSubmitSuccessType,
   OnSubmitType,
diff --git a/admin-ui/src/modules/work/components/WorkListItem.tsx b/admin-ui/src/modules/work/components/WorkListItem.tsx
index 4b6d24a6ae..c08a9fc55a 100644
--- a/admin-ui/src/modules/work/components/WorkListItem.tsx
+++ b/admin-ui/src/modules/work/components/WorkListItem.tsx
@@ -1,13 +1,13 @@
 import { useIntl } from 'react-intl';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
-import Badge from '../../common/components/Badge';
+import Badge from '@/components/ui/Badge';
 import Table from '../../common/components/Table';
 
 import { WORK_STATUSES } from '../../common/data/miscellaneous';
 import useFormatDateTime from '../../common/utils/useFormatDateTime';
 import useFormatWorkDurations from '../utils/useFormatWorkDurations';
-import Tooltip from '../../common/components/ToolTip';
+import Tooltip from '@/components/ui/ToolTip';
 import RetryStatistics from './RetryStatistics';
 
 const WorkListItem = ({ work }) => {
diff --git a/admin-ui/src/pages/403.tsx b/admin-ui/src/pages/403.tsx
index 7e531a5aa3..bb2058adb3 100644
--- a/admin-ui/src/pages/403.tsx
+++ b/admin-ui/src/pages/403.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import useCurrentUser from '../modules/accounts/hooks/useCurrentUser';
 import FormWrapper from '../modules/common/components/FormWrapper';
-import ImageWithFallback from '../modules/common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const NotAuthorized = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/404.tsx b/admin-ui/src/pages/404.tsx
index d8b7ff0ee1..01f1f4f69c 100644
--- a/admin-ui/src/pages/404.tsx
+++ b/admin-ui/src/pages/404.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import FormWrapper from '../modules/common/components/FormWrapper';
-import ImageWithFallback from '../modules/common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const NotFound = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/423.tsx b/admin-ui/src/pages/423.tsx
index 4bda0519ed..f96ce7509f 100644
--- a/admin-ui/src/pages/423.tsx
+++ b/admin-ui/src/pages/423.tsx
@@ -8,8 +8,8 @@ import logOut from '../modules/accounts/hooks/logOut';
 import { useApolloClient } from '@apollo/client/react';
 import { toast } from 'react-toastify';
 import FormWrapper from '../modules/common/components/FormWrapper';
-import ImageWithFallback from '../modules/common/components/ImageWithFallback';
-import Button from '../modules/common/components/Button';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
+import Button from '@/components/ui/Button';
 
 const Locked = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/500.tsx b/admin-ui/src/pages/500.tsx
index 319f21f4b6..34488f58bd 100644
--- a/admin-ui/src/pages/500.tsx
+++ b/admin-ui/src/pages/500.tsx
@@ -1,4 +1,4 @@
-import ErrorFallback from '../modules/common/components/ErrorFallback';
+import ErrorFallback from '@/components/ui/ErrorFallback';
 
 const InternalError = () => {
   return <ErrorFallback />;
diff --git a/admin-ui/src/pages/_app.tsx b/admin-ui/src/pages/_app.tsx
index 8478362fb8..6ac13a25a9 100644
--- a/admin-ui/src/pages/_app.tsx
+++ b/admin-ui/src/pages/_app.tsx
@@ -14,12 +14,12 @@ import ThemeWrapper from '../modules/common/components/ThemeWrapper';
 import * as matomo from '../modules/common/utils/matomo';
 import ThemeToggle from '../modules/common/components/ThemeToggle';
 import UnchainedContextWrapper from '../modules/UnchainedContext/UnchainedContextWrapper';
-import ErrorBoundary from '../modules/common/components/ErrorBoundary';
+import ErrorBoundary from '@/components/ui/ErrorBoundary';
 import Head from 'next/head';
 import Script from 'next/script';
 import AuthWrapper from '../modules/Auth/AuthWrapper';
 import { ChatProvider } from '../modules/copilot/ChatContext';
-import ImageWithFallback from '../modules/common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import { AppContextWrapper } from '../modules/common/components/AppContext';
 
 const handleRouteChange = (url) => {
diff --git a/admin-ui/src/pages/_offline.tsx b/admin-ui/src/pages/_offline.tsx
index 4ba30b0742..88e4a85e40 100644
--- a/admin-ui/src/pages/_offline.tsx
+++ b/admin-ui/src/pages/_offline.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 import FormWrapper from '../modules/common/components/FormWrapper';
-import ImageWithFallback from '../modules/common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const Offline = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/account/forgot-password.tsx b/admin-ui/src/pages/account/forgot-password.tsx
index 64bfd9d9ef..f293989046 100644
--- a/admin-ui/src/pages/account/forgot-password.tsx
+++ b/admin-ui/src/pages/account/forgot-password.tsx
@@ -2,7 +2,7 @@ import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import ForgotPasswordForm from '../../modules/accounts/components/ForgotPasswordForm';
 import useForgotPassword from '../../modules/accounts/hooks/useForgotPassword';
-import ImageWithFallback from '../../modules/common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 import {
   OnSubmitSuccessType,
   OnSubmitType,
diff --git a/admin-ui/src/pages/account/index.tsx b/admin-ui/src/pages/account/index.tsx
index 91d776c5e4..0c213ea2aa 100644
--- a/admin-ui/src/pages/account/index.tsx
+++ b/admin-ui/src/pages/account/index.tsx
@@ -2,8 +2,8 @@ import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 
 import useCurrentUser from '../../modules/accounts/hooks/useCurrentUser';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 
 import UserSettings from '../../modules/accounts/components/UserSettings';
 import useDeleteUser from '../../modules/accounts/hooks/useDeleteUser';
diff --git a/admin-ui/src/pages/assortments/AssortmentDetailPage.tsx b/admin-ui/src/pages/assortments/AssortmentDetailPage.tsx
index b4c633ac10..45bed7f64e 100644
--- a/admin-ui/src/pages/assortments/AssortmentDetailPage.tsx
+++ b/admin-ui/src/pages/assortments/AssortmentDetailPage.tsx
@@ -3,14 +3,15 @@ import { IRoleAction } from '../../gql/types';
 
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/router';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import AssortmentDetail from '../../modules/assortment/components/AssortmentDetail';
 import useAssortment from '../../modules/assortment/hooks/useAssortment';
 import useFormatDateTime from '../../modules/common/utils/useFormatDateTime';
 import SelectOptions from '../../modules/common/components/SelectOptions';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import useUpdateAssortment from '../../modules/assortment/hooks/useUpdateAssortment';
 import useRemoveAssortment from '../../modules/assortment/hooks/useRemoveAssortment';
 import useAuth from '../../modules/Auth/useAuth';
@@ -251,7 +252,12 @@ const AssortmentDetailPage = ({ assortmentSlug }) => {
               />
             </div>
             {hasRole(IRoleAction.ManageAssortments) && (
-              <HeaderDeleteButton onClick={handleDeleteAssortment} />
+              <Button
+                variant="danger"
+                icon={<XMarkIcon className="h-5 w-5" />}
+                text="Delete"
+                onClick={handleDeleteAssortment}
+              />
             )}
           </div>
         </div>
diff --git a/admin-ui/src/pages/assortments/index.tsx b/admin-ui/src/pages/assortments/index.tsx
index 5293be25f7..fec53baad7 100644
--- a/admin-ui/src/pages/assortments/index.tsx
+++ b/admin-ui/src/pages/assortments/index.tsx
@@ -2,10 +2,10 @@ import { useIntl } from 'react-intl';
 import { IRoleAction } from '../../gql/types';
 
 import { useRouter } from 'next/router';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Toggle from '../../modules/common/components/Toggle';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
+import PageHeader from '@/components/ui/PageHeader';
+import Toggle from '@/components/ui/Toggle';
 
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 
@@ -17,7 +17,7 @@ import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import useAssortmentsCount from '../../modules/assortment/hooks/useAssortmentsCount';
 import AssortmentDetailPage from './AssortmentDetailPage';
 import LocaleWrapper from '../../modules/common/components/LocaleWrapper';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 import useApp from '../../modules/common/hooks/useApp';
 import AssortmentExport from '../../modules/assortment/components/AssortmentExport';
 import AssortmentImport from '../../modules/assortment/components/AssortmentImport';
diff --git a/admin-ui/src/pages/assortments/new.tsx b/admin-ui/src/pages/assortments/new.tsx
index 2f69b92690..01e323cc9a 100644
--- a/admin-ui/src/pages/assortments/new.tsx
+++ b/admin-ui/src/pages/assortments/new.tsx
@@ -3,9 +3,9 @@ import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 import AssortmentForm from '../../modules/assortment/components/AssortmentForm';
 import useCreateAssortment from '../../modules/assortment/hooks/useCreateAssortment';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import FormWrapper from '../../modules/common/components/FormWrapper';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import generateUniqueId from '../../modules/common/utils/getUniqueId';
 import LocaleWrapper from '../../modules/common/components/LocaleWrapper';
 
diff --git a/admin-ui/src/pages/country/CountryDetailPage.tsx b/admin-ui/src/pages/country/CountryDetailPage.tsx
index d05d4e67ad..f7ca69357f 100644
--- a/admin-ui/src/pages/country/CountryDetailPage.tsx
+++ b/admin-ui/src/pages/country/CountryDetailPage.tsx
@@ -4,8 +4,8 @@ import { IRoleAction } from '../../gql/types';
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import FormWrapper from '../../modules/common/components/FormWrapper';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 
 import CountryForm from '../../modules/country/components/CountryForm';
 import useCountry from '../../modules/country/hooks/useCountry';
@@ -13,8 +13,9 @@ import useRemoveCountry from '../../modules/country/hooks/useRemoveCountry';
 import useUpdateCountry from '../../modules/country/hooks/useUpdateCountry';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
 import useModal from '../../modules/modal/hooks/useModal';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
-import Loading from '../../modules/common/components/Loading';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import Loading from '@/components/ui/Loading';
 import { normalizeCountryISOCode } from '../../modules/common/utils/utils';
 import useAuth from '../../modules/Auth/useAuth';
 
@@ -84,7 +85,12 @@ const CountryDetailPage = ({ countryId }) => {
           headerText={normalizeCountryISOCode(locale, country?.isoCode)}
         />
         {hasRole(IRoleAction.ManageCountries) && (
-          <HeaderDeleteButton onClick={onDelete} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={onDelete}
+          />
         )}
       </div>
       {loading ? (
diff --git a/admin-ui/src/pages/country/index.tsx b/admin-ui/src/pages/country/index.tsx
index ec5acab297..7ce8cd8d05 100644
--- a/admin-ui/src/pages/country/index.tsx
+++ b/admin-ui/src/pages/country/index.tsx
@@ -3,12 +3,12 @@ import { IRoleAction } from '../../gql/types';
 
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/router';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Toggle from '../../modules/common/components/Toggle';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
+import Toggle from '@/components/ui/Toggle';
 
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 import CountryList from '../../modules/country/components/CountryList';
@@ -25,8 +25,8 @@ import {
 } from '../../modules/common/utils/utils';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import CountryDetailPage from './CountryDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
-import InfoTextBanner from '../../modules/common/components/InfoTextBanner';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
+import InfoTextBanner from '@/components/ui/InfoTextBanner';
 
 const Country = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/country/new.tsx b/admin-ui/src/pages/country/new.tsx
index 92f2ab3af2..4cf54dc53d 100644
--- a/admin-ui/src/pages/country/new.tsx
+++ b/admin-ui/src/pages/country/new.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
 
 import { useIntl } from 'react-intl';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import FormWrapper from '../../modules/common/components/FormWrapper';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import CountryForm from '../../modules/country/components/CountryForm';
 import useCreateCountry from '../../modules/country/hooks/useCreateCountry';
 
diff --git a/admin-ui/src/pages/currency/CurrencyDetailPage.tsx b/admin-ui/src/pages/currency/CurrencyDetailPage.tsx
index ba921be96e..d75ed95b1f 100644
--- a/admin-ui/src/pages/currency/CurrencyDetailPage.tsx
+++ b/admin-ui/src/pages/currency/CurrencyDetailPage.tsx
@@ -9,12 +9,13 @@ import CurrencyForm from '../../modules/currency/components/CurrencyForm';
 import useCurrency from '../../modules/currency/hooks/useCurrency';
 import useRemoveCurrency from '../../modules/currency/hooks/useRemoveCurrency';
 import useUpdateCurrency from '../../modules/currency/hooks/useUpdateCurrency';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 import useModal from '../../modules/modal/hooks/useModal';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
-import Loading from '../../modules/common/components/Loading';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import Loading from '@/components/ui/Loading';
 import { normalizeCurrencyISOCode } from '../../modules/common/utils/utils';
 import useAuth from '../../modules/Auth/useAuth';
 
@@ -75,7 +76,12 @@ const CurrencyDetailPage = ({ currencyId }) => {
           headerText={normalizeCurrencyISOCode(locale, currency?.isoCode)}
         />
         {hasRole(IRoleAction.ManageCurrencies) && (
-          <HeaderDeleteButton onClick={onDelete} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={onDelete}
+          />
         )}
       </div>
       {loading ? (
diff --git a/admin-ui/src/pages/currency/index.tsx b/admin-ui/src/pages/currency/index.tsx
index bb2c0e7489..6cd8545478 100644
--- a/admin-ui/src/pages/currency/index.tsx
+++ b/admin-ui/src/pages/currency/index.tsx
@@ -8,14 +8,14 @@ import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 import CurrencyList from '../../modules/currency/components/CurrencyList';
 import useCurrencies from '../../modules/currency/hooks/useCurrencies';
 import useRemoveCurrency from '../../modules/currency/hooks/useRemoveCurrency';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
-import ListHeader from '../../modules/common/components/ListHeader';
-import Toggle from '../../modules/common/components/Toggle';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
+import ListHeader from '@/components/ui/ListHeader';
+import Toggle from '@/components/ui/Toggle';
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
 import useModal from '../../modules/modal/hooks/useModal';
-import Loading from '../../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import useAuth from '../../modules/Auth/useAuth';
 import {
   convertSortFieldsToQueryFormat,
@@ -23,8 +23,8 @@ import {
 } from '../../modules/common/utils/utils';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import CurrencyDetailPage from './CurrencyDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
-import InfoTextBanner from '../../modules/common/components/InfoTextBanner';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
+import InfoTextBanner from '@/components/ui/InfoTextBanner';
 
 const Currencies = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/currency/new.tsx b/admin-ui/src/pages/currency/new.tsx
index 6eb30af16b..8d8e01d7fe 100644
--- a/admin-ui/src/pages/currency/new.tsx
+++ b/admin-ui/src/pages/currency/new.tsx
@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import FormWrapper from '../../modules/common/components/FormWrapper';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import CurrencyForm from '../../modules/currency/components/CurrencyForm';
 import useCreateCurrency from '../../modules/currency/hooks/useCreateCurrency';
 
diff --git a/admin-ui/src/pages/delivery-provider/DeliveryProviderDetailPage.tsx b/admin-ui/src/pages/delivery-provider/DeliveryProviderDetailPage.tsx
index e1aee93bde..f938814091 100644
--- a/admin-ui/src/pages/delivery-provider/DeliveryProviderDetailPage.tsx
+++ b/admin-ui/src/pages/delivery-provider/DeliveryProviderDetailPage.tsx
@@ -4,16 +4,17 @@ import { IDeliveryProviderPickUp, IRoleAction } from '../../gql/types';
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Loading from '../../modules/common/components/Loading';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
+import Loading from '@/components/ui/Loading';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
 import useModal from '../../modules/modal/hooks/useModal';
 import useRemoveDeliveryProvider from '../../modules/delivery-provider/hooks/useRemoveDeliveryProvider';
 import useUpdateDeliveryProvider from '../../modules/delivery-provider/hooks/useUpdateDeliveryProvider';
 import useDeliveryProvider from '../../modules/delivery-provider/hooks/useDeliveryProvider';
 import ProviderDetail from '../../modules/common/components/ProviderDetail';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { getInterfaceLabel } from '../../modules/common/utils/utils';
 import useAuth from '../../modules/Auth/useAuth';
 
@@ -94,7 +95,12 @@ const DeliveryProviderDetailPage = ({ deliveryProviderId }) => {
           )}
         />
         {hasRole(IRoleAction.ManageDeliveryProviders) && (
-          <HeaderDeleteButton onClick={handleOnClick} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={handleOnClick}
+          />
         )}
       </div>
       {loading ? (
diff --git a/admin-ui/src/pages/delivery-provider/index.tsx b/admin-ui/src/pages/delivery-provider/index.tsx
index 16b2800e65..3f1f55c79b 100644
--- a/admin-ui/src/pages/delivery-provider/index.tsx
+++ b/admin-ui/src/pages/delivery-provider/index.tsx
@@ -7,10 +7,10 @@ import { toast } from 'react-toastify';
 import { IDeliveryProviderType } from '../../gql/types';
 import useAuth from '../../modules/Auth/useAuth';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import ProvidersFilter from '../../modules/common/components/ProvidersFilter';
 import ProvidersList from '../../modules/common/components/ProvidersList';
 import useDeliveryProviders from '../../modules/delivery-provider/hooks/useDeliveryProviders';
diff --git a/admin-ui/src/pages/delivery-provider/new.tsx b/admin-ui/src/pages/delivery-provider/new.tsx
index 897974ad5f..c0815b2789 100644
--- a/admin-ui/src/pages/delivery-provider/new.tsx
+++ b/admin-ui/src/pages/delivery-provider/new.tsx
@@ -4,10 +4,10 @@ import { IRoleAction } from '../../gql/types';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 import useAuth from '../../modules/Auth/useAuth';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 
 import NewProviderForm from '../../modules/common/components/NewProviderForm';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import convertArrayOfObjectToObject from '../../modules/common/convertArrayOfObjectToObject';
 import useCreateDeliveryProvider from '../../modules/delivery-provider/hooks/useCreateDeliveryProvider';
 import useDeliveryInterfacesByType from '../../modules/delivery-provider/hooks/useDeliveryInterfacesByType';
diff --git a/admin-ui/src/pages/enrollments/EnrollmentDetailPage.tsx b/admin-ui/src/pages/enrollments/EnrollmentDetailPage.tsx
index d554b01216..14f08a727e 100644
--- a/admin-ui/src/pages/enrollments/EnrollmentDetailPage.tsx
+++ b/admin-ui/src/pages/enrollments/EnrollmentDetailPage.tsx
@@ -1,9 +1,9 @@
 import { useIntl } from 'react-intl';
 import { IEnrollment } from '../../gql/types';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import EnrollmentDetail from '../../modules/enrollment/components/EnrollmentDetail';
 import useEnrollment from '../../modules/enrollment/hooks/useEnrollment';
 
diff --git a/admin-ui/src/pages/enrollments/index.tsx b/admin-ui/src/pages/enrollments/index.tsx
index 1a200015db..7af7ce59fb 100644
--- a/admin-ui/src/pages/enrollments/index.tsx
+++ b/admin-ui/src/pages/enrollments/index.tsx
@@ -1,11 +1,11 @@
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 import EnrollmentList from '../../modules/enrollment/components/EnrollmentList';
 import useEnrollments from '../../modules/enrollment/hooks/useEnrollments';
@@ -14,11 +14,11 @@ import {
   normalizeQuery,
 } from '../../modules/common/utils/utils';
 
-import useEnrollmentStatusTypes from '../../modules/enrollment/hooks/useEnrollmentStatusTypes';
+import useStatusTypes from '../../modules/common/hooks/useStatusTypes';
 import StatusFilter from '../../modules/common/components/StatusFilter';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import EnrollmentDetailPage from './EnrollmentDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 import LocaleWrapper from '../../modules/common/components/LocaleWrapper';
 import useApp from '../../modules/common/hooks/useApp';
 
@@ -57,7 +57,8 @@ const EnrollmentListView = () => {
       forceLocale: selectedLocale,
     });
 
-  const { enrollmentStatusTypes } = useEnrollmentStatusTypes();
+  const { statusTypes: enrollmentStatusTypes } =
+    useStatusTypes('EnrollmentStatus');
 
   const ENROLLMENT_STATUS =
     enrollmentStatusTypes?.map(({ value }) => value) || [];
diff --git a/admin-ui/src/pages/events/EventDetailPage.tsx b/admin-ui/src/pages/events/EventDetailPage.tsx
index cdc66615ac..e90765b306 100644
--- a/admin-ui/src/pages/events/EventDetailPage.tsx
+++ b/admin-ui/src/pages/events/EventDetailPage.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import EventDetail from '../../modules/event/components/EventDetail';
 import useEvent from '../../modules/event/hooks/useEvent';
 
diff --git a/admin-ui/src/pages/events/index.tsx b/admin-ui/src/pages/events/index.tsx
index 62299bd6d1..4c4965fa04 100644
--- a/admin-ui/src/pages/events/index.tsx
+++ b/admin-ui/src/pages/events/index.tsx
@@ -1,11 +1,11 @@
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import { VariableIcon } from '@heroicons/react/24/outline';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 import EventList from '../../modules/event/components/EventList';
 import useEvents from '../../modules/event/hooks/useEvents';
@@ -16,11 +16,11 @@ import {
   convertSortFieldsToQueryFormat,
   normalizeQuery,
 } from '../../modules/common/utils/utils';
-import ListHeader from '../../modules/common/components/ListHeader';
+import ListHeader from '@/components/ui/ListHeader';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import EventDetailPage from './EventDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
-import DateRangeFilterInput from '../../modules/common/components/DateRangeFilterInput';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
+import DateRangeFilterInput from '@/components/ui/DateRangeFilterInput';
 import { useMemo } from 'react';
 
 const Events = () => {
diff --git a/admin-ui/src/pages/exports.tsx b/admin-ui/src/pages/exports.tsx
index 0e561d5a59..5da8d3975c 100644
--- a/admin-ui/src/pages/exports.tsx
+++ b/admin-ui/src/pages/exports.tsx
@@ -1,14 +1,14 @@
 import useRecentExports from '../modules/work/hooks/useRecentExports';
-import PageHeader from '../modules/common/components/PageHeader';
-import BreadCrumbs from '../modules/common/components/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import { useIntl } from 'react-intl';
 import Table from '../modules/common/components/Table';
 import Link from 'next/link';
 import useFormatDateTime from '../modules/common/utils/useFormatDateTime';
 import { convertSortFieldsToQueryFormat } from '../modules/common/utils/utils';
 import { useRouter } from 'next/router';
-import Accordion from '../modules/common/components/Accordion';
-import Button from '../modules/common/components/Button';
+import Accordion from '@/components/ui/Accordion/Accordion';
+import Button from '@/components/ui/Button';
 
 const RecentExports = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/filters/FilterDetailPage.tsx b/admin-ui/src/pages/filters/FilterDetailPage.tsx
index 5036efe425..519b2aaa66 100644
--- a/admin-ui/src/pages/filters/FilterDetailPage.tsx
+++ b/admin-ui/src/pages/filters/FilterDetailPage.tsx
@@ -5,10 +5,11 @@ import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import useAuth from '../../modules/Auth/useAuth';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import FilterDetail from '../../modules/filter/components/FilterDetail';
 import useFilter from '../../modules/filter/hooks/useFilter';
 import useRemoveFilter from '../../modules/filter/hooks/useRemoveFilter';
@@ -77,7 +78,12 @@ const FilterDetailPage = ({ filterId }) => {
           )}
         />
         {hasRole(IRoleAction.ManageFilters) && (
-          <HeaderDeleteButton onClick={onRemoveFilter} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={onRemoveFilter}
+          />
         )}
       </div>
 
diff --git a/admin-ui/src/pages/filters/index.tsx b/admin-ui/src/pages/filters/index.tsx
index 297e26032d..356f925265 100644
--- a/admin-ui/src/pages/filters/index.tsx
+++ b/admin-ui/src/pages/filters/index.tsx
@@ -4,10 +4,10 @@ import { IRoleAction } from '../../gql/types';
 import { toast } from 'react-toastify';
 import { useRouter } from 'next/router';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Toggle from '../../modules/common/components/Toggle';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
+import PageHeader from '@/components/ui/PageHeader';
+import Toggle from '@/components/ui/Toggle';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 import FilterList from '../../modules/filter/components/FilterList';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
@@ -22,7 +22,7 @@ import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import useFiltersCount from '../../modules/filter/hooks/useFiltersCount';
 import FilterDetailPage from './FilterDetailPage';
 import LocaleWrapper from '../../modules/common/components/LocaleWrapper';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 import FilterExport from '../../modules/filter/components/FilterExport';
 import FilterImport from '../../modules/filter/components/FilterImport';
 
diff --git a/admin-ui/src/pages/filters/new.tsx b/admin-ui/src/pages/filters/new.tsx
index fb30a57697..a416adf3fd 100644
--- a/admin-ui/src/pages/filters/new.tsx
+++ b/admin-ui/src/pages/filters/new.tsx
@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import FormWrapper from '../../modules/common/components/FormWrapper';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import FilterForm from '../../modules/filter/components/FilterForm';
 import useCreateFilter from '../../modules/filter/hooks/useCreateFilter';
 import {
diff --git a/admin-ui/src/pages/language/LanguageDetailPage.tsx b/admin-ui/src/pages/language/LanguageDetailPage.tsx
index b08da5a703..21181a36fb 100644
--- a/admin-ui/src/pages/language/LanguageDetailPage.tsx
+++ b/admin-ui/src/pages/language/LanguageDetailPage.tsx
@@ -8,13 +8,14 @@ import LanguageForm from '../../modules/language/components/LanguageForm';
 import useLanguage from '../../modules/language/hooks/useLanguage';
 import useRemoveLanguage from '../../modules/language/hooks/useRemoveLanguage';
 import useUpdateLanguage from '../../modules/language/hooks/useUpdateLanguage';
-import PageHeader from '../../modules/common/components/PageHeader';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
 import useModal from '../../modules/modal/hooks/useModal';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import FormWrapper from '../../modules/common/components/FormWrapper';
-import Loading from '../../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import useAuth from '../../modules/Auth/useAuth';
 
 const LanguageDetailPage = ({ languageId }) => {
@@ -82,7 +83,12 @@ const LanguageDetailPage = ({ languageId }) => {
       <div className="items-center flex min-w-full justify-between gap-3 flex-wrap">
         <PageHeader headerText={normalizeLanguageName(language?.isoCode)} />
         {hasRole(IRoleAction.ManageLanguages) && (
-          <HeaderDeleteButton onClick={onDelete} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={onDelete}
+          />
         )}
       </div>
       {loading ? (
diff --git a/admin-ui/src/pages/language/index.tsx b/admin-ui/src/pages/language/index.tsx
index e39b2c22d7..e722db7345 100644
--- a/admin-ui/src/pages/language/index.tsx
+++ b/admin-ui/src/pages/language/index.tsx
@@ -7,14 +7,14 @@ import useLanguages from '../../modules/language/hooks/useLanguages';
 import LanguageList from '../../modules/language/components/LanguageList';
 import useRemoveLanguage from '../../modules/language/hooks/useRemoveLanguage';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
-import PageHeader from '../../modules/common/components/PageHeader';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
-import Toggle from '../../modules/common/components/Toggle';
+import PageHeader from '@/components/ui/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
+import Toggle from '@/components/ui/Toggle';
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
 import useModal from '../../modules/modal/hooks/useModal';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
-import Loading from '../../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import useAuth from '../../modules/Auth/useAuth';
 import {
   convertSortFieldsToQueryFormat,
@@ -22,9 +22,9 @@ import {
 } from '../../modules/common/utils/utils';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import LanguageDetailPage from './LanguageDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
-import InfoTextBanner from '../../modules/common/components/InfoTextBanner';
+import InfoTextBanner from '@/components/ui/InfoTextBanner';
 
 const Languages = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/language/new.tsx b/admin-ui/src/pages/language/new.tsx
index 4971be53a6..6ed7f493d9 100644
--- a/admin-ui/src/pages/language/new.tsx
+++ b/admin-ui/src/pages/language/new.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import FormWrapper from '../../modules/common/components/FormWrapper';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import { OnSubmitSuccessType } from '../../modules/forms/hooks/useForm';
 
 import LanguageForm from '../../modules/language/components/LanguageForm';
diff --git a/admin-ui/src/pages/orders/OrderDetailPage.tsx b/admin-ui/src/pages/orders/OrderDetailPage.tsx
index 2b1639aac9..b820a3501f 100644
--- a/admin-ui/src/pages/orders/OrderDetailPage.tsx
+++ b/admin-ui/src/pages/orders/OrderDetailPage.tsx
@@ -4,15 +4,16 @@ import { IRoleAction } from '../../gql/types';
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import useOrder from '../../modules/order/hooks/useOrder';
 import OrderDetail from '../../modules/order/components/OrderDetail';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
 import useModal from '../../modules/modal/hooks/useModal';
 import useRemoveOrder from '../../modules/order/hooks/useRemoveOrder';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import useAuth from '../../modules/Auth/useAuth';
 
 const OrderDetailPage = ({ orderId }) => {
@@ -65,7 +66,12 @@ const OrderDetailPage = ({ orderId }) => {
         {order &&
         isDeletable(order.status) &&
         hasRole(IRoleAction.UpdateOrder) ? (
-          <HeaderDeleteButton onClick={handleOnClick} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={handleOnClick}
+          />
         ) : null}
       </div>
       {loading ? <Loading /> : <OrderDetail order={order} />}
diff --git a/admin-ui/src/pages/orders/index.tsx b/admin-ui/src/pages/orders/index.tsx
index fe2117f086..bfee1adf46 100644
--- a/admin-ui/src/pages/orders/index.tsx
+++ b/admin-ui/src/pages/orders/index.tsx
@@ -1,12 +1,12 @@
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Toggle from '../../modules/common/components/Toggle';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
+import Toggle from '@/components/ui/Toggle';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 import OrderList from '../../modules/order/components/OrderList';
 import useOrders from '../../modules/order/hooks/useOrders';
@@ -16,7 +16,7 @@ import {
 } from '../../modules/common/utils/utils';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import OrderDetailPage from './OrderDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 import OrderFilters from '../../modules/order/components/OrderFilters';
 import {
   IDeliveryProviderType,
diff --git a/admin-ui/src/pages/payment-provider/PaymentProviderDetailPage.tsx b/admin-ui/src/pages/payment-provider/PaymentProviderDetailPage.tsx
index 20a2965fe9..7bfddda2c4 100644
--- a/admin-ui/src/pages/payment-provider/PaymentProviderDetailPage.tsx
+++ b/admin-ui/src/pages/payment-provider/PaymentProviderDetailPage.tsx
@@ -4,16 +4,17 @@ import { IRoleAction } from '../../gql/types';
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 import usePaymentProvider from '../../modules/payment-providers/hooks/usePaymentProvider';
 import useRemovePaymentProvider from '../../modules/payment-providers/hooks/useRemovePaymentProvider';
 import useUpdatePaymentProvider from '../../modules/payment-providers/hooks/useUpdatePaymentProvider';
-import Loading from '../../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
 import useModal from '../../modules/modal/hooks/useModal';
 import ProviderDetail from '../../modules/common/components/ProviderDetail';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { getInterfaceLabel } from '../../modules/common/utils/utils';
 import useAuth from '../../modules/Auth/useAuth';
 
@@ -92,7 +93,12 @@ const PaymentProviderDetailPage = ({ paymentProviderId }) => {
           )}
         />
         {hasRole(IRoleAction.ManagePaymentProviders) && (
-          <HeaderDeleteButton onClick={handleOnClick} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={handleOnClick}
+          />
         )}
       </div>
       {loading ? (
diff --git a/admin-ui/src/pages/payment-provider/index.tsx b/admin-ui/src/pages/payment-provider/index.tsx
index 1fb1f39c1e..194ac92eef 100644
--- a/admin-ui/src/pages/payment-provider/index.tsx
+++ b/admin-ui/src/pages/payment-provider/index.tsx
@@ -6,12 +6,12 @@ import { useRouter } from 'next/router';
 import usePaymentProviders from '../../modules/payment-providers/hooks/usePaymentProviders';
 import useRemovePaymentProvider from '../../modules/payment-providers/hooks/useRemovePaymentProvider';
 import ProvidersList from '../../modules/common/components/ProvidersList';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 import useModal from '../../modules/modal/hooks/useModal';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
-import Loading from '../../modules/common/components/Loading';
-import ListHeader from '../../modules/common/components/ListHeader';
+import Loading from '@/components/ui/Loading';
+import ListHeader from '@/components/ui/ListHeader';
 import ProvidersFilter from '../../modules/common/components/ProvidersFilter';
 import usePaymentProviderTypes from '../../modules/payment-providers/hooks/usePaymentProviderTypes';
 import useAuth from '../../modules/Auth/useAuth';
diff --git a/admin-ui/src/pages/payment-provider/new.tsx b/admin-ui/src/pages/payment-provider/new.tsx
index 72596901ab..943ebf4bea 100644
--- a/admin-ui/src/pages/payment-provider/new.tsx
+++ b/admin-ui/src/pages/payment-provider/new.tsx
@@ -4,10 +4,10 @@ import { IRoleAction } from '../../gql/types';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 import useAuth from '../../modules/Auth/useAuth';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 
 import NewProviderForm from '../../modules/common/components/NewProviderForm';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import convertArrayOfObjectToObject from '../../modules/common/convertArrayOfObjectToObject';
 import useCreatePaymentProvider from '../../modules/payment-providers/hooks/useCreatePaymentProvider';
 import usePaymentInterfacesByType from '../../modules/payment-providers/hooks/usePaymentInterfacesByType';
diff --git a/admin-ui/src/pages/products/ProductDetailPage.tsx b/admin-ui/src/pages/products/ProductDetailPage.tsx
index c4d816f107..353aca2a5e 100644
--- a/admin-ui/src/pages/products/ProductDetailPage.tsx
+++ b/admin-ui/src/pages/products/ProductDetailPage.tsx
@@ -3,9 +3,9 @@ import { IRoleAction } from '../../gql/types';
 
 import { toast } from 'react-toastify';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import useFormatDateTime from '../../modules/common/utils/useFormatDateTime';
 import ProductDetail from '../../modules/product/components/ProductDetail';
 import ProductImageGallery from '../../modules/product/components/ProductImageGallery';
@@ -14,7 +14,7 @@ import SelectOptions from '../../modules/common/components/SelectOptions';
 import usePublishProduct from '../../modules/product/hooks/usePublishProduct';
 import useUnPublishProduct from '../../modules/product/hooks/useUnPublishProduct';
 import useUpdateProduct from '../../modules/product/hooks/useUpdateProduct';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
 import useRemoveProduct from '../../modules/product/hooks/useRemoveProduct';
 import useModal from '../../modules/modal/hooks/useModal';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
@@ -318,7 +318,12 @@ const ProductDetailPage = ({ slug }) => {
               />
             </div>
             {status === 'DRAFT' && hasRole(IRoleAction.ManageProducts) && (
-              <HeaderDeleteButton onClick={handleDeleteProduct} />
+              <Button
+                variant="danger"
+                icon={<XMarkIcon className="h-5 w-5" />}
+                text="Delete"
+                onClick={handleDeleteProduct}
+              />
             )}
           </div>
         </div>
diff --git a/admin-ui/src/pages/products/index.tsx b/admin-ui/src/pages/products/index.tsx
index fe1effd95a..1754aad3b3 100644
--- a/admin-ui/src/pages/products/index.tsx
+++ b/admin-ui/src/pages/products/index.tsx
@@ -3,10 +3,10 @@ import { IRoleAction } from '../../gql/types';
 
 import { useRouter } from 'next/router';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Toggle from '../../modules/common/components/Toggle';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
+import PageHeader from '@/components/ui/PageHeader';
+import Toggle from '@/components/ui/Toggle';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 import ProductList from '../../modules/product/components/ProductList';
 import useAuth from '../../modules/Auth/useAuth';
@@ -18,7 +18,7 @@ import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import useProductsCount from '../../modules/product/hooks/useProductsCount';
 import ProductDetailPage from './ProductDetailPage';
 import LocaleWrapper from '../../modules/common/components/LocaleWrapper';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 import ProductExport from '../../modules/product/components/ProductExport';
 import ProductImport from '../../modules/product/components/ProductImport';
 import useApp from '../../modules/common/hooks/useApp';
diff --git a/admin-ui/src/pages/products/new.tsx b/admin-ui/src/pages/products/new.tsx
index 7a09ec1e51..10fe729429 100644
--- a/admin-ui/src/pages/products/new.tsx
+++ b/admin-ui/src/pages/products/new.tsx
@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router';
 import { FormattedMessage, useIntl } from 'react-intl';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import FormWrapper from '../../modules/common/components/FormWrapper';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import generateUniqueId from '../../modules/common/utils/getUniqueId';
 import {
   OnSubmitSuccessType,
diff --git a/admin-ui/src/pages/quotations/QuotationDetailPage.tsx b/admin-ui/src/pages/quotations/QuotationDetailPage.tsx
index 5e5d093c29..a5d50928d8 100644
--- a/admin-ui/src/pages/quotations/QuotationDetailPage.tsx
+++ b/admin-ui/src/pages/quotations/QuotationDetailPage.tsx
@@ -1,8 +1,8 @@
 import { useIntl } from 'react-intl';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import QuotationDetail from '../../modules/quotation/components/QuotationDetail';
 import useQuotation from '../../modules/quotation/hooks/useQuotation';
 
diff --git a/admin-ui/src/pages/quotations/index.tsx b/admin-ui/src/pages/quotations/index.tsx
index 2ae7bec77b..d386ab1120 100644
--- a/admin-ui/src/pages/quotations/index.tsx
+++ b/admin-ui/src/pages/quotations/index.tsx
@@ -1,18 +1,18 @@
 import { useIntl } from 'react-intl';
 
 import { useRouter } from 'next/router';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
 import QuotationList from '../../modules/quotation/components/QuotationList';
 import useQuotations from '../../modules/quotation/hooks/useQuotations';
 import { convertSortFieldsToQueryFormat } from '../../modules/common/utils/utils';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import QuotationDetailPage from './QuotationDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 
 const Quotations = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/reset-password.tsx b/admin-ui/src/pages/reset-password.tsx
index 26bd72586a..761ce60552 100644
--- a/admin-ui/src/pages/reset-password.tsx
+++ b/admin-ui/src/pages/reset-password.tsx
@@ -6,9 +6,9 @@ import useValidateResetPasswordToken from '../modules/accounts/hooks/useValidate
 import useResetPassword from '../modules/accounts/hooks/useResetPassword';
 import { OnSubmitSuccessType } from '../modules/forms/hooks/useForm';
 import Link from 'next/link';
-import Loading from '../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import FormWrapper from '../modules/common/components/FormWrapper';
-import ImageWithFallback from '../modules/common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const PasswordReset = () => {
   const { query, push } = useRouter();
diff --git a/admin-ui/src/pages/styleguide.tsx b/admin-ui/src/pages/styleguide.tsx
index 96b911d650..7011c4d659 100644
--- a/admin-ui/src/pages/styleguide.tsx
+++ b/admin-ui/src/pages/styleguide.tsx
@@ -8,13 +8,20 @@ import {
   CheckIcon,
   ChevronDownIcon,
 } from '@heroicons/react/24/outline';
-import Loading from '../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import ThemeToggle from '../modules/common/components/ThemeToggle';
 import LanguageToggle from '../modules/common/components/LanguageToggle';
-import Button from '../modules/common/components/Button';
-import DeleteButton from '../modules/common/components/DeleteButton';
-import Badge from '../modules/common/components/Badge';
-import TagList from '../modules/common/components/TagList';
+import Button from '@/components/ui/Button';
+import Badge from '@/components/ui/Badge';
+import TagList from '@/components/ui/Tag/TagList';
+import Toggle from '@/components/ui/Toggle';
+import Accordion from '@/components/ui/Accordion/Accordion';
+import ToolTip from '@/components/ui/ToolTip';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
+import NoData from '@/components/ui/NoData';
+import CopyableText from '@/components/ui/CopyableText';
+import InfoTextBanner from '@/components/ui/InfoTextBanner';
+import HelpText from '@/components/ui/HelpText';
 
 const StyleGuidePage = () => {
   const { formatMessage } = useIntl();
@@ -432,48 +439,60 @@ const StyleGuidePage = () => {
                 </div>
               </div>
 
-              {/* Specialized Buttons */}
+              {/* Icon Buttons */}
               <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
                 <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300 mb-4">
-                  Specialized Icon Buttons
+                  Icon Buttons
                 </h3>
                 <div className="flex items-center space-x-4">
                   <div className="flex flex-col items-center space-y-2">
-                    <DeleteButton onClick={() => alert('Delete clicked!')} />
+                    <Button
+                      variant="danger"
+                      size="xs"
+                      rounded="full"
+                      icon={<TrashIcon className="h-5 w-5" />}
+                      onClick={() => alert('Delete clicked!')}
+                      ariaLabel="Delete"
+                    />
                     <span className="text-xs text-slate-500 dark:text-slate-400">
-                      Default Delete
+                      Delete
                     </span>
                   </div>
                   <div className="flex flex-col items-center space-y-2">
-                    <DeleteButton
-                      onClick={() => alert('Close clicked!')}
+                    <Button
+                      variant="danger"
+                      size="xs"
+                      rounded="full"
                       icon={<XMarkIcon className="h-5 w-5" />}
+                      onClick={() => alert('Close clicked!')}
                       ariaLabel="Close"
                     />
                     <span className="text-xs text-slate-500 dark:text-slate-400">
-                      Close Button
+                      Close
                     </span>
                   </div>
                   <div className="flex flex-col items-center space-y-2">
-                    <DeleteButton
-                      onClick={() => alert('View clicked!')}
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      rounded="full"
                       icon={<EyeIcon className="h-5 w-5" />}
+                      onClick={() => alert('View clicked!')}
                       ariaLabel="View"
-                      className="text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 focus:ring-blue-500"
                     />
                     <span className="text-xs text-slate-500 dark:text-slate-400">
-                      Custom Icon
+                      View
                     </span>
                   </div>
                   <div className="flex flex-col items-center space-y-2">
-                    <DeleteButton
-                      onClick={() => alert('Custom clicked!')}
-                      textLeft="X"
-                      icon={null}
-                      ariaLabel="Custom text"
+                    <Button
+                      variant="danger"
+                      icon={<XMarkIcon className="h-5 w-5" />}
+                      text="Delete"
+                      onClick={() => alert('Header delete clicked!')}
                     />
                     <span className="text-xs text-slate-500 dark:text-slate-400">
-                      Text Only
+                      Header Delete
                     </span>
                   </div>
                 </div>
@@ -556,6 +575,129 @@ const StyleGuidePage = () => {
             </div>
           </section>
 
+          {/* Toggle */}
+          <section>
+            <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100 mb-6">
+              Toggle
+            </h2>
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
+              <div className="flex items-center gap-8">
+                <Toggle toggleText="Active Filter" toggleKey="active" />
+                <Toggle
+                  toggleText="Disabled Toggle"
+                  toggleKey="disabled"
+                  disabled
+                />
+              </div>
+            </div>
+          </section>
+
+          {/* Accordion */}
+          <section>
+            <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100 mb-6">
+              Accordion
+            </h2>
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
+              <Accordion
+                data={[
+                  {
+                    header: 'Section 1',
+                    body: (
+                      <p className="text-slate-600 dark:text-slate-400">
+                        Content for section 1
+                      </p>
+                    ),
+                  },
+                  {
+                    header: 'Section 2',
+                    body: (
+                      <p className="text-slate-600 dark:text-slate-400">
+                        Content for section 2
+                      </p>
+                    ),
+                  },
+                  {
+                    header: 'Section 3',
+                    body: (
+                      <p className="text-slate-600 dark:text-slate-400">
+                        Content for section 3
+                      </p>
+                    ),
+                  },
+                ]}
+              />
+            </div>
+          </section>
+
+          {/* Animated Counter */}
+          <section>
+            <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100 mb-6">
+              Animated Counter
+            </h2>
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
+              <div className="flex items-center gap-8">
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-slate-900 dark:text-slate-100">
+                    <AnimatedCounter value={42} />
+                  </div>
+                  <span className="text-sm text-slate-500">Count: 42</span>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-slate-900 dark:text-slate-100">
+                    <AnimatedCounter value={1234} />
+                  </div>
+                  <span className="text-sm text-slate-500">Count: 1234</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Utility Components */}
+          <section>
+            <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100 mb-6">
+              Utility Components
+            </h2>
+            <div className="space-y-6">
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
+                <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300 mb-4">
+                  NoData
+                </h3>
+                <NoData message="items" />
+              </div>
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
+                <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300 mb-4">
+                  CopyableText
+                </h3>
+                <CopyableText text="abc123-def456-ghi789" />
+              </div>
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
+                <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300 mb-4">
+                  ToolTip
+                </h3>
+                <ToolTip text="This is a tooltip message">
+                  <span className="text-sm text-slate-600 dark:text-slate-400 underline cursor-help">
+                    Hover me for tooltip
+                  </span>
+                </ToolTip>
+              </div>
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
+                <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300 mb-4">
+                  InfoTextBanner
+                </h3>
+                <InfoTextBanner description="This is an informational banner message." />
+              </div>
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-6 border border-slate-200 dark:border-slate-700">
+                <h3 className="text-lg font-medium text-slate-700 dark:text-slate-300 mb-4">
+                  HelpText
+                </h3>
+                <HelpText
+                  messageKey="styleguide_help_example"
+                  defaultMessage="This is a help text that provides additional context."
+                />
+              </div>
+            </div>
+          </section>
+
           {/* Cards & Containers */}
           <section>
             <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100 mb-6">
diff --git a/admin-ui/src/pages/tokens/TokenDetailPage.tsx b/admin-ui/src/pages/tokens/TokenDetailPage.tsx
index 9bd520bff5..d23e767043 100644
--- a/admin-ui/src/pages/tokens/TokenDetailPage.tsx
+++ b/admin-ui/src/pages/tokens/TokenDetailPage.tsx
@@ -2,13 +2,14 @@ import { useRouter } from 'next/router';
 import { IRoleAction } from '../../gql/types';
 
 import useToken from '../../modules/token/hooks/useToken';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 import { useIntl } from 'react-intl';
-import Loading from '../../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import TokenDetail from '../../modules/token/components/TokenDetail';
 import ExportToken from '../../modules/accounts/components/ExportToken';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
 import useModal from '../../modules/modal/hooks/useModal';
 import useInvalidateTicket from '../../modules/token/hooks/useInvalidateTicket';
@@ -75,12 +76,14 @@ const TokenDetailPage = ({ tokenId }) => {
         {!token.invalidatedDate &&
         token.isInvalidateable &&
         hasRole(IRoleAction.UpdateToken) ? (
-          <HeaderDeleteButton
-            onClick={onInvalidateToken}
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
             text={formatMessage({
               id: 'invalidate-token',
               defaultMessage: 'Invalidate',
             })}
+            onClick={onInvalidateToken}
           />
         ) : null}
       </div>
diff --git a/admin-ui/src/pages/tokens/index.tsx b/admin-ui/src/pages/tokens/index.tsx
index 127d26a312..59f467dbf1 100644
--- a/admin-ui/src/pages/tokens/index.tsx
+++ b/admin-ui/src/pages/tokens/index.tsx
@@ -1,15 +1,15 @@
 import { useIntl } from 'react-intl';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Loading from '../../modules/common/components/Loading';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
+import Loading from '@/components/ui/Loading';
 import useTokens from '../../modules/token/hooks/useTokens';
 import TokenList from '../../modules/token/components/TokenList';
-import NoData from '../../modules/common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import { useRouter } from 'next/router';
-import ListHeader from '../../modules/common/components/ListHeader';
+import ListHeader from '@/components/ui/ListHeader';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import TokenDetailPage from './TokenDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 
 const TokensPage = () => {
   const { formatMessage } = useIntl();
diff --git a/admin-ui/src/pages/users/UserDetailPage.tsx b/admin-ui/src/pages/users/UserDetailPage.tsx
index 62cc7a6671..4050c2862a 100644
--- a/admin-ui/src/pages/users/UserDetailPage.tsx
+++ b/admin-ui/src/pages/users/UserDetailPage.tsx
@@ -3,9 +3,9 @@ import { IRoleAction } from '../../gql/types';
 
 import { useIntl } from 'react-intl';
 import useUser from '../../modules/accounts/hooks/useUser';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import UserSettings from '../../modules/accounts/components/UserSettings';
 import useDeleteUser from '../../modules/accounts/hooks/useDeleteUser';
 import { useCallback } from 'react';
diff --git a/admin-ui/src/pages/users/index.tsx b/admin-ui/src/pages/users/index.tsx
index 6214e1171e..7313f13d5a 100644
--- a/admin-ui/src/pages/users/index.tsx
+++ b/admin-ui/src/pages/users/index.tsx
@@ -2,18 +2,18 @@ import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import UserList from '../../modules/accounts/components/UserList';
 import useUsers from '../../modules/accounts/hooks/useUsers';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Toggle from '../../modules/common/components/Toggle';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
+import Toggle from '@/components/ui/Toggle';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
-import ListHeader from '../../modules/common/components/ListHeader';
+import ListHeader from '@/components/ui/ListHeader';
 import UserFilter from '../../modules/accounts/components/UserFilter';
-import NoData from '../../modules/common/components/NoData';
+import NoData from '@/components/ui/NoData';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import UserDetailPage from './UserDetailPage';
-import AnimatedCounter from '../../modules/common/components/AnimatedCounter';
+import AnimatedCounter from '@/components/ui/AnimatedCounter';
 import useApp from '../../modules/common/hooks/useApp';
 import useAuth from '../../modules/Auth/useAuth';
 import { IRoleAction } from '../../gql/types';
diff --git a/admin-ui/src/pages/users/new.tsx b/admin-ui/src/pages/users/new.tsx
index aefe6bbb7a..28bd61058a 100644
--- a/admin-ui/src/pages/users/new.tsx
+++ b/admin-ui/src/pages/users/new.tsx
@@ -4,8 +4,8 @@ import { IRoleAction } from '../../gql/types';
 import { useIntl } from 'react-intl';
 
 import CreateUserForm from '../../modules/accounts/components/CreateUserForm';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 import useAuth from '../../modules/Auth/useAuth';
 import useEnrollUser from '../../modules/accounts/hooks/useEnrollUser.ts';
 
diff --git a/admin-ui/src/pages/verify-email.tsx b/admin-ui/src/pages/verify-email.tsx
index d71b6e9e02..e196ed6d1f 100644
--- a/admin-ui/src/pages/verify-email.tsx
+++ b/admin-ui/src/pages/verify-email.tsx
@@ -4,11 +4,11 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { FormattedMessage, useIntl } from 'react-intl';
 import useVerifyEmail from '../modules/accounts/hooks/useVerifyEmail';
-import Loading from '../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import CustomError from '../modules/common/CustomError';
 import useValidateEmailVerificationToken from '../modules/accounts/hooks/useValidateEmailVerificationToken';
 import FormWrapper from '../modules/common/components/FormWrapper';
-import ImageWithFallback from '../modules/common/components/ImageWithFallback';
+import ImageWithFallback from '@/components/ui/ImageWithFallback';
 
 const VerifyEmail = () => {
   const { query } = useRouter();
diff --git a/admin-ui/src/pages/warehousing-provider/WarehousingProviderDetailPage.tsx b/admin-ui/src/pages/warehousing-provider/WarehousingProviderDetailPage.tsx
index b1088e41d4..cae813a82d 100644
--- a/admin-ui/src/pages/warehousing-provider/WarehousingProviderDetailPage.tsx
+++ b/admin-ui/src/pages/warehousing-provider/WarehousingProviderDetailPage.tsx
@@ -4,16 +4,17 @@ import { IRoleAction } from '../../gql/types';
 import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 import useRemoveWarehousingProvider from '../../modules/warehousing-providers/hooks/useRemoveWarehousingProvider';
 import useUpdateWarehousingProvider from '../../modules/warehousing-providers/hooks/useUpdateWarehousingProvider';
 import useWarehousingProvider from '../../modules/warehousing-providers/hooks/useWarehousingProvider';
 import useModal from '../../modules/modal/hooks/useModal';
 import ProviderDetail from '../../modules/common/components/ProviderDetail';
-import Loading from '../../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { getInterfaceLabel } from '../../modules/common/utils/utils';
 import useAuth from '../../modules/Auth/useAuth';
 
@@ -93,7 +94,12 @@ const WarehousingProviderDetailPage = ({ warehousingProviderId }) => {
           )}
         />
         {hasRole(IRoleAction.ManageWarehousingProviders) && (
-          <HeaderDeleteButton onClick={handleOnClick} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={handleOnClick}
+          />
         )}
       </div>
 
diff --git a/admin-ui/src/pages/warehousing-provider/index.tsx b/admin-ui/src/pages/warehousing-provider/index.tsx
index a11d08148d..214aa3f235 100644
--- a/admin-ui/src/pages/warehousing-provider/index.tsx
+++ b/admin-ui/src/pages/warehousing-provider/index.tsx
@@ -6,10 +6,10 @@ import { useIntl } from 'react-intl';
 import { toast } from 'react-toastify';
 import { IWarehousingProviderType } from '../../gql/types';
 import useAuth from '../../modules/Auth/useAuth';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import ListHeader from '../../modules/common/components/ListHeader';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import ListHeader from '@/components/ui/ListHeader';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
 import ProvidersFilter from '../../modules/common/components/ProvidersFilter';
 
 import ProvidersList from '../../modules/common/components/ProvidersList';
diff --git a/admin-ui/src/pages/warehousing-provider/new.tsx b/admin-ui/src/pages/warehousing-provider/new.tsx
index 745aa5635e..37e1de27ca 100644
--- a/admin-ui/src/pages/warehousing-provider/new.tsx
+++ b/admin-ui/src/pages/warehousing-provider/new.tsx
@@ -4,10 +4,10 @@ import { IRoleAction } from '../../gql/types';
 import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 import useAuth from '../../modules/Auth/useAuth';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 
 import NewProviderForm from '../../modules/common/components/NewProviderForm';
-import PageHeader from '../../modules/common/components/PageHeader';
+import PageHeader from '@/components/ui/PageHeader';
 import convertArrayOfObjectToObject from '../../modules/common/convertArrayOfObjectToObject';
 import useCreateWarehousingProvider from '../../modules/warehousing-providers/hooks/useCreateWarehousingProvider';
 import useWarehousingInterfacesByType from '../../modules/warehousing-providers/hooks/useWarehousingInterfacesByType';
diff --git a/admin-ui/src/pages/works/WorkDetailPage.tsx b/admin-ui/src/pages/works/WorkDetailPage.tsx
index 233f054696..7dee5090e4 100644
--- a/admin-ui/src/pages/works/WorkDetailPage.tsx
+++ b/admin-ui/src/pages/works/WorkDetailPage.tsx
@@ -6,12 +6,13 @@ import WorkDetail from '../../modules/work/components/WorkDetail';
 import useWork from '../../modules/work/hooks/useWork';
 import useRemoveWork from '../../modules/work/hooks/useRemoveWork';
 import useAddWork from '../../modules/work/hooks/useAddWork';
-import Loading from '../../modules/common/components/Loading';
-import PageHeader from '../../modules/common/components/PageHeader';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
+import Loading from '@/components/ui/Loading';
+import PageHeader from '@/components/ui/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
 import DangerMessage from '../../modules/modal/components/DangerMessage';
 import useModal from '../../modules/modal/hooks/useModal';
-import HeaderDeleteButton from '../../modules/common/components/HeaderDeleteButton';
+import Button from '@/components/ui/Button';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import { useCallback } from 'react';
 
@@ -130,7 +131,12 @@ const WorkDetailPage = ({ workerId }) => {
           </button>
         ) : null}
         {work && isDeletable(work?.status) ? (
-          <HeaderDeleteButton onClick={handleOnClick} />
+          <Button
+            variant="danger"
+            icon={<XMarkIcon className="h-5 w-5" />}
+            text="Delete"
+            onClick={handleOnClick}
+          />
         ) : null}
       </div>
       {!work ? <Loading /> : <WorkDetail work={work} />}
diff --git a/admin-ui/src/pages/works/WorkQueueListView.tsx b/admin-ui/src/pages/works/WorkQueueListView.tsx
index 6715749911..9f9dcf0fe0 100644
--- a/admin-ui/src/pages/works/WorkQueueListView.tsx
+++ b/admin-ui/src/pages/works/WorkQueueListView.tsx
@@ -3,11 +3,11 @@ import { useRouter } from 'next/router';
 import { useMemo, useCallback, useState } from 'react';
 
 import InfiniteScroll from '../../modules/common/components/InfiniteScroll';
-import Loading from '../../modules/common/components/Loading';
+import Loading from '@/components/ui/Loading';
 import WorkFilter from '../../modules/work/components/WorkFilter';
 import WorkList from '../../modules/work/components/WorkList';
 import MessagesList from '../../modules/work/components/MessagesList';
-import Tab from '../../modules/common/components/Tab';
+import Tab from '@/components/ui/Tab';
 import SearchWithTags from '../../modules/common/components/SearchWithTags';
 import useWorkQueue from '../../modules/work/hooks/useWorkQueue';
 import { DefaultLimit } from '../../modules/common/data/miscellaneous';
@@ -15,7 +15,7 @@ import {
   convertSortFieldsToQueryFormat,
   normalizeQuery,
 } from '../../modules/common/utils/utils';
-import { ISortOptionInput, IWorkStatus } from '../../gql/types';
+import { ISortOptionInput, IWorkStatus, IWorkType } from '../../gql/types';
 import groupMessageWorks from '../../modules/work/utils/groupMessageWorks';
 import { EnvelopeIcon, RectangleStackIcon } from '@heroicons/react/24/outline';
 import useActiveWorkTypes from '../../modules/work/hooks/useActiveWorkTypes';
@@ -48,11 +48,11 @@ const WorkQueueListView = () => {
   }
   const filter = {
     created: {
-      start: query?.start,
-      end: query?.end,
+      start: query?.start as string,
+      end: query?.end as string,
     },
     status: (query?.status as string)?.split(',') as IWorkStatus[],
-    types: currentTypes.filter(Boolean),
+    types: currentTypes.filter(Boolean) as IWorkType[],
   };
   const limit = parseInt(query?.limit as string, 10) || DefaultLimit;
   const offset = parseInt(query?.skip as string, 10) || 0;
diff --git a/admin-ui/src/pages/works/index.tsx b/admin-ui/src/pages/works/index.tsx
index b7a579cf83..e9545660cb 100644
--- a/admin-ui/src/pages/works/index.tsx
+++ b/admin-ui/src/pages/works/index.tsx
@@ -3,8 +3,8 @@ import { IRoleAction } from '../../gql/types';
 
 import { useRouter } from 'next/router';
 
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
 import useAuth from '../../modules/Auth/useAuth';
 import WorkDetailPage from './WorkDetailPage';
 import WorkQueueListView from './WorkQueueListView';
diff --git a/admin-ui/src/pages/works/management.tsx b/admin-ui/src/pages/works/management.tsx
index 59418b0ce8..eb889f0cab 100644
--- a/admin-ui/src/pages/works/management.tsx
+++ b/admin-ui/src/pages/works/management.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
-import BreadCrumbs from '../../modules/common/components/BreadCrumbs';
-import PageHeader from '../../modules/common/components/PageHeader';
-import Tab from '../../modules/common/components/Tab';
+import BreadCrumbs from '@/components/ui/BreadCrumbs';
+import PageHeader from '@/components/ui/PageHeader';
+import Tab from '@/components/ui/Tab';
 import AllocateWorkForm from '../../modules/work/components/AllocateWorkForm';
 import WorkForm from '../../modules/work/components/WorkForm';
 
diff --git a/admin-ui/tsconfig.json b/admin-ui/tsconfig.json
index 95bc48ca38..60e5a9b8d1 100644
--- a/admin-ui/tsconfig.json
+++ b/admin-ui/tsconfig.json
@@ -3,7 +3,10 @@
     "typeRoots": [
       "src/gql/types"
     ],
-    // "baseUrl": ".",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
     "target": "ESNext",
     "lib": [
       "dom",
diff --git a/package-lock.json b/package-lock.json
index 2bab6c4ccd..ed1ec996da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -93,7 +93,6 @@
         "@typescript-eslint/eslint-plugin": "^8.43.0",
         "@typescript-eslint/parser": "^8.43.0",
         "ai": "^6.0.14",
-        "classnames": "^2.5.1",
         "clsx": "^2.1.1",
         "cypress": "^15.0.0",
         "d3": "^7.9.0",
@@ -6776,13 +6775,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",