From a2c149e7e588a9ebf080b4b43472bdb5126ed981 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 15 Jan 2024 11:43:16 +0100
Subject: [PATCH] feat(dashboard,ui): Streamline spacing and sizing (#6061)

---
 .changeset/forty-shrimps-watch.md             |    9 +
 .eslintrc.js                                  |    4 +-
 packages/admin-next/dashboard/package.json    |    6 +-
 .../public/locales/en/translation.json        |  109 +-
 .../dashboard/scripts/generate-countries.js   |   44 +
 packages/admin-next/dashboard/src/app.tsx     |   14 +-
 .../require-auth/require-auth.tsx             |   38 +-
 .../components/common/combobox/combobox.tsx   |   37 +
 .../common/country-select/country-select.tsx  |   54 +
 .../components/common/country-select/index.ts |    1 +
 .../debounced-search/debounced-search.tsx     |    1 +
 .../empty-table-content.tsx                   |   59 +
 .../common/empty-table-content/index.ts       |    1 +
 .../common/json-view-section/index.ts         |    1 +
 .../json-view-section.tsx}                    |   18 +-
 .../src/components/common/json-view/index.ts  |    1 -
 .../product-table-cells.tsx                   |    7 +-
 .../src/components/common/skeleton/index.ts   |    1 +
 .../components/common/skeleton/skeleton.tsx   |   16 +
 .../error/error-boundary/error-boundary.tsx   |    6 +-
 .../filtering/filter-group/filter-group.tsx   |   54 +
 .../filtering/filter-group/index.ts           |    1 +
 .../components/filtering/order-by/index.ts    |    1 +
 .../filtering/order-by/order-by.tsx           |  148 ++
 .../src/components/filtering/query/index.ts   |    1 +
 .../src/components/filtering/query/query.tsx  |   57 +
 .../layout/app-layout/app-layout.tsx          |   26 -
 .../layout/app-layout/breadcrumbs.tsx         |   52 -
 .../components/layout/app-layout/gutter.tsx   |    9 -
 .../src/components/layout/app-layout/index.ts |    1 -
 .../components/layout/app-layout/loader.tsx   |   26 -
 .../components/layout/app-layout/main-nav.tsx |  380 ----
 .../components/layout/app-layout/nav-item.tsx |  148 --
 .../layout/app-layout/search-toggle.tsx       |   17 -
 .../layout/app-layout/settings-nav.tsx        |  119 --
 .../components/layout/app-layout/spacer.tsx   |    7 -
 .../components/layout/app-layout/topbar.tsx   |   19 -
 .../components/layout/main-layout/index.ts    |    1 +
 .../layout/main-layout/main-layout.tsx        |  197 ++
 .../src/components/layout/nav-item/index.ts   |    1 +
 .../components/layout/nav-item/nav-item.tsx   |  156 ++
 .../components/layout/notifications/index.ts  |    1 +
 .../notifications.tsx                         |   29 +-
 .../layout/settings-layout/index.ts           |    1 +
 .../settings-layout/settings-layout.tsx       |   99 +
 .../src/components/layout/shell/index.ts      |    1 +
 .../src/components/layout/shell/shell.tsx     |  378 ++++
 .../localized-date-picker/index.ts            |    1 +
 .../localized-date-picker.tsx                 |   36 +
 .../localized-table-pagination/index.ts       |    1 +
 .../localized-table-pagination.tsx            |   26 +
 .../src/components/search/search.tsx          |   44 +-
 .../dashboard/src/hooks/use-form-prompt.tsx   |   20 +
 .../dashboard/src/hooks/use-query-params.tsx  |   16 +
 .../src/hooks/use-route-modal-state.tsx       |   63 +
 .../admin-next/dashboard/src/i18n/config.ts   |    2 +
 .../admin-next/dashboard/src/i18n/types.ts    |    2 +
 .../admin-next/dashboard/src/lib/countries.ts | 1755 +++++++++++++++++
 .../admin-next/dashboard/src/lib/debounce.ts  |   20 +
 .../dashboard/src/lib/is-axios-error.ts       |    5 +
 .../admin-next/dashboard/src/lib/medusa.ts    |    7 +-
 .../providers/auth-provider/auth-context.tsx  |   10 -
 .../providers/auth-provider/auth-provider.tsx |   24 -
 .../src/providers/auth-provider/index.ts      |    2 -
 .../src/providers/auth-provider/use-auth.tsx  |   10 -
 .../router-provider/router-provider.tsx       |  515 +++--
 .../src/providers/sidebar-provider/index.ts   |    2 +
 .../sidebar-provider/sidebar-context.tsx      |    9 +
 .../sidebar-provider/sidebar-provider.tsx     |   21 +
 .../sidebar-provider/use-sidebar.tsx          |   12 +
 .../api-key-management-create.tsx             |   15 +
 .../create-publishable-api-key-form.tsx       |   97 +
 .../create-publishable-api-key-form/index.ts  |    1 +
 .../api-key-management-create/index.ts        |    1 +
 .../api-key-management-detail.tsx             |    3 +
 .../api-key-management-detail/index.ts        |    1 +
 .../api-key-management-edit.tsx               |   12 +
 .../api-key-management-edit/index.ts          |    1 +
 .../api-key-management-list.tsx}              |  139 +-
 .../api-key-management-list-table.tsx         |  265 +++
 .../api-key-management-list-table/index.ts    |    1 +
 .../api-key-management-list/index.ts          |    1 +
 .../src/routes/api-key-management/index.ts    |    1 -
 .../edit-currencies-details-drawer.tsx        |  159 --
 .../edit-currencies-details-drawer/index.ts   |    1 -
 .../currencies-details/currencies-details.tsx |  488 -----
 .../views/currencies-details/index.ts         |    1 -
 .../src/routes/locations/list/index.ts        |    1 -
 .../src/routes/locations/list/list.tsx        |   11 -
 .../location-add-sales-channels/index.ts      |    1 +
 .../location-add-sales-channels.tsx           |   15 +
 .../create-location-form.tsx                  |  234 +++
 .../components/create-location-form/index.ts  |    1 +
 .../routes/locations/location-create/index.ts |    1 +
 .../location-create/location-create.tsx       |   15 +
 .../location-general-section/index.ts         |    1 +
 .../location-general-section.tsx              |  101 +
 .../location-sales-channel-section/index.ts   |    1 +
 .../location-sales-channel-section.tsx}       |   70 +-
 .../routes/locations/location-detail/index.ts |    1 +
 .../location-detail/location-detail.tsx       |   38 +
 .../edit-location-form/edit-location-form.tsx |  218 ++
 .../routes/locations/location-edit/index.ts   |    1 +
 .../locations/location-edit/location-edit.tsx |   47 +
 .../components/locations-list-table/index.ts  |    1 +
 .../locations-list-table.tsx                  |  278 +++
 .../routes/locations/location-list/index.ts   |    1 +
 .../locations/location-list/location-list.tsx |   11 +
 .../dashboard/src/routes/login/login.tsx      |   73 +-
 .../product-attribute-section/index.ts        |    0
 .../product-attribute-section.tsx             |    0
 .../product-general-section/index.ts          |    0
 .../product-general-section.tsx               |    0
 .../components/product-media-section/index.ts |    0
 .../product-media-section.tsx                 |    0
 .../product-option-section/index.ts           |    0
 .../product-option-section.tsx                |    0
 .../product-sales-channel-section/index.ts    |    0
 .../product-sales-channel-section.tsx         |    0
 .../product-thumbnail-section/index.ts        |    0
 .../product-thumbnail-section.tsx             |    0
 .../product-variant-section/index.ts          |    0
 .../product-variant-section.tsx               |    0
 .../routes/products/product-detail/index.ts   |    2 +
 .../loader.ts                                 |    2 +-
 .../product-detail.tsx}                       |   66 +-
 .../components/product-list-table/index.ts    |    1 +
 .../product-list-table/product-list-table.tsx |  284 +++
 .../src/routes/products/product-list/index.ts |    2 +
 .../{views => }/product-list/loader.ts        |   20 +-
 .../products/product-list/product-list.tsx    |   18 +
 .../products/views/product-details/index.ts   |    2 -
 .../products/views/product-list/index.ts      |    2 -
 .../products/views/product-list/list.tsx      |  277 ---
 .../edit-profile-details-drawer.tsx           |  236 ---
 .../profile-general-section/index.ts          |    1 +
 .../profile-general-section.tsx               |   63 +
 .../routes/profile/profile-detail/index.ts    |    1 +
 .../profile/profile-detail/profile-detail.tsx |   26 +
 .../edit-profile-form/edit-profile-form.tsx   |  208 ++
 .../src/routes/profile/profile-edit/index.ts  |    1 +
 .../profile/profile-edit/profile-edit.tsx     |   52 +
 .../profile/views/profile-details/index.ts    |    1 -
 .../profile/views/profile-details/profile.tsx |   70 -
 .../edit-region-details-drawer.tsx            |   12 -
 .../src/routes/regions/region-create/index.ts |    1 +
 .../regions/region-create/region-create.tsx   |  201 ++
 .../region-general-section/index.ts           |    1 +
 .../region-general-section.tsx                |  230 +++
 .../region-shipping-option-section.tsx        |  156 ++
 .../src/routes/regions/region-detail/index.ts |    2 +
 .../routes/regions/region-detail/loader.ts    |   23 +
 .../regions/region-detail/region-detail.tsx   |   42 +
 .../edit-region-form/edit-region-form.tsx     |  105 +
 .../components/edit-region-form/index.ts      |    1 +
 .../src/routes/regions/region-edit/index.ts   |    1 +
 .../regions/region-edit/region-edit.tsx       |   49 +
 .../components/region-list-table/index.ts     |    1 +
 .../region-list-table/region-list-table.tsx   |  302 +++
 .../regions/{views => }/region-list/index.ts  |    0
 .../regions/region-list/region-list.tsx       |   13 +
 .../regions/views/region-details/index.ts     |    1 -
 .../views/region-details/region-details.tsx   |  142 --
 .../regions/views/region-list/region-list.tsx |   26 -
 .../sales-channel-details-section/index.ts    |    1 -
 .../sales-channel-details-section.tsx         |  200 --
 .../sales-channel-products-section/index.ts   |    1 -
 .../sales-channel-products-section.tsx        |  621 ------
 .../add-products-to-sales-channel-form.tsx    |  362 ++++
 .../components/index.ts                       |    1 +
 .../sales-channel-add-products/index.ts       |    1 +
 .../sales-channel-add-products.tsx            |   36 +
 .../create-sales-channel-form.tsx             |  160 ++
 .../create-sales-channel-form/index.ts        |    1 +
 .../sales-channel-create/index.ts             |    1 +
 .../sales-channel-create.tsx                  |   15 +
 .../sales-channel-general-section/index.ts    |    1 +
 .../sales-channel-general-section.tsx         |   88 +
 .../sales-channel-product-section/index.ts    |    1 +
 .../sales-channel-product-section.tsx         |  348 ++++
 .../sales-channel-detail/index.ts             |    1 +
 .../sales-channel-detail.tsx                  |   26 +
 .../edit-sales-channel-form.tsx               |  140 ++
 .../edit-sales-channel-form/index.ts          |    1 +
 .../sales-channel-edit/index.ts               |    1 +
 .../sales-channel-edit/sales-channel-edit.tsx |   41 +
 .../sales-channel-list-table/index.ts         |    1 +
 .../sales-channel-list-table.tsx              |  232 +++
 .../{views => }/sales-channel-list/index.ts   |    0
 .../sales-channel-list/sales-channel-list.tsx |   11 +
 .../views/sales-channel-details/index.ts      |    1 -
 .../sales-channel-details.tsx                 |   23 -
 .../src/routes/settings/settings.tsx          |   17 +-
 .../edit-store-details-drawer.tsx             |  174 --
 .../edit-store-details-drawer/index.ts        |    1 -
 .../add-currencies-form.tsx                   |  325 +++
 .../store/store-add-currencies/index.ts       |    1 +
 .../store-add-currencies.tsx                  |   42 +
 .../store-currencies-section.tsx/index.ts     |    1 +
 .../store-currency-section.tsx                |  300 +++
 .../components/store-general-section/index.ts |    1 +
 .../store-general-section.tsx                 |   99 +
 .../src/routes/store/store-detail/index.ts    |    2 +
 .../store-details => store-detail}/loader.ts  |   30 +-
 .../store/store-detail/store-detail.tsx       |   39 +
 .../edit-store-form/edit-store-form.tsx       |  142 ++
 .../src/routes/store/store-edit/index.ts      |    1 +
 .../routes/store/store-edit/store-edit.tsx    |   49 +
 .../routes/store/views/store-details/index.ts |    2 -
 .../views/store-details/store-details.tsx     |  101 -
 .../dashboard/src/routes/users/index.ts       |    1 -
 .../components/user-general-section/index.ts  |    1 +
 .../user-general-section.tsx                  |   45 +
 .../src/routes/users/user-detail/index.ts     |    1 +
 .../routes/users/user-detail/user-detail.tsx  |   29 +
 .../src/routes/users/user-edit/index.ts       |    1 +
 .../src/routes/users/user-edit/user-edit.tsx  |   12 +
 .../src/routes/users/user-invite/index.ts     |    1 +
 .../routes/users/user-invite/user-invite.tsx  |   12 +
 .../components/user-list-table/index.ts       |    1 +
 .../user-list-table/user-list-table.tsx       |  156 ++
 .../src/routes/users/user-list/index.ts       |    1 +
 .../src/routes/users/user-list/user-list.tsx  |    9 +
 .../dashboard/src/routes/users/users.tsx      |  155 --
 .../__tests__/lock-closed-solid-mini.spec.tsx |   17 +
 .../__tests__/triangle-left-mini.spec.tsx     |   17 +
 .../__tests__/triangle-up-mini.spec.tsx       |   17 +
 .../__tests__/triangles-mini.spec.tsx         |   17 +
 .../icons/src/components/index.ts             |    4 +
 .../src/components/lock-closed-solid-mini.tsx |   27 +
 .../src/components/lock-closed-solid.tsx      |    4 +-
 .../icons/src/components/lock-open-solid.tsx  |    2 +-
 .../src/components/triangle-left-mini.tsx     |   23 +
 .../icons/src/components/triangle-up-mini.tsx |   23 +
 .../icons/src/components/triangles-mini.tsx   |   23 +
 .../ui-preset/src/theme/extension/theme.ts    |   48 +-
 .../ui-preset/src/theme/tokens/colors.ts      |   44 +-
 .../ui-preset/src/theme/tokens/components.ts  |   16 +-
 .../ui-preset/src/theme/tokens/typography.ts  |   12 +-
 .../ui/src/components/avatar/avatar.tsx       |   84 +-
 .../ui/src/components/button/button.tsx       |    9 +-
 .../ui/src/components/calendar/calendar.tsx   |   27 +-
 .../ui/src/components/checkbox/checkbox.tsx   |    2 +-
 .../components/command-bar/command-bar.tsx    |   16 +-
 .../currency-input/currency-input.tsx         |   33 +-
 .../components/date-picker/date-picker.tsx    |  152 +-
 .../ui/src/components/drawer/drawer.tsx       |   22 +-
 .../dropdown-menu/dropdown-menu.tsx           |   17 +-
 .../components/focus-modal/focus-modal.tsx    |   21 +-
 .../ui/src/components/hint/hint.tsx           |   30 +-
 .../components/icon-button/icon-button.tsx    |    5 +-
 .../ui/src/components/input/input.tsx         |  151 +-
 .../progress-accordion/progress-accordion.tsx |   36 +-
 .../progress-tabs/progress-tabs.tsx           |   54 +-
 .../ui/src/components/prompt/prompt.tsx       |   60 +-
 .../components/radio-group/radio-group.tsx    |    4 +-
 .../ui/src/components/select/select.tsx       |   18 +-
 .../components/status-badge/status-badge.tsx  |   61 +-
 .../ui/src/components/switch/switch.tsx       |   39 +-
 .../ui/src/components/table/table.tsx         |   41 +-
 .../ui/src/components/tabs/tabs.tsx           |    4 +-
 .../ui/src/components/textarea/textarea.tsx   |    2 +-
 .../src/components/time-input/time-input.tsx  |   23 +-
 .../ui/src/components/tooltip/tooltip.tsx     |    4 +-
 .../ui/src/hooks/use-prompt/render-prompt.tsx |   27 +-
 yarn.lock                                     |  168 +-
 266 files changed, 10738 insertions(+), 4646 deletions(-)
 create mode 100644 .changeset/forty-shrimps-watch.md
 create mode 100644 packages/admin-next/dashboard/scripts/generate-countries.js
 create mode 100644 packages/admin-next/dashboard/src/components/common/combobox/combobox.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/common/country-select/country-select.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/common/country-select/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/common/empty-table-content/empty-table-content.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/common/empty-table-content/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/common/json-view-section/index.ts
 rename packages/admin-next/dashboard/src/components/common/{json-view/json-view.tsx => json-view-section/json-view-section.tsx} (88%)
 delete mode 100644 packages/admin-next/dashboard/src/components/common/json-view/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/common/skeleton/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/filtering/filter-group/filter-group.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/filtering/filter-group/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/filtering/order-by/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/filtering/order-by/order-by.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/filtering/query/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/filtering/query/query.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/app-layout.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/breadcrumbs.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/gutter.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/loader.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/main-nav.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/nav-item.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/search-toggle.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/settings-nav.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/spacer.tsx
 delete mode 100644 packages/admin-next/dashboard/src/components/layout/app-layout/topbar.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/layout/main-layout/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/layout/main-layout/main-layout.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/layout/nav-item/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/layout/nav-item/nav-item.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/layout/notifications/index.ts
 rename packages/admin-next/dashboard/src/components/layout/{app-layout => notifications}/notifications.tsx (53%)
 create mode 100644 packages/admin-next/dashboard/src/components/layout/settings-layout/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/layout/shell/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/layout/shell/shell.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx
 create mode 100644 packages/admin-next/dashboard/src/components/localization/localized-table-pagination/index.ts
 create mode 100644 packages/admin-next/dashboard/src/components/localization/localized-table-pagination/localized-table-pagination.tsx
 create mode 100644 packages/admin-next/dashboard/src/hooks/use-form-prompt.tsx
 create mode 100644 packages/admin-next/dashboard/src/hooks/use-query-params.tsx
 create mode 100644 packages/admin-next/dashboard/src/hooks/use-route-modal-state.tsx
 create mode 100644 packages/admin-next/dashboard/src/lib/countries.ts
 create mode 100644 packages/admin-next/dashboard/src/lib/debounce.ts
 create mode 100644 packages/admin-next/dashboard/src/lib/is-axios-error.ts
 delete mode 100644 packages/admin-next/dashboard/src/providers/auth-provider/auth-context.tsx
 delete mode 100644 packages/admin-next/dashboard/src/providers/auth-provider/auth-provider.tsx
 delete mode 100644 packages/admin-next/dashboard/src/providers/auth-provider/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/providers/auth-provider/use-auth.tsx
 create mode 100644 packages/admin-next/dashboard/src/providers/sidebar-provider/index.ts
 create mode 100644 packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-context.tsx
 create mode 100644 packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-provider.tsx
 create mode 100644 packages/admin-next/dashboard/src/providers/sidebar-provider/use-sidebar.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/api-key-management-create.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/create-publishable-api-key-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/api-key-management-edit.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/index.ts
 rename packages/admin-next/dashboard/src/routes/api-key-management/{api-key-management.tsx => api-key-management-list/api-key-management-list.tsx} (62%)
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/api-key-management/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/edit-currencies-details-drawer.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/currencies-details.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/locations/list/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/locations/list/list.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-add-sales-channels/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-add-sales-channels/location-add-sales-channels.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/create-location-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-create/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-create/location-create.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-sales-channel-section/index.ts
 rename packages/admin-next/dashboard/src/routes/{sales-channels/views/sales-channel-list/sales-channel-list.tsx => locations/location-detail/components/location-sales-channel-section/location-sales-channel-section.tsx} (80%)
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-detail/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-detail/location-detail.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-edit/components/edit-location-form/edit-location-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-edit/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-edit/location-edit.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-list/components/locations-list-table/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-list/components/locations-list-table/locations-list-table.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-list/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-attribute-section/index.ts (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-attribute-section/product-attribute-section.tsx (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-general-section/index.ts (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-general-section/product-general-section.tsx (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-media-section/index.ts (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-media-section/product-media-section.tsx (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-option-section/index.ts (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-option-section/product-option-section.tsx (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-sales-channel-section/index.ts (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-sales-channel-section/product-sales-channel-section.tsx (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-thumbnail-section/index.ts (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-thumbnail-section/product-thumbnail-section.tsx (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-variant-section/index.ts (100%)
 rename packages/admin-next/dashboard/src/routes/products/{ => product-detail}/components/product-variant-section/product-variant-section.tsx (100%)
 create mode 100644 packages/admin-next/dashboard/src/routes/products/product-detail/index.ts
 rename packages/admin-next/dashboard/src/routes/products/{views/product-details => product-detail}/loader.ts (91%)
 rename packages/admin-next/dashboard/src/routes/products/{views/product-details/details.tsx => product-detail/product-detail.tsx} (66%)
 create mode 100644 packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/products/product-list/index.ts
 rename packages/admin-next/dashboard/src/routes/products/{views => }/product-list/loader.ts (55%)
 create mode 100644 packages/admin-next/dashboard/src/routes/products/product-list/product-list.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/products/views/product-details/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/products/views/product-list/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/products/views/product-list/list.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/profile/components/edit-profile-details-drawer/edit-profile-details-drawer.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/profile/profile-detail/components/profile-general-section/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/profile/profile-detail/components/profile-general-section/profile-general-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/profile/profile-detail/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/profile/profile-detail/profile-detail.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/profile/profile-edit/components/edit-profile-form/edit-profile-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/profile/profile-edit/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/profile/profile-edit/profile-edit.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/profile/views/profile-details/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/profile/views/profile-details/profile.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/regions/components/edit-region-details-drawer/edit-region-details-drawer.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-create/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-create/region-create.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/region-general-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-shipping-option-section/region-shipping-option-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-detail/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-detail/loader.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-detail/region-detail.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-edit/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-edit/region-edit.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-list/components/region-list-table/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-list/components/region-list-table/region-list-table.tsx
 rename packages/admin-next/dashboard/src/routes/regions/{views => }/region-list/index.ts (100%)
 create mode 100644 packages/admin-next/dashboard/src/routes/regions/region-list/region-list.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/regions/views/region-details/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/regions/views/region-details/region-details.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/regions/views/region-list/region-list.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/sales-channel-details-section.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/sales-channel-products-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/sales-channel-add-products.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/create-sales-channel-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/sales-channel-create.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/sales-channel-general-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/sales-channel-product-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/edit-sales-channel-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/sales-channel-edit.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table/sales-channel-list-table.tsx
 rename packages/admin-next/dashboard/src/routes/sales-channels/{views => }/sales-channel-list/index.ts (100%)
 create mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/sales-channel-details.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/edit-store-details-drawer.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-add-currencies/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-add-currencies/store-add-currencies.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/store-currency-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-detail/components/store-general-section/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-detail/components/store-general-section/store-general-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-detail/index.ts
 rename packages/admin-next/dashboard/src/routes/store/{views/store-details => store-detail}/loader.ts (54%)
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-detail/store-detail.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-edit/components/edit-store-form/edit-store-form.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-edit/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/store/store-edit/store-edit.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/store/views/store-details/index.ts
 delete mode 100644 packages/admin-next/dashboard/src/routes/store/views/store-details/store-details.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/users/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-detail/components/user-general-section/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-detail/components/user-general-section/user-general-section.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-detail/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-detail/user-detail.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-edit/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-edit/user-edit.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-invite/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-invite/user-invite.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-list/components/user-list-table/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-list/components/user-list-table/user-list-table.tsx
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-list/index.ts
 create mode 100644 packages/admin-next/dashboard/src/routes/users/user-list/user-list.tsx
 delete mode 100644 packages/admin-next/dashboard/src/routes/users/users.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/lock-closed-solid-mini.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/triangle-left-mini.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/triangle-up-mini.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/triangles-mini.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/lock-closed-solid-mini.tsx
 create mode 100644 packages/design-system/icons/src/components/triangle-left-mini.tsx
 create mode 100644 packages/design-system/icons/src/components/triangle-up-mini.tsx
 create mode 100644 packages/design-system/icons/src/components/triangles-mini.tsx

diff --git a/.changeset/forty-shrimps-watch.md b/.changeset/forty-shrimps-watch.md
new file mode 100644
index 0000000000..d60f718b33
--- /dev/null
+++ b/.changeset/forty-shrimps-watch.md
@@ -0,0 +1,9 @@
+---
+"@medusajs/ui": minor
+"@medusajs/ui-preset": minor
+"@medusajs/icons": minor
+---
+
+feat(ui): Updates spacing and sizing of components. Introduces new `size` variants for some components, such as `Button`, `IconButton`, and `Avatar`. Change most `:focus` styles to `:focus-visible` styles, to prevenent focus styles from being visible when not needed, such as on button clicks.
+feat(ui-preset): Publishes latest updates to our design system styles, as well as adding new colors. Noticable changes include changing `ui-code-text-*` styles to `ui-code-fg-*` for better consistency.
+feat(icons): Updates the `LockClosedSolid` and `LockOpenSolid` icons, and introduces four new icons: `LockClosedSolidMini`, `TriangleLeftMini`, `TriangleRightMini`, and `TriangleMini`.
diff --git a/.eslintrc.js b/.eslintrc.js
index be653df480..22a44eb628 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -227,7 +227,7 @@ module.exports = {
       },
     },
     {
-      files: ["packages/admin-next/dashboard/**/*"],
+      files: ["packages/admin-next/dashboard/src/**/*.{ts,tsx}"],
       env: { browser: true, es2020: true, node: true },
       extends: [
         "eslint:recommended",
@@ -236,7 +236,7 @@ module.exports = {
       ],
       parser: "@typescript-eslint/parser",
       parserOptions: {
-        project: "./packages/admin-next/dashboard/tsconfig.json",
+        project: "tsconfig.json",
       },
       plugins: ["react-refresh"],
       rules: {
diff --git a/packages/admin-next/dashboard/package.json b/packages/admin-next/dashboard/package.json
index 39e57d182a..68f7d41826 100644
--- a/packages/admin-next/dashboard/package.json
+++ b/packages/admin-next/dashboard/package.json
@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
+    "generate:countries": "node ./scripts/generate-countries.js && prettier --write ./src/lib/countries.ts",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
@@ -23,6 +24,7 @@
     "@tanstack/react-table": "8.10.7",
     "@uiw/react-json-view": "2.0.0-alpha.10",
     "cmdk": "^0.2.0",
+    "date-fns": "^3.2.0",
     "i18next": "23.7.11",
     "i18next-browser-languagedetector": "7.2.0",
     "i18next-http-backend": "2.4.2",
@@ -36,15 +38,15 @@
   },
   "devDependencies": {
     "@medusajs/medusa": "workspace:^",
+    "@medusajs/types": "workspace:^",
     "@medusajs/ui-preset": "workspace:^",
     "@medusajs/vite-plugin-extension": "workspace:^",
     "@types/react": "18.2.43",
     "@types/react-dom": "18.2.17",
-    "@typescript-eslint/eslint-plugin": "6.14.0",
-    "@typescript-eslint/parser": "6.14.0",
     "@vitejs/plugin-react": "4.2.1",
     "autoprefixer": "10.4.16",
     "postcss": "8.4.32",
+    "prettier": "^3.1.1",
     "tailwindcss": "3.3.6",
     "typescript": "5.2.2",
     "vite": "5.0.10"
diff --git a/packages/admin-next/dashboard/public/locales/en/translation.json b/packages/admin-next/dashboard/public/locales/en/translation.json
index 6a3b624d8b..85ab3191e9 100644
--- a/packages/admin-next/dashboard/public/locales/en/translation.json
+++ b/packages/admin-next/dashboard/public/locales/en/translation.json
@@ -1,12 +1,25 @@
 {
   "$schema": "../$schema.json",
   "general": {
+    "ascending": "Ascending",
+    "descending": "Descending",
     "cancel": "Cancel",
     "save": "Save",
     "create": "Create",
     "delete": "Delete",
     "edit": "Edit",
+    "add": "Add",
+    "continue": "Continue",
+    "start": "Start",
+    "end": "End",
+    "apply": "Apply",
+    "range": "Range",
     "search": "Search",
+    "of": "of",
+    "results": "results",
+    "pages": "pages",
+    "next": "Next",
+    "prev": "Prev",
     "extensions": "Extensions",
     "settings": "Settings",
     "general": "General",
@@ -14,17 +27,25 @@
     "enabled": "Enabled",
     "disabled": "Disabled",
     "remove": "Remove",
+    "admin": "Admin",
+    "store": "Store",
     "countSelected": "{{count}} selected",
     "plusCountMore": "+ {{count}} more",
     "areYouSure": "Are you sure?",
-    "noRecordsFound": "No records found"
+    "noRecordsFound": "No records found",
+    "typeToConfirm": "Please type {val} to confirm:",
+    "noResultsMessage": "Try changing the filters or search query",
+    "noRecordsTitle": "No records",
+    "noRecordsMessage": "There are no records to show",
+    "unsavedChangesTitle": "Are you sure you want to leave this page?",
+    "unsavedChangesDescription": "You have unsaved changes that will be lost if you leave this page."
   },
   "products": {
     "domain": "Products",
     "variants": "Variants",
     "availableInSalesChannels": "Available in <0>{{x}}</0> of <1>{{y}}</1> sales channels",
-    "inStockVariants_one": "{{inventory}} in stock for {{count}} variant",
-    "inStockVariants_other": "{{inventory}} in stock for {{count}} variants",
+    "variantCount_one": "{{count}} variant",
+    "variantCount_other": "{{count}} variants",
     "productStatus": {
       "draft": "Draft",
       "published": "Published",
@@ -65,9 +86,11 @@
   "profile": {
     "domain": "Profile",
     "manageYourProfileDetails": "Manage your profile details",
-    "editProfileDetails": "Edit Profile Details",
+    "editProfile": "Edit profile",
     "languageHint": "The language you want to use in the admin dashboard. This will not change the language of your store.",
-    "userInsightsHint": "Share usage insights and help us improve Medusa. You can read more about what we collect and how we use it in our <0>documentation</0>."
+    "userInsightsHint": "Share usage insights and help us improve Medusa. You can read more about what we collect and how we use it in our <0>documentation</0>.",
+    "language": "Language",
+    "usageInsights": "Usage insights"
   },
   "users": {
     "domain": "Users",
@@ -81,38 +104,54 @@
   "store": {
     "domain": "Store",
     "manageYourStoresDetails": "Manage your store's details",
-    "editStoreDetails": "Edit Store Details",
-    "storeName": "Store name",
+    "editStore": "Edit store",
+    "defaultCurrency": "Default currency",
     "swapLinkTemplate": "Swap link template",
     "paymentLinkTemplate": "Payment link template",
-    "inviteLinkTemplate": "Invite link template"
+    "inviteLinkTemplate": "Invite link template",
+    "currencies": "Currencies",
+    "addCurrencies": "Add currencies",
+    "removeCurrencyWarning_one": "You are about to remove {{count}} currency from your store. Ensure that you have removed all prices using the currency before proceeding.",
+    "removeCurrencyWarning_other": "You are about to remove {{count}} currencies from your store. Ensure that you have removed all prices using the currencies before proceeding.",
+    "currencyAlreadyAdded": "The currency has already been added to your store."
   },
   "regions": {
-    "domain": "Regions"
+    "domain": "Regions",
+    "createRegion": "Create Region",
+    "editRegion": "Edit Region",
+    "deleteRegionWarning": "You are about to delete the region {{name}}. This action cannot be undone.",
+    "taxInclusiveHint": "When enabled all prices in the region will be tax inclusive.",
+    "providersHint": "The providers that are available in the region."
+  },
+  "locations": {
+    "domain": "Locations",
+    "createLocation": "Create location",
+    "editLocation": "Edit location",
+    "addSalesChannels": "Add sales channels",
+    "detailsHint": "Specify the details of the location.",
+    "noLocationsFound": "No locations found",
+    "deleteLocationWarning": "You are about to delete the location {{name}}. This action cannot be undone."
   },
   "salesChannels": {
     "domain": "Sales Channels",
+    "createSalesChannel": "Create Sales Channel",
+    "createSalesChannelHint": "Create a new sales channel to sell your products on.",
+    "enabledHint": "Specify if the sales channel is enabled or disabled.",
     "removeProductsWarning_one": "You are about to remove {{count}} product from {{sales_channel}}.",
     "removeProductsWarning_other": "You are about to remove {{count}} products from {{sales_channel}}.",
     "addProducts": "Add Products",
-    "editSalesChannel": "Edit Sales Channel",
-    "isEnabledHint": "Specify if the sales channel is enabled or disabled.",
-    "productAlreadyAdded": "The product has already been added to the sales channel."
-  },
-  "currencies": {
-    "domain": "Currencies",
-    "manageTheCurrencies": "Manage the currencies you want to use in your store",
-    "editCurrencyDetails": "Edit Currency Details",
-    "defaultCurrency": "Default Currency",
-    "defaultCurrencyHint": "The default currency of your store.",
-    "removeCurrenciesWarning_one": "You are about to remove {{count}} currency from your store. Ensure that you have removed all prices using the currency before proceeding.",
-    "removeCurrenciesWarning_other": "You are about to remove {{count}} currencies from your store. Ensure that you have removed all prices using the currencies before proceeding.",
-    "currencyAlreadyAdded": "The currency has already been added to your store."
+    "editSalesChannel": "Edit sales channel",
+    "productAlreadyAdded": "The product has already been added to the sales channel.",
+    "deleteSalesChannelWarning": "You are about to delete the sales channel {{name}}. This action cannot be undone."
   },
   "apiKeyManagement": {
     "domain": "API Key Management",
-    "createAPublishableApiKey": "Create a publishable API key",
-    "createKey": "Create Key"
+    "createKey": "Create key",
+    "createPublishableApiKey": "Create Publishable API Key",
+    "revoke": "Revoke",
+    "publishableApiKeyHint": "Publishable API keys are used to limit the scope of requests to specific sales channels.",
+    "deleteKeyWarning": "You are about to delete the API key {{title}}. This action cannot be undone.",
+    "revokeKeyWarning": "You are about to revoke the API key {{title}}."
   },
   "fields": {
     "name": "Name",
@@ -133,8 +172,28 @@
     "sales_channels": "Sales Channels",
     "status": "Status",
     "code": "Code",
+    "countries": "Countries",
+    "paymentProviders": "Payment Providers",
+    "fulfillmentProviders": "Fulfillment Providers",
+    "providers": "Providers",
     "availability": "Availability",
     "inventory": "Inventory",
-    "optional": "Optional"
+    "optional": "Optional",
+    "taxInclusivePricing": "Tax Inclusive Pricing",
+    "taxRate": "Tax Rate",
+    "taxCode": "Tax Code",
+    "currency": "Currency",
+    "address": "Address",
+    "address2": "Apartment, suite, etc.",
+    "city": "City",
+    "postalCode": "Postal Code",
+    "country": "Country",
+    "state": "State",
+    "province": "Province",
+    "company": "Company",
+    "phone": "Phone",
+    "metadata": "Metadata",
+    "selectCountry": "Select country",
+    "variants": "Variants"
   }
 }
diff --git a/packages/admin-next/dashboard/scripts/generate-countries.js b/packages/admin-next/dashboard/scripts/generate-countries.js
new file mode 100644
index 0000000000..491310e677
--- /dev/null
+++ b/packages/admin-next/dashboard/scripts/generate-countries.js
@@ -0,0 +1,44 @@
+async function generateCountries() {
+  const { countries } = await import("@medusajs/medusa/dist/utils/countries.js")
+  const fs = await import("fs")
+  const path = await import("path")
+
+  const arr = countries.map((c) => {
+    const iso_2 = c.alpha2.toLowerCase()
+    const iso_3 = c.alpha3.toLowerCase()
+    const num_code = parseInt(c.numeric, 10)
+    const name = c.name.toUpperCase()
+    const display_name = c.name
+
+    return {
+      iso_2,
+      iso_3,
+      num_code,
+      name,
+      display_name,
+    }
+  })
+
+  const json = JSON.stringify(arr, null, 2)
+
+  const dest = path.join(__dirname, "../src/lib/countries.ts")
+  const destDir = path.dirname(dest)
+
+  const fileContent = `/** This file is auto-generated. Do not modify it manually. */\nimport type { Country } from "@medusajs/medusa"\n\nexport const countries: Omit<Country, "region" | "region_id" | "id">[] = ${json}`
+
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true })
+  }
+
+  fs.writeFileSync(dest, fileContent)
+}
+
+;(async () => {
+  console.log("Generating countries")
+  try {
+    await generateCountries()
+    console.log("Countries generated")
+  } catch (e) {
+    console.error(e)
+  }
+})()
diff --git a/packages/admin-next/dashboard/src/app.tsx b/packages/admin-next/dashboard/src/app.tsx
index 9170f0ff08..602ac18fba 100644
--- a/packages/admin-next/dashboard/src/app.tsx
+++ b/packages/admin-next/dashboard/src/app.tsx
@@ -1,28 +1,22 @@
 import { Toaster } from "@medusajs/ui"
 import { MedusaProvider } from "medusa-react"
 
-import { AuthProvider } from "./providers/auth-provider"
 import { RouterProvider } from "./providers/router-provider"
 import { ThemeProvider } from "./providers/theme-provider"
 
-import { queryClient } from "./lib/medusa"
-
-const BASE_URL =
-  import.meta.env.VITE_MEDUSA_ADMIN_BACKEND_URL || "http://localhost:9000"
+import { MEDUSA_BACKEND_URL, queryClient } from "./lib/medusa"
 
 function App() {
   return (
     <MedusaProvider
-      baseUrl={BASE_URL}
+      baseUrl={MEDUSA_BACKEND_URL}
       queryClientProviderProps={{
         client: queryClient,
       }}
     >
       <ThemeProvider>
-        <AuthProvider>
-          <RouterProvider />
-          <Toaster />
-        </AuthProvider>
+        <RouterProvider />
+        <Toaster />
       </ThemeProvider>
     </MedusaProvider>
   )
diff --git a/packages/admin-next/dashboard/src/components/authentication/require-auth/require-auth.tsx b/packages/admin-next/dashboard/src/components/authentication/require-auth/require-auth.tsx
index d64ad20b87..e3a29ae7ea 100644
--- a/packages/admin-next/dashboard/src/components/authentication/require-auth/require-auth.tsx
+++ b/packages/admin-next/dashboard/src/components/authentication/require-auth/require-auth.tsx
@@ -1,25 +1,31 @@
-import { Spinner } from "@medusajs/icons";
-import { PropsWithChildren } from "react";
-import { Navigate, useLocation } from "react-router-dom";
+import { Spinner } from "@medusajs/icons"
+import { Navigate, Outlet, useLocation } from "react-router-dom"
 
-import { useAuth } from "../../../providers/auth-provider";
+import { useAdminGetSession } from "medusa-react"
+import { SearchProvider } from "../../../providers/search-provider"
+import { SidebarProvider } from "../../../providers/sidebar-provider"
 
-export const RequireAuth = ({ children }: PropsWithChildren) => {
-  const auth = useAuth();
-  const location = useLocation();
+export const ProtectedRoute = () => {
+  const { user, isLoading } = useAdminGetSession()
+  const location = useLocation()
 
-  if (auth.isLoading) {
+  if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
-        <Spinner className="animate-spin text-ui-fg-interactive" />
+      <div className="flex min-h-screen items-center justify-center">
+        <Spinner className="text-ui-fg-interactive animate-spin" />
       </div>
-    );
+    )
   }
 
-  if (!auth.user) {
-    console.log("redirecting");
-    return <Navigate to="/login" state={{ from: location }} replace />;
+  if (!user) {
+    return <Navigate to="/login" state={{ from: location }} replace />
   }
 
-  return children;
-};
+  return (
+    <SidebarProvider>
+      <SearchProvider>
+        <Outlet />
+      </SearchProvider>
+    </SidebarProvider>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/common/combobox/combobox.tsx b/packages/admin-next/dashboard/src/components/common/combobox/combobox.tsx
new file mode 100644
index 0000000000..b499a8e943
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/combobox/combobox.tsx
@@ -0,0 +1,37 @@
+import { clx } from "@medusajs/ui"
+import * as Popover from "@radix-ui/react-popover"
+
+type ComboboxOption = {
+  value: string
+  label: string
+}
+
+type ComboboxProps = {
+  size?: "base" | "small"
+  options: ComboboxOption[]
+  value: string
+}
+
+export const Combobox = ({ size = "base" }: ComboboxProps) => {
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <button
+          className={clx(
+            "bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none",
+            "data-[placeholder]:text-ui-fg-muted text-ui-fg-base",
+            "hover:bg-ui-bg-field-hover",
+            "focus:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+            "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+            "invalid::border-ui-border-error invalid:shadow-borders-error",
+            "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+            {
+              "h-8 px-2 py-1.5 txt-compact-small": size === "base",
+              "h-7 px-2 py-1 txt-compact-small": size === "small",
+            }
+          )}
+        ></button>
+      </Popover.Trigger>
+    </Popover.Root>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/common/country-select/country-select.tsx b/packages/admin-next/dashboard/src/components/common/country-select/country-select.tsx
new file mode 100644
index 0000000000..5a2dd75ef9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/country-select/country-select.tsx
@@ -0,0 +1,54 @@
+import { forwardRef } from "react"
+
+import { TrianglesMini } from "@medusajs/icons"
+import { clx } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { countries } from "../../../lib/countries"
+
+export const CountrySelect = forwardRef<
+  HTMLSelectElement,
+  React.ComponentPropsWithoutRef<"select"> & { placeholder?: string }
+>(({ className, disabled, placeholder, ...props }, ref) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="relative">
+      <TrianglesMini
+        className={clx(
+          "absolute right-2 top-1/2 -translate-y-1/2 text-ui-fg-muted transition-fg pointer-events-none",
+          {
+            "text-ui-fg-disabled": disabled,
+          }
+        )}
+      />
+      <select
+        disabled={disabled}
+        className={clx(
+          "appearance-none bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none px-2 py-1 txt-compact-small",
+          "placeholder:text-ui-fg-muted text-ui-fg-base",
+          "hover:bg-ui-bg-field-hover",
+          "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+          "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
+          "invalid::border-ui-border-error invalid:shadow-borders-error",
+          "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+          className
+        )}
+        {...props}
+        ref={ref}
+      >
+        {/* Add an empty option so the first option is preselected */}
+        <option value="" disabled hidden className="text-ui-fg-muted">
+          {placeholder || t("fields.selectCountry")}
+        </option>
+        {countries.map((country) => {
+          return (
+            <option key={country.iso_2} value={country.iso_2}>
+              {country.display_name}
+            </option>
+          )
+        })}
+      </select>
+    </div>
+  )
+})
+CountrySelect.displayName = "CountrySelect"
diff --git a/packages/admin-next/dashboard/src/components/common/country-select/index.ts b/packages/admin-next/dashboard/src/components/common/country-select/index.ts
new file mode 100644
index 0000000000..4e19e8a7eb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/country-select/index.ts
@@ -0,0 +1 @@
+export * from "./country-select"
diff --git a/packages/admin-next/dashboard/src/components/common/debounced-search/debounced-search.tsx b/packages/admin-next/dashboard/src/components/common/debounced-search/debounced-search.tsx
index 49fe276389..d763a2ec3f 100644
--- a/packages/admin-next/dashboard/src/components/common/debounced-search/debounced-search.tsx
+++ b/packages/admin-next/dashboard/src/components/common/debounced-search/debounced-search.tsx
@@ -15,6 +15,7 @@ export const DebouncedSearch = ({
   value: initialValue,
   onChange,
   debounce = 500,
+  size = "small",
   placeholder,
   ...props
 }: DebouncedSearchProps) => {
diff --git a/packages/admin-next/dashboard/src/components/common/empty-table-content/empty-table-content.tsx b/packages/admin-next/dashboard/src/components/common/empty-table-content/empty-table-content.tsx
new file mode 100644
index 0000000000..062c47913c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/empty-table-content/empty-table-content.tsx
@@ -0,0 +1,59 @@
+import { ExclamationCircle, MagnifyingGlass } from "@medusajs/icons"
+import { Button, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+type NoResultsProps = {
+  title: string
+  message?: string
+}
+
+export const NoResults = ({ title, message }: NoResultsProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex h-[400px] w-full items-center justify-center">
+      <div className="flex flex-col items-center gap-y-2">
+        <MagnifyingGlass />
+        <Text size="small" leading="compact" weight="plus">
+          {title}
+        </Text>
+        <Text size="small" className="text-ui-fg-subtle">
+          {message ?? t("general.noResultsMessage")}
+        </Text>
+      </div>
+    </div>
+  )
+}
+
+type NoRecordsProps = {
+  title?: string
+  message?: string
+  action?: {
+    to: string
+    label: string
+  }
+}
+
+export const NoRecords = ({ title, message, action }: NoRecordsProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex h-[400px] w-full flex-col items-center justify-center gap-y-6">
+      <div className="flex flex-col items-center gap-y-2">
+        <ExclamationCircle />
+        <Text size="small" leading="compact" weight="plus">
+          {title ?? t("general.noRecordsTitle")}
+        </Text>
+        <Text size="small" className="text-ui-fg-subtle">
+          {message ?? t("general.noRecordsMessage")}
+        </Text>
+      </div>
+      {action && (
+        <Link to={action.to}>
+          <Button variant="secondary">{action.label}</Button>
+        </Link>
+      )}
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/common/empty-table-content/index.ts b/packages/admin-next/dashboard/src/components/common/empty-table-content/index.ts
new file mode 100644
index 0000000000..405e5ca379
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/empty-table-content/index.ts
@@ -0,0 +1 @@
+export * from "./empty-table-content"
diff --git a/packages/admin-next/dashboard/src/components/common/json-view-section/index.ts b/packages/admin-next/dashboard/src/components/common/json-view-section/index.ts
new file mode 100644
index 0000000000..be52949afd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/json-view-section/index.ts
@@ -0,0 +1 @@
+export * from "./json-view-section"
diff --git a/packages/admin-next/dashboard/src/components/common/json-view/json-view.tsx b/packages/admin-next/dashboard/src/components/common/json-view-section/json-view-section.tsx
similarity index 88%
rename from packages/admin-next/dashboard/src/components/common/json-view/json-view.tsx
rename to packages/admin-next/dashboard/src/components/common/json-view-section/json-view-section.tsx
index ee8055b46d..7727b9f663 100644
--- a/packages/admin-next/dashboard/src/components/common/json-view/json-view.tsx
+++ b/packages/admin-next/dashboard/src/components/common/json-view-section/json-view-section.tsx
@@ -21,23 +21,27 @@ type JsonViewProps = {
 }
 
 // TODO: Fix the positioning of the copy btn
-export const JsonView = ({ data, root }: JsonViewProps) => {
+export const JsonViewSection = ({ data, root }: JsonViewProps) => {
   const numberOfKeys = Object.keys(data).length
 
   return (
-    <Container className="flex items-center justify-between py-6">
+    <Container className="flex items-center justify-between px-6 py-4">
       <div className="flex items-center gap-x-4">
         <Heading level="h2">JSON</Heading>
         <Badge>{numberOfKeys} keys</Badge>
       </div>
       <Drawer>
         <Drawer.Trigger asChild>
-          <IconButton variant="transparent" className="text-ui-fg-subtle">
+          <IconButton
+            size="small"
+            variant="transparent"
+            className="text-ui-fg-subtle"
+          >
             <ArrowsPointingOut />
           </IconButton>
         </Drawer.Trigger>
         <Drawer.Content className="border-ui-code-border bg-ui-code-bg-base text-ui-code-text-base dark overflow-hidden border shadow-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]">
-          <div className="bg-ui-code-bg-header border-ui-code-border flex items-center justify-between border-b px-8 py-6">
+          <div className="bg-ui-code-bg-header border-ui-code-border flex items-center justify-between border-b px-6 py-4">
             <div className="flex items-center gap-x-4">
               <Heading>JSON</Heading>
               <Badge>{numberOfKeys} keys</Badge>
@@ -45,7 +49,11 @@ export const JsonView = ({ data, root }: JsonViewProps) => {
             <div className="flex items-center gap-x-2">
               <Kbd>esc</Kbd>
               <Drawer.Close asChild>
-                <IconButton variant="transparent" className="text-ui-fg-subtle">
+                <IconButton
+                  size="small"
+                  variant="transparent"
+                  className="text-ui-fg-subtle"
+                >
                   <XMarkMini />
                 </IconButton>
               </Drawer.Close>
diff --git a/packages/admin-next/dashboard/src/components/common/json-view/index.ts b/packages/admin-next/dashboard/src/components/common/json-view/index.ts
deleted file mode 100644
index eed209d97d..0000000000
--- a/packages/admin-next/dashboard/src/components/common/json-view/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./json-view";
diff --git a/packages/admin-next/dashboard/src/components/common/product-table-cells/product-table-cells.tsx b/packages/admin-next/dashboard/src/components/common/product-table-cells/product-table-cells.tsx
index 63ca516c8e..cd290cf662 100644
--- a/packages/admin-next/dashboard/src/components/common/product-table-cells/product-table-cells.tsx
+++ b/packages/admin-next/dashboard/src/components/common/product-table-cells/product-table-cells.tsx
@@ -8,7 +8,7 @@ import { StatusBadge, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { Thumbnail } from "../thumbnail"
 
-export const ProductInventoryCell = ({
+export const ProductVariantCell = ({
   variants,
 }: {
   variants: ProductVariant[] | null
@@ -23,13 +23,10 @@ export const ProductInventoryCell = ({
     )
   }
 
-  const inventory = variants.reduce((acc, v) => acc + v.inventory_quantity, 0)
-
   return (
     <Text size="small" className="text-ui-fg-base">
-      {t("products.inStockVariants", {
+      {t("products.variantCount", {
         count: variants.length,
-        inventory: inventory,
       })}
     </Text>
   )
diff --git a/packages/admin-next/dashboard/src/components/common/skeleton/index.ts b/packages/admin-next/dashboard/src/components/common/skeleton/index.ts
new file mode 100644
index 0000000000..d889ad708e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/skeleton/index.ts
@@ -0,0 +1 @@
+export * from "./skeleton"
diff --git a/packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx b/packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx
new file mode 100644
index 0000000000..0ad49b6f96
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx
@@ -0,0 +1,16 @@
+import { clx } from "@medusajs/ui"
+
+type SkeletonProps = {
+  className?: string
+}
+
+export const Skeleton = ({ className }: SkeletonProps) => {
+  return (
+    <div
+      className={clx(
+        "bg-ui-bg-component animate-pulse w-3 h-3 rounded-[4px]",
+        className
+      )}
+    />
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/error/error-boundary/error-boundary.tsx b/packages/admin-next/dashboard/src/components/error/error-boundary/error-boundary.tsx
index 6bc6d1719c..baf03c2873 100644
--- a/packages/admin-next/dashboard/src/components/error/error-boundary/error-boundary.tsx
+++ b/packages/admin-next/dashboard/src/components/error/error-boundary/error-boundary.tsx
@@ -1,5 +1,5 @@
-import type { AxiosError } from "axios"
 import { Navigate, useLocation, useRouteError } from "react-router-dom"
+import { isAxiosError } from "../../../lib/is-axios-error"
 
 export const ErrorBoundary = () => {
   const error = useRouteError()
@@ -20,7 +20,3 @@ export const ErrorBoundary = () => {
   // TODO: Actual catch-all error page
   return <div>Dang!</div>
 }
-
-const isAxiosError = (error: any): error is AxiosError => {
-  return error.isAxiosError
-}
diff --git a/packages/admin-next/dashboard/src/components/filtering/filter-group/filter-group.tsx b/packages/admin-next/dashboard/src/components/filtering/filter-group/filter-group.tsx
new file mode 100644
index 0000000000..a9c161ba17
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/filtering/filter-group/filter-group.tsx
@@ -0,0 +1,54 @@
+import { Button, DropdownMenu } from "@medusajs/ui"
+import { ReactNode } from "react"
+import { useSearchParams } from "react-router-dom"
+
+type FilterGroupProps = {
+  filters: {
+    [key: string]: ReactNode
+  }
+}
+
+export const FilterGroup = ({ filters }: FilterGroupProps) => {
+  const [searchParams] = useSearchParams()
+  const filterKeys = Object.keys(filters)
+
+  if (filterKeys.length === 0) {
+    return null
+  }
+
+  const isClearable = filterKeys.some((key) => searchParams.get(key))
+  const hasMore = !filterKeys.every((key) => searchParams.get(key))
+  const availableKeys = filterKeys.filter((key) => !searchParams.get(key))
+
+  return (
+    <div className="flex items-center flex-wrap gap-2">
+      {hasMore && <AddFilterMenu availableKeys={availableKeys} />}
+      {isClearable && (
+        <Button variant="transparent" size="small">
+          Clear all
+        </Button>
+      )}
+    </div>
+  )
+}
+
+type AddFilterMenuProps = {
+  availableKeys: string[]
+}
+
+const AddFilterMenu = ({ availableKeys }: AddFilterMenuProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <Button variant="secondary" size="small">
+          Add filter
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {availableKeys.map((key) => (
+          <DropdownMenu.Item key={key}>{key}</DropdownMenu.Item>
+        ))}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/filtering/filter-group/index.ts b/packages/admin-next/dashboard/src/components/filtering/filter-group/index.ts
new file mode 100644
index 0000000000..03b216813f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/filtering/filter-group/index.ts
@@ -0,0 +1 @@
+export * from "./filter-group"
diff --git a/packages/admin-next/dashboard/src/components/filtering/order-by/index.ts b/packages/admin-next/dashboard/src/components/filtering/order-by/index.ts
new file mode 100644
index 0000000000..d8200bb491
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/filtering/order-by/index.ts
@@ -0,0 +1 @@
+export * from "./order-by"
diff --git a/packages/admin-next/dashboard/src/components/filtering/order-by/order-by.tsx b/packages/admin-next/dashboard/src/components/filtering/order-by/order-by.tsx
new file mode 100644
index 0000000000..e2dcb2793c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/filtering/order-by/order-by.tsx
@@ -0,0 +1,148 @@
+import { ArrowUpDown } from "@medusajs/icons"
+import { DropdownMenu, IconButton } from "@medusajs/ui"
+import { useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+
+type OrderByProps = {
+  keys: string[]
+}
+
+enum SortDirection {
+  ASC = "asc",
+  DESC = "desc",
+}
+
+type SortState = {
+  key?: string
+  dir: SortDirection
+}
+
+const initState = (params: URLSearchParams): SortState => {
+  const sortParam = params.get("order")
+
+  if (!sortParam) {
+    return {
+      dir: SortDirection.ASC,
+    }
+  }
+
+  const dir = sortParam.startsWith("-") ? SortDirection.DESC : SortDirection.ASC
+  const key = sortParam.replace("-", "")
+
+  return {
+    key,
+    dir,
+  }
+}
+
+const formatKey = (key: string) => {
+  const words = key.split("_")
+  const formattedWords = words.map((word, index) => {
+    if (index === 0) {
+      return word.charAt(0).toUpperCase() + word.slice(1)
+    } else {
+      return word
+    }
+  })
+  return formattedWords.join(" ")
+}
+
+export const OrderBy = ({ keys }: OrderByProps) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [state, setState] = useState<{
+    key?: string
+    dir: SortDirection
+  }>(initState(searchParams))
+
+  const { t } = useTranslation()
+
+  const handleDirChange = (dir: string) => {
+    setState((prev) => ({
+      ...prev,
+      dir: dir as SortDirection,
+    }))
+    updateOrderParam({
+      key: state.key,
+      dir: dir as SortDirection,
+    })
+  }
+
+  const handleKeyChange = (value: string) => {
+    setState((prev) => ({
+      ...prev,
+      key: value,
+    }))
+
+    updateOrderParam({
+      key: value,
+      dir: state.dir,
+    })
+  }
+
+  const updateOrderParam = (state: SortState) => {
+    if (!state.key) {
+      setSearchParams((prev) => {
+        prev.delete("order")
+        return prev
+      })
+
+      return
+    }
+
+    const orderParam =
+      state.dir === SortDirection.ASC ? state.key : `-${state.key}`
+    setSearchParams((prev) => {
+      prev.set("order", orderParam)
+      return prev
+    })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small">
+          <ArrowUpDown />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.RadioGroup
+          value={state.key}
+          onValueChange={handleKeyChange}
+        >
+          {keys.map((key) => (
+            <DropdownMenu.RadioItem
+              key={key}
+              value={key}
+              onSelect={(event) => event.preventDefault()}
+            >
+              {formatKey(key)}
+            </DropdownMenu.RadioItem>
+          ))}
+        </DropdownMenu.RadioGroup>
+        <DropdownMenu.Separator />
+        <DropdownMenu.RadioGroup
+          value={state.dir}
+          onValueChange={handleDirChange}
+        >
+          <DropdownMenu.RadioItem
+            className="flex items-center justify-between"
+            value="asc"
+            onSelect={(event) => event.preventDefault()}
+          >
+            {t("general.ascending")}
+            <DropdownMenu.Label>1 - 30</DropdownMenu.Label>
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem
+            className="flex items-center justify-between"
+            value="desc"
+            onSelect={(event) => event.preventDefault()}
+          >
+            {t("general.descending")}
+            <DropdownMenu.Label>30 - 1</DropdownMenu.Label>
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/filtering/query/index.ts b/packages/admin-next/dashboard/src/components/filtering/query/index.ts
new file mode 100644
index 0000000000..4ddfa841d3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/filtering/query/index.ts
@@ -0,0 +1 @@
+export * from "./query"
diff --git a/packages/admin-next/dashboard/src/components/filtering/query/query.tsx b/packages/admin-next/dashboard/src/components/filtering/query/query.tsx
new file mode 100644
index 0000000000..eb5bef4907
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/filtering/query/query.tsx
@@ -0,0 +1,57 @@
+import { Input } from "@medusajs/ui"
+import { debounce } from "lodash"
+import { ChangeEvent, useCallback, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+
+type QueryProps = {
+  placeholder?: string
+}
+
+export const Query = ({ placeholder }: QueryProps) => {
+  const { t } = useTranslation()
+  const placeholderText = placeholder || t("general.search")
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [inputValue, setInputValue] = useState(searchParams.get("q") || "")
+
+  const updateSearchParams = (newValue: string) => {
+    if (!newValue) {
+      setSearchParams((prev) => {
+        prev.delete("q")
+        return prev
+      })
+
+      return
+    }
+
+    setSearchParams((prev) => ({ ...prev, q: newValue || "" }))
+  }
+
+  const debouncedUpdate = useCallback(
+    debounce((newValue: string) => updateSearchParams(newValue), 500),
+    []
+  )
+
+  useEffect(() => {
+    debouncedUpdate(inputValue)
+
+    return () => {
+      debouncedUpdate.cancel()
+    }
+  }, [inputValue, debouncedUpdate])
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value)
+  }
+
+  return (
+    <Input
+      type="search"
+      size="small"
+      value={inputValue}
+      onChange={handleInputChange}
+      placeholder={placeholderText}
+    />
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/app-layout.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/app-layout.tsx
deleted file mode 100644
index 0946a6a9c3..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/app-layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Outlet, useLocation } from "react-router-dom"
-import { Gutter } from "./gutter"
-import { MainNav } from "./main-nav"
-import { SettingsNav } from "./settings-nav"
-import { Topbar } from "./topbar"
-
-export const AppLayout = () => {
-  const location = useLocation()
-
-  const isSettings = location.pathname.startsWith("/settings")
-
-  return (
-    <div className="flex h-screen flex-col items-start overflow-hidden md:flex-row">
-      <MainNav />
-      <div className="flex h-[calc(100vh-57px)] w-full md:h-screen">
-        {isSettings && <SettingsNav />}
-        <div className="flex h-full w-full flex-col items-center overflow-y-auto p-4">
-          <Gutter>
-            <Topbar />
-            <Outlet />
-          </Gutter>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/breadcrumbs.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/breadcrumbs.tsx
deleted file mode 100644
index 3ccb7ce18e..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/breadcrumbs.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { TriangleRightMini } from "@medusajs/icons";
-import { clx } from "@medusajs/ui";
-import { Link, UIMatch, useMatches } from "react-router-dom";
-
-type BreadcrumbProps = React.ComponentPropsWithoutRef<"ol">;
-
-export const Breadcrumbs = ({ className, ...props }: BreadcrumbProps) => {
-  const matches = useMatches() as unknown as UIMatch<
-    unknown,
-    { crumb?: (data?: unknown) => string }
-  >[];
-
-  const crumbs = matches
-    .filter((match) => Boolean(match.handle?.crumb))
-    .map((match) => {
-      const handle = match.handle;
-
-      return {
-        label: handle.crumb!(match.data),
-        path: match.pathname,
-      };
-    });
-
-  if (crumbs.length < 2) {
-    return null;
-  }
-
-  return (
-    <ol
-      className={clx("flex items-center gap-x-1 text-ui-fg-muted", className)}
-      {...props}
-    >
-      {crumbs.map((crumb, index) => {
-        const isLast = index === crumbs.length - 1;
-
-        return (
-          <li
-            key={index}
-            className="txt-compact-small-plus flex items-center gap-x-1"
-          >
-            {!isLast ? (
-              <Link to={crumb.path}>{crumb.label}</Link>
-            ) : (
-              <span key={index}>{crumb.label}</span>
-            )}
-            {!isLast && <TriangleRightMini />}
-          </li>
-        );
-      })}
-    </ol>
-  );
-};
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/gutter.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/gutter.tsx
deleted file mode 100644
index 00b75f447b..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/gutter.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { PropsWithChildren } from "react";
-
-export const Gutter = ({ children }: PropsWithChildren) => {
-  return (
-    <div className="w-full max-w-[1200px] flex flex-col gap-y-4">
-      {children}
-    </div>
-  );
-};
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/index.ts b/packages/admin-next/dashboard/src/components/layout/app-layout/index.ts
deleted file mode 100644
index 07c56e200e..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./app-layout";
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/loader.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/loader.tsx
deleted file mode 100644
index 917b5b80aa..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/loader.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { QueryClient } from "@tanstack/react-query";
-import { adminProductKeys } from "medusa-react";
-import { LoaderFunctionArgs } from "react-router-dom";
-import { medusa, queryClient } from "../../../lib/medusa";
-
-const appLoaderQuery = (id: string) => ({
-  queryKey: adminProductKeys.detail(id),
-  queryFn: async () => medusa.admin.products.retrieve(id),
-});
-
-export const productLoader = (client: QueryClient) => {
-  return async ({ params }: LoaderFunctionArgs) => {
-    const id = params?.id;
-
-    if (!id) {
-      throw new Error("No id provided");
-    }
-
-    const query = appLoaderQuery(id);
-
-    return (
-      queryClient.getQueryData(query.queryKey) ??
-      (await client.fetchQuery(query))
-    );
-  };
-};
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/main-nav.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/main-nav.tsx
deleted file mode 100644
index 9332308ea7..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/main-nav.tsx
+++ /dev/null
@@ -1,380 +0,0 @@
-import {
-  ArrowRightOnRectangle,
-  BookOpen,
-  BuildingStorefront,
-  Calendar,
-  ChevronDownMini,
-  CircleHalfSolid,
-  CogSixTooth,
-  CurrencyDollar,
-  EllipsisHorizontal,
-  MinusMini,
-  ReceiptPercent,
-  ShoppingCart,
-  Sidebar,
-  SquaresPlus,
-  Tag,
-  Users,
-} from "@medusajs/icons"
-import { Avatar, DropdownMenu, IconButton, Text } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
-import * as Dialog from "@radix-ui/react-dialog"
-import { useAdminDeleteSession, useAdminStore } from "medusa-react"
-import { Link, useLocation, useNavigate } from "react-router-dom"
-
-import { useAuth } from "../../../providers/auth-provider"
-import { useTheme } from "../../../providers/theme-provider"
-
-import { Fragment, useEffect, useState } from "react"
-import { Breadcrumbs } from "./breadcrumbs"
-import { NavItem, NavItemProps } from "./nav-item"
-import { Notifications } from "./notifications"
-import { SearchToggle } from "./search-toggle"
-import { Spacer } from "./spacer"
-
-import extensions from "medusa-admin:routes/links"
-import { useTranslation } from "react-i18next"
-
-export const MainNav = () => {
-  return (
-    <Fragment>
-      <DesktopNav />
-      <MobileNav />
-    </Fragment>
-  )
-}
-
-const MobileNav = () => {
-  const [open, setOpen] = useState(false)
-  const location = useLocation()
-
-  // If the user navigates to a new route, we want to close the menu
-  useEffect(() => {
-    setOpen(false)
-  }, [location.pathname])
-
-  return (
-    <div className="bg-ui-bg-base border-ui-border-base flex h-[57px] w-full items-center justify-between border-b px-4 md:hidden">
-      <Dialog.Root open={open} onOpenChange={setOpen}>
-        <div className="flex items-center gap-x-2">
-          <Dialog.Trigger asChild>
-            <IconButton variant="transparent">
-              <Sidebar />
-            </IconButton>
-          </Dialog.Trigger>
-          <Breadcrumbs />
-        </div>
-        <Dialog.Portal>
-          <Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0 lg:hidden" />
-          <Dialog.Content className="bg-ui-bg-subtle fixed inset-y-0 left-0 flex w-full flex-col overflow-y-auto sm:max-w-[240px] lg:hidden">
-            <div className="flex flex-1 flex-col">
-              <div className="sticky top-0">
-                <Header />
-                <Spacer />
-              </div>
-              <CoreRouteSection />
-              <ExtensionRouteSection />
-            </div>
-            <div className="sticky bottom-0 flex w-full flex-col">
-              <SettingsSection />
-              <Spacer />
-              <UserSection />
-            </div>
-          </Dialog.Content>
-        </Dialog.Portal>
-      </Dialog.Root>
-      <div className="flex items-center gap-x-2">
-        <SearchToggle />
-        <Notifications />
-      </div>
-    </div>
-  )
-}
-
-const DesktopNav = () => {
-  return (
-    <aside className="flex h-full max-h-screen w-full max-w-[240px] flex-col justify-between overflow-y-auto max-md:hidden">
-      <div className="flex flex-1 flex-col">
-        <div className="bg-ui-bg-subtle sticky top-0">
-          <Header />
-          <Spacer />
-        </div>
-        <CoreRouteSection />
-        <ExtensionRouteSection />
-      </div>
-      <div className="bg-ui-bg-subtle sticky bottom-0 flex flex-col">
-        <SettingsSection />
-        <Spacer />
-        <UserSection />
-      </div>
-    </aside>
-  )
-}
-
-const Header = () => {
-  const { store } = useAdminStore()
-  const { setTheme, theme } = useTheme()
-  const { mutateAsync: logoutMutation } = useAdminDeleteSession()
-  const navigate = useNavigate()
-
-  const logout = async () => {
-    await logoutMutation(undefined, {
-      onSuccess: () => {
-        navigate("/login")
-      },
-    })
-  }
-
-  if (!store) {
-    return null
-  }
-
-  return (
-    <div className="w-full p-4">
-      <DropdownMenu>
-        <DropdownMenu.Trigger className="hover:bg-ui-bg-subtle-hover active:bg-ui-bg-subtle-pressed focus:bg-ui-bg-subtle-pressed transition-fg w-full rounded-md outline-none">
-          <div className="flex items-center justify-between p-1 md:pr-2">
-            <div className="flex items-center gap-x-3">
-              <div className="bg-ui-bg-base shadow-borders-base flex h-8 w-8 items-center justify-center overflow-hidden rounded-md">
-                <div className="bg-ui-bg-component flex h-[28px] w-[28px] items-center justify-center overflow-hidden rounded-[4px]">
-                  {store.name[0].toUpperCase()}
-                </div>
-              </div>
-              <Text size="small" weight="plus" leading="compact">
-                {store.name}
-              </Text>
-            </div>
-            <div className="text-ui-fg-subtle">
-              <EllipsisHorizontal />
-            </div>
-          </div>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content>
-          <DropdownMenu.Item>
-            <BuildingStorefront className="text-ui-fg-subtle mr-2" />
-            Store Settings
-          </DropdownMenu.Item>
-          <DropdownMenu.Separator />
-          <Link to="https://docs.medusajs.com/user-guide" target="_blank">
-            <DropdownMenu.Item>
-              <BookOpen className="text-ui-fg-subtle mr-2" />
-              Documentation
-            </DropdownMenu.Item>
-          </Link>
-          <Link to="https://medusajs.com/changelog/" target="_blank">
-            <DropdownMenu.Item>
-              <Calendar className="text-ui-fg-subtle mr-2" />
-              Changelog
-            </DropdownMenu.Item>
-          </Link>
-          <DropdownMenu.Separator />
-          <DropdownMenu.SubMenu>
-            <DropdownMenu.SubMenuTrigger className="rounded-md">
-              <CircleHalfSolid className="text-ui-fg-subtle mr-2" />
-              Theme
-            </DropdownMenu.SubMenuTrigger>
-            <DropdownMenu.SubMenuContent>
-              <DropdownMenu.RadioGroup value={theme}>
-                <DropdownMenu.RadioItem
-                  value="light"
-                  onClick={(e) => {
-                    e.preventDefault()
-                    setTheme("light")
-                  }}
-                >
-                  Light
-                </DropdownMenu.RadioItem>
-                <DropdownMenu.RadioItem
-                  value="dark"
-                  onClick={(e) => {
-                    e.preventDefault()
-                    setTheme("dark")
-                  }}
-                >
-                  Dark
-                </DropdownMenu.RadioItem>
-              </DropdownMenu.RadioGroup>
-            </DropdownMenu.SubMenuContent>
-          </DropdownMenu.SubMenu>
-          <DropdownMenu.Separator />
-          <DropdownMenu.Item onClick={logout}>
-            <ArrowRightOnRectangle className="text-ui-fg-subtle mr-2" />
-            Logout
-            <DropdownMenu.Shortcut>⌥⇧Q</DropdownMenu.Shortcut>
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    </div>
-  )
-}
-
-const useCoreRoutes = (): Omit<NavItemProps, "pathname">[] => {
-  const { t } = useTranslation()
-
-  return [
-    {
-      icon: <ShoppingCart />,
-      label: t("orders.domain"),
-      to: "/orders",
-      items: [
-        {
-          label: t("draftOrders.domain"),
-          to: "/draft-orders",
-        },
-      ],
-    },
-    {
-      icon: <Tag />,
-      label: t("products.domain"),
-      to: "/products",
-      items: [
-        {
-          label: t("collections.domain"),
-          to: "/collections",
-        },
-        {
-          label: t("categories.domain"),
-          to: "/categories",
-        },
-        {
-          label: t("giftCards.domain"),
-          to: "/gift-cards",
-        },
-        {
-          label: t("inventory.domain"),
-          to: "/inventory",
-        },
-      ],
-    },
-    {
-      icon: <Users />,
-      label: t("customers.domain"),
-      to: "/customers",
-      items: [
-        {
-          label: t("customerGroups.domain"),
-          to: "/customer-groups",
-        },
-      ],
-    },
-    {
-      icon: <ReceiptPercent />,
-      label: t("discounts.domain"),
-      to: "/discounts",
-    },
-    {
-      icon: <CurrencyDollar />,
-      label: t("pricing.domain"),
-      to: "/pricing",
-    },
-  ]
-}
-
-const CoreRouteSection = () => {
-  const coreRoutes = useCoreRoutes()
-
-  return (
-    <nav className="flex flex-col gap-y-1 py-4">
-      {coreRoutes.map((route) => {
-        return <NavItem key={route.to} {...route} />
-      })}
-    </nav>
-  )
-}
-
-const ExtensionRouteSection = () => {
-  if (!extensions.links || extensions.links.length === 0) {
-    return null
-  }
-
-  return (
-    <div>
-      <Spacer />
-      <div className="flex flex-col gap-y-4 py-4">
-        <Collapsible.Root defaultOpen>
-          <div className="px-4">
-            <Collapsible.Trigger asChild className="group/trigger">
-              <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
-                <Text size="xsmall" weight="plus" leading="compact">
-                  Extensions
-                </Text>
-                <div className="text-ui-fg-muted">
-                  <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
-                  <MinusMini className="group-data-[state=closed]/trigger:hidden" />
-                </div>
-              </button>
-            </Collapsible.Trigger>
-          </div>
-          <Collapsible.Content>
-            <div className="flex flex-col gap-y-1 py-1 pb-4">
-              {extensions.links.map((link) => {
-                return (
-                  <NavItem
-                    key={link.path}
-                    to={link.path}
-                    label={link.label}
-                    icon={link.icon ? <link.icon /> : <SquaresPlus />}
-                    type="extension"
-                  />
-                )
-              })}
-            </div>
-          </Collapsible.Content>
-        </Collapsible.Root>
-      </div>
-    </div>
-  )
-}
-
-const SettingsSection = () => {
-  return (
-    <div className="py-4">
-      <NavItem icon={<CogSixTooth />} label="Settings" to="/settings" />
-    </div>
-  )
-}
-
-const UserSection = () => {
-  const { user } = useAuth()
-
-  if (!user) {
-    return null
-  }
-
-  const fallback =
-    user.first_name && user.last_name
-      ? `${user.first_name[0]}${user.last_name[0]}`
-      : user.first_name
-      ? user.first_name[0]
-      : user.email[0]
-
-  return (
-    <div className="p-4">
-      <Link
-        to="/settings/profile"
-        className="hover:bg-ui-bg-subtle-hover transition-fg active:bg-ui-bg-subtle-pressed focus:bg-ui-bg-subtle-pressed flex items-center gap-x-3 rounded-md p-1 outline-none"
-      >
-        <Avatar fallback={fallback.toUpperCase()} />
-        <div className="flex flex-1 flex-col">
-          {(user.first_name || user.last_name) && (
-            <Text
-              size="xsmall"
-              weight="plus"
-              leading="compact"
-              className="max-w-[90%] truncate"
-            >{`${user.first_name && `${user.first_name} `}${
-              user.last_name
-            }`}</Text>
-          )}
-          <Text
-            size="xsmall"
-            leading="compact"
-            className="text-ui-fg-subtle max-w-[90%] truncate"
-          >
-            {user.email}
-          </Text>
-        </div>
-      </Link>
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/nav-item.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/nav-item.tsx
deleted file mode 100644
index 23d6f9946e..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/nav-item.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { Text, clx } from "@medusajs/ui";
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-
-type ItemType = "core" | "extension";
-
-type NestedItemProps = {
-  label: string;
-  to: string;
-};
-
-export type NavItemProps = {
-  icon?: React.ReactNode;
-  label: string;
-  to: string;
-  items?: NestedItemProps[];
-  type?: ItemType;
-};
-
-export const NavItem = ({
-  icon,
-  label,
-  to,
-  items,
-  type = "core",
-}: NavItemProps) => {
-  const location = useLocation();
-
-  const [open, setOpen] = useState(
-    [to, ...(items?.map((i) => i.to) ?? [])].some((p) =>
-      location.pathname.startsWith(p)
-    )
-  );
-
-  useEffect(() => {
-    setOpen(
-      [to, ...(items?.map((i) => i.to) ?? [])].some((p) =>
-        location.pathname.startsWith(p)
-      )
-    );
-  }, [location.pathname, to, items]);
-
-  return (
-    <div className="px-4">
-      <Link
-        to={to}
-        className={clx(
-          "text-ui-fg-subtle hover:text-ui-fg-base px-2 py-2.5 md:py-1.5 outline-none flex items-center gap-x-2 transition-fg rounded-md hover:bg-ui-bg-subtle-hover",
-          {
-            "bg-ui-bg-base shadow-elevation-card-rest":
-              location.pathname.startsWith(to),
-            "max-md:hidden": items && items.length > 0,
-          }
-        )}
-      >
-        <Icon icon={icon} type={type} />
-        <Text size="small" weight="plus" leading="compact">
-          {label}
-        </Text>
-      </Link>
-      {items && items.length > 0 && (
-        <Collapsible.Root open={open} onOpenChange={setOpen}>
-          <Collapsible.Trigger
-            className={clx(
-              "w-full md:hidden text-ui-fg-subtle hover:text-ui-fg-base px-2 py-2.5 md:py-1.5 outline-none flex items-center gap-x-2 transition-fg rounded-md hover:bg-ui-bg-subtle-hover"
-            )}
-          >
-            <Icon icon={icon} type={type} />
-            <Text size="small" weight="plus" leading="compact">
-              {label}
-            </Text>
-          </Collapsible.Trigger>
-          <Collapsible.Content className="flex flex-col gap-y-1 pt-1">
-            <Link
-              to={to}
-              className={clx(
-                "md:hidden text-ui-fg-subtle hover:text-ui-fg-base px-2 py-2.5 md:py-1.5 outline-none flex items-center gap-x-2 transition-fg rounded-md hover:bg-ui-bg-subtle-hover",
-                {
-                  "bg-ui-bg-base shadow-elevation-card-rest":
-                    location.pathname.startsWith(to),
-                }
-              )}
-            >
-              <div className="w-5 h-5 flex items-center justify-center">
-                <div
-                  className={clx(
-                    "w-1.5 h-1.5 border-[1.5px] border-ui-fg-muted transition-fg rounded-full",
-                    {
-                      "border-ui-fg-base border-2": location.pathname === to,
-                    }
-                  )}
-                />
-              </div>
-              <Text size="small" weight="plus" leading="compact">
-                {label}
-              </Text>
-            </Link>
-            {items.map((item) => {
-              return (
-                <Link
-                  to={item.to}
-                  key={item.to}
-                  className={clx(
-                    "first-of-type:mt-1 last-of-type:mb-2 text-ui-fg-subtle hover:text-ui-fg-base px-2 py-2.5 md:py-1.5 outline-none flex items-center gap-x-2 transition-fg rounded-md hover:bg-ui-bg-subtle-hover",
-                    {
-                      "bg-ui-bg-base shadow-elevation-card-rest":
-                        location.pathname === item.to,
-                    }
-                  )}
-                >
-                  <div className="w-5 h-5 flex items-center justify-center">
-                    <div
-                      className={clx(
-                        "w-1.5 h-1.5 border-[1.5px] border-ui-fg-muted transition-fg rounded-full",
-                        {
-                          "border-ui-fg-base border-2":
-                            location.pathname === item.to,
-                        }
-                      )}
-                    />
-                  </div>
-                  <Text size="small" weight="plus" leading="compact">
-                    {item.label}
-                  </Text>
-                </Link>
-              );
-            })}
-          </Collapsible.Content>
-        </Collapsible.Root>
-      )}
-    </div>
-  );
-};
-
-const Icon = ({ icon, type }: { icon?: React.ReactNode; type: ItemType }) => {
-  if (!icon) {
-    return null;
-  }
-
-  return type === "extension" ? (
-    <div className="rounded-[4px] w-5 h-5 flex items-center justify-center shadow-borders-base bg-ui-bg-base">
-      <div className="w-4 h-4 rounded-sm overflow-hidden">{icon}</div>
-    </div>
-  ) : (
-    icon
-  );
-};
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/search-toggle.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/search-toggle.tsx
deleted file mode 100644
index 949cca5ce1..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/search-toggle.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { MagnifyingGlass } from "@medusajs/icons"
-import { IconButton } from "@medusajs/ui"
-import { useSearch } from "../../../providers/search-provider"
-
-export const SearchToggle = () => {
-  const { toggleSearch } = useSearch()
-
-  return (
-    <IconButton
-      variant="transparent"
-      onClick={toggleSearch}
-      className="text-ui-fg-muted hover:text-ui-fg-subtle"
-    >
-      <MagnifyingGlass />
-    </IconButton>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/settings-nav.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/settings-nav.tsx
deleted file mode 100644
index acb25a8aa9..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/settings-nav.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { ChevronDownMini, CogSixTooth, MinusMini } from "@medusajs/icons"
-import { Text } from "@medusajs/ui"
-import * as Collapsible from "@radix-ui/react-collapsible"
-
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { NavItem, NavItemProps } from "./nav-item"
-import { Spacer } from "./spacer"
-
-const useSettingRoutes = (): NavItemProps[] => {
-  const { t } = useTranslation()
-
-  return useMemo(
-    () => [
-      {
-        label: t("profile.domain"),
-        to: "/settings/profile",
-      },
-      {
-        label: t("store.domain"),
-        to: "/settings/store",
-      },
-      {
-        label: t("users.domain"),
-        to: "/settings/users",
-      },
-      {
-        label: t("regions.domain"),
-        to: "/settings/regions",
-      },
-      {
-        label: t("currencies.domain"),
-        to: "/settings/currencies",
-      },
-      {
-        label: "Taxes",
-        to: "/settings/taxes",
-      },
-      {
-        label: "Locations",
-        to: "/settings/locations",
-      },
-      {
-        label: t("salesChannels.domain"),
-        to: "/settings/sales-channels",
-      },
-      {
-        label: t("apiKeyManagement.domain"),
-        to: "/settings/api-key-management",
-      },
-    ],
-    [t]
-  )
-}
-
-export const SettingsNav = () => {
-  const routes = useSettingRoutes()
-  const { t } = useTranslation()
-
-  return (
-    <div className="border-ui-border-base box-content flex h-full max-h-screen w-full max-w-[240px] flex-col overflow-hidden border-x max-md:hidden">
-      <div className="p-4">
-        <div className="flex h-10 items-center gap-x-3 p-1">
-          <CogSixTooth className="text-ui-fg-subtle" />
-          <Text leading="compact" weight="plus" size="small">
-            {t("general.settings")}
-          </Text>
-        </div>
-      </div>
-      <Spacer />
-      <div className="flex flex-1 flex-col gap-y-4 overflow-y-auto py-4">
-        <Collapsible.Root defaultOpen>
-          <div className="px-4">
-            <Collapsible.Trigger asChild className="group/trigger">
-              <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
-                <Text size="xsmall" weight="plus" leading="compact">
-                  {t("general.general")}
-                </Text>
-                <div className="text-ui-fg-muted">
-                  <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
-                  <MinusMini className="group-data-[state=closed]/trigger:hidden" />
-                </div>
-              </button>
-            </Collapsible.Trigger>
-          </div>
-          <Collapsible.Content asChild>
-            <nav className="flex flex-col gap-y-1 py-1">
-              {routes.map((setting) => (
-                <NavItem key={setting.to} {...setting} />
-              ))}
-            </nav>
-          </Collapsible.Content>
-        </Collapsible.Root>
-        <Collapsible.Root>
-          <div className="px-4">
-            <Collapsible.Trigger asChild className="group/trigger">
-              <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
-                <Text size="xsmall" weight="plus" leading="compact">
-                  {t("general.extensions")}
-                </Text>
-                <div className="text-ui-fg-muted">
-                  <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
-                  <MinusMini className="group-data-[state=closed]/trigger:hidden" />
-                </div>
-              </button>
-            </Collapsible.Trigger>
-          </div>
-          <Collapsible.Content asChild>
-            <nav className="flex flex-col gap-y-1 py-1">
-              {routes.map((setting) => (
-                <NavItem key={setting.to} {...setting} />
-              ))}
-            </nav>
-          </Collapsible.Content>
-        </Collapsible.Root>
-      </div>
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/spacer.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/spacer.tsx
deleted file mode 100644
index 4e00210d2f..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/spacer.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export const Spacer = () => {
-  return (
-    <div className="px-4">
-      <div className="w-full h-px border-b border-dashed border-ui-border-strong" />
-    </div>
-  );
-};
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/topbar.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/topbar.tsx
deleted file mode 100644
index cd2bdc40db..0000000000
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/topbar.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Sidebar } from "@medusajs/icons"
-import { Breadcrumbs } from "./breadcrumbs"
-import { Notifications } from "./notifications"
-import { SearchToggle } from "./search-toggle"
-
-export const Topbar = () => {
-  return (
-    <div className="hidden items-center justify-between px-4 py-1 md:flex">
-      <div className="flex items-center gap-x-1.5">
-        <Sidebar className="text-ui-fg-muted" />
-        <Breadcrumbs />
-      </div>
-      <div className="text-ui-fg-muted flex items-center gap-x-1">
-        <SearchToggle />
-        <Notifications />
-      </div>
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/components/layout/main-layout/index.ts b/packages/admin-next/dashboard/src/components/layout/main-layout/index.ts
new file mode 100644
index 0000000000..035d09e6d6
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/main-layout/index.ts
@@ -0,0 +1 @@
+export * from "./main-layout"
diff --git a/packages/admin-next/dashboard/src/components/layout/main-layout/main-layout.tsx b/packages/admin-next/dashboard/src/components/layout/main-layout/main-layout.tsx
new file mode 100644
index 0000000000..0d76bd7dd4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/main-layout/main-layout.tsx
@@ -0,0 +1,197 @@
+import {
+  ChevronDownMini,
+  CurrencyDollar,
+  MinusMini,
+  ReceiptPercent,
+  ShoppingCart,
+  SquaresPlus,
+  Tag,
+  Users,
+} from "@medusajs/icons"
+import { Avatar, Text } from "@medusajs/ui"
+import * as Collapsible from "@radix-ui/react-collapsible"
+import { useAdminStore } from "medusa-react"
+import { useTranslation } from "react-i18next"
+
+import { Skeleton } from "../../common/skeleton"
+import { NavItem, NavItemProps } from "../nav-item"
+import { Shell } from "../shell"
+
+import extensions from "medusa-admin:routes/links"
+
+export const MainLayout = () => {
+  return (
+    <Shell>
+      <MainSidebar />
+    </Shell>
+  )
+}
+
+const MainSidebar = () => {
+  return (
+    <aside className="flex flex-1 flex-col justify-between overflow-y-auto">
+      <div className="flex flex-1 flex-col">
+        <div className="bg-ui-bg-subtle sticky top-0">
+          <Header />
+          <div className="px-3">
+            <div className="border-ui-border-strong h-px w-full border-b border-dashed" />
+          </div>
+        </div>
+        <CoreRouteSection />
+        <ExtensionRouteSection />
+      </div>
+    </aside>
+  )
+}
+
+const Header = () => {
+  const { store, isError, error } = useAdminStore()
+
+  const name = store?.name
+  const fallback = store?.name?.slice(0, 1).toUpperCase()
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <div className="w-full px-3 py-2">
+      <div className="flex items-center p-1 md:pr-2">
+        <div className="flex items-center gap-x-3">
+          {fallback ? (
+            <Avatar variant="squared" fallback={fallback} />
+          ) : (
+            <Skeleton className="w-8 h-8 rounded-md" />
+          )}
+          {name ? (
+            <Text size="small" weight="plus" leading="compact">
+              {store.name}
+            </Text>
+          ) : (
+            <Skeleton className="w-[120px] h-[9px]" />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const useCoreRoutes = (): Omit<NavItemProps, "pathname">[] => {
+  const { t } = useTranslation()
+
+  return [
+    {
+      icon: <ShoppingCart />,
+      label: t("orders.domain"),
+      to: "/orders",
+      items: [
+        {
+          label: t("draftOrders.domain"),
+          to: "/draft-orders",
+        },
+      ],
+    },
+    {
+      icon: <Tag />,
+      label: t("products.domain"),
+      to: "/products",
+      items: [
+        {
+          label: t("collections.domain"),
+          to: "/collections",
+        },
+        {
+          label: t("categories.domain"),
+          to: "/categories",
+        },
+        {
+          label: t("giftCards.domain"),
+          to: "/gift-cards",
+        },
+        {
+          label: t("inventory.domain"),
+          to: "/inventory",
+        },
+      ],
+    },
+    {
+      icon: <Users />,
+      label: t("customers.domain"),
+      to: "/customers",
+      items: [
+        {
+          label: t("customerGroups.domain"),
+          to: "/customer-groups",
+        },
+      ],
+    },
+    {
+      icon: <ReceiptPercent />,
+      label: t("discounts.domain"),
+      to: "/discounts",
+    },
+    {
+      icon: <CurrencyDollar />,
+      label: t("pricing.domain"),
+      to: "/pricing",
+    },
+  ]
+}
+
+const CoreRouteSection = () => {
+  const coreRoutes = useCoreRoutes()
+
+  return (
+    <nav className="flex flex-col gap-y-1 py-2">
+      {coreRoutes.map((route) => {
+        return <NavItem key={route.to} {...route} />
+      })}
+    </nav>
+  )
+}
+
+const ExtensionRouteSection = () => {
+  if (!extensions.links || extensions.links.length === 0) {
+    return null
+  }
+
+  return (
+    <div>
+      <div className="px-3">
+        <div className="border-ui-border-strong h-px w-full border-b border-dashed" />
+      </div>
+      <div className="flex flex-col gap-y-1 py-2">
+        <Collapsible.Root defaultOpen>
+          <div className="px-4">
+            <Collapsible.Trigger asChild className="group/trigger">
+              <button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
+                <Text size="xsmall" weight="plus" leading="compact">
+                  Extensions
+                </Text>
+                <div className="text-ui-fg-muted">
+                  <ChevronDownMini className="group-data-[state=open]/trigger:hidden" />
+                  <MinusMini className="group-data-[state=closed]/trigger:hidden" />
+                </div>
+              </button>
+            </Collapsible.Trigger>
+          </div>
+          <Collapsible.Content>
+            <div className="flex flex-col gap-y-1 py-1 pb-4">
+              {extensions.links.map((link) => {
+                return (
+                  <NavItem
+                    key={link.path}
+                    to={link.path}
+                    label={link.label}
+                    icon={link.icon ? <link.icon /> : <SquaresPlus />}
+                    type="extension"
+                  />
+                )
+              })}
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/layout/nav-item/index.ts b/packages/admin-next/dashboard/src/components/layout/nav-item/index.ts
new file mode 100644
index 0000000000..c0155cc9bb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/nav-item/index.ts
@@ -0,0 +1 @@
+export * from "./nav-item"
diff --git a/packages/admin-next/dashboard/src/components/layout/nav-item/nav-item.tsx b/packages/admin-next/dashboard/src/components/layout/nav-item/nav-item.tsx
new file mode 100644
index 0000000000..55f7cc7204
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/nav-item/nav-item.tsx
@@ -0,0 +1,156 @@
+import { Text, clx } from "@medusajs/ui"
+import * as Collapsible from "@radix-ui/react-collapsible"
+import { useEffect, useState } from "react"
+import { Link, useLocation } from "react-router-dom"
+
+type ItemType = "core" | "extension"
+
+type NestedItemProps = {
+  label: string
+  to: string
+}
+
+export type NavItemProps = {
+  icon?: React.ReactNode
+  label: string
+  to: string
+  items?: NestedItemProps[]
+  type?: ItemType
+  from?: string
+}
+
+export const NavItem = ({
+  icon,
+  label,
+  to,
+  items,
+  type = "core",
+  from,
+}: NavItemProps) => {
+  const location = useLocation()
+
+  const [open, setOpen] = useState(
+    [to, ...(items?.map((i) => i.to) ?? [])].some((p) =>
+      location.pathname.startsWith(p)
+    )
+  )
+
+  useEffect(() => {
+    setOpen(
+      [to, ...(items?.map((i) => i.to) ?? [])].some((p) =>
+        location.pathname.startsWith(p)
+      )
+    )
+  }, [location.pathname, to, items])
+
+  return (
+    <div className="px-3">
+      <Link
+        to={to}
+        state={
+          from
+            ? {
+                from,
+              }
+            : undefined
+        }
+        className={clx(
+          "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:py-1.5",
+          {
+            "bg-ui-bg-base hover:bg-ui-bg-base-hover shadow-elevation-card-rest":
+              location.pathname.startsWith(to),
+            "max-md:hidden": items && items.length > 0,
+          }
+        )}
+      >
+        <Icon icon={icon} type={type} />
+        <Text size="small" weight="plus" leading="compact">
+          {label}
+        </Text>
+      </Link>
+      {items && items.length > 0 && (
+        <Collapsible.Root open={open} onOpenChange={setOpen}>
+          <Collapsible.Trigger
+            className={clx(
+              "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex w-full items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:hidden md:py-1.5"
+            )}
+          >
+            <Icon icon={icon} type={type} />
+            <Text size="small" weight="plus" leading="compact">
+              {label}
+            </Text>
+          </Collapsible.Trigger>
+          <Collapsible.Content className="flex flex-col pt-1">
+            <div className="flex h-[36px] w-full items-center gap-x-1 pl-2 md:hidden">
+              <div
+                role="presentation"
+                className="flex h-full w-5 items-center justify-center"
+              >
+                <div className="bg-ui-border-strong h-full w-px" />
+              </div>
+              <Link
+                to={to}
+                className={clx(
+                  "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover mb-2 mt-1 flex h-8 flex-1 items-center gap-x-2 rounded-md px-2 py-2.5 outline-none md:py-1.5",
+                  {
+                    "bg-ui-bg-base hover:bg-ui-bg-base text-ui-fg-base shadow-elevation-card-rest":
+                      location.pathname.startsWith(to),
+                  }
+                )}
+              >
+                <Text size="small" weight="plus" leading="compact">
+                  {label}
+                </Text>
+              </Link>
+            </div>
+            <ul>
+              {items.map((item) => {
+                return (
+                  <li
+                    key={item.to}
+                    className="flex h-[36px] items-center gap-x-1 pl-2"
+                  >
+                    <div
+                      role="presentation"
+                      className="flex h-full w-5 items-center justify-center"
+                    >
+                      <div className="bg-ui-border-strong h-full w-px" />
+                    </div>
+                    <Link
+                      to={item.to}
+                      className={clx(
+                        "text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex h-8 flex-1 items-center gap-x-2 rounded-md px-2 py-2.5 outline-none first-of-type:mt-1 last-of-type:mb-2 md:py-1.5",
+                        {
+                          "bg-ui-bg-base text-ui-fg-base hover:bg-ui-bg-base shadow-elevation-card-rest":
+                            location.pathname === item.to,
+                        }
+                      )}
+                    >
+                      <Text size="small" weight="plus" leading="compact">
+                        {item.label}
+                      </Text>
+                    </Link>
+                  </li>
+                )
+              })}
+            </ul>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      )}
+    </div>
+  )
+}
+
+const Icon = ({ icon, type }: { icon?: React.ReactNode; type: ItemType }) => {
+  if (!icon) {
+    return null
+  }
+
+  return type === "extension" ? (
+    <div className="shadow-borders-base bg-ui-bg-base flex h-5 w-5 items-center justify-center rounded-[4px]">
+      <div className="h-4 w-4 overflow-hidden rounded-sm">{icon}</div>
+    </div>
+  ) : (
+    icon
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/layout/notifications/index.ts b/packages/admin-next/dashboard/src/components/layout/notifications/index.ts
new file mode 100644
index 0000000000..3509846360
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/notifications/index.ts
@@ -0,0 +1 @@
+export * from "./notifications"
diff --git a/packages/admin-next/dashboard/src/components/layout/app-layout/notifications.tsx b/packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx
similarity index 53%
rename from packages/admin-next/dashboard/src/components/layout/app-layout/notifications.tsx
rename to packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx
index 6af0a698a3..921147ec64 100644
--- a/packages/admin-next/dashboard/src/components/layout/app-layout/notifications.tsx
+++ b/packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx
@@ -1,28 +1,31 @@
-import { BellAlert } from "@medusajs/icons";
-import { Drawer, Heading, IconButton } from "@medusajs/ui";
-import { useEffect, useState } from "react";
+import { BellAlert } from "@medusajs/icons"
+import { Drawer, Heading, IconButton } from "@medusajs/ui"
+import { useEffect, useState } from "react"
 
 export const Notifications = () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "n" && (e.metaKey || e.ctrlKey)) {
-        setOpen((prev) => !prev);
+        setOpen((prev) => !prev)
       }
-    };
+    }
 
-    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keydown", onKeyDown)
 
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, []);
+      document.removeEventListener("keydown", onKeyDown)
+    }
+  }, [])
 
   return (
     <Drawer open={open} onOpenChange={setOpen}>
       <Drawer.Trigger asChild>
-        <IconButton variant="transparent" className="text-ui-fg-muted">
+        <IconButton
+          variant="transparent"
+          className="text-ui-fg-muted hover:text-ui-fg-subtle"
+        >
           <BellAlert />
         </IconButton>
       </Drawer.Trigger>
@@ -33,5 +36,5 @@ export const Notifications = () => {
         <Drawer.Body>Notifications will go here</Drawer.Body>
       </Drawer.Content>
     </Drawer>
-  );
-};
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/layout/settings-layout/index.ts b/packages/admin-next/dashboard/src/components/layout/settings-layout/index.ts
new file mode 100644
index 0000000000..6c0bebb323
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/settings-layout/index.ts
@@ -0,0 +1 @@
+export * from "./settings-layout"
diff --git a/packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx b/packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx
new file mode 100644
index 0000000000..25f181756c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx
@@ -0,0 +1,99 @@
+import { ArrowUturnLeft } from "@medusajs/icons"
+import { IconButton, Text } from "@medusajs/ui"
+import { useEffect, useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useLocation } from "react-router-dom"
+
+import { NavItem, NavItemProps } from "../nav-item"
+import { Shell } from "../shell"
+
+export const SettingsLayout = () => {
+  return (
+    <Shell>
+      <SettingsSidebar />
+    </Shell>
+  )
+}
+
+const useSettingRoutes = (): NavItemProps[] => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      {
+        label: t("profile.domain"),
+        to: "/settings/profile",
+      },
+      {
+        label: t("store.domain"),
+        to: "/settings/store",
+      },
+      {
+        label: t("users.domain"),
+        to: "/settings/users",
+      },
+      {
+        label: t("regions.domain"),
+        to: "/settings/regions",
+      },
+      {
+        label: "Taxes",
+        to: "/settings/taxes",
+      },
+      {
+        label: "Locations",
+        to: "/settings/locations",
+      },
+      {
+        label: t("salesChannels.domain"),
+        to: "/settings/sales-channels",
+      },
+      {
+        label: t("apiKeyManagement.domain"),
+        to: "/settings/api-key-management",
+      },
+    ],
+    [t]
+  )
+}
+
+const SettingsSidebar = () => {
+  const routes = useSettingRoutes()
+  const { t } = useTranslation()
+
+  const location = useLocation()
+  const [from, setFrom] = useState("/orders")
+
+  useEffect(() => {
+    if (location.state?.from) {
+      setFrom(location.state.from)
+    }
+  }, [location])
+
+  return (
+    <aside className="flex flex-1 flex-col justify-between overflow-y-auto">
+      <div className="px-3 py-2">
+        <div className="flex items-center gap-x-3 p-1">
+          <Link to={from} replace className="flex items-center justify-center">
+            <IconButton size="small" variant="transparent">
+              <ArrowUturnLeft />
+            </IconButton>
+          </Link>
+          <Text leading="compact" weight="plus" size="small">
+            {t("general.settings")}
+          </Text>
+        </div>
+      </div>
+      <div className="px-3">
+        <div className="border-ui-border-strong h-px w-full border-b border-dashed" />
+      </div>
+      <div className="flex flex-1 flex-col gap-y-4 overflow-y-auto py-2">
+        <nav className="flex flex-col gap-y-1">
+          {routes.map((setting) => (
+            <NavItem key={setting.to} {...setting} />
+          ))}
+        </nav>
+      </div>
+    </aside>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/layout/shell/index.ts b/packages/admin-next/dashboard/src/components/layout/shell/index.ts
new file mode 100644
index 0000000000..d1e0c03c89
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/shell/index.ts
@@ -0,0 +1 @@
+export * from "./shell"
diff --git a/packages/admin-next/dashboard/src/components/layout/shell/shell.tsx b/packages/admin-next/dashboard/src/components/layout/shell/shell.tsx
new file mode 100644
index 0000000000..31044999a7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/shell/shell.tsx
@@ -0,0 +1,378 @@
+import {
+  ArrowRightOnRectangle,
+  BellAlert,
+  BookOpen,
+  Calendar,
+  CircleHalfSolid,
+  CogSixTooth,
+  MagnifyingGlass,
+  Sidebar,
+  User as UserIcon,
+} from "@medusajs/icons"
+import { Avatar, DropdownMenu, IconButton, Kbd, Text, clx } from "@medusajs/ui"
+import * as Dialog from "@radix-ui/react-dialog"
+import { useAdminDeleteSession, useAdminGetSession } from "medusa-react"
+import { PropsWithChildren } from "react"
+import {
+  Link,
+  Outlet,
+  UIMatch,
+  useLocation,
+  useMatches,
+  useNavigate,
+} from "react-router-dom"
+
+import { Skeleton } from "../../common/skeleton"
+
+import { useSearch } from "../../../providers/search-provider"
+import { useSidebar } from "../../../providers/sidebar-provider"
+import { useTheme } from "../../../providers/theme-provider"
+
+export const Shell = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="flex h-screen flex-col items-start overflow-hidden lg:flex-row">
+      <div>
+        <MobileSidebarContainer>{children}</MobileSidebarContainer>
+        <DesktopSidebarContainer>{children}</DesktopSidebarContainer>
+      </div>
+      <div className="flex flex-col h-screen w-full">
+        <Topbar />
+        <div className="flex h-full w-full flex-col items-center overflow-y-auto">
+          <Gutter>
+            <Outlet />
+          </Gutter>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Gutter = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="flex w-full max-w-[1600px] flex-col gap-y-2 p-3">
+      {children}
+    </div>
+  )
+}
+
+const Breadcrumbs = () => {
+  const matches = useMatches() as unknown as UIMatch<
+    unknown,
+    { crumb?: (data?: unknown) => string }
+  >[]
+
+  const crumbs = matches
+    .filter((match) => Boolean(match.handle?.crumb))
+    .map((match) => {
+      const handle = match.handle
+
+      return {
+        label: handle.crumb!(match.data),
+        path: match.pathname,
+      }
+    })
+
+  return (
+    <ol className={clx("text-ui-fg-muted flex items-center select-none")}>
+      {crumbs.map((crumb, index) => {
+        const isLast = index === crumbs.length - 1
+
+        return (
+          <li
+            key={index}
+            className={clx("txt-compact-small-plus flex items-center", {
+              "text-ui-fg-subtle": isLast,
+            })}
+          >
+            {!isLast ? (
+              <Link
+                className="transition-fg hover:text-ui-fg-subtle"
+                to={crumb.path}
+              >
+                {crumb.label}
+              </Link>
+            ) : (
+              <div>
+                <span className="block md:hidden">...</span>
+                <span key={index} className="hidden md:block">
+                  {crumb.label}
+                </span>
+              </div>
+            )}
+            {/* {!isLast && <TriangleRightMini className="-mt-0.5 mx-2" />} */}
+            {!isLast && <span className="-mt-0.5 mx-2">›</span>}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+const UserBadge = () => {
+  const { user, isError, error } = useAdminGetSession()
+
+  const displayName = user
+    ? user.first_name && user.last_name
+      ? `${user.first_name} ${user.last_name}`
+      : user.first_name
+        ? user.first_name
+        : user.email
+    : null
+
+  const fallback = displayName ? displayName[0].toUpperCase() : null
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <DropdownMenu.Trigger asChild>
+      <button
+        disabled={!user}
+        className={clx(
+          "shadow-borders-base flex max-w-[192px] items-center gap-x-2 overflow-hidden text-ellipsis whitespace-nowrap rounded-full py-1 pl-1 pr-2.5 select-none"
+        )}
+      >
+        {fallback ? (
+          <Avatar size="xsmall" fallback={fallback} />
+        ) : (
+          <Skeleton className="w-5 h-5 rounded-full" />
+        )}
+        {displayName ? (
+          <Text
+            size="xsmall"
+            weight="plus"
+            leading="compact"
+            className="truncate"
+          >
+            {displayName}
+          </Text>
+        ) : (
+          <Skeleton className="w-[70px] h-[9px]" />
+        )}
+      </button>
+    </DropdownMenu.Trigger>
+  )
+}
+
+const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <DropdownMenu.SubMenu>
+      <DropdownMenu.SubMenuTrigger className="rounded-md">
+        <CircleHalfSolid className="text-ui-fg-subtle mr-2" />
+        Theme
+      </DropdownMenu.SubMenuTrigger>
+      <DropdownMenu.SubMenuContent>
+        <DropdownMenu.RadioGroup value={theme}>
+          <DropdownMenu.RadioItem
+            value="light"
+            onClick={(e) => {
+              e.preventDefault()
+              setTheme("light")
+            }}
+          >
+            Light
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem
+            value="dark"
+            onClick={(e) => {
+              e.preventDefault()
+              setTheme("dark")
+            }}
+          >
+            Dark
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.SubMenuContent>
+    </DropdownMenu.SubMenu>
+  )
+}
+
+const Logout = () => {
+  const navigate = useNavigate()
+  const { mutateAsync: logoutMutation } = useAdminDeleteSession()
+
+  const handleLayout = async () => {
+    await logoutMutation(undefined, {
+      onSuccess: () => {
+        navigate("/login")
+      },
+    })
+  }
+
+  return (
+    <DropdownMenu.Item onClick={handleLayout}>
+      <div className="flex items-center gap-x-2">
+        <ArrowRightOnRectangle className="text-ui-fg-subtle" />
+        <span>Logout</span>
+      </div>
+    </DropdownMenu.Item>
+  )
+}
+
+const Profile = () => {
+  const location = useLocation()
+
+  return (
+    <Link to="/settings/profile" state={{ from: location.pathname }}>
+      <DropdownMenu.Item>
+        <UserIcon className="text-ui-fg-subtle mr-2" />
+        Profile
+      </DropdownMenu.Item>
+    </Link>
+  )
+}
+
+const LoggedInUser = () => {
+  return (
+    <DropdownMenu>
+      <UserBadge />
+      <DropdownMenu.Content align="center">
+        <Profile />
+        <DropdownMenu.Separator />
+        <Link to="https://docs.medusajs.com/user-guide" target="_blank">
+          <DropdownMenu.Item>
+            <BookOpen className="text-ui-fg-subtle mr-2" />
+            Documentation
+          </DropdownMenu.Item>
+        </Link>
+        <Link to="https://medusajs.com/changelog/" target="_blank">
+          <DropdownMenu.Item>
+            <Calendar className="text-ui-fg-subtle mr-2" />
+            Changelog
+          </DropdownMenu.Item>
+        </Link>
+        <DropdownMenu.Separator />
+        <ThemeToggle />
+        <DropdownMenu.Separator />
+        <Logout />
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const SettingsLink = () => {
+  const location = useLocation()
+
+  return (
+    <Link
+      to="/settings"
+      className="flex items-center justify-center"
+      state={{ from: location.pathname }}
+    >
+      <IconButton
+        size="small"
+        variant="transparent"
+        className="text-ui-fg-muted transition-fg hover:text-ui-fg-subtle"
+      >
+        <CogSixTooth />
+      </IconButton>
+    </Link>
+  )
+}
+
+const ToggleNotifications = () => {
+  return (
+    <IconButton
+      size="small"
+      variant="transparent"
+      className="text-ui-fg-muted transition-fg hover:text-ui-fg-subtle"
+    >
+      <BellAlert />
+    </IconButton>
+  )
+}
+
+const Searchbar = () => {
+  const { toggleSearch } = useSearch()
+
+  return (
+    <button
+      onClick={toggleSearch}
+      className="shadow-borders-base bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover transition-fg focus-visible:shadow-borders-focus text-ui-fg-muted flex w-full max-w-[280px] items-center gap-x-2 rounded-full py-1.5 pl-2 pr-1.5 outline-none select-none"
+    >
+      <MagnifyingGlass />
+      <div className="flex-1 text-left">
+        <Text size="small" leading="compact">
+          Jump to or search
+        </Text>
+      </div>
+      <Kbd className="rounded-full">⌘K</Kbd>
+    </button>
+  )
+}
+
+const ToggleSidebar = () => {
+  const { toggle } = useSidebar()
+
+  return (
+    <div>
+      <IconButton
+        className="hidden lg:flex"
+        variant="transparent"
+        onClick={() => toggle("desktop")}
+      >
+        <Sidebar className="text-ui-fg-muted" />
+      </IconButton>
+      <IconButton
+        className="hidden max-lg:flex"
+        variant="transparent"
+        onClick={() => toggle("mobile")}
+      >
+        <Sidebar className="text-ui-fg-muted" />
+      </IconButton>
+    </div>
+  )
+}
+
+const Topbar = () => {
+  return (
+    <div className="w-full grid-cols-3 border-b p-3 grid">
+      <div className="flex items-center gap-x-1.5">
+        <ToggleSidebar />
+        <Breadcrumbs />
+      </div>
+      <div className="flex items-center justify-center">
+        <Searchbar />
+      </div>
+      <div className="flex items-center justify-end gap-x-3">
+        <div className="text-ui-fg-muted flex items-center gap-x-1">
+          <ToggleNotifications />
+          <SettingsLink />
+        </div>
+        <LoggedInUser />
+      </div>
+    </div>
+  )
+}
+
+const DesktopSidebarContainer = ({ children }: PropsWithChildren) => {
+  const { desktop } = useSidebar()
+
+  return (
+    <div
+      className={clx("hidden h-screen w-[220px] border-r", {
+        "lg:flex": desktop,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
+  const { mobile, toggle } = useSidebar()
+
+  return (
+    <Dialog.Root open={mobile} onOpenChange={() => toggle("mobile")}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-ui-bg-overlay" />
+        <Dialog.Content className="h-screen fixed left-0 inset-y-0 w-[220px] border-r bg-ui-bg-subtle">
+          {children}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts b/packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts
new file mode 100644
index 0000000000..3b64d8f60f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/localization/localized-date-picker/index.ts
@@ -0,0 +1 @@
+export * from "./localized-date-picker"
diff --git a/packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx b/packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx
new file mode 100644
index 0000000000..8517f15817
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/localization/localized-date-picker/localized-date-picker.tsx
@@ -0,0 +1,36 @@
+import { DatePicker } from "@medusajs/ui"
+import { ComponentPropsWithoutRef } from "react"
+import { useTranslation } from "react-i18next"
+import { languages } from "../../../i18n/config"
+
+type LocalizedDatePickerProps = Omit<
+  ComponentPropsWithoutRef<typeof DatePicker>,
+  "translations" | "locale"
+>
+
+export const LocalizedDatePicker = ({
+  mode = "single",
+  ...props
+}: LocalizedDatePickerProps) => {
+  const { i18n, t } = useTranslation()
+
+  const locale = languages.find((lang) => lang.code === i18n.language)
+    ?.date_locale
+
+  const translations = {
+    cancel: t("general.cancel"),
+    apply: t("general.apply"),
+    end: t("general.end"),
+    start: t("general.start"),
+    range: t("general.range"),
+  }
+
+  return (
+    <DatePicker
+      mode={mode}
+      translations={translations}
+      locale={locale}
+      {...(props as any)}
+    />
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/localization/localized-table-pagination/index.ts b/packages/admin-next/dashboard/src/components/localization/localized-table-pagination/index.ts
new file mode 100644
index 0000000000..40d1ccdfac
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/localization/localized-table-pagination/index.ts
@@ -0,0 +1 @@
+export * from "./localized-table-pagination"
diff --git a/packages/admin-next/dashboard/src/components/localization/localized-table-pagination/localized-table-pagination.tsx b/packages/admin-next/dashboard/src/components/localization/localized-table-pagination/localized-table-pagination.tsx
new file mode 100644
index 0000000000..8ec8a46955
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/localization/localized-table-pagination/localized-table-pagination.tsx
@@ -0,0 +1,26 @@
+import { Table } from "@medusajs/ui"
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
+import { useTranslation } from "react-i18next"
+
+type LocalizedTablePaginationProps = Omit<
+  ComponentPropsWithoutRef<typeof Table.Pagination>,
+  "translations"
+>
+
+export const LocalizedTablePagination = forwardRef<
+  ElementRef<typeof Table.Pagination>,
+  LocalizedTablePaginationProps
+>((props, ref) => {
+  const { t } = useTranslation()
+
+  const translations = {
+    of: t("general.of"),
+    results: t("general.results"),
+    pages: t("general.pages"),
+    prev: t("general.prev"),
+    next: t("general.next"),
+  }
+
+  return <Table.Pagination {...props} translations={translations} ref={ref} />
+})
+LocalizedTablePagination.displayName = "LocalizedTablePagination"
diff --git a/packages/admin-next/dashboard/src/components/search/search.tsx b/packages/admin-next/dashboard/src/components/search/search.tsx
index 5bee68d10a..d7fcfad992 100644
--- a/packages/admin-next/dashboard/src/components/search/search.tsx
+++ b/packages/admin-next/dashboard/src/components/search/search.tsx
@@ -1,5 +1,5 @@
 import { MagnifyingGlass } from "@medusajs/icons"
-import { clx } from "@medusajs/ui"
+import { Kbd, Text, clx } from "@medusajs/ui"
 import * as Dialog from "@radix-ui/react-dialog"
 import { Command } from "cmdk"
 import {
@@ -10,6 +10,7 @@ import {
   useMemo,
 } from "react"
 import { useTranslation } from "react-i18next"
+
 import { useSearch } from "../../providers/search-provider"
 
 export const Search = () => {
@@ -100,6 +101,18 @@ const useLinks = (): CommandGroupProps[] => {
           {
             label: t("users.domain"),
           },
+          {
+            label: t("regions.domain"),
+          },
+          {
+            label: t("locations.domain"),
+          },
+          {
+            label: t("salesChannels.domain"),
+          },
+          {
+            label: t("apiKeyManagement.domain"),
+          },
         ],
       },
     ],
@@ -129,11 +142,30 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
     <Dialog.Root {...props}>
       <Dialog.Portal>
         <Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
-        <Dialog.Content className="bg-ui-bg-subtle shadow-elevation-modal fixed left-[50%] top-[50%] w-full max-w-2xl translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-xl p-0">
+        <Dialog.Content className="bg-ui-bg-base shadow-elevation-modal fixed left-[50%] top-[50%] w-full max-w-2xl translate-x-[-50%] translate-y-[-50%] overflow-hidden rounded-xl p-0">
           <CommandPalette className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
             {children}
           </CommandPalette>
-          <div className="border-t px-4 pb-4 pt-3"></div>
+          <div className="flex items-center justify-between border-t px-4 pb-4 pt-3">
+            <div></div>
+            <div className="flex items-center gap-x-3">
+              <div className="flex items-center gap-x-2">
+                <Text size="xsmall" leading="compact">
+                  Navigation
+                </Text>
+                <div className="flex items-center gap-x-1">
+                  <Kbd>↓</Kbd>
+                  <Kbd>↑</Kbd>
+                </div>
+              </div>
+              <div className="flex items-center gap-x-2">
+                <Text size="xsmall" leading="compact">
+                  Open Result
+                </Text>
+                <Kbd>↵</Kbd>
+              </div>
+            </div>
+          </div>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
@@ -149,7 +181,7 @@ const CommandInput = forwardRef<
     <Command.Input
       ref={ref}
       className={clx(
-        "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-ui-fg-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -166,7 +198,7 @@ const CommandList = forwardRef<
   <Command.List
     ref={ref}
     className={clx(
-      "max-h-[300px] overflow-y-auto overflow-x-hidden",
+      "max-h-[300px] overflow-y-auto overflow-x-hidden pb-4",
       className
     )}
     {...props}
@@ -219,7 +251,7 @@ const CommandItem = forwardRef<
   <Command.Item
     ref={ref}
     className={clx(
-      "aria-selected:bg-accent aria-selected:text-accent-foreground txt-compact-small relative flex cursor-default select-none items-center rounded-sm p-2 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "aria-selected:bg-ui-bg-base-hover hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover txt-compact-small relative flex cursor-default select-none items-center rounded-md p-2 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
diff --git a/packages/admin-next/dashboard/src/hooks/use-form-prompt.tsx b/packages/admin-next/dashboard/src/hooks/use-form-prompt.tsx
new file mode 100644
index 0000000000..0a7ff96102
--- /dev/null
+++ b/packages/admin-next/dashboard/src/hooks/use-form-prompt.tsx
@@ -0,0 +1,20 @@
+import { usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+export const useFormPrompt = () => {
+  const { t } = useTranslation()
+  const fn = usePrompt()
+
+  const promptValues = {
+    title: t("general.unsavedChangesTitle"),
+    description: t("general.unsavedChangesDescription"),
+    cancelText: t("general.cancel"),
+    confirmText: t("general.continue"),
+  }
+
+  const prompt = async () => {
+    return await fn(promptValues)
+  }
+
+  return prompt
+}
diff --git a/packages/admin-next/dashboard/src/hooks/use-query-params.tsx b/packages/admin-next/dashboard/src/hooks/use-query-params.tsx
new file mode 100644
index 0000000000..afb282362e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/hooks/use-query-params.tsx
@@ -0,0 +1,16 @@
+import { useSearchParams } from "react-router-dom"
+
+export function useQueryParams<T extends string>(
+  keys: T[]
+): Record<T, string | undefined> {
+  const [params] = useSearchParams()
+
+  // Use a type assertion to initialize the result
+  const result = {} as Record<T, string | undefined>
+
+  keys.forEach((key) => {
+    result[key] = params.get(key) || undefined
+  })
+
+  return result
+}
diff --git a/packages/admin-next/dashboard/src/hooks/use-route-modal-state.tsx b/packages/admin-next/dashboard/src/hooks/use-route-modal-state.tsx
new file mode 100644
index 0000000000..ce20816951
--- /dev/null
+++ b/packages/admin-next/dashboard/src/hooks/use-route-modal-state.tsx
@@ -0,0 +1,63 @@
+import { usePrompt } from "@medusajs/ui"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+
+type Prompt = {
+  title: string
+  description: string
+  cancelText: string
+  confirmText: string
+}
+
+/**
+ * Hook for managing the state of route modals.
+ */
+export const useRouteModalState = (): [
+  open: boolean,
+  onOpenChange: (open: boolean, ignore?: boolean) => void,
+  /**
+   * Subscribe to the dirty state of the form.
+   * If the form is dirty, the modal will prompt
+   * the user before closing.
+   */
+  subscribe: (value: boolean) => void,
+] => {
+  const [open, setOpen] = useState(false)
+  const [shouldPrompt, subscribe] = useState(false)
+
+  const navigate = useNavigate()
+  const prompt = usePrompt()
+  const { t } = useTranslation()
+
+  let promptValues: Prompt = {
+    title: t("general.unsavedChangesTitle"),
+    description: t("general.unsavedChangesDescription"),
+    cancelText: t("general.cancel"),
+    confirmText: t("general.continue"),
+  }
+
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  const onOpenChange = async (open: boolean, ignore = false) => {
+    if (!open) {
+      if (shouldPrompt && !ignore) {
+        const confirmed = await prompt(promptValues)
+
+        if (!confirmed) {
+          return
+        }
+      }
+
+      setTimeout(() => {
+        navigate("..", { replace: true })
+      }, 200)
+    }
+
+    setOpen(open)
+  }
+
+  return [open, onOpenChange, subscribe]
+}
diff --git a/packages/admin-next/dashboard/src/i18n/config.ts b/packages/admin-next/dashboard/src/i18n/config.ts
index c346a4b8ac..ff128d9e5e 100644
--- a/packages/admin-next/dashboard/src/i18n/config.ts
+++ b/packages/admin-next/dashboard/src/i18n/config.ts
@@ -1,3 +1,4 @@
+import { enUS } from "date-fns/locale"
 import i18n from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
 import Backend, { type HttpBackendOptions } from "i18next-http-backend"
@@ -22,6 +23,7 @@ export const languages: Language[] = [
     code: "en",
     display_name: "English",
     ltr: true,
+    date_locale: enUS,
   },
 ]
 
diff --git a/packages/admin-next/dashboard/src/i18n/types.ts b/packages/admin-next/dashboard/src/i18n/types.ts
index 6dd753ee66..14e59028fd 100644
--- a/packages/admin-next/dashboard/src/i18n/types.ts
+++ b/packages/admin-next/dashboard/src/i18n/types.ts
@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import en from "../../public/locales/en/translation.json"
 
 const resources = {
@@ -10,4 +11,5 @@ export type Language = {
   code: string
   display_name: string
   ltr: boolean
+  date_locale: Locale
 }
diff --git a/packages/admin-next/dashboard/src/lib/countries.ts b/packages/admin-next/dashboard/src/lib/countries.ts
new file mode 100644
index 0000000000..8e4efca026
--- /dev/null
+++ b/packages/admin-next/dashboard/src/lib/countries.ts
@@ -0,0 +1,1755 @@
+/** This file is auto-generated. Do not modify it manually. */
+import type { Country } from "@medusajs/medusa"
+
+export const countries: Omit<Country, "region" | "region_id" | "id">[] = [
+  {
+    iso_2: "af",
+    iso_3: "afg",
+    num_code: 4,
+    name: "AFGHANISTAN",
+    display_name: "Afghanistan",
+  },
+  {
+    iso_2: "al",
+    iso_3: "alb",
+    num_code: 8,
+    name: "ALBANIA",
+    display_name: "Albania",
+  },
+  {
+    iso_2: "dz",
+    iso_3: "dza",
+    num_code: 12,
+    name: "ALGERIA",
+    display_name: "Algeria",
+  },
+  {
+    iso_2: "as",
+    iso_3: "asm",
+    num_code: 16,
+    name: "AMERICAN SAMOA",
+    display_name: "American Samoa",
+  },
+  {
+    iso_2: "ad",
+    iso_3: "and",
+    num_code: 20,
+    name: "ANDORRA",
+    display_name: "Andorra",
+  },
+  {
+    iso_2: "ao",
+    iso_3: "ago",
+    num_code: 24,
+    name: "ANGOLA",
+    display_name: "Angola",
+  },
+  {
+    iso_2: "ai",
+    iso_3: "aia",
+    num_code: 660,
+    name: "ANGUILLA",
+    display_name: "Anguilla",
+  },
+  {
+    iso_2: "aq",
+    iso_3: "ata",
+    num_code: 10,
+    name: "ANTARCTICA",
+    display_name: "Antarctica",
+  },
+  {
+    iso_2: "ag",
+    iso_3: "atg",
+    num_code: 28,
+    name: "ANTIGUA AND BARBUDA",
+    display_name: "Antigua and Barbuda",
+  },
+  {
+    iso_2: "ar",
+    iso_3: "arg",
+    num_code: 32,
+    name: "ARGENTINA",
+    display_name: "Argentina",
+  },
+  {
+    iso_2: "am",
+    iso_3: "arm",
+    num_code: 51,
+    name: "ARMENIA",
+    display_name: "Armenia",
+  },
+  {
+    iso_2: "aw",
+    iso_3: "abw",
+    num_code: 533,
+    name: "ARUBA",
+    display_name: "Aruba",
+  },
+  {
+    iso_2: "au",
+    iso_3: "aus",
+    num_code: 36,
+    name: "AUSTRALIA",
+    display_name: "Australia",
+  },
+  {
+    iso_2: "at",
+    iso_3: "aut",
+    num_code: 40,
+    name: "AUSTRIA",
+    display_name: "Austria",
+  },
+  {
+    iso_2: "az",
+    iso_3: "aze",
+    num_code: 31,
+    name: "AZERBAIJAN",
+    display_name: "Azerbaijan",
+  },
+  {
+    iso_2: "bs",
+    iso_3: "bhs",
+    num_code: 44,
+    name: "BAHAMAS",
+    display_name: "Bahamas",
+  },
+  {
+    iso_2: "bh",
+    iso_3: "bhr",
+    num_code: 48,
+    name: "BAHRAIN",
+    display_name: "Bahrain",
+  },
+  {
+    iso_2: "bd",
+    iso_3: "bgd",
+    num_code: 50,
+    name: "BANGLADESH",
+    display_name: "Bangladesh",
+  },
+  {
+    iso_2: "bb",
+    iso_3: "brb",
+    num_code: 52,
+    name: "BARBADOS",
+    display_name: "Barbados",
+  },
+  {
+    iso_2: "by",
+    iso_3: "blr",
+    num_code: 112,
+    name: "BELARUS",
+    display_name: "Belarus",
+  },
+  {
+    iso_2: "be",
+    iso_3: "bel",
+    num_code: 56,
+    name: "BELGIUM",
+    display_name: "Belgium",
+  },
+  {
+    iso_2: "bz",
+    iso_3: "blz",
+    num_code: 84,
+    name: "BELIZE",
+    display_name: "Belize",
+  },
+  {
+    iso_2: "bj",
+    iso_3: "ben",
+    num_code: 204,
+    name: "BENIN",
+    display_name: "Benin",
+  },
+  {
+    iso_2: "bm",
+    iso_3: "bmu",
+    num_code: 60,
+    name: "BERMUDA",
+    display_name: "Bermuda",
+  },
+  {
+    iso_2: "bt",
+    iso_3: "btn",
+    num_code: 64,
+    name: "BHUTAN",
+    display_name: "Bhutan",
+  },
+  {
+    iso_2: "bo",
+    iso_3: "bol",
+    num_code: 68,
+    name: "BOLIVIA",
+    display_name: "Bolivia",
+  },
+  {
+    iso_2: "bq",
+    iso_3: "bes",
+    num_code: 535,
+    name: "BONAIRE, SINT EUSTATIUS AND SABA",
+    display_name: "Bonaire, Sint Eustatius and Saba",
+  },
+  {
+    iso_2: "ba",
+    iso_3: "bih",
+    num_code: 70,
+    name: "BOSNIA AND HERZEGOVINA",
+    display_name: "Bosnia and Herzegovina",
+  },
+  {
+    iso_2: "bw",
+    iso_3: "bwa",
+    num_code: 72,
+    name: "BOTSWANA",
+    display_name: "Botswana",
+  },
+  {
+    iso_2: "bv",
+    iso_3: "bvd",
+    num_code: 74,
+    name: "BOUVET ISLAND",
+    display_name: "Bouvet Island",
+  },
+  {
+    iso_2: "br",
+    iso_3: "bra",
+    num_code: 76,
+    name: "BRAZIL",
+    display_name: "Brazil",
+  },
+  {
+    iso_2: "io",
+    iso_3: "iot",
+    num_code: 86,
+    name: "BRITISH INDIAN OCEAN TERRITORY",
+    display_name: "British Indian Ocean Territory",
+  },
+  {
+    iso_2: "bn",
+    iso_3: "brn",
+    num_code: 96,
+    name: "BRUNEI DARUSSALAM",
+    display_name: "Brunei Darussalam",
+  },
+  {
+    iso_2: "bg",
+    iso_3: "bgr",
+    num_code: 100,
+    name: "BULGARIA",
+    display_name: "Bulgaria",
+  },
+  {
+    iso_2: "bf",
+    iso_3: "bfa",
+    num_code: 854,
+    name: "BURKINA FASO",
+    display_name: "Burkina Faso",
+  },
+  {
+    iso_2: "bi",
+    iso_3: "bdi",
+    num_code: 108,
+    name: "BURUNDI",
+    display_name: "Burundi",
+  },
+  {
+    iso_2: "kh",
+    iso_3: "khm",
+    num_code: 116,
+    name: "CAMBODIA",
+    display_name: "Cambodia",
+  },
+  {
+    iso_2: "cm",
+    iso_3: "cmr",
+    num_code: 120,
+    name: "CAMEROON",
+    display_name: "Cameroon",
+  },
+  {
+    iso_2: "ca",
+    iso_3: "can",
+    num_code: 124,
+    name: "CANADA",
+    display_name: "Canada",
+  },
+  {
+    iso_2: "cv",
+    iso_3: "cpv",
+    num_code: 132,
+    name: "CAPE VERDE",
+    display_name: "Cape Verde",
+  },
+  {
+    iso_2: "ky",
+    iso_3: "cym",
+    num_code: 136,
+    name: "CAYMAN ISLANDS",
+    display_name: "Cayman Islands",
+  },
+  {
+    iso_2: "cf",
+    iso_3: "caf",
+    num_code: 140,
+    name: "CENTRAL AFRICAN REPUBLIC",
+    display_name: "Central African Republic",
+  },
+  {
+    iso_2: "td",
+    iso_3: "tcd",
+    num_code: 148,
+    name: "CHAD",
+    display_name: "Chad",
+  },
+  {
+    iso_2: "cl",
+    iso_3: "chl",
+    num_code: 152,
+    name: "CHILE",
+    display_name: "Chile",
+  },
+  {
+    iso_2: "cn",
+    iso_3: "chn",
+    num_code: 156,
+    name: "CHINA",
+    display_name: "China",
+  },
+  {
+    iso_2: "cx",
+    iso_3: "cxr",
+    num_code: 162,
+    name: "CHRISTMAS ISLAND",
+    display_name: "Christmas Island",
+  },
+  {
+    iso_2: "cc",
+    iso_3: "cck",
+    num_code: 166,
+    name: "COCOS (KEELING) ISLANDS",
+    display_name: "Cocos (Keeling) Islands",
+  },
+  {
+    iso_2: "co",
+    iso_3: "col",
+    num_code: 170,
+    name: "COLOMBIA",
+    display_name: "Colombia",
+  },
+  {
+    iso_2: "km",
+    iso_3: "com",
+    num_code: 174,
+    name: "COMOROS",
+    display_name: "Comoros",
+  },
+  {
+    iso_2: "cg",
+    iso_3: "cog",
+    num_code: 178,
+    name: "CONGO",
+    display_name: "Congo",
+  },
+  {
+    iso_2: "cd",
+    iso_3: "cod",
+    num_code: 180,
+    name: "CONGO, THE DEMOCRATIC REPUBLIC OF THE",
+    display_name: "Congo, the Democratic Republic of the",
+  },
+  {
+    iso_2: "ck",
+    iso_3: "cok",
+    num_code: 184,
+    name: "COOK ISLANDS",
+    display_name: "Cook Islands",
+  },
+  {
+    iso_2: "cr",
+    iso_3: "cri",
+    num_code: 188,
+    name: "COSTA RICA",
+    display_name: "Costa Rica",
+  },
+  {
+    iso_2: "ci",
+    iso_3: "civ",
+    num_code: 384,
+    name: "COTE D'IVOIRE",
+    display_name: "Cote D'Ivoire",
+  },
+  {
+    iso_2: "hr",
+    iso_3: "hrv",
+    num_code: 191,
+    name: "CROATIA",
+    display_name: "Croatia",
+  },
+  {
+    iso_2: "cu",
+    iso_3: "cub",
+    num_code: 192,
+    name: "CUBA",
+    display_name: "Cuba",
+  },
+  {
+    iso_2: "cw",
+    iso_3: "cuw",
+    num_code: 531,
+    name: "CURAÇAO",
+    display_name: "Curaçao",
+  },
+  {
+    iso_2: "cy",
+    iso_3: "cyp",
+    num_code: 196,
+    name: "CYPRUS",
+    display_name: "Cyprus",
+  },
+  {
+    iso_2: "cz",
+    iso_3: "cze",
+    num_code: 203,
+    name: "CZECH REPUBLIC",
+    display_name: "Czech Republic",
+  },
+  {
+    iso_2: "dk",
+    iso_3: "dnk",
+    num_code: 208,
+    name: "DENMARK",
+    display_name: "Denmark",
+  },
+  {
+    iso_2: "dj",
+    iso_3: "dji",
+    num_code: 262,
+    name: "DJIBOUTI",
+    display_name: "Djibouti",
+  },
+  {
+    iso_2: "dm",
+    iso_3: "dma",
+    num_code: 212,
+    name: "DOMINICA",
+    display_name: "Dominica",
+  },
+  {
+    iso_2: "do",
+    iso_3: "dom",
+    num_code: 214,
+    name: "DOMINICAN REPUBLIC",
+    display_name: "Dominican Republic",
+  },
+  {
+    iso_2: "ec",
+    iso_3: "ecu",
+    num_code: 218,
+    name: "ECUADOR",
+    display_name: "Ecuador",
+  },
+  {
+    iso_2: "eg",
+    iso_3: "egy",
+    num_code: 818,
+    name: "EGYPT",
+    display_name: "Egypt",
+  },
+  {
+    iso_2: "sv",
+    iso_3: "slv",
+    num_code: 222,
+    name: "EL SALVADOR",
+    display_name: "El Salvador",
+  },
+  {
+    iso_2: "gq",
+    iso_3: "gnq",
+    num_code: 226,
+    name: "EQUATORIAL GUINEA",
+    display_name: "Equatorial Guinea",
+  },
+  {
+    iso_2: "er",
+    iso_3: "eri",
+    num_code: 232,
+    name: "ERITREA",
+    display_name: "Eritrea",
+  },
+  {
+    iso_2: "ee",
+    iso_3: "est",
+    num_code: 233,
+    name: "ESTONIA",
+    display_name: "Estonia",
+  },
+  {
+    iso_2: "et",
+    iso_3: "eth",
+    num_code: 231,
+    name: "ETHIOPIA",
+    display_name: "Ethiopia",
+  },
+  {
+    iso_2: "fk",
+    iso_3: "flk",
+    num_code: 238,
+    name: "FALKLAND ISLANDS (MALVINAS)",
+    display_name: "Falkland Islands (Malvinas)",
+  },
+  {
+    iso_2: "fo",
+    iso_3: "fro",
+    num_code: 234,
+    name: "FAROE ISLANDS",
+    display_name: "Faroe Islands",
+  },
+  {
+    iso_2: "fj",
+    iso_3: "fji",
+    num_code: 242,
+    name: "FIJI",
+    display_name: "Fiji",
+  },
+  {
+    iso_2: "fi",
+    iso_3: "fin",
+    num_code: 246,
+    name: "FINLAND",
+    display_name: "Finland",
+  },
+  {
+    iso_2: "fr",
+    iso_3: "fra",
+    num_code: 250,
+    name: "FRANCE",
+    display_name: "France",
+  },
+  {
+    iso_2: "gf",
+    iso_3: "guf",
+    num_code: 254,
+    name: "FRENCH GUIANA",
+    display_name: "French Guiana",
+  },
+  {
+    iso_2: "pf",
+    iso_3: "pyf",
+    num_code: 258,
+    name: "FRENCH POLYNESIA",
+    display_name: "French Polynesia",
+  },
+  {
+    iso_2: "tf",
+    iso_3: "atf",
+    num_code: 260,
+    name: "FRENCH SOUTHERN TERRITORIES",
+    display_name: "French Southern Territories",
+  },
+  {
+    iso_2: "ga",
+    iso_3: "gab",
+    num_code: 266,
+    name: "GABON",
+    display_name: "Gabon",
+  },
+  {
+    iso_2: "gm",
+    iso_3: "gmb",
+    num_code: 270,
+    name: "GAMBIA",
+    display_name: "Gambia",
+  },
+  {
+    iso_2: "ge",
+    iso_3: "geo",
+    num_code: 268,
+    name: "GEORGIA",
+    display_name: "Georgia",
+  },
+  {
+    iso_2: "de",
+    iso_3: "deu",
+    num_code: 276,
+    name: "GERMANY",
+    display_name: "Germany",
+  },
+  {
+    iso_2: "gh",
+    iso_3: "gha",
+    num_code: 288,
+    name: "GHANA",
+    display_name: "Ghana",
+  },
+  {
+    iso_2: "gi",
+    iso_3: "gib",
+    num_code: 292,
+    name: "GIBRALTAR",
+    display_name: "Gibraltar",
+  },
+  {
+    iso_2: "gr",
+    iso_3: "grc",
+    num_code: 300,
+    name: "GREECE",
+    display_name: "Greece",
+  },
+  {
+    iso_2: "gl",
+    iso_3: "grl",
+    num_code: 304,
+    name: "GREENLAND",
+    display_name: "Greenland",
+  },
+  {
+    iso_2: "gd",
+    iso_3: "grd",
+    num_code: 308,
+    name: "GRENADA",
+    display_name: "Grenada",
+  },
+  {
+    iso_2: "gp",
+    iso_3: "glp",
+    num_code: 312,
+    name: "GUADELOUPE",
+    display_name: "Guadeloupe",
+  },
+  {
+    iso_2: "gu",
+    iso_3: "gum",
+    num_code: 316,
+    name: "GUAM",
+    display_name: "Guam",
+  },
+  {
+    iso_2: "gt",
+    iso_3: "gtm",
+    num_code: 320,
+    name: "GUATEMALA",
+    display_name: "Guatemala",
+  },
+  {
+    iso_2: "gg",
+    iso_3: "ggy",
+    num_code: 831,
+    name: "GUERNSEY",
+    display_name: "Guernsey",
+  },
+  {
+    iso_2: "gn",
+    iso_3: "gin",
+    num_code: 324,
+    name: "GUINEA",
+    display_name: "Guinea",
+  },
+  {
+    iso_2: "gw",
+    iso_3: "gnb",
+    num_code: 624,
+    name: "GUINEA-BISSAU",
+    display_name: "Guinea-Bissau",
+  },
+  {
+    iso_2: "gy",
+    iso_3: "guy",
+    num_code: 328,
+    name: "GUYANA",
+    display_name: "Guyana",
+  },
+  {
+    iso_2: "ht",
+    iso_3: "hti",
+    num_code: 332,
+    name: "HAITI",
+    display_name: "Haiti",
+  },
+  {
+    iso_2: "hm",
+    iso_3: "hmd",
+    num_code: 334,
+    name: "HEARD ISLAND AND MCDONALD ISLANDS",
+    display_name: "Heard Island And Mcdonald Islands",
+  },
+  {
+    iso_2: "va",
+    iso_3: "vat",
+    num_code: 336,
+    name: "HOLY SEE (VATICAN CITY STATE)",
+    display_name: "Holy See (Vatican City State)",
+  },
+  {
+    iso_2: "hn",
+    iso_3: "hnd",
+    num_code: 340,
+    name: "HONDURAS",
+    display_name: "Honduras",
+  },
+  {
+    iso_2: "hk",
+    iso_3: "hkg",
+    num_code: 344,
+    name: "HONG KONG",
+    display_name: "Hong Kong",
+  },
+  {
+    iso_2: "hu",
+    iso_3: "hun",
+    num_code: 348,
+    name: "HUNGARY",
+    display_name: "Hungary",
+  },
+  {
+    iso_2: "is",
+    iso_3: "isl",
+    num_code: 352,
+    name: "ICELAND",
+    display_name: "Iceland",
+  },
+  {
+    iso_2: "in",
+    iso_3: "ind",
+    num_code: 356,
+    name: "INDIA",
+    display_name: "India",
+  },
+  {
+    iso_2: "id",
+    iso_3: "idn",
+    num_code: 360,
+    name: "INDONESIA",
+    display_name: "Indonesia",
+  },
+  {
+    iso_2: "ir",
+    iso_3: "irn",
+    num_code: 364,
+    name: "IRAN, ISLAMIC REPUBLIC OF",
+    display_name: "Iran, Islamic Republic of",
+  },
+  {
+    iso_2: "iq",
+    iso_3: "irq",
+    num_code: 368,
+    name: "IRAQ",
+    display_name: "Iraq",
+  },
+  {
+    iso_2: "ie",
+    iso_3: "irl",
+    num_code: 372,
+    name: "IRELAND",
+    display_name: "Ireland",
+  },
+  {
+    iso_2: "im",
+    iso_3: "imn",
+    num_code: 833,
+    name: "ISLE OF MAN",
+    display_name: "Isle Of Man",
+  },
+  {
+    iso_2: "il",
+    iso_3: "isr",
+    num_code: 376,
+    name: "ISRAEL",
+    display_name: "Israel",
+  },
+  {
+    iso_2: "it",
+    iso_3: "ita",
+    num_code: 380,
+    name: "ITALY",
+    display_name: "Italy",
+  },
+  {
+    iso_2: "jm",
+    iso_3: "jam",
+    num_code: 388,
+    name: "JAMAICA",
+    display_name: "Jamaica",
+  },
+  {
+    iso_2: "jp",
+    iso_3: "jpn",
+    num_code: 392,
+    name: "JAPAN",
+    display_name: "Japan",
+  },
+  {
+    iso_2: "je",
+    iso_3: "jey",
+    num_code: 832,
+    name: "JERSEY",
+    display_name: "Jersey",
+  },
+  {
+    iso_2: "jo",
+    iso_3: "jor",
+    num_code: 400,
+    name: "JORDAN",
+    display_name: "Jordan",
+  },
+  {
+    iso_2: "kz",
+    iso_3: "kaz",
+    num_code: 398,
+    name: "KAZAKHSTAN",
+    display_name: "Kazakhstan",
+  },
+  {
+    iso_2: "ke",
+    iso_3: "ken",
+    num_code: 404,
+    name: "KENYA",
+    display_name: "Kenya",
+  },
+  {
+    iso_2: "ki",
+    iso_3: "kir",
+    num_code: 296,
+    name: "KIRIBATI",
+    display_name: "Kiribati",
+  },
+  {
+    iso_2: "kp",
+    iso_3: "prk",
+    num_code: 408,
+    name: "KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF",
+    display_name: "Korea, Democratic People's Republic of",
+  },
+  {
+    iso_2: "kr",
+    iso_3: "kor",
+    num_code: 410,
+    name: "KOREA, REPUBLIC OF",
+    display_name: "Korea, Republic of",
+  },
+  {
+    iso_2: "xk",
+    iso_3: "xkx",
+    num_code: 900,
+    name: "KOSOVO",
+    display_name: "Kosovo",
+  },
+  {
+    iso_2: "kw",
+    iso_3: "kwt",
+    num_code: 414,
+    name: "KUWAIT",
+    display_name: "Kuwait",
+  },
+  {
+    iso_2: "kg",
+    iso_3: "kgz",
+    num_code: 417,
+    name: "KYRGYZSTAN",
+    display_name: "Kyrgyzstan",
+  },
+  {
+    iso_2: "la",
+    iso_3: "lao",
+    num_code: 418,
+    name: "LAO PEOPLE'S DEMOCRATIC REPUBLIC",
+    display_name: "Lao People's Democratic Republic",
+  },
+  {
+    iso_2: "lv",
+    iso_3: "lva",
+    num_code: 428,
+    name: "LATVIA",
+    display_name: "Latvia",
+  },
+  {
+    iso_2: "lb",
+    iso_3: "lbn",
+    num_code: 422,
+    name: "LEBANON",
+    display_name: "Lebanon",
+  },
+  {
+    iso_2: "ls",
+    iso_3: "lso",
+    num_code: 426,
+    name: "LESOTHO",
+    display_name: "Lesotho",
+  },
+  {
+    iso_2: "lr",
+    iso_3: "lbr",
+    num_code: 430,
+    name: "LIBERIA",
+    display_name: "Liberia",
+  },
+  {
+    iso_2: "ly",
+    iso_3: "lby",
+    num_code: 434,
+    name: "LIBYAN ARAB JAMAHIRIYA",
+    display_name: "Libyan Arab Jamahiriya",
+  },
+  {
+    iso_2: "li",
+    iso_3: "lie",
+    num_code: 438,
+    name: "LIECHTENSTEIN",
+    display_name: "Liechtenstein",
+  },
+  {
+    iso_2: "lt",
+    iso_3: "ltu",
+    num_code: 440,
+    name: "LITHUANIA",
+    display_name: "Lithuania",
+  },
+  {
+    iso_2: "lu",
+    iso_3: "lux",
+    num_code: 442,
+    name: "LUXEMBOURG",
+    display_name: "Luxembourg",
+  },
+  {
+    iso_2: "mo",
+    iso_3: "mac",
+    num_code: 446,
+    name: "MACAO",
+    display_name: "Macao",
+  },
+  {
+    iso_2: "mk",
+    iso_3: "mkd",
+    num_code: 807,
+    name: "MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF",
+    display_name: "Macedonia, the Former Yugoslav Republic of",
+  },
+  {
+    iso_2: "mg",
+    iso_3: "mdg",
+    num_code: 450,
+    name: "MADAGASCAR",
+    display_name: "Madagascar",
+  },
+  {
+    iso_2: "mw",
+    iso_3: "mwi",
+    num_code: 454,
+    name: "MALAWI",
+    display_name: "Malawi",
+  },
+  {
+    iso_2: "my",
+    iso_3: "mys",
+    num_code: 458,
+    name: "MALAYSIA",
+    display_name: "Malaysia",
+  },
+  {
+    iso_2: "mv",
+    iso_3: "mdv",
+    num_code: 462,
+    name: "MALDIVES",
+    display_name: "Maldives",
+  },
+  {
+    iso_2: "ml",
+    iso_3: "mli",
+    num_code: 466,
+    name: "MALI",
+    display_name: "Mali",
+  },
+  {
+    iso_2: "mt",
+    iso_3: "mlt",
+    num_code: 470,
+    name: "MALTA",
+    display_name: "Malta",
+  },
+  {
+    iso_2: "mh",
+    iso_3: "mhl",
+    num_code: 584,
+    name: "MARSHALL ISLANDS",
+    display_name: "Marshall Islands",
+  },
+  {
+    iso_2: "mq",
+    iso_3: "mtq",
+    num_code: 474,
+    name: "MARTINIQUE",
+    display_name: "Martinique",
+  },
+  {
+    iso_2: "mr",
+    iso_3: "mrt",
+    num_code: 478,
+    name: "MAURITANIA",
+    display_name: "Mauritania",
+  },
+  {
+    iso_2: "mu",
+    iso_3: "mus",
+    num_code: 480,
+    name: "MAURITIUS",
+    display_name: "Mauritius",
+  },
+  {
+    iso_2: "yt",
+    iso_3: "myt",
+    num_code: 175,
+    name: "MAYOTTE",
+    display_name: "Mayotte",
+  },
+  {
+    iso_2: "mx",
+    iso_3: "mex",
+    num_code: 484,
+    name: "MEXICO",
+    display_name: "Mexico",
+  },
+  {
+    iso_2: "fm",
+    iso_3: "fsm",
+    num_code: 583,
+    name: "MICRONESIA, FEDERATED STATES OF",
+    display_name: "Micronesia, Federated States of",
+  },
+  {
+    iso_2: "md",
+    iso_3: "mda",
+    num_code: 498,
+    name: "MOLDOVA, REPUBLIC OF",
+    display_name: "Moldova, Republic of",
+  },
+  {
+    iso_2: "mc",
+    iso_3: "mco",
+    num_code: 492,
+    name: "MONACO",
+    display_name: "Monaco",
+  },
+  {
+    iso_2: "mn",
+    iso_3: "mng",
+    num_code: 496,
+    name: "MONGOLIA",
+    display_name: "Mongolia",
+  },
+  {
+    iso_2: "me",
+    iso_3: "mne",
+    num_code: 499,
+    name: "MONTENEGRO",
+    display_name: "Montenegro",
+  },
+  {
+    iso_2: "ms",
+    iso_3: "msr",
+    num_code: 500,
+    name: "MONTSERRAT",
+    display_name: "Montserrat",
+  },
+  {
+    iso_2: "ma",
+    iso_3: "mar",
+    num_code: 504,
+    name: "MOROCCO",
+    display_name: "Morocco",
+  },
+  {
+    iso_2: "mz",
+    iso_3: "moz",
+    num_code: 508,
+    name: "MOZAMBIQUE",
+    display_name: "Mozambique",
+  },
+  {
+    iso_2: "mm",
+    iso_3: "mmr",
+    num_code: 104,
+    name: "MYANMAR",
+    display_name: "Myanmar",
+  },
+  {
+    iso_2: "na",
+    iso_3: "nam",
+    num_code: 516,
+    name: "NAMIBIA",
+    display_name: "Namibia",
+  },
+  {
+    iso_2: "nr",
+    iso_3: "nru",
+    num_code: 520,
+    name: "NAURU",
+    display_name: "Nauru",
+  },
+  {
+    iso_2: "np",
+    iso_3: "npl",
+    num_code: 524,
+    name: "NEPAL",
+    display_name: "Nepal",
+  },
+  {
+    iso_2: "nl",
+    iso_3: "nld",
+    num_code: 528,
+    name: "NETHERLANDS",
+    display_name: "Netherlands",
+  },
+  {
+    iso_2: "nc",
+    iso_3: "ncl",
+    num_code: 540,
+    name: "NEW CALEDONIA",
+    display_name: "New Caledonia",
+  },
+  {
+    iso_2: "nz",
+    iso_3: "nzl",
+    num_code: 554,
+    name: "NEW ZEALAND",
+    display_name: "New Zealand",
+  },
+  {
+    iso_2: "ni",
+    iso_3: "nic",
+    num_code: 558,
+    name: "NICARAGUA",
+    display_name: "Nicaragua",
+  },
+  {
+    iso_2: "ne",
+    iso_3: "ner",
+    num_code: 562,
+    name: "NIGER",
+    display_name: "Niger",
+  },
+  {
+    iso_2: "ng",
+    iso_3: "nga",
+    num_code: 566,
+    name: "NIGERIA",
+    display_name: "Nigeria",
+  },
+  {
+    iso_2: "nu",
+    iso_3: "niu",
+    num_code: 570,
+    name: "NIUE",
+    display_name: "Niue",
+  },
+  {
+    iso_2: "nf",
+    iso_3: "nfk",
+    num_code: 574,
+    name: "NORFOLK ISLAND",
+    display_name: "Norfolk Island",
+  },
+  {
+    iso_2: "mp",
+    iso_3: "mnp",
+    num_code: 580,
+    name: "NORTHERN MARIANA ISLANDS",
+    display_name: "Northern Mariana Islands",
+  },
+  {
+    iso_2: "no",
+    iso_3: "nor",
+    num_code: 578,
+    name: "NORWAY",
+    display_name: "Norway",
+  },
+  {
+    iso_2: "om",
+    iso_3: "omn",
+    num_code: 512,
+    name: "OMAN",
+    display_name: "Oman",
+  },
+  {
+    iso_2: "pk",
+    iso_3: "pak",
+    num_code: 586,
+    name: "PAKISTAN",
+    display_name: "Pakistan",
+  },
+  {
+    iso_2: "pw",
+    iso_3: "plw",
+    num_code: 585,
+    name: "PALAU",
+    display_name: "Palau",
+  },
+  {
+    iso_2: "ps",
+    iso_3: "pse",
+    num_code: 275,
+    name: "PALESTINIAN TERRITORY, OCCUPIED",
+    display_name: "Palestinian Territory, Occupied",
+  },
+  {
+    iso_2: "pa",
+    iso_3: "pan",
+    num_code: 591,
+    name: "PANAMA",
+    display_name: "Panama",
+  },
+  {
+    iso_2: "pg",
+    iso_3: "png",
+    num_code: 598,
+    name: "PAPUA NEW GUINEA",
+    display_name: "Papua New Guinea",
+  },
+  {
+    iso_2: "py",
+    iso_3: "pry",
+    num_code: 600,
+    name: "PARAGUAY",
+    display_name: "Paraguay",
+  },
+  {
+    iso_2: "pe",
+    iso_3: "per",
+    num_code: 604,
+    name: "PERU",
+    display_name: "Peru",
+  },
+  {
+    iso_2: "ph",
+    iso_3: "phl",
+    num_code: 608,
+    name: "PHILIPPINES",
+    display_name: "Philippines",
+  },
+  {
+    iso_2: "pn",
+    iso_3: "pcn",
+    num_code: 612,
+    name: "PITCAIRN",
+    display_name: "Pitcairn",
+  },
+  {
+    iso_2: "pl",
+    iso_3: "pol",
+    num_code: 616,
+    name: "POLAND",
+    display_name: "Poland",
+  },
+  {
+    iso_2: "pt",
+    iso_3: "prt",
+    num_code: 620,
+    name: "PORTUGAL",
+    display_name: "Portugal",
+  },
+  {
+    iso_2: "pr",
+    iso_3: "pri",
+    num_code: 630,
+    name: "PUERTO RICO",
+    display_name: "Puerto Rico",
+  },
+  {
+    iso_2: "qa",
+    iso_3: "qat",
+    num_code: 634,
+    name: "QATAR",
+    display_name: "Qatar",
+  },
+  {
+    iso_2: "re",
+    iso_3: "reu",
+    num_code: 638,
+    name: "REUNION",
+    display_name: "Reunion",
+  },
+  {
+    iso_2: "ro",
+    iso_3: "rom",
+    num_code: 642,
+    name: "ROMANIA",
+    display_name: "Romania",
+  },
+  {
+    iso_2: "ru",
+    iso_3: "rus",
+    num_code: 643,
+    name: "RUSSIAN FEDERATION",
+    display_name: "Russian Federation",
+  },
+  {
+    iso_2: "rw",
+    iso_3: "rwa",
+    num_code: 646,
+    name: "RWANDA",
+    display_name: "Rwanda",
+  },
+  {
+    iso_2: "bl",
+    iso_3: "blm",
+    num_code: 652,
+    name: "SAINT BARTHÉLEMY",
+    display_name: "Saint Barthélemy",
+  },
+  {
+    iso_2: "sh",
+    iso_3: "shn",
+    num_code: 654,
+    name: "SAINT HELENA",
+    display_name: "Saint Helena",
+  },
+  {
+    iso_2: "kn",
+    iso_3: "kna",
+    num_code: 659,
+    name: "SAINT KITTS AND NEVIS",
+    display_name: "Saint Kitts and Nevis",
+  },
+  {
+    iso_2: "lc",
+    iso_3: "lca",
+    num_code: 662,
+    name: "SAINT LUCIA",
+    display_name: "Saint Lucia",
+  },
+  {
+    iso_2: "mf",
+    iso_3: "maf",
+    num_code: 663,
+    name: "SAINT MARTIN (FRENCH PART)",
+    display_name: "Saint Martin (French part)",
+  },
+  {
+    iso_2: "pm",
+    iso_3: "spm",
+    num_code: 666,
+    name: "SAINT PIERRE AND MIQUELON",
+    display_name: "Saint Pierre and Miquelon",
+  },
+  {
+    iso_2: "vc",
+    iso_3: "vct",
+    num_code: 670,
+    name: "SAINT VINCENT AND THE GRENADINES",
+    display_name: "Saint Vincent and the Grenadines",
+  },
+  {
+    iso_2: "ws",
+    iso_3: "wsm",
+    num_code: 882,
+    name: "SAMOA",
+    display_name: "Samoa",
+  },
+  {
+    iso_2: "sm",
+    iso_3: "smr",
+    num_code: 674,
+    name: "SAN MARINO",
+    display_name: "San Marino",
+  },
+  {
+    iso_2: "st",
+    iso_3: "stp",
+    num_code: 678,
+    name: "SAO TOME AND PRINCIPE",
+    display_name: "Sao Tome and Principe",
+  },
+  {
+    iso_2: "sa",
+    iso_3: "sau",
+    num_code: 682,
+    name: "SAUDI ARABIA",
+    display_name: "Saudi Arabia",
+  },
+  {
+    iso_2: "sn",
+    iso_3: "sen",
+    num_code: 686,
+    name: "SENEGAL",
+    display_name: "Senegal",
+  },
+  {
+    iso_2: "rs",
+    iso_3: "srb",
+    num_code: 688,
+    name: "SERBIA",
+    display_name: "Serbia",
+  },
+  {
+    iso_2: "sc",
+    iso_3: "syc",
+    num_code: 690,
+    name: "SEYCHELLES",
+    display_name: "Seychelles",
+  },
+  {
+    iso_2: "sl",
+    iso_3: "sle",
+    num_code: 694,
+    name: "SIERRA LEONE",
+    display_name: "Sierra Leone",
+  },
+  {
+    iso_2: "sg",
+    iso_3: "sgp",
+    num_code: 702,
+    name: "SINGAPORE",
+    display_name: "Singapore",
+  },
+  {
+    iso_2: "sx",
+    iso_3: "sxm",
+    num_code: 534,
+    name: "SINT MAARTEN",
+    display_name: "Sint Maarten",
+  },
+  {
+    iso_2: "sk",
+    iso_3: "svk",
+    num_code: 703,
+    name: "SLOVAKIA",
+    display_name: "Slovakia",
+  },
+  {
+    iso_2: "si",
+    iso_3: "svn",
+    num_code: 705,
+    name: "SLOVENIA",
+    display_name: "Slovenia",
+  },
+  {
+    iso_2: "sb",
+    iso_3: "slb",
+    num_code: 90,
+    name: "SOLOMON ISLANDS",
+    display_name: "Solomon Islands",
+  },
+  {
+    iso_2: "so",
+    iso_3: "som",
+    num_code: 706,
+    name: "SOMALIA",
+    display_name: "Somalia",
+  },
+  {
+    iso_2: "za",
+    iso_3: "zaf",
+    num_code: 710,
+    name: "SOUTH AFRICA",
+    display_name: "South Africa",
+  },
+  {
+    iso_2: "gs",
+    iso_3: "sgs",
+    num_code: 239,
+    name: "SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS",
+    display_name: "South Georgia and the South Sandwich Islands",
+  },
+  {
+    iso_2: "ss",
+    iso_3: "ssd",
+    num_code: 728,
+    name: "SOUTH SUDAN",
+    display_name: "South Sudan",
+  },
+  {
+    iso_2: "es",
+    iso_3: "esp",
+    num_code: 724,
+    name: "SPAIN",
+    display_name: "Spain",
+  },
+  {
+    iso_2: "lk",
+    iso_3: "lka",
+    num_code: 144,
+    name: "SRI LANKA",
+    display_name: "Sri Lanka",
+  },
+  {
+    iso_2: "sd",
+    iso_3: "sdn",
+    num_code: 729,
+    name: "SUDAN",
+    display_name: "Sudan",
+  },
+  {
+    iso_2: "sr",
+    iso_3: "sur",
+    num_code: 740,
+    name: "SURINAME",
+    display_name: "Suriname",
+  },
+  {
+    iso_2: "sj",
+    iso_3: "sjm",
+    num_code: 744,
+    name: "SVALBARD AND JAN MAYEN",
+    display_name: "Svalbard and Jan Mayen",
+  },
+  {
+    iso_2: "sz",
+    iso_3: "swz",
+    num_code: 748,
+    name: "SWAZILAND",
+    display_name: "Swaziland",
+  },
+  {
+    iso_2: "se",
+    iso_3: "swe",
+    num_code: 752,
+    name: "SWEDEN",
+    display_name: "Sweden",
+  },
+  {
+    iso_2: "ch",
+    iso_3: "che",
+    num_code: 756,
+    name: "SWITZERLAND",
+    display_name: "Switzerland",
+  },
+  {
+    iso_2: "sy",
+    iso_3: "syr",
+    num_code: 760,
+    name: "SYRIAN ARAB REPUBLIC",
+    display_name: "Syrian Arab Republic",
+  },
+  {
+    iso_2: "tw",
+    iso_3: "twn",
+    num_code: 158,
+    name: "TAIWAN, PROVINCE OF CHINA",
+    display_name: "Taiwan, Province of China",
+  },
+  {
+    iso_2: "tj",
+    iso_3: "tjk",
+    num_code: 762,
+    name: "TAJIKISTAN",
+    display_name: "Tajikistan",
+  },
+  {
+    iso_2: "tz",
+    iso_3: "tza",
+    num_code: 834,
+    name: "TANZANIA, UNITED REPUBLIC OF",
+    display_name: "Tanzania, United Republic of",
+  },
+  {
+    iso_2: "th",
+    iso_3: "tha",
+    num_code: 764,
+    name: "THAILAND",
+    display_name: "Thailand",
+  },
+  {
+    iso_2: "tl",
+    iso_3: "tls",
+    num_code: 626,
+    name: "TIMOR LESTE",
+    display_name: "Timor Leste",
+  },
+  {
+    iso_2: "tg",
+    iso_3: "tgo",
+    num_code: 768,
+    name: "TOGO",
+    display_name: "Togo",
+  },
+  {
+    iso_2: "tk",
+    iso_3: "tkl",
+    num_code: 772,
+    name: "TOKELAU",
+    display_name: "Tokelau",
+  },
+  {
+    iso_2: "to",
+    iso_3: "ton",
+    num_code: 776,
+    name: "TONGA",
+    display_name: "Tonga",
+  },
+  {
+    iso_2: "tt",
+    iso_3: "tto",
+    num_code: 780,
+    name: "TRINIDAD AND TOBAGO",
+    display_name: "Trinidad and Tobago",
+  },
+  {
+    iso_2: "tn",
+    iso_3: "tun",
+    num_code: 788,
+    name: "TUNISIA",
+    display_name: "Tunisia",
+  },
+  {
+    iso_2: "tr",
+    iso_3: "tur",
+    num_code: 792,
+    name: "TURKEY",
+    display_name: "Turkey",
+  },
+  {
+    iso_2: "tm",
+    iso_3: "tkm",
+    num_code: 795,
+    name: "TURKMENISTAN",
+    display_name: "Turkmenistan",
+  },
+  {
+    iso_2: "tc",
+    iso_3: "tca",
+    num_code: 796,
+    name: "TURKS AND CAICOS ISLANDS",
+    display_name: "Turks and Caicos Islands",
+  },
+  {
+    iso_2: "tv",
+    iso_3: "tuv",
+    num_code: 798,
+    name: "TUVALU",
+    display_name: "Tuvalu",
+  },
+  {
+    iso_2: "ug",
+    iso_3: "uga",
+    num_code: 800,
+    name: "UGANDA",
+    display_name: "Uganda",
+  },
+  {
+    iso_2: "ua",
+    iso_3: "ukr",
+    num_code: 804,
+    name: "UKRAINE",
+    display_name: "Ukraine",
+  },
+  {
+    iso_2: "ae",
+    iso_3: "are",
+    num_code: 784,
+    name: "UNITED ARAB EMIRATES",
+    display_name: "United Arab Emirates",
+  },
+  {
+    iso_2: "gb",
+    iso_3: "gbr",
+    num_code: 826,
+    name: "UNITED KINGDOM",
+    display_name: "United Kingdom",
+  },
+  {
+    iso_2: "us",
+    iso_3: "usa",
+    num_code: 840,
+    name: "UNITED STATES",
+    display_name: "United States",
+  },
+  {
+    iso_2: "um",
+    iso_3: "umi",
+    num_code: 581,
+    name: "UNITED STATES MINOR OUTLYING ISLANDS",
+    display_name: "United States Minor Outlying Islands",
+  },
+  {
+    iso_2: "uy",
+    iso_3: "ury",
+    num_code: 858,
+    name: "URUGUAY",
+    display_name: "Uruguay",
+  },
+  {
+    iso_2: "uz",
+    iso_3: "uzb",
+    num_code: 860,
+    name: "UZBEKISTAN",
+    display_name: "Uzbekistan",
+  },
+  {
+    iso_2: "vu",
+    iso_3: "vut",
+    num_code: 548,
+    name: "VANUATU",
+    display_name: "Vanuatu",
+  },
+  {
+    iso_2: "ve",
+    iso_3: "ven",
+    num_code: 862,
+    name: "VENEZUELA",
+    display_name: "Venezuela",
+  },
+  {
+    iso_2: "vn",
+    iso_3: "vnm",
+    num_code: 704,
+    name: "VIET NAM",
+    display_name: "Viet Nam",
+  },
+  {
+    iso_2: "vg",
+    iso_3: "vgb",
+    num_code: 92,
+    name: "VIRGIN ISLANDS, BRITISH",
+    display_name: "Virgin Islands, British",
+  },
+  {
+    iso_2: "vi",
+    iso_3: "vir",
+    num_code: 850,
+    name: "VIRGIN ISLANDS, U.S.",
+    display_name: "Virgin Islands, U.S.",
+  },
+  {
+    iso_2: "wf",
+    iso_3: "wlf",
+    num_code: 876,
+    name: "WALLIS AND FUTUNA",
+    display_name: "Wallis and Futuna",
+  },
+  {
+    iso_2: "eh",
+    iso_3: "esh",
+    num_code: 732,
+    name: "WESTERN SAHARA",
+    display_name: "Western Sahara",
+  },
+  {
+    iso_2: "ye",
+    iso_3: "yem",
+    num_code: 887,
+    name: "YEMEN",
+    display_name: "Yemen",
+  },
+  {
+    iso_2: "zm",
+    iso_3: "zmb",
+    num_code: 894,
+    name: "ZAMBIA",
+    display_name: "Zambia",
+  },
+  {
+    iso_2: "zw",
+    iso_3: "zwe",
+    num_code: 716,
+    name: "ZIMBABWE",
+    display_name: "Zimbabwe",
+  },
+  {
+    iso_2: "ax",
+    iso_3: "ala",
+    num_code: 248,
+    name: "ÅLAND ISLANDS",
+    display_name: "Åland Islands",
+  },
+]
diff --git a/packages/admin-next/dashboard/src/lib/debounce.ts b/packages/admin-next/dashboard/src/lib/debounce.ts
new file mode 100644
index 0000000000..3ac6187085
--- /dev/null
+++ b/packages/admin-next/dashboard/src/lib/debounce.ts
@@ -0,0 +1,20 @@
+type Options = {
+  leading?: boolean
+}
+
+export const debounce = (
+  func: (...args: any[]) => void,
+  delay: number,
+  { leading }: Options = {}
+): ((...args: any[]) => void) => {
+  let timerId: NodeJS.Timeout | undefined
+
+  return (...args) => {
+    if (!timerId && leading) {
+      func(...args)
+    }
+    clearTimeout(timerId)
+
+    timerId = setTimeout(() => func(...args), delay)
+  }
+}
diff --git a/packages/admin-next/dashboard/src/lib/is-axios-error.ts b/packages/admin-next/dashboard/src/lib/is-axios-error.ts
new file mode 100644
index 0000000000..1d8cba11f8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/lib/is-axios-error.ts
@@ -0,0 +1,5 @@
+import type { AxiosError } from "axios"
+
+export const isAxiosError = (error: any): error is AxiosError => {
+  return error.isAxiosError
+}
diff --git a/packages/admin-next/dashboard/src/lib/medusa.ts b/packages/admin-next/dashboard/src/lib/medusa.ts
index 5b3a4f4abe..1edaff40b1 100644
--- a/packages/admin-next/dashboard/src/lib/medusa.ts
+++ b/packages/admin-next/dashboard/src/lib/medusa.ts
@@ -1,6 +1,9 @@
 import Medusa from "@medusajs/medusa-js"
 import { QueryClient } from "@tanstack/react-query"
 
+export const MEDUSA_BACKEND_URL =
+  import.meta.env.VITE_MEDUSA_ADMIN_BACKEND_URL || "http://localhost:9000"
+
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -12,6 +15,6 @@ export const queryClient = new QueryClient({
 })
 
 export const medusa = new Medusa({
-  baseUrl: "http://localhost:9000",
-  maxRetries: 3,
+  baseUrl: MEDUSA_BACKEND_URL,
+  maxRetries: 1,
 })
diff --git a/packages/admin-next/dashboard/src/providers/auth-provider/auth-context.tsx b/packages/admin-next/dashboard/src/providers/auth-provider/auth-context.tsx
deleted file mode 100644
index 4068ea01d8..0000000000
--- a/packages/admin-next/dashboard/src/providers/auth-provider/auth-context.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { AdminAuthRes, User } from "@medusajs/medusa"
-import { createContext } from "react"
-
-type AuthContextValue = {
-  login: (email: string, password: string) => Promise<AdminAuthRes>
-  user: Omit<User, "password_hash"> | null
-  isLoading: boolean
-}
-
-export const AuthContext = createContext<AuthContextValue | null>(null)
diff --git a/packages/admin-next/dashboard/src/providers/auth-provider/auth-provider.tsx b/packages/admin-next/dashboard/src/providers/auth-provider/auth-provider.tsx
deleted file mode 100644
index ddb2589cd4..0000000000
--- a/packages/admin-next/dashboard/src/providers/auth-provider/auth-provider.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useAdminGetSession, useAdminLogin } from "medusa-react"
-import { PropsWithChildren } from "react"
-import { AuthContext } from "./auth-context"
-
-export const AuthProvider = ({ children }: PropsWithChildren) => {
-  const { mutateAsync: loginMutation } = useAdminLogin()
-  const { user, isLoading } = useAdminGetSession()
-
-  const login = async (email: string, password: string) => {
-    return await loginMutation({ email, password })
-  }
-
-  return (
-    <AuthContext.Provider
-      value={{
-        login,
-        user: user ?? null,
-        isLoading,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/providers/auth-provider/index.ts b/packages/admin-next/dashboard/src/providers/auth-provider/index.ts
deleted file mode 100644
index c2b66aa1c0..0000000000
--- a/packages/admin-next/dashboard/src/providers/auth-provider/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./auth-provider";
-export * from "./use-auth";
diff --git a/packages/admin-next/dashboard/src/providers/auth-provider/use-auth.tsx b/packages/admin-next/dashboard/src/providers/auth-provider/use-auth.tsx
deleted file mode 100644
index 8bef3683ca..0000000000
--- a/packages/admin-next/dashboard/src/providers/auth-provider/use-auth.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { AuthContext } from "./auth-context";
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-};
diff --git a/packages/admin-next/dashboard/src/providers/router-provider/router-provider.tsx b/packages/admin-next/dashboard/src/providers/router-provider/router-provider.tsx
index ae5b05bfb8..34918b0f9c 100644
--- a/packages/admin-next/dashboard/src/providers/router-provider/router-provider.tsx
+++ b/packages/admin-next/dashboard/src/providers/router-provider/router-provider.tsx
@@ -1,38 +1,35 @@
+import type { AdminProductsRes, AdminRegionsRes } from "@medusajs/medusa"
 import {
+  Outlet,
   RouterProvider as Provider,
-  RouteObject,
   createBrowserRouter,
 } from "react-router-dom"
 
-import { RequireAuth } from "../../components/authentication/require-auth"
-import { AppLayout } from "../../components/layout/app-layout"
-import { PublicLayout } from "../../components/layout/public-layout"
-
-import { AdminProductsRes } from "@medusajs/medusa"
-import routes from "medusa-admin:routes/pages"
-import settings from "medusa-admin:settings/pages"
+import { ProtectedRoute } from "../../components/authentication/require-auth"
 import { ErrorBoundary } from "../../components/error/error-boundary"
-import { SearchProvider } from "../search-provider"
+import { MainLayout } from "../../components/layout/main-layout"
+import { PublicLayout } from "../../components/layout/public-layout"
+import { SettingsLayout } from "../../components/layout/settings-layout"
 
-const routeExtensions: RouteObject[] = routes.pages.map((ext) => {
-  return {
-    path: ext.path,
-    async lazy() {
-      const { default: Component } = await import(/* @vite-ignore */ ext.file)
-      return { Component }
-    },
-  }
-})
+// const routeExtensions: RouteObject[] = routes.pages.map((ext) => {
+//   return {
+//     path: ext.path,
+//     async lazy() {
+//       const { default: Component } = await import(/* @vite-ignore */ ext.file)
+//       return { Component }
+//     },
+//   }
+// })
 
-const settingsExtensions: RouteObject[] = settings.pages.map((ext) => {
-  return {
-    path: `/settings${ext.path}`,
-    async lazy() {
-      const { default: Component } = await import(/* @vite-ignore */ ext.file)
-      return { Component }
-    },
-  }
-})
+// const settingsExtensions: RouteObject[] = settings.pages.map((ext) => {
+//   return {
+//     path: `/settings${ext.path}`,
+//     async lazy() {
+//       const { default: Component } = await import(/* @vite-ignore */ ext.file)
+//       return { Component }
+//     },
+//   }
+// })
 
 const router = createBrowserRouter([
   {
@@ -45,161 +42,192 @@ const router = createBrowserRouter([
     ],
   },
   {
-    element: (
-      <RequireAuth>
-        <SearchProvider>
-          <AppLayout />
-        </SearchProvider>
-      </RequireAuth>
-    ),
+    element: <ProtectedRoute />,
     errorElement: <ErrorBoundary />,
     children: [
       {
         path: "/",
-        lazy: () => import("../../routes/home"),
-      },
-      {
-        path: "/orders",
+        element: <MainLayout />,
         children: [
           {
             index: true,
-            lazy: () => import("../../routes/orders/list"),
+            lazy: () => import("../../routes/home"),
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/orders/details"),
-          },
-        ],
-      },
-      {
-        path: "/draft-orders",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/draft-orders/list"),
-          },
-          {
-            path: ":id",
-            lazy: () => import("../../routes/draft-orders/details"),
-          },
-        ],
-      },
-      {
-        path: "/products",
-        handle: {
-          crumb: () => "Products",
-        },
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/products/views/product-list"),
-          },
-          {
-            path: ":id",
-            lazy: () => import("../../routes/products/views/product-details"),
+            path: "/orders",
             handle: {
-              crumb: (data: AdminProductsRes) => data.product.title,
+              crumb: () => "Orders",
             },
-          },
-        ],
-      },
-      {
-        path: "/categories",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/categories/list"),
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/orders/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/orders/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/categories/details"),
-          },
-        ],
-      },
-      {
-        path: "/collections",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/collections/list"),
+            path: "/draft-orders",
+            handle: {
+              crumb: () => "Draft Orders",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/draft-orders/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/draft-orders/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/collections/details"),
-          },
-        ],
-      },
-      {
-        path: "/customers",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/customers/list"),
+            path: "/products",
+            handle: {
+              crumb: () => "Products",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/products/product-list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/products/product-detail"),
+                handle: {
+                  crumb: (data: AdminProductsRes) => data.product.title,
+                },
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/customers/details"),
-          },
-        ],
-      },
-      {
-        path: "/customer-groups",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/customer-groups/list"),
+            path: "/categories",
+            handle: {
+              crumb: () => "Categories",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/categories/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/categories/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/customer-groups/details"),
-          },
-        ],
-      },
-      {
-        path: "/gift-cards",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/gift-cards/list"),
+            path: "/collections",
+            handle: {
+              crumb: () => "Collections",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/collections/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/collections/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/gift-cards/details"),
-          },
-        ],
-      },
-      {
-        path: "/inventory",
-        lazy: () => import("../../routes/inventory/list"),
-      },
-      {
-        path: "/discounts",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/discounts/list"),
+            path: "/customers",
+            handle: {
+              crumb: () => "Customers",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/customers/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/customers/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/discounts/details"),
-          },
-        ],
-      },
-      {
-        path: "/pricing",
-        children: [
-          {
-            index: true,
-            lazy: () => import("../../routes/pricing/list"),
+            path: "/customer-groups",
+            handle: {
+              crumb: () => "Customer Groups",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/customer-groups/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/customer-groups/details"),
+              },
+            ],
           },
           {
-            path: ":id",
-            lazy: () => import("../../routes/pricing/details"),
+            path: "/gift-cards",
+            handle: {
+              crumb: () => "Gift Cards",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/gift-cards/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/gift-cards/details"),
+              },
+            ],
+          },
+          {
+            path: "/inventory",
+            handle: {
+              crumb: () => "Inventory",
+            },
+            lazy: () => import("../../routes/inventory/list"),
+          },
+          {
+            path: "/discounts",
+            handle: {
+              crumb: () => "Discounts",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/discounts/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/discounts/details"),
+              },
+            ],
+          },
+          {
+            path: "/pricing",
+            handle: {
+              crumb: () => "Pricing",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/pricing/list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/pricing/details"),
+              },
+            ],
           },
         ],
       },
       {
         path: "/settings",
+        element: <SettingsLayout />,
         handle: {
           crumb: () => "Settings",
         },
@@ -210,52 +238,131 @@ const router = createBrowserRouter([
           },
           {
             path: "profile",
-            lazy: () => import("../../routes/profile/views/profile-details"),
+            lazy: () => import("../../routes/profile/profile-detail"),
             handle: {
               crumb: () => "Profile",
             },
+            children: [
+              {
+                path: "edit",
+                lazy: () => import("../../routes/profile/profile-edit"),
+              },
+            ],
           },
           {
             path: "store",
-            lazy: () => import("../../routes/store/views/store-details"),
+            lazy: () => import("../../routes/store/store-detail"),
             handle: {
               crumb: () => "Store",
             },
+            children: [
+              {
+                path: "edit",
+                lazy: () => import("../../routes/store/store-edit"),
+              },
+              {
+                path: "add-currencies",
+                lazy: () => import("../../routes/store/store-add-currencies"),
+              },
+            ],
           },
           {
             path: "locations",
-            lazy: () => import("../../routes/locations/list"),
+            element: <Outlet />,
+            handle: {
+              crumb: () => "Locations",
+            },
+            children: [
+              {
+                path: "",
+                lazy: () => import("../../routes/locations/location-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import("../../routes/locations/location-create"),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/locations/location-detail"),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () => import("../../routes/locations/location-edit"),
+                  },
+                  {
+                    path: "add-sales-channels",
+                    lazy: () =>
+                      import(
+                        "../../routes/locations/location-add-sales-channels"
+                      ),
+                  },
+                ],
+              },
+            ],
           },
           {
             path: "regions",
+            element: <Outlet />,
             handle: {
               crumb: () => "Regions",
             },
             children: [
               {
-                index: true,
-                lazy: () => import("../../routes/regions/views/region-list"),
+                path: "",
+                lazy: () => import("../../routes/regions/region-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () => import("../../routes/regions/region-create"),
+                  },
+                ],
               },
               {
                 path: ":id",
-                lazy: () => import("../../routes/regions/views/region-details"),
+                lazy: () => import("../../routes/regions/region-detail"),
+                handle: {
+                  crumb: (data: AdminRegionsRes) => data.region.name,
+                },
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () => import("../../routes/regions/region-edit"),
+                  },
+                ],
               },
             ],
           },
           {
             path: "users",
-            lazy: () => import("../../routes/users"),
+            element: <Outlet />,
             handle: {
               crumb: () => "Users",
             },
-          },
-          {
-            path: "currencies",
-            lazy: () =>
-              import("../../routes/currencies/views/currencies-details"),
-            handle: {
-              crumb: () => "Currencies",
-            },
+            children: [
+              {
+                path: "",
+                lazy: () => import("../../routes/users/user-list"),
+                children: [
+                  {
+                    path: "invite",
+                    lazy: () => import("../../routes/users/user-invite"),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/users/user-detail"),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () => import("../../routes/users/user-edit"),
+                  },
+                ],
+              },
+            ],
           },
           {
             path: "taxes",
@@ -275,37 +382,91 @@ const router = createBrowserRouter([
           },
           {
             path: "sales-channels",
+            element: <Outlet />,
             handle: {
               crumb: () => "Sales Channels",
             },
             children: [
               {
-                index: true,
+                path: "",
                 lazy: () =>
-                  import(
-                    "../../routes/sales-channels/views/sales-channel-list"
-                  ),
+                  import("../../routes/sales-channels/sales-channel-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import(
+                        "../../routes/sales-channels/sales-channel-create"
+                      ),
+                  },
+                ],
               },
               {
                 path: ":id",
                 lazy: () =>
-                  import(
-                    "../../routes/sales-channels/views/sales-channel-details"
-                  ),
+                  import("../../routes/sales-channels/sales-channel-detail"),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () =>
+                      import("../../routes/sales-channels/sales-channel-edit"),
+                  },
+                  {
+                    path: "add-products",
+                    lazy: () =>
+                      import(
+                        "../../routes/sales-channels/sales-channel-add-products"
+                      ),
+                  },
+                ],
               },
             ],
           },
           {
             path: "api-key-management",
-            lazy: () => import("../../routes/api-key-management"),
+            element: <Outlet />,
             handle: {
               crumb: () => "API Key Management",
             },
+            children: [
+              {
+                path: "",
+                lazy: () =>
+                  import(
+                    "../../routes/api-key-management/api-key-management-list"
+                  ),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import(
+                        "../../routes/api-key-management/api-key-management-create"
+                      ),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () =>
+                  import(
+                    "../../routes/api-key-management/api-key-management-detail"
+                  ),
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () =>
+                      import(
+                        "../../routes/api-key-management/api-key-management-edit"
+                      ),
+                  },
+                ],
+              },
+            ],
           },
-          ...settingsExtensions,
+          // ...settingsExtensions,
         ],
       },
-      ...routeExtensions,
+      // ...routeExtensions,
     ],
   },
   {
diff --git a/packages/admin-next/dashboard/src/providers/sidebar-provider/index.ts b/packages/admin-next/dashboard/src/providers/sidebar-provider/index.ts
new file mode 100644
index 0000000000..abb41fa819
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/sidebar-provider/index.ts
@@ -0,0 +1,2 @@
+export * from "./sidebar-provider"
+export * from "./use-sidebar"
diff --git a/packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-context.tsx b/packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-context.tsx
new file mode 100644
index 0000000000..23d0e7298f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-context.tsx
@@ -0,0 +1,9 @@
+import { createContext } from "react"
+
+type SidebarContextValue = {
+  desktop: boolean
+  mobile: boolean
+  toggle: (view: "desktop" | "mobile") => void
+}
+
+export const SidebarContext = createContext<SidebarContextValue | null>(null)
diff --git a/packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-provider.tsx b/packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-provider.tsx
new file mode 100644
index 0000000000..e9013d2bdf
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/sidebar-provider/sidebar-provider.tsx
@@ -0,0 +1,21 @@
+import { PropsWithChildren, useState } from "react"
+import { SidebarContext } from "./sidebar-context"
+
+export const SidebarProvider = ({ children }: PropsWithChildren) => {
+  const [desktop, setDesktop] = useState(true)
+  const [mobile, setMobile] = useState(false)
+
+  const toggle = (view: "desktop" | "mobile") => {
+    if (view === "desktop") {
+      setDesktop(!desktop)
+    } else {
+      setMobile(!mobile)
+    }
+  }
+
+  return (
+    <SidebarContext.Provider value={{ desktop, mobile, toggle }}>
+      {children}
+    </SidebarContext.Provider>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/providers/sidebar-provider/use-sidebar.tsx b/packages/admin-next/dashboard/src/providers/sidebar-provider/use-sidebar.tsx
new file mode 100644
index 0000000000..21cb708e15
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/sidebar-provider/use-sidebar.tsx
@@ -0,0 +1,12 @@
+import { useContext } from "react"
+import { SidebarContext } from "./sidebar-context"
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext)
+
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider")
+  }
+
+  return context
+}
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/api-key-management-create.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/api-key-management-create.tsx
new file mode 100644
index 0000000000..ef7c98898e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/api-key-management-create.tsx
@@ -0,0 +1,15 @@
+import { FocusModal } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { CreatePublishableApiKeyForm } from "./components/create-publishable-api-key-form"
+
+export const ApiKeyManagementCreate = () => {
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        <CreatePublishableApiKeyForm />
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/create-publishable-api-key-form.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/create-publishable-api-key-form.tsx
new file mode 100644
index 0000000000..654550fec5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/create-publishable-api-key-form.tsx
@@ -0,0 +1,97 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, FocusModal, Heading, Input, Text } from "@medusajs/ui"
+import { useAdminCreatePublishableApiKey } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { useEffect } from "react"
+import { Form } from "../../../../../components/common/form"
+
+type CreatePublishableApiKeyFormProps = {
+  subscribe: (state: boolean) => void
+}
+
+const CreatePublishableApiKeySchema = zod.object({
+  title: zod.string().min(1),
+})
+
+export const CreatePublishableApiKeyForm = ({
+  subscribe,
+}: CreatePublishableApiKeyFormProps) => {
+  const { mutateAsync, isLoading } = useAdminCreatePublishableApiKey()
+
+  const form = useForm<zod.infer<typeof CreatePublishableApiKeySchema>>({
+    defaultValues: {
+      title: "",
+    },
+    resolver: zodResolver(CreatePublishableApiKeySchema),
+  })
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { t } = useTranslation()
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(values)
+  })
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex h-full flex-col overflow-hidden"
+        onSubmit={handleSubmit}
+      >
+        <FocusModal.Header>
+          <div className="flex items-center gap-x-2 justify-end">
+            <FocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </FocusModal.Close>
+            <Button size="small" type="submit" isLoading={isLoading}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </FocusModal.Header>
+        <FocusModal.Body className="flex flex-1 flex-col overflow-hidden">
+          <div className="flex flex-1 flex-col items-center overflow-y-auto">
+            <div className="flex w-full max-w-[720px] flex-col gap-y-10 px-2 pb-6 pt-[72px]">
+              <div>
+                <Heading>
+                  {t("apiKeyManagement.createPublishableApiKey")}
+                </Heading>
+                <Text size="small" className="text-ui-fg-subtle">
+                  {t("apiKeyManagement.publishableApiKeyHint")}
+                </Text>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Form.Field
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.title")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </FocusModal.Body>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/index.ts b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/index.ts
new file mode 100644
index 0000000000..e5aa57664b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/components/create-publishable-api-key-form/index.ts
@@ -0,0 +1 @@
+export * from "./create-publishable-api-key-form"
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/index.ts b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/index.ts
new file mode 100644
index 0000000000..e85125cac7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-create/index.ts
@@ -0,0 +1 @@
+export { ApiKeyManagementCreate as Component } from "./api-key-management-create"
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx
new file mode 100644
index 0000000000..169888b96e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx
@@ -0,0 +1,3 @@
+export const ApiKeyManagementDetail = () => {
+  return <div className="flex flex-col gap-y-2"></div>
+}
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/index.ts b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/index.ts
new file mode 100644
index 0000000000..2c193a6bd8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-detail/index.ts
@@ -0,0 +1 @@
+export { ApiKeyManagementDetail as Component } from "./api-key-management-detail"
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/api-key-management-edit.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/api-key-management-edit.tsx
new file mode 100644
index 0000000000..5c4125b5dd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/api-key-management-edit.tsx
@@ -0,0 +1,12 @@
+import { Drawer } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+
+export const ApiKeyManagementEdit = () => {
+  const [open, onOpenChange] = useRouteModalState()
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content></Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/index.ts b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/index.ts
new file mode 100644
index 0000000000..dcda77a479
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-edit/index.ts
@@ -0,0 +1 @@
+export { ApiKeyManagementEdit as Component } from "./api-key-management-edit"
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx
similarity index 62%
rename from packages/admin-next/dashboard/src/routes/api-key-management/api-key-management.tsx
rename to packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx
index d896d2578a..9f65eeb782 100644
--- a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management.tsx
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx
@@ -1,4 +1,3 @@
-import { InformationCircle } from "@medusajs/icons"
 import { PublishableApiKey, SalesChannel } from "@medusajs/medusa"
 import {
   Button,
@@ -21,136 +20,22 @@ import {
 } from "@tanstack/react-table"
 import {
   useAdminCreatePublishableApiKey,
-  useAdminPublishableApiKeys,
   useAdminSalesChannels,
 } from "medusa-react"
-import { useMemo, useState } from "react"
+import { useMemo } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
-import { Form } from "../../components/common/form"
-
-export const ApiKeyManagement = () => {
-  const [showCreateModal, setShowCreateModal] = useState(false)
-
-  const { publishable_api_keys, isLoading, isError, error } =
-    useAdminPublishableApiKeys()
-
-  const columns = useColumns()
-
-  const table = useReactTable({
-    data: publishable_api_keys || [],
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (row) => row.id,
-  })
-
-  const { t } = useTranslation()
-
-  // TODO: Move to loading.tsx and set as Suspense fallback for the route
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  // TODO: Move to error.tsx and set as ErrorBoundary for the route
-  if (isError || !publishable_api_keys) {
-    const err = error ? JSON.parse(JSON.stringify(error)) : null
-    return (
-      <div>
-        {(err as Error & { status: number })?.status === 404 ? (
-          <div>Not found</div>
-        ) : (
-          <div>Something went wrong!</div>
-        )}
-      </div>
-    )
-  }
-
-  const hasData = publishable_api_keys.length !== 0
+import { Outlet } from "react-router-dom"
+import { Form } from "../../../components/common/form"
+import { ApiKeyManagementListTable } from "./components/api-key-management-list-table"
 
+export const ApiKeyManagementList = () => {
   return (
     <div className="flex flex-col gap-y-2">
-      <Container className="p-0">
-        <div className="px-8 py-6 pb-4">
-          <Heading>{t("apiKeyManagement.domain")}</Heading>
-        </div>
-        <div className="border-ui-border-base border-y">
-          {hasData ? (
-            <Table>
-              <Table.Header>
-                {table.getHeaderGroups().map((headerGroup) => {
-                  return (
-                    <Table.Row
-                      key={headerGroup.id}
-                      className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th]:w-1/3"
-                    >
-                      {headerGroup.headers.map((header) => {
-                        return (
-                          <Table.HeaderCell key={header.id}>
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                          </Table.HeaderCell>
-                        )
-                      })}
-                    </Table.Row>
-                  )
-                })}
-              </Table.Header>
-              <Table.Body className="border-b-0">
-                {table.getRowModel().rows.map((row) => (
-                  <Table.Row
-                    key={row.id}
-                    className={clx(
-                      "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
-                      {
-                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
-                          row.getIsSelected(),
-                      }
-                    )}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <Table.Cell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </Table.Cell>
-                    ))}
-                  </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-          ) : (
-            <div className="flex flex-col items-center py-24">
-              <div className="flex flex-col items-center gap-y-6">
-                <div className="flex flex-col items-center gap-y-2">
-                  <InformationCircle />
-                  <Text weight="plus" size="small" leading="compact">
-                    {t("general.noRecordsFound")}
-                  </Text>
-                  <Text size="small" className="text-ui-fg-muted">
-                    {t("apiKeyManagement.createAPublishableApiKey")}
-                  </Text>
-                </div>
-                <Button
-                  variant="secondary"
-                  onClick={() => setShowCreateModal(!showCreateModal)}
-                >
-                  {t("apiKeyManagement.createKey")}
-                </Button>
-              </div>
-            </div>
-          )}
-        </div>
-        <div className="h-[72px]"></div>
-      </Container>
-      <CreatePublishableApiKey
-        open={showCreateModal}
-        onOpenChange={setShowCreateModal}
-      />
+      <ApiKeyManagementListTable />
+      <Outlet />
     </div>
   )
 }
@@ -274,8 +159,14 @@ const CreatePublishableApiKey = (props: CreatePublishableApiKeyProps) => {
         <FocusModal.Content>
           <FocusModal.Header>
             <div className="flex items-center justify-end gap-x-2">
-              <Button variant="secondary">{t("general.cancel")}</Button>
-              <Button type="submit">Publish API Key</Button>
+              <FocusModal.Close asChild>
+                <Button size="small" variant="secondary">
+                  {t("general.cancel")}
+                </Button>
+              </FocusModal.Close>
+              <Button size="small" type="submit">
+                Publish API Key
+              </Button>
             </div>
           </FocusModal.Header>
           <FocusModal.Body className="flex flex-col items-center py-16">
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx
new file mode 100644
index 0000000000..cdbf3d8adb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/api-key-management-list-table.tsx
@@ -0,0 +1,265 @@
+import { EllipsisHorizontal, Trash, XCircle } from "@medusajs/icons"
+import { PublishableApiKey } from "@medusajs/medusa"
+import {
+  Button,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  Table,
+  clx,
+  usePrompt,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  useAdminDeletePublishableApiKey,
+  useAdminPublishableApiKeys,
+  useAdminRevokePublishableApiKey,
+} from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+import { NoRecords } from "../../../../../components/common/empty-table-content"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+
+const PAGE_SIZE = 50
+
+export const ApiKeyManagementListTable = () => {
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { publishable_api_keys, count, isLoading, isError, error } =
+    useAdminPublishableApiKeys({})
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: publishable_api_keys || [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    getRowId: (row) => row.id,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="px-6 py-4 flex items-center justify-between">
+        <Heading level="h2">{t("apiKeyManagement.domain")}</Heading>
+        <Link to="create">
+          <Button variant="secondary" size="small">
+            {t("general.create")}
+          </Button>
+        </Link>
+      </div>
+      <div>
+        {(publishable_api_keys?.length ?? 0) > 0 ? (
+          <div>
+            <Table>
+              <Table.Header className="border-t-0">
+                {table.getHeaderGroups().map((headerGroup) => {
+                  return (
+                    <Table.Row
+                      key={headerGroup.id}
+                      className="[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap [&_th]:w-1/3"
+                    >
+                      {headerGroup.headers.map((header) => {
+                        return (
+                          <Table.HeaderCell key={header.id}>
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </Table.HeaderCell>
+                        )
+                      })}
+                    </Table.Row>
+                  )
+                })}
+              </Table.Header>
+              <Table.Body className="border-b-0">
+                {table.getRowModel().rows.map((row) => (
+                  <Table.Row
+                    key={row.id}
+                    className={clx(
+                      "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                      {
+                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                          row.getIsSelected(),
+                      }
+                    )}
+                    onClick={() =>
+                      navigate(
+                        `/settings/api-key-management/${row.original.id}`
+                      )
+                    }
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <Table.Cell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </Table.Cell>
+                    ))}
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+            <LocalizedTablePagination
+              canNextPage={table.getCanNextPage()}
+              canPreviousPage={table.getCanPreviousPage()}
+              nextPage={table.nextPage}
+              previousPage={table.previousPage}
+              count={count ?? 0}
+              pageIndex={pageIndex}
+              pageCount={table.getPageCount()}
+              pageSize={PAGE_SIZE}
+            />
+          </div>
+        ) : (
+          <NoRecords
+            action={{
+              label: t("apiKeyManagement.createKey"),
+              to: "create",
+            }}
+          />
+        )}
+      </div>
+    </Container>
+  )
+}
+
+const KeyActions = ({ apiKey }: { apiKey: PublishableApiKey }) => {
+  const { mutateAsync: revokeAsync } = useAdminRevokePublishableApiKey(
+    apiKey.id
+  )
+  const { mutateAsync: deleteAsync } = useAdminDeletePublishableApiKey(
+    apiKey.id
+  )
+
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("apiKeyManagement.deleteKeyWarning", {
+        title: apiKey.title,
+      }),
+      confirmText: t("general.delete"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await deleteAsync()
+  }
+
+  const handleRevoke = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("apiKeyManagement.revokeKeyWarning", {
+        title: apiKey.title,
+      }),
+      confirmText: t("apiKeyManagement.revoke"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await revokeAsync()
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small" variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onClick={handleRevoke}>
+          <div className="flex items-center gap-x-2 [&_svg]:text-ui-fg-subtle">
+            <XCircle />
+            <span onClick={handleRevoke}>{t("apiKeyManagement.revoke")}</span>
+          </div>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onClick={handleDelete}>
+          <div className="flex items-center gap-x-2 [&_svg]:text-ui-fg-subtle">
+            <Trash />
+            <span>{t("general.delete")}</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<PublishableApiKey>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.accessor("id", {
+        header: "Key",
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <KeyActions apiKey={row.original} />
+        },
+      }),
+    ],
+    [t]
+  )
+
+  return columns
+}
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/index.ts b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/index.ts
new file mode 100644
index 0000000000..ff8ba6f75d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/components/api-key-management-list-table/index.ts
@@ -0,0 +1 @@
+export * from "./api-key-management-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/index.ts b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/index.ts
new file mode 100644
index 0000000000..7fd84a7245
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-list/index.ts
@@ -0,0 +1 @@
+export { ApiKeyManagementList as Component } from "./api-key-management-list"
diff --git a/packages/admin-next/dashboard/src/routes/api-key-management/index.ts b/packages/admin-next/dashboard/src/routes/api-key-management/index.ts
deleted file mode 100644
index 9ddecac337..0000000000
--- a/packages/admin-next/dashboard/src/routes/api-key-management/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ApiKeyManagement as Component } from "./api-key-management"
diff --git a/packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/edit-currencies-details-drawer.tsx b/packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/edit-currencies-details-drawer.tsx
deleted file mode 100644
index 3a2fc31169..0000000000
--- a/packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/edit-currencies-details-drawer.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { Store } from "@medusajs/medusa"
-import { Button, Drawer, Heading, Select } from "@medusajs/ui"
-import { useAdminUpdateStore } from "medusa-react"
-import { useState } from "react"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-import * as zod from "zod"
-import { Form } from "../../../../components/common/form"
-
-const EditCurrenciesDetailsSchema = zod.object({
-  default_currency_code: zod.string(),
-})
-
-type EditCurrenciesDetailsDrawerProps = {
-  store: Store
-}
-
-export const EditCurrenciesDetailsDrawer = ({
-  store,
-}: EditCurrenciesDetailsDrawerProps) => {
-  const [open, setOpen] = useState(false)
-  const [selectOpen, setSelectOpen] = useState(false)
-
-  const { t } = useTranslation()
-
-  const { mutateAsync } = useAdminUpdateStore()
-
-  const form = useForm<zod.infer<typeof EditCurrenciesDetailsSchema>>({
-    defaultValues: {
-      default_currency_code: store.default_currency_code,
-    },
-  })
-
-  const sortedCurrencies = store.currencies.sort((a, b) => {
-    if (a.code === store.default_currency_code) {
-      return -1
-    }
-
-    if (b.code === store.default_currency_code) {
-      return 1
-    }
-
-    return a.code.localeCompare(b.code)
-  })
-
-  const onOpenChange = (open: boolean) => {
-    if (!open) {
-      form.reset()
-
-      /**
-       * We need to close the select when the drawer closes.
-       * Otherwise it may lead to `pointer-events: none` being applied to the body.
-       */
-      setSelectOpen(false)
-    }
-    setOpen(open)
-  }
-
-  const onSubmit = form.handleSubmit(async (values) => {
-    await mutateAsync(
-      {
-        default_currency_code: values.default_currency_code,
-      },
-      {
-        onSuccess: ({ store }) => {
-          form.reset({
-            default_currency_code: store.default_currency_code,
-          })
-
-          onOpenChange(false)
-        },
-        onError: (err) => {
-          console.log(err)
-        },
-      }
-    )
-  })
-
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
-      <Drawer.Trigger asChild>
-        <Button variant="secondary">
-          {t("currencies.editCurrencyDetails")}
-        </Button>
-      </Drawer.Trigger>
-      <Drawer.Content>
-        <Drawer.Header>
-          <Heading>{t("currencies.editCurrencyDetails")}</Heading>
-        </Drawer.Header>
-        <Drawer.Body>
-          <Form {...form}>
-            <form>
-              <Form.Field
-                name="default_currency_code"
-                control={form.control}
-                render={({ field: { ref, ...field } }) => {
-                  return (
-                    <Form.Item className="gap-y-2">
-                      <Form.Label>{t("currencies.defaultCurrency")}</Form.Label>
-                      <div>
-                        <Form.Control>
-                          <Select
-                            {...field}
-                            open={selectOpen}
-                            onOpenChange={setSelectOpen}
-                            value={field.value}
-                            onValueChange={field.onChange}
-                            size="small"
-                          >
-                            <Select.Trigger ref={ref}>
-                              <Select.Value>
-                                <span>
-                                  <span className="txt-compact-small-plus uppercase">
-                                    {field.value}
-                                  </span>{" "}
-                                  {
-                                    sortedCurrencies.find(
-                                      (curr) => curr.code === field.value
-                                    )?.name
-                                  }
-                                </span>
-                              </Select.Value>
-                            </Select.Trigger>
-                            <Select.Content>
-                              {sortedCurrencies.map((curr) => (
-                                <Select.Item key={curr.code} value={curr.code}>
-                                  <span>
-                                    <span className="txt-compact-small-plus uppercase">
-                                      {curr.code}
-                                    </span>{" "}
-                                    {curr.name}
-                                  </span>
-                                </Select.Item>
-                              ))}
-                            </Select.Content>
-                          </Select>
-                        </Form.Control>
-                        <Form.ErrorMessage />
-                      </div>
-                      <Form.Hint>
-                        {t("currencies.defaultCurrencyHint")}
-                      </Form.Hint>
-                    </Form.Item>
-                  )
-                }}
-              />
-            </form>
-          </Form>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <Drawer.Close asChild>
-            <Button variant="secondary">{t("general.cancel")}</Button>
-          </Drawer.Close>
-          <Button onClick={onSubmit}>{t("general.save")}</Button>
-        </Drawer.Footer>
-      </Drawer.Content>
-    </Drawer>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/index.ts b/packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/index.ts
deleted file mode 100644
index 8a247de79e..0000000000
--- a/packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./edit-currencies-details-drawer"
diff --git a/packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/currencies-details.tsx b/packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/currencies-details.tsx
deleted file mode 100644
index c2550a459a..0000000000
--- a/packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/currencies-details.tsx
+++ /dev/null
@@ -1,488 +0,0 @@
-import {
-  BuildingTax,
-  CurrencyDollar,
-  EllipsisHorizontal,
-} from "@medusajs/icons"
-import { Currency, Store } from "@medusajs/medusa"
-import {
-  Badge,
-  Button,
-  Checkbox,
-  CommandBar,
-  Container,
-  DropdownMenu,
-  FocusModal,
-  Heading,
-  IconButton,
-  Table,
-  Text,
-  Tooltip,
-  clx,
-  usePrompt,
-} from "@medusajs/ui"
-import {
-  PaginationState,
-  RowSelectionState,
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-import {
-  useAdminCurrencies,
-  useAdminStore,
-  useAdminUpdateStore,
-} from "medusa-react"
-import { useMemo, useState } from "react"
-import { useTranslation } from "react-i18next"
-import { EditCurrenciesDetailsDrawer } from "../../components/edit-currencies-details-drawer"
-
-export const CurrenciesDetails = () => {
-  const { t } = useTranslation()
-
-  const { store, isLoading } = useAdminStore()
-
-  if (isLoading || !store) {
-    return <div>Loading...</div>
-  }
-
-  return (
-    <div className="flex flex-col gap-y-2">
-      <Container className="p-0">
-        <div className="flex items-center justify-between px-8 py-6">
-          <div>
-            <Heading>{t("currencies.domain")}</Heading>
-            <Text size="small" className="text-ui-fg-subtle">
-              {t("currencies.manageTheCurrencies")}
-            </Text>
-          </div>
-          <EditCurrenciesDetailsDrawer store={store} />
-        </div>
-        <div className="grid grid-cols-2 border-t px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            {t("currencies.defaultCurrency")}
-          </Text>
-          <div className="flex items-center gap-x-2">
-            <Badge rounded="full" className="uppercase">
-              {store.default_currency_code}
-            </Badge>
-            <Text size="small" leading="compact">
-              {store.default_currency.name}
-            </Text>
-          </div>
-        </div>
-      </Container>
-      <StoreCurrencySection store={store} />
-    </div>
-  )
-}
-
-type StoreCurrenciesSectionProps = {
-  store: Store
-}
-
-const PAGE_SIZE = 20
-
-const StoreCurrencySection = ({ store }: StoreCurrenciesSectionProps) => {
-  const [addModalOpen, setAddModalOpen] = useState(false)
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-  const { mutateAsync } = useAdminUpdateStore()
-  const prompt = usePrompt()
-  const { t } = useTranslation()
-  const pageCount = Math.ceil(store.currencies.length / PAGE_SIZE)
-  const columns = useStoreCurrencyColumns()
-
-  const table = useReactTable({
-    data: store.currencies,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    onRowSelectionChange: setRowSelection,
-    pageCount: pageCount,
-    state: {
-      rowSelection,
-    },
-  })
-
-  const onDeleteCurrencies = async () => {
-    const ids = Object.keys(rowSelection)
-
-    const result = await prompt({
-      title: t("general.areYouSure"),
-      description: t("currencies.removeCurrenciesWarning", {
-        count: ids.length,
-      }),
-      confirmText: t("general.remove"),
-      cancelText: t("general.cancel"),
-    })
-
-    if (!result) {
-      return
-    }
-
-    await mutateAsync({
-      currencies: store.currencies
-        .filter((c) => !ids.includes(c.code))
-        .map((c) => c.code),
-    })
-  }
-
-  return (
-    <Container className="p-0">
-      <div className="flex items-center justify-between px-8 pb-4 pt-6">
-        <Heading level="h2">Store Currencies</Heading>
-        <DropdownMenu>
-          <DropdownMenu.Trigger asChild>
-            <IconButton variant="transparent">
-              <EllipsisHorizontal />
-            </IconButton>
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content>
-            <DropdownMenu.Item
-              className="gap-x-2"
-              onClick={() => setAddModalOpen(!addModalOpen)}
-            >
-              <CurrencyDollar className="text-ui-fg-subtle" />
-              <span>Add Currencies</span>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item className="gap-x-2">
-              <BuildingTax className="text-ui-fg-subtle" />
-              <span>Tax Preferences</span>
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu>
-      </div>
-      <div>
-        <Table>
-          <Table.Header>
-            {table.getHeaderGroups().map((headerGroup) => {
-              return (
-                <Table.Row
-                  key={headerGroup.id}
-                  className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th]:w-1/3"
-                >
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <Table.HeaderCell key={header.id}>
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      </Table.HeaderCell>
-                    )
-                  })}
-                </Table.Row>
-              )
-            })}
-          </Table.Header>
-          <Table.Body className="border-b-0">
-            {table.getRowModel().rows.map((row) => (
-              <Table.Row
-                key={row.id}
-                className={clx("transition-fg", {
-                  "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
-                    row.getIsSelected(),
-                })}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <Table.Cell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </Table.Cell>
-                ))}
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-        <Table.Pagination
-          canNextPage={table.getCanNextPage()}
-          canPreviousPage={table.getCanPreviousPage()}
-          nextPage={table.nextPage}
-          previousPage={table.previousPage}
-          count={store.currencies.length}
-          pageIndex={table.getState().pagination.pageIndex}
-          pageCount={table.getPageCount()}
-          pageSize={PAGE_SIZE}
-        />
-        <CommandBar open={!!Object.keys(rowSelection).length}>
-          <CommandBar.Bar>
-            <CommandBar.Value>
-              {t("general.countSelected", {
-                count: Object.keys(rowSelection).length,
-              })}
-            </CommandBar.Value>
-            <CommandBar.Seperator />
-            <CommandBar.Command
-              action={onDeleteCurrencies}
-              shortcut="r"
-              label={t("general.remove")}
-            />
-          </CommandBar.Bar>
-        </CommandBar>
-      </div>
-      <AddCurrenciesModal
-        store={store}
-        onOpenChange={setAddModalOpen}
-        open={addModalOpen}
-      />
-    </Container>
-  )
-}
-
-const storeCurrencyColumnHelper = createColumnHelper<Currency>()
-
-const useStoreCurrencyColumns = () => {
-  const { t } = useTranslation()
-
-  return useMemo(
-    () => [
-      storeCurrencyColumnHelper.display({
-        id: "select",
-        header: ({ table }) => {
-          return (
-            <Checkbox
-              checked={
-                table.getIsSomePageRowsSelected()
-                  ? "indeterminate"
-                  : table.getIsAllPageRowsSelected()
-              }
-              onCheckedChange={(value) =>
-                table.toggleAllPageRowsSelected(!!value)
-              }
-            />
-          )
-        },
-        cell: ({ row }) => {
-          return (
-            <Checkbox
-              checked={row.getIsSelected()}
-              onCheckedChange={(value) => row.toggleSelected(!!value)}
-              onClick={(e) => {
-                e.stopPropagation()
-              }}
-            />
-          )
-        },
-      }),
-      storeCurrencyColumnHelper.accessor("code", {
-        header: t("fields.code"),
-        cell: ({ getValue }) => getValue().toUpperCase(),
-      }),
-      storeCurrencyColumnHelper.accessor("name", {
-        header: t("fields.name"),
-        cell: ({ getValue }) => getValue(),
-      }),
-      storeCurrencyColumnHelper.accessor("includes_tax", {
-        header: "Tax Inclusive Prices",
-        cell: ({ getValue }) => {
-          return getValue() ? t("general.enabled") : t("general.disabled")
-        },
-      }),
-    ],
-    [t]
-  )
-}
-
-const CURRENCIES_PAGE_SIZE = 50
-
-const AddCurrenciesModal = ({
-  store,
-  open,
-  onOpenChange,
-}: {
-  store: Store
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}) => {
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: CURRENCIES_PAGE_SIZE,
-  })
-
-  const pagination = useMemo(
-    () => ({
-      pageIndex,
-      pageSize,
-    }),
-    [pageIndex, pageSize]
-  )
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
-  const { currencies, count, isLoading } = useAdminCurrencies({
-    limit: CURRENCIES_PAGE_SIZE,
-    offset: pageIndex * CURRENCIES_PAGE_SIZE,
-  })
-
-  const columns = useCurrencyColumns()
-
-  const table = useReactTable({
-    data: currencies ?? [],
-    columns,
-    pageCount: Math.ceil((count ?? 0) / CURRENCIES_PAGE_SIZE),
-    state: {
-      pagination,
-      rowSelection,
-    },
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    meta: {
-      currencyCodes: store.currencies?.map((c) => c.code) ?? [],
-    },
-  })
-
-  const { t } = useTranslation()
-
-  return (
-    <FocusModal open={open} onOpenChange={onOpenChange}>
-      <FocusModal.Content>
-        <FocusModal.Header>
-          <div className="flex items-center justify-end gap-x-2">
-            <Button variant="secondary">{t("general.cancel")}</Button>
-            <Button>{t("general.save")}</Button>
-          </div>
-        </FocusModal.Header>
-        <FocusModal.Body className="flex h-full w-full flex-col items-center overflow-y-auto">
-          <div className="w-full flex-1 overflow-y-auto">
-            <Table>
-              <Table.Header className="border-t-0">
-                {table.getHeaderGroups().map((headerGroup) => {
-                  return (
-                    <Table.Row
-                      key={headerGroup.id}
-                      className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th]:w-1/3"
-                    >
-                      {headerGroup.headers.map((header) => {
-                        return (
-                          <Table.HeaderCell key={header.id}>
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                          </Table.HeaderCell>
-                        )
-                      })}
-                    </Table.Row>
-                  )
-                })}
-              </Table.Header>
-              <Table.Body className="border-b-0">
-                {table.getRowModel().rows.map((row) => (
-                  <Table.Row
-                    key={row.id}
-                    className={clx(
-                      "transition-fg last-of-type:border-b-0",
-                      {
-                        "bg-ui-bg-disabled hover:bg-ui-bg-disabled":
-                          store.currencies
-                            .map((c) => c.code)
-                            ?.includes(row.original.code),
-                      },
-                      {
-                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
-                          row.getIsSelected(),
-                      }
-                    )}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <Table.Cell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </Table.Cell>
-                    ))}
-                  </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-          </div>
-          <div className="w-full border-t">
-            <Table.Pagination
-              canNextPage={table.getCanNextPage()}
-              canPreviousPage={table.getCanPreviousPage()}
-              nextPage={table.nextPage}
-              previousPage={table.previousPage}
-              count={count ?? 0}
-              pageIndex={pageIndex}
-              pageCount={table.getPageCount()}
-              pageSize={CURRENCIES_PAGE_SIZE}
-            />
-          </div>
-        </FocusModal.Body>
-      </FocusModal.Content>
-    </FocusModal>
-  )
-}
-
-const currencyColumnHelper = createColumnHelper<Currency>()
-
-const useCurrencyColumns = () => {
-  const { t } = useTranslation()
-
-  return useMemo(
-    () => [
-      currencyColumnHelper.display({
-        id: "select",
-        header: ({ table }) => {
-          return (
-            <Checkbox
-              checked={
-                table.getIsSomePageRowsSelected()
-                  ? "indeterminate"
-                  : table.getIsAllPageRowsSelected()
-              }
-              onCheckedChange={(value) =>
-                table.toggleAllPageRowsSelected(!!value)
-              }
-            />
-          )
-        },
-        cell: ({ row, table }) => {
-          const { currencyCodes } = table.options.meta as {
-            currencyCodes: string[]
-          }
-
-          const isAdded = currencyCodes.includes(row.original.code)
-
-          const isSelected = row.getIsSelected() || isAdded
-
-          const Component = (
-            <Checkbox
-              checked={isSelected}
-              disabled={isAdded}
-              onCheckedChange={(value) => row.toggleSelected(!!value)}
-              onClick={(e) => {
-                e.stopPropagation()
-              }}
-            />
-          )
-
-          if (isAdded) {
-            return (
-              <Tooltip
-                content={t("currencies.currencyAlreadyAdded")}
-                side="right"
-              >
-                {Component}
-              </Tooltip>
-            )
-          }
-
-          return Component
-        },
-      }),
-      currencyColumnHelper.accessor("code", {
-        header: t("fields.code"),
-        cell: ({ getValue }) => getValue().toUpperCase(),
-      }),
-      currencyColumnHelper.accessor("name", {
-        header: t("fields.name"),
-        cell: ({ getValue }) => getValue(),
-      }),
-    ],
-    [t]
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/index.ts b/packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/index.ts
deleted file mode 100644
index 5069f29b0c..0000000000
--- a/packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CurrenciesDetails as Component } from "./currencies-details"
diff --git a/packages/admin-next/dashboard/src/routes/locations/list/index.ts b/packages/admin-next/dashboard/src/routes/locations/list/index.ts
deleted file mode 100644
index 4ede307bd7..0000000000
--- a/packages/admin-next/dashboard/src/routes/locations/list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LocationsList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/locations/list/list.tsx b/packages/admin-next/dashboard/src/routes/locations/list/list.tsx
deleted file mode 100644
index 25a6d42694..0000000000
--- a/packages/admin-next/dashboard/src/routes/locations/list/list.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Container, Heading } from "@medusajs/ui";
-
-export const LocationsList = () => {
-  return (
-    <div>
-      <Container>
-        <Heading>Locations</Heading>
-      </Container>
-    </div>
-  );
-};
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-add-sales-channels/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-add-sales-channels/index.ts
new file mode 100644
index 0000000000..eb7ea74f11
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-add-sales-channels/index.ts
@@ -0,0 +1 @@
+export { LocationAddSalesChannels as Component } from "./location-add-sales-channels"
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-add-sales-channels/location-add-sales-channels.tsx b/packages/admin-next/dashboard/src/routes/locations/location-add-sales-channels/location-add-sales-channels.tsx
new file mode 100644
index 0000000000..6f7d42bfeb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-add-sales-channels/location-add-sales-channels.tsx
@@ -0,0 +1,15 @@
+import { FocusModal } from "@medusajs/ui"
+import { useAdminAddLocationToSalesChannel } from "medusa-react"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+
+export const LocationAddSalesChannels = () => {
+  const [open, onOpenChange] = useRouteModalState()
+
+  const { mutateAsync } = useAdminAddLocationToSalesChannel() // TODO: We need a batch mutation instead of this to avoid multiple requests
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content></FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/create-location-form.tsx b/packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/create-location-form.tsx
new file mode 100644
index 0000000000..5c8c6fff37
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/create-location-form.tsx
@@ -0,0 +1,234 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, FocusModal, Heading, Input, Text } from "@medusajs/ui"
+import { useAdminCreateStockLocation } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+import { CountrySelect } from "../../../../../components/common/country-select"
+import { Form } from "../../../../../components/common/form"
+
+const CreateLocationSchema = zod.object({
+  name: zod.string().min(1),
+  address: zod.object({
+    address_1: zod.string().min(1),
+    address_2: zod.string().optional(),
+    country_code: zod.string().min(2).max(2),
+    city: zod.string().optional(),
+    postal_code: zod.string().optional(),
+    province: zod.string().optional(),
+    company: zod.string().optional(),
+    phone: zod.string().optional(), // TODO: Add validation
+  }),
+})
+
+export const CreateLocationForm = () => {
+  const { mutateAsync, isLoading } = useAdminCreateStockLocation()
+
+  const form = useForm<zod.infer<typeof CreateLocationSchema>>({
+    defaultValues: {
+      name: "",
+      address: {
+        address_1: "",
+        address_2: "",
+        city: "",
+        company: "",
+        country_code: "",
+        phone: "",
+        postal_code: "",
+        province: "",
+      },
+    },
+    resolver: zodResolver(CreateLocationSchema),
+  })
+
+  const { t } = useTranslation()
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    mutateAsync(
+      {
+        name: values.name,
+        address: values.address,
+      },
+      {
+        onSuccess: () => {},
+      }
+    )
+  })
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <FocusModal.Header>
+          <div className="flex items-center justify-end gap-x-2">
+            <FocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </FocusModal.Close>
+            <Button type="submit" size="small" isLoading={isLoading}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </FocusModal.Header>
+        <FocusModal.Body className="flex flex-1 flex-col overflow-hidden">
+          <div className="flex flex-1 flex-col items-center overflow-y-auto">
+            <div className="flex w-full max-w-[720px] flex-col gap-y-10 px-2 pb-6 pt-[72px]">
+              <div>
+                <Heading className="capitalize">
+                  {t("locations.createLocation")}
+                </Heading>
+                <Text size="small" className="text-ui-fg-subtle">
+                  {t("locations.detailsHint")}
+                </Text>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Form.Field
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.name")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Form.Field
+                  control={form.control}
+                  name="address.address_1"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.address")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="address.address_2"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.address2")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="address.postal_code"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>
+                          {t("fields.postalCode")}
+                        </Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="address.city"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.city")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="address.country_code"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.country")}</Form.Label>
+                        <Form.Control>
+                          <CountrySelect {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="address.province"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.state")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="address.company"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.company")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="address.phone"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.phone")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </FocusModal.Body>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/index.ts
new file mode 100644
index 0000000000..0803aab3f5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-create/components/create-location-form/index.ts
@@ -0,0 +1 @@
+export * from "./create-location-form"
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-create/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-create/index.ts
new file mode 100644
index 0000000000..9e7d96209e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-create/index.ts
@@ -0,0 +1 @@
+export { LocationCreate as Component } from "./location-create"
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-create/location-create.tsx b/packages/admin-next/dashboard/src/routes/locations/location-create/location-create.tsx
new file mode 100644
index 0000000000..0369b258d6
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-create/location-create.tsx
@@ -0,0 +1,15 @@
+import { FocusModal } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { CreateLocationForm } from "./components/create-location-form"
+
+export const LocationCreate = () => {
+  const [open, onOpenChange] = useRouteModalState()
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        <CreateLocationForm />
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/index.ts
new file mode 100644
index 0000000000..301849accd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./location-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx b/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx
new file mode 100644
index 0000000000..b12aea39ab
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx
@@ -0,0 +1,101 @@
+import type {
+  StockLocationAddressDTO,
+  StockLocationExpandedDTO,
+} from "@medusajs/types"
+import { Button, Container, Heading, Text, clx } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+type LocationGeneralSectionProps = {
+  location: StockLocationExpandedDTO
+}
+
+export const LocationGeneralSection = ({
+  location,
+}: LocationGeneralSectionProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading>{location.name}</Heading>
+        <Link to={"edit"}>
+          <Button size="small" variant="secondary">
+            {t("locations.editLocation")}
+          </Button>
+        </Link>
+      </div>
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" weight="plus" leading="compact">
+          {t("fields.address")}
+        </Text>
+        <AddressDisplay address={location.address} />
+      </div>
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text
+          size="small"
+          weight="plus"
+          leading="compact"
+          className={clx({
+            "text-ui-fg-subtle": !location.address?.company,
+          })}
+        >
+          {t("fields.company")}
+        </Text>
+        <Text
+          size="small"
+          leading="compact"
+          className={clx({
+            "text-ui-fg-subtle": !location.address?.company,
+          })}
+        >
+          {location.address?.company || "-"}
+        </Text>
+      </div>
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" weight="plus" leading="compact">
+          {t("fields.phone")}
+        </Text>
+        <Text
+          size="small"
+          leading="compact"
+          className={clx({
+            "text-ui-fg-subtle": !location.address?.phone,
+          })}
+        >
+          {location.address?.phone || "-"}
+        </Text>
+      </div>
+    </Container>
+  )
+}
+
+const AddressDisplay = ({
+  address,
+}: {
+  address: StockLocationAddressDTO | undefined
+}) => {
+  if (!address) {
+    return (
+      <Text size="small" className="text-ui-fg-subtle">
+        -
+      </Text>
+    )
+  }
+
+  const { address_1, address_2, city, province, postal_code, country_code } =
+    address
+
+  const addressParts = [
+    address_1,
+    address_2,
+    `${city ? city + " " : ""}${province ? province + " " : ""}${postal_code}`,
+    country_code.toUpperCase(),
+  ]
+
+  const addressString = addressParts
+    .filter((part) => part !== null && part !== undefined && part.trim() !== "")
+    .join(", ")
+
+  return <Text size="small">{addressString}</Text>
+}
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-sales-channel-section/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-sales-channel-section/index.ts
new file mode 100644
index 0000000000..6c16c11a32
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-sales-channel-section/index.ts
@@ -0,0 +1 @@
+export * from "./location-sales-channel-section"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-list/sales-channel-list.tsx b/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-sales-channel-section/location-sales-channel-section.tsx
similarity index 80%
rename from packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-list/sales-channel-list.tsx
rename to packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-sales-channel-section/location-sales-channel-section.tsx
index 24c577883e..83c4f5f18a 100644
--- a/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-list/sales-channel-list.tsx
+++ b/packages/admin-next/dashboard/src/routes/locations/location-detail/components/location-sales-channel-section/location-sales-channel-section.tsx
@@ -1,6 +1,8 @@
 import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
 import { SalesChannel } from "@medusajs/medusa"
+import { StockLocationExpandedDTO } from "@medusajs/types"
 import {
+  Button,
   Container,
   DropdownMenu,
   Heading,
@@ -17,16 +19,22 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table"
-import { useAdminDeleteSalesChannel, useAdminSalesChannels } from "medusa-react"
 import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { useNavigate } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
+import { NoRecords } from "../../../../../components/common/empty-table-content/empty-table-content"
 
-const PAGE_SIZE = 50
+type LocationSalesChannelSectionProps = {
+  location: StockLocationExpandedDTO
+}
 
-export const SalesChannelList = () => {
-  const navigate = useNavigate()
+const PAGE_SIZE = 20
+
+export const LocationSalesChannelSection = ({
+  location,
+}: LocationSalesChannelSectionProps) => {
   const { t } = useTranslation()
+  const navigate = useNavigate()
 
   const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
     pageIndex: 0,
@@ -43,15 +51,12 @@ export const SalesChannelList = () => {
 
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
 
-  const { sales_channels, count, isLoading } = useAdminSalesChannels({
-    limit: PAGE_SIZE,
-    offset: pageIndex * PAGE_SIZE,
-  })
-
+  const salesChannels = location.sales_channels
+  const count = location.sales_channels?.length || 0
   const columns = useColumns()
 
   const table = useReactTable({
-    data: sales_channels ?? [],
+    data: salesChannels ?? [],
     columns,
     pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
     state: {
@@ -65,12 +70,17 @@ export const SalesChannelList = () => {
   })
 
   return (
-    <div className="flex flex-col gap-y-2">
-      <Container className="p-0">
-        <div className="px-8 pb-4 pt-6">
-          <Heading>{t("salesChannels.domain")}</Heading>
-        </div>
-        <div>
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">Sales Channels</Heading>
+        <Link to={"add-sales-channels"}>
+          <Button size="small" variant="secondary">
+            {t("locations.addSalesChannels")}
+          </Button>
+        </Link>
+      </div>
+      <div>
+        {count ? (
           <Table>
             <Table.Header>
               {table.getHeaderGroups().map((headerGroup) => {
@@ -120,24 +130,20 @@ export const SalesChannelList = () => {
               ))}
             </Table.Body>
           </Table>
-          <Table.Pagination
-            canNextPage={table.getCanNextPage()}
-            canPreviousPage={table.getCanPreviousPage()}
-            nextPage={table.nextPage}
-            previousPage={table.previousPage}
-            count={count ?? 0}
-            pageIndex={pageIndex}
-            pageCount={table.getPageCount()}
-            pageSize={PAGE_SIZE}
+        ) : (
+          <NoRecords
+            action={{
+              label: t("locations.addSalesChannels"),
+              to: "add-sales-channels",
+            }}
           />
-        </div>
-      </Container>
-    </div>
+        )}
+      </div>
+    </Container>
   )
 }
 
 const SalesChannelActions = ({ id }: { id: string }) => {
-  const { mutateAsync } = useAdminDeleteSalesChannel(id)
   const { t } = useTranslation()
 
   return (
@@ -178,11 +184,11 @@ const useColumns = () => {
         cell: ({ getValue }) => getValue(),
       }),
       columnHelper.accessor("is_disabled", {
-        header: () => <div className="text-right">{t("fields.status")}</div>,
+        header: t("fields.status"),
         cell: ({ getValue }) => {
           const value = getValue()
           return (
-            <div className="text-right">
+            <div>
               <StatusBadge color={value ? "grey" : "green"}>
                 {value ? t("general.disabled") : t("general.enabled")}
               </StatusBadge>
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-detail/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-detail/index.ts
new file mode 100644
index 0000000000..086ccf707a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-detail/index.ts
@@ -0,0 +1 @@
+export { LocationDetail as Component } from "./location-detail"
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-detail/location-detail.tsx b/packages/admin-next/dashboard/src/routes/locations/location-detail/location-detail.tsx
new file mode 100644
index 0000000000..45985636c6
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-detail/location-detail.tsx
@@ -0,0 +1,38 @@
+import { useAdminStockLocations } from "medusa-react"
+import { Outlet, json, useParams } from "react-router-dom"
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { LocationGeneralSection } from "./components/location-general-section"
+import { LocationSalesChannelSection } from "./components/location-sales-channel-section"
+
+export const LocationDetail = () => {
+  const { id } = useParams()
+  const { stock_locations, isLoading, isError, error } = useAdminStockLocations(
+    {
+      id,
+      expand: "address,sales_channels",
+    }
+  )
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  const stock_location = stock_locations?.[0]
+
+  if (!stock_location) {
+    throw json({ message: "Not found" }, 404)
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <LocationGeneralSection location={stock_location} />
+      <LocationSalesChannelSection location={stock_location} />
+      <JsonViewSection data={stock_location} />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-edit/components/edit-location-form/edit-location-form.tsx b/packages/admin-next/dashboard/src/routes/locations/location-edit/components/edit-location-form/edit-location-form.tsx
new file mode 100644
index 0000000000..3591059a73
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-edit/components/edit-location-form/edit-location-form.tsx
@@ -0,0 +1,218 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { StockLocationExpandedDTO } from "@medusajs/types"
+import { Button, Drawer, Input } from "@medusajs/ui"
+import { useAdminUpdateStockLocation } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+import { CountrySelect } from "../../../../../components/common/country-select"
+import { Form } from "../../../../../components/common/form"
+
+type EditLocationFormProps = {
+  location: StockLocationExpandedDTO
+}
+
+const EditLocationSchema = zod.object({
+  name: zod.string().min(1),
+  address: zod.object({
+    address_1: zod.string().min(1),
+    address_2: zod.string().optional(),
+    country_code: zod.string().min(2).max(2),
+    city: zod.string().optional(),
+    postal_code: zod.string().optional(),
+    province: zod.string().optional(),
+    company: zod.string().optional(),
+    phone: zod.string().optional(), // TODO: Add validation
+  }),
+})
+
+export const EditLocationForm = ({ location }: EditLocationFormProps) => {
+  const form = useForm<zod.infer<typeof EditLocationSchema>>({
+    defaultValues: {
+      name: location.name,
+      address: {
+        address_1: location.address?.address_1 || "",
+        address_2: location.address?.address_2 || "",
+        city: location.address?.city || "",
+        company: location.address?.company || "",
+        country_code: location.address?.country_code || "",
+        phone: location.address?.phone || "",
+        postal_code: location.address?.postal_code || "",
+        province: location.address?.province || "",
+      },
+    },
+    resolver: zodResolver(EditLocationSchema),
+  })
+
+  const { mutateAsync, isLoading } = useAdminUpdateStockLocation(location.id)
+
+  const { t } = useTranslation()
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    mutateAsync({
+      name: values.name,
+      address: values.address,
+    })
+  })
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <Drawer.Body className="flex flex-col gap-y-10 overflow-y-auto">
+          <div>
+            <Form.Field
+              control={form.control}
+              name="name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.name")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <Form.Field
+              control={form.control}
+              name="address.address_1"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.address")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="address.address_2"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>{t("fields.address2")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="address.postal_code"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>{t("fields.postalCode")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="address.city"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>{t("fields.city")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="address.country_code"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.country")}</Form.Label>
+                    <Form.Control>
+                      <CountrySelect {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="address.province"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>{t("fields.state")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="address.company"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>{t("fields.company")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="address.phone"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label optional>{t("fields.phone")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+          </div>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <Drawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </Drawer.Close>
+            <Button size="small">{t("general.save")}</Button>
+          </div>
+        </Drawer.Footer>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-edit/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-edit/index.ts
new file mode 100644
index 0000000000..516dd003a1
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-edit/index.ts
@@ -0,0 +1 @@
+export { LocationEdit as Component } from "./location-edit"
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-edit/location-edit.tsx b/packages/admin-next/dashboard/src/routes/locations/location-edit/location-edit.tsx
new file mode 100644
index 0000000000..b30df632ce
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-edit/location-edit.tsx
@@ -0,0 +1,47 @@
+import { Drawer, Heading } from "@medusajs/ui"
+import { useAdminStockLocations } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { json, useParams } from "react-router-dom"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { EditLocationForm } from "./components/edit-location-form/edit-location-form"
+
+export const LocationEdit = () => {
+  const [open, onOpenChange] = useRouteModalState()
+  const { id } = useParams()
+
+  const { stock_locations, isLoading, isError, error } = useAdminStockLocations(
+    {
+      id,
+      expand: "address",
+    }
+  )
+
+  const { t } = useTranslation()
+
+  if (isError) {
+    throw error
+  }
+
+  const stock_location = stock_locations?.[0]
+
+  if (!isLoading && !stock_location) {
+    throw json({ message: "Not found" }, 404)
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Heading className="capitalize">
+            {t("locations.editLocation")}
+          </Heading>
+        </Drawer.Header>
+        {isLoading || !stock_location ? (
+          <div>Loading...</div>
+        ) : (
+          <EditLocationForm location={stock_location} />
+        )}
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-list/components/locations-list-table/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-list/components/locations-list-table/index.ts
new file mode 100644
index 0000000000..f1308b3734
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-list/components/locations-list-table/index.ts
@@ -0,0 +1 @@
+export * from "./locations-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-list/components/locations-list-table/locations-list-table.tsx b/packages/admin-next/dashboard/src/routes/locations/location-list/components/locations-list-table/locations-list-table.tsx
new file mode 100644
index 0000000000..795c81ecfd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-list/components/locations-list-table/locations-list-table.tsx
@@ -0,0 +1,278 @@
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
+import { StockLocationExpandedDTO } from "@medusajs/types"
+import {
+  Button,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  Table,
+  clx,
+  usePrompt,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  useAdminDeleteStockLocation,
+  useAdminStockLocations,
+} from "medusa-react"
+import { MouseEvent, useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate, useSearchParams } from "react-router-dom"
+
+import {
+  NoRecords,
+  NoResults,
+} from "../../../../../components/common/empty-table-content/empty-table-content"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+
+const PAGE_SIZE = 50
+
+export const LocationsListTable = () => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { stock_locations, count, isLoading, isError, error } =
+    useAdminStockLocations({
+      limit: PAGE_SIZE,
+      offset: pageIndex * PAGE_SIZE,
+      expand: "address",
+    })
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: stock_locations ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+  })
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    if (error) {
+      throw error
+    }
+  }
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">Locations</Heading>
+        <div>
+          <Link to="create">
+            <Button size="small" variant="secondary">
+              {t("general.create")}
+            </Button>
+          </Link>
+        </div>
+      </div>
+      {(stock_locations?.length ?? 0) > 0 ? (
+        <div>
+          <Table>
+            <Table.Header className="border-t-0">
+              {table.getHeaderGroups().map((headerGroup) => {
+                return (
+                  <Table.Row
+                    key={headerGroup.id}
+                    className="[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap [&_th]:w-1/3"
+                  >
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <Table.HeaderCell key={header.id}>
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                        </Table.HeaderCell>
+                      )
+                    })}
+                  </Table.Row>
+                )
+              })}
+            </Table.Header>
+            <Table.Body className="border-b-0">
+              {table.getRowModel().rows.map((row) => (
+                <Table.Row
+                  key={row.id}
+                  className={clx(
+                    "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                    {
+                      "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                        row.getIsSelected(),
+                    }
+                  )}
+                  onClick={() =>
+                    navigate(`/settings/locations/${row.original.id}`)
+                  }
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <Table.Cell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+          <LocalizedTablePagination
+            canNextPage={table.getCanNextPage()}
+            canPreviousPage={table.getCanPreviousPage()}
+            nextPage={table.nextPage}
+            previousPage={table.previousPage}
+            count={count ?? 0}
+            pageIndex={pageIndex}
+            pageCount={table.getPageCount()}
+            pageSize={PAGE_SIZE}
+          />
+        </div>
+      ) : (
+        <NoLocations />
+      )}
+    </Container>
+  )
+}
+
+const LocationActions = ({
+  location,
+}: {
+  location: StockLocationExpandedDTO
+}) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const { mutateAsync } = useAdminDeleteStockLocation(location.id)
+
+  const handleDelete = async (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("locations.deleteLocationWarning", {
+        name: location.name,
+      }),
+      verificationText: location.name,
+      verificationInstruction: t("general.typeToConfirm"),
+      confirmText: t("general.delete"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync()
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <Link to={`/settings/locations/${location.id}`}>
+          <DropdownMenu.Item onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center gap-x-2">
+              <PencilSquare className="text-ui-fg-subtle" />
+              <span>{t("general.edit")}</span>
+            </div>
+          </DropdownMenu.Item>
+        </Link>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onClick={handleDelete}>
+          <div className="flex items-center gap-x-2">
+            <Trash className="text-ui-fg-subtle" />
+            <span>{t("general.delete")}</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<StockLocationExpandedDTO>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: (cell) => cell.getValue(),
+      }),
+      columnHelper.accessor("address", {
+        header: t("fields.address"),
+        cell: (cell) => {
+          const value = cell.getValue()
+
+          if (!value) {
+            return "-"
+          }
+
+          return `${value.address_1}${value.city ? `, ${value.city}` : ""}`
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => <LocationActions location={row.original} />,
+      }),
+    ],
+    [t]
+  )
+}
+
+const NoLocations = () => {
+  const [params] = useSearchParams()
+  const { t } = useTranslation()
+
+  const noParams = params.toString().length === 0
+
+  if (noParams) {
+    return (
+      <NoRecords
+        action={{
+          label: t("locations.createLocation"),
+          to: "/settings/locations/create",
+        }}
+      />
+    )
+  }
+
+  return <NoResults title={t("locations.noLocationsFound")} />
+}
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-list/index.ts b/packages/admin-next/dashboard/src/routes/locations/location-list/index.ts
new file mode 100644
index 0000000000..883c2ba632
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-list/index.ts
@@ -0,0 +1 @@
+export { LocationList as Component } from "./location-list"
diff --git a/packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx b/packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx
new file mode 100644
index 0000000000..02363aba29
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/location-list/location-list.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom"
+import { LocationsListTable } from "./components/locations-list-table"
+
+export const LocationList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <LocationsListTable />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/login/login.tsx b/packages/admin-next/dashboard/src/routes/login/login.tsx
index e042eccff2..dadf791ba5 100644
--- a/packages/admin-next/dashboard/src/routes/login/login.tsx
+++ b/packages/admin-next/dashboard/src/routes/login/login.tsx
@@ -1,13 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Button, Heading, Input, Text } from "@medusajs/ui"
+import { useAdminGetSession, useAdminLogin } from "medusa-react"
 import { useForm } from "react-hook-form"
-import { Link, useLocation, useNavigate } from "react-router-dom"
+import { Link, Navigate, useLocation, useNavigate } from "react-router-dom"
 import * as z from "zod"
 
 import { Form } from "../../components/common/form"
-import { useAuth } from "../../providers/auth-provider"
+import { isAxiosError } from "../../lib/is-axios-error"
 
-const schema = z.object({
+const LoginSchema = z.object({
   email: z.string().email(),
   password: z.string(),
 })
@@ -15,40 +16,58 @@ const schema = z.object({
 export const Login = () => {
   const navigate = useNavigate()
   const location = useLocation()
-  const { login } = useAuth()
 
   const from = location.state?.from?.pathname || "/"
 
-  const form = useForm<z.infer<typeof schema>>({
-    resolver: zodResolver(schema),
+  const form = useForm<z.infer<typeof LoginSchema>>({
+    resolver: zodResolver(LoginSchema),
     defaultValues: {
       email: "",
       password: "",
     },
   })
 
-  const onSubmit = form.handleSubmit(async ({ email, password }) => {
-    await login(email, password)
-      .then(() => {
-        navigate(from)
-      })
-      .catch((e) => {
-        switch (e?.response?.status) {
-          case 401:
-            form.setError("password", {
-              type: "manual",
-              message: "Invalid email or password",
-            })
-            break
-          default:
-            form.setError("password", {
-              type: "manual",
-              message: "Something went wrong",
-            })
-        }
-      })
+  const { user, isLoading } = useAdminGetSession()
+
+  const { mutateAsync } = useAdminLogin({
+    retry: false,
   })
 
+  const onSubmit = form.handleSubmit(async ({ email, password }) => {
+    await mutateAsync(
+      {
+        email,
+        password,
+      },
+      {
+        onSuccess: () => {
+          navigate(from, { replace: true })
+        },
+        onError: (e) => {
+          if (isAxiosError(e)) {
+            if (e.response?.status === 401) {
+              form.setError("password", {
+                type: "manual",
+                message: "Invalid email or password",
+              })
+
+              return
+            }
+          }
+
+          form.setError("password", {
+            type: "manual",
+            message: "Something went wrong",
+          })
+        },
+      }
+    )
+  })
+
+  if (user && !isLoading) {
+    return <Navigate to={from} replace />
+  }
+
   return (
     <div className="flex flex-col gap-y-12">
       <div className="flex flex-col items-center">
@@ -79,7 +98,7 @@ export const Login = () => {
                   <Form.Label>Password</Form.Label>
                   <Link
                     to={"/forgot-password"}
-                    className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover focus:text-ui-fg-interactive-hover transition-fg outline-none"
+                    className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover focus-visible:text-ui-fg-interactive-hover transition-fg outline-none"
                   >
                     <Text leading="compact">Forgot password?</Text>
                   </Link>
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-attribute-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-attribute-section/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-attribute-section/index.ts
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-attribute-section/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-attribute-section/product-attribute-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-attribute-section/product-attribute-section.tsx
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-attribute-section/product-attribute-section.tsx
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-attribute-section/product-attribute-section.tsx
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-general-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-general-section/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-general-section/index.ts
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-general-section/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-general-section/product-general-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-general-section/product-general-section.tsx
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-general-section/product-general-section.tsx
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-general-section/product-general-section.tsx
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-media-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-media-section/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-media-section/index.ts
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-media-section/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-media-section/product-media-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-media-section/product-media-section.tsx
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-media-section/product-media-section.tsx
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-media-section/product-media-section.tsx
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-option-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-option-section/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-option-section/index.ts
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-option-section/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-option-section/product-option-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-option-section/product-option-section.tsx
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-option-section/product-option-section.tsx
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-option-section/product-option-section.tsx
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-sales-channel-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-sales-channel-section/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-sales-channel-section/index.ts
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-sales-channel-section/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-sales-channel-section/product-sales-channel-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-sales-channel-section/product-sales-channel-section.tsx
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-sales-channel-section/product-sales-channel-section.tsx
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-sales-channel-section/product-sales-channel-section.tsx
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-thumbnail-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-thumbnail-section/index.ts
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-thumbnail-section/product-thumbnail-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/product-thumbnail-section.tsx
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-thumbnail-section/product-thumbnail-section.tsx
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-thumbnail-section/product-thumbnail-section.tsx
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-variant-section/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-variant-section/index.ts
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-variant-section/product-variant-section.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/products/components/product-variant-section/product-variant-section.tsx
rename to packages/admin-next/dashboard/src/routes/products/product-detail/components/product-variant-section/product-variant-section.tsx
diff --git a/packages/admin-next/dashboard/src/routes/products/product-detail/index.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/index.ts
new file mode 100644
index 0000000000..afc54745c9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/index.ts
@@ -0,0 +1,2 @@
+export { productLoader as loader } from "./loader"
+export { ProductDetail as Component } from "./product-detail"
diff --git a/packages/admin-next/dashboard/src/routes/products/views/product-details/loader.ts b/packages/admin-next/dashboard/src/routes/products/product-detail/loader.ts
similarity index 91%
rename from packages/admin-next/dashboard/src/routes/products/views/product-details/loader.ts
rename to packages/admin-next/dashboard/src/routes/products/product-detail/loader.ts
index 0f27a0d25f..7f5fad255e 100644
--- a/packages/admin-next/dashboard/src/routes/products/views/product-details/loader.ts
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/loader.ts
@@ -3,7 +3,7 @@ import { Response } from "@medusajs/medusa-js"
 import { adminProductKeys } from "medusa-react"
 import { LoaderFunctionArgs } from "react-router-dom"
 
-import { medusa, queryClient } from "../../../../lib/medusa"
+import { medusa, queryClient } from "../../../lib/medusa"
 
 const productDetailQuery = (id: string) => ({
   queryKey: adminProductKeys.detail(id),
diff --git a/packages/admin-next/dashboard/src/routes/products/views/product-details/details.tsx b/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
similarity index 66%
rename from packages/admin-next/dashboard/src/routes/products/views/product-details/details.tsx
rename to packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
index 5139d932ae..7f0f42009b 100644
--- a/packages/admin-next/dashboard/src/routes/products/views/product-details/details.tsx
+++ b/packages/admin-next/dashboard/src/routes/products/product-detail/product-detail.tsx
@@ -1,43 +1,43 @@
-import { useAdminProduct } from "medusa-react";
-import { useLoaderData, useParams } from "react-router-dom";
+import { useAdminProduct } from "medusa-react"
+import { useLoaderData, useParams } from "react-router-dom"
 
-import { JsonView } from "../../../../components/common/json-view";
-import { ProductAttributeSection } from "../../components/product-attribute-section";
-import { ProductGeneralSection } from "../../components/product-general-section";
-import { ProductMediaSection } from "../../components/product-media-section";
-import { ProductOptionSection } from "../../components/product-option-section";
-import { ProductSalesChannelSection } from "../../components/product-sales-channel-section";
-import { ProductThumbnailSection } from "../../components/product-thumbnail-section";
-import { ProductVariantSection } from "../../components/product-variant-section";
-import { productLoader } from "./loader";
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { ProductAttributeSection } from "./components/product-attribute-section"
+import { ProductGeneralSection } from "./components/product-general-section"
+import { ProductMediaSection } from "./components/product-media-section"
+import { ProductOptionSection } from "./components/product-option-section"
+import { ProductSalesChannelSection } from "./components/product-sales-channel-section"
+import { ProductThumbnailSection } from "./components/product-thumbnail-section"
+import { ProductVariantSection } from "./components/product-variant-section"
+import { productLoader } from "./loader"
 
-import after from "medusa-admin:widgets/product/details/after";
-import before from "medusa-admin:widgets/product/details/before";
-import sideAfter from "medusa-admin:widgets/product/details/side/after";
-import sideBefore from "medusa-admin:widgets/product/details/side/before";
+import after from "medusa-admin:widgets/product/details/after"
+import before from "medusa-admin:widgets/product/details/before"
+import sideAfter from "medusa-admin:widgets/product/details/side/after"
+import sideBefore from "medusa-admin:widgets/product/details/side/before"
 
-export const ProductDetails = () => {
+export const ProductDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof productLoader>
-  >;
+  >
 
-  const { id } = useParams();
+  const { id } = useParams()
   const { product, isLoading, isError, error } = useAdminProduct(
     id!,
     undefined,
     {
       initialData: initialData,
     }
-  );
+  )
 
   // TODO: Move to loading.tsx and set as Suspense fallback for the route
   if (isLoading) {
-    return <div>Loading</div>;
+    return <div>Loading</div>
   }
 
   // TODO: Move to error.tsx and set as ErrorBoundary for the route
   if (isError || !product) {
-    const err = error ? JSON.parse(JSON.stringify(error)) : null;
+    const err = error ? JSON.parse(JSON.stringify(error)) : null
     return (
       <div>
         {(err as Error & { status: number })?.status === 404 ? (
@@ -46,7 +46,7 @@ export const ProductDetails = () => {
           <div>Something went wrong!</div>
         )}
       </div>
-    );
+    )
   }
 
   return (
@@ -56,9 +56,9 @@ export const ProductDetails = () => {
           <div key={i}>
             <w.Component />
           </div>
-        );
+        )
       })}
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr,400px] gap-x-4">
+      <div className="grid grid-cols-1 gap-x-4 lg:grid-cols-[1fr,400px]">
         <div className="flex flex-col gap-y-2">
           <ProductGeneralSection product={product} />
           <ProductSalesChannelSection product={product} />
@@ -71,7 +71,7 @@ export const ProductDetails = () => {
                 <div key={i}>
                   <w.Component />
                 </div>
-              );
+              )
             })}
             <ProductThumbnailSection product={product} />
             <ProductMediaSection product={product} />
@@ -80,7 +80,7 @@ export const ProductDetails = () => {
                 <div key={i}>
                   <w.Component />
                 </div>
-              );
+              )
             })}
           </div>
           {after.widgets.map((w, i) => {
@@ -88,17 +88,17 @@ export const ProductDetails = () => {
               <div key={i}>
                 <w.Component />
               </div>
-            );
+            )
           })}
-          <JsonView data={product} root="product" />
+          <JsonViewSection data={product} root="product" />
         </div>
-        <div className="lg:flex flex-col gap-y-2 hidden">
+        <div className="hidden flex-col gap-y-2 lg:flex">
           {sideBefore.widgets.map((w, i) => {
             return (
               <div key={i}>
                 <w.Component />
               </div>
-            );
+            )
           })}
           <ProductThumbnailSection product={product} />
           <ProductMediaSection product={product} />
@@ -107,10 +107,10 @@ export const ProductDetails = () => {
               <div key={i}>
                 <w.Component />
               </div>
-            );
+            )
           })}
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/index.ts b/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/index.ts
new file mode 100644
index 0000000000..ee665245d3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/index.ts
@@ -0,0 +1 @@
+export * from "./product-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx b/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
new file mode 100644
index 0000000000..0114f4ffe9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-list/components/product-list-table/product-list-table.tsx
@@ -0,0 +1,284 @@
+import { EllipsisHorizontal, Trash } from "@medusajs/icons"
+import type { Product } from "@medusajs/medusa"
+import {
+  Button,
+  Checkbox,
+  CommandBar,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  Table,
+  clx,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminDeleteProduct, useAdminProducts } from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useLoaderData, useNavigate } from "react-router-dom"
+
+import {
+  ProductAvailabilityCell,
+  ProductCollectionCell,
+  ProductStatusCell,
+  ProductTitleCell,
+  ProductVariantCell,
+} from "../../../../../components/common/product-table-cells"
+
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+import { productsLoader } from "../../loader"
+
+const PAGE_SIZE = 50
+
+export const ProductListTable = () => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<ReturnType<typeof productsLoader>>
+  >
+
+  const { products, count } = useAdminProducts(
+    {
+      limit: PAGE_SIZE,
+      offset: pageIndex * PAGE_SIZE,
+    },
+    {
+      initialData,
+    }
+  )
+
+  const columns = useColumns()
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const table = useReactTable({
+    data: (products ?? []) as Product[],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  return (
+    <Container className="overflow-hidden p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("products.domain")}</Heading>
+        <Button size="small" variant="secondary">
+          {t("general.create")}
+        </Button>
+      </div>
+      <div>
+        <Table>
+          <Table.Header>
+            {table.getHeaderGroups().map((headerGroup) => {
+              return (
+                <Table.Row
+                  key={headerGroup.id}
+                  className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap"
+                >
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <Table.HeaderCell key={header.id}>
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      </Table.HeaderCell>
+                    )
+                  })}
+                </Table.Row>
+              )
+            })}
+          </Table.Header>
+          <Table.Body className="border-b-0">
+            {table.getRowModel().rows.map((row) => (
+              <Table.Row
+                key={row.id}
+                className={clx(
+                  "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                  {
+                    "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                      row.getIsSelected(),
+                  }
+                )}
+                onClick={() => navigate(`/products/${row.original.id}`)}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <Table.Cell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+        <LocalizedTablePagination
+          canNextPage={table.getCanNextPage()}
+          canPreviousPage={table.getCanPreviousPage()}
+          nextPage={table.nextPage}
+          previousPage={table.previousPage}
+          count={count ?? 0}
+          pageIndex={pageIndex}
+          pageCount={table.getPageCount()}
+          pageSize={PAGE_SIZE}
+        />
+      </div>
+      <CommandBar open={!!Object.keys(rowSelection).length}>
+        <CommandBar.Bar>
+          <CommandBar.Value>
+            {t("general.countSelected", {
+              count: Object.keys(rowSelection).length,
+            })}
+          </CommandBar.Value>
+          <CommandBar.Seperator />
+          <CommandBar.Command
+            action={() => {
+              console.log("Delete")
+            }}
+            shortcut="d"
+            label={t("general.delete")}
+          />
+        </CommandBar.Bar>
+      </CommandBar>
+    </Container>
+  )
+}
+
+const ProductActions = ({ id }: { id: string }) => {
+  const { mutateAsync } = useAdminDeleteProduct(id)
+
+  const handleDelete = async () => {
+    await mutateAsync()
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small" variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onClick={handleDelete}>
+          <div className="flex items-center gap-x-2">
+            <Trash className="text-ui-fg-subtle" />
+            <span>Delete</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<Product>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  const columns = useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ row }) => {
+          return <ProductTitleCell product={row.original} />
+        },
+      }),
+      columnHelper.accessor("collection", {
+        header: t("fields.collection"),
+        cell: (cell) => {
+          const collection = cell.getValue()
+
+          return <ProductCollectionCell collection={collection} />
+        },
+      }),
+      columnHelper.accessor("sales_channels", {
+        header: t("fields.availability"),
+        cell: (cell) => {
+          const salesChannels = cell.getValue()
+
+          return <ProductAvailabilityCell salesChannels={salesChannels ?? []} />
+        },
+      }),
+      columnHelper.accessor("variants", {
+        header: t("fields.inventory"),
+        cell: (cell) => {
+          const variants = cell.getValue()
+
+          return <ProductVariantCell variants={variants} />
+        },
+      }),
+      columnHelper.accessor("status", {
+        header: t("fields.status"),
+        cell: (cell) => {
+          const value = cell.getValue()
+
+          return <ProductStatusCell status={value} />
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <ProductActions id={row.original.id} />
+        },
+      }),
+    ],
+    [t]
+  )
+
+  return columns
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-list/index.ts b/packages/admin-next/dashboard/src/routes/products/product-list/index.ts
new file mode 100644
index 0000000000..085cd656a4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-list/index.ts
@@ -0,0 +1,2 @@
+export { productsLoader as productLoader } from "./loader"
+export { ProductList as Component } from "./product-list"
diff --git a/packages/admin-next/dashboard/src/routes/products/views/product-list/loader.ts b/packages/admin-next/dashboard/src/routes/products/product-list/loader.ts
similarity index 55%
rename from packages/admin-next/dashboard/src/routes/products/views/product-list/loader.ts
rename to packages/admin-next/dashboard/src/routes/products/product-list/loader.ts
index 2828984d46..9ad18e2dc5 100644
--- a/packages/admin-next/dashboard/src/routes/products/views/product-list/loader.ts
+++ b/packages/admin-next/dashboard/src/routes/products/product-list/loader.ts
@@ -1,23 +1,23 @@
-import { AdminProductsListRes } from "@medusajs/medusa";
-import { Response } from "@medusajs/medusa-js";
-import { QueryClient } from "@tanstack/react-query";
-import { adminProductKeys } from "medusa-react";
+import { AdminProductsListRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { QueryClient } from "@tanstack/react-query"
+import { adminProductKeys } from "medusa-react"
 
-import { medusa, queryClient } from "../../../../lib/medusa";
+import { medusa, queryClient } from "../../../lib/medusa"
 
 const productsListQuery = () => ({
   queryKey: adminProductKeys.list({ limit: 20, offset: 0 }),
   queryFn: async () => medusa.admin.products.list({ limit: 20, offset: 0 }),
-});
+})
 
 export const productsLoader = (client: QueryClient) => {
   return async () => {
-    const query = productsListQuery();
+    const query = productsListQuery()
 
     return (
       queryClient.getQueryData<Response<AdminProductsListRes>>(
         query.queryKey
       ) ?? (await client.fetchQuery(query))
-    );
-  };
-};
+    )
+  }
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/product-list/product-list.tsx b/packages/admin-next/dashboard/src/routes/products/product-list/product-list.tsx
new file mode 100644
index 0000000000..11513802c8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/product-list/product-list.tsx
@@ -0,0 +1,18 @@
+import after from "medusa-admin:widgets/product/list/after"
+import before from "medusa-admin:widgets/product/list/before"
+
+import { ProductListTable } from "./components/product-list-table"
+
+export const ProductList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => (
+        <w.Component key={i} />
+      ))}
+      <ProductListTable />
+      {after.widgets.map((w, i) => (
+        <w.Component key={i} />
+      ))}
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/products/views/product-details/index.ts b/packages/admin-next/dashboard/src/routes/products/views/product-details/index.ts
deleted file mode 100644
index a1671c01de..0000000000
--- a/packages/admin-next/dashboard/src/routes/products/views/product-details/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ProductDetails as Component } from "./details";
-export { productLoader as loader } from "./loader";
diff --git a/packages/admin-next/dashboard/src/routes/products/views/product-list/index.ts b/packages/admin-next/dashboard/src/routes/products/views/product-list/index.ts
deleted file mode 100644
index bad072e574..0000000000
--- a/packages/admin-next/dashboard/src/routes/products/views/product-list/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ProductList as Component } from "./list";
-export { productsLoader as productLoader } from "./loader";
diff --git a/packages/admin-next/dashboard/src/routes/products/views/product-list/list.tsx b/packages/admin-next/dashboard/src/routes/products/views/product-list/list.tsx
deleted file mode 100644
index bf546c833b..0000000000
--- a/packages/admin-next/dashboard/src/routes/products/views/product-list/list.tsx
+++ /dev/null
@@ -1,277 +0,0 @@
-import type { Product } from "@medusajs/medusa"
-import {
-  Checkbox,
-  CommandBar,
-  Container,
-  DropdownMenu,
-  Heading,
-  IconButton,
-  Table,
-  Text,
-  clx,
-} from "@medusajs/ui"
-import {
-  PaginationState,
-  RowSelectionState,
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-import { useAdminDeleteProduct, useAdminProducts } from "medusa-react"
-import { useMemo, useState } from "react"
-import { useLoaderData, useNavigate } from "react-router-dom"
-
-import { Thumbnail } from "../../../../components/common/thumbnail"
-import { productsLoader } from "./loader"
-
-import { EllipsisVertical, Trash } from "@medusajs/icons"
-import after from "medusa-admin:widgets/product/list/after"
-import before from "medusa-admin:widgets/product/list/before"
-import { useTranslation } from "react-i18next"
-
-const PAGE_SIZE = 50
-
-export const ProductList = () => {
-  const navigate = useNavigate()
-  const { t } = useTranslation()
-
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: PAGE_SIZE,
-  })
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
-  const initialData = useLoaderData() as Awaited<
-    ReturnType<ReturnType<typeof productsLoader>>
-  >
-
-  const { products, count } = useAdminProducts(
-    {
-      limit: PAGE_SIZE,
-      offset: pageIndex * PAGE_SIZE,
-    },
-    {
-      initialData,
-    }
-  )
-
-  const columns = useColumns()
-
-  const pagination = useMemo(
-    () => ({
-      pageIndex,
-      pageSize,
-    }),
-    [pageIndex, pageSize]
-  )
-
-  const table = useReactTable({
-    data: (products ?? []) as Product[],
-    columns,
-    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
-    state: {
-      pagination,
-      rowSelection,
-    },
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-  })
-
-  return (
-    <div className="flex flex-col gap-y-2">
-      {before.widgets.map((w, i) => (
-        <w.Component key={i} />
-      ))}
-      <Container className="overflow-hidden p-0">
-        <div className="px-8 pb-4 pt-6">
-          <Heading>{t("products.domain")}</Heading>
-        </div>
-        <div>
-          <Table>
-            <Table.Header>
-              {table.getHeaderGroups().map((headerGroup) => {
-                return (
-                  <Table.Row
-                    key={headerGroup.id}
-                    className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap [&_th]:w-1/3"
-                  >
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <Table.HeaderCell key={header.id}>
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                        </Table.HeaderCell>
-                      )
-                    })}
-                  </Table.Row>
-                )
-              })}
-            </Table.Header>
-            <Table.Body className="border-b-0">
-              {table.getRowModel().rows.map((row) => (
-                <Table.Row
-                  key={row.id}
-                  className={clx(
-                    "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
-                    {
-                      "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
-                        row.getIsSelected(),
-                    }
-                  )}
-                  onClick={() => navigate(`/products/${row.original.id}`)}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <Table.Cell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </Table.Cell>
-                  ))}
-                </Table.Row>
-              ))}
-            </Table.Body>
-          </Table>
-          <Table.Pagination
-            canNextPage={table.getCanNextPage()}
-            canPreviousPage={table.getCanPreviousPage()}
-            nextPage={table.nextPage}
-            previousPage={table.previousPage}
-            count={count ?? 0}
-            pageIndex={pageIndex}
-            pageCount={table.getPageCount()}
-            pageSize={PAGE_SIZE}
-          />
-        </div>
-        <CommandBar open={!!Object.keys(rowSelection).length}>
-          <CommandBar.Bar>
-            <CommandBar.Value>
-              {t("general.countSelected", {
-                count: Object.keys(rowSelection).length,
-              })}
-            </CommandBar.Value>
-            <CommandBar.Seperator />
-            <CommandBar.Command
-              action={() => {
-                console.log("Delete")
-              }}
-              shortcut="d"
-              label={t("general.delete")}
-            />
-          </CommandBar.Bar>
-        </CommandBar>
-      </Container>
-      {after.widgets.map((w, i) => (
-        <w.Component key={i} />
-      ))}
-    </div>
-  )
-}
-
-const ProductActions = ({ id }: { id: string }) => {
-  const { mutateAsync } = useAdminDeleteProduct(id)
-
-  const handleDelete = async () => {
-    await mutateAsync()
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenu.Trigger>
-        <IconButton variant="transparent">
-          <EllipsisVertical />
-        </IconButton>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item onClick={handleDelete}>
-          <div className="flex items-center gap-x-2">
-            <Trash />
-            <span>Delete</span>
-          </div>
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu>
-  )
-}
-
-const columnHelper = createColumnHelper<Product>()
-
-const useColumns = () => {
-  const { t } = useTranslation()
-
-  const columns = useMemo(
-    () => [
-      columnHelper.display({
-        id: "select",
-        header: ({ table }) => {
-          return (
-            <Checkbox
-              checked={
-                table.getIsSomePageRowsSelected()
-                  ? "indeterminate"
-                  : table.getIsAllPageRowsSelected()
-              }
-              onCheckedChange={(value) =>
-                table.toggleAllPageRowsSelected(!!value)
-              }
-            />
-          )
-        },
-        cell: ({ row }) => {
-          return (
-            <Checkbox
-              checked={row.getIsSelected()}
-              onCheckedChange={(value) => row.toggleSelected(!!value)}
-              onClick={(e) => {
-                e.stopPropagation()
-              }}
-            />
-          )
-        },
-      }),
-      columnHelper.accessor("title", {
-        header: t("fields.title"),
-        cell: (cell) => {
-          const title = cell.getValue()
-          const thumbnail = cell.row.original.thumbnail
-
-          return (
-            <div className="flex items-center gap-x-3">
-              <Thumbnail src={thumbnail} alt={`Thumbnail image of ${title}`} />
-              <Text size="small" className="text-ui-fg-base">
-                {title}
-              </Text>
-            </div>
-          )
-        },
-      }),
-      columnHelper.accessor("variants", {
-        header: t("products.variants"),
-        cell: (cell) => {
-          const variants = cell.getValue()
-
-          return (
-            <Text size="small" className="text-ui-fg-base">
-              {variants.length}
-            </Text>
-          )
-        },
-      }),
-      columnHelper.display({
-        id: "actions",
-        cell: ({ row }) => {
-          return <ProductActions id={row.original.id} />
-        },
-      }),
-    ],
-    [t]
-  )
-
-  return columns
-}
diff --git a/packages/admin-next/dashboard/src/routes/profile/components/edit-profile-details-drawer/edit-profile-details-drawer.tsx b/packages/admin-next/dashboard/src/routes/profile/components/edit-profile-details-drawer/edit-profile-details-drawer.tsx
deleted file mode 100644
index 27b4d5684c..0000000000
--- a/packages/admin-next/dashboard/src/routes/profile/components/edit-profile-details-drawer/edit-profile-details-drawer.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Button, Drawer, Heading, Input, Select, Switch } from "@medusajs/ui"
-import { adminAuthKeys, useAdminUpdateUser } from "medusa-react"
-import { useState } from "react"
-import { useForm } from "react-hook-form"
-import { Trans, useTranslation } from "react-i18next"
-import * as zod from "zod"
-import { Form } from "../../../../components/common/form"
-import { languages } from "../../../../i18n/config"
-import { queryClient } from "../../../../lib/medusa"
-
-const EditProfileDetailsSchema = zod.object({
-  first_name: zod.string().optional(),
-  last_name: zod.string().optional(),
-  language: zod.string(),
-  user_insights: zod.boolean(),
-})
-
-type EditProfileDetailsDrawerProps = {
-  id: string
-  firstName?: string
-  lastName?: string
-  userInsights?: boolean
-}
-
-export const EditProfileDetailsDrawer = ({
-  id,
-  firstName = "",
-  lastName = "",
-  userInsights = false,
-}: EditProfileDetailsDrawerProps) => {
-  const [open, setOpen] = useState(false)
-  const [selectOpen, setSelectOpen] = useState(false)
-  const { mutateAsync, isLoading } = useAdminUpdateUser(id)
-
-  const { i18n } = useTranslation()
-
-  const changeLanguage = (code: string) => {
-    i18n.changeLanguage(code)
-  }
-
-  const sortedLanguages = languages.sort((a, b) =>
-    a.display_name.localeCompare(b.display_name)
-  )
-
-  const form = useForm<zod.infer<typeof EditProfileDetailsSchema>>({
-    defaultValues: {
-      first_name: firstName,
-      last_name: lastName,
-      language: i18n.language,
-      user_insights: userInsights,
-    },
-    resolver: zodResolver(EditProfileDetailsSchema),
-  })
-
-  const { t } = useTranslation()
-
-  const onOpenChange = (open: boolean) => {
-    if (!open) {
-      form.reset()
-
-      /**
-       * If the select is open while closing the drawer, we need to close it as well.
-       * Otherwise it will cause "pointer-events: none" to stay applied to the body,
-       * making the page unresponsive.
-       */
-      setSelectOpen(false)
-    }
-
-    setOpen(open)
-  }
-
-  const onSubmit = form.handleSubmit(async (values) => {
-    await mutateAsync(
-      {
-        first_name: values.first_name,
-        last_name: values.last_name,
-      },
-      {
-        onSuccess: ({ user }) => {
-          form.reset({
-            first_name: user.first_name,
-            last_name: user.last_name,
-          })
-
-          // Invalidate the current user session.
-          queryClient.invalidateQueries(adminAuthKeys.details())
-        },
-        onError: (error) => {
-          console.log(error)
-          return
-        },
-      }
-    )
-
-    changeLanguage(values.language)
-
-    onOpenChange(false)
-  })
-
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
-      <Drawer.Trigger asChild>
-        <Button variant="secondary">{t("profile.editProfileDetails")}</Button>
-      </Drawer.Trigger>
-      <Drawer.Content>
-        <Drawer.Header>
-          <Heading>{t("profile.editProfileDetails")}</Heading>
-        </Drawer.Header>
-        <Drawer.Body>
-          <Form {...form}>
-            <div className="flex flex-col gap-y-8">
-              <div className="grid grid-cols-2 gap-4">
-                <Form.Field
-                  control={form.control}
-                  name="first_name"
-                  render={({ field }) => (
-                    <Form.Item>
-                      <Form.Label>{t("fields.firstName")}</Form.Label>
-                      <Form.Control>
-                        <Input {...field} size="small" />
-                      </Form.Control>
-                      <Form.ErrorMessage />
-                    </Form.Item>
-                  )}
-                />
-                <Form.Field
-                  control={form.control}
-                  name="last_name"
-                  render={({ field }) => (
-                    <Form.Item>
-                      <Form.Label>{t("fields.lastName")}</Form.Label>
-                      <Form.Control>
-                        <Input {...field} size="small" />
-                      </Form.Control>
-                      <Form.ErrorMessage />
-                    </Form.Item>
-                  )}
-                />
-              </div>
-              <Form.Field
-                control={form.control}
-                name="language"
-                render={({ field: { ref, ...field } }) => (
-                  <Form.Item className="gap-y-4">
-                    <div>
-                      <Form.Label>Language</Form.Label>
-                      <Form.Hint>{t("profile.languageHint")}</Form.Hint>
-                    </div>
-                    <div>
-                      <Form.Control>
-                        <Select
-                          {...field}
-                          open={selectOpen}
-                          onOpenChange={setSelectOpen}
-                          value={field.value}
-                          onValueChange={field.onChange}
-                          size="small"
-                        >
-                          <Select.Trigger ref={ref}>
-                            <Select.Value placeholder="Choose language">
-                              {
-                                sortedLanguages.find(
-                                  (language) => language.code === field.value
-                                )?.display_name
-                              }
-                            </Select.Value>
-                          </Select.Trigger>
-                          <Select.Content>
-                            {languages.map((language) => (
-                              <Select.Item
-                                key={language.code}
-                                value={language.code}
-                              >
-                                {language.display_name}
-                              </Select.Item>
-                            ))}
-                          </Select.Content>
-                        </Select>
-                      </Form.Control>
-                      <Form.ErrorMessage />
-                    </div>
-                  </Form.Item>
-                )}
-              />
-              <Form.Field
-                control={form.control}
-                name="user_insights"
-                render={({ field: { value, onChange, ...rest } }) => (
-                  <Form.Item>
-                    <div className="flex items-center justify-between">
-                      <Form.Label>User Insights</Form.Label>
-                      <Form.Control>
-                        <Switch
-                          {...rest}
-                          checked={value}
-                          onCheckedChange={onChange}
-                        />
-                      </Form.Control>
-                    </div>
-                    <Form.Hint>
-                      <span>
-                        <Trans
-                          i18nKey="profile.userInsightsHint"
-                          components={[
-                            <a
-                              className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg underline"
-                              href="https://docs.medusajs.com/usage#admin-analytics"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            />,
-                          ]}
-                        />
-                      </span>
-                    </Form.Hint>
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )}
-              />
-            </div>
-          </Form>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <div className="flex items-center justify-end gap-x-2">
-            <Drawer.Close asChild>
-              <Button variant="secondary">{t("general.cancel")}</Button>
-            </Drawer.Close>
-            <Button onClick={onSubmit} isLoading={isLoading}>
-              {t("general.save")}
-            </Button>
-          </div>
-        </Drawer.Footer>
-      </Drawer.Content>
-    </Drawer>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/profile/profile-detail/components/profile-general-section/index.ts b/packages/admin-next/dashboard/src/routes/profile/profile-detail/components/profile-general-section/index.ts
new file mode 100644
index 0000000000..948c77df96
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/profile-detail/components/profile-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./profile-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/profile/profile-detail/components/profile-general-section/profile-general-section.tsx b/packages/admin-next/dashboard/src/routes/profile/profile-detail/components/profile-general-section/profile-general-section.tsx
new file mode 100644
index 0000000000..49ef382d96
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/profile-detail/components/profile-general-section/profile-general-section.tsx
@@ -0,0 +1,63 @@
+import { User } from "@medusajs/medusa"
+import { Button, Container, Heading, StatusBadge, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import { languages } from "../../../../../i18n/config"
+
+type ProfileGeneralSectionProps = {
+  user: Omit<User, "password_hash">
+}
+
+export const ProfileGeneralSection = ({ user }: ProfileGeneralSectionProps) => {
+  const { i18n, t } = useTranslation()
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div>
+          <Heading>{t("profile.domain")}</Heading>
+          <Text className="text-ui-fg-subtle" size="small">
+            {t("profile.manageYourProfileDetails")}
+          </Text>
+        </div>
+        <Link to="/settings/profile/edit">
+          <Button size="small" variant="secondary">
+            {t("general.edit")}
+          </Button>
+        </Link>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4 items-center">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.name")}
+        </Text>
+        <Text size="small" leading="compact">
+          {user.first_name} {user.last_name}
+        </Text>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4 items-center">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.email")}
+        </Text>
+        <Text size="small" leading="compact">
+          {user.email}
+        </Text>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4 items-center">
+        <Text size="small" leading="compact" weight="plus">
+          {t("profile.language")}
+        </Text>
+        <Text size="small" leading="compact">
+          {languages.find((lang) => lang.code === i18n.language)
+            ?.display_name || "-"}
+        </Text>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4 items-center">
+        <Text size="small" leading="compact" weight="plus">
+          {t("profile.usageInsights")}
+        </Text>
+        <StatusBadge color="red" className="w-fit">
+          {t("general.disabled")}
+        </StatusBadge>
+      </div>
+    </Container>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/profile/profile-detail/index.ts b/packages/admin-next/dashboard/src/routes/profile/profile-detail/index.ts
new file mode 100644
index 0000000000..9d981a433d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/profile-detail/index.ts
@@ -0,0 +1 @@
+export { ProfileDetail as Component } from "./profile-detail"
diff --git a/packages/admin-next/dashboard/src/routes/profile/profile-detail/profile-detail.tsx b/packages/admin-next/dashboard/src/routes/profile/profile-detail/profile-detail.tsx
new file mode 100644
index 0000000000..c69975be28
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/profile-detail/profile-detail.tsx
@@ -0,0 +1,26 @@
+import { useAdminGetSession } from "medusa-react"
+import { Outlet, json } from "react-router-dom"
+import { ProfileGeneralSection } from "./components/profile-general-section"
+
+export const ProfileDetail = () => {
+  const { user, isLoading, isError, error } = useAdminGetSession()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError || !user) {
+    if (error) {
+      throw error
+    }
+
+    throw json("An unknown error has occured", 500)
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <ProfileGeneralSection user={user} />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/profile/profile-edit/components/edit-profile-form/edit-profile-form.tsx b/packages/admin-next/dashboard/src/routes/profile/profile-edit/components/edit-profile-form/edit-profile-form.tsx
new file mode 100644
index 0000000000..7c616718aa
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/profile-edit/components/edit-profile-form/edit-profile-form.tsx
@@ -0,0 +1,208 @@
+import { User } from "@medusajs/medusa"
+import * as zod from "zod"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Drawer, Input, Select, Switch } from "@medusajs/ui"
+import { adminAuthKeys, useAdminUpdateUser } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { Trans, useTranslation } from "react-i18next"
+import { Form } from "../../../../../components/common/form"
+import { languages } from "../../../../../i18n/config"
+import { queryClient } from "../../../../../lib/medusa"
+
+type EditProfileProps = {
+  user: Omit<User, "password_hash">
+  usageInsights: boolean
+  onSuccess: () => void
+}
+
+const EditProfileSchema = zod.object({
+  first_name: zod.string().optional(),
+  last_name: zod.string().optional(),
+  language: zod.string(),
+  usage_insights: zod.boolean(),
+})
+
+export const EditProfileForm = ({
+  user,
+  usageInsights,
+  onSuccess,
+}: EditProfileProps) => {
+  const { t, i18n } = useTranslation()
+  const { mutateAsync, isLoading } = useAdminUpdateUser(user.id)
+
+  const form = useForm<zod.infer<typeof EditProfileSchema>>({
+    defaultValues: {
+      first_name: user.first_name ?? "",
+      last_name: user.last_name ?? "",
+      language: i18n.language,
+      usage_insights: usageInsights,
+    },
+    resolver: zodResolver(EditProfileSchema),
+  })
+
+  const changeLanguage = (code: string) => {
+    i18n.changeLanguage(code)
+  }
+
+  const sortedLanguages = languages.sort((a, b) =>
+    a.display_name.localeCompare(b.display_name)
+  )
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      {
+        first_name: values.first_name,
+        last_name: values.last_name,
+      },
+      {
+        onSuccess: ({ user }) => {
+          form.reset({
+            first_name: user.first_name,
+            last_name: user.last_name,
+          })
+
+          // Invalidate the current user session.
+          queryClient.invalidateQueries(adminAuthKeys.details())
+        },
+        onError: () => {
+          return
+        },
+      }
+    )
+
+    changeLanguage(values.language)
+
+    onSuccess()
+  })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex flex-1 flex-col">
+        <Drawer.Body>
+          <div className="flex flex-col gap-y-8">
+            <div className="grid grid-cols-2 gap-4">
+              <Form.Field
+                control={form.control}
+                name="first_name"
+                render={({ field }) => (
+                  <Form.Item>
+                    <Form.Label>{t("fields.firstName")}</Form.Label>
+                    <Form.Control>
+                      <Input {...field} size="small" />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )}
+              />
+              <Form.Field
+                control={form.control}
+                name="last_name"
+                render={({ field }) => (
+                  <Form.Item>
+                    <Form.Label>{t("fields.lastName")}</Form.Label>
+                    <Form.Control>
+                      <Input {...field} size="small" />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )}
+              />
+            </div>
+            <Form.Field
+              control={form.control}
+              name="language"
+              render={({ field: { ref, ...field } }) => (
+                <Form.Item className="gap-y-4">
+                  <div>
+                    <Form.Label>{t("profile.language")}</Form.Label>
+                    <Form.Hint>{t("profile.languageHint")}</Form.Hint>
+                  </div>
+                  <div>
+                    <Form.Control>
+                      <Select
+                        {...field}
+                        // open={selectOpen}
+                        // onOpenChange={setSelectOpen}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                        size="small"
+                      >
+                        <Select.Trigger ref={ref} className="py-1 text-[13px]">
+                          <Select.Value placeholder="Choose language">
+                            {
+                              sortedLanguages.find(
+                                (language) => language.code === field.value
+                              )?.display_name
+                            }
+                          </Select.Value>
+                        </Select.Trigger>
+                        <Select.Content>
+                          {languages.map((language) => (
+                            <Select.Item
+                              key={language.code}
+                              value={language.code}
+                            >
+                              {language.display_name}
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select>
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </div>
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="usage_insights"
+              render={({ field: { value, onChange, ...rest } }) => (
+                <Form.Item>
+                  <div className="flex items-center justify-between">
+                    <Form.Label>{t("profile.usageInsights")}</Form.Label>
+                    <Form.Control>
+                      <Switch
+                        {...rest}
+                        checked={value}
+                        onCheckedChange={onChange}
+                      />
+                    </Form.Control>
+                  </div>
+                  <Form.Hint>
+                    <span>
+                      <Trans
+                        i18nKey="profile.userInsightsHint"
+                        components={[
+                          <a
+                            className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-fg underline"
+                            href="https://docs.medusajs.com/usage#admin-analytics"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          />,
+                        ]}
+                      />
+                    </span>
+                  </Form.Hint>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+          </div>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <div className="flex items-center gap-x-2">
+            <Drawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </Drawer.Close>
+            <Button size="small" type="submit" isLoading={isLoading}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </Drawer.Footer>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/profile/profile-edit/index.ts b/packages/admin-next/dashboard/src/routes/profile/profile-edit/index.ts
new file mode 100644
index 0000000000..99be2393cb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/profile-edit/index.ts
@@ -0,0 +1 @@
+export { ProfileEdit as Component } from "./profile-edit"
diff --git a/packages/admin-next/dashboard/src/routes/profile/profile-edit/profile-edit.tsx b/packages/admin-next/dashboard/src/routes/profile/profile-edit/profile-edit.tsx
new file mode 100644
index 0000000000..4154cb7f49
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/profile-edit/profile-edit.tsx
@@ -0,0 +1,52 @@
+import { Drawer, Heading } from "@medusajs/ui"
+import { useAdminGetSession } from "medusa-react"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import { EditProfileForm } from "./components/edit-profile-form/edit-profile-form"
+
+export const ProfileEdit = () => {
+  const [open, setOpen] = useState(false)
+  const navigate = useNavigate()
+
+  const { user, isLoading, isError, error } = useAdminGetSession()
+
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  const onOpenChange = (open: boolean) => {
+    if (!open) {
+      setTimeout(() => {
+        navigate(`/settings/profile`, { replace: true })
+      }, 200)
+    }
+
+    setOpen(open)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content>
+        <Drawer.Header className="capitalize">
+          <Heading>{t("profile.editProfile")}</Heading>
+        </Drawer.Header>
+        {isLoading || !user ? (
+          <div>Loading...</div>
+        ) : (
+          <EditProfileForm
+            user={user}
+            usageInsights={false}
+            onSuccess={() => onOpenChange(false)}
+          />
+        )}
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/profile/views/profile-details/index.ts b/packages/admin-next/dashboard/src/routes/profile/views/profile-details/index.ts
deleted file mode 100644
index 0402621d02..0000000000
--- a/packages/admin-next/dashboard/src/routes/profile/views/profile-details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Profile as Component } from "./profile";
diff --git a/packages/admin-next/dashboard/src/routes/profile/views/profile-details/profile.tsx b/packages/admin-next/dashboard/src/routes/profile/views/profile-details/profile.tsx
deleted file mode 100644
index 6e607d3608..0000000000
--- a/packages/admin-next/dashboard/src/routes/profile/views/profile-details/profile.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Container, Heading, Text } from "@medusajs/ui"
-
-import { Spinner } from "@medusajs/icons"
-import { useAdminGetSession } from "medusa-react"
-import { useTranslation } from "react-i18next"
-import { languages } from "../../../../i18n/config"
-import { EditProfileDetailsDrawer } from "../../components/edit-profile-details-drawer/edit-profile-details-drawer"
-
-export const Profile = () => {
-  const { user, isLoading } = useAdminGetSession()
-  const { i18n, t } = useTranslation()
-
-  if (isLoading || !user) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <Spinner className="text-ui-fg-interactive animate-spin" />
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <Container className="p-0">
-        <div className="border-ui-border-base border-b px-8 py-6">
-          <Heading>{t("profile.domain")}</Heading>
-          <Text className="text-ui-fg-subtle" size="small">
-            {t("profile.manageYourProfileDetails")}
-          </Text>
-        </div>
-        <div className="border-ui-border-base grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Name
-          </Text>
-          <Text size="small" leading="compact">
-            {user.first_name} {user.last_name}
-          </Text>
-        </div>
-        <div className="border-ui-border-base grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Email
-          </Text>
-          <Text size="small" leading="compact">
-            {user.email}
-          </Text>
-        </div>
-        <div className="border-ui-border-base grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Language
-          </Text>
-          <Text size="small" leading="compact">
-            {languages.find((lang) => lang.code === i18n.language)
-              ?.display_name || "-"}
-          </Text>
-        </div>
-        <div className="grid grid-cols-2 px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Usage insights
-          </Text>
-        </div>
-        <div className="border-ui-border-base flex items-center justify-end border-t px-8 py-6">
-          <EditProfileDetailsDrawer
-            id={user.id}
-            firstName={user.first_name}
-            lastName={user.last_name}
-          />
-        </div>
-      </Container>
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/regions/components/edit-region-details-drawer/edit-region-details-drawer.tsx b/packages/admin-next/dashboard/src/routes/regions/components/edit-region-details-drawer/edit-region-details-drawer.tsx
deleted file mode 100644
index 8752f83a90..0000000000
--- a/packages/admin-next/dashboard/src/routes/regions/components/edit-region-details-drawer/edit-region-details-drawer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Drawer } from "@medusajs/ui"
-import { useState } from "react"
-
-export const EditRegionDetailsDrawer = () => {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger asChild></Drawer.Trigger>
-    </Drawer>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-create/index.ts b/packages/admin-next/dashboard/src/routes/regions/region-create/index.ts
new file mode 100644
index 0000000000..cbd7dbdfe1
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-create/index.ts
@@ -0,0 +1 @@
+export { RegionCreate as Component } from "./region-create"
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-create/region-create.tsx b/packages/admin-next/dashboard/src/routes/regions/region-create/region-create.tsx
new file mode 100644
index 0000000000..e900d160a9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-create/region-create.tsx
@@ -0,0 +1,201 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, FocusModal, Heading, Input, Switch, Text } from "@medusajs/ui"
+import { useAdminCreateRegion } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { useNavigate } from "react-router-dom"
+import { Form } from "../../../components/common/form"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+
+const CreateRegionFormSchema = zod.object({
+  name: zod.string().min(1),
+  currency_code: zod.string(),
+  includes_tax: zod.boolean(),
+  countries: zod.array(zod.string()),
+  fulfillment_providers: zod.array(zod.string()).min(1),
+  payment_providers: zod.array(zod.string()).min(1),
+  tax_rate: zod.number().min(0).max(100),
+  tax_code: zod.string().optional(),
+})
+
+export const RegionCreate = () => {
+  const [open, onOpenChange] = useRouteModalState()
+  const navigate = useNavigate()
+
+  const { t } = useTranslation()
+
+  const form = useForm<zod.infer<typeof CreateRegionFormSchema>>({
+    defaultValues: {
+      name: "",
+      currency_code: "",
+      includes_tax: false,
+      countries: [],
+      fulfillment_providers: [],
+      payment_providers: [],
+      tax_code: "",
+    },
+    resolver: zodResolver(CreateRegionFormSchema),
+  })
+
+  const { mutateAsync, isLoading } = useAdminCreateRegion()
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      {
+        name: values.name,
+        countries: values.countries,
+        currency_code: values.currency_code,
+        fulfillment_providers: values.fulfillment_providers,
+        payment_providers: values.payment_providers,
+        tax_rate: values.tax_rate,
+        tax_code: values.tax_code,
+        includes_tax: values.includes_tax,
+      },
+      {
+        onSuccess: ({ region }) => {
+          navigate(`../${region.id}`)
+        },
+      }
+    )
+  })
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        <Form {...form}>
+          <form onSubmit={handleSubmit}>
+            <FocusModal.Header>
+              <div className="flex items-center justify-end gap-x-2">
+                <FocusModal.Close asChild>
+                  <Button size="small" variant="secondary">
+                    {t("general.cancel")}
+                  </Button>
+                </FocusModal.Close>
+                <Button size="small" type="submit" isLoading={isLoading}>
+                  {t("general.save")}
+                </Button>
+              </div>
+            </FocusModal.Header>
+            <FocusModal.Body className="flex flex-col items-center pt-[72px]">
+              <div className="w-full max-w-[720px] flex flex-col gap-y-10">
+                <Heading></Heading>
+                <div className="flex flex-col gap-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <Form.Field
+                      control={form.control}
+                      name="name"
+                      render={({ field }) => {
+                        return (
+                          <Form.Item>
+                            <Form.Label>{t("fields.name")}</Form.Label>
+                            <Form.Control>
+                              <Input size="small" {...field} />
+                            </Form.Control>
+                            <Form.ErrorMessage />
+                          </Form.Item>
+                        )
+                      }}
+                    />
+                    <Form.Field
+                      control={form.control}
+                      name="currency_code"
+                      render={({ field }) => {
+                        return (
+                          <Form.Item>
+                            <Form.Label>{t("fields.currency")}</Form.Label>
+                            <Form.Control></Form.Control>
+                            <Form.ErrorMessage />
+                          </Form.Item>
+                        )
+                      }}
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <Form.Field
+                      control={form.control}
+                      name="tax_rate"
+                      render={({ field }) => {
+                        return (
+                          <Form.Item>
+                            <Form.Label>{t("fields.taxRate")}</Form.Label>
+                            <Form.Control>
+                              <Input type="number" size="small" {...field} />
+                            </Form.Control>
+                            <Form.ErrorMessage />
+                          </Form.Item>
+                        )
+                      }}
+                    />
+                    <Form.Field
+                      control={form.control}
+                      name="tax_code"
+                      render={({ field }) => {
+                        return (
+                          <Form.Item>
+                            <Form.Label optional>
+                              {t("fields.taxCode")}
+                            </Form.Label>
+                            <Form.Control>
+                              <Input type="number" size="small" {...field} />
+                            </Form.Control>
+                            <Form.ErrorMessage />
+                          </Form.Item>
+                        )
+                      }}
+                    />
+                  </div>
+                </div>
+                <Form.Field
+                  control={form.control}
+                  name="includes_tax"
+                  render={({ field: { value, onChange, ...field } }) => {
+                    return (
+                      <Form.Item>
+                        <div>
+                          <div className="flex items-start justify-between">
+                            <Form.Label>
+                              {t("fields.taxInclusivePricing")}
+                            </Form.Label>
+                            <Form.Control>
+                              <Switch
+                                {...field}
+                                checked={value}
+                                onCheckedChange={onChange}
+                              />
+                            </Form.Control>
+                          </div>
+                          <Form.Hint>{t("regions.taxInclusiveHint")}</Form.Hint>
+                          <Form.ErrorMessage />
+                        </div>
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <div className="flex flex-col gap-y-4">
+                  <div>
+                    <Text size="small" leading="compact" weight="plus">
+                      {t("fields.providers")}
+                    </Text>
+                    <Text size="small" className="text-ui-fg-subtle">
+                      {t("regions.providersHint")}
+                    </Text>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4"></div>
+                </div>
+                <div className="flex flex-col gap-y-4">
+                  <div>
+                    <Text size="small" leading="compact" weight="plus">
+                      {t("fields.metadata")}
+                    </Text>
+                  </div>
+                </div>
+              </div>
+            </FocusModal.Body>
+          </form>
+        </Form>
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/index.ts b/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/index.ts
new file mode 100644
index 0000000000..73ca48c45c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./region-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/region-general-section.tsx b/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/region-general-section.tsx
new file mode 100644
index 0000000000..860ef29da6
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-general-section/region-general-section.tsx
@@ -0,0 +1,230 @@
+import {
+  BuildingTax,
+  EllipsisHorizontal,
+  PencilSquare,
+  Trash,
+} from "@medusajs/icons"
+import { Country, Region } from "@medusajs/medusa"
+import {
+  Badge,
+  Button,
+  Container,
+  Drawer,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  StatusBadge,
+  Text,
+  Tooltip,
+  usePrompt,
+} from "@medusajs/ui"
+import { useAdminDeleteRegion, useAdminUpdateRegion } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import * as zod from "zod"
+
+type RegionGeneralSectionProps = {
+  region: Region
+}
+
+export const RegionGeneralSection = ({ region }: RegionGeneralSectionProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div>
+          <Heading>{region.name}</Heading>
+          <RegionCountries countries={region.countries} />
+        </div>
+        <RegionActions region={region} />
+      </div>
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.currency")}
+        </Text>
+        <div className="flex items-center gap-x-2">
+          <Badge rounded="full" className="uppercase">
+            {region.currency_code}
+          </Badge>
+          <Text size="small" leading="compact">
+            {region.currency?.name}
+          </Text>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.taxInclusivePricing")}
+        </Text>
+        <StatusBadge
+          color={region.includes_tax ? "green" : "red"}
+          className="w-fit"
+        >
+          {region.includes_tax ? t("general.enabled") : t("general.disabled")}
+        </StatusBadge>
+      </div>
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.paymentProviders")}
+        </Text>
+        <Text size="small" leading="compact">
+          {region.payment_providers.length > 0
+            ? region.payment_providers.map((p) => p.id).join(", ")
+            : "-"}
+        </Text>
+      </div>
+      <div className="grid grid-cols-2 items-center px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.fulfillmentProviders")}
+        </Text>
+        <Text size="small" leading="compact">
+          {region.fulfillment_providers.length > 0
+            ? region.fulfillment_providers.map((p) => p.id).join(", ")
+            : "-"}
+        </Text>
+      </div>
+    </Container>
+  )
+}
+
+const RegionActions = ({ region }: { region: Region }) => {
+  const { t } = useTranslation()
+  const { mutateAsync } = useAdminDeleteRegion(region.id)
+  const prompt = usePrompt()
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("regions.deleteRegionWarning", {
+        name: region.name,
+      }),
+      verificationText: region.name,
+      verificationInstruction: t("general.typeToConfirm"),
+      confirmText: t("general.delete"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(undefined)
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <Link to="edit" relative="route">
+          <DropdownMenu.Item>
+            <div className="flex items-center gap-x-2">
+              <PencilSquare className="text-ui-fg-subtle" />
+              <span>{t("general.edit")}</span>
+            </div>
+          </DropdownMenu.Item>
+        </Link>
+        <Link to={`/settings/taxes/${region.id}`}>
+          <DropdownMenu.Item>
+            <div className="flex items-center gap-x-2">
+              <BuildingTax className="text-ui-fg-subtle" />
+              <span>Tax settings</span>
+            </div>
+          </DropdownMenu.Item>
+        </Link>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onClick={handleDelete}>
+          <div className="flex items-center gap-x-2">
+            <Trash className="text-ui-fg-subtle" />
+            <span>Delete</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const RegionCountries = ({ countries }: { countries: Country[] }) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="text-ui-fg-subtle flex items-center gap-x-2">
+      <Text leading="compact" size="small">
+        {countries
+          .slice(0, 2)
+          .map((c) => c.display_name)
+          .join(", ")}
+      </Text>
+      {countries.length > 2 && (
+        <Tooltip
+          content={
+            <ul>
+              {countries.slice(2).map((c) => (
+                <li key={c.id}>{c.display_name}</li>
+              ))}
+            </ul>
+          }
+        >
+          <Text
+            leading="compact"
+            size="small"
+            weight="plus"
+            className="cursor-default"
+          >
+            {t("general.plusCountMore", {
+              count: countries.length - 2,
+            })}
+          </Text>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+const EditRegionSchema = zod.object({
+  name: zod.string().min(1),
+  includes_tax: zod.boolean(),
+  currency_code: zod.string(),
+  countries: zod.array(zod.string()),
+})
+
+const EditRegionDrawer = ({ region }: { region: Region }) => {
+  const { t } = useTranslation()
+  const { mutateAsync, isLoading } = useAdminUpdateRegion(region.id)
+
+  const form = useForm<zod.infer<typeof EditRegionSchema>>({
+    defaultValues: {
+      name: region.name,
+      currency_code: region.currency_code,
+      includes_tax: region.includes_tax,
+      countries: region.countries.map((c) => c.iso_2),
+    },
+  })
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync({
+      name: values.name,
+      currency_code: values.currency_code,
+      includes_tax: values.includes_tax,
+    })
+  })
+
+  return (
+    <Drawer>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Heading>{t("regions.editRegion")}</Heading>
+        </Drawer.Header>
+        <Drawer.Body></Drawer.Body>
+        <Drawer.Footer className="flex items-center justify-end gap-x-2">
+          <Button variant="secondary">{t("general.cancel")}</Button>
+          <Button>{t("general.save")}</Button>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-shipping-option-section/region-shipping-option-section.tsx b/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-shipping-option-section/region-shipping-option-section.tsx
new file mode 100644
index 0000000000..488fe486a5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-detail/components/region-shipping-option-section/region-shipping-option-section.tsx
@@ -0,0 +1,156 @@
+import { Region, ShippingOption } from "@medusajs/medusa"
+import { Container, StatusBadge, Table, clx } from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminShippingOptions } from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+
+type RegionShippingOptionSectionProps = {
+  region: Region
+}
+
+const PAGE_SIZE = 20
+
+// TODO: Need to fix pagination and search for shipping options
+export const RegionShippingOptionSection = ({
+  region,
+}: RegionShippingOptionSectionProps) => {
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const { shipping_options, count, isError, error, isLoading } =
+    useAdminShippingOptions({
+      region_id: region.id,
+    })
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const columns = useShippingOptionColumns()
+
+  const table = useReactTable({
+    data: shipping_options ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+  })
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="px-6 py-4">{/* Filters go here */}</div>
+      <Table>
+        <Table.Header>
+          {table.getHeaderGroups().map((headerGroup) => {
+            return (
+              <Table.Row
+                key={headerGroup.id}
+                className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap"
+              >
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <Table.HeaderCell key={header.id}>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </Table.HeaderCell>
+                  )
+                })}
+              </Table.Row>
+            )
+          })}
+        </Table.Header>
+        <Table.Body className="border-b-0">
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row
+              key={row.id}
+              className={clx(
+                "transition-fg [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                {
+                  "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                    row.getIsSelected(),
+                }
+              )}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+      <LocalizedTablePagination
+        canNextPage={table.getCanNextPage()}
+        canPreviousPage={table.getCanPreviousPage()}
+        nextPage={table.nextPage}
+        previousPage={table.previousPage}
+        count={count ?? 0}
+        pageIndex={pageIndex}
+        pageCount={table.getPageCount()}
+        pageSize={PAGE_SIZE}
+      />
+    </Container>
+  )
+}
+
+const columnHelper = createColumnHelper<ShippingOption>()
+
+const useShippingOptionColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: (cell) => cell.getValue(),
+      }),
+      columnHelper.accessor("admin_only", {
+        header: t("fields.availability"),
+        cell: (cell) => {
+          const value = cell.getValue()
+
+          return (
+            <StatusBadge color={value ? "blue" : "green"}>
+              {value ? t("general.admin") : t("general.store")}
+            </StatusBadge>
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-detail/index.ts b/packages/admin-next/dashboard/src/routes/regions/region-detail/index.ts
new file mode 100644
index 0000000000..17c680a88e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-detail/index.ts
@@ -0,0 +1,2 @@
+export { regionLoader as loader } from "./loader"
+export { RegionDetail as Component } from "./region-detail"
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-detail/loader.ts b/packages/admin-next/dashboard/src/routes/regions/region-detail/loader.ts
new file mode 100644
index 0000000000..e8c97d2216
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-detail/loader.ts
@@ -0,0 +1,23 @@
+import { AdminProductsRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { adminRegionKeys } from "medusa-react"
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { medusa, queryClient } from "../../../lib/medusa"
+
+const regionQuery = (id: string) => ({
+  queryKey: adminRegionKeys.detail(id),
+  queryFn: async () => medusa.admin.regions.retrieve(id),
+})
+
+export const regionLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = regionQuery(id!)
+
+  console.log("regionLoader", query)
+
+  return (
+    queryClient.getQueryData<Response<AdminProductsRes>>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-detail/region-detail.tsx b/packages/admin-next/dashboard/src/routes/regions/region-detail/region-detail.tsx
new file mode 100644
index 0000000000..eeca1c0a65
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-detail/region-detail.tsx
@@ -0,0 +1,42 @@
+import { useAdminRegion } from "medusa-react"
+import { Outlet, useNavigate, useParams } from "react-router-dom"
+
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { RegionGeneralSection } from "./components/region-general-section"
+import { RegionShippingOptionSection } from "./components/region-shipping-option-section/region-shipping-option-section"
+
+export const RegionDetail = () => {
+  const { id } = useParams()
+  const { region, isLoading, isError, error } = useAdminRegion(id!)
+  const navigate = useNavigate()
+
+  // TODO: Move to loading.tsx and set as Suspense fallback for the route
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  // TODO: Move to error.tsx and set as ErrorBoundary for the route
+  if (isError || !region) {
+    const err = error ? JSON.parse(JSON.stringify(error)) : null
+    return (
+      <div>
+        {(err as Error & { status: number })?.status === 404 ? (
+          <div>Not found</div>
+        ) : (
+          <div>Something went wrong!</div>
+        )}
+      </div>
+    )
+  }
+
+  console.log("RegionDetail")
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <RegionGeneralSection region={region} />
+      <RegionShippingOptionSection region={region} />
+      <JsonViewSection data={region} />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx b/packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx
new file mode 100644
index 0000000000..00c008540a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx
@@ -0,0 +1,105 @@
+import { Region } from "@medusajs/medusa"
+import { Button, Drawer, Input, Switch } from "@medusajs/ui"
+import { useAdminUpdateRegion } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+import { Form } from "../../../../../components/common/form"
+
+type EditRegionFormProps = {
+  region: Region
+}
+
+const EditRegionSchema = zod.object({
+  name: zod.string().min(1),
+  includes_tax: zod.boolean(),
+  currency_code: zod.string(),
+  countries: zod.array(zod.string()),
+})
+
+export const EditRegionForm = ({ region }: EditRegionFormProps) => {
+  const { mutateAsync, isLoading } = useAdminUpdateRegion(region.id)
+
+  const form = useForm<zod.infer<typeof EditRegionSchema>>({
+    defaultValues: {
+      name: region.name,
+      currency_code: region.currency_code,
+      includes_tax: region.includes_tax,
+      countries: region.countries.map((c) => c.iso_2),
+    },
+  })
+
+  const { t } = useTranslation()
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync({
+      name: values.name,
+      currency_code: values.currency_code,
+      includes_tax: values.includes_tax,
+    })
+  })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex flex-1 flex-col">
+        <Drawer.Body>
+          <div className="flex flex-col gap-y-4">
+            <Form.Field
+              control={form.control}
+              name="name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.name")}</Form.Label>
+                    <Form.Control>
+                      <Input {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="includes_tax"
+              render={({ field: { value, onChange, ...field } }) => {
+                return (
+                  <Form.Item>
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <Form.Label>
+                          {t("fields.taxInclusivePricing")}
+                        </Form.Label>
+                        <Form.Hint>{t("regions.taxInclusiveHint")}</Form.Hint>
+                      </div>
+                      <Form.Control>
+                        <Switch
+                          {...field}
+                          checked={value}
+                          onCheckedChange={onChange}
+                        />
+                      </Form.Control>
+                    </div>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+          </div>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <div className="flex items-center gap-x-2">
+            <Drawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </Drawer.Close>
+            <Button size="small" type="submit" isLoading={isLoading}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </Drawer.Footer>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/index.ts b/packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/index.ts
new file mode 100644
index 0000000000..b3dbbd11b0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-edit/components/edit-region-form/index.ts
@@ -0,0 +1 @@
+export * from "./edit-region-form"
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-edit/index.ts b/packages/admin-next/dashboard/src/routes/regions/region-edit/index.ts
new file mode 100644
index 0000000000..931fd4c574
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-edit/index.ts
@@ -0,0 +1 @@
+export { RegionEdit as Component } from "./region-edit"
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-edit/region-edit.tsx b/packages/admin-next/dashboard/src/routes/regions/region-edit/region-edit.tsx
new file mode 100644
index 0000000000..9cc8af616d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-edit/region-edit.tsx
@@ -0,0 +1,49 @@
+import { Drawer, Heading } from "@medusajs/ui"
+import { useAdminRegion } from "medusa-react"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { json, useNavigate, useParams } from "react-router-dom"
+
+import { EditRegionForm } from "./components/edit-region-form"
+
+export const RegionEdit = () => {
+  const [open, setOpen] = useState(false)
+  const { id } = useParams()
+  const { region, isLoading, isError, error } = useAdminRegion(id!)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  const onOpenChange = (open: boolean) => {
+    if (!open) {
+      setTimeout(() => {
+        navigate(`/settings/regions/${id}`, { replace: true })
+      }, 200)
+    }
+
+    setOpen(open)
+  }
+
+  const { t } = useTranslation()
+
+  if (isError) {
+    throw error
+  }
+
+  if (!region && !isLoading) {
+    throw json("An unknown error has occured", 500)
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Heading>{t("regions.editRegion")}</Heading>
+        </Drawer.Header>
+        {region && <EditRegionForm region={region} />}
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-list/components/region-list-table/index.ts b/packages/admin-next/dashboard/src/routes/regions/region-list/components/region-list-table/index.ts
new file mode 100644
index 0000000000..e91f99376a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-list/components/region-list-table/index.ts
@@ -0,0 +1 @@
+export * from "./region-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-list/components/region-list-table/region-list-table.tsx b/packages/admin-next/dashboard/src/routes/regions/region-list/components/region-list-table/region-list-table.tsx
new file mode 100644
index 0000000000..e90b7b7987
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-list/components/region-list-table/region-list-table.tsx
@@ -0,0 +1,302 @@
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
+import { Region } from "@medusajs/medusa"
+import {
+  Button,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  Table,
+  Tooltip,
+  clx,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminRegions } from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+
+const PAGE_SIZE = 50
+
+export const RegionListTable = () => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { regions, count, isLoading, isError, error } = useAdminRegions({
+    limit: PAGE_SIZE,
+    offset: pageIndex * PAGE_SIZE,
+  })
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: regions ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("regions.domain")}</Heading>
+        <Link to="/settings/regions/create">
+          <Button size="small" variant="secondary">
+            {t("general.create")}
+          </Button>
+        </Link>
+      </div>
+      <Table>
+        <Table.Header>
+          {table.getHeaderGroups().map((headerGroup) => {
+            return (
+              <Table.Row
+                key={headerGroup.id}
+                className=" [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap"
+              >
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <Table.HeaderCell key={header.id}>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </Table.HeaderCell>
+                  )
+                })}
+              </Table.Row>
+            )
+          })}
+        </Table.Header>
+        <Table.Body className="border-b-0">
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row
+              key={row.id}
+              className={clx(
+                "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                {
+                  "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                    row.getIsSelected(),
+                }
+              )}
+              onClick={() => navigate(`/settings/regions/${row.original.id}`)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+      <LocalizedTablePagination
+        canNextPage={table.getCanNextPage()}
+        canPreviousPage={table.getCanPreviousPage()}
+        nextPage={table.nextPage}
+        previousPage={table.previousPage}
+        count={count ?? 0}
+        pageIndex={pageIndex}
+        pageCount={table.getPageCount()}
+        pageSize={PAGE_SIZE}
+      />
+    </Container>
+  )
+}
+
+const RegionActions = ({ region }: { region: Region }) => {
+  const { t } = useTranslation()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild onClick={(e) => e.stopPropagation()}>
+        <IconButton variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <Link to={`/settings/regions/${region.id}/edit`}>
+          <DropdownMenu.Item onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center gap-x-2">
+              <PencilSquare className="text-ui-fg-subtle" />
+              <span>{t("general.edit")}</span>
+            </div>
+          </DropdownMenu.Item>
+        </Link>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onClick={(e) => e.stopPropagation()}>
+          <div className="flex items-center gap-x-2">
+            <Trash className="text-ui-fg-subtle" />
+            <span>{t("general.delete")}</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<Region>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: (cell) => cell.getValue(),
+      }),
+      columnHelper.accessor("countries", {
+        header: t("fields.countries"),
+        cell: (cell) => {
+          const countries = cell.getValue()
+
+          const displayValue = countries
+            .slice(0, 2)
+            .map((c) => c.display_name)
+            .join(", ")
+
+          const additionalCountries = countries
+            .slice(2)
+            .map((c) => c.display_name)
+
+          return (
+            <div className="flex items-center gap-x-1">
+              <span>{displayValue}</span>
+              {additionalCountries.length > 0 && (
+                <Tooltip
+                  content={
+                    <ul>
+                      {additionalCountries.map((c) => (
+                        <li key={c}>{c}</li>
+                      ))}
+                    </ul>
+                  }
+                >
+                  <span>
+                    {t("general.plusCountMore", {
+                      count: additionalCountries.length,
+                    })}
+                  </span>
+                </Tooltip>
+              )}
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("payment_providers", {
+        header: t("fields.paymentProviders"),
+        cell: (cell) => {
+          const providers = cell.getValue()
+
+          const displayValue = providers
+            .slice(0, 2)
+            .map((p) => p.id)
+            .join(", ")
+
+          const additionalProviders = providers.slice(2).map((c) => c.id)
+
+          return (
+            <div className="flex items-center gap-x-1">
+              <span>{displayValue}</span>
+              {additionalProviders.length > 0 && (
+                <Tooltip
+                  content={
+                    <ul>
+                      {additionalProviders.map((c) => (
+                        <li key={c}>{c}</li>
+                      ))}
+                    </ul>
+                  }
+                >
+                  <span>
+                    {t("general.plusCountMore", {
+                      count: additionalProviders.length,
+                    })}
+                  </span>
+                </Tooltip>
+              )}
+            </div>
+          )
+        },
+      }),
+      columnHelper.accessor("fulfillment_providers", {
+        header: t("fields.fulfillmentProviders"),
+        cell: (cell) => {
+          const providers = cell.getValue()
+
+          const displayValue = providers
+            .slice(0, 2)
+            .map((p) => p.id)
+            .join(", ")
+
+          const additionalProviders = providers.slice(2).map((c) => c.id)
+
+          return (
+            <div className="flex items-center gap-x-1">
+              <span>{displayValue}</span>
+              {additionalProviders.length > 0 && (
+                <Tooltip
+                  content={
+                    <ul>
+                      {additionalProviders.map((c) => (
+                        <li key={c}>{c}</li>
+                      ))}
+                    </ul>
+                  }
+                >
+                  <span>
+                    {t("general.plusCountMore", {
+                      count: additionalProviders.length,
+                    })}
+                  </span>
+                </Tooltip>
+              )}
+            </div>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <RegionActions region={row.original} />
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/views/region-list/index.ts b/packages/admin-next/dashboard/src/routes/regions/region-list/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/regions/views/region-list/index.ts
rename to packages/admin-next/dashboard/src/routes/regions/region-list/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/regions/region-list/region-list.tsx b/packages/admin-next/dashboard/src/routes/regions/region-list/region-list.tsx
new file mode 100644
index 0000000000..fb22082bb6
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/region-list/region-list.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom"
+import { RegionListTable } from "./components/region-list-table"
+
+export const RegionList = () => {
+  console.log("RegionList")
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <RegionListTable />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/regions/views/region-details/index.ts b/packages/admin-next/dashboard/src/routes/regions/views/region-details/index.ts
deleted file mode 100644
index cd1dedc129..0000000000
--- a/packages/admin-next/dashboard/src/routes/regions/views/region-details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { RegionDetails as Component } from "./region-details"
diff --git a/packages/admin-next/dashboard/src/routes/regions/views/region-details/region-details.tsx b/packages/admin-next/dashboard/src/routes/regions/views/region-details/region-details.tsx
deleted file mode 100644
index 2f00216e38..0000000000
--- a/packages/admin-next/dashboard/src/routes/regions/views/region-details/region-details.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { EllipsisHorizontal } from "@medusajs/icons"
-import {
-  Badge,
-  Container,
-  Heading,
-  IconButton,
-  Text,
-  Tooltip,
-} from "@medusajs/ui"
-import { useAdminRegion } from "medusa-react"
-import { useTranslation } from "react-i18next"
-import { useParams } from "react-router-dom"
-
-export const RegionDetails = () => {
-  const { id } = useParams()
-  const { region, isLoading, isError, error } = useAdminRegion(id!)
-
-  const { t } = useTranslation()
-
-  // TODO: Move to loading.tsx and set as Suspense fallback for the route
-  if (isLoading) {
-    return <div>Loading</div>
-  }
-
-  // TODO: Move to error.tsx and set as ErrorBoundary for the route
-  if (isError || !region) {
-    const err = error ? JSON.parse(JSON.stringify(error)) : null
-    return (
-      <div>
-        {(err as Error & { status: number })?.status === 404 ? (
-          <div>Not found</div>
-        ) : (
-          <div>Something went wrong!</div>
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex flex-col gap-y-2">
-      <Container className="p-0">
-        <div className="flex items-center justify-between border-b px-8 py-6">
-          <div>
-            <Heading>{region.name}</Heading>
-            <div className="text-ui-fg-subtle flex items-center gap-x-2">
-              <Text leading="compact" size="small">
-                {region.countries
-                  .slice(0, 2)
-                  .map((c) => c.display_name)
-                  .join(", ")}
-              </Text>
-              {region.countries.length > 2 && (
-                <Tooltip
-                  content={
-                    <ul>
-                      {region.countries.slice(2).map((c) => (
-                        <li key={c.id}>{c.display_name}</li>
-                      ))}
-                    </ul>
-                  }
-                >
-                  <Text
-                    leading="compact"
-                    size="small"
-                    weight="plus"
-                    className="cursor-default"
-                  >
-                    {t("general.plusCountMore", {
-                      count: region.countries.length - 2,
-                    })}
-                  </Text>
-                </Tooltip>
-              )}
-            </div>
-          </div>
-          <IconButton variant="transparent">
-            <EllipsisHorizontal />
-          </IconButton>
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Currency
-          </Text>
-          <div className="flex items-center gap-x-2">
-            <Badge rounded="full" className="uppercase">
-              {region.currency_code}
-            </Badge>
-            <Text size="small" leading="compact">
-              {region.currency.name}
-            </Text>
-          </div>
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Default Tax Rate
-          </Text>
-          <Text size="small" leading="compact">
-            {region.tax_rate}
-          </Text>
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Default Tax Code
-          </Text>
-          <Text size="small" leading="compact">
-            {region.tax_code ?? "-"}
-          </Text>
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Tax Inclusive Pricing
-          </Text>
-          <Text size="small" leading="compact">
-            {region.includes_tax ? t("general.enabled") : t("general.disabled")}
-          </Text>
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Payment Providers
-          </Text>
-          <Text size="small" leading="compact">
-            {region.payment_providers.length > 0
-              ? region.payment_providers.map((p) => p.id).join(", ")
-              : "-"}
-          </Text>
-        </div>
-        <div className="grid grid-cols-2 px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            Fulfillment Providers
-          </Text>
-          <Text size="small" leading="compact">
-            {region.fulfillment_providers.length > 0
-              ? region.fulfillment_providers.map((p) => p.id).join(", ")
-              : "-"}
-          </Text>
-        </div>
-      </Container>
-      <Container></Container>
-      <Container></Container>
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/regions/views/region-list/region-list.tsx b/packages/admin-next/dashboard/src/routes/regions/views/region-list/region-list.tsx
deleted file mode 100644
index 84c4592430..0000000000
--- a/packages/admin-next/dashboard/src/routes/regions/views/region-list/region-list.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useAdminRegions } from "medusa-react"
-import { Link } from "react-router-dom"
-
-export const RegionList = () => {
-  const { regions, isLoading, isError, error } = useAdminRegions()
-
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
-  if (isError || !regions) {
-    return <div>Error</div>
-  }
-
-  return (
-    <div>
-      {regions.map((region) => {
-        return (
-          <div key={region.id}>
-            <Link to={`/settings/regions/${region.id}`}>{region.name}</Link>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/index.ts
deleted file mode 100644
index a2677176a7..0000000000
--- a/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./sales-channel-details-section"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/sales-channel-details-section.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/sales-channel-details-section.tsx
deleted file mode 100644
index 559c432748..0000000000
--- a/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/sales-channel-details-section.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
-import { SalesChannel } from "@medusajs/medusa"
-import {
-  Button,
-  Container,
-  Drawer,
-  DropdownMenu,
-  Heading,
-  IconButton,
-  Input,
-  StatusBadge,
-  Switch,
-  Text,
-  Textarea,
-} from "@medusajs/ui"
-import { useAdminUpdateSalesChannel } from "medusa-react"
-import { useState } from "react"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-import * as zod from "zod"
-
-import { Form } from "../../../../components/common/form"
-
-type Props = {
-  salesChannel: SalesChannel
-}
-
-export const SalesChannelDetailsSection = ({ salesChannel }: Props) => {
-  const [drawerOpen, setDrawerOpen] = useState(false)
-  const { t } = useTranslation()
-
-  return (
-    <div>
-      <Container className="p-0">
-        <div className="flex items-center justify-between px-8 py-6">
-          <div>
-            <Heading>{salesChannel.name}</Heading>
-            <Text size="small" className="text-ui-fg-subtle">
-              {salesChannel.description}
-            </Text>
-          </div>
-          <div className="flex items-center gap-x-2">
-            <StatusBadge color={salesChannel.is_disabled ? "red" : "green"}>
-              {t(
-                `general.${salesChannel.is_disabled ? "disabled" : "enabled"}`
-              )}
-            </StatusBadge>
-            <DropdownMenu>
-              <DropdownMenu.Trigger asChild>
-                <IconButton variant="transparent">
-                  <EllipsisHorizontal />
-                </IconButton>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content>
-                <DropdownMenu.Item
-                  className="gap-x-2"
-                  onClick={() => setDrawerOpen(!drawerOpen)}
-                >
-                  <PencilSquare className="text-ui-fg-subtle" />
-                  <span>{t("general.edit")}</span>
-                </DropdownMenu.Item>
-                <DropdownMenu.Separator />
-                <DropdownMenu.Item className="gap-x-2">
-                  <Trash className="text-ui-fg-subtle" />
-                  <span>{t("general.delete")}</span>
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu>
-          </div>
-        </div>
-      </Container>
-      <EditSalesChannelDetailsDrawer
-        salesChannel={salesChannel}
-        open={drawerOpen}
-        setOpen={setDrawerOpen}
-      />
-    </div>
-  )
-}
-
-const EditSalesChannelDetailsSchema = zod.object({
-  name: zod.string().min(1),
-  description: zod.string().optional(),
-  is_active: zod.boolean(),
-})
-
-type DrawerProps = {
-  salesChannel: SalesChannel
-  open: boolean
-  setOpen: (open: boolean) => void
-}
-
-const EditSalesChannelDetailsDrawer = ({
-  salesChannel,
-  open,
-  setOpen,
-}: DrawerProps) => {
-  const form = useForm<zod.infer<typeof EditSalesChannelDetailsSchema>>({
-    defaultValues: {
-      name: salesChannel.name,
-      description: salesChannel.description ?? "",
-      is_active: !salesChannel.is_disabled,
-    },
-    resolver: zodResolver(EditSalesChannelDetailsSchema),
-  })
-  const { mutateAsync, isLoading } = useAdminUpdateSalesChannel(salesChannel.id)
-  const { t } = useTranslation()
-
-  const onSubmit = form.handleSubmit(async (values) => {
-    await mutateAsync(
-      {
-        name: values.name,
-        description: values.description ?? undefined,
-        is_disabled: !values.is_active,
-      },
-      {
-        onSuccess: () => {
-          setOpen(false)
-        },
-      }
-    )
-  })
-
-  return (
-    <Drawer open={open} onOpenChange={setOpen}>
-      <Form {...form}>
-        <Drawer.Content>
-          <Drawer.Header>
-            <Heading>{t("salesChannels.editSalesChannel")}</Heading>
-          </Drawer.Header>
-          <Drawer.Body className="flex flex-col gap-y-8">
-            <Form.Field
-              control={form.control}
-              name="name"
-              render={({ field }) => {
-                return (
-                  <Form.Item>
-                    <Form.Label>{t("fields.name")}</Form.Label>
-                    <Form.Control>
-                      <Input {...field} size="small" />
-                    </Form.Control>
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )
-              }}
-            />
-            <Form.Field
-              control={form.control}
-              name="description"
-              render={({ field }) => {
-                return (
-                  <Form.Item>
-                    <Form.Label optional>{t("fields.description")}</Form.Label>
-                    <Form.Control>
-                      <Textarea {...field} />
-                    </Form.Control>
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )
-              }}
-            />
-            <Form.Field
-              control={form.control}
-              name="is_active"
-              render={({ field: { onChange, value, ...field } }) => {
-                return (
-                  <Form.Item>
-                    <div className="flex items-center justify-between">
-                      <Form.Label>{t("general.enabled")}</Form.Label>
-                      <Form.Control>
-                        <Switch
-                          onCheckedChange={onChange}
-                          checked={value}
-                          {...field}
-                        />
-                      </Form.Control>
-                    </div>
-                    <Form.Hint>{t("salesChannels.isEnabledHint")}</Form.Hint>
-                    <Form.ErrorMessage />
-                  </Form.Item>
-                )
-              }}
-            />
-          </Drawer.Body>
-          <Drawer.Footer>
-            <div className="flex items-center justify-end gap-x-2">
-              <Drawer.Close asChild>
-                <Button variant="secondary">{t("general.cancel")}</Button>
-              </Drawer.Close>
-              <Button onClick={onSubmit} isLoading={isLoading}>
-                {t("general.save")}
-              </Button>
-            </div>
-          </Drawer.Footer>
-        </Drawer.Content>
-      </Form>
-    </Drawer>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/index.ts
deleted file mode 100644
index 43405e2d5d..0000000000
--- a/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./sales-channel-products-section"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/sales-channel-products-section.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/sales-channel-products-section.tsx
deleted file mode 100644
index 2a8a98aaff..0000000000
--- a/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/sales-channel-products-section.tsx
+++ /dev/null
@@ -1,621 +0,0 @@
-import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
-import { Product, SalesChannel } from "@medusajs/medusa"
-import {
-  Button,
-  Checkbox,
-  CommandBar,
-  Container,
-  DropdownMenu,
-  FocusModal,
-  Heading,
-  IconButton,
-  Table,
-  Tooltip,
-  clx,
-  usePrompt,
-} from "@medusajs/ui"
-import {
-  PaginationState,
-  RowSelectionState,
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-import {
-  adminProductKeys,
-  useAdminAddProductsToSalesChannel,
-  useAdminDeleteProductsFromSalesChannel,
-  useAdminProducts,
-} from "medusa-react"
-import { useMemo, useState } from "react"
-import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
-import * as zod from "zod"
-
-import { DebouncedSearch } from "../../../../components/common/debounced-search"
-import {
-  ProductAvailabilityCell,
-  ProductCollectionCell,
-  ProductInventoryCell,
-  ProductStatusCell,
-  ProductTitleCell,
-} from "../../../../components/common/product-table-cells"
-import { queryClient } from "../../../../lib/medusa"
-
-const PAGE_SIZE = 10
-
-type Props = {
-  salesChannel: SalesChannel
-}
-
-export const SalesChannelProductsSection = ({ salesChannel }: Props) => {
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: PAGE_SIZE,
-  })
-  const pagination = useMemo(
-    () => ({
-      pageIndex,
-      pageSize,
-    }),
-    [pageIndex, pageSize]
-  )
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
-  const [query, setQuery] = useState("")
-  const { products, count, isLoading } = useAdminProducts(
-    {
-      sales_channel_id: [salesChannel.id],
-      limit: PAGE_SIZE,
-      offset: pageIndex * PAGE_SIZE,
-      q: query,
-    },
-    {
-      keepPreviousData: true,
-    }
-  )
-
-  const columns = useListColumns(salesChannel.id)
-
-  const table = useReactTable({
-    data: (products ?? []) as Product[],
-    columns,
-    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
-    state: {
-      pagination,
-      rowSelection,
-    },
-    getRowId: (row) => row.id,
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-  })
-
-  const { mutateAsync } = useAdminDeleteProductsFromSalesChannel(
-    salesChannel.id
-  )
-  const prompt = usePrompt()
-
-  const { t } = useTranslation()
-
-  const onRemove = async () => {
-    const ids = Object.keys(rowSelection).map((k) => ({ id: k }))
-
-    const result = await prompt({
-      title: t("general.areYouSure"),
-      description: t("salesChannels.removeProductsWarning", {
-        count: ids.length,
-        sales_channel: salesChannel.name,
-      }),
-      confirmText: t("general.delete"),
-      cancelText: t("general.cancel"),
-    })
-
-    if (!result) {
-      return
-    }
-
-    await mutateAsync(
-      {
-        product_ids: ids,
-      },
-      {
-        onSuccess: () => {
-          setRowSelection({})
-          queryClient.invalidateQueries(adminProductKeys.lists())
-        },
-      }
-    )
-  }
-
-  return (
-    <Container className="p-0">
-      <div className="flex items-center justify-between px-8 pb-4 pt-6">
-        <Heading level="h2">{t("products.domain")}</Heading>
-        <div className="flex items-center gap-x-2">
-          <DebouncedSearch size="small" value={query} onChange={setQuery} />
-          <AddProductsModal salesChannelId={salesChannel.id} />
-        </div>
-      </div>
-      <div>
-        <Table>
-          <Table.Header>
-            {table.getHeaderGroups().map((headerGroup) => {
-              return (
-                <Table.Row
-                  key={headerGroup.id}
-                  className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap"
-                >
-                  {headerGroup.headers.map((header) => {
-                    return (
-                      <Table.HeaderCell key={header.id}>
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      </Table.HeaderCell>
-                    )
-                  })}
-                </Table.Row>
-              )
-            })}
-          </Table.Header>
-          <Table.Body className="border-b-0">
-            {table.getRowModel().rows.map((row) => (
-              <Table.Row
-                key={row.id}
-                className={clx(
-                  "transition-fg [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
-                  {
-                    "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
-                      row.getIsSelected(),
-                  }
-                )}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <Table.Cell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </Table.Cell>
-                ))}
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-        <Table.Pagination
-          canNextPage={table.getCanNextPage()}
-          canPreviousPage={table.getCanPreviousPage()}
-          nextPage={table.nextPage}
-          previousPage={table.previousPage}
-          count={count ?? 0}
-          pageIndex={pageIndex}
-          pageCount={table.getPageCount()}
-          pageSize={PAGE_SIZE}
-        />
-        <CommandBar open={!!Object.keys(rowSelection).length}>
-          <CommandBar.Bar>
-            <CommandBar.Value>
-              {t("general.countSelected", {
-                count: Object.keys(rowSelection).length,
-              })}
-            </CommandBar.Value>
-            <CommandBar.Seperator />
-            <CommandBar.Command
-              action={onRemove}
-              shortcut="r"
-              label={t("general.remove")}
-            />
-          </CommandBar.Bar>
-        </CommandBar>
-      </div>
-    </Container>
-  )
-}
-
-const listColumnHelper = createColumnHelper<Product>()
-
-const useListColumns = (id: string) => {
-  const { t } = useTranslation()
-
-  return useMemo(
-    () => [
-      listColumnHelper.display({
-        id: "select",
-        header: ({ table }) => {
-          return (
-            <Checkbox
-              checked={
-                table.getIsSomePageRowsSelected()
-                  ? "indeterminate"
-                  : table.getIsAllPageRowsSelected()
-              }
-              onCheckedChange={(value) =>
-                table.toggleAllPageRowsSelected(!!value)
-              }
-            />
-          )
-        },
-        cell: ({ row }) => {
-          return (
-            <Checkbox
-              checked={row.getIsSelected()}
-              onCheckedChange={(value) => row.toggleSelected(!!value)}
-              onClick={(e) => {
-                e.stopPropagation()
-              }}
-            />
-          )
-        },
-      }),
-      listColumnHelper.accessor("title", {
-        header: t("fields.title"),
-        cell: ({ row }) => {
-          const product = row.original
-
-          return <ProductTitleCell product={product} />
-        },
-      }),
-      listColumnHelper.accessor("variants", {
-        header: t("fields.inventory"),
-        cell: (cell) => {
-          const variants = cell.getValue()
-
-          return <ProductInventoryCell variants={variants} />
-        },
-      }),
-      listColumnHelper.accessor("status", {
-        header: t("fields.status"),
-        cell: ({ getValue }) => {
-          const status = getValue()
-
-          return <ProductStatusCell status={status} />
-        },
-      }),
-      listColumnHelper.display({
-        id: "actions",
-        cell: ({ row }) => {
-          return (
-            <ProductListCellActions
-              productId={row.original.id}
-              salesChannelId={id}
-            />
-          )
-        },
-      }),
-    ],
-    [t]
-  )
-}
-
-const ProductListCellActions = ({
-  salesChannelId,
-  productId,
-}: {
-  productId: string
-  salesChannelId: string
-}) => {
-  const { t } = useTranslation()
-  const { mutateAsync } = useAdminDeleteProductsFromSalesChannel(salesChannelId)
-
-  const onRemove = async () => {
-    await mutateAsync({
-      product_ids: [{ id: productId }],
-    })
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenu.Trigger asChild>
-        <IconButton variant="transparent">
-          <EllipsisHorizontal />
-        </IconButton>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <Link to={`/products/${productId}`}>
-          <DropdownMenu.Item className="gap-x-2">
-            <PencilSquare />
-            <span>Edit</span>
-          </DropdownMenu.Item>
-        </Link>
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item onClick={onRemove} className="gap-x-2">
-          <Trash />
-          <span>{t("general.remove")}</span>
-        </DropdownMenu.Item>
-      </DropdownMenu.Content>
-    </DropdownMenu>
-  )
-}
-
-const AddProductsToSalesChannelSchema = zod.object({
-  product_ids: zod.array(zod.string()).min(1),
-})
-
-const PRODUCT_PAGE_SIZE = 50
-
-type AddProductsModalProps = {
-  salesChannelId: string
-}
-
-const AddProductsModal = ({ salesChannelId }: AddProductsModalProps) => {
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState("")
-
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: PRODUCT_PAGE_SIZE,
-  })
-
-  const pagination = useMemo(
-    () => ({
-      pageIndex,
-      pageSize,
-    }),
-    [pageIndex, pageSize]
-  )
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
-
-  const { products, count, isLoading } = useAdminProducts({
-    expand: "variants,sales_channels",
-    q: query,
-  })
-
-  const columns = useAddProductsColumns(salesChannelId)
-
-  const table = useReactTable({
-    data: (products ?? []) as Product[],
-    columns,
-    pageCount: Math.ceil((count ?? 0) / PRODUCT_PAGE_SIZE),
-    state: {
-      pagination,
-      rowSelection,
-    },
-    onPaginationChange: setPagination,
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
-    getRowId: (row) => row.id,
-    enableRowSelection(row) {
-      return !row.original.sales_channels
-        ?.map((sc) => sc.id)
-        .includes(salesChannelId)
-    },
-    meta: {
-      salesChannelId,
-    },
-  })
-
-  const { t } = useTranslation()
-
-  const { mutateAsync } = useAdminAddProductsToSalesChannel(salesChannelId)
-
-  const onOpenChange = (value: boolean) => {
-    if (!value) {
-      setRowSelection({})
-      setPagination({
-        pageIndex: 0,
-        pageSize: PRODUCT_PAGE_SIZE,
-      })
-    }
-
-    setOpen(value)
-  }
-
-  const onSubmit = async () => {
-    const ids = Object.keys(rowSelection)
-
-    try {
-      AddProductsToSalesChannelSchema.parse({ product_ids: ids })
-    } catch (error) {
-      // TODO: Ask Ludvig where we should display errors in FocusModal forms
-      console.error(error)
-      return
-    }
-
-    await mutateAsync(
-      {
-        product_ids: ids.map((id) => ({ id })),
-      },
-      {
-        onSuccess: () => {
-          queryClient.invalidateQueries(adminProductKeys.lists())
-          onOpenChange(false)
-        },
-      }
-    )
-  }
-
-  return (
-    <FocusModal open={open} onOpenChange={onOpenChange}>
-      <FocusModal.Trigger asChild>
-        <Button variant="secondary">{t("salesChannels.addProducts")}</Button>
-      </FocusModal.Trigger>
-      <FocusModal.Content>
-        <FocusModal.Header>
-          <div className="flex items-center justify-end gap-x-2">
-            <Button variant="secondary" onClick={() => onOpenChange(false)}>
-              {t("general.cancel")}
-            </Button>
-            <Button onClick={onSubmit}>{t("general.save")}</Button>
-          </div>
-        </FocusModal.Header>
-        <FocusModal.Body className="flex h-full w-full flex-col items-center overflow-y-auto">
-          <div className="flex w-full items-center justify-between px-8 pb-4 pt-6">
-            <Heading>{t("salesChannels.addProducts")}</Heading>
-            <div>
-              <DebouncedSearch size="small" value={query} onChange={setQuery} />
-            </div>
-          </div>
-          <div className="w-full flex-1 overflow-y-auto">
-            <Table>
-              <Table.Header>
-                {table.getHeaderGroups().map((headerGroup) => {
-                  return (
-                    <Table.Row
-                      key={headerGroup.id}
-                      className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap"
-                    >
-                      {headerGroup.headers.map((header) => {
-                        return (
-                          <Table.HeaderCell key={header.id}>
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                          </Table.HeaderCell>
-                        )
-                      })}
-                    </Table.Row>
-                  )
-                })}
-              </Table.Header>
-              <Table.Body className="border-b-0">
-                {table.getRowModel().rows.map((row) => (
-                  <Table.Row
-                    key={row.id}
-                    className={clx(
-                      "transition-fg",
-                      {
-                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
-                          row.getIsSelected(),
-                      },
-                      {
-                        "bg-ui-bg-disabled hover:bg-ui-bg-disabled":
-                          row.original.sales_channels
-                            ?.map((sc) => sc.id)
-                            .includes(salesChannelId),
-                      }
-                    )}
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <Table.Cell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </Table.Cell>
-                    ))}
-                  </Table.Row>
-                ))}
-              </Table.Body>
-            </Table>
-          </div>
-          <div className="w-full border-t">
-            <Table.Pagination
-              canNextPage={table.getCanNextPage()}
-              canPreviousPage={table.getCanPreviousPage()}
-              nextPage={table.nextPage}
-              previousPage={table.previousPage}
-              count={count ?? 0}
-              pageIndex={pageIndex}
-              pageCount={table.getPageCount()}
-              pageSize={PRODUCT_PAGE_SIZE}
-            />
-          </div>
-        </FocusModal.Body>
-      </FocusModal.Content>
-    </FocusModal>
-  )
-}
-
-const addProductsColumnHelper = createColumnHelper<Product>()
-
-const useAddProductsColumns = (salesChannelId: string) => {
-  const { t } = useTranslation()
-
-  return useMemo(
-    () => [
-      addProductsColumnHelper.display({
-        id: "select",
-        header: ({ table }) => {
-          return (
-            <Checkbox
-              checked={
-                table.getIsSomePageRowsSelected()
-                  ? "indeterminate"
-                  : table.getIsAllPageRowsSelected()
-              }
-              onCheckedChange={(value) =>
-                table.toggleAllPageRowsSelected(!!value)
-              }
-            />
-          )
-        },
-        cell: ({ row }) => {
-          const isAdded = row.original.sales_channels
-            ?.map((sc) => sc.id)
-            .includes(salesChannelId)
-
-          const isSelected = row.getIsSelected() || isAdded
-
-          const Component = (
-            <Checkbox
-              checked={isSelected}
-              disabled={isAdded}
-              onCheckedChange={(value) => row.toggleSelected(!!value)}
-              onClick={(e) => {
-                e.stopPropagation()
-              }}
-            />
-          )
-
-          if (isAdded) {
-            return (
-              <Tooltip
-                content={t("salesChannels.productAlreadyAdded")}
-                side="right"
-              >
-                {Component}
-              </Tooltip>
-            )
-          }
-
-          return Component
-        },
-      }),
-      addProductsColumnHelper.accessor("title", {
-        header: t("fields.title"),
-        cell: ({ row }) => {
-          const product = row.original
-
-          return <ProductTitleCell product={product} />
-        },
-      }),
-      addProductsColumnHelper.accessor("collection", {
-        header: t("fields.collection"),
-        cell: ({ getValue }) => {
-          const collection = getValue()
-
-          return <ProductCollectionCell collection={collection} />
-        },
-      }),
-      addProductsColumnHelper.accessor("sales_channels", {
-        header: t("fields.availability"),
-        cell: ({ getValue }) => {
-          const salesChannels = getValue()
-
-          return <ProductAvailabilityCell salesChannels={salesChannels} />
-        },
-      }),
-      addProductsColumnHelper.accessor("variants", {
-        header: t("fields.inventory"),
-        cell: (cell) => {
-          const variants = cell.getValue()
-
-          return <ProductInventoryCell variants={variants} />
-        },
-      }),
-      addProductsColumnHelper.accessor("status", {
-        header: t("fields.status"),
-        cell: ({ getValue }) => {
-          const status = getValue()
-
-          return <ProductStatusCell status={status} />
-        },
-      }),
-    ],
-    [t]
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx
new file mode 100644
index 0000000000..a03257b1b8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/add-products-to-sales-channel-form.tsx
@@ -0,0 +1,362 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Product, SalesChannel } from "@medusajs/medusa"
+import {
+  Button,
+  Checkbox,
+  FocusModal,
+  Hint,
+  Table,
+  Tooltip,
+  clx,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  adminProductKeys,
+  useAdminAddProductsToSalesChannel,
+  useAdminProducts,
+} from "medusa-react"
+import { useEffect, useMemo, useState } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+import { Form } from "../../../../components/common/form"
+import {
+  ProductAvailabilityCell,
+  ProductCollectionCell,
+  ProductStatusCell,
+  ProductTitleCell,
+  ProductVariantCell,
+} from "../../../../components/common/product-table-cells"
+import { OrderBy } from "../../../../components/filtering/order-by"
+import { Query } from "../../../../components/filtering/query"
+import { LocalizedTablePagination } from "../../../../components/localization/localized-table-pagination"
+import { useQueryParams } from "../../../../hooks/use-query-params"
+import { queryClient } from "../../../../lib/medusa"
+
+type AddProductsToSalesChannelFormProps = {
+  salesChannel: SalesChannel
+  subscribe: (state: boolean) => void
+  onSuccess: () => void
+}
+
+const AddProductsToSalesChannelSchema = zod.object({
+  product_ids: zod.array(zod.string()).min(1),
+})
+
+const PAGE_SIZE = 50
+
+export const AddProductsToSalesChannelForm = ({
+  salesChannel,
+  subscribe,
+  onSuccess,
+}: AddProductsToSalesChannelFormProps) => {
+  const { t } = useTranslation()
+
+  const form = useForm<zod.infer<typeof AddProductsToSalesChannelSchema>>({
+    defaultValues: {
+      product_ids: [],
+    },
+    resolver: zodResolver(AddProductsToSalesChannelSchema),
+  })
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { mutateAsync, isLoading: isMutating } =
+    useAdminAddProductsToSalesChannel(salesChannel.id)
+
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  useEffect(() => {
+    form.setValue(
+      "product_ids",
+      Object.keys(rowSelection).filter((k) => rowSelection[k])
+    )
+  }, [rowSelection])
+
+  const params = useQueryParams(["q", "order"])
+
+  const { products, count, isLoading } = useAdminProducts(
+    {
+      expand: "variants,sales_channels",
+      ...params,
+    },
+    {
+      keepPreviousData: true,
+    }
+  )
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: (products ?? []) as Product[],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    getRowId: (row) => row.id,
+    enableRowSelection(row) {
+      return !row.original.sales_channels
+        ?.map((sc) => sc.id)
+        .includes(salesChannel.id)
+    },
+    meta: {
+      salesChannelId: salesChannel.id,
+    },
+  })
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      {
+        product_ids: values.product_ids.map((p) => ({ id: p })),
+      },
+      {
+        onSuccess: () => {
+          /**
+           * Invalidate the products list query to refetch products and
+           * determine if they are added to the sales channel or not.
+           */
+          queryClient.invalidateQueries(adminProductKeys.lists())
+          onSuccess()
+        },
+      }
+    )
+  })
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <FocusModal.Header>
+          <div className="flex items-center justify-end gap-x-2">
+            {form.formState.errors.product_ids && (
+              <Hint variant="error">
+                {form.formState.errors.product_ids.message}
+              </Hint>
+            )}
+            <FocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </FocusModal.Close>
+            <Button size="small" type="submit" isLoading={isMutating}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </FocusModal.Header>
+        <FocusModal.Body className="flex h-full w-full flex-col items-center overflow-y-auto divide-y">
+          <div className="flex items-center justify-between w-full px-6 py-4">
+            <div></div>
+            <div className="flex items-center gap-x-2">
+              <Query />
+              <OrderBy keys={["title"]} />
+            </div>
+          </div>
+          <div className="w-full flex-1 overflow-y-auto">
+            <Table>
+              <Table.Header className="border-t-0">
+                {table.getHeaderGroups().map((headerGroup) => {
+                  return (
+                    <Table.Row
+                      key={headerGroup.id}
+                      className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap"
+                    >
+                      {headerGroup.headers.map((header) => {
+                        return (
+                          <Table.HeaderCell key={header.id}>
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </Table.HeaderCell>
+                        )
+                      })}
+                    </Table.Row>
+                  )
+                })}
+              </Table.Header>
+              <Table.Body className="border-b-0">
+                {table.getRowModel().rows.map((row) => (
+                  <Table.Row
+                    key={row.id}
+                    className={clx(
+                      "transition-fg",
+                      {
+                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                          row.getIsSelected(),
+                      },
+                      {
+                        "bg-ui-bg-disabled hover:bg-ui-bg-disabled":
+                          row.original.sales_channels
+                            ?.map((sc) => sc.id)
+                            .includes(salesChannel.id),
+                      }
+                    )}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <Table.Cell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </Table.Cell>
+                    ))}
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          </div>
+          <div className="w-full border-t">
+            <LocalizedTablePagination
+              canNextPage={table.getCanNextPage()}
+              canPreviousPage={table.getCanPreviousPage()}
+              nextPage={table.nextPage}
+              previousPage={table.previousPage}
+              count={count ?? 0}
+              pageIndex={pageIndex}
+              pageCount={table.getPageCount()}
+              pageSize={PAGE_SIZE}
+            />
+          </div>
+        </FocusModal.Body>
+      </form>
+    </Form>
+  )
+}
+
+const columnHelper = createColumnHelper<Product>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row, table }) => {
+          const { salesChannelId } = table.options.meta as {
+            salesChannelId: string
+          }
+
+          const isAdded = row.original.sales_channels
+            ?.map((sc) => sc.id)
+            .includes(salesChannelId)
+
+          const isSelected = row.getIsSelected() || isAdded
+
+          const Component = (
+            <Checkbox
+              checked={isSelected}
+              disabled={isAdded}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+
+          if (isAdded) {
+            return (
+              <Tooltip
+                content={t("salesChannels.productAlreadyAdded")}
+                side="right"
+              >
+                {Component}
+              </Tooltip>
+            )
+          }
+
+          return Component
+        },
+      }),
+      columnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ row }) => {
+          const product = row.original
+
+          return <ProductTitleCell product={product} />
+        },
+      }),
+      columnHelper.accessor("collection", {
+        header: t("fields.collection"),
+        cell: ({ getValue }) => {
+          const collection = getValue()
+
+          return <ProductCollectionCell collection={collection} />
+        },
+      }),
+      columnHelper.accessor("sales_channels", {
+        header: t("fields.availability"),
+        cell: ({ getValue }) => {
+          const salesChannels = getValue()
+
+          return <ProductAvailabilityCell salesChannels={salesChannels} />
+        },
+      }),
+      columnHelper.accessor("variants", {
+        header: t("fields.inventory"),
+        cell: (cell) => {
+          const variants = cell.getValue()
+
+          return <ProductVariantCell variants={variants} />
+        },
+      }),
+      columnHelper.accessor("status", {
+        header: t("fields.status"),
+        cell: ({ getValue }) => {
+          const status = getValue()
+
+          return <ProductStatusCell status={status} />
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/index.ts
new file mode 100644
index 0000000000..87d988e4af
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/components/index.ts
@@ -0,0 +1 @@
+export * from "./add-products-to-sales-channel-form"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/index.ts
new file mode 100644
index 0000000000..3d06c4174c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/index.ts
@@ -0,0 +1 @@
+export { SalesChannelAddProducts as Component } from "./sales-channel-add-products"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/sales-channel-add-products.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/sales-channel-add-products.tsx
new file mode 100644
index 0000000000..39a42fabb5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-add-products/sales-channel-add-products.tsx
@@ -0,0 +1,36 @@
+import { FocusModal } from "@medusajs/ui"
+import { useAdminSalesChannel } from "medusa-react"
+import { useParams } from "react-router-dom"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { AddProductsToSalesChannelForm } from "./components"
+
+export const SalesChannelAddProducts = () => {
+  const { id } = useParams()
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  const { sales_channel, isLoading, isError, error } = useAdminSalesChannel(id!)
+
+  const handleSuccess = () => {
+    onOpenChange(false, true)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        {isLoading || !sales_channel ? (
+          <div>Loading...</div>
+        ) : (
+          <AddProductsToSalesChannelForm
+            salesChannel={sales_channel}
+            onSuccess={handleSuccess}
+            subscribe={subscribe}
+          />
+        )}
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/create-sales-channel-form.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/create-sales-channel-form.tsx
new file mode 100644
index 0000000000..48b4375dc3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/create-sales-channel-form.tsx
@@ -0,0 +1,160 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import {
+  Button,
+  FocusModal,
+  Heading,
+  Input,
+  Switch,
+  Text,
+  Textarea,
+} from "@medusajs/ui"
+import { useAdminCreateSalesChannel } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import * as zod from "zod"
+
+import { useEffect } from "react"
+import { Form } from "../../../../../components/common/form"
+
+type CreateSalesChannelFormProps = {
+  subscribe: (state: boolean) => void
+}
+
+const CreateSalesChannelSchema = zod.object({
+  name: zod.string().min(1),
+  description: zod.string().min(1),
+  enabled: zod.boolean(),
+})
+
+export const CreateSalesChannelForm = ({
+  subscribe,
+}: CreateSalesChannelFormProps) => {
+  const form = useForm<zod.infer<typeof CreateSalesChannelSchema>>({
+    defaultValues: {
+      name: "",
+      description: "",
+      enabled: true,
+    },
+    resolver: zodResolver(CreateSalesChannelSchema),
+  })
+  const { mutateAsync, isLoading } = useAdminCreateSalesChannel()
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      {
+        name: values.name,
+        description: values.description,
+        is_disabled: !values.enabled,
+      },
+      {
+        onSuccess: ({ sales_channel }) => {
+          navigate(`../${sales_channel.id}`)
+        },
+      }
+    )
+  })
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <FocusModal.Header>
+          <div className="flex items-center justify-end gap-x-2">
+            <FocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </FocusModal.Close>
+            <Button size="small" type="submit" isLoading={isLoading}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </FocusModal.Header>
+        <FocusModal.Body className="flex flex-1 flex-col overflow-hidden">
+          <div className="flex flex-1 flex-col items-center overflow-y-auto">
+            <div className="flex w-full max-w-[720px] flex-col gap-y-10 px-2 pb-6 pt-[72px]">
+              <div>
+                <Heading className="capitalize">
+                  {t("salesChannels.createSalesChannel")}
+                </Heading>
+                <Text size="small" className="text-ui-fg-subtle">
+                  {t("salesChannels.createSalesChannelHint")}
+                </Text>
+              </div>
+              <div className="flex flex-col gap-y-4">
+                <div className="grid grid-cols-2">
+                  <Form.Field
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => {
+                      return (
+                        <Form.Item>
+                          <Form.Label>{t("fields.name")}</Form.Label>
+                          <Form.Control>
+                            <Input size="small" {...field} />
+                          </Form.Control>
+                          <Form.ErrorMessage />
+                        </Form.Item>
+                      )
+                    }}
+                  />
+                </div>
+                <Form.Field
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.description")}</Form.Label>
+                        <Form.Control>
+                          <Textarea {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </div>
+              <Form.Field
+                control={form.control}
+                name="enabled"
+                render={({ field: { value, onChange, ...field } }) => {
+                  return (
+                    <Form.Item>
+                      <div className="flex items-center justify-between">
+                        <Form.Label>{t("general.enabled")}</Form.Label>
+                        <Form.Control>
+                          <Switch
+                            {...field}
+                            checked={value}
+                            onCheckedChange={onChange}
+                          />
+                        </Form.Control>
+                      </div>
+                      <Form.Hint>{t("salesChannels.enabledHint")}</Form.Hint>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+            </div>
+          </div>
+        </FocusModal.Body>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/index.ts
new file mode 100644
index 0000000000..d35c2ee15b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/components/create-sales-channel-form/index.ts
@@ -0,0 +1 @@
+export * from "./create-sales-channel-form"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/index.ts
new file mode 100644
index 0000000000..2d294e8ae7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/index.ts
@@ -0,0 +1 @@
+export { SalesChannelCreate as Component } from "./sales-channel-create"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/sales-channel-create.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/sales-channel-create.tsx
new file mode 100644
index 0000000000..6275c0b84b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-create/sales-channel-create.tsx
@@ -0,0 +1,15 @@
+import { FocusModal } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { CreateSalesChannelForm } from "./components/create-sales-channel-form"
+
+export const SalesChannelCreate = () => {
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        <CreateSalesChannelForm subscribe={subscribe} />
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/index.ts
new file mode 100644
index 0000000000..e17c9933df
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./sales-channel-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/sales-channel-general-section.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/sales-channel-general-section.tsx
new file mode 100644
index 0000000000..15435794f3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-general-section/sales-channel-general-section.tsx
@@ -0,0 +1,88 @@
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
+import { SalesChannel } from "@medusajs/medusa"
+import {
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  StatusBadge,
+  Text,
+  usePrompt,
+} from "@medusajs/ui"
+import { useAdminDeleteSalesChannel } from "medusa-react"
+import { useTranslation } from "react-i18next"
+
+import { Link, useNavigate } from "react-router-dom"
+
+type SalesChannelGeneralSection = {
+  salesChannel: SalesChannel
+}
+
+export const SalesChannelGeneralSection = ({
+  salesChannel,
+}: SalesChannelGeneralSection) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+
+  const { mutateAsync } = useAdminDeleteSalesChannel(salesChannel.id)
+
+  const handleDelete = async () => {
+    const confirm = await prompt({
+      title: t("general.areYouSure"),
+      description: t("salesChannels.deleteSalesChannelWarning", {
+        name: salesChannel.name,
+      }),
+      confirmText: t("general.delete"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!confirm) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        navigate("/settings/sales-channels", { replace: true })
+      },
+    })
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div className="flex flex-col">
+          <Heading>{salesChannel.name}</Heading>
+          <Text size="small" className="text-ui-fg-subtle">
+            {salesChannel.description}
+          </Text>
+        </div>
+        <div className="flex items-center gap-x-2">
+          <StatusBadge color={salesChannel.is_disabled ? "red" : "green"}>
+            {t(`general.${salesChannel.is_disabled ? "disabled" : "enabled"}`)}
+          </StatusBadge>
+          <DropdownMenu>
+            <DropdownMenu.Trigger asChild>
+              <IconButton variant="transparent">
+                <EllipsisHorizontal />
+              </IconButton>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <Link to={`/settings/sales-channels/${salesChannel.id}/edit`}>
+                <DropdownMenu.Item className="gap-x-2">
+                  <PencilSquare className="text-ui-fg-subtle" />
+                  <span>{t("general.edit")}</span>
+                </DropdownMenu.Item>
+              </Link>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Item className="gap-x-2" onClick={handleDelete}>
+                <Trash className="text-ui-fg-subtle" />
+                <span>{t("general.delete")}</span>
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        </div>
+      </div>
+    </Container>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/index.ts
new file mode 100644
index 0000000000..72a7d4ad25
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/index.ts
@@ -0,0 +1 @@
+export * from "./sales-channel-product-section"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/sales-channel-product-section.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/sales-channel-product-section.tsx
new file mode 100644
index 0000000000..48838ffd91
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/components/sales-channel-product-section/sales-channel-product-section.tsx
@@ -0,0 +1,348 @@
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
+import { Product, SalesChannel } from "@medusajs/medusa"
+import {
+  Button,
+  Checkbox,
+  CommandBar,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  Table,
+  clx,
+  usePrompt,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  adminProductKeys,
+  useAdminDeleteProductsFromSalesChannel,
+  useAdminProducts,
+} from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+import {
+  ProductStatusCell,
+  ProductTitleCell,
+  ProductVariantCell,
+} from "../../../../../components/common/product-table-cells"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+
+import { FilterGroup } from "../../../../../components/filtering/filter-group"
+import { OrderBy } from "../../../../../components/filtering/order-by"
+import { Query } from "../../../../../components/filtering/query"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+import { queryClient } from "../../../../../lib/medusa"
+
+const PAGE_SIZE = 10
+
+type SalesChannelProductSection = {
+  salesChannel: SalesChannel
+}
+
+export const SalesChannelProductSection = ({
+  salesChannel,
+}: SalesChannelProductSection) => {
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const params = useQueryParams(["q", "order"])
+  const { products, count, isLoading, isError, error } = useAdminProducts(
+    {
+      sales_channel_id: [salesChannel.id],
+      limit: PAGE_SIZE,
+      offset: pageIndex * PAGE_SIZE,
+      ...params,
+    },
+    {
+      keepPreviousData: true,
+    }
+  )
+
+  const columns = useListColumns(salesChannel.id)
+
+  const table = useReactTable({
+    data: (products ?? []) as Product[],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    getRowId: (row) => row.id,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  const { mutateAsync } = useAdminDeleteProductsFromSalesChannel(
+    salesChannel.id
+  )
+  const prompt = usePrompt()
+
+  const { t } = useTranslation()
+
+  const onRemove = async () => {
+    const ids = Object.keys(rowSelection).map((k) => ({ id: k }))
+
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("salesChannels.removeProductsWarning", {
+        count: ids.length,
+        sales_channel: salesChannel.name,
+      }),
+      confirmText: t("general.delete"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(
+      {
+        product_ids: ids,
+      },
+      {
+        onSuccess: () => {
+          setRowSelection({})
+          queryClient.invalidateQueries(adminProductKeys.lists())
+        },
+      }
+    )
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0 divide-y">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("products.domain")}</Heading>
+        <Link to={`/settings/sales-channels/${salesChannel.id}/add-products`}>
+          <Button size="small" variant="secondary">
+            {t("general.add")}
+          </Button>
+        </Link>
+      </div>
+      <div className="flex items-center justify-between px-6 py-4">
+        <FilterGroup
+          filters={{
+            collection: "Collection",
+          }}
+        />
+        <div className="flex items-center gap-x-2">
+          <Query />
+          <OrderBy keys={["title", "status", "created_at", "updated_at"]} />
+        </div>
+      </div>
+      <div>
+        <Table>
+          <Table.Header className="border-t-0">
+            {table.getHeaderGroups().map((headerGroup) => {
+              return (
+                <Table.Row
+                  key={headerGroup.id}
+                  className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap [&_th]:w-1/3"
+                >
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <Table.HeaderCell key={header.id}>
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      </Table.HeaderCell>
+                    )
+                  })}
+                </Table.Row>
+              )
+            })}
+          </Table.Header>
+          <Table.Body className="border-b-0">
+            {table.getRowModel().rows.map((row) => (
+              <Table.Row
+                key={row.id}
+                className={clx(
+                  "transition-fg [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                  {
+                    "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                      row.getIsSelected(),
+                  }
+                )}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <Table.Cell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+        <LocalizedTablePagination
+          canNextPage={table.getCanNextPage()}
+          canPreviousPage={table.getCanPreviousPage()}
+          nextPage={table.nextPage}
+          previousPage={table.previousPage}
+          count={count ?? 0}
+          pageIndex={pageIndex}
+          pageCount={table.getPageCount()}
+          pageSize={PAGE_SIZE}
+        />
+        <CommandBar open={!!Object.keys(rowSelection).length}>
+          <CommandBar.Bar>
+            <CommandBar.Value>
+              {t("general.countSelected", {
+                count: Object.keys(rowSelection).length,
+              })}
+            </CommandBar.Value>
+            <CommandBar.Seperator />
+            <CommandBar.Command
+              action={onRemove}
+              shortcut="r"
+              label={t("general.remove")}
+            />
+          </CommandBar.Bar>
+        </CommandBar>
+      </div>
+    </Container>
+  )
+}
+
+const listColumnHelper = createColumnHelper<Product>()
+
+const useListColumns = (id: string) => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      listColumnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      listColumnHelper.accessor("title", {
+        header: t("fields.title"),
+        cell: ({ row }) => {
+          const product = row.original
+
+          return <ProductTitleCell product={product} />
+        },
+      }),
+      listColumnHelper.accessor("variants", {
+        header: t("fields.variants"),
+        cell: (cell) => {
+          const variants = cell.getValue()
+
+          return <ProductVariantCell variants={variants} />
+        },
+      }),
+      listColumnHelper.accessor("status", {
+        header: t("fields.status"),
+        cell: ({ getValue }) => {
+          const status = getValue()
+
+          return <ProductStatusCell status={status} />
+        },
+      }),
+      listColumnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return (
+            <ProductListCellActions
+              productId={row.original.id}
+              salesChannelId={id}
+            />
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}
+
+const ProductListCellActions = ({
+  salesChannelId,
+  productId,
+}: {
+  productId: string
+  salesChannelId: string
+}) => {
+  const { t } = useTranslation()
+  const { mutateAsync } = useAdminDeleteProductsFromSalesChannel(salesChannelId)
+
+  const onRemove = async () => {
+    await mutateAsync({
+      product_ids: [{ id: productId }],
+    })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <Link to={`/products/${productId}`}>
+          <DropdownMenu.Item className="gap-x-2">
+            <PencilSquare />
+            <span>Edit</span>
+          </DropdownMenu.Item>
+        </Link>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onClick={onRemove} className="gap-x-2">
+          <Trash />
+          <span>{t("general.remove")}</span>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/index.ts
new file mode 100644
index 0000000000..29e5a16bcc
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/index.ts
@@ -0,0 +1 @@
+export { SalesChannelDetail as Component } from "./sales-channel-detail"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx
new file mode 100644
index 0000000000..a8250eb963
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-detail/sales-channel-detail.tsx
@@ -0,0 +1,26 @@
+import { useAdminSalesChannel } from "medusa-react"
+import { Outlet, useParams } from "react-router-dom"
+
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { SalesChannelGeneralSection } from "./components/sales-channel-general-section"
+import { SalesChannelProductSection } from "./components/sales-channel-product-section"
+
+export const SalesChannelDetail = () => {
+  const { id } = useParams()
+  const { sales_channel, isLoading } = useAdminSalesChannel(id!)
+
+  if (isLoading || !sales_channel) {
+    return <div>Loading...</div>
+  }
+
+  console.log("SalesChannelDetail")
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <SalesChannelGeneralSection salesChannel={sales_channel} />
+      <SalesChannelProductSection salesChannel={sales_channel} />
+      <JsonViewSection data={sales_channel} />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/edit-sales-channel-form.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/edit-sales-channel-form.tsx
new file mode 100644
index 0000000000..583e1d562c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/edit-sales-channel-form.tsx
@@ -0,0 +1,140 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { SalesChannel } from "@medusajs/medusa"
+import { Button, Drawer, Input, Switch, Textarea } from "@medusajs/ui"
+import { useAdminUpdateSalesChannel } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { useEffect } from "react"
+import { Form } from "../../../../../components/common/form"
+
+type EditSalesChannelFormProps = {
+  salesChannel: SalesChannel
+  subscribe: (state: boolean) => void
+  onSuccess: () => void
+}
+
+const EditSalesChannelSchema = zod.object({
+  name: zod.string().min(1),
+  description: zod.string().optional(),
+  is_active: zod.boolean(),
+})
+
+export const EditSalesChannelForm = ({
+  salesChannel,
+  subscribe,
+  onSuccess,
+}: EditSalesChannelFormProps) => {
+  const form = useForm<zod.infer<typeof EditSalesChannelSchema>>({
+    defaultValues: {
+      name: salesChannel.name,
+      description: salesChannel.description ?? "",
+      is_active: !salesChannel.is_disabled,
+    },
+    resolver: zodResolver(EditSalesChannelSchema),
+  })
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { t } = useTranslation()
+
+  const { mutateAsync, isLoading } = useAdminUpdateSalesChannel(salesChannel.id)
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      {
+        name: values.name,
+        description: values.description ?? undefined,
+        is_disabled: !values.is_active,
+      },
+      {
+        onSuccess: () => {
+          onSuccess()
+        },
+      }
+    )
+  })
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col overflow-hidden flex-1"
+      >
+        <Drawer.Body className="flex flex-col gap-y-8 overflow-y-auto flex-1 max-w-full">
+          <Form.Field
+            control={form.control}
+            name="name"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label>{t("fields.name")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} size="small" />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="description"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label optional>{t("fields.description")}</Form.Label>
+                  <Form.Control>
+                    <Textarea {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+          <Form.Field
+            control={form.control}
+            name="is_active"
+            render={({ field: { onChange, value, ...field } }) => {
+              return (
+                <Form.Item>
+                  <div className="flex items-center justify-between">
+                    <Form.Label>{t("general.enabled")}</Form.Label>
+                    <Form.Control>
+                      <Switch
+                        onCheckedChange={onChange}
+                        checked={value}
+                        {...field}
+                      />
+                    </Form.Control>
+                  </div>
+                  <Form.Hint>{t("salesChannels.enabledHint")}</Form.Hint>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        </Drawer.Body>
+        <Drawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <Drawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </Drawer.Close>
+            <Button size="small" type="submit" isLoading={isLoading}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </Drawer.Footer>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/index.ts
new file mode 100644
index 0000000000..87a704581c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/components/edit-sales-channel-form/index.ts
@@ -0,0 +1 @@
+export * from "./edit-sales-channel-form"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/index.ts
new file mode 100644
index 0000000000..04317d1479
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/index.ts
@@ -0,0 +1 @@
+export { SalesChannelEdit as Component } from "./sales-channel-edit"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/sales-channel-edit.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/sales-channel-edit.tsx
new file mode 100644
index 0000000000..dfbeeab150
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-edit/sales-channel-edit.tsx
@@ -0,0 +1,41 @@
+import { Drawer, Heading } from "@medusajs/ui"
+import { useAdminSalesChannel } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { EditSalesChannelForm } from "./components/edit-sales-channel-form"
+
+export const SalesChannelEdit = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+  const { sales_channel, isLoading, isError, error } = useAdminSalesChannel(id!)
+
+  const onSuccess = () => {
+    onOpenChange(false, true)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Heading className="capitalize">
+            {t("salesChannels.editSalesChannel")}
+          </Heading>
+        </Drawer.Header>
+        {!isLoading && sales_channel && (
+          <EditSalesChannelForm
+            salesChannel={sales_channel}
+            subscribe={subscribe}
+            onSuccess={onSuccess}
+          />
+        )}
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table/index.ts
new file mode 100644
index 0000000000..730394d184
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table/index.ts
@@ -0,0 +1 @@
+export * from "./sales-channel-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table/sales-channel-list-table.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table/sales-channel-list-table.tsx
new file mode 100644
index 0000000000..c45b80c0a6
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/components/sales-channel-list-table/sales-channel-list-table.tsx
@@ -0,0 +1,232 @@
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
+import { SalesChannel } from "@medusajs/medusa"
+import {
+  Button,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  StatusBadge,
+  Table,
+  clx,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminDeleteSalesChannel, useAdminSalesChannels } from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+import { OrderBy } from "../../../../../components/filtering/order-by"
+import { Query } from "../../../../../components/filtering/query"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+const PAGE_SIZE = 50
+
+export const SalesChannelListTable = () => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { q, order } = useQueryParams(["q", "order"])
+
+  const { sales_channels, count, isLoading, isError, error } =
+    useAdminSalesChannels(
+      {
+        limit: PAGE_SIZE,
+        offset: pageIndex * PAGE_SIZE,
+        q,
+        order,
+      },
+      {
+        keepPreviousData: true,
+      }
+    )
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: sales_channels ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0 divide-y">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("salesChannels.domain")}</Heading>
+        <Link to="/settings/sales-channels/create">
+          <Button size="small" variant="secondary">
+            {t("general.create")}
+          </Button>
+        </Link>
+      </div>
+      <div className="px-6 py-4 flex items-center justify-between">
+        <div></div>
+        <div className="flex items-center gap-x-2">
+          <Query />
+          <OrderBy keys={["name", "created_at", "updated_at"]} />
+        </div>
+      </div>
+      <div>
+        <Table>
+          <Table.Header className="border-t-0">
+            {table.getHeaderGroups().map((headerGroup) => {
+              return (
+                <Table.Row
+                  key={headerGroup.id}
+                  className="[&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap [&_th]:w-1/3"
+                >
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <Table.HeaderCell key={header.id}>
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                      </Table.HeaderCell>
+                    )
+                  })}
+                </Table.Row>
+              )
+            })}
+          </Table.Header>
+          <Table.Body className="border-b-0">
+            {table.getRowModel().rows.map((row) => (
+              <Table.Row
+                key={row.id}
+                className={clx(
+                  "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                  {
+                    "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                      row.getIsSelected(),
+                  }
+                )}
+                onClick={() =>
+                  navigate(`/settings/sales-channels/${row.original.id}`)
+                }
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <Table.Cell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+        <LocalizedTablePagination
+          canNextPage={table.getCanNextPage()}
+          canPreviousPage={table.getCanPreviousPage()}
+          nextPage={table.nextPage}
+          previousPage={table.previousPage}
+          count={count ?? 0}
+          pageIndex={pageIndex}
+          pageCount={table.getPageCount()}
+          pageSize={PAGE_SIZE}
+        />
+      </div>
+    </Container>
+  )
+}
+
+const SalesChannelActions = ({ id }: { id: string }) => {
+  const { mutateAsync } = useAdminDeleteSalesChannel(id)
+  const { t } = useTranslation()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item className="gap-x-2">
+          <PencilSquare className="text-ui-fg-subtle" />
+          <span>{t("general.edit")}</span>
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item className="gap-x-2">
+          <Trash className="text-ui-fg-subtle" />
+          <span>{t("general.delete")}</span>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<SalesChannel>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.accessor("description", {
+        header: t("fields.description"),
+        cell: ({ getValue }) => (
+          <div className="w-[200px] truncate">
+            <span>{getValue()}</span>
+          </div>
+        ),
+      }),
+      columnHelper.accessor("is_disabled", {
+        header: t("fields.status"),
+        cell: ({ getValue }) => {
+          const value = getValue()
+          return (
+            <div>
+              <StatusBadge color={value ? "grey" : "green"}>
+                {value ? t("general.disabled") : t("general.enabled")}
+              </StatusBadge>
+            </div>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return <SalesChannelActions id={row.original.id} />
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-list/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/index.ts
similarity index 100%
rename from packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-list/index.ts
rename to packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/index.ts
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx
new file mode 100644
index 0000000000..9ae07a1ac2
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/sales-channel-list/sales-channel-list.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom"
+import { SalesChannelListTable } from "./components/sales-channel-list-table"
+
+export const SalesChannelList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <SalesChannelListTable />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/index.ts
deleted file mode 100644
index 82989a3bab..0000000000
--- a/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { SalesChannelDetails as Component } from "./sales-channel-details"
diff --git a/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/sales-channel-details.tsx b/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/sales-channel-details.tsx
deleted file mode 100644
index edd3779450..0000000000
--- a/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/sales-channel-details.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useAdminSalesChannel } from "medusa-react"
-import { useParams } from "react-router-dom"
-
-import { JsonView } from "../../../../components/common/json-view"
-import { SalesChannelDetailsSection } from "../../components/sales-channel-details-section"
-import { SalesChannelProductsSection } from "../../components/sales-channel-products-section"
-
-export const SalesChannelDetails = () => {
-  const { id } = useParams()
-  const { sales_channel, isLoading } = useAdminSalesChannel(id!)
-
-  if (isLoading || !sales_channel) {
-    return <div>Loading...</div>
-  }
-
-  return (
-    <div className="flex flex-col gap-y-2">
-      <SalesChannelDetailsSection salesChannel={sales_channel} />
-      <SalesChannelProductsSection salesChannel={sales_channel} />
-      <JsonView data={sales_channel} />
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/settings/settings.tsx b/packages/admin-next/dashboard/src/routes/settings/settings.tsx
index e167c950e8..058b328f7c 100644
--- a/packages/admin-next/dashboard/src/routes/settings/settings.tsx
+++ b/packages/admin-next/dashboard/src/routes/settings/settings.tsx
@@ -1,16 +1,15 @@
-import { useEffect } from "react";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { useEffect } from "react"
+import { Outlet, useLocation, useNavigate } from "react-router-dom"
 
 export const Settings = () => {
-  // Redirect to the first child route if the user navigates to /settings which is /settings/profile
-  const navigate = useNavigate();
-  const location = useLocation();
+  const navigate = useNavigate()
+  const location = useLocation()
 
   useEffect(() => {
     if (location.pathname === "/settings") {
-      navigate("/settings/profile");
+      navigate("/settings/profile")
     }
-  }, [location.pathname, navigate]);
+  }, [location.pathname, navigate])
 
-  return <Outlet />;
-};
+  return <Outlet />
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/edit-store-details-drawer.tsx b/packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/edit-store-details-drawer.tsx
deleted file mode 100644
index e071d314db..0000000000
--- a/packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/edit-store-details-drawer.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod"
-import { Store } from "@medusajs/medusa"
-import { Button, Drawer, Heading, Input } from "@medusajs/ui"
-import { useAdminUpdateStore } from "medusa-react"
-import { useState } from "react"
-import { useForm } from "react-hook-form"
-import { useTranslation } from "react-i18next"
-import * as zod from "zod"
-import { Form } from "../../../../components/common/form"
-
-type EditStoreDetailsDrawerProps = {
-  store: Store
-}
-
-const EditStoreDetailsSchema = zod.object({
-  name: zod.string().optional(),
-  swap_link_template: zod.union([zod.literal(""), zod.string().trim().url()]),
-  payment_link_template: zod.union([
-    zod.literal(""),
-    zod.string().trim().url(),
-  ]),
-  invite_link_template: zod.union([zod.literal(""), zod.string().trim().url()]),
-})
-
-export const EditStoreDetailsDrawer = ({
-  store,
-}: EditStoreDetailsDrawerProps) => {
-  const [open, setOpen] = useState(false)
-  const { t } = useTranslation()
-
-  const form = useForm<zod.infer<typeof EditStoreDetailsSchema>>({
-    defaultValues: {
-      name: store.name,
-      swap_link_template: store.swap_link_template ?? "",
-      payment_link_template: store.payment_link_template ?? "",
-      invite_link_template: store.invite_link_template ?? "",
-    },
-    resolver: zodResolver(EditStoreDetailsSchema),
-  })
-
-  const { mutateAsync, isLoading } = useAdminUpdateStore()
-
-  const onOpenChange = (open: boolean) => {
-    if (!open) {
-      form.reset()
-    }
-
-    setOpen(open)
-  }
-
-  const onSubmit = form.handleSubmit(async (values) => {
-    await mutateAsync(
-      {
-        name: values.name,
-        swap_link_template: values.swap_link_template || undefined,
-        payment_link_template: values.payment_link_template || undefined,
-        invite_link_template: values.invite_link_template || undefined,
-      },
-      {
-        onSuccess: ({ store }) => {
-          form.reset({
-            invite_link_template: store.invite_link_template ?? "",
-            payment_link_template: store.payment_link_template ?? "",
-            swap_link_template: store.swap_link_template ?? "",
-            name: store.name,
-          })
-          onOpenChange(false)
-        },
-        onError: (error) => {
-          console.log(error)
-        },
-      }
-    )
-  })
-
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
-      <Drawer.Trigger asChild>
-        <Button variant="secondary">{t("store.editStoreDetails")}</Button>
-      </Drawer.Trigger>
-      <Form {...form}>
-        <form onSubmit={onSubmit}>
-          <Drawer.Content>
-            <Drawer.Header>
-              <Heading>{t("store.editStoreDetails")}</Heading>
-            </Drawer.Header>
-            <Drawer.Body>
-              <div className="flex flex-col gap-y-8">
-                <Form.Field
-                  control={form.control}
-                  name="name"
-                  render={({ field }) => (
-                    <Form.Item>
-                      <Form.Label>{t("store.storeName")}</Form.Label>
-                      <Form.Control>
-                        <Input size="small" {...field} placeholder="ACME" />
-                      </Form.Control>
-                      <Form.ErrorMessage />
-                    </Form.Item>
-                  )}
-                />
-                <Form.Field
-                  control={form.control}
-                  name="swap_link_template"
-                  render={({ field }) => (
-                    <Form.Item>
-                      <Form.Label>{t("store.swapLinkTemplate")}</Form.Label>
-                      <Form.Control>
-                        <Input
-                          size="small"
-                          {...field}
-                          placeholder="https://www.store.com/swap={id}"
-                        />
-                      </Form.Control>
-                      <Form.ErrorMessage />
-                    </Form.Item>
-                  )}
-                />
-                <Form.Field
-                  control={form.control}
-                  name="payment_link_template"
-                  render={({ field }) => (
-                    <Form.Item>
-                      <Form.Label>{t("store.paymentLinkTemplate")}</Form.Label>
-                      <Form.Control>
-                        <Input
-                          size="small"
-                          {...field}
-                          placeholder="https://www.store.com/payment={id}"
-                        />
-                      </Form.Control>
-                      <Form.ErrorMessage />
-                    </Form.Item>
-                  )}
-                />
-                <Form.Field
-                  control={form.control}
-                  name="invite_link_template"
-                  render={({ field }) => (
-                    <Form.Item>
-                      <Form.Label>{t("store.inviteLinkTemplate")}</Form.Label>
-                      <Form.Control>
-                        <Input
-                          size="small"
-                          {...field}
-                          placeholder="https://www.admin.com/invite?token={invite_token}"
-                        />
-                      </Form.Control>
-                      <Form.ErrorMessage />
-                    </Form.Item>
-                  )}
-                />
-              </div>
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close asChild>
-                <Button variant="secondary" type="button">
-                  Cancel
-                </Button>
-              </Drawer.Close>
-              <Button
-                variant="primary"
-                isLoading={isLoading}
-                onClick={onSubmit}
-              >
-                Save
-              </Button>
-            </Drawer.Footer>
-          </Drawer.Content>
-        </form>
-      </Form>
-    </Drawer>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/index.ts b/packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/index.ts
deleted file mode 100644
index b39ace948d..0000000000
--- a/packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./edit-store-details-drawer";
diff --git a/packages/admin-next/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx b/packages/admin-next/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx
new file mode 100644
index 0000000000..557ca4ed0d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-add-currencies/components/add-currencies-form/add-currencies-form.tsx
@@ -0,0 +1,325 @@
+import { Currency, type Store } from "@medusajs/medusa"
+import {
+  Badge,
+  Button,
+  Checkbox,
+  FocusModal,
+  Hint,
+  StatusBadge,
+  Table,
+  Tooltip,
+  clx,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminCurrencies, useAdminUpdateStore } from "medusa-react"
+import { FormEvent, useMemo, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+import { OrderBy } from "../../../../../components/filtering/order-by"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+type AddCurrenciesFormProps = {
+  store: Store
+}
+
+const AddCurrenciesSchema = zod.object({
+  currencies: zod.array(zod.string()).min(1),
+})
+
+const PAGE_SIZE = 50
+
+export const AddCurrenciesForm = ({ store }: AddCurrenciesFormProps) => {
+  const [errorMessage, setErrorMessage] = useState<{
+    currencies?: string | undefined
+  }>({})
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: PAGE_SIZE,
+  })
+
+  const pagination = useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const params = useQueryParams(["order"])
+  const { currencies, count, isLoading, isError, error } = useAdminCurrencies({
+    limit: PAGE_SIZE,
+    offset: pageIndex * PAGE_SIZE,
+    ...params,
+  })
+
+  const preSelectedRows = store.currencies.map((c) => c.code)
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: currencies ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    getRowId: (row) => row.code,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    enableRowSelection: (row) => !preSelectedRows.includes(row.original.code),
+    manualPagination: true,
+  })
+
+  const { t } = useTranslation()
+
+  const { mutateAsync, isLoading: isMutating } = useAdminUpdateStore()
+
+  const tableContainerRef = useRef<HTMLDivElement>(null)
+
+  // Listen for if the table container that has overflow-y: auto is scrolled, and if true set some state
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  const handleScroll = () => {
+    if (tableContainerRef.current) {
+      setIsScrolled(
+        tableContainerRef.current.scrollTop > 0 &&
+          tableContainerRef.current.scrollTop <
+            tableContainerRef.current.scrollHeight
+      )
+    }
+  }
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const ids = Object.keys(rowSelection)
+
+    try {
+      AddCurrenciesSchema.parse({
+        currencies: ids,
+      })
+
+      setErrorMessage({})
+    } catch (err) {
+      if (err instanceof zod.ZodError) {
+        setErrorMessage(err.flatten().fieldErrors)
+      }
+
+      return
+    }
+
+    const currencies = Array.from(
+      new Set([...ids, ...preSelectedRows])
+    ) as string[]
+
+    await mutateAsync({
+      currencies,
+    })
+  }
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex h-full flex-col overflow-hidden"
+    >
+      <FocusModal.Header>
+        <div className="flex flex-1 items-center justify-between">
+          <div>
+            {errorMessage.currencies && (
+              <Hint variant="error">{errorMessage.currencies}</Hint>
+            )}
+          </div>
+          <div className="flex items-center justify-end gap-x-2">
+            <FocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </FocusModal.Close>
+            <Button size="small" type="submit" isLoading={isMutating}>
+              {t("general.save")}
+            </Button>
+          </div>
+        </div>
+      </FocusModal.Header>
+      <FocusModal.Body className="flex flex-1 flex-col overflow-hidden">
+        <div className="px-6 py-4 flex items-center justify-between border-b">
+          <div></div>
+          <div className="flex items-center gap-x-2">
+            <OrderBy keys={["code"]} />
+          </div>
+        </div>
+        <div
+          className="flex-1 overflow-y-auto"
+          ref={tableContainerRef}
+          onScroll={handleScroll}
+        >
+          <Table className="relative">
+            <Table.Header
+              className={clx(
+                "bg-ui-bg-base transition-fg sticky inset-x-0 top-0 z-10 border-t-0",
+                {
+                  "shadow-elevation-card-hover": isScrolled,
+                }
+              )}
+            >
+              {table.getHeaderGroups().map((headerGroup) => {
+                return (
+                  <Table.Row
+                    key={headerGroup.id}
+                    className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th]:w-1/3"
+                  >
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <Table.HeaderCell key={header.id}>
+                          {flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                        </Table.HeaderCell>
+                      )
+                    })}
+                  </Table.Row>
+                )
+              })}
+            </Table.Header>
+            <Table.Body className="border-b-0">
+              {table.getRowModel().rows.map((row) => (
+                <Table.Row
+                  key={row.id}
+                  className={clx(
+                    "transition-fg last-of-type:border-b-0",
+                    {
+                      "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                        row.getIsSelected(),
+                    },
+                    {
+                      "bg-ui-bg-disabled hover:bg-ui-bg-disabled":
+                        !row.getCanSelect(),
+                    }
+                  )}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <Table.Cell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </div>
+        <div className="w-full border-t">
+          <LocalizedTablePagination
+            canNextPage={table.getCanNextPage()}
+            canPreviousPage={table.getCanPreviousPage()}
+            nextPage={table.nextPage}
+            previousPage={table.previousPage}
+            count={count ?? 0}
+            pageIndex={pageIndex}
+            pageCount={table.getPageCount()}
+            pageSize={PAGE_SIZE}
+          />
+        </div>
+      </FocusModal.Body>
+    </form>
+  )
+}
+
+const columnHelper = createColumnHelper<Currency>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          const isPreSelected = !row.getCanSelect()
+          const isSelected = row.getIsSelected() || isPreSelected
+
+          const Component = (
+            <Checkbox
+              checked={isSelected}
+              disabled={isPreSelected}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+
+          if (isPreSelected) {
+            return (
+              <Tooltip content={t("store.currencyAlreadyAdded")} side="right">
+                {Component}
+              </Tooltip>
+            )
+          }
+
+          return Component
+        },
+      }),
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.accessor("code", {
+        header: t("fields.code"),
+        cell: ({ getValue }) => (
+          <Badge size="small">{getValue().toUpperCase()}</Badge>
+        ),
+      }),
+      columnHelper.accessor("includes_tax", {
+        header: t("fields.taxInclusivePricing"),
+        cell: ({ getValue }) => {
+          const value = getValue()
+
+          return (
+            <StatusBadge color={value ? "green" : "red"}>
+              {value ? t("general.enabled") : t("general.disabled")}
+            </StatusBadge>
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/store-add-currencies/index.ts b/packages/admin-next/dashboard/src/routes/store/store-add-currencies/index.ts
new file mode 100644
index 0000000000..8a88a62bd8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-add-currencies/index.ts
@@ -0,0 +1 @@
+export { StoreAddCurrencies as Component } from "./store-add-currencies"
diff --git a/packages/admin-next/dashboard/src/routes/store/store-add-currencies/store-add-currencies.tsx b/packages/admin-next/dashboard/src/routes/store/store-add-currencies/store-add-currencies.tsx
new file mode 100644
index 0000000000..15aa12dbe4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-add-currencies/store-add-currencies.tsx
@@ -0,0 +1,42 @@
+import { FocusModal } from "@medusajs/ui"
+import { useAdminStore } from "medusa-react"
+import { useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { AddCurrenciesForm } from "./components/add-currencies-form/add-currencies-form"
+
+export const StoreAddCurrencies = () => {
+  const [open, setOpen] = useState(false)
+  const navigate = useNavigate()
+
+  const { store, isLoading, isError, error } = useAdminStore()
+
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  const onOpenChange = (open: boolean) => {
+    if (!open) {
+      setTimeout(() => {
+        navigate(`/settings/store`, { replace: true })
+      }, 200)
+    }
+
+    setOpen(open)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        {isLoading || !store ? (
+          <div>Loading...</div>
+        ) : (
+          <AddCurrenciesForm store={store} />
+        )}
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/index.ts b/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/index.ts
new file mode 100644
index 0000000000..9a84261a47
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/index.ts
@@ -0,0 +1 @@
+export * from "./store-currency-section"
diff --git a/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/store-currency-section.tsx b/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/store-currency-section.tsx
new file mode 100644
index 0000000000..e9be43d95c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-currency-section/store-currencies-section.tsx/store-currency-section.tsx
@@ -0,0 +1,300 @@
+import { BuildingTax, EllipsisHorizontal, Trash } from "@medusajs/icons"
+import { Currency, Store } from "@medusajs/medusa"
+import {
+  Button,
+  Checkbox,
+  CommandBar,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  StatusBadge,
+  Table,
+  clx,
+  usePrompt,
+} from "@medusajs/ui"
+import {
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminUpdateStore } from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+import { LocalizedTablePagination } from "../../../../../../components/localization/localized-table-pagination"
+
+type StoreCurrencySectionProps = {
+  store: Store
+}
+
+const PAGE_SIZE = 20
+
+export const StoreCurrencySection = ({ store }: StoreCurrencySectionProps) => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: store.currencies,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onRowSelectionChange: setRowSelection,
+    getRowId: (row) => row.code,
+    pageCount: Math.ceil(store.currencies.length / PAGE_SIZE),
+    state: {
+      rowSelection,
+    },
+    meta: {
+      currencyCodes: store.currencies.map((c) => c.code),
+    },
+  })
+
+  const { mutateAsync } = useAdminUpdateStore()
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const handleDeleteCurrencies = async () => {
+    const ids = Object.keys(rowSelection)
+
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("store.removeCurrencyWarning", {
+        count: ids.length,
+      }),
+      confirmText: t("general.remove"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(
+      {
+        currencies: store.currencies
+          .filter((c) => !ids.includes(c.code))
+          .map((c) => c.code),
+      },
+      {
+        onSuccess: () => {
+          setRowSelection({})
+        },
+      }
+    )
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("store.currencies")}</Heading>
+        <div>
+          <Link to="/settings/store/add-currencies">
+            <Button size="small" variant="secondary">
+              {t("general.add")}
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <Table>
+        <Table.Header>
+          {table.getHeaderGroups().map((headerGroup) => {
+            return (
+              <Table.Row
+                key={headerGroup.id}
+                className="[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap [&_th]:w-1/3"
+              >
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <Table.HeaderCell key={header.id}>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </Table.HeaderCell>
+                  )
+                })}
+              </Table.Row>
+            )
+          })}
+        </Table.Header>
+        <Table.Body className="border-b-0">
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row
+              key={row.id}
+              className={clx("transition-fg", {
+                "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                  row.getIsSelected(),
+              })}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+      <LocalizedTablePagination
+        canNextPage={table.getCanNextPage()}
+        canPreviousPage={table.getCanPreviousPage()}
+        nextPage={table.nextPage}
+        previousPage={table.previousPage}
+        count={store.currencies.length}
+        pageIndex={table.getState().pagination.pageIndex}
+        pageCount={table.getPageCount()}
+        pageSize={PAGE_SIZE}
+      />
+      <CommandBar open={!!Object.keys(rowSelection).length}>
+        <CommandBar.Bar>
+          <CommandBar.Value>
+            {t("general.countSelected", {
+              count: Object.keys(rowSelection).length,
+            })}
+          </CommandBar.Value>
+          <CommandBar.Seperator />
+          <CommandBar.Command
+            action={handleDeleteCurrencies}
+            shortcut="r"
+            label={t("general.remove")}
+          />
+        </CommandBar.Bar>
+      </CommandBar>
+    </Container>
+  )
+}
+
+const CurrencyActions = ({
+  currency,
+  currencyCodes,
+}: {
+  currency: Currency
+  currencyCodes: string[]
+}) => {
+  const { mutateAsync } = useAdminUpdateStore()
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const handleDeleteCurrency = async () => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("store.removeCurrencyWarning", {
+        count: 1,
+      }),
+      confirmText: t("general.remove"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync({
+      currencies: currencyCodes.filter((c) => c !== currency.code),
+    })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item>
+          <div className="flex items-center gap-x-2">
+            <BuildingTax className="text-ui-fg-subtle" />
+            <span>{t("general.remove")}</span>
+          </div>
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item onClick={handleDeleteCurrency}>
+          <div className="flex items-center gap-x-2">
+            <Trash className="text-ui-fg-subtle" />
+            <span>{t("general.remove")}</span>
+          </div>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<Currency>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      columnHelper.accessor("code", {
+        header: t("fields.code"),
+        cell: ({ getValue }) => getValue().toUpperCase(),
+      }),
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.accessor("includes_tax", {
+        header: "Tax Inclusive Prices",
+        cell: ({ getValue }) => {
+          const value = getValue()
+          const text = value ? t("general.enabled") : t("general.disabled")
+
+          return (
+            <StatusBadge color={value ? "green" : "red"}>{text}</StatusBadge>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row, table }) => {
+          const { currencyCodes } = table.options.meta as {
+            currencyCodes: string[]
+          }
+
+          return (
+            <CurrencyActions
+              currency={row.original}
+              currencyCodes={currencyCodes}
+            />
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-general-section/index.ts b/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-general-section/index.ts
new file mode 100644
index 0000000000..0ea68a992d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./store-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-general-section/store-general-section.tsx b/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-general-section/store-general-section.tsx
new file mode 100644
index 0000000000..73c147547f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-detail/components/store-general-section/store-general-section.tsx
@@ -0,0 +1,99 @@
+import { Store } from "@medusajs/medusa"
+import { Badge, Button, Container, Copy, Heading, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+type StoreGeneralSectionProps = {
+  store: Store
+}
+
+export const StoreGeneralSection = ({ store }: StoreGeneralSectionProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div>
+          <Heading>{t("store.domain")}</Heading>
+          <Text className="text-ui-fg-subtle" size="small">
+            {t("store.manageYourStoresDetails")}
+          </Text>
+        </div>
+        <Link to={"/settings/store/edit"}>
+          <Button size="small" variant="secondary">
+            {t("general.edit")}
+          </Button>
+        </Link>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.name")}
+        </Text>
+        <Text size="small" leading="compact">
+          {store.name}
+        </Text>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("store.defaultCurrency")}
+        </Text>
+        <div className="flex items-center gap-x-2">
+          <Badge rounded="full">
+            {store.default_currency_code.toUpperCase()}
+          </Badge>
+          <Text size="small" leading="compact">
+            {store.default_currency.name}
+          </Text>
+        </div>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("store.swapLinkTemplate")}
+        </Text>
+        {store.swap_link_template ? (
+          <Copy content={store.swap_link_template} asChild>
+            <Badge className="w-fit cursor-pointer" rounded="full">
+              <span>{store.swap_link_template}</span>
+            </Badge>
+          </Copy>
+        ) : (
+          <Text size="small" leading="compact">
+            -
+          </Text>
+        )}
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("store.paymentLinkTemplate")}
+        </Text>
+        {store.payment_link_template ? (
+          <Copy content={store.payment_link_template} asChild>
+            <Badge className="w-fit cursor-pointer" rounded="full">
+              <span>{store.payment_link_template}</span>
+            </Badge>
+          </Copy>
+        ) : (
+          <Text size="small" leading="compact">
+            -
+          </Text>
+        )}
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("store.inviteLinkTemplate")}
+        </Text>
+        {store.invite_link_template ? (
+          <Copy content={store.invite_link_template} asChild>
+            <Badge className="w-fit cursor-pointer" rounded="full">
+              <span>{store.invite_link_template}</span>
+            </Badge>
+          </Copy>
+        ) : (
+          <Text size="small" leading="compact">
+            -
+          </Text>
+        )}
+      </div>
+    </Container>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/store-detail/index.ts b/packages/admin-next/dashboard/src/routes/store/store-detail/index.ts
new file mode 100644
index 0000000000..bc9d614088
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-detail/index.ts
@@ -0,0 +1,2 @@
+export { storeLoader as loader } from "./loader"
+export { StoreDetail as Component } from "./store-detail"
diff --git a/packages/admin-next/dashboard/src/routes/store/views/store-details/loader.ts b/packages/admin-next/dashboard/src/routes/store/store-detail/loader.ts
similarity index 54%
rename from packages/admin-next/dashboard/src/routes/store/views/store-details/loader.ts
rename to packages/admin-next/dashboard/src/routes/store/store-detail/loader.ts
index b4f2ded1f6..fe83eef7e7 100644
--- a/packages/admin-next/dashboard/src/routes/store/views/store-details/loader.ts
+++ b/packages/admin-next/dashboard/src/routes/store/store-detail/loader.ts
@@ -1,37 +1,37 @@
-import { AdminExtendedStoresRes } from "@medusajs/medusa";
-import { Response } from "@medusajs/medusa-js";
-import { adminStoreKeys } from "medusa-react";
-import { redirect } from "react-router-dom";
+import { AdminExtendedStoresRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { adminStoreKeys } from "medusa-react"
+import { redirect } from "react-router-dom"
 
-import { FetchQueryOptions } from "@tanstack/react-query";
-import { medusa, queryClient } from "../../../../lib/medusa";
+import { FetchQueryOptions } from "@tanstack/react-query"
+import { medusa, queryClient } from "../../../lib/medusa"
 
 const storeDetailQuery = () => ({
   queryKey: adminStoreKeys.details(),
   queryFn: async () => medusa.admin.store.retrieve(),
-});
+})
 
 const fetchQuery = async (
   query: FetchQueryOptions<Response<AdminExtendedStoresRes>>
 ) => {
   try {
-    const res = await queryClient.fetchQuery(query);
-    return res;
+    const res = await queryClient.fetchQuery(query)
+    return res
   } catch (error) {
-    const err = error ? JSON.parse(JSON.stringify(error)) : null;
+    const err = error ? JSON.parse(JSON.stringify(error)) : null
 
     if ((err as Error & { status: number })?.status === 401) {
-      redirect("/login", 401);
+      redirect("/login", 401)
     }
   }
-};
+}
 
 export const storeLoader = async () => {
-  const query = storeDetailQuery();
+  const query = storeDetailQuery()
 
   return (
     queryClient.getQueryData<Response<AdminExtendedStoresRes>>(
       query.queryKey
     ) ?? (await fetchQuery(query))
-  );
-};
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/store-detail/store-detail.tsx b/packages/admin-next/dashboard/src/routes/store/store-detail/store-detail.tsx
new file mode 100644
index 0000000000..eb58daa737
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-detail/store-detail.tsx
@@ -0,0 +1,39 @@
+import { useAdminStore } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { Outlet, useLoaderData } from "react-router-dom"
+
+import { JsonViewSection } from "../../../components/common/json-view-section/json-view-section.tsx"
+import { StoreCurrencySection } from "./components/store-currency-section/store-currencies-section.tsx/index.ts"
+import { StoreGeneralSection } from "./components/store-general-section/index.ts"
+import { storeLoader } from "./loader.ts"
+
+export const StoreDetail = () => {
+  const initialData = useLoaderData() as Awaited<ReturnType<typeof storeLoader>>
+
+  const { store, isLoading, isError, error } = useAdminStore({
+    initialData: initialData,
+  })
+
+  const { t } = useTranslation()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError || !store) {
+    if (error) {
+      throw error
+    }
+
+    return <div>{JSON.stringify(error, null, 2)}</div>
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <StoreGeneralSection store={store} />
+      <StoreCurrencySection store={store} />
+      <JsonViewSection data={store} />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/store-edit/components/edit-store-form/edit-store-form.tsx b/packages/admin-next/dashboard/src/routes/store/store-edit/components/edit-store-form/edit-store-form.tsx
new file mode 100644
index 0000000000..619c05111c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-edit/components/edit-store-form/edit-store-form.tsx
@@ -0,0 +1,142 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import type { Store } from "@medusajs/medusa"
+import { Button, Drawer, Input } from "@medusajs/ui"
+import { useAdminUpdateStore } from "medusa-react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+import { Form } from "../../../../../components/common/form"
+
+type EditStoreFormProps = {
+  store: Store
+  onSuccess: () => void
+}
+
+const EditStoreSchema = zod.object({
+  name: zod.string().optional(),
+  swap_link_template: zod.union([zod.literal(""), zod.string().trim().url()]),
+  payment_link_template: zod.union([
+    zod.literal(""),
+    zod.string().trim().url(),
+  ]),
+  invite_link_template: zod.union([zod.literal(""), zod.string().trim().url()]),
+})
+
+export const EditStoreForm = ({ store, onSuccess }: EditStoreFormProps) => {
+  const { mutateAsync, isLoading } = useAdminUpdateStore()
+
+  const form = useForm<zod.infer<typeof EditStoreSchema>>({
+    defaultValues: {
+      name: store.name,
+      swap_link_template: store.swap_link_template ?? "",
+      payment_link_template: store.payment_link_template ?? "",
+      invite_link_template: store.invite_link_template ?? "",
+    },
+    resolver: zodResolver(EditStoreSchema),
+  })
+
+  const { t } = useTranslation()
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    mutateAsync(
+      {
+        name: values.name,
+        invite_link_template: values.invite_link_template || undefined,
+        swap_link_template: values.swap_link_template || undefined,
+        payment_link_template: values.payment_link_template || undefined,
+      },
+      {
+        onSuccess: () => {
+          onSuccess()
+        },
+      }
+    )
+  })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit} className="flex h-full flex-col">
+        <Drawer.Body>
+          <div className="flex flex-col gap-y-8">
+            <Form.Field
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label>{t("fields.name")}</Form.Label>
+                  <Form.Control>
+                    <Input size="small" {...field} placeholder="ACME" />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="swap_link_template"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label>{t("store.swapLinkTemplate")}</Form.Label>
+                  <Form.Control>
+                    <Input
+                      size="small"
+                      {...field}
+                      placeholder="https://www.store.com/swap={id}"
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="payment_link_template"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label>{t("store.paymentLinkTemplate")}</Form.Label>
+                  <Form.Control>
+                    <Input
+                      size="small"
+                      {...field}
+                      placeholder="https://www.store.com/payment={id}"
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+            <Form.Field
+              control={form.control}
+              name="invite_link_template"
+              render={({ field }) => (
+                <Form.Item>
+                  <Form.Label>{t("store.inviteLinkTemplate")}</Form.Label>
+                  <Form.Control>
+                    <Input
+                      size="small"
+                      {...field}
+                      placeholder="https://www.admin.com/invite?token={invite_token}"
+                    />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )}
+            />
+          </div>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <Drawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("general.cancel")}
+              </Button>
+            </Drawer.Close>
+            <Button size="small" isLoading={isLoading} type="submit">
+              {t("general.save")}
+            </Button>
+          </div>
+        </Drawer.Footer>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/store-edit/index.ts b/packages/admin-next/dashboard/src/routes/store/store-edit/index.ts
new file mode 100644
index 0000000000..16ec90284f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-edit/index.ts
@@ -0,0 +1 @@
+export { StoreEdit as Component } from "./store-edit"
diff --git a/packages/admin-next/dashboard/src/routes/store/store-edit/store-edit.tsx b/packages/admin-next/dashboard/src/routes/store/store-edit/store-edit.tsx
new file mode 100644
index 0000000000..313cead0b5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/store-edit/store-edit.tsx
@@ -0,0 +1,49 @@
+import { Drawer, Heading } from "@medusajs/ui"
+import { useAdminStore } from "medusa-react"
+import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { json, useNavigate } from "react-router-dom"
+import { EditStoreForm } from "./components/edit-store-form/edit-store-form"
+
+export const StoreEdit = () => {
+  const [open, setOpen] = useState(false)
+  const { store, isLoading, isError, error } = useAdminStore()
+
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    setOpen(true)
+  }, [])
+
+  const onOpenChange = (open: boolean) => {
+    if (!open) {
+      setTimeout(() => {
+        navigate(`/settings/store`, { replace: true })
+      }, 200)
+    }
+
+    setOpen(open)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  if (!store && !isLoading) {
+    throw json("An unknown error has occured", 500)
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Heading className="capitalize">{t("store.editStore")}</Heading>
+        </Drawer.Header>
+        {store && (
+          <EditStoreForm store={store} onSuccess={() => onOpenChange(false)} />
+        )}
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/store/views/store-details/index.ts b/packages/admin-next/dashboard/src/routes/store/views/store-details/index.ts
deleted file mode 100644
index 9674d35627..0000000000
--- a/packages/admin-next/dashboard/src/routes/store/views/store-details/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { storeLoader as loader } from "./loader";
-export { StoreDetails as Component } from "./store-details";
diff --git a/packages/admin-next/dashboard/src/routes/store/views/store-details/store-details.tsx b/packages/admin-next/dashboard/src/routes/store/views/store-details/store-details.tsx
deleted file mode 100644
index 459dd23143..0000000000
--- a/packages/admin-next/dashboard/src/routes/store/views/store-details/store-details.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Badge, Container, Copy, Heading, Text } from "@medusajs/ui"
-import { useAdminStore } from "medusa-react"
-import { useTranslation } from "react-i18next"
-import { useLoaderData } from "react-router-dom"
-
-import { EditStoreDetailsDrawer } from "../../components/edit-store-details-drawer"
-import { storeLoader } from "./loader"
-
-export const StoreDetails = () => {
-  const initialData = useLoaderData() as Awaited<ReturnType<typeof storeLoader>>
-
-  const { store, isLoading, isError, error } = useAdminStore({
-    initialData: initialData,
-  })
-
-  const { t } = useTranslation()
-
-  if (isLoading) {
-    return <div>Loading...</div>
-  }
-
-  if (isError || !store) {
-    if (error) {
-      throw error
-    }
-
-    return <div>{JSON.stringify(error, null, 2)}</div>
-  }
-
-  return (
-    <div>
-      <Container className="p-0">
-        <div className="border-b px-8 py-6">
-          <Heading>{t("store.domain")}</Heading>
-          <Text className="text-ui-fg-subtle" size="small">
-            {t("store.manageYourStoresDetails")}
-          </Text>
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            {t("store.storeName")}
-          </Text>
-          <Text size="small" leading="compact">
-            {store.name}
-          </Text>
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            {t("store.swapLinkTemplate")}
-          </Text>
-          {store.swap_link_template ? (
-            <Copy content={store.swap_link_template} asChild>
-              <Badge className="w-fit cursor-pointer" rounded="full">
-                <span>{store.swap_link_template}</span>
-              </Badge>
-            </Copy>
-          ) : (
-            <Text size="small" leading="compact">
-              -
-            </Text>
-          )}
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            {t("store.paymentLinkTemplate")}
-          </Text>
-          {store.payment_link_template ? (
-            <Copy content={store.payment_link_template} asChild>
-              <Badge className="w-fit cursor-pointer" rounded="full">
-                <span>{store.payment_link_template}</span>
-              </Badge>
-            </Copy>
-          ) : (
-            <Text size="small" leading="compact">
-              -
-            </Text>
-          )}
-        </div>
-        <div className="grid grid-cols-2 border-b px-8 py-6">
-          <Text size="small" leading="compact" weight="plus">
-            {t("store.inviteLinkTemplate")}
-          </Text>
-          {store.invite_link_template ? (
-            <Copy content={store.invite_link_template} asChild>
-              <Badge className="w-fit cursor-pointer" rounded="full">
-                <span>{store.invite_link_template}</span>
-              </Badge>
-            </Copy>
-          ) : (
-            <Text size="small" leading="compact">
-              -
-            </Text>
-          )}
-        </div>
-        <div className="flex items-center justify-end px-8 py-6">
-          <EditStoreDetailsDrawer store={store} />
-        </div>
-      </Container>
-    </div>
-  )
-}
diff --git a/packages/admin-next/dashboard/src/routes/users/index.ts b/packages/admin-next/dashboard/src/routes/users/index.ts
deleted file mode 100644
index 6fdeb10010..0000000000
--- a/packages/admin-next/dashboard/src/routes/users/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Users as Component } from "./users";
diff --git a/packages/admin-next/dashboard/src/routes/users/user-detail/components/user-general-section/index.ts b/packages/admin-next/dashboard/src/routes/users/user-detail/components/user-general-section/index.ts
new file mode 100644
index 0000000000..4712aa6657
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-detail/components/user-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./user-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/users/user-detail/components/user-general-section/user-general-section.tsx b/packages/admin-next/dashboard/src/routes/users/user-detail/components/user-general-section/user-general-section.tsx
new file mode 100644
index 0000000000..90ab2cefb1
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-detail/components/user-general-section/user-general-section.tsx
@@ -0,0 +1,45 @@
+import { User } from "@medusajs/medusa"
+import { Button, Container, Heading, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+type UserGeneralSection = {
+  user: Omit<User, "password_hash">
+}
+
+export const UserGeneralSection = ({ user }: UserGeneralSection) => {
+  const { t } = useTranslation()
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <div>
+          <Heading>{t("profile.domain")}</Heading>
+          <Text className="text-ui-fg-subtle" size="small">
+            {t("profile.manageYourProfileDetails")}
+          </Text>
+        </div>
+        <Link to={`edit`}>
+          <Button size="small" variant="secondary">
+            {t("profile.editProfile")}
+          </Button>
+        </Link>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.name")}
+        </Text>
+        <Text size="small" leading="compact">
+          {user.first_name} {user.last_name}
+        </Text>
+      </div>
+      <div className="grid grid-cols-2 px-6 py-4">
+        <Text size="small" leading="compact" weight="plus">
+          {t("fields.email")}
+        </Text>
+        <Text size="small" leading="compact">
+          {user.email}
+        </Text>
+      </div>
+    </Container>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/users/user-detail/index.ts b/packages/admin-next/dashboard/src/routes/users/user-detail/index.ts
new file mode 100644
index 0000000000..4f2ddfc432
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-detail/index.ts
@@ -0,0 +1 @@
+export { UserDetail as Component } from "./user-detail"
diff --git a/packages/admin-next/dashboard/src/routes/users/user-detail/user-detail.tsx b/packages/admin-next/dashboard/src/routes/users/user-detail/user-detail.tsx
new file mode 100644
index 0000000000..eadcfc8eb7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-detail/user-detail.tsx
@@ -0,0 +1,29 @@
+import { useAdminUser } from "medusa-react"
+import { Outlet, json, useParams } from "react-router-dom"
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { UserGeneralSection } from "./components/user-general-section"
+
+export const UserDetail = () => {
+  const { id } = useParams()
+  const { user, isLoading, isError, error } = useAdminUser(id!)
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError || !user) {
+    if (error) {
+      throw error
+    }
+
+    throw json("An unknown error has occured", 500)
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <UserGeneralSection user={user} />
+      <JsonViewSection data={user} />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/users/user-edit/index.ts b/packages/admin-next/dashboard/src/routes/users/user-edit/index.ts
new file mode 100644
index 0000000000..ca520c7d9e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-edit/index.ts
@@ -0,0 +1 @@
+export { UserEdit as Component } from "./user-edit"
diff --git a/packages/admin-next/dashboard/src/routes/users/user-edit/user-edit.tsx b/packages/admin-next/dashboard/src/routes/users/user-edit/user-edit.tsx
new file mode 100644
index 0000000000..aa9830cb94
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-edit/user-edit.tsx
@@ -0,0 +1,12 @@
+import { Drawer } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+
+export const UserEdit = () => {
+  const [open, onOpenChange] = useRouteModalState()
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content></Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/users/user-invite/index.ts b/packages/admin-next/dashboard/src/routes/users/user-invite/index.ts
new file mode 100644
index 0000000000..882f7aca37
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-invite/index.ts
@@ -0,0 +1 @@
+export { UserInvite as Component } from "./user-invite"
diff --git a/packages/admin-next/dashboard/src/routes/users/user-invite/user-invite.tsx b/packages/admin-next/dashboard/src/routes/users/user-invite/user-invite.tsx
new file mode 100644
index 0000000000..cb4bd877a0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-invite/user-invite.tsx
@@ -0,0 +1,12 @@
+import { FocusModal } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+
+export const UserInvite = () => {
+  const [open, onOpenChange] = useRouteModalState()
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content></FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/users/user-list/components/user-list-table/index.ts b/packages/admin-next/dashboard/src/routes/users/user-list/components/user-list-table/index.ts
new file mode 100644
index 0000000000..13c4e5e680
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-list/components/user-list-table/index.ts
@@ -0,0 +1 @@
+export * from "./user-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/users/user-list/components/user-list-table/user-list-table.tsx b/packages/admin-next/dashboard/src/routes/users/user-list/components/user-list-table/user-list-table.tsx
new file mode 100644
index 0000000000..19647c3823
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-list/components/user-list-table/user-list-table.tsx
@@ -0,0 +1,156 @@
+import { User } from "@medusajs/medusa"
+import { Checkbox, Container, Heading, Table, clx } from "@medusajs/ui"
+import {
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminUsers } from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+
+export const UserListTable = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { users, isLoading, isError, error } = useAdminUsers()
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: users ?? [],
+    columns,
+    state: {
+      rowSelection,
+    },
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0 divide-y">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("users.domain")}</Heading>
+      </div>
+      <Table>
+        <Table.Header className="border-t-0">
+          {table.getHeaderGroups().map((headerGroup) => {
+            return (
+              <Table.Row
+                key={headerGroup.id}
+                className="[&_th]:w-1/3 [&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap"
+              >
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <Table.HeaderCell key={header.id}>
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </Table.HeaderCell>
+                  )
+                })}
+              </Table.Row>
+            )
+          })}
+        </Table.Header>
+        <Table.Body className="border-b-0">
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row
+              key={row.id}
+              className={clx(
+                "transition-fg cursor-pointer [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                {
+                  "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                    row.getIsSelected(),
+                }
+              )}
+              onClick={() => navigate(row.original.id)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+      <div className="px-6 py-4"></div>
+    </Container>
+  )
+}
+
+const columnHelper = createColumnHelper<Omit<User, "password_hash">>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "name",
+        header: t("fields.name"),
+        cell: ({ row }) => {
+          const { first_name, last_name } = row.original
+
+          if (!first_name && !last_name) {
+            return <span className="text-ui-fg-muted">-</span>
+          }
+
+          return `${first_name || ""} ${last_name || ""}`.trim()
+        },
+      }),
+      columnHelper.accessor("email", {
+        header: t("fields.email"),
+        cell: ({ row }) => {
+          return row.original.email
+        },
+      }),
+      columnHelper.accessor("role", {
+        header: t("users.role"),
+        cell: ({ row }) => {
+          return t(`users.roles.${row.original.role}`)
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/users/user-list/index.ts b/packages/admin-next/dashboard/src/routes/users/user-list/index.ts
new file mode 100644
index 0000000000..c6b98dbbbd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-list/index.ts
@@ -0,0 +1 @@
+export { UserList as Component } from "./user-list"
diff --git a/packages/admin-next/dashboard/src/routes/users/user-list/user-list.tsx b/packages/admin-next/dashboard/src/routes/users/user-list/user-list.tsx
new file mode 100644
index 0000000000..412a8077ce
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/user-list/user-list.tsx
@@ -0,0 +1,9 @@
+import { UserListTable } from "./components/user-list-table"
+
+export const UserList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <UserListTable />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/users/users.tsx b/packages/admin-next/dashboard/src/routes/users/users.tsx
deleted file mode 100644
index 894e17545e..0000000000
--- a/packages/admin-next/dashboard/src/routes/users/users.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { User } from "@medusajs/medusa";
-import { Checkbox, Container, Heading, Table, clx } from "@medusajs/ui";
-import {
-  RowSelectionState,
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { useAdminUsers } from "medusa-react";
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-export const Users = () => {
-  const { users } = useAdminUsers();
-  const columns = useColumns();
-
-  const { t } = useTranslation();
-
-  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
-  const table = useReactTable({
-    data: users ?? [],
-    columns,
-    state: {
-      rowSelection,
-    },
-
-    onRowSelectionChange: setRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-  });
-
-  return (
-    <div>
-      <Container className="p-0 overflow-hidden">
-        <div className="flex items-center justify-between px-8 pt-6 pb-4">
-          <Heading>{t("users.domain")}</Heading>
-        </div>
-        <div>
-          <Table>
-            <Table.Header>
-              {table.getHeaderGroups().map((headerGroup) => {
-                return (
-                  <Table.Row
-                    key={headerGroup.id}
-                    className="[&_th]:w-1/3 [&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap"
-                  >
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <Table.HeaderCell key={header.id}>
-                          {flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                        </Table.HeaderCell>
-                      );
-                    })}
-                  </Table.Row>
-                );
-              })}
-            </Table.Header>
-            <Table.Body className="border-b-0">
-              {table.getRowModel().rows.map((row) => (
-                <Table.Row
-                  key={row.id}
-                  className={clx(
-                    "transition-fg [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
-                    {
-                      "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
-                        row.getIsSelected(),
-                    }
-                  )}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <Table.Cell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </Table.Cell>
-                  ))}
-                </Table.Row>
-              ))}
-            </Table.Body>
-          </Table>
-        </div>
-      </Container>
-    </div>
-  );
-};
-
-const columnHelper = createColumnHelper<Omit<User, "password_hash">>();
-
-const useColumns = () => {
-  const { t } = useTranslation();
-
-  return useMemo(
-    () => [
-      columnHelper.display({
-        id: "select",
-        header: ({ table }) => {
-          return (
-            <Checkbox
-              checked={
-                table.getIsSomePageRowsSelected()
-                  ? "indeterminate"
-                  : table.getIsAllPageRowsSelected()
-              }
-              onCheckedChange={(value) =>
-                table.toggleAllPageRowsSelected(!!value)
-              }
-            />
-          );
-        },
-        cell: ({ row }) => {
-          return (
-            <Checkbox
-              checked={row.getIsSelected()}
-              onCheckedChange={(value) => row.toggleSelected(!!value)}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            />
-          );
-        },
-      }),
-      columnHelper.display({
-        id: "name",
-        header: t("fields.name"),
-        cell: ({ row }) => {
-          const { first_name, last_name } = row.original;
-
-          if (!first_name && !last_name) {
-            return <span className="text-ui-fg-muted">-</span>;
-          }
-
-          return `${first_name || ""} ${last_name || ""}`.trim();
-        },
-      }),
-      columnHelper.accessor("email", {
-        header: t("fields.email"),
-        cell: ({ row }) => {
-          return row.original.email;
-        },
-      }),
-      columnHelper.accessor("role", {
-        header: t("users.role"),
-        cell: ({ row }) => {
-          return t(`users.roles.${row.original.role}`);
-        },
-      }),
-    ],
-    [t]
-  );
-};
diff --git a/packages/design-system/icons/src/components/__tests__/lock-closed-solid-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/lock-closed-solid-mini.spec.tsx
new file mode 100644
index 0000000000..90b25493b8
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/lock-closed-solid-mini.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import LockClosedSolidMini from "../lock-closed-solid-mini"
+
+  describe("LockClosedSolidMini", () => {
+    it("should render the icon without errors", async () => {
+      render(<LockClosedSolidMini data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/triangle-left-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/triangle-left-mini.spec.tsx
new file mode 100644
index 0000000000..78a9edf8ef
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/triangle-left-mini.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TriangleLeftMini from "../triangle-left-mini"
+
+  describe("TriangleLeftMini", () => {
+    it("should render the icon without errors", async () => {
+      render(<TriangleLeftMini data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/triangle-up-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/triangle-up-mini.spec.tsx
new file mode 100644
index 0000000000..38859c4480
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/triangle-up-mini.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TriangleUpMini from "../triangle-up-mini"
+
+  describe("TriangleUpMini", () => {
+    it("should render the icon without errors", async () => {
+      render(<TriangleUpMini data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/triangles-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/triangles-mini.spec.tsx
new file mode 100644
index 0000000000..9dd555ad8a
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/triangles-mini.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TrianglesMini from "../triangles-mini"
+
+  describe("TrianglesMini", () => {
+    it("should render the icon without errors", async () => {
+      render(<TrianglesMini data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/index.ts b/packages/design-system/icons/src/components/index.ts
index df5d4c79ef..85d3ab9b62 100644
--- a/packages/design-system/icons/src/components/index.ts
+++ b/packages/design-system/icons/src/components/index.ts
@@ -164,6 +164,7 @@ export { default as LightBulb } from "./light-bulb"
 export { default as Link } from "./link"
 export { default as Linkedin } from "./linkedin"
 export { default as ListBullet } from "./list-bullet"
+export { default as LockClosedSolidMini } from "./lock-closed-solid-mini"
 export { default as LockClosedSolid } from "./lock-closed-solid"
 export { default as LockOpenSolid } from "./lock-open-solid"
 export { default as MagnifyingGlassMini } from "./magnifying-glass-mini"
@@ -241,7 +242,10 @@ export { default as ToolsSolid } from "./tools-solid"
 export { default as Tools } from "./tools"
 export { default as Trash } from "./trash"
 export { default as TriangleDownMini } from "./triangle-down-mini"
+export { default as TriangleLeftMini } from "./triangle-left-mini"
 export { default as TriangleRightMini } from "./triangle-right-mini"
+export { default as TriangleUpMini } from "./triangle-up-mini"
+export { default as TrianglesMini } from "./triangles-mini"
 export { default as Twitter } from "./twitter"
 export { default as TypescriptEx } from "./typescript-ex"
 export { default as Typescript } from "./typescript"
diff --git a/packages/design-system/icons/src/components/lock-closed-solid-mini.tsx b/packages/design-system/icons/src/components/lock-closed-solid-mini.tsx
new file mode 100644
index 0000000000..4f88e63769
--- /dev/null
+++ b/packages/design-system/icons/src/components/lock-closed-solid-mini.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const LockClosedSolidMini = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M12.889 10a.667.667 0 0 1-.667-.667V6.444A2.225 2.225 0 0 0 10 4.222a2.225 2.225 0 0 0-2.222 2.222v2.89a.667.667 0 0 1-1.334 0v-2.89A3.56 3.56 0 0 1 10 2.89a3.56 3.56 0 0 1 3.556 3.555v2.89a.667.667 0 0 1-.667.666Z"
+        />
+        <path
+          fill={color}
+          d="M13.333 8.667H6.667a2.446 2.446 0 0 0-2.445 2.444v3.556a2.446 2.446 0 0 0 2.445 2.444h6.666a2.447 2.447 0 0 0 2.445-2.444V11.11a2.446 2.446 0 0 0-2.445-2.444Zm-2.666 4.666a.667.667 0 0 1-1.334 0v-.889a.667.667 0 0 1 1.334 0v.89Z"
+        />
+      </svg>
+    )
+  }
+)
+LockClosedSolidMini.displayName = "LockClosedSolidMini"
+export default LockClosedSolidMini
diff --git a/packages/design-system/icons/src/components/lock-closed-solid.tsx b/packages/design-system/icons/src/components/lock-closed-solid.tsx
index 05a2da787b..ef72eb1c7b 100644
--- a/packages/design-system/icons/src/components/lock-closed-solid.tsx
+++ b/packages/design-system/icons/src/components/lock-closed-solid.tsx
@@ -12,11 +12,11 @@ const LockClosedSolid = React.forwardRef<SVGSVGElement, IconProps>(
         {...props}
       >
         <path
-          fill="#212121"
+          fill={color}
           d="M13.611 10a.834.834 0 0 1-.833-.833V5.556A2.782 2.782 0 0 0 10 2.778a2.782 2.782 0 0 0-2.778 2.778v3.61a.834.834 0 0 1-1.666 0v-3.61A4.449 4.449 0 0 1 10 1.11a4.449 4.449 0 0 1 4.444 4.445v3.61c0 .46-.373.834-.833.834Z"
         />
         <path
-          fill="#212121"
+          fill={color}
           d="M14.167 8.333H5.833a3.058 3.058 0 0 0-3.055 3.056v4.444a3.058 3.058 0 0 0 3.055 3.056h8.334a3.058 3.058 0 0 0 3.055-3.056V11.39a3.058 3.058 0 0 0-3.055-3.056Zm-3.334 5.834a.834.834 0 0 1-1.666 0v-1.111a.834.834 0 0 1 1.666 0v1.11Z"
         />
       </svg>
diff --git a/packages/design-system/icons/src/components/lock-open-solid.tsx b/packages/design-system/icons/src/components/lock-open-solid.tsx
index 7a346dd9b2..a677f1670c 100644
--- a/packages/design-system/icons/src/components/lock-open-solid.tsx
+++ b/packages/design-system/icons/src/components/lock-open-solid.tsx
@@ -11,7 +11,7 @@ const LockOpenSolid = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g fill="#212121" clipPath="url(#a)">
+        <g fill={color} clipPath="url(#a)">
           <path d="M8.056 10a.834.834 0 0 1-.834-.833V5.556a2.782 2.782 0 0 0-2.778-2.778 2.782 2.782 0 0 0-2.777 2.778v1.388a.834.834 0 0 1-1.667 0V5.556A4.449 4.449 0 0 1 4.444 1.11 4.449 4.449 0 0 1 8.89 5.556v3.61c0 .46-.373.834-.833.834Z" />
           <path d="M14.722 8.333H6.39a3.058 3.058 0 0 0-3.056 3.056v4.444A3.058 3.058 0 0 0 6.39 18.89h8.333a3.058 3.058 0 0 0 3.056-3.056V11.39a3.058 3.058 0 0 0-3.056-3.056Zm-3.333 5.834a.834.834 0 0 1-1.667 0v-1.111a.834.834 0 0 1 1.667 0v1.11Z" />
         </g>
diff --git a/packages/design-system/icons/src/components/triangle-left-mini.tsx b/packages/design-system/icons/src/components/triangle-left-mini.tsx
new file mode 100644
index 0000000000..09b6c98365
--- /dev/null
+++ b/packages/design-system/icons/src/components/triangle-left-mini.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TriangleLeftMini = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M12.5 12.59c0 .163-.037.323-.108.463a.848.848 0 0 1-.293.335.68.68 0 0 1-.397.111.692.692 0 0 1-.39-.141l-3.454-2.59a.868.868 0 0 1-.263-.33 1.041 1.041 0 0 1 0-.876.868.868 0 0 1 .263-.33l3.455-2.59a.693.693 0 0 1 .39-.142.68.68 0 0 1 .396.112.849.849 0 0 1 .293.335c.07.14.108.3.108.463v5.18Z"
+        />
+      </svg>
+    )
+  }
+)
+TriangleLeftMini.displayName = "TriangleLeftMini"
+export default TriangleLeftMini
diff --git a/packages/design-system/icons/src/components/triangle-up-mini.tsx b/packages/design-system/icons/src/components/triangle-up-mini.tsx
new file mode 100644
index 0000000000..0158d3a6f8
--- /dev/null
+++ b/packages/design-system/icons/src/components/triangle-up-mini.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TriangleUpMini = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M7.41 12.5c-.163 0-.323-.037-.464-.108a.849.849 0 0 1-.334-.293.68.68 0 0 1-.112-.397.693.693 0 0 1 .142-.39l2.59-3.454c.082-.11.195-.2.33-.263a1.04 1.04 0 0 1 .876 0 .868.868 0 0 1 .33.263l2.59 3.455a.693.693 0 0 1 .141.39.68.68 0 0 1-.111.396.85.85 0 0 1-.335.293c-.14.07-.3.108-.464.108H7.41Z"
+        />
+      </svg>
+    )
+  }
+)
+TriangleUpMini.displayName = "TriangleUpMini"
+export default TriangleUpMini
diff --git a/packages/design-system/icons/src/components/triangles-mini.tsx b/packages/design-system/icons/src/components/triangles-mini.tsx
new file mode 100644
index 0000000000..2ab51fb7ed
--- /dev/null
+++ b/packages/design-system/icons/src/components/triangles-mini.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TrianglesMini = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill={color}
+          d="M7.41 8.25c-.163 0-.323-.037-.464-.108a.848.848 0 0 1-.334-.293.68.68 0 0 1-.112-.397.693.693 0 0 1 .142-.39l2.59-3.454c.082-.11.195-.2.33-.263a1.04 1.04 0 0 1 .876 0 .868.868 0 0 1 .33.263l2.59 3.455a.693.693 0 0 1 .141.39.68.68 0 0 1-.111.396.85.85 0 0 1-.335.293c-.14.07-.3.108-.464.108H7.41ZM12.59 11.75c.163 0 .323.037.463.108.14.07.256.172.335.293a.68.68 0 0 1 .111.397.692.692 0 0 1-.141.39l-2.59 3.454a.867.867 0 0 1-.33.263 1.04 1.04 0 0 1-.876 0 .867.867 0 0 1-.33-.263l-2.59-3.455a.693.693 0 0 1-.142-.39.68.68 0 0 1 .112-.396.849.849 0 0 1 .335-.293c.14-.07.3-.108.463-.108h5.18Z"
+        />
+      </svg>
+    )
+  }
+)
+TrianglesMini.displayName = "TrianglesMini"
+export default TrianglesMini
diff --git a/packages/design-system/ui-preset/src/theme/extension/theme.ts b/packages/design-system/ui-preset/src/theme/extension/theme.ts
index 8b0a234e16..6f267b9acf 100644
--- a/packages/design-system/ui-preset/src/theme/extension/theme.ts
+++ b/packages/design-system/ui-preset/src/theme/extension/theme.ts
@@ -12,20 +12,11 @@ export const theme = {
               "DEFAULT": "var(--button-inverted-hover)"
             }
           },
-          "transparent": {
-            "DEFAULT": "var(--button-transparent)",
-            "hover": {
-              "DEFAULT": "var(--button-transparent-hover)"
-            },
-            "pressed": {
-              "DEFAULT": "var(--button-transparent-pressed)"
-            }
-          },
           "neutral": {
+            "DEFAULT": "var(--button-neutral)",
             "pressed": {
               "DEFAULT": "var(--button-neutral-pressed)"
             },
-            "DEFAULT": "var(--button-neutral)",
             "hover": {
               "DEFAULT": "var(--button-neutral-hover)"
             }
@@ -38,30 +29,39 @@ export const theme = {
             "hover": {
               "DEFAULT": "var(--button-danger-hover)"
             }
+          },
+          "transparent": {
+            "hover": {
+              "DEFAULT": "var(--button-transparent-hover)"
+            },
+            "pressed": {
+              "DEFAULT": "var(--button-transparent-pressed)"
+            },
+            "DEFAULT": "var(--button-transparent)"
           }
         },
         "code": {
-          "text": {
-            "base": {
-              "DEFAULT": "var(--code-text-base)"
-            },
+          "fg": {
             "subtle": {
-              "DEFAULT": "var(--code-text-subtle)"
+              "DEFAULT": "var(--code-fg-subtle)"
+            },
+            "muted": {
+              "DEFAULT": "var(--code-fg-muted)"
+            },
+            "base": {
+              "DEFAULT": "var(--code-fg-base)"
             }
           },
           "bg": {
+            "subtle": {
+              "DEFAULT": "var(--code-bg-subtle)"
+            },
             "base": {
               "DEFAULT": "var(--code-bg-base)"
-            },
-            "header": {
-              "DEFAULT": "var(--code-bg-header)"
             }
           },
           "border": {
             "DEFAULT": "var(--code-border)"
-          },
-          "icon": {
-            "DEFAULT": "var(--code-icon)"
           }
         },
         "tag": {
@@ -199,12 +199,12 @@ export const theme = {
             }
           },
           "base": {
-            "hover": {
-              "DEFAULT": "var(--bg-base-hover)"
-            },
             "DEFAULT": "var(--bg-base)",
             "pressed": {
               "DEFAULT": "var(--bg-base-pressed)"
+            },
+            "hover": {
+              "DEFAULT": "var(--bg-base-hover)"
             }
           },
           "subtle": {
diff --git a/packages/design-system/ui-preset/src/theme/tokens/colors.ts b/packages/design-system/ui-preset/src/theme/tokens/colors.ts
index 3dc9aa6c25..fa600b0c02 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/colors.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/colors.ts
@@ -1,9 +1,7 @@
 export const colors = {
   "dark": {
-    "--code-text-subtle": "rgba(105, 110, 119, 1)",
     "--button-transparent-pressed": "rgba(46, 48, 53, 1)",
     "--border-base": "rgba(46, 48, 53, 1)",
-    "--code-text-base": "rgba(237, 238, 240, 1)",
     "--tag-neutral-icon": "rgba(125, 130, 138, 1)",
     "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
     "--fg-on-color": "rgba(255, 255, 255, 1)",
@@ -19,11 +17,13 @@ export const colors = {
     "--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
     "--tag-neutral-text": "rgba(173, 177, 184, 1)",
     "--fg-muted": "rgba(105, 110, 119, 1)",
-    "--code-bg-header": "rgba(24, 24, 26, 1)",
     "--border-loud": "rgba(237, 238, 240, 1)",
     "--bg-base-pressed": "rgba(46, 48, 53, 1)",
     "--bg-disabled": "rgba(39, 40, 45, 1)",
-    "--code-icon": "rgba(70, 75, 80, 1)",
+    "--code-fg-subtle": "rgba(105, 110, 119, 1)",
+    "--code-fg-base": "rgba(237, 238, 240, 1)",
+    "--code-bg-subtle": "rgba(24, 24, 26, 1)",
+    "--code-fg-muted": "rgba(70, 75, 80, 1)",
     "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
     "--border-danger": "rgba(190, 18, 60, 1)",
     "--border-interactive": "rgba(96, 165, 250, 1)",
@@ -64,7 +64,6 @@ export const colors = {
     "--tag-orange-bg": "rgba(69, 26, 3, 1)",
     "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
     "--code-bg-base": "rgba(27, 27, 31, 1)",
-    "--button-transparent": "rgba(255, 255, 255, 0)",
     "--button-neutral": "rgba(39, 40, 45, 1)",
     "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
@@ -105,18 +104,21 @@ export const colors = {
     "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-danger-hover": "rgba(190, 18, 60, 1)",
     "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)"
+    "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-transparent": "rgba(0, 0, 0, 0.01)"
   },
   "light": {
     "--button-inverted": "rgba(3, 7, 18, 1)",
     "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
-    "--code-text-base": "rgba(249, 250, 251, 1)",
+    "--code-fg-subtle": "rgba(156, 163, 175, 1)",
+    "--code-fg-muted": "rgba(107, 114, 128, 1)",
+    "--code-bg-subtle": "rgba(31, 41, 55, 1)",
+    "--code-fg-base": "rgba(249, 250, 251, 1)",
     "--tag-green-bg": "rgba(209, 250, 229, 1)",
     "--border-strong": "rgba(209, 213, 219, 1)",
     "--border-interactive": "rgba(59, 130, 246, 1)",
     "--bg-highlight": "rgba(239, 246, 255, 1)",
-    "--bg-base-hover": "rgba(249, 250, 251, 1)",
     "--tag-neutral-bg": "rgba(243, 244, 246, 1)",
     "--tag-red-bg": "rgba(255, 228, 230, 1)",
     "--tag-orange-bg": "rgba(254, 244, 199, 1)",
@@ -135,7 +137,6 @@ export const colors = {
     "--border-loud": "rgba(3, 7, 18, 1)",
     "--fg-on-inverted": "rgba(255, 255, 255, 1)",
     "--fg-on-color": "rgba(255, 255, 255, 1)",
-    "--button-transparent": "rgba(255, 255, 255, 0)",
     "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
     "--fg-interactive": "rgba(59, 130, 246, 1)",
     "--fg-error": "rgba(225, 29, 72, 1)",
@@ -146,7 +147,6 @@ export const colors = {
     "--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
     "--fg-subtle": "rgba(75, 85, 99, 1)",
     "--fg-muted": "rgba(156, 163, 175, 1)",
-    "--bg-base-pressed": "rgba(243, 244, 246, 1)",
     "--bg-subtle-hover": "rgba(243, 244, 246, 1)",
     "--tag-neutral-border": "rgba(229, 231, 235, 1)",
     "--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
@@ -166,22 +166,11 @@ export const colors = {
     "--tag-red-border": "rgba(254, 205, 211, 1)",
     "--tag-green-border": "rgba(167, 243, 208, 1)",
     "--tag-green-text": "rgba(4, 120, 87, 1)",
-    "--button-transparent-hover": "rgba(249, 250, 251, 1)",
-    "--button-transparent-pressed": "rgba(243, 244, 246, 1)",
     "--code-bg-base": "rgba(17, 24, 39, 1)",
-    "--code-bg-header": "rgba(31, 41, 55, 1)",
-    "--code-text-subtle": "rgba(156, 163, 175, 1)",
     "--code-border": "rgba(55, 65, 81, 1)",
-    "--code-icon": "rgba(107, 114, 128, 1)",
-    "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
-    "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
-    "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
     "--button-neutral": "rgba(255, 255, 255, 1)",
     "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
     "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
-    "--button-neutral-hover": "rgba(249, 250, 251, 1)",
-    "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
-    "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
     "--button-danger": "rgba(225, 29, 72, 1)",
     "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
@@ -213,6 +202,17 @@ export const colors = {
     "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
     "--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
     "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
-    "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)"
+    "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)",
+    "--button-transparent-hover": "rgba(243, 244, 246, 1)",
+    "--button-neutral-pressed": "rgba(229, 231, 235, 1)",
+    "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
+    "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
+    "--button-transparent-pressed": "rgba(229, 231, 235, 1)",
+    "--button-neutral-hover": "rgba(243, 244, 246, 1)",
+    "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
+    "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
+    "--bg-base-pressed": "rgba(243, 244, 246, 1)",
+    "--bg-base-hover": "rgba(249, 250, 251, 1)",
+    "--button-transparent": "rgba(255, 255, 255, 0.01)"
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/ui-preset/src/theme/tokens/components.ts b/packages/design-system/ui-preset/src/theme/tokens/components.ts
index e8577575fa..5644c45b8d 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/components.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/components.ts
@@ -42,18 +42,10 @@ export const components = {
       "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
       "opacity": "16%"
     },
-    ".button-neutral-pressed-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
-      "opacity": "3%"
-    },
     ".button-neutral-gradient": {
       "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
       "opacity": "3%"
     },
-    ".button-neutral-hover-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
-      "opacity": "3%"
-    },
     ".button-danger-gradient": {
       "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
       "opacity": "16%"
@@ -73,6 +65,14 @@ export const components = {
     ".button-danger-hover-gradient": {
       "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
       "opacity": "16%"
+    },
+    ".button-neutral-pressed-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
+      "opacity": "3%"
+    },
+    ".button-neutral-hover-gradient": {
+      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
+      "opacity": "3%"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/ui-preset/src/theme/tokens/typography.ts b/packages/design-system/ui-preset/src/theme/tokens/typography.ts
index d1b21a1f0e..117bcbd0ad 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/typography.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/typography.ts
@@ -47,12 +47,6 @@ export const typography = {
     "fontWeight": "500",
     "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
   },
-  ".h1-core": {
-    "fontSize": "1.25rem",
-    "lineHeight": "2rem",
-    "fontWeight": "500",
-    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
-  },
   ".h3-core": {
     "fontSize": "0.875rem",
     "lineHeight": "1.25rem",
@@ -190,5 +184,11 @@ export const typography = {
     "lineHeight": "1.375rem",
     "fontWeight": "400",
     "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".h1-core": {
+    "fontSize": "1.125rem",
+    "lineHeight": "1.75rem",
+    "fontWeight": "500",
+    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/ui/src/components/avatar/avatar.tsx b/packages/design-system/ui/src/components/avatar/avatar.tsx
index 33e39d6c21..9828742510 100644
--- a/packages/design-system/ui/src/components/avatar/avatar.tsx
+++ b/packages/design-system/ui/src/components/avatar/avatar.tsx
@@ -10,14 +10,44 @@ const avatarVariants = cva({
   base: "border-ui-border-strong flex shrink-0 items-center justify-center overflow-hidden border",
   variants: {
     variant: {
-      squared: "rounded-lg",
+      squared: "",
       rounded: "rounded-full",
     },
     size: {
+      xsmall: "h-5 w-5",
+      small: "h-6 w-6",
       base: "h-8 w-8",
       large: "h-10 w-10",
+      xlarge: "h-12 w-12",
     },
   },
+  compoundVariants: [
+    {
+      variant: "squared",
+      size: "xsmall",
+      className: "rounded-[4px]",
+    },
+    {
+      variant: "squared",
+      size: "small",
+      className: "rounded-md",
+    },
+    {
+      variant: "squared",
+      size: "base",
+      className: "rounded-md",
+    },
+    {
+      variant: "squared",
+      size: "large",
+      className: "rounded-lg",
+    },
+    {
+      variant: "squared",
+      size: "xlarge",
+      className: "rounded-xl",
+    },
+  ],
   defaultVariants: {
     variant: "rounded",
     size: "base",
@@ -28,14 +58,44 @@ const innerVariants = cva({
   base: "aspect-square object-cover object-center",
   variants: {
     variant: {
-      squared: "rounded-lg",
+      squared: "",
       rounded: "rounded-full",
     },
     size: {
-      base: "txt-compact-small-plus h-6 w-6",
-      large: "txt-compact-medium-plus h-8 w-8",
+      xsmall: "txt-compact-xsmall-plus h-4 w-4",
+      small: "txt-compact-xsmall-plus h-5 w-5",
+      base: "txt-compact-small-plus h-7 w-7",
+      large: "txt-compact-medium-plus h-9 w-9",
+      xlarge: "txt-compact-large-plus h-11 w-11",
     },
   },
+  compoundVariants: [
+    {
+      variant: "squared",
+      size: "xsmall",
+      className: "rounded-sm",
+    },
+    {
+      variant: "squared",
+      size: "small",
+      className: "rounded-[4px]",
+    },
+    {
+      variant: "squared",
+      size: "base",
+      className: "rounded-[4px]",
+    },
+    {
+      variant: "squared",
+      size: "large",
+      className: "rounded-md",
+    },
+    {
+      variant: "squared",
+      size: "xlarge",
+      className: "rounded-[10px]",
+    },
+  ],
   defaultVariants: {
     variant: "rounded",
     size: "base",
@@ -60,24 +120,24 @@ const Avatar = React.forwardRef<
   AvatarProps
 >(
   (
-    { 
+    {
       /**
        * The URL of the image used in the Avatar.
        */
-      src, 
+      src,
       /**
        * Text to show in the avatar if the URL provided in `src` can't be opened.
        */
-      fallback, 
+      fallback,
       /**
        * The style of the avatar.
        */
-      variant = "rounded", 
+      variant = "rounded",
       /**
        * The size of the avatar's border radius.
        */
       size = "base",
-      className, 
+      className,
       ...props
     }: AvatarProps,
     ref
@@ -86,7 +146,11 @@ const Avatar = React.forwardRef<
       <Primitives.Root
         ref={ref}
         {...props}
-        className={clx(avatarVariants({ variant, size }), className)}
+        className={clx(
+          "rounded-x",
+          avatarVariants({ variant, size }),
+          className
+        )}
       >
         {src && (
           <Primitives.Image
diff --git a/packages/design-system/ui/src/components/button/button.tsx b/packages/design-system/ui/src/components/button/button.tsx
index 367de6b11b..9422487430 100644
--- a/packages/design-system/ui/src/components/button/button.tsx
+++ b/packages/design-system/ui/src/components/button/button.tsx
@@ -17,30 +17,31 @@ const buttonVariants = cva({
         "shadow-buttons-inverted text-ui-fg-on-inverted bg-ui-button-inverted after:button-inverted-gradient",
         "hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient",
         "active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient",
-        "focus:!shadow-buttons-inverted-focus"
+        "focus-visible:!shadow-buttons-inverted-focus"
       ),
       secondary: clx(
         "shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:button-neutral-gradient",
         "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
         "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
-        "focus:shadow-buttons-neutral-focus"
+        "focus-visible:shadow-buttons-neutral-focus"
       ),
       transparent: clx(
         "after:hidden",
         "text-ui-fg-base bg-ui-button-transparent",
         "hover:bg-ui-button-transparent-hover",
         "active:bg-ui-button-transparent-pressed",
-        "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base",
+        "focus-visible:shadow-buttons-neutral-focus focus-visible:bg-ui-bg-base",
         "disabled:!bg-transparent disabled:!shadow-none"
       ),
       danger: clx(
         "shadow-buttons-colored shadow-buttons-danger text-ui-fg-on-color bg-ui-button-danger after:button-danger-gradient",
         "hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient",
         "active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient",
-        "focus:shadow-buttons-danger-focus"
+        "focus-visible:shadow-buttons-danger-focus"
       ),
     },
     size: {
+      small: "txt-compact-small-plus gap-x-1 px-2 py-1",
       base: "txt-compact-small-plus gap-x-1.5 px-3 py-1.5",
       large: "txt-compact-medium-plus gap-x-1.5 px-4 py-2.5",
       xlarge: "txt-compact-large-plus gap-x-1.5 px-5 py-3.5",
diff --git a/packages/design-system/ui/src/components/calendar/calendar.tsx b/packages/design-system/ui/src/components/calendar/calendar.tsx
index f205e84f0c..7a8364635a 100644
--- a/packages/design-system/ui/src/components/calendar/calendar.tsx
+++ b/packages/design-system/ui/src/components/calendar/calendar.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { ChevronLeftMini, ChevronRightMini } from "@medusajs/icons"
+import { TriangleLeftMini, TriangleRightMini } from "@medusajs/icons"
 import * as React from "react"
 import {
   DayPicker,
@@ -38,7 +38,7 @@ type CalendarProps =
 
 /**
  * This component is based on the [react-date-picker](https://www.npmjs.com/package/react-date-picker) package.
- * 
+ *
  * @excludeExternal
  */
 const Calendar = ({
@@ -56,10 +56,16 @@ const Calendar = ({
   mode = "single",
   /**
    * Whether to show days of previous and next months.
-   * 
+   *
    * @keep
    */
   showOutsideDays = true,
+  /**
+   * The locale to use for formatting dates. To change the locale pass a date-fns locale object.
+   *
+   * @keep
+   */
+  locale,
   ...props
 }: CalendarProps) => {
   return (
@@ -70,12 +76,12 @@ const Calendar = ({
       classNames={{
         months: "flex flex-col sm:flex-row",
         month: "space-y-2 p-3",
-        caption: "flex justify-center relative items-center h-9",
+        caption: "flex justify-center relative items-center h-8",
         caption_label:
-          "txt-compact-small-plus absolute bottom-0 left-0 right-0 top-1 flex items-center justify-center text-ui-fg-base",
+          "txt-compact-small-plus absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center text-ui-fg-base",
         nav: "space-x-1 flex items-center bg-ui-bg-base-pressed rounded-md w-full h-full justify-between p-0.5",
         nav_button: clx(
-          iconButtonVariants({ variant: "primary", size: "base" })
+          iconButtonVariants({ variant: "transparent", size: "small" })
         ),
         nav_button_previous: "!absolute left-0.5",
         nav_button_next: "!absolute right-0.5",
@@ -86,9 +92,9 @@ const Calendar = ({
         ),
         row: "flex w-full mt-2 gap-x-2",
         cell: "txt-compact-small-plus relative rounded-md p-0 text-center focus-within:relative",
-        day: "txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover focus:shadow-borders-interactive-with-focus h-8 w-8 rounded-md p-0 text-center outline-none transition-all",
+        day: "txt-compact-small-plus text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover focus-visible:shadow-borders-interactive-with-focus h-8 w-8 rounded-md p-0 text-center outline-none transition-all",
         day_selected:
-          "bg-ui-bg-interactive text-ui-fg-on-color hover:bg-ui-bg-interactive focus:bg-ui-bg-interactive",
+          "bg-ui-bg-interactive text-ui-fg-on-color hover:bg-ui-bg-interactive focus-visible:bg-ui-bg-interactive",
         day_outside: "text-ui-fg-disabled aria-selected:text-ui-fg-on-color",
         day_disabled: "text-ui-fg-disabled",
         day_range_middle:
@@ -96,9 +102,10 @@ const Calendar = ({
         day_hidden: "invisible",
         ...classNames,
       }}
+      locale={locale}
       components={{
-        IconLeft: () => <ChevronLeftMini />,
-        IconRight: () => <ChevronRightMini />,
+        IconLeft: () => <TriangleLeftMini />,
+        IconRight: () => <TriangleRightMini />,
         Day: Day,
       }}
       {...(props as SingleProps & RangeProps)}
diff --git a/packages/design-system/ui/src/components/checkbox/checkbox.tsx b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
index 251293f3b6..b7f553a5e4 100644
--- a/packages/design-system/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
@@ -23,7 +23,7 @@ const Checkbox = React.forwardRef<
         className
       )}
     >
-      <div className="text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base group-hover:bg-ui-bg-base-hover group-focus:!shadow-borders-interactive-with-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base transition-fg h-[14px] w-[14px] rounded-[3px]">
+      <div className="text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base group-hover:bg-ui-bg-base-hover group-focus-visible:!shadow-borders-interactive-with-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base transition-fg h-[14px] w-[14px] rounded-[3px]">
         <Primitives.Indicator className="absolute inset-0">
           {checked === "indeterminate" ? <MinusMini /> : <CheckMini />}
         </Primitives.Indicator>
diff --git a/packages/design-system/ui/src/components/command-bar/command-bar.tsx b/packages/design-system/ui/src/components/command-bar/command-bar.tsx
index d0336042d3..5cf1bcf6e9 100644
--- a/packages/design-system/ui/src/components/command-bar/command-bar.tsx
+++ b/packages/design-system/ui/src/components/command-bar/command-bar.tsx
@@ -69,7 +69,7 @@ const Root = ({
 Root.displayName = "CommandBar"
 
 /**
- * The value component of the command bar. This component is used to display a value, 
+ * The value component of the command bar. This component is used to display a value,
  * such as the number of selected items which the commands will act on.
  */
 const Value = React.forwardRef<
@@ -143,24 +143,24 @@ interface CommandProps
 const Command = React.forwardRef<HTMLButtonElement, CommandProps>(
   (
     {
-      className, 
+      className,
       /**
        * @ignore
        */
-      type = "button", 
+      type = "button",
       /**
        * The command's label.
        */
-      label, 
+      label,
       /**
        * The function to execute when the command is triggered.
        */
-      action, 
+      action,
       /**
        * The command's shortcut
        */
-      shortcut, 
-      disabled, 
+      shortcut,
+      disabled,
       ...props
     }: CommandProps,
     ref
@@ -188,7 +188,7 @@ const Command = React.forwardRef<HTMLButtonElement, CommandProps>(
         ref={ref}
         className={clx(
           "bg-ui-contrast-bg-base txt-compact-small-plus transition-fg text-ui-contrast-fg-primary flex items-center gap-x-2 px-3 py-2.5 outline-none",
-          "focus:bg-ui-contrast-bg-highlight focus:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
+          "focus-visible:bg-ui-contrast-bg-highlight focus-visible:hover:bg-ui-contrast-bg-base-hover hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus-visible:active:bg-ui-contrast-bg-base-pressed disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
           "last-of-type:-mr-1 last-of-type:pr-4",
           className
         )}
diff --git a/packages/design-system/ui/src/components/currency-input/currency-input.tsx b/packages/design-system/ui/src/components/currency-input/currency-input.tsx
index e3667b6005..1d31516250 100644
--- a/packages/design-system/ui/src/components/currency-input/currency-input.tsx
+++ b/packages/design-system/ui/src/components/currency-input/currency-input.tsx
@@ -15,8 +15,8 @@ const currencyInputVariants = cva({
   ),
   variants: {
     size: {
-      base: "txt-compact-medium h-10 px-3",
-      small: "txt-compact-small h-8 px-2",
+      base: "txt-compact-medium h-8",
+      small: "txt-compact-small h-7",
     },
   },
   defaultVariants: {
@@ -36,27 +36,27 @@ interface CurrencyInputProps
 
 /**
  * This component is based on the input element and supports all of its props
- * 
+ *
  * @excludeExternal
  */
 const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
   (
-    { 
+    {
       /**
        * The input's size.
        */
-      size = "base", 
+      size = "base",
       /**
        * The symbol to show in the input.
        */
-      symbol, 
+      symbol,
       /**
        * The currency code to show in the input.
        */
-      code, 
-      disabled, 
-      onInvalid, 
-      className, 
+      code,
+      disabled,
+      onInvalid,
+      className,
       ...props
     }: CurrencyInputProps,
     ref
@@ -101,7 +101,7 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
         )}
       >
         <span
-          className={clx("w-fit", {
+          className={clx("w-fit min-w-[32px] border-r px-2", {
             "py-[9px]": size === "base",
             "py-[5px]": size === "small",
           })}
@@ -126,10 +126,13 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
           {...props}
         />
         <span
-          className={clx("w-fit min-w-[16px] text-right", {
-            "py-[9px]": size === "base",
-            "py-[5px]": size === "small",
-          })}
+          className={clx(
+            "flex w-fit min-w-[32px] items-center justify-center border-l px-2 text-right",
+            {
+              "py-[9px]": size === "base",
+              "py-[5px]": size === "small",
+            }
+          )}
           role="presentation"
         >
           <Text
diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.tsx
index a05a0055ee..36ac5ff791 100644
--- a/packages/design-system/ui/src/components/date-picker/date-picker.tsx
+++ b/packages/design-system/ui/src/components/date-picker/date-picker.tsx
@@ -4,7 +4,7 @@ import { Time } from "@internationalized/date"
 import { Calendar as CalendarIcon, Minus } from "@medusajs/icons"
 import * as Primitives from "@radix-ui/react-popover"
 import { TimeValue } from "@react-aria/datepicker"
-import { format } from "date-fns"
+import { format, type Locale } from "date-fns"
 import * as React from "react"
 
 import { Button } from "@/components/button"
@@ -19,14 +19,14 @@ const displayVariants = cva({
   base: clx(
     "text-ui-fg-base bg-ui-bg-field transition-fg shadow-buttons-neutral flex w-full items-center gap-x-2 rounded-md outline-none",
     "hover:bg-ui-bg-field-hover",
-    "focus:shadow-borders-interactive-with-active data-[state=open]:shadow-borders-interactive-with-active",
+    "focus-visible:shadow-borders-interactive-with-active data-[state=open]:shadow-borders-interactive-with-active",
     "disabled:bg-ui-bg-disabled disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral",
     "aria-[invalid=true]:!shadow-borders-error"
   ),
   variants: {
     size: {
-      base: "txt-compact-medium h-10 px-3 py-2.5",
-      small: "txt-compact-small h-8 px-2 py-1.5",
+      base: "txt-compact-small h-8 px-2 py-1.5",
+      small: "txt-compact-small h-7 px-2 py-1",
     },
   },
   defaultVariants: {
@@ -39,41 +39,43 @@ interface DisplayProps extends React.ComponentProps<"button"> {
   size?: "small" | "base"
 }
 
-const Display = React.forwardRef<
-  HTMLButtonElement,
-  DisplayProps
->(({ 
-    className, 
-    children, 
-    /**
-     * Placeholder of the date picker's input.
-     */
-    placeholder, 
-    /**
-     * The size of the date picker's input.
-     */
-    size = "base", 
-    ...props 
-  }: DisplayProps, ref) => {
-  return (
-    <Primitives.Trigger asChild>
-      <button
-        ref={ref}
-        className={clx(displayVariants({ size }), className)}
-        {...props}
-      >
-        <CalendarIcon className="text-ui-fg-muted" />
-        <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left">
-          {children ? (
-            children
-          ) : placeholder ? (
-            <span className="text-ui-fg-muted">{placeholder}</span>
-          ) : null}
-        </span>
-      </button>
-    </Primitives.Trigger>
-  )
-})
+const Display = React.forwardRef<HTMLButtonElement, DisplayProps>(
+  (
+    {
+      className,
+      children,
+      /**
+       * Placeholder of the date picker's input.
+       */
+      placeholder,
+      /**
+       * The size of the date picker's input.
+       */
+      size = "base",
+      ...props
+    }: DisplayProps,
+    ref
+  ) => {
+    return (
+      <Primitives.Trigger asChild>
+        <button
+          ref={ref}
+          className={clx(displayVariants({ size }), className)}
+          {...props}
+        >
+          <CalendarIcon className="text-ui-fg-muted" />
+          <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left">
+            {children ? (
+              children
+            ) : placeholder ? (
+              <span className="text-ui-fg-muted">{placeholder}</span>
+            ) : null}
+          </span>
+        </button>
+      </Primitives.Trigger>
+    )
+  }
+)
 Display.displayName = "DatePicker.Display"
 
 const Flyout = React.forwardRef<
@@ -219,7 +221,7 @@ const PresetContainer = <TPreset extends Preset, TValue>({
               className={clx(
                 "txt-compact-small-plus w-full overflow-hidden text-ellipsis whitespace-nowrap rounded-md p-2 text-left",
                 "text-ui-fg-subtle hover:bg-ui-bg-base-hover outline-none transition-all",
-                "focus:bg-ui-bg-base-hover",
+                "focus-visible:bg-ui-bg-base-hover",
                 {
                   "!bg-ui-bg-base-pressed": matchesCurrent(preset),
                 }
@@ -284,6 +286,18 @@ type CalendarProps = {
    * The date to show dates to.
    */
   toDate?: Date
+  /**
+   * Locale to use for formatting dates. To change the locale pass a `date-fns` locale object.
+   */
+  locale?: Locale
+}
+
+type Translations = {
+  cancel?: string
+  apply?: string
+  start?: string
+  end?: string
+  range?: string
 }
 
 interface PickerProps extends CalendarProps {
@@ -299,6 +313,10 @@ interface PickerProps extends CalendarProps {
    * Whether the date picker's input is required.
    */
   required?: boolean
+  /**
+   * The date picker's placeholder.
+   */
+  placeholder?: string
   /**
    * The date picker's size.
    */
@@ -307,6 +325,10 @@ interface PickerProps extends CalendarProps {
    * Whether to show a time picker along with the date picker.
    */
   showTimePicker?: boolean
+  /**
+   * Translation keys for the date picker. Use this to localize the date picker.
+   */
+  translations?: Translations
   id?: string
   "aria-invalid"?: boolean
   "aria-label"?: string
@@ -330,6 +352,8 @@ const SingleDatePicker = ({
   showTimePicker,
   disabled,
   className,
+  placeholder,
+  translations,
   ...props
 }: SingleProps) => {
   const [open, setOpen] = React.useState(false)
@@ -458,7 +482,7 @@ const SingleDatePicker = ({
   return (
     <Primitives.Root open={open} onOpenChange={onOpenChange}>
       <Display
-        placeholder="Pick a date"
+        placeholder={placeholder}
         disabled={disabled}
         className={className}
         aria-required={props.required || props["aria-required"]}
@@ -507,19 +531,21 @@ const SingleDatePicker = ({
               <div className="border-ui-border-base flex items-center gap-x-2 border-t p-3">
                 <Button
                   variant="secondary"
+                  size="small"
                   className="w-full"
                   type="button"
                   onClick={onCancel}
                 >
-                  Cancel
+                  {translations?.cancel ?? "Cancel"}
                 </Button>
                 <Button
                   variant="primary"
+                  size="small"
                   className="w-full"
                   type="button"
                   onClick={onApply}
                 >
-                  Apply
+                  {translations?.apply ?? "Apply"}
                 </Button>
               </div>
             </div>
@@ -558,6 +584,8 @@ const RangeDatePicker = ({
   presets,
   disabled,
   className,
+  placeholder,
+  translations,
   ...props
 }: RangeProps) => {
   const [open, setOpen] = React.useState(false)
@@ -730,7 +758,7 @@ const RangeDatePicker = ({
   return (
     <Primitives.Root open={open} onOpenChange={onOpenChange}>
       <Display
-        placeholder="Pick a date"
+        placeholder={placeholder}
         disabled={disabled}
         className={className}
         aria-required={props.required || props["aria-required"]}
@@ -772,7 +800,9 @@ const RangeDatePicker = ({
               {showTimePicker && (
                 <div className="border-ui-border-base flex items-center justify-evenly gap-x-3 border-t p-3">
                   <div className="flex flex-1 items-center gap-x-2">
-                    <span className="text-ui-fg-subtle">Start:</span>
+                    <span className="text-ui-fg-subtle">
+                      {translations?.start ?? "Start"}:
+                    </span>
                     <TimeInput
                       value={startTime}
                       onChange={(v) => onTimeChange(v, "start")}
@@ -783,7 +813,9 @@ const RangeDatePicker = ({
                   </div>
                   <Minus className="text-ui-fg-muted" />
                   <div className="flex flex-1 items-center gap-x-2">
-                    <span className="text-ui-fg-subtle">End:</span>
+                    <span className="text-ui-fg-subtle">
+                      {translations?.end ?? "End"}:
+                    </span>
                     <TimeInput
                       value={endTime}
                       onChange={(v) => onTimeChange(v, "end")}
@@ -796,15 +828,27 @@ const RangeDatePicker = ({
               )}
               <div className="flex items-center justify-between border-t p-3">
                 <p className={clx("text-ui-fg-subtle txt-compact-small-plus")}>
-                  <span className="text-ui-fg-muted">Range:</span>{" "}
+                  <span className="text-ui-fg-muted">
+                    {translations?.range ?? "Range"}:
+                  </span>{" "}
                   {displayRange}
                 </p>
                 <div className="flex items-center gap-x-2">
-                  <Button variant="secondary" type="button" onClick={onCancel}>
-                    Cancel
+                  <Button
+                    size="small"
+                    variant="secondary"
+                    type="button"
+                    onClick={onCancel}
+                  >
+                    {translations?.cancel ?? "Cancel"}
                   </Button>
-                  <Button variant="primary" type="button" onClick={onApply}>
-                    Apply
+                  <Button
+                    size="small"
+                    variant="primary"
+                    type="button"
+                    onClick={onApply}
+                  >
+                    {translations?.apply ?? "Apply"}
                   </Button>
                 </div>
               </div>
@@ -818,7 +862,7 @@ const RangeDatePicker = ({
 
 /**
  * @interface
- * 
+ *
  * @prop presets - Provide selectable preset configurations.
  * @prop defaultValue - The date selected by default.
  * @prop value - The selected date.
@@ -987,11 +1031,11 @@ const validatePresets = (
  * This component is based on the [Calendar](https://docs.medusajs.com/ui/components/calendar)
  * component and [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover).
  */
-const DatePicker = ({ 
+const DatePicker = ({
   /**
    * The date picker's mode.
    */
-  mode = "single", 
+  mode = "single",
   ...props
 }: DatePickerProps) => {
   if (props.presets) {
diff --git a/packages/design-system/ui/src/components/drawer/drawer.tsx b/packages/design-system/ui/src/components/drawer/drawer.tsx
index 5545eb62e2..dcd5951228 100644
--- a/packages/design-system/ui/src/components/drawer/drawer.tsx
+++ b/packages/design-system/ui/src/components/drawer/drawer.tsx
@@ -52,7 +52,11 @@ const DrawerOverlay = React.forwardRef<
   return (
     <DrawerPrimitives.Overlay
       ref={ref}
-      className={clx("bg-ui-bg-overlay fixed inset-0", className)}
+      className={clx(
+        "bg-ui-bg-overlay fixed inset-0",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )}
       {...props}
     />
   )
@@ -69,8 +73,8 @@ const DrawerContent = React.forwardRef<
       <DrawerPrimitives.Content
         ref={ref}
         className={clx(
-          "bg-ui-bg-base shadow-elevation-modal border-ui-border-base fixed inset-y-2 right-2 flex w-full max-w-[560px] flex-1 flex-col rounded-lg border focus:outline-none",
-          // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-1/2 data-[state=open]:slide-in-from-right-1/2 duration-200",
+          "bg-ui-bg-base shadow-elevation-modal border-ui-border-base fixed inset-y-2 flex flex-1 flex-col rounded-lg border focus-visible:outline-none max-sm:inset-x-2 sm:right-2 sm:max-w-[560px] md:w-full",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-1/2 data-[state=open]:slide-in-from-right-1/2 duration-200",
           className
         )}
         {...props}
@@ -87,14 +91,14 @@ const DrawerHeader = React.forwardRef<
   return (
     <div
       ref={ref}
-      className="border-ui-border-base flex items-start justify-between gap-x-4 border-b px-8 py-6"
+      className="border-ui-border-base flex items-start justify-between gap-x-4 border-b px-6 py-4"
       {...props}
     >
       <div className={clx("flex flex-col gap-y-1", className)}>{children}</div>
       <div className="flex items-center gap-x-2">
         <Kbd>esc</Kbd>
         <DrawerPrimitives.Close asChild>
-          <IconButton variant="transparent">
+          <IconButton size="small" type="button" variant="transparent">
             <XMark />
           </IconButton>
         </DrawerPrimitives.Close>
@@ -109,11 +113,7 @@ const DrawerBody = React.forwardRef<
   React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => {
   return (
-    <div
-      ref={ref}
-      className={clx("flex-1 px-8 pb-16 pt-6", className)}
-      {...props}
-    />
+    <div ref={ref} className={clx("flex-1 px-6 py-4", className)} {...props} />
   )
 })
 DrawerBody.displayName = "Drawer.Body"
@@ -125,7 +125,7 @@ const DrawerFooter = ({
   return (
     <div
       className={clx(
-        "border-ui-border-base flex items-center justify-end space-x-2 overflow-y-scroll border-t px-8 pb-6 pt-4",
+        "border-ui-border-base flex items-center justify-end space-x-2 overflow-y-scroll border-t px-6 py-4",
         className
       )}
       {...props}
diff --git a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
index 9b6a2cb187..3711b4b800 100644
--- a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
@@ -46,7 +46,7 @@ const SubMenuTrigger = React.forwardRef<
   <Primitives.SubTrigger
     ref={ref}
     className={clx(
-      "focus:bg-ui-bg-base-pressed data-[state=open]:bg-ui-bg-base-pressed txt-compact-small flex cursor-default select-none items-center rounded-sm px-3 py-2 outline-none",
+      "focus-visible:bg-ui-bg-base-pressed data-[state=open]:bg-ui-bg-base-pressed txt-compact-small flex cursor-default select-none items-center rounded-sm px-2 py-1.5 outline-none",
       className
     )}
     {...props}
@@ -69,7 +69,7 @@ const SubMenuContent = React.forwardRef<
       ref={ref}
       collisionPadding={collisionPadding}
       className={clx(
-        "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[8rem] overflow-hidden rounded-lg border p-1",
+        "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[8rem] overflow-hidden rounded-lg p-1",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -91,7 +91,7 @@ const Content = React.forwardRef<
       className,
       sideOffset = 8,
       collisionPadding = 8,
-      align = "start",
+      align = "center",
       ...props
     },
     ref
@@ -124,7 +124,7 @@ const Item = React.forwardRef<
   <Primitives.Item
     ref={ref}
     className={clx(
-      "bg-ui-bg-base focus:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-3 py-2 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "bg-ui-bg-base hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors data-[disabled]:pointer-events-none",
       className
     )}
     {...props}
@@ -142,7 +142,7 @@ const CheckboxItem = React.forwardRef<
   <Primitives.CheckboxItem
     ref={ref}
     className={clx(
-      "focus:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled relative flex cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-3 text-sm outline-none transition-colors data-[disabled]:pointer-events-none",
+      "focus-visible:bg-ui-bg-base-pressed hover:bg-ui-bg-base-hover text-ui-fg-base data-[disabled]:text-ui-fg-disabled relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-9 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none",
       className
     )}
     checked={checked}
@@ -168,7 +168,7 @@ const RadioItem = React.forwardRef<
   <Primitives.RadioItem
     ref={ref}
     className={clx(
-      "focus:bg-ui-bg-base-pressed hover:bg-ui-base-hover bg-ui-bg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-3 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[state=checked]:font-medium data-[disabled]:opacity-50",
+      "focus-visible:bg-ui-bg-base-pressed hover:bg-ui-base-hover bg-ui-bg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-9 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[state=checked]:font-medium data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -192,10 +192,7 @@ const Label = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Primitives.Label
     ref={ref}
-    className={clx(
-      "text-ui-fg-subtle txt-compact-xsmall-plus px-2 py-1.5",
-      className
-    )}
+    className={clx("text-ui-fg-subtle txt-compact-xsmall-plus", className)}
     {...props}
   />
 ))
diff --git a/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx b/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
index bb9e7f87bc..dc37af0728 100644
--- a/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
+++ b/packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
@@ -13,16 +13,13 @@ import { clx } from "@/utils/clx"
  * @prop open - Whether the modal is opened.
  * @prop onOpenChange - A function to handle when the modal is opened or closed.
  */
-interface FocusModalRootProps 
-  extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Root> {
-}
+interface FocusModalRootProps
+  extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Root> {}
 
 /**
  * This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
  */
-const FocusModalRoot = (
-  props: FocusModalRootProps
-) => {
+const FocusModalRoot = (props: FocusModalRootProps) => {
   return <FocusModalPrimitives.Root {...props} />
 }
 FocusModalRoot.displayName = "FocusModal"
@@ -35,6 +32,9 @@ const FocusModalTrigger = React.forwardRef<
 })
 FocusModalTrigger.displayName = "FocusModal.Trigger"
 
+const FocusModalClose = FocusModalPrimitives.Close
+FocusModalClose.displayName = "FocusModal.Close"
+
 const FocusModalPortal = ({
   className,
   ...props
@@ -54,7 +54,7 @@ const FocusModalOverlay = React.forwardRef<
       ref={ref}
       className={clx(
         "bg-ui-bg-overlay fixed inset-0",
-        // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -73,8 +73,8 @@ const FocusModalContent = React.forwardRef<
       <FocusModalPrimitives.Content
         ref={ref}
         className={clx(
-          "bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border focus:outline-none",
-          // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 duration-200",
+          "bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border focus-visible:outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-0 data-[state=closed]:slide-in-from-bottom-2  duration-200",
           className
         )}
         {...props}
@@ -102,7 +102,7 @@ const FocusModalHeader = React.forwardRef<
     >
       <div className="flex items-center gap-x-2">
         <FocusModalPrimitives.Close asChild>
-          <IconButton variant="transparent">
+          <IconButton size="small" type="button" variant="transparent">
             <XMark />
           </IconButton>
         </FocusModalPrimitives.Close>
@@ -130,6 +130,7 @@ const FocusModal = Object.assign(FocusModalRoot, {
   Content: FocusModalContent,
   Header: FocusModalHeader,
   Body: FocusModalBody,
+  Close: FocusModalClose,
 })
 
 export { FocusModal }
diff --git a/packages/design-system/ui/src/components/hint/hint.tsx b/packages/design-system/ui/src/components/hint/hint.tsx
index 53765e2cee..24845ccbe0 100644
--- a/packages/design-system/ui/src/components/hint/hint.tsx
+++ b/packages/design-system/ui/src/components/hint/hint.tsx
@@ -1,11 +1,11 @@
+import { ExclamationCircleSolid } from "@medusajs/icons"
 import { VariantProps, cva } from "cva"
 import * as React from "react"
 
-import { ExclamationCircleSolid } from "@medusajs/icons"
 import { clx } from "../../utils/clx"
 
 const hintVariants = cva({
-  base: "txt-compact-xsmall inline-flex items-center gap-x-2",
+  base: "txt-small inline-flex items-center gap-x-2",
   variants: {
     variant: {
       info: "text-ui-fg-subtle",
@@ -17,19 +17,23 @@ const hintVariants = cva({
   },
 })
 
-interface HintProps extends VariantProps<typeof hintVariants>,
-  React.ComponentPropsWithoutRef<"span"> {}
+interface HintProps
+  extends VariantProps<typeof hintVariants>,
+    React.ComponentPropsWithoutRef<"span"> {}
 
 const Hint = React.forwardRef<HTMLSpanElement, HintProps>(
-  ({ 
-    className, 
-    /**
-     * The hint's style.
-     */
-    variant = "info", 
-    children, 
-    ...props 
-  }: HintProps, ref) => {
+  (
+    {
+      className,
+      /**
+       * The hint's style.
+       */
+      variant = "info",
+      children,
+      ...props
+    }: HintProps,
+    ref
+  ) => {
     return (
       <span
         ref={ref}
diff --git a/packages/design-system/ui/src/components/icon-button/icon-button.tsx b/packages/design-system/ui/src/components/icon-button/icon-button.tsx
index dfb69cfc95..539cf6520f 100644
--- a/packages/design-system/ui/src/components/icon-button/icon-button.tsx
+++ b/packages/design-system/ui/src/components/icon-button/icon-button.tsx
@@ -16,18 +16,19 @@ const iconButtonVariants = cva({
         "shadow-buttons-neutral text-ui-fg-subtle bg-ui-button-neutral after:button-neutral-gradient",
         "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
         "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
-        "focus:shadow-buttons-neutral-focus",
+        "focus-visible:shadow-buttons-neutral-focus",
         "after:absolute after:inset-0 after:content-['']"
       ),
       transparent: clx(
         "text-ui-fg-subtle bg-ui-button-transparent",
         "hover:bg-ui-button-transparent-hover",
         "active:bg-ui-button-transparent-pressed",
-        "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base",
+        "focus-visible:shadow-buttons-neutral-focus focus-visible:bg-ui-bg-base",
         "disabled:!bg-transparent disabled:!shadow-none"
       ),
     },
     size: {
+      small: "h-7 w-7 p-1",
       base: "h-8 w-8 p-1.5",
       large: "h-10 w-10 p-2.5",
       xlarge: "h-12 w-12 p-3.5",
diff --git a/packages/design-system/ui/src/components/input/input.tsx b/packages/design-system/ui/src/components/input/input.tsx
index 78542ec113..086c1b4929 100644
--- a/packages/design-system/ui/src/components/input/input.tsx
+++ b/packages/design-system/ui/src/components/input/input.tsx
@@ -8,7 +8,7 @@ import { clx } from "@/utils/clx"
 
 const inputBaseStyles = clx(
   "caret-ui-fg-base bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-borders-base placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full appearance-none rounded-md outline-none",
-  "focus:shadow-borders-interactive-with-active",
+  "focus-visible:shadow-borders-interactive-with-active",
   "disabled:text-ui-fg-disabled disabled:!bg-ui-bg-disabled disabled:placeholder-ui-fg-disabled disabled:cursor-not-allowed",
   "aria-[invalid=true]:!shadow-borders-error  invalid:!shadow-borders-error"
 )
@@ -20,8 +20,8 @@ const inputVariants = cva({
   ),
   variants: {
     size: {
-      base: "txt-compact-medium h-10 px-3 py-[9px]",
-      small: "txt-compact-small h-8 px-2 py-[5px]",
+      base: "txt-compact-small h-8 px-2 py-1.5",
+      small: "txt-compact-small h-7 px-2 py-1",
     },
   },
   defaultVariants: {
@@ -29,87 +29,90 @@ const inputVariants = cva({
   },
 })
 
-interface InputProps extends VariantProps<typeof inputVariants>,
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {}
+interface InputProps
+  extends VariantProps<typeof inputVariants>,
+    Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {}
 
 /**
  * This component is based on the `input` element and supports all of its props
  */
-const Input = React.forwardRef<
-  HTMLInputElement,
-  InputProps
->(({ 
-    className, 
-    type, 
-    /**
-     * The input's size.
-     */
-    size = "base", 
-    ...props 
-  }: InputProps, ref) => {
-  const [typeState, setTypeState] = React.useState(type)
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      type,
+      /**
+       * The input's size.
+       */
+      size = "base",
+      ...props
+    }: InputProps,
+    ref
+  ) => {
+    const [typeState, setTypeState] = React.useState(type)
 
-  const isPassword = type === "password"
-  const isSearch = type === "search"
+    const isPassword = type === "password"
+    const isSearch = type === "search"
 
-  return (
-    <div className="relative">
-      <input
-        ref={ref}
-        type={isPassword ? typeState : type}
-        className={clx(
-          inputVariants({ size: size }),
-          {
-            "pr-11": isPassword && size === "base",
-            "pl-11": isSearch && size === "base",
-            "pr-9": isPassword && size === "small",
-            "pl-9": isSearch && size === "small",
-          },
-          className
-        )}
-        {...props}
-      />
-      {isSearch && (
-        <div
+    return (
+      <div className="relative">
+        <input
+          ref={ref}
+          type={isPassword ? typeState : type}
           className={clx(
-            "text-ui-fg-muted absolute bottom-0 left-0 flex items-center justify-center",
+            inputVariants({ size: size }),
             {
-              "h-10 w-11": size === "base",
-              "h-8 w-9": size === "small",
-            }
+              "pl-8": isSearch && size === "base",
+              "pr-8": isPassword && size === "base",
+              "pl-7": isSearch && size === "small",
+              "pr-7": isPassword && size === "small",
+            },
+            className
           )}
-          role="img"
-        >
-          <MagnifyingGlassMini />
-        </div>
-      )}
-      {isPassword && (
-        <div
-          className={clx(
-            "absolute bottom-0 right-0 flex w-11 items-center justify-center",
-            {
-              "h-10 w-11": size === "base",
-              "h-8 w-9": size === "small",
-            }
-          )}
-        >
-          <button
-            className="text-ui-fg-muted hover:text-ui-fg-base focus:text-ui-fg-base focus:shadow-borders-interactive-w-focus active:text-ui-fg-base h-fit w-fit rounded-sm outline-none transition-all"
-            type="button"
-            onClick={() => {
-              setTypeState(typeState === "password" ? "text" : "password")
-            }}
+          {...props}
+        />
+        {isSearch && (
+          <div
+            className={clx(
+              "text-ui-fg-muted pointer-events-none absolute bottom-0 left-0 flex items-center justify-center",
+              {
+                "h-8 w-8": size === "base",
+                "h-7 w-7": size === "small",
+              }
+            )}
+            role="img"
           >
-            <span className="sr-only">
-              {typeState === "password" ? "Show password" : "Hide password"}
-            </span>
-            {typeState === "password" ? <Eye /> : <EyeSlash />}
-          </button>
-        </div>
-      )}
-    </div>
-  )
-})
+            <MagnifyingGlassMini />
+          </div>
+        )}
+        {isPassword && (
+          <div
+            className={clx(
+              "absolute bottom-0 right-0 flex items-center justify-center border-l",
+              {
+                "h-8 w-8": size === "base",
+                "h-7 w-7": size === "small",
+              }
+            )}
+          >
+            <button
+              className="text-ui-fg-muted hover:text-ui-fg-base focus-visible:text-ui-fg-base focus-visible:shadow-borders-interactive-w-focus active:text-ui-fg-base h-fit w-fit rounded-sm outline-none transition-all"
+              type="button"
+              onClick={() => {
+                setTypeState(typeState === "password" ? "text" : "password")
+              }}
+            >
+              <span className="sr-only">
+                {typeState === "password" ? "Show password" : "Hide password"}
+              </span>
+              {typeState === "password" ? <Eye /> : <EyeSlash />}
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  }
+)
 Input.displayName = "Input"
 
 export { Input, inputBaseStyles }
diff --git a/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx b/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx
index c9ccb869ec..b5a890b043 100644
--- a/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx
+++ b/packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx
@@ -47,12 +47,12 @@ interface StatusIndicatorProps extends React.ComponentPropsWithoutRef<"span"> {
   status: ProgressStatus
 }
 
-const ProgressIndicator = ({ 
+const ProgressIndicator = ({
   /**
    * The current status.
    */
-  status, 
-  ...props 
+  status,
+  ...props
 }: StatusIndicatorProps) => {
   const Icon = React.useMemo(() => {
     switch (status) {
@@ -81,21 +81,24 @@ ProgressIndicator.displayName = "ProgressAccordion.ProgressIndicator"
 const Header = React.forwardRef<
   React.ElementRef<typeof Primitves.Header>,
   HeaderProps
->((
-  { 
-    className, 
-    /**
-     * The current status.
-     */
-    status = "not-started", 
-    children, 
-    ...props 
-  }: HeaderProps, ref) => {
+>(
+  (
+    {
+      className,
+      /**
+       * The current status.
+       */
+      status = "not-started",
+      children,
+      ...props
+    }: HeaderProps,
+    ref
+  ) => {
     return (
       <Primitves.Header
         ref={ref}
         className={clx(
-          "h3-core text-ui-fg-base group flex w-full flex-1 items-center gap-4 px-8",
+          "h3-core text-ui-fg-base group flex w-full flex-1 items-center gap-4 px-6",
           className
         )}
         {...props}
@@ -109,7 +112,8 @@ const Header = React.forwardRef<
         </Primitves.Trigger>
       </Primitves.Header>
     )
-})
+  }
+)
 Header.displayName = "ProgressAccordion.Header"
 
 const Content = React.forwardRef<
@@ -121,7 +125,7 @@ const Content = React.forwardRef<
       ref={ref}
       className={clx(
         "overflow-hidden",
-        "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down pl-24 pr-8",
+        "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down pl-[88px] pr-6",
         className
       )}
       {...props}
diff --git a/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx
index 6f8d24bda0..4dd9915295 100644
--- a/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx
+++ b/packages/design-system/ui/src/components/progress-tabs/progress-tabs.tsx
@@ -13,7 +13,7 @@ import { clx } from "@/utils/clx"
 
 /**
  * This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves.
- * 
+ *
  * @excludeExternal
  */
 const ProgressTabsRoot = (props: ProgressTabsPrimitives.TabsProps) => {
@@ -29,11 +29,7 @@ interface IndicatorProps
   status?: ProgressStatus
 }
 
-const ProgressIndicator = ({ 
-  status, 
-  className, 
-  ...props 
-}: IndicatorProps) => {
+const ProgressIndicator = ({ status, className, ...props }: IndicatorProps) => {
   const Icon = React.useMemo(() => {
     switch (status) {
       case "not-started":
@@ -72,24 +68,34 @@ interface ProgressTabsTriggerProps
 const ProgressTabsTrigger = React.forwardRef<
   React.ElementRef<typeof ProgressTabsPrimitives.Trigger>,
   ProgressTabsTriggerProps
->(({ className, children, status = "not-started", ...props }: ProgressTabsTriggerProps, ref) => (
-  <ProgressTabsPrimitives.Trigger
-    ref={ref}
-    className={clx(
-      "txt-compact-small-plus transition-fg text-ui-fg-muted bg-ui-bg-subtle border-r-ui-border-base inline-flex h-14 w-full max-w-[200px] flex-1 items-center gap-x-2 border-r px-4 text-left outline-none",
-      "group/trigger overflow-hidden text-ellipsis whitespace-nowrap",
-      "disabled:bg-ui-bg-disabled disabled:text-ui-fg-muted",
-      "hover:bg-ui-bg-subtle-hover",
-      "focus:bg-ui-bg-base focus:z-[1]",
-      "data-[state=active]:text-ui-fg-base data-[state=active]:bg-ui-bg-base",
-      className
-    )}
-    {...props}
-  >
-    <ProgressIndicator status={status} />
-    {children}
-  </ProgressTabsPrimitives.Trigger>
-))
+>(
+  (
+    {
+      className,
+      children,
+      status = "not-started",
+      ...props
+    }: ProgressTabsTriggerProps,
+    ref
+  ) => (
+    <ProgressTabsPrimitives.Trigger
+      ref={ref}
+      className={clx(
+        "txt-compact-small-plus transition-fg text-ui-fg-muted bg-ui-bg-subtle border-r-ui-border-base inline-flex h-14 w-full max-w-[200px] flex-1 items-center gap-x-2 border-r px-4 text-left outline-none",
+        "group/trigger overflow-hidden text-ellipsis whitespace-nowrap",
+        "disabled:bg-ui-bg-disabled disabled:text-ui-fg-muted",
+        "hover:bg-ui-bg-subtle-hover",
+        "focus-visible:bg-ui-bg-base focus:z-[1]",
+        "data-[state=active]:text-ui-fg-base data-[state=active]:bg-ui-bg-base",
+        className
+      )}
+      {...props}
+    >
+      <ProgressIndicator status={status} />
+      {children}
+    </ProgressTabsPrimitives.Trigger>
+  )
+)
 ProgressTabsTrigger.displayName = "ProgressTabs.Trigger"
 
 const ProgressTabsList = React.forwardRef<
diff --git a/packages/design-system/ui/src/components/prompt/prompt.tsx b/packages/design-system/ui/src/components/prompt/prompt.tsx
index c292510df5..902a9a9915 100644
--- a/packages/design-system/ui/src/components/prompt/prompt.tsx
+++ b/packages/design-system/ui/src/components/prompt/prompt.tsx
@@ -7,10 +7,50 @@ import { Button } from "@/components/button"
 import { Heading } from "@/components/heading"
 import { clx } from "@/utils/clx"
 
+type PromptVariant = "danger" | "confirmation"
+
+const PromptContext = React.createContext<{ variant: PromptVariant }>({
+  variant: "danger",
+})
+
+const usePromptContext = () => {
+  const context = React.useContext(PromptContext)
+  if (!context) {
+    throw new Error("usePromptContext must be used within a PromptProvider")
+  }
+  return context
+}
+
+type PromptProviderProps = React.PropsWithChildren<{
+  variant: PromptVariant
+}>
+
+const PromptProvider = ({ variant, children }: PromptProviderProps) => {
+  return (
+    <PromptContext.Provider value={{ variant }}>
+      {children}
+    </PromptContext.Provider>
+  )
+}
+
 /**
  * This component is based on the [Radix UI Alert Dialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog) primitives.
  */
-const Root = Primitives.AlertDialog
+const Root = ({
+  /**
+   * The variant of the prompt.
+   */
+  variant = "danger",
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Primitives.Root> & {
+  variant?: PromptVariant
+}) => {
+  return (
+    <PromptProvider variant={variant}>
+      <Primitives.Root {...props} />
+    </PromptProvider>
+  )
+}
 Root.displayName = "Prompt"
 
 const Trigger = Primitives.Trigger
@@ -30,7 +70,7 @@ const Overlay = React.forwardRef<
       ref={ref}
       className={clx(
         "bg-ui-bg-overlay fixed inset-0",
-        // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", // Re-enable when Admin UI has been cleaned up
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -63,8 +103,8 @@ const Content = React.forwardRef<
       <Primitives.Content
         ref={ref}
         className={clx(
-          "bg-ui-bg-base shadow-elevation-flyout fixed left-[50%] top-[50%] flex w-full max-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border focus:outline-none",
-          // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] duration-200",  // Re-enable when Admin UI has been cleaned up
+          "bg-ui-bg-base shadow-elevation-flyout fixed left-[50%] top-[50%] flex w-full max-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border focus-visible:outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] duration-200",
           className
         )}
         {...props}
@@ -92,9 +132,15 @@ const Action = React.forwardRef<
   React.ElementRef<typeof Primitives.Action>,
   Omit<React.ComponentPropsWithoutRef<typeof Primitives.Action>, "asChild">
 >(({ className, children, type, ...props }, ref) => {
+  const { variant } = usePromptContext()
+
   return (
     <Primitives.Action ref={ref} className={className} {...props} asChild>
-      <Button type={type} variant="danger">
+      <Button
+        size="small"
+        type={type}
+        variant={variant === "danger" ? "danger" : "primary"}
+      >
         {children}
       </Button>
     </Primitives.Action>
@@ -108,7 +154,9 @@ const Cancel = React.forwardRef<
 >(({ className, children, ...props }, ref) => {
   return (
     <Primitives.Cancel ref={ref} className={clx(className)} {...props} asChild>
-      <Button variant="secondary">{children}</Button>
+      <Button size="small" variant="secondary">
+        {children}
+      </Button>
     </Primitives.Cancel>
   )
 })
diff --git a/packages/design-system/ui/src/components/radio-group/radio-group.tsx b/packages/design-system/ui/src/components/radio-group/radio-group.tsx
index 2f2ae6e6d3..f643823c62 100644
--- a/packages/design-system/ui/src/components/radio-group/radio-group.tsx
+++ b/packages/design-system/ui/src/components/radio-group/radio-group.tsx
@@ -62,7 +62,7 @@ const Item = React.forwardRef<
           "shadow-borders-base bg-ui-bg-base transition-fg flex h-[14px] w-[14px] items-center justify-center rounded-full",
           "group-hover:bg-ui-bg-base-hover",
           "group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow",
-          "group-focus:!shadow-borders-interactive-with-focus",
+          "group-focus-visible:!shadow-borders-interactive-with-focus",
           "group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base"
         )}
       >
@@ -95,7 +95,7 @@ const ChoiceBox = React.forwardRef<
     <Primitives.Item
       ref={ref}
       className={clx(
-        "shadow-borders-base bg-ui-bg-base focus:shadow-borders-interactive-with-focus transition-fg disabled:bg-ui-bg-disabled group flex items-start gap-x-2 rounded-lg p-3 disabled:cursor-not-allowed",
+        "shadow-borders-base bg-ui-bg-base focus-visible:shadow-borders-interactive-with-focus transition-fg disabled:bg-ui-bg-disabled group flex items-start gap-x-2 rounded-lg p-3 disabled:cursor-not-allowed",
         className
       )}
       {...props}
diff --git a/packages/design-system/ui/src/components/select/select.tsx b/packages/design-system/ui/src/components/select/select.tsx
index 99502b1bcc..bc613ea3a0 100644
--- a/packages/design-system/ui/src/components/select/select.tsx
+++ b/packages/design-system/ui/src/components/select/select.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { ChevronUpDown, EllipseMiniSolid } from "@medusajs/icons"
+import { EllipseMiniSolid, TrianglesMini } from "@medusajs/icons"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { cva } from "cva"
 import * as React from "react"
@@ -33,11 +33,11 @@ const useSelectContext = () => {
  * It also accepts all props of the HTML `select` component.
  */
 const Root = ({
-  children, 
+  children,
   /**
    * The select's size.
    */
-  size = "base", 
+  size = "base",
   ...props
 }: SelectProps) => {
   return (
@@ -63,10 +63,10 @@ Value.displayName = "Select.Value"
 
 const triggerVariants = cva({
   base: clx(
-    "bg-ui-bg-field txt-compact-medium shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none",
+    "bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none",
     "data-[placeholder]:text-ui-fg-muted text-ui-fg-base",
     "hover:bg-ui-bg-field-hover",
-    "focus:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
+    "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",
     "aria-[invalid=true]:border-ui-border-error aria-[invalid=true]:shadow-borders-error",
     "invalid::border-ui-border-error invalid:shadow-borders-error",
     "disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
@@ -74,8 +74,8 @@ const triggerVariants = cva({
   ),
   variants: {
     size: {
-      base: "h-10 px-3 py-[9px]",
-      small: "h-8 px-2 py-[5px]",
+      base: "h-8 px-2 py-1.5 txt-compact-small",
+      small: "h-7 px-2 py-1 txt-compact-small",
     },
   },
 })
@@ -97,7 +97,7 @@ const Trigger = React.forwardRef<
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronUpDown className="text-ui-fg-muted group-disabled/trigger:text-ui-fg-disabled" />
+        <TrianglesMini className="text-ui-fg-muted group-disabled/trigger:text-ui-fg-disabled" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -186,7 +186,7 @@ const Item = React.forwardRef<
       ref={ref}
       className={clx(
         "txt-compact-medium bg-ui-bg-base grid cursor-pointer grid-cols-[20px_1fr] gap-x-2 rounded-md px-3 py-2 outline-none transition-colors",
-        "hover:bg-ui-bg-base-hover focus:bg-ui-bg-base-hover",
+        "hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover",
         {
           "txt-compact-medium data-[state=checked]:txt-compact-medium-plus":
             size === "base",
diff --git a/packages/design-system/ui/src/components/status-badge/status-badge.tsx b/packages/design-system/ui/src/components/status-badge/status-badge.tsx
index 30558d359c..6f7af3c591 100644
--- a/packages/design-system/ui/src/components/status-badge/status-badge.tsx
+++ b/packages/design-system/ui/src/components/status-badge/status-badge.tsx
@@ -1,14 +1,6 @@
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
-import {
-  EllipseBlueSolid,
-  EllipseGreenSolid,
-  EllipseGreySolid,
-  EllipseOrangeSolid,
-  EllipsePurpleSolid,
-  EllipseRedSolid,
-} from "@medusajs/icons"
 
 interface StatusBadgeProps
   extends Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
@@ -19,34 +11,47 @@ interface StatusBadgeProps
  * This component is based on the span element and supports all of its props
  */
 const StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(
-  ({ 
-    children, 
-    className, 
-    /**
-     * The status's color.
-     */
-    color = "grey", 
-    ...props 
-  }: StatusBadgeProps, ref) => {
-    const StatusIndicator = {
-      green: EllipseGreenSolid,
-      red: EllipseRedSolid,
-      orange: EllipseOrangeSolid,
-      blue: EllipseBlueSolid,
-      purple: EllipsePurpleSolid,
-      grey: EllipseGreySolid,
-    }[color]
-
+  (
+    {
+      children,
+      className,
+      /**
+       * The status's color.
+       */
+      color = "grey",
+      ...props
+    }: StatusBadgeProps,
+    ref
+  ) => {
     return (
       <span
         ref={ref}
         className={clx(
-          "bg-ui-bg-base border-ui-border-base txt-compact-small text-ui-fg-base inline-flex items-center justify-center rounded-full border py-1 pl-1 pr-3",
+          "bg-ui-bg-base border-ui-border-base txt-compact-small text-ui-fg-base inline-flex items-center justify-center rounded-full border py-[3px] pl-1 pr-2.5",
           className
         )}
         {...props}
       >
-        <StatusIndicator className="mr-0.5" />
+        <span
+          role="presentation"
+          className="mr-0.5 flex h-5 w-5 items-center justify-center"
+        >
+          <span
+            role="presentation"
+            className="bg-ui-bg-base shadow-borders-base flex h-2.5 w-2.5 items-center justify-center rounded-full"
+          >
+            <span
+              className={clx("h-1.5 w-1.5 rounded-full", {
+                "bg-ui-tag-neutral-icon": color === "grey",
+                "bg-ui-tag-green-icon": color === "green",
+                "bg-ui-tag-red-icon": color === "red",
+                "bg-ui-tag-orange-icon": color === "orange",
+                "bg-ui-tag-blue-icon": color === "blue",
+                "bg-ui-tag-purple-icon": color === "purple",
+              })}
+            />
+          </span>
+        </span>
         {children}
       </span>
     )
diff --git a/packages/design-system/ui/src/components/switch/switch.tsx b/packages/design-system/ui/src/components/switch/switch.tsx
index 14645e39d2..2a68202371 100644
--- a/packages/design-system/ui/src/components/switch/switch.tsx
+++ b/packages/design-system/ui/src/components/switch/switch.tsx
@@ -7,7 +7,7 @@ import * as React from "react"
 import { clx } from "@/utils/clx"
 
 const switchVariants = cva({
-  base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
+  base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus-visible:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
   variants: {
     size: {
       small: "h-[16px] w-[28px]",
@@ -46,22 +46,27 @@ interface SwitchProps
 const Switch = React.forwardRef<
   React.ElementRef<typeof Primitives.Root>,
   SwitchProps
->(({ 
-    className, 
-    /**
-     * The switch's size.
-     */
-    size = "base", 
-    ...props 
-  }: SwitchProps, ref) => (
-  <Primitives.Root
-    className={clx(switchVariants({ size }), className)}
-    {...props}
-    ref={ref}
-  >
-    <Primitives.Thumb className={clx(thumbVariants({ size }))} />
-  </Primitives.Root>
-))
+>(
+  (
+    {
+      className,
+      /**
+       * The switch's size.
+       */
+      size = "base",
+      ...props
+    }: SwitchProps,
+    ref
+  ) => (
+    <Primitives.Root
+      className={clx(switchVariants({ size }), className)}
+      {...props}
+      ref={ref}
+    >
+      <Primitives.Thumb className={clx(thumbVariants({ size }))} />
+    </Primitives.Root>
+  )
+)
 Switch.displayName = "Switch"
 
 export { Switch }
diff --git a/packages/design-system/ui/src/components/table/table.tsx b/packages/design-system/ui/src/components/table/table.tsx
index 7510c77983..246371cbad 100644
--- a/packages/design-system/ui/src/components/table/table.tsx
+++ b/packages/design-system/ui/src/components/table/table.tsx
@@ -6,14 +6,14 @@ import { clx } from "@/utils/clx"
 
 /**
  * This component is based on the table element and its various children:
- * 
+ *
  * - `Table`: `table`
  * - `Table.Header`: `thead`
  * - `Table.Row`: `tr`
  * - `Table.HeaderCell`: `th`
  * - `Table.Body`: `tbody`
  * - `Table.Cell`: `td`
- * 
+ *
  * Each component supports the props or attributes of its equivalent HTML element.
  */
 const Root = React.forwardRef<
@@ -36,8 +36,8 @@ const Row = React.forwardRef<
     ref={ref}
     className={clx(
       "bg-ui-bg-base hover:bg-ui-bg-base-hover border-ui-border-base transition-fg border-b",
-      "[&_td:last-child]:pr-8 [&_th:last-child]:pr-8",
-      "[&_td:first-child]:pl-8 [&_th:first-child]:pl-8",
+      "[&_td:last-child]:pr-6 [&_th:last-child]:pr-6",
+      "[&_td:first-child]:pl-6 [&_th:first-child]:pl-6",
       className
     )}
     {...props}
@@ -72,7 +72,7 @@ const HeaderCell = React.forwardRef<
   HTMLTableCellElement,
   React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <th ref={ref} className={clx("h-12 pr-3 text-left", className)} {...props} />
+  <th ref={ref} className={clx("h-10 pr-3 text-left", className)} {...props} />
 ))
 HeaderCell.displayName = "Table.HeaderCell"
 
@@ -95,6 +95,13 @@ interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {
   pageCount: number
   canPreviousPage: boolean
   canNextPage: boolean
+  translations?: {
+    of?: string
+    results?: string
+    pages?: string
+    prev?: string
+    next?: string
+  }
   previousPage: () => void
   nextPage: () => void
 }
@@ -140,6 +147,17 @@ const Pagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(
        * This function should handle retrieving data for the previous page.
        */
       previousPage,
+      /**
+       * An optional object of words to use in the pagination component.
+       * Use this to override the default words, or translate them into another language.
+       */
+      translations = {
+        of: "of",
+        results: "results",
+        pages: "pages",
+        prev: "Prev",
+        next: "Next",
+      },
       ...props
     }: TablePaginationProps,
     ref
@@ -155,7 +173,7 @@ const Pagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(
       <div
         ref={ref}
         className={clx(
-          "text-ui-fg-subtle txt-compact-small-plus flex w-full items-center justify-between px-5 pb-6 pt-4",
+          "text-ui-fg-subtle txt-compact-small-plus flex w-full items-center justify-between px-3 py-4",
           className
         )}
         {...props}
@@ -163,27 +181,30 @@ const Pagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(
         <div className="inline-flex items-center gap-x-1 px-3 py-[5px]">
           <p>{from}</p>
           <Minus className="text-ui-fg-muted" />
-          <p>{`${to} of ${count} results`}</p>
+          <p>{`${to} ${translations.of} ${count} ${translations.results}`}</p>
         </div>
         <div className="flex items-center gap-x-2">
           <div className="inline-flex items-center gap-x-1 px-3 py-[5px]">
             <p>
-              {pageIndex + 1} of {Math.max(pageCount, 1)}
+              {pageIndex + 1} {translations.of} {Math.max(pageCount, 1)}{" "}
+              {translations.pages}
             </p>
           </div>
           <Button
+            type="button"
             variant={"transparent"}
             onClick={previousPage}
             disabled={!canPreviousPage}
           >
-            Prev
+            {translations.prev}
           </Button>
           <Button
+            type="button"
             variant={"transparent"}
             onClick={nextPage}
             disabled={!canNextPage}
           >
-            Next
+            {translations.next}
           </Button>
         </div>
       </div>
diff --git a/packages/design-system/ui/src/components/tabs/tabs.tsx b/packages/design-system/ui/src/components/tabs/tabs.tsx
index 3d4387a3d4..8f3d67273d 100644
--- a/packages/design-system/ui/src/components/tabs/tabs.tsx
+++ b/packages/design-system/ui/src/components/tabs/tabs.tsx
@@ -22,9 +22,9 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitives.Trigger
     ref={ref}
     className={clx(
-      "txt-compact-small-plus transition-fg text-ui-fg-subtle inline-flex items-center justify-center rounded-full border border-transparent bg-transparent px-3 py-1.5 outline-none",
+      "txt-compact-small-plus transition-fg text-ui-fg-subtle inline-flex items-center justify-center rounded-full border border-transparent bg-transparent px-2.5 py-1 outline-none",
       "hover:text-ui-fg-base",
-      "focus:border-ui-border-interactive focus:!shadow-borders-focus focus:bg-ui-bg-base",
+      "focus-visible:border-ui-border-interactive focus-visible:!shadow-borders-focus focus-visible:bg-ui-bg-base",
       "data-[state=active]:text-ui-fg-base data-[state=active]:bg-ui-bg-base data-[state=active]:shadow-elevation-card-rest",
       className
     )}
diff --git a/packages/design-system/ui/src/components/textarea/textarea.tsx b/packages/design-system/ui/src/components/textarea/textarea.tsx
index aabed570a9..c2050269d1 100644
--- a/packages/design-system/ui/src/components/textarea/textarea.tsx
+++ b/packages/design-system/ui/src/components/textarea/textarea.tsx
@@ -15,7 +15,7 @@ const Textarea = React.forwardRef<
       ref={ref}
       className={clx(
         inputBaseStyles,
-        "txt-medium min-h-[70px] w-full px-3 py-[7px]",
+        "txt-small min-h-[60px] w-full px-2 py-1.5",
         className
       )}
       {...props}
diff --git a/packages/design-system/ui/src/components/time-input/time-input.tsx b/packages/design-system/ui/src/components/time-input/time-input.tsx
index a84ca8c8ef..6c9bdaab94 100644
--- a/packages/design-system/ui/src/components/time-input/time-input.tsx
+++ b/packages/design-system/ui/src/components/time-input/time-input.tsx
@@ -36,7 +36,7 @@ const TimeSegment = ({ segment, state }: TimeSegmentProps) => {
       {...segmentProps}
       ref={ref}
       className={clx(
-        "txt-compact-medium w-full rounded-md px-2 py-[5px] text-left uppercase tabular-nums",
+        "txt-compact-small w-full rounded-md px-2 py-1 text-left uppercase tabular-nums",
         inputBaseStyles,
         "group-aria-[invalid=true]/time-input:!shadow-borders-error group-invalid/time-input:!shadow-borders-error",
         {
@@ -52,7 +52,7 @@ const TimeSegment = ({ segment, state }: TimeSegmentProps) => {
       <span
         aria-hidden="true"
         className={clx(
-          "txt-compact-medium text-ui-fg-muted pointer-events-none block w-full text-left",
+          "txt-compact-small text-ui-fg-muted pointer-events-none block w-full text-left",
           {
             hidden: !segment.isPlaceholder,
             "h-0": !segment.isPlaceholder,
@@ -75,14 +75,17 @@ type TimeInputProps = Omit<
  * This component is based on the `div` element and supports all of its props.
  */
 const TimeInput = React.forwardRef<HTMLDivElement, TimeInputProps>(
-  ({ 
-    /**
-     * The time's format. If no value is specified, the format is
-     * set based on the user's locale.
-     */
-    hourCycle, 
-    ...props
-  }: TimeInputProps, ref) => {
+  (
+    {
+      /**
+       * The time's format. If no value is specified, the format is
+       * set based on the user's locale.
+       */
+      hourCycle,
+      ...props
+    }: TimeInputProps,
+    ref
+  ) => {
     const innerRef = React.useRef<HTMLDivElement>(null)
 
     React.useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
diff --git a/packages/design-system/ui/src/components/tooltip/tooltip.tsx b/packages/design-system/ui/src/components/tooltip/tooltip.tsx
index d1857a3272..bfe55a6f87 100644
--- a/packages/design-system/ui/src/components/tooltip/tooltip.tsx
+++ b/packages/design-system/ui/src/components/tooltip/tooltip.tsx
@@ -19,7 +19,7 @@ interface TooltipProps
 
 /**
  * This component is based on the [Radix UI Tooltip](https://www.radix-ui.com/primitives/docs/components/tooltip) primitive.
- * 
+ *
  * @excludeExternal
  */
 const Tooltip = ({
@@ -56,7 +56,7 @@ const Tooltip = ({
             sideOffset={sideOffset}
             align="center"
             className={clx(
-              "txt-compact-xsmall-plus text-ui-fg-subtle bg-ui-bg-base shadow-elevation-tooltip rounded-lg px-3 py-2",
+              "txt-compact-xsmall text-ui-fg-subtle bg-ui-bg-base shadow-elevation-tooltip rounded-lg px-2.5 py-1",
               "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
               className
             )}
diff --git a/packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx b/packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx
index 5d12ca4b3f..d7a7cf4cee 100644
--- a/packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx
+++ b/packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx
@@ -10,7 +10,9 @@ export interface RenderPromptProps {
   open: boolean
   title: string
   description: string
+  variant?: "danger" | "confirmation"
   verificationText?: string
+  verificationInstruction?: string
   cancelText?: string
   confirmText?: string
   onConfirm: () => void
@@ -22,6 +24,10 @@ export const RenderPrompt = ({
    * @ignore
    */
   open,
+  /**
+   * The variant of the prompt.
+   */
+  variant = "danger",
   /**
    * The prompt's title.
    */
@@ -34,6 +40,11 @@ export const RenderPrompt = ({
    * The text the user has to input in order to confirm the action.
    */
   verificationText,
+  /**
+   * The instruction for the verification text. Useful for passing a translated string to use instead of the default english one.
+   * Should be in the format: "Please type {val} to confirm:"
+   */
+  verificationInstruction = "Please type {val} to confirm:",
   /**
    * The label for the Cancel button.
    */
@@ -91,8 +102,16 @@ export const RenderPrompt = ({
     }
   }, [onCancel, open])
 
+  let instructionParts = verificationInstruction.includes("{val}")
+    ? verificationInstruction.split("{val}")
+    : ["Please type", "to confirm:"]
+
+  if (instructionParts.length !== 2) {
+    instructionParts = ["Please type", "to confirm:"]
+  }
+
   return (
-    <Prompt open={open}>
+    <Prompt open={open} variant={variant}>
       <Prompt.Content>
         <form onSubmit={handleFormSubmit}>
           <Prompt.Header>
@@ -102,11 +121,11 @@ export const RenderPrompt = ({
           {verificationText && (
             <div className="border-ui-border-base mt-6 flex flex-col gap-y-4 border-y p-6">
               <Label htmlFor="verificationText" className="text-ui-fg-subtle">
-                Please type{" "}
+                {instructionParts[0]}{" "}
                 <span className="text-ui-fg-base txt-compact-medium-plus">
                   {verificationText}
                 </span>{" "}
-                to confirm.
+                {instructionParts[1]}
               </Label>
               <Input
                 autoFocus
@@ -132,4 +151,4 @@ export const RenderPrompt = ({
     </Prompt>
   )
 }
-RenderPrompt.displayName = "RenderPrompt"
\ No newline at end of file
+RenderPrompt.displayName = "RenderPrompt"
diff --git a/yarn.lock b/yarn.lock
index 1850f0f6e2..e94514da4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5579,7 +5579,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
+"@eslint-community/eslint-utils@npm:^4.2.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
   dependencies:
@@ -5597,13 +5597,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.5.1":
-  version: 4.10.0
-  resolution: "@eslint-community/regexpp@npm:4.10.0"
-  checksum: c5f60ef1f1ea7649fa7af0e80a5a79f64b55a8a8fa5086de4727eb4c86c652aedee407a9c143b8995d2c0b2d75c1222bec9ba5d73dbfc1f314550554f0979ef4
-  languageName: node
-  linkType: hard
-
 "@eslint/eslintrc@npm:^0.4.3":
   version: 0.4.3
   resolution: "@eslint/eslintrc@npm:0.4.3"
@@ -7952,6 +7945,7 @@ __metadata:
     "@hookform/resolvers": 3.3.2
     "@medusajs/icons": "workspace:^"
     "@medusajs/medusa": "workspace:^"
+    "@medusajs/types": "workspace:^"
     "@medusajs/ui": "workspace:^"
     "@medusajs/ui-preset": "workspace:^"
     "@medusajs/vite-plugin-extension": "workspace:^"
@@ -7960,17 +7954,17 @@ __metadata:
     "@tanstack/react-table": 8.10.7
     "@types/react": 18.2.43
     "@types/react-dom": 18.2.17
-    "@typescript-eslint/eslint-plugin": 6.14.0
-    "@typescript-eslint/parser": 6.14.0
     "@uiw/react-json-view": 2.0.0-alpha.10
     "@vitejs/plugin-react": 4.2.1
     autoprefixer: 10.4.16
     cmdk: ^0.2.0
+    date-fns: ^3.2.0
     i18next: 23.7.11
     i18next-browser-languagedetector: 7.2.0
     i18next-http-backend: 2.4.2
     medusa-react: "workspace:^"
     postcss: 8.4.32
+    prettier: ^3.1.1
     react: 18.2.0
     react-dom: 18.2.0
     react-hook-form: 7.49.1
@@ -17268,13 +17262,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:^7.0.12":
-  version: 7.0.15
-  resolution: "@types/json-schema@npm:7.0.15"
-  checksum: a996a745e6c5d60292f36731dd41341339d4eeed8180bb09226e5c8d23759067692b1d88e5d91d72ee83dfc00d3aca8e7bd43ea120516c17922cbcb7c3e252db
-  languageName: node
-  linkType: hard
-
 "@types/json5@npm:^0.0.29":
   version: 0.0.29
   resolution: "@types/json5@npm:0.0.29"
@@ -18095,31 +18082,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:6.14.0":
-  version: 6.14.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:6.14.0"
-  dependencies:
-    "@eslint-community/regexpp": ^4.5.1
-    "@typescript-eslint/scope-manager": 6.14.0
-    "@typescript-eslint/type-utils": 6.14.0
-    "@typescript-eslint/utils": 6.14.0
-    "@typescript-eslint/visitor-keys": 6.14.0
-    debug: ^4.3.4
-    graphemer: ^1.4.0
-    ignore: ^5.2.4
-    natural-compare: ^1.4.0
-    semver: ^7.5.4
-    ts-api-utils: ^1.0.1
-  peerDependencies:
-    "@typescript-eslint/parser": ^6.0.0 || ^6.0.0-alpha
-    eslint: ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 6360efb0e142ed91de5e9bddcd041f769feeedd256332733be08f7a74c8ae637cbfb78c6b85d747c73231bbb95cef95ed2d2854ab7d43aebfbedb3a191f447f1
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/eslint-plugin@npm:^4.33.0":
   version: 4.33.0
   resolution: "@typescript-eslint/eslint-plugin@npm:4.33.0"
@@ -18182,24 +18144,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:6.14.0":
-  version: 6.14.0
-  resolution: "@typescript-eslint/parser@npm:6.14.0"
-  dependencies:
-    "@typescript-eslint/scope-manager": 6.14.0
-    "@typescript-eslint/types": 6.14.0
-    "@typescript-eslint/typescript-estree": 6.14.0
-    "@typescript-eslint/visitor-keys": 6.14.0
-    debug: ^4.3.4
-  peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 0344f7f640374e7e5a5b50e9c90fbd161611b3f455132e541ef9116eef7bd3acf364db64bd38d4b6b4fe148414494620c9df660f8ddce036019c38ae8e146585
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/parser@npm:^4.33.0":
   version: 4.33.0
   resolution: "@typescript-eslint/parser@npm:4.33.0"
@@ -18264,16 +18208,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:6.14.0":
-  version: 6.14.0
-  resolution: "@typescript-eslint/scope-manager@npm:6.14.0"
-  dependencies:
-    "@typescript-eslint/types": 6.14.0
-    "@typescript-eslint/visitor-keys": 6.14.0
-  checksum: 8c59a215af3d7d24d8d0b21c28a858263de471650829f288a941e0eb8af8a054798da5c7594b7f39370219718270c18464b5edb96f451457e5f080a33ba57c2c
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/type-utils@npm:5.60.1":
   version: 5.60.1
   resolution: "@typescript-eslint/type-utils@npm:5.60.1"
@@ -18291,23 +18225,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:6.14.0":
-  version: 6.14.0
-  resolution: "@typescript-eslint/type-utils@npm:6.14.0"
-  dependencies:
-    "@typescript-eslint/typescript-estree": 6.14.0
-    "@typescript-eslint/utils": 6.14.0
-    debug: ^4.3.4
-    ts-api-utils: ^1.0.1
-  peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 836a6e84be5a245b07c76968c98e2f3bae064767dde720080fe8f33e226188510778dbca4199b7e42ef675ec3fd6d0ab522ec1c77d6e2a9b50e8e275fe7c72c9
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/types@npm:4.33.0":
   version: 4.33.0
   resolution: "@typescript-eslint/types@npm:4.33.0"
@@ -18329,13 +18246,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:6.14.0":
-  version: 6.14.0
-  resolution: "@typescript-eslint/types@npm:6.14.0"
-  checksum: d59306a7a441982a4dcee7d775928fd5086aba9331f7a238f915723a0dc785df0e43af562a30a7c2f1b056a1e49fd64863a8d2450d31706193add0ade87334a4
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/typescript-estree@npm:4.33.0":
   version: 4.33.0
   resolution: "@typescript-eslint/typescript-estree@npm:4.33.0"
@@ -18390,24 +18300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:6.14.0":
-  version: 6.14.0
-  resolution: "@typescript-eslint/typescript-estree@npm:6.14.0"
-  dependencies:
-    "@typescript-eslint/types": 6.14.0
-    "@typescript-eslint/visitor-keys": 6.14.0
-    debug: ^4.3.4
-    globby: ^11.1.0
-    is-glob: ^4.0.3
-    semver: ^7.5.4
-    ts-api-utils: ^1.0.1
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 767c3309987b8ad053a2403605a9bd7c4eb3283dece864a741a7531a1c28eea4d85acaa4613141b64e194f9f6c4cbc5bc762c9b9f3a67c6202aa8cbb18b180d2
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/utils@npm:5.60.1":
   version: 5.60.1
   resolution: "@typescript-eslint/utils@npm:5.60.1"
@@ -18426,23 +18318,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:6.14.0":
-  version: 6.14.0
-  resolution: "@typescript-eslint/utils@npm:6.14.0"
-  dependencies:
-    "@eslint-community/eslint-utils": ^4.4.0
-    "@types/json-schema": ^7.0.12
-    "@types/semver": ^7.5.0
-    "@typescript-eslint/scope-manager": 6.14.0
-    "@typescript-eslint/types": 6.14.0
-    "@typescript-eslint/typescript-estree": 6.14.0
-    semver: ^7.5.4
-  peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0
-  checksum: 72689b2897b89e1bd1c71c1c2ae436d0ccfbcfffabf3be4378de74ad8138b2ecdbeeda7c1720e2f1754569e773f2fc7216f704335e1e56c38c7601ee1d190aeb
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/utils@npm:^5.45.0":
   version: 5.62.0
   resolution: "@typescript-eslint/utils@npm:5.62.0"
@@ -18491,16 +18366,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:6.14.0":
-  version: 6.14.0
-  resolution: "@typescript-eslint/visitor-keys@npm:6.14.0"
-  dependencies:
-    "@typescript-eslint/types": 6.14.0
-    eslint-visitor-keys: ^3.4.1
-  checksum: 0e2363f9f1986ebdb41507c54a666fa1c336eb6beb383dc342a10844d3c42c89067b21c3f158851fa6f0825e1e451a5470b5454fde70a6fc33b4b0259462d954
-  languageName: node
-  linkType: hard
-
 "@uiw/react-json-view@npm:2.0.0-alpha.10":
   version: 2.0.0-alpha.10
   resolution: "@uiw/react-json-view@npm:2.0.0-alpha.10"
@@ -24485,6 +24350,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "date-fns@npm:3.2.0"
+  checksum: f93e987f785d7f2b7349986d150b014ce21fa6425e2e1edea6f0e01731dceef68deabf0f723689c28604e857648ac708a52b924cb7584e4321835686aa665371
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:1.10.4":
   version: 1.10.4
   resolution: "dayjs@npm:1.10.4"
@@ -42204,6 +42076,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "prettier@npm:3.1.1"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: facc944ba20e194ff4db765e830ffbcb642803381f0d2033ed397e79904fa4ccc877dc25ad68f42d36985c01d051c990ca1b905fb83d2d7d65fe69e4386fa1a3
+  languageName: node
+  linkType: hard
+
 "pretty-bytes@npm:^3.0.0":
   version: 3.0.1
   resolution: "pretty-bytes@npm:3.0.1"
@@ -48602,15 +48483,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-api-utils@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "ts-api-utils@npm:1.0.3"
-  peerDependencies:
-    typescript: ">=4.2.0"
-  checksum: 9408338819c3aca2a709f0bc54e3f874227901506cacb1163612a6c8a43df224174feb965a5eafdae16f66fc68fd7bfee8d3275d0fa73fbb8699e03ed26520c9
-  languageName: node
-  linkType: hard
-
 "ts-clone-node@npm:^3.0.0":
   version: 3.0.0
   resolution: "ts-clone-node@npm:3.0.0"