diff --git a/.changeset/cool-rockets-wash.md b/.changeset/cool-rockets-wash.md
new file mode 100644
index 0000000000..e67340d512
--- /dev/null
+++ b/.changeset/cool-rockets-wash.md
@@ -0,0 +1,6 @@
+---
+"@medusajs/types": patch
+"@medusajs/utils": patch
+---
+
+feat(utils,types): add registerUsages for promotion's computed actions
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/.changeset/khaki-deers-talk.md b/.changeset/khaki-deers-talk.md
new file mode 100644
index 0000000000..f8c86c93f3
--- /dev/null
+++ b/.changeset/khaki-deers-talk.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/types": patch
+---
+
+Add line items in cart creation
diff --git a/.changeset/lazy-shoes-kiss.md b/.changeset/lazy-shoes-kiss.md
new file mode 100644
index 0000000000..e97e5b1f7e
--- /dev/null
+++ b/.changeset/lazy-shoes-kiss.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/types": patch
+---
+
+feat(types): add campaign + promotion operations
diff --git a/.changeset/neat-seals-help.md b/.changeset/neat-seals-help.md
new file mode 100644
index 0000000000..f3b0c6d196
--- /dev/null
+++ b/.changeset/neat-seals-help.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/modules-sdk": patch
+---
+
+feat(modules-sdk): run hooks on application start
diff --git a/.changeset/olive-ads-brake.md b/.changeset/olive-ads-brake.md
new file mode 100644
index 0000000000..a5fc56c03b
--- /dev/null
+++ b/.changeset/olive-ads-brake.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/types": patch
+---
+
+feat(cart): Shipping methods
diff --git a/.changeset/three-files-yawn.md b/.changeset/three-files-yawn.md
new file mode 100644
index 0000000000..d894fc6595
--- /dev/null
+++ b/.changeset/three-files-yawn.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/workflows-sdk": patch
+---
+
+create workflow can return destructured properties of a step
diff --git a/.changeset/twenty-emus-roll.md b/.changeset/twenty-emus-roll.md
new file mode 100644
index 0000000000..561ea8d3aa
--- /dev/null
+++ b/.changeset/twenty-emus-roll.md
@@ -0,0 +1,8 @@
+---
+"@medusajs/pricing": patch
+"@medusajs/product": patch
+"@medusajs/utils": patch
+"@medusajs/types": patch
+---
+
+chore: Abstract module services
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/CODEOWNERS b/CODEOWNERS
index 423e085510..38f46e00f2 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -1,5 +1,5 @@
 # All files not owned by other teams must be reviewed by the core team
-*                                               @medusajs/core
+*                                               @medusajs/core @medusajs/engineering
 /docs-util/                                     @medusajs/docs
 /www/                                           @medusajs/docs
 /packages/admin                                 @medusajs/ui
diff --git a/integration-tests/plugins/__tests__/workflows/utils/composer/compose.ts b/integration-tests/plugins/__tests__/workflows/utils/composer/compose.ts
index 27fb772003..9fdedc22c2 100644
--- a/integration-tests/plugins/__tests__/workflows/utils/composer/compose.ts
+++ b/integration-tests/plugins/__tests__/workflows/utils/composer/compose.ts
@@ -1980,4 +1980,110 @@ describe("Workflow composer", function () {
     expect(mockStep1Fn.mock.calls[0][0]).toEqual(workflowInput)
     expect(mockCompensateSte1.mock.calls[0][0]).toEqual(undefined)
   })
+
+  it("should compose a workflow that returns destructured properties", async () => {
+    const step = function () {
+      return new StepResponse({
+        propertyNotReturned: 1234,
+        property: {
+          complex: {
+            nested: 123,
+          },
+          a: "bc",
+        },
+        obj: "return from 2",
+      })
+    }
+
+    const step1 = createStep("step1", step)
+
+    const workflow = createWorkflow("workflow1", function () {
+      const { property, obj } = step1()
+
+      return { someOtherName: property, obj }
+    })
+
+    const { result } = await workflow().run({
+      throwOnError: false,
+    })
+
+    expect(result).toEqual({
+      someOtherName: {
+        complex: {
+          nested: 123,
+        },
+        a: "bc",
+      },
+      obj: "return from 2",
+    })
+  })
+
+  it("should compose a workflow that returns an array of steps", async () => {
+    const step1 = createStep("step1", () => {
+      return new StepResponse({
+        obj: "return from 1",
+      })
+    })
+    const step2 = createStep("step2", () => {
+      return new StepResponse({
+        obj: "returned from 2**",
+      })
+    })
+
+    const workflow = createWorkflow("workflow1", function () {
+      const s1 = step1()
+      const s2 = step2()
+
+      return [s1, s2]
+    })
+
+    const { result } = await workflow().run({
+      throwOnError: false,
+    })
+
+    expect(result).toEqual([
+      {
+        obj: "return from 1",
+      },
+      {
+        obj: "returned from 2**",
+      },
+    ])
+  })
+
+  it("should compose a workflow that returns an object mixed of steps and properties", async () => {
+    const step1 = createStep("step1", () => {
+      return new StepResponse({
+        obj: {
+          nested: "nested",
+        },
+      })
+    })
+
+    const step2 = createStep("step2", () => {
+      return new StepResponse({
+        obj: "returned from 2**",
+      })
+    })
+
+    const workflow = createWorkflow("workflow1", function () {
+      const { obj } = step1()
+      const s2 = step2()
+
+      return [{ step1_nested_obj: obj.nested }, s2]
+    })
+
+    const { result } = await workflow().run({
+      throwOnError: false,
+    })
+
+    expect(result).toEqual([
+      {
+        step1_nested_obj: "nested",
+      },
+      {
+        obj: "returned from 2**",
+      },
+    ])
+  })
 })
diff --git a/packages/admin-next/dashboard/package.json b/packages/admin-next/dashboard/package.json
index 39e57d182a..559d2a4a41 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:static": "node ./scripts/generate-countries.js && prettier --write ./src/lib/countries.ts && node ./scripts/generate-currencies.js && prettier --write ./src/lib/currencies.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..ed7e017c13 100644
--- a/packages/admin-next/dashboard/public/locales/en/translation.json
+++ b/packages/admin-next/dashboard/public/locales/en/translation.json
@@ -1,12 +1,26 @@
 {
   "$schema": "../$schema.json",
   "general": {
+    "ascending": "Ascending",
+    "descending": "Descending",
     "cancel": "Cancel",
     "save": "Save",
     "create": "Create",
     "delete": "Delete",
     "edit": "Edit",
+    "confirm": "Confirm",
+    "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 +28,26 @@
     "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:",
+    "noResultsTitle": "No results",
+    "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",
@@ -45,10 +68,28 @@
     "domain": "Gift Cards"
   },
   "customers": {
-    "domain": "Customers"
+    "domain": "Customers",
+    "editCustomer": "Edit Customer",
+    "createCustomer": "Create Customer",
+    "createCustomerHint": "Create a new customer to manage their details.",
+    "passwordHint": "Create a password for the customer to use when logging in to the storefront. Make sure that you communicate the password to the customer.",
+    "changePassword": "Change password",
+    "changePasswordPromptTitle": "Change password",
+    "changePasswordPromptDescription": "You are about to change the password for {{email}}. Make sure that you have communicated the new password to the customer before proceeding.",
+    "guest": "Guest",
+    "registered": "Registered",
+    "firstSeen": "First seen"
   },
   "customerGroups": {
-    "domain": "Customer Groups"
+    "domain": "Customer Groups",
+    "createGroup": "Create group",
+    "createCustomerGroup": "Create Customer Group",
+    "createCustomerGroupHint": "Create a new customer group to segment your customers.",
+    "customerAlreadyAdded": "The customer has already been added to the group.",
+    "editCustomerGroup": "Edit Customer Group",
+    "removeCustomersWarning_one": "You are about to remove {{count}} customer from the customer group. This action cannot be undone.",
+    "removeCustomersWarning_other": "You are about to remove {{count}} customers from the customer group. This action cannot be undone.",
+    "deleteCustomerGroupWarning": "You are about to delete the customer group {{name}}. This action cannot be undone."
   },
   "orders": {
     "domain": "Orders"
@@ -65,9 +106,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 +124,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",
@@ -122,6 +181,7 @@
     "description": "Description",
     "email": "Email",
     "password": "Password",
+    "confirmPassword": "Confirm Password",
     "categories": "Categories",
     "category": "Category",
     "collection": "Collection",
@@ -133,8 +193,31 @@
     "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",
+    "orders": "Orders",
+    "account": "Account",
+    "total": "Total"
   }
 }
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/scripts/generate-currencies.js b/packages/admin-next/dashboard/scripts/generate-currencies.js
new file mode 100644
index 0000000000..bf6608f5eb
--- /dev/null
+++ b/packages/admin-next/dashboard/scripts/generate-currencies.js
@@ -0,0 +1,46 @@
+async function generateCurrencies() {
+  const { currencies } = await import(
+    "@medusajs/medusa/dist/utils/currencies.js"
+  )
+  const fs = await import("fs")
+  const path = await import("path")
+
+  const record = Object.entries(currencies).reduce((acc, [key, values]) => {
+    const code = values.code
+    const symbol_native = values.symbol_native
+    const name = values.name
+    const decimal_digits = values.decimal_digits
+
+    acc[key] = {
+      code,
+      name,
+      symbol_native,
+      decimal_digits,
+    }
+
+    return acc
+  }, {})
+
+  const json = JSON.stringify(record, null, 2)
+
+  const dest = path.join(__dirname, "../src/lib/currencies.ts")
+  const destDir = path.dirname(dest)
+
+  const fileContent = `/** This file is auto-generated. Do not modify it manually. */\ntype CurrencyInfo = { code: string; name: string; symbol_native: string; decimal_digits: number }\n\nexport const currencies: Record<string, CurrencyInfo> = ${json}`
+
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true })
+  }
+
+  fs.writeFileSync(dest, fileContent)
+}
+
+;(async () => {
+  console.log("Generating currency info")
+  try {
+    await generateCurrencies()
+    console.log("Currency info 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..858d344311
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/empty-table-content/empty-table-content.tsx
@@ -0,0 +1,61 @@
+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 ?? t("general.noResultsTitle")}
+        </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" size="small">
+            {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/order-table-cells/index.ts b/packages/admin-next/dashboard/src/components/common/order-table-cells/index.ts
new file mode 100644
index 0000000000..20b29f6c85
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/order-table-cells/index.ts
@@ -0,0 +1 @@
+export * from "./order-table-cells"
diff --git a/packages/admin-next/dashboard/src/components/common/order-table-cells/order-table-cells.tsx b/packages/admin-next/dashboard/src/components/common/order-table-cells/order-table-cells.tsx
new file mode 100644
index 0000000000..9026e45590
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/order-table-cells/order-table-cells.tsx
@@ -0,0 +1,97 @@
+import type { Order } from "@medusajs/medusa"
+import { StatusBadge } from "@medusajs/ui"
+import { format } from "date-fns"
+import { getPresentationalAmount } from "../../../lib/money-amount-helpers"
+
+export const OrderDisplayIdCell = ({ id }: { id: Order["display_id"] }) => {
+  return <span>#{id}</span>
+}
+
+export const OrderDateCell = ({
+  date,
+}: {
+  date: Order["created_at"] | string
+}) => {
+  const value = new Date(date)
+
+  return <span>{format(value, "dd MMM, yyyy")}</span>
+}
+
+export const OrderFulfillmentStatusCell = ({
+  status,
+}: {
+  status: Order["fulfillment_status"]
+}) => {
+  switch (status) {
+    case "not_fulfilled":
+      return <StatusBadge color="grey">Not fulfilled</StatusBadge>
+    case "partially_fulfilled":
+      return <StatusBadge color="orange">Partially fulfilled</StatusBadge>
+    case "fulfilled":
+      return <StatusBadge color="green">Fulfilled</StatusBadge>
+    case "partially_shipped":
+      return <StatusBadge color="orange">Partially shipped</StatusBadge>
+    case "shipped":
+      return <StatusBadge color="green">Shipped</StatusBadge>
+    case "partially_returned":
+      return <StatusBadge color="orange">Partially returned</StatusBadge>
+    case "returned":
+      return <StatusBadge color="green">Returned</StatusBadge>
+    case "canceled":
+      return <StatusBadge color="red">Canceled</StatusBadge>
+    case "requires_action":
+      return <StatusBadge color="orange">Requires action</StatusBadge>
+  }
+}
+
+export const OrderPaymentStatusCell = ({
+  status,
+}: {
+  status: Order["payment_status"]
+}) => {
+  switch (status) {
+    case "not_paid":
+      return <StatusBadge color="grey">Not paid</StatusBadge>
+    case "awaiting":
+      return <StatusBadge color="orange">Awaiting</StatusBadge>
+    case "captured":
+      return <StatusBadge color="green">Captured</StatusBadge>
+    case "partially_refunded":
+      return <StatusBadge color="orange">Partially refunded</StatusBadge>
+    case "refunded":
+      return <StatusBadge color="green">Refunded</StatusBadge>
+    case "canceled":
+      return <StatusBadge color="red">Canceled</StatusBadge>
+    case "requires_action":
+      return <StatusBadge color="orange">Requires action</StatusBadge>
+  }
+}
+
+// TODO: Fix formatting amount with correct division eg. EUR 1000 -> EUR 10.00
+// Source currency info from `@medusajs/medusa` definition
+export const OrderTotalCell = ({
+  total,
+  currencyCode,
+}: {
+  total: Order["total"]
+  currencyCode: Order["currency_code"]
+}) => {
+  const formatted = new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: currencyCode,
+    currencyDisplay: "narrowSymbol",
+  }).format(0)
+
+  const symbol = formatted.replace(/\d/g, "").replace(/[.,]/g, "").trim()
+
+  const presentationAmount = getPresentationalAmount(total, currencyCode)
+  const formattedTotal = new Intl.NumberFormat(undefined, {
+    style: "decimal",
+  }).format(presentationAmount)
+
+  return (
+    <span>
+      {symbol} {formattedTotal} {currencyCode.toUpperCase()}
+    </span>
+  )
+}
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/common/table-row-actions/index.ts b/packages/admin-next/dashboard/src/components/common/table-row-actions/index.ts
new file mode 100644
index 0000000000..155d370c4a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/table-row-actions/index.ts
@@ -0,0 +1 @@
+export * from "./table-row-actions"
diff --git a/packages/admin-next/dashboard/src/components/common/table-row-actions/table-row-actions.tsx b/packages/admin-next/dashboard/src/components/common/table-row-actions/table-row-actions.tsx
new file mode 100644
index 0000000000..99e5d6adfa
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/table-row-actions/table-row-actions.tsx
@@ -0,0 +1,84 @@
+import { EllipsisHorizontal } from "@medusajs/icons"
+import { DropdownMenu, IconButton } from "@medusajs/ui"
+import { ReactNode } from "react"
+import { Link } from "react-router-dom"
+
+type TableRowAction = {
+  icon: ReactNode
+  label: string
+} & (
+  | {
+      to: string
+      onClick?: never
+    }
+  | {
+      onClick: () => void
+      to?: never
+    }
+)
+
+type TableRowActionGroup = {
+  actions: TableRowAction[]
+}
+
+type TableRowActionsProps = {
+  groups: TableRowActionGroup[]
+}
+
+export const TableRowActions = ({ groups }: TableRowActionsProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small" variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        {groups.map((group, index) => {
+          if (!group.actions.length) {
+            return null
+          }
+
+          const isLast = index === groups.length - 1
+
+          return (
+            <div className="flex flex-col gap-y-1">
+              {group.actions.map((action, index) => {
+                if (action.onClick) {
+                  return (
+                    <DropdownMenu.Item
+                      key={index}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        action.onClick()
+                      }}
+                      className="[&_svg]:text-ui-fg-subtle flex items-center gap-x-2"
+                    >
+                      {action.icon}
+                      <span>{action.label}</span>
+                    </DropdownMenu.Item>
+                  )
+                }
+
+                return (
+                  <Link to={action.to} key={index}>
+                    <DropdownMenu.Item
+                      onClick={(e) => {
+                        e.stopPropagation()
+                      }}
+                      className="[&_svg]:text-ui-fg-subtle flex items-center gap-x-2"
+                    >
+                      {action.icon}
+                      <span>{action.label}</span>
+                    </DropdownMenu.Item>
+                  </Link>
+                )
+              })}
+              {!isLast && <DropdownMenu.Separator />}
+            </div>
+          )
+        })}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
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/currencies.ts b/packages/admin-next/dashboard/src/lib/currencies.ts
new file mode 100644
index 0000000000..ae22a07fbb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/lib/currencies.ts
@@ -0,0 +1,730 @@
+/** This file is auto-generated. Do not modify it manually. */
+type CurrencyInfo = {
+  code: string
+  name: string
+  symbol_native: string
+  decimal_digits: number
+}
+
+export const currencies: Record<string, CurrencyInfo> = {
+  USD: {
+    code: "USD",
+    name: "US Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  CAD: {
+    code: "CAD",
+    name: "Canadian Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  EUR: {
+    code: "EUR",
+    name: "Euro",
+    symbol_native: "€",
+    decimal_digits: 2,
+  },
+  AED: {
+    code: "AED",
+    name: "United Arab Emirates Dirham",
+    symbol_native: "د.إ.‏",
+    decimal_digits: 2,
+  },
+  AFN: {
+    code: "AFN",
+    name: "Afghan Afghani",
+    symbol_native: "؋",
+    decimal_digits: 0,
+  },
+  ALL: {
+    code: "ALL",
+    name: "Albanian Lek",
+    symbol_native: "Lek",
+    decimal_digits: 0,
+  },
+  AMD: {
+    code: "AMD",
+    name: "Armenian Dram",
+    symbol_native: "դր.",
+    decimal_digits: 0,
+  },
+  ARS: {
+    code: "ARS",
+    name: "Argentine Peso",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  AUD: {
+    code: "AUD",
+    name: "Australian Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  AZN: {
+    code: "AZN",
+    name: "Azerbaijani Manat",
+    symbol_native: "ман.",
+    decimal_digits: 2,
+  },
+  BAM: {
+    code: "BAM",
+    name: "Bosnia-Herzegovina Convertible Mark",
+    symbol_native: "KM",
+    decimal_digits: 2,
+  },
+  BDT: {
+    code: "BDT",
+    name: "Bangladeshi Taka",
+    symbol_native: "৳",
+    decimal_digits: 2,
+  },
+  BGN: {
+    code: "BGN",
+    name: "Bulgarian Lev",
+    symbol_native: "лв.",
+    decimal_digits: 2,
+  },
+  BHD: {
+    code: "BHD",
+    name: "Bahraini Dinar",
+    symbol_native: "د.ب.‏",
+    decimal_digits: 3,
+  },
+  BIF: {
+    code: "BIF",
+    name: "Burundian Franc",
+    symbol_native: "FBu",
+    decimal_digits: 0,
+  },
+  BND: {
+    code: "BND",
+    name: "Brunei Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  BOB: {
+    code: "BOB",
+    name: "Bolivian Boliviano",
+    symbol_native: "Bs",
+    decimal_digits: 2,
+  },
+  BRL: {
+    code: "BRL",
+    name: "Brazilian Real",
+    symbol_native: "R$",
+    decimal_digits: 2,
+  },
+  BWP: {
+    code: "BWP",
+    name: "Botswanan Pula",
+    symbol_native: "P",
+    decimal_digits: 2,
+  },
+  BYN: {
+    code: "BYN",
+    name: "Belarusian Ruble",
+    symbol_native: "руб.",
+    decimal_digits: 2,
+  },
+  BZD: {
+    code: "BZD",
+    name: "Belize Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  CDF: {
+    code: "CDF",
+    name: "Congolese Franc",
+    symbol_native: "FrCD",
+    decimal_digits: 2,
+  },
+  CHF: {
+    code: "CHF",
+    name: "Swiss Franc",
+    symbol_native: "CHF",
+    decimal_digits: 2,
+  },
+  CLP: {
+    code: "CLP",
+    name: "Chilean Peso",
+    symbol_native: "$",
+    decimal_digits: 0,
+  },
+  CNY: {
+    code: "CNY",
+    name: "Chinese Yuan",
+    symbol_native: "CN¥",
+    decimal_digits: 2,
+  },
+  COP: {
+    code: "COP",
+    name: "Colombian Peso",
+    symbol_native: "$",
+    decimal_digits: 0,
+  },
+  CRC: {
+    code: "CRC",
+    name: "Costa Rican Colón",
+    symbol_native: "₡",
+    decimal_digits: 0,
+  },
+  CVE: {
+    code: "CVE",
+    name: "Cape Verdean Escudo",
+    symbol_native: "CV$",
+    decimal_digits: 2,
+  },
+  CZK: {
+    code: "CZK",
+    name: "Czech Republic Koruna",
+    symbol_native: "Kč",
+    decimal_digits: 2,
+  },
+  DJF: {
+    code: "DJF",
+    name: "Djiboutian Franc",
+    symbol_native: "Fdj",
+    decimal_digits: 0,
+  },
+  DKK: {
+    code: "DKK",
+    name: "Danish Krone",
+    symbol_native: "kr",
+    decimal_digits: 2,
+  },
+  DOP: {
+    code: "DOP",
+    name: "Dominican Peso",
+    symbol_native: "RD$",
+    decimal_digits: 2,
+  },
+  DZD: {
+    code: "DZD",
+    name: "Algerian Dinar",
+    symbol_native: "د.ج.‏",
+    decimal_digits: 2,
+  },
+  EEK: {
+    code: "EEK",
+    name: "Estonian Kroon",
+    symbol_native: "kr",
+    decimal_digits: 2,
+  },
+  EGP: {
+    code: "EGP",
+    name: "Egyptian Pound",
+    symbol_native: "ج.م.‏",
+    decimal_digits: 2,
+  },
+  ERN: {
+    code: "ERN",
+    name: "Eritrean Nakfa",
+    symbol_native: "Nfk",
+    decimal_digits: 2,
+  },
+  ETB: {
+    code: "ETB",
+    name: "Ethiopian Birr",
+    symbol_native: "Br",
+    decimal_digits: 2,
+  },
+  GBP: {
+    code: "GBP",
+    name: "British Pound Sterling",
+    symbol_native: "£",
+    decimal_digits: 2,
+  },
+  GEL: {
+    code: "GEL",
+    name: "Georgian Lari",
+    symbol_native: "GEL",
+    decimal_digits: 2,
+  },
+  GHS: {
+    code: "GHS",
+    name: "Ghanaian Cedi",
+    symbol_native: "GH₵",
+    decimal_digits: 2,
+  },
+  GNF: {
+    code: "GNF",
+    name: "Guinean Franc",
+    symbol_native: "FG",
+    decimal_digits: 0,
+  },
+  GTQ: {
+    code: "GTQ",
+    name: "Guatemalan Quetzal",
+    symbol_native: "Q",
+    decimal_digits: 2,
+  },
+  HKD: {
+    code: "HKD",
+    name: "Hong Kong Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  HNL: {
+    code: "HNL",
+    name: "Honduran Lempira",
+    symbol_native: "L",
+    decimal_digits: 2,
+  },
+  HRK: {
+    code: "HRK",
+    name: "Croatian Kuna",
+    symbol_native: "kn",
+    decimal_digits: 2,
+  },
+  HUF: {
+    code: "HUF",
+    name: "Hungarian Forint",
+    symbol_native: "Ft",
+    decimal_digits: 0,
+  },
+  IDR: {
+    code: "IDR",
+    name: "Indonesian Rupiah",
+    symbol_native: "Rp",
+    decimal_digits: 0,
+  },
+  ILS: {
+    code: "ILS",
+    name: "Israeli New Sheqel",
+    symbol_native: "₪",
+    decimal_digits: 2,
+  },
+  INR: {
+    code: "INR",
+    name: "Indian Rupee",
+    symbol_native: "টকা",
+    decimal_digits: 2,
+  },
+  IQD: {
+    code: "IQD",
+    name: "Iraqi Dinar",
+    symbol_native: "د.ع.‏",
+    decimal_digits: 0,
+  },
+  IRR: {
+    code: "IRR",
+    name: "Iranian Rial",
+    symbol_native: "﷼",
+    decimal_digits: 0,
+  },
+  ISK: {
+    code: "ISK",
+    name: "Icelandic Króna",
+    symbol_native: "kr",
+    decimal_digits: 0,
+  },
+  JMD: {
+    code: "JMD",
+    name: "Jamaican Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  JOD: {
+    code: "JOD",
+    name: "Jordanian Dinar",
+    symbol_native: "د.أ.‏",
+    decimal_digits: 3,
+  },
+  JPY: {
+    code: "JPY",
+    name: "Japanese Yen",
+    symbol_native: "￥",
+    decimal_digits: 0,
+  },
+  KES: {
+    code: "KES",
+    name: "Kenyan Shilling",
+    symbol_native: "Ksh",
+    decimal_digits: 2,
+  },
+  KHR: {
+    code: "KHR",
+    name: "Cambodian Riel",
+    symbol_native: "៛",
+    decimal_digits: 2,
+  },
+  KMF: {
+    code: "KMF",
+    name: "Comorian Franc",
+    symbol_native: "FC",
+    decimal_digits: 0,
+  },
+  KRW: {
+    code: "KRW",
+    name: "South Korean Won",
+    symbol_native: "₩",
+    decimal_digits: 0,
+  },
+  KWD: {
+    code: "KWD",
+    name: "Kuwaiti Dinar",
+    symbol_native: "د.ك.‏",
+    decimal_digits: 3,
+  },
+  KZT: {
+    code: "KZT",
+    name: "Kazakhstani Tenge",
+    symbol_native: "тңг.",
+    decimal_digits: 2,
+  },
+  LBP: {
+    code: "LBP",
+    name: "Lebanese Pound",
+    symbol_native: "ل.ل.‏",
+    decimal_digits: 0,
+  },
+  LKR: {
+    code: "LKR",
+    name: "Sri Lankan Rupee",
+    symbol_native: "SL Re",
+    decimal_digits: 2,
+  },
+  LTL: {
+    code: "LTL",
+    name: "Lithuanian Litas",
+    symbol_native: "Lt",
+    decimal_digits: 2,
+  },
+  LVL: {
+    code: "LVL",
+    name: "Latvian Lats",
+    symbol_native: "Ls",
+    decimal_digits: 2,
+  },
+  LYD: {
+    code: "LYD",
+    name: "Libyan Dinar",
+    symbol_native: "د.ل.‏",
+    decimal_digits: 3,
+  },
+  MAD: {
+    code: "MAD",
+    name: "Moroccan Dirham",
+    symbol_native: "د.م.‏",
+    decimal_digits: 2,
+  },
+  MDL: {
+    code: "MDL",
+    name: "Moldovan Leu",
+    symbol_native: "MDL",
+    decimal_digits: 2,
+  },
+  MGA: {
+    code: "MGA",
+    name: "Malagasy Ariary",
+    symbol_native: "MGA",
+    decimal_digits: 0,
+  },
+  MKD: {
+    code: "MKD",
+    name: "Macedonian Denar",
+    symbol_native: "MKD",
+    decimal_digits: 2,
+  },
+  MMK: {
+    code: "MMK",
+    name: "Myanma Kyat",
+    symbol_native: "K",
+    decimal_digits: 0,
+  },
+  MNT: {
+    code: "MNT",
+    name: "Mongolian Tugrig",
+    symbol_native: "₮",
+    decimal_digits: 0,
+  },
+  MOP: {
+    code: "MOP",
+    name: "Macanese Pataca",
+    symbol_native: "MOP$",
+    decimal_digits: 2,
+  },
+  MUR: {
+    code: "MUR",
+    name: "Mauritian Rupee",
+    symbol_native: "MURs",
+    decimal_digits: 0,
+  },
+  MXN: {
+    code: "MXN",
+    name: "Mexican Peso",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  MYR: {
+    code: "MYR",
+    name: "Malaysian Ringgit",
+    symbol_native: "RM",
+    decimal_digits: 2,
+  },
+  MZN: {
+    code: "MZN",
+    name: "Mozambican Metical",
+    symbol_native: "MTn",
+    decimal_digits: 2,
+  },
+  NAD: {
+    code: "NAD",
+    name: "Namibian Dollar",
+    symbol_native: "N$",
+    decimal_digits: 2,
+  },
+  NGN: {
+    code: "NGN",
+    name: "Nigerian Naira",
+    symbol_native: "₦",
+    decimal_digits: 2,
+  },
+  NIO: {
+    code: "NIO",
+    name: "Nicaraguan Córdoba",
+    symbol_native: "C$",
+    decimal_digits: 2,
+  },
+  NOK: {
+    code: "NOK",
+    name: "Norwegian Krone",
+    symbol_native: "kr",
+    decimal_digits: 2,
+  },
+  NPR: {
+    code: "NPR",
+    name: "Nepalese Rupee",
+    symbol_native: "नेरू",
+    decimal_digits: 2,
+  },
+  NZD: {
+    code: "NZD",
+    name: "New Zealand Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  OMR: {
+    code: "OMR",
+    name: "Omani Rial",
+    symbol_native: "ر.ع.‏",
+    decimal_digits: 3,
+  },
+  PAB: {
+    code: "PAB",
+    name: "Panamanian Balboa",
+    symbol_native: "B/.",
+    decimal_digits: 2,
+  },
+  PEN: {
+    code: "PEN",
+    name: "Peruvian Nuevo Sol",
+    symbol_native: "S/.",
+    decimal_digits: 2,
+  },
+  PHP: {
+    code: "PHP",
+    name: "Philippine Peso",
+    symbol_native: "₱",
+    decimal_digits: 2,
+  },
+  PKR: {
+    code: "PKR",
+    name: "Pakistani Rupee",
+    symbol_native: "₨",
+    decimal_digits: 0,
+  },
+  PLN: {
+    code: "PLN",
+    name: "Polish Zloty",
+    symbol_native: "zł",
+    decimal_digits: 2,
+  },
+  PYG: {
+    code: "PYG",
+    name: "Paraguayan Guarani",
+    symbol_native: "₲",
+    decimal_digits: 0,
+  },
+  QAR: {
+    code: "QAR",
+    name: "Qatari Rial",
+    symbol_native: "ر.ق.‏",
+    decimal_digits: 2,
+  },
+  RON: {
+    code: "RON",
+    name: "Romanian Leu",
+    symbol_native: "RON",
+    decimal_digits: 2,
+  },
+  RSD: {
+    code: "RSD",
+    name: "Serbian Dinar",
+    symbol_native: "дин.",
+    decimal_digits: 0,
+  },
+  RUB: {
+    code: "RUB",
+    name: "Russian Ruble",
+    symbol_native: "₽.",
+    decimal_digits: 2,
+  },
+  RWF: {
+    code: "RWF",
+    name: "Rwandan Franc",
+    symbol_native: "FR",
+    decimal_digits: 0,
+  },
+  SAR: {
+    code: "SAR",
+    name: "Saudi Riyal",
+    symbol_native: "ر.س.‏",
+    decimal_digits: 2,
+  },
+  SDG: {
+    code: "SDG",
+    name: "Sudanese Pound",
+    symbol_native: "SDG",
+    decimal_digits: 2,
+  },
+  SEK: {
+    code: "SEK",
+    name: "Swedish Krona",
+    symbol_native: "kr",
+    decimal_digits: 2,
+  },
+  SGD: {
+    code: "SGD",
+    name: "Singapore Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  SOS: {
+    code: "SOS",
+    name: "Somali Shilling",
+    symbol_native: "Ssh",
+    decimal_digits: 0,
+  },
+  SYP: {
+    code: "SYP",
+    name: "Syrian Pound",
+    symbol_native: "ل.س.‏",
+    decimal_digits: 0,
+  },
+  THB: {
+    code: "THB",
+    name: "Thai Baht",
+    symbol_native: "฿",
+    decimal_digits: 2,
+  },
+  TND: {
+    code: "TND",
+    name: "Tunisian Dinar",
+    symbol_native: "د.ت.‏",
+    decimal_digits: 3,
+  },
+  TOP: {
+    code: "TOP",
+    name: "Tongan Paʻanga",
+    symbol_native: "T$",
+    decimal_digits: 2,
+  },
+  TRY: {
+    code: "TRY",
+    name: "Turkish Lira",
+    symbol_native: "TL",
+    decimal_digits: 2,
+  },
+  TTD: {
+    code: "TTD",
+    name: "Trinidad and Tobago Dollar",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  TWD: {
+    code: "TWD",
+    name: "New Taiwan Dollar",
+    symbol_native: "NT$",
+    decimal_digits: 2,
+  },
+  TZS: {
+    code: "TZS",
+    name: "Tanzanian Shilling",
+    symbol_native: "TSh",
+    decimal_digits: 0,
+  },
+  UAH: {
+    code: "UAH",
+    name: "Ukrainian Hryvnia",
+    symbol_native: "₴",
+    decimal_digits: 2,
+  },
+  UGX: {
+    code: "UGX",
+    name: "Ugandan Shilling",
+    symbol_native: "USh",
+    decimal_digits: 0,
+  },
+  UYU: {
+    code: "UYU",
+    name: "Uruguayan Peso",
+    symbol_native: "$",
+    decimal_digits: 2,
+  },
+  UZS: {
+    code: "UZS",
+    name: "Uzbekistan Som",
+    symbol_native: "UZS",
+    decimal_digits: 0,
+  },
+  VEF: {
+    code: "VEF",
+    name: "Venezuelan Bolívar",
+    symbol_native: "Bs.F.",
+    decimal_digits: 2,
+  },
+  VND: {
+    code: "VND",
+    name: "Vietnamese Dong",
+    symbol_native: "₫",
+    decimal_digits: 0,
+  },
+  XAF: {
+    code: "XAF",
+    name: "CFA Franc BEAC",
+    symbol_native: "FCFA",
+    decimal_digits: 0,
+  },
+  XOF: {
+    code: "XOF",
+    name: "CFA Franc BCEAO",
+    symbol_native: "CFA",
+    decimal_digits: 0,
+  },
+  YER: {
+    code: "YER",
+    name: "Yemeni Rial",
+    symbol_native: "ر.ي.‏",
+    decimal_digits: 0,
+  },
+  ZAR: {
+    code: "ZAR",
+    name: "South African Rand",
+    symbol_native: "R",
+    decimal_digits: 2,
+  },
+  ZMK: {
+    code: "ZMK",
+    name: "Zambian Kwacha",
+    symbol_native: "ZK",
+    decimal_digits: 0,
+  },
+  ZWL: {
+    code: "ZWL",
+    name: "Zimbabwean Dollar",
+    symbol_native: "ZWL$",
+    decimal_digits: 0,
+  },
+}
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/lib/money-amount-helpers.ts b/packages/admin-next/dashboard/src/lib/money-amount-helpers.ts
new file mode 100644
index 0000000000..d043af4f37
--- /dev/null
+++ b/packages/admin-next/dashboard/src/lib/money-amount-helpers.ts
@@ -0,0 +1,21 @@
+import { currencies } from "./currencies"
+
+export const getPresentationalAmount = (amount: number, currency: string) => {
+  const decimalDigits = currencies[currency.toUpperCase()].decimal_digits
+
+  if (decimalDigits === 0) {
+    throw new Error("Currency has no decimal digits")
+  }
+
+  return amount / 10 ** decimalDigits
+}
+
+export const getDbAmount = (amount: number, currency: string) => {
+  const decimalDigits = currencies[currency.toUpperCase()].decimal_digits
+
+  if (decimalDigits === 0) {
+    throw new Error("Currency has no decimal digits")
+  }
+
+  return amount * 10 ** decimalDigits
+}
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..3249db7847 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,18 +1,24 @@
+import type {
+  AdminCustomerGroupsRes,
+  AdminCustomersRes,
+  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 { ProtectedRoute } from "../../components/authentication/require-auth"
+import { ErrorBoundary } from "../../components/error/error-boundary"
+import { MainLayout } from "../../components/layout/main-layout"
 import { PublicLayout } from "../../components/layout/public-layout"
+import { SettingsLayout } from "../../components/layout/settings-layout"
 
-import { AdminProductsRes } from "@medusajs/medusa"
 import routes from "medusa-admin:routes/pages"
 import settings from "medusa-admin:settings/pages"
-import { ErrorBoundary } from "../../components/error/error-boundary"
-import { SearchProvider } from "../search-provider"
 
 const routeExtensions: RouteObject[] = routes.pages.map((ext) => {
   return {
@@ -45,161 +51,239 @@ 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: [
+              {
+                path: "",
+                lazy: () => import("../../routes/customers/customer-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import("../../routes/customers/customer-create"),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/customers/customer-detail"),
+                handle: {
+                  crumb: (data: AdminCustomersRes) => data.customer.email,
+                },
+                children: [
+                  {
+                    path: "edit",
+                    lazy: () => import("../../routes/customers/customer-edit"),
+                  },
+                ],
+              },
+            ],
           },
           {
-            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: [
+              {
+                path: "",
+                lazy: () =>
+                  import("../../routes/customer-groups/customer-group-list"),
+                children: [
+                  {
+                    path: "create",
+                    lazy: () =>
+                      import(
+                        "../../routes/customer-groups/customer-group-create"
+                      ),
+                  },
+                ],
+              },
+              {
+                path: ":id",
+                lazy: () =>
+                  import("../../routes/customer-groups/customer-group-detail"),
+                handle: {
+                  crumb: (data: AdminCustomerGroupsRes) =>
+                    data.customer_group.name,
+                },
+                children: [
+                  {
+                    path: "add-customers",
+                    lazy: () =>
+                      import(
+                        "../../routes/customer-groups/customer-group-add-customers"
+                      ),
+                  },
+                  {
+                    path: "edit",
+                    lazy: () =>
+                      import(
+                        "../../routes/customer-groups/customer-group-edit"
+                      ),
+                  },
+                ],
+              },
+            ],
           },
           {
-            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 +294,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,32 +438,86 @@ 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,
         ],
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/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx
new file mode 100644
index 0000000000..ac47e264f5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx
@@ -0,0 +1,347 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Customer } 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 {
+  adminCustomerKeys,
+  useAdminAddCustomersToCustomerGroup,
+  useAdminCustomers,
+} from "medusa-react"
+import { useEffect, useMemo, useState } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import * as zod from "zod"
+import {
+  NoRecords,
+  NoResults,
+} from "../../../../../components/common/empty-table-content"
+import { Form } from "../../../../../components/common/form"
+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 AddCustomersFormProps = {
+  customerGroupId: string
+  subscribe: (state: boolean) => void
+}
+
+const AddCustomersSchema = zod.object({
+  customer_ids: zod.array(zod.string()).min(1),
+})
+
+const PAGE_SIZE = 10
+
+export const AddCustomersForm = ({
+  customerGroupId,
+  subscribe,
+}: AddCustomersFormProps) => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+
+  const form = useForm<zod.infer<typeof AddCustomersSchema>>({
+    defaultValues: {
+      customer_ids: [],
+    },
+    resolver: zodResolver(AddCustomersSchema),
+  })
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  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(
+      "customer_ids",
+      Object.keys(rowSelection).filter((k) => rowSelection[k])
+    )
+  }, [rowSelection])
+
+  const params = useQueryParams(["q"])
+  const { customers, count, isLoading, isError, error } = useAdminCustomers({
+    expand: "groups",
+    limit: PAGE_SIZE,
+    offset: pageIndex * PAGE_SIZE,
+    ...params,
+  })
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: customers ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    getRowId: (row) => row.id,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    meta: {
+      customerGroupId,
+    },
+  })
+
+  const { mutateAsync, isLoading: isMutating } =
+    useAdminAddCustomersToCustomerGroup(customerGroupId)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        customer_ids: data.customer_ids.map((id) => ({ id })),
+      },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries(adminCustomerKeys.lists())
+          navigate(`/customer-groups/${customerGroupId}`)
+        },
+      }
+    )
+  })
+
+  const noRecords =
+    !isLoading &&
+    !customers?.length &&
+    !Object.values(params).filter(Boolean).length
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex h-full flex-col overflow-hidden"
+        onSubmit={handleSubmit}
+      >
+        <FocusModal.Header>
+          <div className="flex items-center justify-end gap-x-2">
+            {form.formState.errors.customer_ids && (
+              <Hint variant="error">
+                {form.formState.errors.customer_ids.message}
+              </Hint>
+            )}
+            <FocusModal.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("general.cancel")}
+              </Button>
+            </FocusModal.Close>
+            <Button
+              type="submit"
+              variant="primary"
+              size="small"
+              isLoading={isMutating}
+            >
+              {t("general.add")}
+            </Button>
+          </div>
+        </FocusModal.Header>
+        <FocusModal.Body className="flex h-full w-full flex-col items-center overflow-y-auto divide-y">
+          {noRecords ? (
+            <div className="w-full flex-1 flex items-center justify-center">
+              <NoRecords />
+            </div>
+          ) : (
+            <div className="divide-y w-full flex-1 flex flex-col">
+              <div className="flex items-center justify-between w-full px-6 py-4">
+                <div></div>
+                <div className="flex items-center gap-x-2">
+                  <Query />
+                </div>
+              </div>
+              <div className="w-full flex-1 overflow-y-auto">
+                {(customers?.length || 0) > 0 ? (
+                  <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.groups
+                                  ?.map((cg) => cg.id)
+                                  .includes(customerGroupId),
+                            }
+                          )}
+                        >
+                          {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-1 flex items-center justify-center min-h-full">
+                    <NoResults />
+                  </div>
+                )}
+              </div>
+              <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<Customer>()
+
+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, table }) => {
+          const { customerGroupId } = table.options.meta as {
+            customerGroupId: string
+          }
+
+          const isAdded = row.original.groups
+            ?.map((gc) => gc.id)
+            .includes(customerGroupId)
+
+          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("customerGroups.customerAlreadyAdded")}
+                side="right"
+              >
+                {Component}
+              </Tooltip>
+            )
+          }
+
+          return Component
+        },
+      }),
+      columnHelper.accessor("email", {
+        header: t("fields.email"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.display({
+        id: "name",
+        header: t("fields.name"),
+        cell: ({ row }) => {
+          const name = [row.original.first_name, row.original.last_name]
+            .filter(Boolean)
+            .join(" ")
+
+          return name || "-"
+        },
+      }),
+    ],
+    [t]
+  )
+
+  return columns
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/index.ts
new file mode 100644
index 0000000000..512d1edf6f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/index.ts
@@ -0,0 +1 @@
+export * from "./add-customers-form"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/customer-group-add-customers.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/customer-group-add-customers.tsx
new file mode 100644
index 0000000000..874d277800
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/customer-group-add-customers.tsx
@@ -0,0 +1,18 @@
+import { FocusModal } from "@medusajs/ui"
+import { useParams } from "react-router-dom"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { AddCustomersForm } from "./components/add-customers-form"
+
+export const CustomerGroupAddCustomers = () => {
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  const { id } = useParams()
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        <AddCustomersForm customerGroupId={id!} subscribe={subscribe} />
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/index.ts
new file mode 100644
index 0000000000..3b39c9e782
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-add-customers/index.ts
@@ -0,0 +1 @@
+export { CustomerGroupAddCustomers as Component } from "./customer-group-add-customers"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/components/create-customer-group-form/create-customer-group-form.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/components/create-customer-group-form/create-customer-group-form.tsx
new file mode 100644
index 0000000000..76ff4075f0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/components/create-customer-group-form/create-customer-group-form.tsx
@@ -0,0 +1,105 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, FocusModal, Heading, Input, Text } from "@medusajs/ui"
+import { useAdminCreateCustomerGroup } from "medusa-react"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import * as zod from "zod"
+import { Form } from "../../../../../components/common/form"
+
+type CreateCustomerGroupFormProps = {
+  subscribe: (state: boolean) => void
+}
+
+const CreateCustomerGroupSchema = zod.object({
+  name: zod.string().min(1),
+})
+
+export const CreateCustomerGroupForm = ({
+  subscribe,
+}: CreateCustomerGroupFormProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const form = useForm<zod.infer<typeof CreateCustomerGroupSchema>>({
+    defaultValues: {
+      name: "",
+    },
+    resolver: zodResolver(CreateCustomerGroupSchema),
+  })
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { mutateAsync, isLoading } = useAdminCreateCustomerGroup()
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        name: data.name,
+      },
+      {
+        onSuccess: ({ customer_group }) => {
+          navigate(`/customer-groups/${customer_group.id}`)
+        },
+      }
+    )
+  })
+
+  return (
+    <Form {...form}>
+      <form onSubmit={handleSubmit}>
+        <FocusModal.Header>
+          <div className="flex items-center gap-x-2 justify-end">
+            <FocusModal.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("general.cancel")}
+              </Button>
+            </FocusModal.Close>
+            <Button
+              type="submit"
+              variant="primary"
+              size="small"
+              isLoading={isLoading}
+            >
+              {t("general.create")}
+            </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-8">
+            <div>
+              <Heading>{t("customerGroups.createCustomerGroup")}</Heading>
+              <Text size="small" className="text-ui-fg-subtle">
+                {t("customerGroups.createCustomerGroupHint")}
+              </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 {...field} />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+            </div>
+          </div>
+        </FocusModal.Body>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/components/create-customer-group-form/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/components/create-customer-group-form/index.ts
new file mode 100644
index 0000000000..960232c9c2
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/components/create-customer-group-form/index.ts
@@ -0,0 +1 @@
+export * from "./create-customer-group-form"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/customer-group-create.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/customer-group-create.tsx
new file mode 100644
index 0000000000..6fc39b5067
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/customer-group-create.tsx
@@ -0,0 +1,15 @@
+import { FocusModal } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { CreateCustomerGroupForm } from "./components/create-customer-group-form"
+
+export const CustomerGroupCreate = () => {
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        <CreateCustomerGroupForm subscribe={subscribe} />
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/index.ts
new file mode 100644
index 0000000000..9bab0611a8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-create/index.ts
@@ -0,0 +1 @@
+export { CustomerGroupCreate as Component } from "./customer-group-create"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-customer-section/customer-group-customer-section.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-customer-section/customer-group-customer-section.tsx
new file mode 100644
index 0000000000..04eb0e4bcb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-customer-section/customer-group-customer-section.tsx
@@ -0,0 +1,387 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { Customer, CustomerGroup } from "@medusajs/medusa"
+import {
+  Button,
+  Checkbox,
+  CommandBar,
+  Container,
+  Heading,
+  StatusBadge,
+  Table,
+  clx,
+  usePrompt,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  useAdminCustomerGroupCustomers,
+  useAdminRemoveCustomersFromCustomerGroup,
+} from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+import {
+  NoRecords,
+  NoResults,
+} from "../../../../../components/common/empty-table-content"
+import { TableRowActions } from "../../../../../components/common/table-row-actions"
+import { Query } from "../../../../../components/filtering/query"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+type CustomerGroupCustomerSectionProps = {
+  group: CustomerGroup
+}
+
+const PAGE_SIZE = 10
+
+export const CustomerGroupCustomerSection = ({
+  group,
+}: CustomerGroupCustomerSectionProps) => {
+  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 params = useQueryParams(["q"])
+  const { customers, count, isLoading, isError, error } =
+    useAdminCustomerGroupCustomers(
+      group.id,
+      {
+        limit: PAGE_SIZE,
+        offset: pageIndex * PAGE_SIZE,
+        ...params,
+      },
+      {
+        keepPreviousData: true,
+      }
+    )
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: customers ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    getRowId: (row) => row.id,
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    meta: {
+      customerGroupId: group.id,
+    },
+  })
+
+  const { mutateAsync } = useAdminRemoveCustomersFromCustomerGroup(group.id)
+  const prompt = usePrompt()
+
+  const handleRemoveCustomers = async () => {
+    const selected = Object.keys(rowSelection).filter((k) => rowSelection[k])
+
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("customerGroups.removeCustomersWarning", {
+        count: selected.length,
+      }),
+      confirmText: t("general.continue"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(
+      {
+        customer_ids: selected.map((s) => ({ id: s })),
+      },
+      {
+        onSuccess: () => {
+          setRowSelection({})
+        },
+      }
+    )
+  }
+
+  const noRecords =
+    !isLoading &&
+    !customers?.length &&
+    !Object.values(params).filter(Boolean).length
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0 divide-y">
+      <div className="px-6 py-4 flex items-center justify-between">
+        <Heading level="h2">{t("customers.domain")}</Heading>
+        <Link to={`/customer-groups/${group.id}/add-customers`}>
+          <Button variant="secondary" size="small">
+            {t("general.add")}
+          </Button>
+        </Link>
+      </div>
+      <div>
+        {noRecords ? (
+          <NoRecords />
+        ) : (
+          <div className="divide-y">
+            <div className="px-6 py-4 flex items-center justify-between">
+              <div></div>
+              <div className="flex items-center gap-x-2">
+                <Query />
+              </div>
+            </div>
+            <div>
+              {(customers?.length || 0) > 0 ? (
+                <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: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 [&_td:first-of-type]:w-[1%] [&_td:first-of-type]:whitespace-nowrap",
+                          {
+                            "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
+                              row.getIsSelected(),
+                          }
+                        )}
+                        onClick={() =>
+                          navigate(`/customers/${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="border-b">
+                  <NoResults />
+                </div>
+              )}
+              <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={handleRemoveCustomers}
+                    shortcut="r"
+                    label={t("general.remove")}
+                  />
+                </CommandBar.Bar>
+              </CommandBar>
+            </div>
+          </div>
+        )}
+      </div>
+    </Container>
+  )
+}
+
+const CustomerActions = ({
+  customer,
+  customerGroupId,
+}: {
+  customer: Customer
+  customerGroupId: string
+}) => {
+  const { t } = useTranslation()
+  const { mutateAsync } =
+    useAdminRemoveCustomersFromCustomerGroup(customerGroupId)
+
+  const prompt = usePrompt()
+
+  const handleRemove = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("customerGroups.removeCustomersWarning", {
+        count: 1,
+      }),
+      confirmText: t("general.continue"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync({
+      customer_ids: [{ id: customer.id }],
+    })
+  }
+
+  return (
+    <TableRowActions
+      groups={[
+        {
+          actions: [
+            {
+              icon: <PencilSquare />,
+              label: t("general.edit"),
+              to: `/customers/${customer.id}/edit`,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("general.remove"),
+              onClick: handleRemove,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<Customer>()
+
+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("email", {
+        header: t("fields.email"),
+        cell: ({ getValue }) => <span>{getValue()}</span>,
+      }),
+      columnHelper.display({
+        id: "name",
+        header: t("fields.name"),
+        cell: ({ row }) => {
+          const name = [row.original.first_name, row.original.last_name]
+            .filter(Boolean)
+            .join(" ")
+
+          return name || "-"
+        },
+      }),
+      columnHelper.accessor("has_account", {
+        header: t("fields.account"),
+        cell: ({ getValue }) => {
+          const hasAccount = getValue()
+
+          return (
+            <StatusBadge color={hasAccount ? "green" : "blue"}>
+              {hasAccount ? t("customers.registered") : t("customers.guest")}
+            </StatusBadge>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row, table }) => {
+          const { customerGroupId } = table.options.meta as {
+            customerGroupId: string
+          }
+
+          return (
+            <CustomerActions
+              customer={row.original}
+              customerGroupId={customerGroupId}
+            />
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-customer-section/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-customer-section/index.ts
new file mode 100644
index 0000000000..3098ff7aca
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-customer-section/index.ts
@@ -0,0 +1 @@
+export * from "./customer-group-customer-section"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-general-section/customer-group-general-section.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-general-section/customer-group-general-section.tsx
new file mode 100644
index 0000000000..e11dd5464e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-general-section/customer-group-general-section.tsx
@@ -0,0 +1,56 @@
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
+import type { CustomerGroup } from "@medusajs/medusa"
+import { Container, DropdownMenu, Heading, IconButton } from "@medusajs/ui"
+import { useAdminDeleteCustomerGroup } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+
+type CustomerGroupGeneralSectionProps = {
+  group: CustomerGroup
+}
+
+export const CustomerGroupGeneralSection = ({
+  group,
+}: CustomerGroupGeneralSectionProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const { mutateAsync } = useAdminDeleteCustomerGroup(group.id)
+
+  const handleDelete = async () => {
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        navigate("/customer-groups", { replace: true })
+      },
+    })
+  }
+
+  return (
+    <Container className="px-6 py-4 flex items-center justify-between">
+      <Heading>{group.name}</Heading>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <IconButton size="small" variant="transparent">
+            <EllipsisHorizontal />
+          </IconButton>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <Link to={`/customer-groups/${group.id}/edit`}>
+            <DropdownMenu.Item className="flex items-center gap-x-2">
+              <PencilSquare className="text-ui-fg-subtle" />
+              <span>{t("general.edit")}</span>
+            </DropdownMenu.Item>
+          </Link>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item
+            className="flex items-center gap-x-2"
+            onClick={handleDelete}
+          >
+            <Trash className="text-ui-fg-subtle" />
+            <span>{t("general.delete")}</span>
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </Container>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-general-section/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-general-section/index.ts
new file mode 100644
index 0000000000..dfe7099024
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/components/customer-group-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./customer-group-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx
new file mode 100644
index 0000000000..0d93790b5a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx
@@ -0,0 +1,40 @@
+import { useAdminCustomerGroup } from "medusa-react"
+import { Outlet, json, useLoaderData, useParams } from "react-router-dom"
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { CustomerGroupCustomerSection } from "./components/customer-group-customer-section"
+import { CustomerGroupGeneralSection } from "./components/customer-group-general-section"
+import { customerGroupLoader } from "./loader"
+
+export const CustomerGroupDetail = () => {
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof customerGroupLoader>
+  >
+
+  const { id } = useParams()
+  const { customer_group, isLoading, isError, error } = useAdminCustomerGroup(
+    id!,
+    undefined,
+    { initialData }
+  )
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError || !customer_group) {
+    if (error) {
+      throw error
+    }
+
+    throw json("An unknown error occurred", 500)
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <CustomerGroupGeneralSection group={customer_group} />
+      <CustomerGroupCustomerSection group={customer_group} />
+      <JsonViewSection data={customer_group} />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/index.ts
new file mode 100644
index 0000000000..c1f4e53399
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/index.ts
@@ -0,0 +1,2 @@
+export { CustomerGroupDetail as Component } from "./customer-group-detail"
+export { customerGroupLoader as loader } from "./loader"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/loader.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/loader.ts
new file mode 100644
index 0000000000..1c8c2beb6b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-detail/loader.ts
@@ -0,0 +1,22 @@
+import { AdminCustomerGroupsRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { adminProductKeys } from "medusa-react"
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { medusa, queryClient } from "../../../lib/medusa"
+
+const customerGroupDetailQuery = (id: string) => ({
+  queryKey: adminProductKeys.detail(id),
+  queryFn: async () => medusa.admin.customerGroups.retrieve(id),
+})
+
+export const customerGroupLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = customerGroupDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<Response<AdminCustomerGroupsRes>>(
+      query.queryKey
+    ) ?? (await queryClient.fetchQuery(query))
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/components/edit-customer-group-form/edit-customer-group-form.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/components/edit-customer-group-form/edit-customer-group-form.tsx
new file mode 100644
index 0000000000..0e034ba603
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/components/edit-customer-group-form/edit-customer-group-form.tsx
@@ -0,0 +1,91 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { CustomerGroup } from "@medusajs/medusa"
+import { Button, Drawer, Input } from "@medusajs/ui"
+import { useAdminUpdateCustomerGroup } from "medusa-react"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as z from "zod"
+import { Form } from "../../../../../components/common/form"
+
+type EditCustomerGroupFormProps = {
+  group: CustomerGroup
+  onSuccessfulSubmit: () => void
+  subscribe: (state: boolean) => void
+}
+
+const EditCustomerGroupSchema = z.object({
+  name: z.string().min(1),
+})
+
+export const EditCustomerGroupForm = ({
+  group,
+  onSuccessfulSubmit,
+  subscribe,
+}: EditCustomerGroupFormProps) => {
+  const { t } = useTranslation()
+
+  const form = useForm<z.infer<typeof EditCustomerGroupSchema>>({
+    defaultValues: {
+      name: group.name || "",
+    },
+    resolver: zodResolver(EditCustomerGroupSchema),
+  })
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { mutateAsync, isLoading } = useAdminUpdateCustomerGroup(group.id)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(data, {
+      onSuccess: () => {
+        onSuccessfulSubmit()
+      },
+    })
+  })
+
+  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>
+              )
+            }}
+          />
+        </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/customer-groups/customer-group-edit/components/edit-customer-group-form/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/components/edit-customer-group-form/index.ts
new file mode 100644
index 0000000000..3062389f75
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/components/edit-customer-group-form/index.ts
@@ -0,0 +1 @@
+export * from "./edit-customer-group-form"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/customer-group-edit.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/customer-group-edit.tsx
new file mode 100644
index 0000000000..0e43bdd314
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/customer-group-edit.tsx
@@ -0,0 +1,42 @@
+import { Drawer, Heading } from "@medusajs/ui"
+import { useAdminCustomerGroup } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { EditCustomerGroupForm } from "./components/edit-customer-group-form"
+
+export const CustomerGroupEdit = () => {
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  const { id } = useParams()
+  const { customer_group, isLoading, isError, error } = useAdminCustomerGroup(
+    id!
+  )
+
+  const { t } = useTranslation()
+
+  const handleSuccessfulSubmit = () => {
+    onOpenChange(false, true)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Heading>{t("customerGroups.editCustomerGroup")}</Heading>
+        </Drawer.Header>
+        {!isLoading && customer_group && (
+          <EditCustomerGroupForm
+            subscribe={subscribe}
+            onSuccessfulSubmit={handleSuccessfulSubmit}
+            group={customer_group}
+          />
+        )}
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/index.ts
new file mode 100644
index 0000000000..edb805c0ad
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-edit/index.ts
@@ -0,0 +1 @@
+export { CustomerGroupEdit as Component } from "./customer-group-edit"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/customer-group-list-table.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/customer-group-list-table.tsx
new file mode 100644
index 0000000000..b090df3679
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/customer-group-list-table.tsx
@@ -0,0 +1,251 @@
+import { PencilSquare, Trash } from "@medusajs/icons"
+import { CustomerGroup } from "@medusajs/medusa"
+import { Button, Container, Heading, Table, clx, usePrompt } from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  useAdminCustomerGroups,
+  useAdminDeleteCustomerGroup,
+} from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+import {
+  NoRecords,
+  NoResults,
+} from "../../../../../components/common/empty-table-content"
+import { TableRowActions } from "../../../../../components/common/table-row-actions"
+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 CustomerGroupListTable = () => {
+  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 params = useQueryParams(["q", "order"])
+  const { customer_groups, count, isLoading, isError, error } =
+    useAdminCustomerGroups({
+      limit: PAGE_SIZE,
+      offset: pageIndex * PAGE_SIZE,
+      ...params,
+    })
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: customer_groups ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  const noRecords =
+    !isLoading &&
+    !customer_groups?.length &&
+    !Object.values(params).filter(Boolean).length
+
+  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("customerGroups.domain")}</Heading>
+        <Link to="/customer-groups/create">
+          <Button size="small" variant="secondary">
+            {t("general.create")}
+          </Button>
+        </Link>
+      </div>
+      <div>
+        {noRecords ? (
+          <NoRecords
+            action={{
+              label: t("customerGroups.createGroup"),
+              to: "/customer-groups/create",
+            }}
+          />
+        ) : (
+          <div className="divide-y">
+            <div className="flex items-center px-6 py-2 justify-between">
+              <div className="flex items-center gap-x-2"></div>
+              <div className="flex items-center gap-x-2">
+                <Query />
+                <OrderBy keys={["name", "created_at", "updated_at"]} />
+              </div>
+            </div>
+            <div>
+              {(customer_groups?.length || 0) > 0 ? (
+                <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"
+                        >
+                          {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(`/customer-groups/${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="border-b">
+                  <NoResults />
+                </div>
+              )}
+              <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>
+          </div>
+        )}
+      </div>
+    </Container>
+  )
+}
+
+const CustomerGroupActions = ({ group }: { group: CustomerGroup }) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const { mutateAsync } = useAdminDeleteCustomerGroup(group.id)
+
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("customerGroups.deleteCustomerGroupWarning", {
+        name: group.name,
+      }),
+      confirmText: t("general.delete"),
+      cancelText: t("general.cancel"),
+    })
+
+    if (!res) {
+      return
+    }
+
+    await mutateAsync(undefined)
+  }
+
+  return (
+    <TableRowActions
+      groups={[
+        {
+          actions: [
+            {
+              icon: <PencilSquare />,
+              label: t("general.edit"),
+              to: `/customer-groups/${group.id}/edit`,
+            },
+          ],
+        },
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("general.delete"),
+              onClick: handleDelete,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<CustomerGroup>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => <CustomerGroupActions group={row.original} />,
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/index.ts
new file mode 100644
index 0000000000..ead4d74743
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/index.ts
@@ -0,0 +1 @@
+export * from "./customer-group-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/customer-group-list.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/customer-group-list.tsx
new file mode 100644
index 0000000000..3e3786160a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/customer-group-list.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom"
+import { CustomerGroupListTable } from "./components/customer-group-list-table"
+
+export const CustomerGroupsList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <CustomerGroupListTable />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/index.ts
new file mode 100644
index 0000000000..f04a72f6dd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/customer-group-list/index.ts
@@ -0,0 +1 @@
+export { CustomerGroupsList as Component } from "./customer-group-list"
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/details/details.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/details/details.tsx
deleted file mode 100644
index cc59b9ecdc..0000000000
--- a/packages/admin-next/dashboard/src/routes/customer-groups/details/details.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Container, Heading } from "@medusajs/ui";
-
-export const CustomerGroupDetails = () => {
-  return (
-    <div>
-      <Container>
-        <Heading>Customers</Heading>
-      </Container>
-    </div>
-  );
-};
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/details/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/details/index.ts
deleted file mode 100644
index bb5e10a796..0000000000
--- a/packages/admin-next/dashboard/src/routes/customer-groups/details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CustomerGroupDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/list/index.ts b/packages/admin-next/dashboard/src/routes/customer-groups/list/index.ts
deleted file mode 100644
index c9929eedb7..0000000000
--- a/packages/admin-next/dashboard/src/routes/customer-groups/list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CustomerGroupsList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/customer-groups/list/list.tsx b/packages/admin-next/dashboard/src/routes/customer-groups/list/list.tsx
deleted file mode 100644
index 6d5f9e292b..0000000000
--- a/packages/admin-next/dashboard/src/routes/customer-groups/list/list.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Container, Heading } from "@medusajs/ui";
-
-export const CustomerGroupsList = () => {
-  return (
-    <div>
-      <Container>
-        <Heading>Customer Groups</Heading>
-      </Container>
-    </div>
-  );
-};
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-create/components/create-customer-form/create-customer-form.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-create/components/create-customer-form/create-customer-form.tsx
new file mode 100644
index 0000000000..067da3b031
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-create/components/create-customer-form/create-customer-form.tsx
@@ -0,0 +1,221 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, FocusModal, Heading, Input, Text } from "@medusajs/ui"
+import { useAdminCreateCustomer } from "medusa-react"
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useNavigate } from "react-router-dom"
+import * as zod from "zod"
+import { Form } from "../../../../../components/common/form"
+
+type CreateCustomerFormProps = {
+  subscribe: (state: boolean) => void
+}
+
+const CreateCustomerSchema = zod
+  .object({
+    email: zod.string().email(),
+    first_name: zod.string().min(1),
+    last_name: zod.string().min(1),
+    phone: zod.string().min(1).optional(),
+    password: zod.string().min(8),
+    password_confirmation: zod.string().min(8),
+  })
+  .superRefine(({ password, password_confirmation }, ctx) => {
+    if (password !== password_confirmation) {
+      return ctx.addIssue({
+        code: zod.ZodIssueCode.custom,
+        message: "Passwords do not match",
+        path: ["password_confirmation"],
+      })
+    }
+  })
+
+export const CreateCustomerForm = ({ subscribe }: CreateCustomerFormProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  const form = useForm<zod.infer<typeof CreateCustomerSchema>>({
+    defaultValues: {
+      email: "",
+      first_name: "",
+      last_name: "",
+      phone: "",
+      password: "",
+      password_confirmation: "",
+    },
+    resolver: zodResolver(CreateCustomerSchema),
+  })
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { mutateAsync, isLoading } = useAdminCreateCustomer()
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        email: data.email,
+        first_name: data.first_name,
+        last_name: data.last_name,
+        phone: data.phone,
+        password: data.password,
+      },
+      {
+        onSuccess: ({ customer }) => {
+          navigate(`/customers/${customer.id}`, { replace: true })
+        },
+      }
+    )
+  })
+
+  return (
+    <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"
+              variant="primary"
+              type="submit"
+              isLoading={isLoading}
+            >
+              {t("general.create")}
+            </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">
+            <div>
+              <Heading>{t("customers.createCustomer")}</Heading>
+              <Text size="small" className="text-ui-fg-subtle">
+                {t("customers.createCustomerHint")}
+              </Text>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <Form.Field
+                control={form.control}
+                name="first_name"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>{t("fields.firstName")}</Form.Label>
+                      <Form.Control>
+                        <Input autoComplete="off" {...field} />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+              <Form.Field
+                control={form.control}
+                name="last_name"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>{t("fields.lastName")}</Form.Label>
+                      <Form.Control>
+                        <Input autoComplete="off" {...field} />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+              <Form.Field
+                control={form.control}
+                name="email"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label>{t("fields.email")}</Form.Label>
+                      <Form.Control>
+                        <Input autoComplete="off" {...field} />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+              <Form.Field
+                control={form.control}
+                name="phone"
+                render={({ field }) => {
+                  return (
+                    <Form.Item>
+                      <Form.Label optional>{t("fields.phone")}</Form.Label>
+                      <Form.Control>
+                        <Input autoComplete="off" {...field} />
+                      </Form.Control>
+                      <Form.ErrorMessage />
+                    </Form.Item>
+                  )
+                }}
+              />
+            </div>
+            <div className="flex flex-col gap-y-4">
+              <div>
+                <Text size="small" leading="compact" weight="plus">
+                  {t("fields.password")}
+                </Text>
+                <Text size="small" className="text-ui-fg-subtle">
+                  {t("customers.passwordHint")}
+                </Text>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Form.Field
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.password")}</Form.Label>
+                        <Form.Control>
+                          <Input
+                            autoComplete="off"
+                            type="password"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="password_confirmation"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.confirmPassword")}</Form.Label>
+                        <Form.Control>
+                          <Input
+                            autoComplete="off"
+                            type="password"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </FocusModal.Body>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-create/components/create-customer-form/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-create/components/create-customer-form/index.ts
new file mode 100644
index 0000000000..e3a418be98
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-create/components/create-customer-form/index.ts
@@ -0,0 +1 @@
+export * from "./create-customer-form"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-create/customer-create.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-create/customer-create.tsx
new file mode 100644
index 0000000000..9d28afb2b2
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-create/customer-create.tsx
@@ -0,0 +1,15 @@
+import { FocusModal } from "@medusajs/ui"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { CreateCustomerForm } from "./components/create-customer-form"
+
+export const CustomerCreate = () => {
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        <CreateCustomerForm subscribe={subscribe} />
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-create/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-create/index.ts
new file mode 100644
index 0000000000..78c115ec15
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-create/index.ts
@@ -0,0 +1 @@
+export { CustomerCreate as Component } from "./customer-create"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-general-section/customer-general-section.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-general-section/customer-general-section.tsx
new file mode 100644
index 0000000000..1fc3b5af2b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-general-section/customer-general-section.tsx
@@ -0,0 +1,73 @@
+import { Customer } from "@medusajs/medusa"
+import { Button, Container, Heading, Text } from "@medusajs/ui"
+import format from "date-fns/format"
+import { ReactNode } from "react"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
+
+type CustomerGeneralSectionProps = {
+  customer: Customer
+}
+
+export const CustomerGeneralSection = ({
+  customer,
+}: CustomerGeneralSectionProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="px-6 py-4 flex flex-col gap-y-3">
+      <div className="flex items-center justify-between">
+        <Heading>{customer.email}</Heading>
+        <Link to={`/customers/${customer.id}/edit`}>
+          <Button size="small" variant="secondary">
+            {t("general.edit")}
+          </Button>
+        </Link>
+      </div>
+      <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        <Bulletpoint
+          title={t("fields.name")}
+          value={
+            customer.first_name && customer.last_name
+              ? `${customer.first_name} ${customer.last_name}`
+              : customer.last_name
+                ? customer.last_name
+                : customer.first_name
+                  ? customer.first_name
+                  : null
+          }
+        />
+        <Bulletpoint
+          title={t("customers.firstSeen")}
+          value={format(new Date(customer.created_at), "MMM d, yyyy")}
+        />
+        <Bulletpoint title="Phone" value={customer.phone} />
+        <Bulletpoint title="Orders" value={customer.orders.length} />
+        <Bulletpoint
+          title={t("fields.account")}
+          value={
+            customer.has_account
+              ? t("customers.registered")
+              : t("customers.guest")
+          }
+        />
+      </div>
+    </Container>
+  )
+}
+
+const Bulletpoint = ({ title, value }: { title: string; value: ReactNode }) => {
+  return (
+    <div className="flex flex-col flex-1">
+      <Text
+        size="small"
+        weight="plus"
+        leading="compact"
+        className="text-ui-fg-muted"
+      >
+        {title}
+      </Text>
+      <div className="text-ui-fg-subtle txt-small-plus">{value ?? "-"}</div>
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-general-section/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-general-section/index.ts
new file mode 100644
index 0000000000..ef9c4e73b9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./customer-general-section"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-group-section/customer-group-section.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-group-section/customer-group-section.tsx
new file mode 100644
index 0000000000..db845763c0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-group-section/customer-group-section.tsx
@@ -0,0 +1,52 @@
+import { Customer, CustomerGroup } from "@medusajs/medusa"
+import { Container, Heading } from "@medusajs/ui"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useAdminCustomerGroups } from "medusa-react"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+
+// TODO: Continue working on this when there is a natural way to get customer groups related to a customer.
+type CustomerGroupSectionProps = {
+  customer: Customer
+}
+
+export const CustomerGroupSection = ({
+  customer,
+}: CustomerGroupSectionProps) => {
+  const { customer_groups, isLoading, isError, error } = useAdminCustomerGroups(
+    {
+      id: customer.groups.map((g) => g.id).join(","),
+    }
+  )
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0 divide-y">
+      <div className="px-6 py-4">
+        <Heading level="h2">Groups</Heading>
+      </div>
+    </Container>
+  )
+}
+
+const columnHelper = createColumnHelper<CustomerGroup>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+      }),
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => getValue(),
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-group-section/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-group-section/index.ts
new file mode 100644
index 0000000000..421addaae6
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-group-section/index.ts
@@ -0,0 +1 @@
+export * from "./customer-group-section"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-order-section/customer-order-section.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-order-section/customer-order-section.tsx
new file mode 100644
index 0000000000..adc3b72ec9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-order-section/customer-order-section.tsx
@@ -0,0 +1,247 @@
+import { EllipsisHorizontal, ReceiptPercent } from "@medusajs/icons"
+import { Customer, Order } from "@medusajs/medusa"
+import {
+  Button,
+  Container,
+  DropdownMenu,
+  Heading,
+  IconButton,
+  Table,
+  clx,
+} from "@medusajs/ui"
+import {
+  PaginationState,
+  RowSelectionState,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminOrders } 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 {
+  OrderDateCell,
+  OrderDisplayIdCell,
+  OrderFulfillmentStatusCell,
+  OrderPaymentStatusCell,
+  OrderTotalCell,
+} from "../../../../../components/common/order-table-cells"
+import { Query } from "../../../../../components/filtering/query"
+import { LocalizedTablePagination } from "../../../../../components/localization/localized-table-pagination"
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+type CustomerGeneralSectionProps = {
+  customer: Customer
+}
+
+const PAGE_SIZE = 10
+
+export const CustomerOrderSection = ({
+  customer,
+}: CustomerGeneralSectionProps) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  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"])
+  const { orders, count, isLoading, isError, error } = useAdminOrders(
+    {
+      customer_id: customer.id,
+      limit: PAGE_SIZE,
+      offset: pageIndex * PAGE_SIZE,
+      fields:
+        "id,status,display_id,created_at,email,fulfillment_status,payment_status,total,currency_code",
+      ...params,
+    },
+    {
+      keepPreviousData: true,
+    }
+  )
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: orders ?? [],
+    columns,
+    pageCount: Math.ceil((count ?? 0) / PAGE_SIZE),
+    state: {
+      pagination,
+      rowSelection,
+    },
+    onPaginationChange: setPagination,
+    onRowSelectionChange: setRowSelection,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  })
+
+  const noRecords =
+    Object.values(params).every((v) => !v) && !isLoading && !orders?.length
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Container className="p-0 divide-y">
+      <div className="flex items-center justify-between py-4 px-6">
+        <Heading level="h2">{t("orders.domain")}</Heading>
+        <div className="flex items-center gap-x-2">
+          <Button size="small" variant="secondary">
+            {t("general.create")}
+          </Button>
+        </div>
+      </div>
+      {!noRecords && (
+        <div className="flex items-center justify-between py-4 px-6">
+          <div></div>
+          <div className="flex items-center gap-x-2">
+            <Query />
+          </div>
+        </div>
+      )}
+      {noRecords ? (
+        <NoRecords />
+      ) : (
+        <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/5"
+                  >
+                    {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(`/orders/${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={Math.ceil((count ?? 0) / PAGE_SIZE)}
+            pageSize={PAGE_SIZE}
+          />
+        </div>
+      )}
+    </Container>
+  )
+}
+
+const OrderActions = ({ order }: { order: Order }) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small" variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <Link to={`/orders/${order.id}`}>
+          <DropdownMenu.Item className="flex items-center gap-x-2">
+            <ReceiptPercent />
+            <span>Go to order</span>
+          </DropdownMenu.Item>
+        </Link>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<any>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("display_id", {
+        header: "Order",
+        cell: ({ getValue }) => <OrderDisplayIdCell id={getValue()} />,
+      }),
+      columnHelper.accessor("created_at", {
+        header: "Date",
+        cell: ({ getValue }) => <OrderDateCell date={getValue()} />,
+      }),
+      columnHelper.accessor("fulfillment_status", {
+        header: "Fulfillment Status",
+        cell: ({ getValue }) => (
+          <OrderFulfillmentStatusCell status={getValue()} />
+        ),
+      }),
+      columnHelper.accessor("payment_status", {
+        header: "Payment Status",
+        cell: ({ getValue }) => <OrderPaymentStatusCell status={getValue()} />,
+      }),
+      columnHelper.accessor("total", {
+        header: () => t("fields.total"),
+        cell: ({ getValue, row }) => (
+          <OrderTotalCell
+            total={getValue()}
+            currencyCode={row.original.currency_code}
+          />
+        ),
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => <OrderActions order={row.original} />,
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-order-section/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-order-section/index.ts
new file mode 100644
index 0000000000..bd72160c52
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/components/customer-order-section/index.ts
@@ -0,0 +1 @@
+export * from "./customer-order-section"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/customer-detail.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-detail/customer-detail.tsx
new file mode 100644
index 0000000000..a2e9fd338c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/customer-detail.tsx
@@ -0,0 +1,39 @@
+import { useAdminCustomer } from "medusa-react"
+import { Outlet, json, useLoaderData, useParams } from "react-router-dom"
+import { JsonViewSection } from "../../../components/common/json-view-section"
+import { CustomerGeneralSection } from "./components/customer-general-section"
+import { CustomerOrderSection } from "./components/customer-order-section"
+import { customerLoader } from "./loader"
+
+export const CustomerDetail = () => {
+  const { id } = useParams()
+
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof customerLoader>
+  >
+  const { customer, isLoading, isError, error } = useAdminCustomer(id!, {
+    initialData,
+  })
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  if (isError || !customer) {
+    if (error) {
+      throw error
+    }
+
+    throw json("An unknown error occurred", 500)
+  }
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <CustomerGeneralSection customer={customer} />
+      <CustomerOrderSection customer={customer} />
+      {/* <CustomerGroupSection customer={customer} /> */}
+      <JsonViewSection data={customer} />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-detail/index.ts
new file mode 100644
index 0000000000..bed23b93e7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/index.ts
@@ -0,0 +1,2 @@
+export { CustomerDetail as Component } from "./customer-detail"
+export { customerLoader as loader } from "./loader"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-detail/loader.ts b/packages/admin-next/dashboard/src/routes/customers/customer-detail/loader.ts
new file mode 100644
index 0000000000..25d7f0c284
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-detail/loader.ts
@@ -0,0 +1,21 @@
+import { AdminCustomersRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { adminProductKeys } from "medusa-react"
+import { LoaderFunctionArgs } from "react-router-dom"
+
+import { medusa, queryClient } from "../../../lib/medusa"
+
+const customerDetailQuery = (id: string) => ({
+  queryKey: adminProductKeys.detail(id),
+  queryFn: async () => medusa.admin.customers.retrieve(id),
+})
+
+export const customerLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = customerDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<Response<AdminCustomersRes>>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-edit/components/edit-customer-form/edit-customer-form.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-edit/components/edit-customer-form/edit-customer-form.tsx
new file mode 100644
index 0000000000..8b1cbc21d1
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-edit/components/edit-customer-form/edit-customer-form.tsx
@@ -0,0 +1,154 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Customer } from "@medusajs/medusa"
+import { Button, Drawer, Input } from "@medusajs/ui"
+import { useAdminUpdateCustomer } from "medusa-react"
+import { useEffect } 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 EditCustomerFormProps = {
+  customer: Customer
+  subscribe: (state: boolean) => void
+  onSuccessfulSubmit: () => void
+}
+
+const EditCustomerSchema = zod.object({
+  email: zod.string().email(),
+  first_name: zod.string().min(1).optional(),
+  last_name: zod.string().min(1).optional(),
+  phone: zod.string().optional(),
+})
+
+export const EditCustomerForm = ({
+  customer,
+  subscribe,
+  onSuccessfulSubmit,
+}: EditCustomerFormProps) => {
+  const { t } = useTranslation()
+
+  const form = useForm<zod.infer<typeof EditCustomerSchema>>({
+    defaultValues: {
+      email: customer.email || "",
+      first_name: customer.first_name || "",
+      last_name: customer.last_name || "",
+      phone: customer.phone || "",
+    },
+    resolver: zodResolver(EditCustomerSchema),
+  })
+
+  const {
+    formState: { isDirty },
+  } = form
+
+  useEffect(() => {
+    subscribe(isDirty)
+  }, [isDirty])
+
+  const { mutateAsync, isLoading } = useAdminUpdateCustomer(customer.id)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        email: customer.has_account ? undefined : data.email,
+        first_name: data.first_name,
+        last_name: data.last_name,
+        phone: data.phone,
+      },
+      {
+        onSuccess: () => {
+          onSuccessfulSubmit()
+        },
+      }
+    )
+  })
+
+  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="email"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.email")}</Form.Label>
+                    <Form.Control>
+                      <Input {...field} disabled={customer.has_account} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="first_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.firstName")}</Form.Label>
+                    <Form.Control>
+                      <Input {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="last_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.lastName")}</Form.Label>
+                    <Form.Control>
+                      <Input {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="phone"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.phone")}</Form.Label>
+                    <Form.Control>
+                      <Input {...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 variant="secondary" size="small">
+                {t("general.cancel")}
+              </Button>
+            </Drawer.Close>
+            <Button
+              isLoading={isLoading}
+              type="submit"
+              variant="primary"
+              size="small"
+            >
+              {t("general.save")}
+            </Button>
+          </div>
+        </Drawer.Footer>
+      </form>
+    </Form>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-edit/components/edit-customer-form/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-edit/components/edit-customer-form/index.ts
new file mode 100644
index 0000000000..a8ded89ad0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-edit/components/edit-customer-form/index.ts
@@ -0,0 +1 @@
+export * from "./edit-customer-form"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-edit/customer-edit.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-edit/customer-edit.tsx
new file mode 100644
index 0000000000..a453f1152e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-edit/customer-edit.tsx
@@ -0,0 +1,39 @@
+import { Drawer, Heading } from "@medusajs/ui"
+import { useAdminCustomer } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { EditCustomerForm } from "./components/edit-customer-form"
+
+export const CustomerEdit = () => {
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+  const { t } = useTranslation()
+
+  const { id } = useParams()
+  const { customer, isLoading, isError, error } = useAdminCustomer(id!)
+
+  const handleSuccessfulSubmit = () => {
+    onOpenChange(false, true)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Heading>{t("customers.editCustomer")}</Heading>
+        </Drawer.Header>
+        {!isLoading && customer && (
+          <EditCustomerForm
+            customer={customer}
+            onSuccessfulSubmit={handleSuccessfulSubmit}
+            subscribe={subscribe}
+          />
+        )}
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-edit/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-edit/index.ts
new file mode 100644
index 0000000000..d70310f5ae
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-edit/index.ts
@@ -0,0 +1 @@
+export { CustomerEdit as Component } from "./customer-edit"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-list/components/customer-list-table/customer-list-table.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-list/components/customer-list-table/customer-list-table.tsx
new file mode 100644
index 0000000000..f43a9c5aa4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-list/components/customer-list-table/customer-list-table.tsx
@@ -0,0 +1,219 @@
+import { EllipsisHorizontal, PencilSquare } from "@medusajs/icons"
+import { Customer } 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 { useAdminCustomers } from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router-dom"
+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 CustomerListTable = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  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 } = useQueryParams(["q"])
+  const { customers, count, isLoading, isError, error } = useAdminCustomers({
+    q,
+    limit: PAGE_SIZE,
+    offset: pageIndex * PAGE_SIZE,
+  })
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: customers ?? [],
+    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="px-6 py-4 flex items-center justify-between">
+        <Heading>{t("customers.domain")}</Heading>
+        <Link to="/customers/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 />
+        </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(`/customers/${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 CustomerActions = ({ customer }: { customer: Customer }) => {
+  const { t } = useTranslation()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Trigger asChild>
+        <IconButton size="small" variant="transparent">
+          <EllipsisHorizontal />
+        </IconButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <Link to={`/customers/${customer.id}/edit`}>
+          <DropdownMenu.Item
+            className="flex items-center gap-x-2"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <PencilSquare className="text-ui-fg-subtle" />
+            {t("general.edit")}
+          </DropdownMenu.Item>
+        </Link>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+const columnHelper = createColumnHelper<Customer>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("email", {
+        header: t("fields.email"),
+        cell: ({ getValue }) => <span>{getValue()}</span>,
+      }),
+      columnHelper.display({
+        id: "name",
+        header: t("fields.name"),
+        cell: ({ row }) => {
+          const name = [row.original.first_name, row.original.last_name]
+            .filter(Boolean)
+            .join(" ")
+
+          return name || "-"
+        },
+      }),
+      columnHelper.accessor("has_account", {
+        header: t("fields.account"),
+        cell: ({ getValue }) => {
+          const hasAccount = getValue()
+
+          return (
+            <StatusBadge color={hasAccount ? "green" : "blue"}>
+              {hasAccount ? t("customers.registered") : t("customers.guest")}
+            </StatusBadge>
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => <CustomerActions customer={row.original} />,
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-list/components/customer-list-table/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-list/components/customer-list-table/index.ts
new file mode 100644
index 0000000000..c2e0ca7b09
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-list/components/customer-list-table/index.ts
@@ -0,0 +1 @@
+export * from "./customer-list-table"
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-list/customer-list.tsx b/packages/admin-next/dashboard/src/routes/customers/customer-list/customer-list.tsx
new file mode 100644
index 0000000000..4a475d2450
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-list/customer-list.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom"
+import { CustomerListTable } from "./components/customer-list-table"
+
+export const CustomersList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <CustomerListTable />
+      <Outlet />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/customers/customer-list/index.ts b/packages/admin-next/dashboard/src/routes/customers/customer-list/index.ts
new file mode 100644
index 0000000000..f945dbca5d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/customer-list/index.ts
@@ -0,0 +1 @@
+export { CustomersList as Component } from "./customer-list"
diff --git a/packages/admin-next/dashboard/src/routes/customers/details/details.tsx b/packages/admin-next/dashboard/src/routes/customers/details/details.tsx
deleted file mode 100644
index 542e709a0b..0000000000
--- a/packages/admin-next/dashboard/src/routes/customers/details/details.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Container, Heading } from "@medusajs/ui";
-
-export const CustomerDetails = () => {
-  return (
-    <div>
-      <Container>
-        <Heading>Customers</Heading>
-      </Container>
-    </div>
-  );
-};
diff --git a/packages/admin-next/dashboard/src/routes/customers/details/index.ts b/packages/admin-next/dashboard/src/routes/customers/details/index.ts
deleted file mode 100644
index 884ed5286c..0000000000
--- a/packages/admin-next/dashboard/src/routes/customers/details/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CustomerDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/customers/list/index.ts b/packages/admin-next/dashboard/src/routes/customers/list/index.ts
deleted file mode 100644
index a4826e8aba..0000000000
--- a/packages/admin-next/dashboard/src/routes/customers/list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CustomersList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/customers/list/list.tsx b/packages/admin-next/dashboard/src/routes/customers/list/list.tsx
deleted file mode 100644
index 7fdc230dd9..0000000000
--- a/packages/admin-next/dashboard/src/routes/customers/list/list.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Container, Heading } from "@medusajs/ui";
-
-export const CustomersList = () => {
-  return (
-    <div>
-      <Container>
-        <Heading>Customers</Heading>
-      </Container>
-    </div>
-  );
-};
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..191e96b1d4
--- /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-8">
+                <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/authentication/src/repositories/auth-provider.ts b/packages/authentication/src/repositories/auth-provider.ts
index 6445266d14..6246ead8c6 100644
--- a/packages/authentication/src/repositories/auth-provider.ts
+++ b/packages/authentication/src/repositories/auth-provider.ts
@@ -2,32 +2,16 @@ import { DALUtils } from "@medusajs/utils"
 
 import { AuthProvider } from "@models"
 import { RepositoryTypes } from "@types"
-import { SqlEntityManager } from "@mikro-orm/postgresql"
-import { Context } from "@medusajs/types"
 
 export class AuthProviderRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
   AuthProvider,
   {
     create: RepositoryTypes.CreateAuthProviderDTO
+    update: RepositoryTypes.UpdateAuthProviderDTO
   }
 >(AuthProvider) {
   constructor(...args: any[]) {
     // @ts-ignore
     super(...arguments)
   }
-
-  async update(
-    data: RepositoryTypes.UpdateAuthProviderDTO[],
-    context: Context = {}
-  ): Promise<AuthProvider[]> {
-    const manager = this.getActiveManager<SqlEntityManager>(context)
-
-    const authProviders = data.map(({ provider, update }) => {
-      return manager.assign(provider, update)
-    })
-
-    manager.persist(authProviders)
-
-    return authProviders
-  }
 }
diff --git a/packages/authentication/src/repositories/auth-user.ts b/packages/authentication/src/repositories/auth-user.ts
index 6e5fa10f9c..a5b47652f0 100644
--- a/packages/authentication/src/repositories/auth-user.ts
+++ b/packages/authentication/src/repositories/auth-user.ts
@@ -1,45 +1,17 @@
-import { Context } from "@medusajs/types"
 import { DALUtils } from "@medusajs/utils"
 
 import { AuthUser } from "@models"
 import { RepositoryTypes } from "@types"
-import { SqlEntityManager } from "@mikro-orm/postgresql"
 
-export class AuthUserRepository extends DALUtils.mikroOrmBaseRepositoryFactory(
-  AuthUser
-) {
+export class AuthUserRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
+  AuthUser,
+  {
+    create: RepositoryTypes.CreateAuthUserDTO
+    update: RepositoryTypes.UpdateAuthUserDTO
+  }
+>(AuthUser) {
   constructor(...args: any[]) {
     // @ts-ignore
     super(...arguments)
   }
-
-  async create(
-    data: RepositoryTypes.CreateAuthUserDTO[],
-    context: Context = {}
-  ): Promise<AuthUser[]> {
-    const toCreate = data.map((authUser) => {
-      const authUserClone = { ...authUser } as any
-
-      authUserClone.provider ??= authUser.provider_id
-
-      return authUserClone
-    })
-
-    return await super.create(toCreate, context)
-  }
-
-  async update(
-    data: RepositoryTypes.UpdateAuthUserDTO[],
-    context: Context = {}
-  ): Promise<AuthUser[]> {
-    const manager = this.getActiveManager<SqlEntityManager>(context)
-
-    const authUsers = data.map(({ user, update }) => {
-      return manager.assign(user, update)
-    })
-
-    manager.persist(authUsers)
-
-    return authUsers
-  }
 }
diff --git a/packages/authentication/src/services/auth-provider.ts b/packages/authentication/src/services/auth-provider.ts
index ee6ccd8b86..241fb56e80 100644
--- a/packages/authentication/src/services/auth-provider.ts
+++ b/packages/authentication/src/services/auth-provider.ts
@@ -1,16 +1,8 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  MedusaError,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { AuthProvider } from "@models"
-import { AuthProviderRepository } from "@repositories"
 
-import { RepositoryTypes, ServiceTypes } from "@types"
+import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
   authProviderRepository: DAL.RepositoryService
@@ -18,122 +10,15 @@ type InjectedDependencies = {
 
 export default class AuthProviderService<
   TEntity extends AuthProvider = AuthProvider
-> {
-  protected readonly authProviderRepository_: DAL.RepositoryService
-
-  constructor({ authProviderRepository }: InjectedDependencies) {
-    this.authProviderRepository_ = authProviderRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreateAuthProviderDTO
+    update: ServiceTypes.UpdateAuthProviderDTO
   }
-
-  @InjectManager("authProviderRepository_")
-  async retrieve(
-    provider: string,
-    config: FindConfig<ServiceTypes.AuthProviderDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<AuthProvider, ServiceTypes.AuthProviderDTO>({
-      id: provider,
-      identifierColumn: "provider",
-      entityName: AuthProvider.name,
-      repository: this.authProviderRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("authProviderRepository_")
-  async list(
-    filters: ServiceTypes.FilterableAuthProviderProps = {},
-    config: FindConfig<ServiceTypes.AuthProviderDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryConfig = ModulesSdkUtils.buildQuery<AuthProvider>(
-      filters,
-      config
-    )
-
-    return (await this.authProviderRepository_.find(
-      queryConfig,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("authProviderRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterableAuthProviderProps = {},
-    config: FindConfig<ServiceTypes.AuthProviderDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryConfig = ModulesSdkUtils.buildQuery<AuthProvider>(
-      filters,
-      config
-    )
-
-    return (await this.authProviderRepository_.findAndCount(
-      queryConfig,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("authProviderRepository_")
-  async create(
-    data: ServiceTypes.CreateAuthProviderDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.authProviderRepository_ as AuthProviderRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("authProviderRepository_")
-  async update(
-    data: ServiceTypes.UpdateAuthProviderDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const authProviderIds = data.map(
-      (authProviderData) => authProviderData.provider
-    )
-
-    const existingAuthProviders = await this.list(
-      {
-        provider: authProviderIds,
-      },
-      {},
-      sharedContext
-    )
-
-    const updates: RepositoryTypes.UpdateAuthProviderDTO[] = []
-
-    const existingAuthProvidersMap = new Map(
-      existingAuthProviders.map<[string, AuthProvider]>((authProvider) => [
-        authProvider.provider,
-        authProvider,
-      ])
-    )
-
-    for (const update of data) {
-      const provider = existingAuthProvidersMap.get(update.provider)
-
-      if (!provider) {
-        throw new MedusaError(
-          MedusaError.Types.NOT_FOUND,
-          `AuthProvider with provider "${update.provider}" not found`
-        )
-      }
-
-      updates.push({ update, provider })
-    }
-
-    return (await (
-      this.authProviderRepository_ as AuthProviderRepository
-    ).update(updates, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("authProviderRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.authProviderRepository_.delete(ids, sharedContext)
+>(AuthProvider)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/authentication/src/services/auth-user.ts b/packages/authentication/src/services/auth-user.ts
index a7573852b7..6cb6336ebe 100644
--- a/packages/authentication/src/services/auth-user.ts
+++ b/packages/authentication/src/services/auth-user.ts
@@ -1,126 +1,23 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  MedusaError,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { AuthUser } from "@models"
-import { AuthUserRepository } from "@repositories"
 
-import { RepositoryTypes, ServiceTypes } from "@types"
+import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
   authUserRepository: DAL.RepositoryService
 }
 
-export default class AuthUserService<TEntity extends AuthUser = AuthUser> {
-  protected readonly authUserRepository_: DAL.RepositoryService
-
+export default class AuthUserService<
+  TEntity extends AuthUser = AuthUser
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreateAuthUserDTO
+  }
+>(AuthUser)<TEntity> {
   constructor({ authUserRepository }: InjectedDependencies) {
-    this.authUserRepository_ = authUserRepository
-  }
-
-  @InjectManager("authUserRepository_")
-  async retrieve(
-    provider: string,
-    config: FindConfig<ServiceTypes.AuthUserDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<AuthUser, ServiceTypes.AuthUserDTO>({
-      id: provider,
-      entityName: AuthUser.name,
-      repository: this.authUserRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("authUserRepository_")
-  async list(
-    filters: ServiceTypes.FilterableAuthProviderProps = {},
-    config: FindConfig<ServiceTypes.AuthUserDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryConfig = ModulesSdkUtils.buildQuery<AuthUser>(filters, config)
-
-    return (await this.authUserRepository_.find(
-      queryConfig,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("authUserRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterableAuthUserProps = {},
-    config: FindConfig<ServiceTypes.AuthUserDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryConfig = ModulesSdkUtils.buildQuery<AuthUser>(filters, config)
-
-    return (await this.authUserRepository_.findAndCount(
-      queryConfig,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("authUserRepository_")
-  async create(
-    data: ServiceTypes.CreateAuthUserDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.authUserRepository_ as AuthUserRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("authUserRepository_")
-  async update(
-    data: ServiceTypes.UpdateAuthUserDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const existingUsers = await this.list(
-      { id: data.map(({ id }) => id) },
-      {},
-      sharedContext
-    )
-
-    const existingUsersMap = new Map(
-      existingUsers.map<[string, AuthUser]>((authUser) => [
-        authUser.id,
-        authUser,
-      ])
-    )
-
-    const updates: RepositoryTypes.UpdateAuthUserDTO[] = []
-
-    for (const update of data) {
-      const user = existingUsersMap.get(update.id)
-
-      if (!user) {
-        throw new MedusaError(
-          MedusaError.Types.NOT_FOUND,
-          `AuthUser with id "${update.id}" not found`
-        )
-      }
-
-      updates.push({ update, user })
-    }
-
-    return (await (this.authUserRepository_ as AuthUserRepository).update(
-      updates,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("authUserRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.authUserRepository_.delete(ids, sharedContext)
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/cart/integration-tests/__tests__/services/cart-module/index.spec.ts b/packages/cart/integration-tests/__tests__/services/cart-module/index.spec.ts
index 151343e1d1..d444b634ef 100644
--- a/packages/cart/integration-tests/__tests__/services/cart-module/index.spec.ts
+++ b/packages/cart/integration-tests/__tests__/services/cart-module/index.spec.ts
@@ -1,5 +1,5 @@
 import { ICartModuleService } from "@medusajs/types"
-import { SqlEntityManager } from "@mikro-orm/postgresql"
+import { CheckConstraintViolationException } from "@mikro-orm/core"
 import { initialize } from "../../../../src/initialize"
 import { DB_URL, MikroOrmWrapper } from "../../../utils"
 
@@ -7,11 +7,9 @@ jest.setTimeout(30000)
 
 describe("Cart Module Service", () => {
   let service: ICartModuleService
-  let repositoryManager: SqlEntityManager
 
   beforeEach(async () => {
     await MikroOrmWrapper.setupDatabase()
-    repositoryManager = await MikroOrmWrapper.forkManager()
 
     service = await initialize({
       database: {
@@ -126,6 +124,91 @@ describe("Cart Module Service", () => {
         })
       )
     })
+
+    it("should create a cart with items", async () => {
+      const createdCart = await service.create({
+        currency_code: "eur",
+        items: [
+          {
+            title: "test",
+            quantity: 1,
+            unit_price: 100,
+          },
+        ],
+      })
+
+      const cart = await service.retrieve(createdCart.id, {
+        relations: ["items"],
+      })
+
+      expect(cart).toEqual(
+        expect.objectContaining({
+          id: createdCart.id,
+          currency_code: "eur",
+          items: expect.arrayContaining([
+            expect.objectContaining({
+              title: "test",
+              unit_price: 100,
+            }),
+          ]),
+        })
+      )
+    })
+
+    it("should create multiple carts with items", async () => {
+      const createdCarts = await service.create([
+        {
+          currency_code: "eur",
+          items: [
+            {
+              title: "test",
+              quantity: 1,
+              unit_price: 100,
+            },
+          ],
+        },
+        {
+          currency_code: "usd",
+          items: [
+            {
+              title: "test-2",
+              quantity: 2,
+              unit_price: 200,
+            },
+          ],
+        },
+      ])
+
+      const carts = await service.list(
+        { id: createdCarts.map((c) => c.id) },
+        {
+          relations: ["items"],
+        }
+      )
+
+      expect(carts).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            currency_code: "eur",
+            items: expect.arrayContaining([
+              expect.objectContaining({
+                title: "test",
+                unit_price: 100,
+              }),
+            ]),
+          }),
+          expect.objectContaining({
+            currency_code: "usd",
+            items: expect.arrayContaining([
+              expect.objectContaining({
+                title: "test-2",
+                unit_price: 200,
+              }),
+            ]),
+          }),
+        ])
+      )
+    })
   })
 
   describe("update", () => {
@@ -242,4 +325,478 @@ describe("Cart Module Service", () => {
       expect(address).toBe(undefined)
     })
   })
+
+  describe("addLineItems", () => {
+    it("should add a line item to cart succesfully", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const items = await service.addLineItems(createdCart.id, [
+        {
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+        },
+      ])
+
+      const cart = await service.retrieve(createdCart.id, {
+        relations: ["items"],
+      })
+
+      expect(items[0]).toEqual(
+        expect.objectContaining({
+          title: "test",
+          quantity: 1,
+          unit_price: 100,
+        })
+      )
+      expect(cart.items?.length).toBe(1)
+    })
+
+    it("should add multiple line items to cart succesfully", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      await service.addLineItems([
+        {
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+          cart_id: createdCart.id,
+        },
+        {
+          quantity: 2,
+          unit_price: 200,
+          title: "test-2",
+          cart_id: createdCart.id,
+        },
+      ])
+
+      const cart = await service.retrieve(createdCart.id, {
+        relations: ["items"],
+      })
+
+      expect(cart.items).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            title: "test",
+            quantity: 1,
+            unit_price: 100,
+          }),
+          expect.objectContaining({
+            title: "test-2",
+            quantity: 2,
+            unit_price: 200,
+          }),
+        ])
+      )
+
+      expect(cart.items?.length).toBe(2)
+    })
+
+    it("should add multiple line items to multiple carts succesfully", async () => {
+      let [eurCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      let [usdCart] = await service.create([
+        {
+          currency_code: "usd",
+        },
+      ])
+
+      const items = await service.addLineItems([
+        {
+          cart_id: eurCart.id,
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+        },
+        {
+          cart_id: usdCart.id,
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+        },
+      ])
+
+      const carts = await service.list(
+        { id: [eurCart.id, usdCart.id] },
+        { relations: ["items"] }
+      )
+
+      eurCart = carts.find((c) => c.currency_code === "eur")!
+      usdCart = carts.find((c) => c.currency_code === "usd")!
+
+      const eurItems = items.filter((i) => i.cart_id === eurCart.id)
+      const usdItems = items.filter((i) => i.cart_id === usdCart.id)
+
+      expect(eurCart.items![0].id).toBe(eurItems[0].id)
+      expect(usdCart.items![0].id).toBe(usdItems[0].id)
+
+      expect(eurCart.items?.length).toBe(1)
+      expect(usdCart.items?.length).toBe(1)
+    })
+
+    it("should throw if cart does not exist", async () => {
+      const error = await service
+        .addLineItems("foo", [
+          {
+            quantity: 1,
+            unit_price: 100,
+            title: "test",
+            tax_lines: [],
+          },
+        ])
+        .catch((e) => e)
+
+      expect(error.message).toContain("Cart with id: foo was not found")
+    })
+
+    it("should throw an error when required params are not passed adding to a single cart", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const error = await service
+        .addLineItems(createdCart.id, [
+          {
+            quantity: 1,
+            title: "test",
+          },
+        ] as any)
+        .catch((e) => e)
+
+      expect(error.message).toContain(
+        "Value for LineItem.unit_price is required, 'undefined' found"
+      )
+    })
+
+    it("should throw a generic error when required params are not passed using bulk add method", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const error = await service
+        .addLineItems([
+          {
+            cart_id: createdCart.id,
+            quantity: 1,
+            title: "test",
+          },
+        ] as any)
+        .catch((e) => e)
+
+      expect(error.message).toContain(
+        "Value for LineItem.unit_price is required, 'undefined' found"
+      )
+    })
+  })
+
+  describe("updateLineItems", () => {
+    it("should update a line item in cart succesfully with selector approach", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const [item] = await service.addLineItems(createdCart.id, [
+        {
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+          tax_lines: [],
+        },
+      ])
+
+      expect(item.title).toBe("test")
+
+      const [updatedItem] = await service.updateLineItems(
+        { cart_id: createdCart.id },
+        {
+          title: "test2",
+        }
+      )
+
+      expect(updatedItem.title).toBe("test2")
+    })
+
+    it("should update a line item in cart succesfully with id approach", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const [item] = await service.addLineItems(createdCart.id, [
+        {
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+          tax_lines: [],
+        },
+      ])
+
+      expect(item.title).toBe("test")
+
+      const updatedItem = await service.updateLineItems(item.id, {
+        title: "test2",
+      })
+
+      expect(updatedItem.title).toBe("test2")
+    })
+
+    it("should update line items in carts succesfully with multi-selector approach", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const items = await service.addLineItems(createdCart.id, [
+        {
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+        },
+        {
+          quantity: 2,
+          unit_price: 200,
+          title: "other-test",
+        },
+      ])
+
+      expect(items).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            title: "test",
+            quantity: 1,
+            unit_price: 100,
+          }),
+          expect.objectContaining({
+            title: "other-test",
+            quantity: 2,
+            unit_price: 200,
+          }),
+        ])
+      )
+
+      const itemOne = items.find((i) => i.title === "test")
+      const itemTwo = items.find((i) => i.title === "other-test")
+
+      const updatedItems = await service.updateLineItems([
+        {
+          selector: { cart_id: createdCart.id },
+          data: {
+            title: "changed-test",
+          },
+        },
+        {
+          selector: { id: itemTwo!.id },
+          data: {
+            title: "changed-other-test",
+          },
+        },
+      ])
+
+      expect(updatedItems).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            title: "changed-test",
+            quantity: 1,
+            unit_price: 100,
+          }),
+          expect.objectContaining({
+            title: "changed-other-test",
+            quantity: 2,
+            unit_price: 200,
+          }),
+        ])
+      )
+    })
+  })
+
+  describe("removeLineItems", () => {
+    it("should remove a line item succesfully", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const [item] = await service.addLineItems(createdCart.id, [
+        {
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+          tax_lines: [],
+        },
+      ])
+
+      expect(item.title).toBe("test")
+
+      await service.removeLineItems([item.id])
+
+      const cart = await service.retrieve(createdCart.id, {
+        relations: ["items"],
+      })
+
+      expect(cart.items?.length).toBe(0)
+    })
+
+    it("should remove multiple line items succesfully", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const [item, item2] = await service.addLineItems(createdCart.id, [
+        {
+          quantity: 1,
+          unit_price: 100,
+          title: "test",
+        },
+        {
+          quantity: 1,
+          unit_price: 100,
+          title: "test-2",
+        },
+      ])
+
+      await service.removeLineItems([item.id, item2.id])
+
+      const cart = await service.retrieve(createdCart.id, {
+        relations: ["items"],
+      })
+
+      expect(cart.items?.length).toBe(0)
+    })
+  })
+
+  describe("addShippingMethods", () => {
+    it("should add a shipping method to cart succesfully", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const [method] = await service.addShippingMethods(createdCart.id, [
+        {
+          amount: 100,
+          name: "Test",
+        },
+      ])
+
+      const cart = await service.retrieve(createdCart.id, {
+        relations: ["shipping_methods"],
+      })
+
+      expect(method.id).toBe(cart.shipping_methods![0].id)
+    })
+
+    it("should throw when amount is negative", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const error = await service
+        .addShippingMethods(createdCart.id, [
+          {
+            amount: -100,
+            name: "Test",
+          },
+        ])
+        .catch((e) => e)
+
+      expect(error.name).toBe(CheckConstraintViolationException.name)
+    })
+
+    it("should add multiple shipping methods to multiple carts succesfully", async () => {
+      let [eurCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      let [usdCart] = await service.create([
+        {
+          currency_code: "usd",
+        },
+      ])
+
+      const methods = await service.addShippingMethods([
+        {
+          cart_id: eurCart.id,
+          amount: 100,
+          name: "Test One",
+        },
+        {
+          cart_id: usdCart.id,
+          amount: 100,
+          name: "Test One",
+        },
+      ])
+
+      const carts = await service.list(
+        { id: [eurCart.id, usdCart.id] },
+        { relations: ["shipping_methods"] }
+      )
+
+      eurCart = carts.find((c) => c.currency_code === "eur")!
+      usdCart = carts.find((c) => c.currency_code === "usd")!
+
+      const eurMethods = methods.filter((m) => m.cart_id === eurCart.id)
+      const usdMethods = methods.filter((m) => m.cart_id === usdCart.id)
+
+      expect(eurCart.shipping_methods![0].id).toBe(eurMethods[0].id)
+      expect(usdCart.shipping_methods![0].id).toBe(usdMethods[0].id)
+
+      expect(eurCart.shipping_methods?.length).toBe(1)
+      expect(usdCart.shipping_methods?.length).toBe(1)
+    })
+  })
+
+  describe("removeShippingMethods", () => {
+    it("should remove a line item succesfully", async () => {
+      const [createdCart] = await service.create([
+        {
+          currency_code: "eur",
+        },
+      ])
+
+      const [method] = await service.addShippingMethods(createdCart.id, [
+        {
+          amount: 100,
+          name: "test",
+        },
+      ])
+
+      expect(method.id).not.toBe(null)
+
+      await service.removeShippingMethods(method.id)
+
+      const cart = await service.retrieve(createdCart.id, {
+        relations: ["shipping_methods"],
+      })
+
+      expect(cart.shipping_methods?.length).toBe(0)
+    })
+  })
 })
diff --git a/packages/cart/src/loaders/container.ts b/packages/cart/src/loaders/container.ts
index a8716ea5ab..1affad8557 100644
--- a/packages/cart/src/loaders/container.ts
+++ b/packages/cart/src/loaders/container.ts
@@ -20,6 +20,10 @@ export default async ({
   container.register({
     cartService: asClass(defaultServices.CartService).singleton(),
     addressService: asClass(defaultServices.AddressService).singleton(),
+    shippingMethodService: asClass(
+      defaultServices.ShippingMethodService
+    ).singleton(),
+    lineItemService: asClass(defaultServices.LineItemService).singleton(),
   })
 
   if (customRepositories) {
@@ -37,6 +41,14 @@ function loadDefaultRepositories({ container }) {
   container.register({
     baseRepository: asClass(defaultRepositories.BaseRepository).singleton(),
     cartRepository: asClass(defaultRepositories.CartRepository).singleton(),
-    addressRepository: asClass(defaultRepositories.AddressRepository).singleton(),
+    addressRepository: asClass(
+      defaultRepositories.AddressRepository
+    ).singleton(),
+    lineItemRepository: asClass(
+      defaultRepositories.LineItemRepository
+    ).singleton(),
+    shippingMethodRepository: asClass(
+      defaultRepositories.ShippingMethodRepository
+    ).singleton(),
   })
 }
diff --git a/packages/cart/src/models/cart.ts b/packages/cart/src/models/cart.ts
index 2dfc02aab4..168f9216ba 100644
--- a/packages/cart/src/models/cart.ts
+++ b/packages/cart/src/models/cart.ts
@@ -11,7 +11,7 @@ import {
   OneToMany,
   OptionalProps,
   PrimaryKey,
-  Property,
+  Property
 } from "@mikro-orm/core"
 import Address from "./address"
 import LineItem from "./line-item"
@@ -78,7 +78,6 @@ export default class Cart {
 
   @OneToMany(() => ShippingMethod, (shippingMethod) => shippingMethod.cart, {
     cascade: [Cascade.REMOVE],
-    
   })
   shipping_methods = new Collection<ShippingMethod>(this)
 
diff --git a/packages/cart/src/models/line-item.ts b/packages/cart/src/models/line-item.ts
index 4480e0877a..885de86489 100644
--- a/packages/cart/src/models/line-item.ts
+++ b/packages/cart/src/models/line-item.ts
@@ -22,6 +22,7 @@ type OptionalLineItemProps =
   | "is_tax_inclusive"
   | "compare_at_unit_price"
   | "requires_shipping"
+  | "cart"
   | DAL.EntityDateColumns
 
 @Entity({ tableName: "cart_line_item" })
@@ -31,12 +32,15 @@ export default class LineItem {
   @PrimaryKey({ columnType: "text" })
   id: string
 
+  @Property({ columnType: "text" })
+  cart_id: string
+
   @ManyToOne(() => Cart, {
     onDelete: "cascade",
     index: "IDX_line_item_cart_id",
-    fieldName: "cart_id",
+    nullable: true,
   })
-  cart!: Cart
+  cart?: Cart | null
 
   @Property({ columnType: "text" })
   title: string
@@ -47,7 +51,7 @@ export default class LineItem {
   @Property({ columnType: "text", nullable: true })
   thumbnail?: string | null
 
-  @Property({ columnType: "text" })
+  @Property({ columnType: "integer" })
   quantity: number
 
   @Property({
@@ -147,7 +151,7 @@ export default class LineItem {
     columnType: "timestamptz",
     defaultRaw: "now()",
   })
-  created_at: Date
+  created_at?: Date
 
   @Property({
     onCreate: () => new Date(),
@@ -155,7 +159,7 @@ export default class LineItem {
     columnType: "timestamptz",
     defaultRaw: "now()",
   })
-  updated_at: Date
+  updated_at?: Date
 
   @BeforeCreate()
   onCreate() {
diff --git a/packages/cart/src/models/shipping-method.ts b/packages/cart/src/models/shipping-method.ts
index c51478eefb..9d8eab459c 100644
--- a/packages/cart/src/models/shipping-method.ts
+++ b/packages/cart/src/models/shipping-method.ts
@@ -16,16 +16,20 @@ import ShippingMethodAdjustmentLine from "./shipping-method-adjustment-line"
 import ShippingMethodTaxLine from "./shipping-method-tax-line"
 
 @Entity({ tableName: "cart_shipping_method" })
+@Check<ShippingMethod>({ expression: (columns) => `${columns.amount} >= 0` })
 export default class ShippingMethod {
   @PrimaryKey({ columnType: "text" })
   id: string
 
+  @Property({ columnType: "text" })
+  cart_id: string
+
   @ManyToOne(() => Cart, {
     onDelete: "cascade",
     index: "IDX_shipping_method_cart_id",
-    fieldName: "cart_id",
+    nullable: true,
   })
-  cart: Cart
+  cart?: Cart | null
 
   @Property({ columnType: "text" })
   name: string
@@ -34,7 +38,6 @@ export default class ShippingMethod {
   description?: string | null
 
   @Property({ columnType: "numeric", serializer: Number })
-  @Check({ expression: "amount >= 0" }) // TODO: Validate that numeric types work with the expression
   amount: number
 
   @Property({ columnType: "boolean" })
diff --git a/packages/cart/src/repositories/address.ts b/packages/cart/src/repositories/address.ts
index 53c375821e..2fb052cf7f 100644
--- a/packages/cart/src/repositories/address.ts
+++ b/packages/cart/src/repositories/address.ts
@@ -1,6 +1,4 @@
-import { Context } from "@medusajs/types"
 import { DALUtils } from "@medusajs/utils"
-import { SqlEntityManager } from "@mikro-orm/postgresql"
 import { Address } from "@models"
 import { CreateAddressDTO, UpdateAddressDTO } from "../types"
 
@@ -8,25 +6,11 @@ export class AddressRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
   Address,
   {
     create: CreateAddressDTO
+    update: UpdateAddressDTO
   }
 >(Address) {
   constructor(...args: any[]) {
     // @ts-ignore
     super(...arguments)
   }
-
-  async update(
-    data: { address: Address; update: UpdateAddressDTO }[],
-    context: Context = {}
-  ): Promise<Address[]> {
-    const manager = this.getActiveManager<SqlEntityManager>(context)
-
-    const entities = data.map(({ address, update }) => {
-      return manager.assign(address, update)
-    })
-
-    manager.persist(entities)
-
-    return entities
-  }
 }
diff --git a/packages/cart/src/repositories/cart.ts b/packages/cart/src/repositories/cart.ts
index 952fc9fd1b..577d826786 100644
--- a/packages/cart/src/repositories/cart.ts
+++ b/packages/cart/src/repositories/cart.ts
@@ -1,32 +1,16 @@
-import { Context } from "@medusajs/types"
 import { DALUtils } from "@medusajs/utils"
-import { SqlEntityManager } from "@mikro-orm/postgresql"
 import { Cart } from "@models"
-import { CreateCartDTO, UpdateCartDTO } from "../types"
+import { CreateCartDTO, UpdateCartDTO } from "@types"
 
 export class CartRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
   Cart,
   {
     create: CreateCartDTO
+    update: UpdateCartDTO
   }
 >(Cart) {
   constructor(...args: any[]) {
     // @ts-ignore
     super(...arguments)
   }
-
-  async update(
-    data: { cart: Cart; update: UpdateCartDTO }[],
-    context: Context = {}
-  ): Promise<Cart[]> {
-    const manager = this.getActiveManager<SqlEntityManager>(context)
-
-    const entities = data.map(({ cart, update }) => {
-      return manager.assign(cart, update)
-    })
-
-    manager.persist(entities)
-
-    return entities
-  }
 }
diff --git a/packages/cart/src/repositories/index.ts b/packages/cart/src/repositories/index.ts
index d527e6f73c..d1bf0c1118 100644
--- a/packages/cart/src/repositories/index.ts
+++ b/packages/cart/src/repositories/index.ts
@@ -1,4 +1,6 @@
 export { MikroOrmBaseRepository as BaseRepository } from "@medusajs/utils"
 export * from "./address"
 export * from "./cart"
+export * from "./line-item"
+export * from "./shipping-method"
 
diff --git a/packages/cart/src/repositories/line-item.ts b/packages/cart/src/repositories/line-item.ts
new file mode 100644
index 0000000000..8ac5e3c863
--- /dev/null
+++ b/packages/cart/src/repositories/line-item.ts
@@ -0,0 +1,16 @@
+import { DALUtils } from "@medusajs/utils"
+import { LineItem } from "@models"
+import { CreateLineItemDTO, UpdateLineItemDTO } from "../types"
+
+export class LineItemRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
+  LineItem,
+  {
+    create: CreateLineItemDTO
+    update: UpdateLineItemDTO
+  }
+>(LineItem) {
+  constructor(...args: any[]) {
+    // @ts-ignore
+    super(...arguments)
+  }
+}
diff --git a/packages/cart/src/repositories/shipping-method.ts b/packages/cart/src/repositories/shipping-method.ts
new file mode 100644
index 0000000000..2b228ba5a4
--- /dev/null
+++ b/packages/cart/src/repositories/shipping-method.ts
@@ -0,0 +1,16 @@
+import { DALUtils } from "@medusajs/utils"
+import { ShippingMethod } from "@models"
+import { CreateShippingMethodDTO, UpdateShippingMethodDTO } from "@types"
+
+export class ShippingMethodRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
+  ShippingMethod,
+  {
+    create: CreateShippingMethodDTO
+    update: UpdateShippingMethodDTO
+  }
+>(ShippingMethod) {
+  constructor(...args: any[]) {
+    // @ts-ignore
+    super(...arguments)
+  }
+}
diff --git a/packages/cart/src/services/address.ts b/packages/cart/src/services/address.ts
index 24484662fe..383a07707b 100644
--- a/packages/cart/src/services/address.ts
+++ b/packages/cart/src/services/address.ts
@@ -1,128 +1,23 @@
-import {
-  AddressDTO,
-  Context,
-  DAL,
-  FilterableAddressProps,
-  FindConfig,
-} from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  MedusaError,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { Address } from "@models"
-import { AddressRepository } from "../repositories/address"
-import { CreateAddressDTO, UpdateAddressDTO } from "../types"
+import { CreateAddressDTO, UpdateAddressDTO } from "@types"
 
 type InjectedDependencies = {
   addressRepository: DAL.RepositoryService
 }
 
-export default class AddressService<TEntity extends Address = Address> {
-  protected readonly addressRepository_: DAL.RepositoryService
-
-  constructor({ addressRepository }: InjectedDependencies) {
-    this.addressRepository_ = addressRepository
+export default class AddressService<
+  TEntity extends Address = Address
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreateAddressDTO
+    update: UpdateAddressDTO
   }
-
-  @InjectManager("addressRepository_")
-  async retrieve(
-    id: string,
-    config: FindConfig<AddressDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<Address, AddressDTO>({
-      id: id,
-      entityName: Address.name,
-      repository: this.addressRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("addressRepository_")
-  async list(
-    filters: FilterableAddressProps = {},
-    config: FindConfig<AddressDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<Address>(filters, config)
-
-    return (await this.addressRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("addressRepository_")
-  async listAndCount(
-    filters: FilterableAddressProps = {},
-    config: FindConfig<AddressDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<Address>(filters, config)
-
-    return (await this.addressRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("addressRepository_")
-  async create(
-    data: CreateAddressDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.addressRepository_ as AddressRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("addressRepository_")
-  async update(
-    data: UpdateAddressDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const existingAddresses = await this.list(
-      { id: data.map(({ id }) => id) },
-      {},
-      sharedContext
-    )
-
-    const existingAddressesMap = new Map(
-      existingAddresses.map<[string, Address]>((addr) => [addr.id, addr])
-    )
-
-    const updates: { address: Address; update: UpdateAddressDTO }[] = []
-
-    for (const update of data) {
-      const address = existingAddressesMap.get(update.id)
-
-      if (!address) {
-        throw new MedusaError(
-          MedusaError.Types.NOT_FOUND,
-          `Address with id "${update.id}" not found`
-        )
-      }
-
-      updates.push({ address, update })
-    }
-
-    return (await (this.addressRepository_ as AddressRepository).update(
-      updates,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("addressRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.addressRepository_.delete(ids, sharedContext)
+>(Address)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/cart/src/services/cart-module.ts b/packages/cart/src/services/cart-module.ts
index 419c71b84f..8c6a84d99b 100644
--- a/packages/cart/src/services/cart-module.ts
+++ b/packages/cart/src/services/cart-module.ts
@@ -1,47 +1,57 @@
 import {
-  AddressDTO,
-  CartAddressDTO,
-  CartDTO,
   Context,
-  CreateCartDTO,
   DAL,
   FilterableCartProps,
   FindConfig,
   ICartModuleService,
   InternalModuleDeclaration,
   ModuleJoinerConfig,
-  UpdateCartDTO,
 } from "@medusajs/types"
 
-import { FilterableAddressProps } from "@medusajs/types"
+import { CartTypes } from "@medusajs/types"
+
 import {
   InjectManager,
   InjectTransactionManager,
   MedusaContext,
+  isObject,
+  isString,
 } from "@medusajs/utils"
-import { CreateAddressDTO, UpdateAddressDTO } from "@types"
+import { Cart, LineItem, ShippingMethod } from "@models"
+import { CreateLineItemDTO, UpdateLineItemDTO } from "@types"
 import { joinerConfig } from "../joiner-config"
-import AddressService from "./address"
-import CartService from "./cart"
+import * as services from "../services"
 
 type InjectedDependencies = {
   baseRepository: DAL.RepositoryService
-  cartService: CartService
-  addressService: AddressService
+  cartService: services.CartService
+  addressService: services.AddressService
+  lineItemService: services.LineItemService
+  shippingMethodService: services.ShippingMethodService
 }
 
 export default class CartModuleService implements ICartModuleService {
   protected baseRepository_: DAL.RepositoryService
-  protected cartService_: CartService
-  protected addressService_: AddressService
+  protected cartService_: services.CartService
+  protected addressService_: services.AddressService
+  protected lineItemService_: services.LineItemService
+  protected shippingMethodService_: services.ShippingMethodService
 
   constructor(
-    { baseRepository, cartService, addressService }: InjectedDependencies,
+    {
+      baseRepository,
+      cartService,
+      addressService,
+      lineItemService,
+      shippingMethodService,
+    }: InjectedDependencies,
     protected readonly moduleDeclaration: InternalModuleDeclaration
   ) {
     this.baseRepository_ = baseRepository
     this.cartService_ = cartService
     this.addressService_ = addressService
+    this.lineItemService_ = lineItemService
+    this.shippingMethodService_ = shippingMethodService
   }
 
   __joinerConfig(): ModuleJoinerConfig {
@@ -51,25 +61,25 @@ export default class CartModuleService implements ICartModuleService {
   @InjectManager("baseRepository_")
   async retrieve(
     id: string,
-    config: FindConfig<CartDTO> = {},
+    config: FindConfig<CartTypes.CartDTO> = {},
     @MedusaContext() sharedContext: Context = {}
-  ): Promise<CartDTO> {
+  ): Promise<CartTypes.CartDTO> {
     const cart = await this.cartService_.retrieve(id, config, sharedContext)
 
-    return await this.baseRepository_.serialize<CartDTO>(cart, {
+    return await this.baseRepository_.serialize<CartTypes.CartDTO>(cart, {
       populate: true,
     })
   }
 
   @InjectManager("baseRepository_")
   async list(
-    filters: FilterableCartProps = {},
-    config: FindConfig<CartDTO> = {},
+    filters: CartTypes.FilterableCartProps = {},
+    config: FindConfig<CartTypes.CartDTO> = {},
     @MedusaContext() sharedContext: Context = {}
-  ): Promise<CartDTO[]> {
+  ): Promise<CartTypes.CartDTO[]> {
     const carts = await this.cartService_.list(filters, config, sharedContext)
 
-    return await this.baseRepository_.serialize<CartDTO[]>(carts, {
+    return this.baseRepository_.serialize<CartTypes.CartDTO[]>(carts, {
       populate: true,
     })
   }
@@ -77,9 +87,9 @@ export default class CartModuleService implements ICartModuleService {
   @InjectManager("baseRepository_")
   async listAndCount(
     filters: FilterableCartProps = {},
-    config: FindConfig<CartDTO> = {},
+    config: FindConfig<CartTypes.CartDTO> = {},
     @MedusaContext() sharedContext: Context = {}
-  ): Promise<[CartDTO[], number]> {
+  ): Promise<[CartTypes.CartDTO[], number]> {
     const [carts, count] = await this.cartService_.listAndCount(
       filters,
       config,
@@ -87,7 +97,7 @@ export default class CartModuleService implements ICartModuleService {
     )
 
     return [
-      await this.baseRepository_.serialize<CartDTO[]>(carts, {
+      await this.baseRepository_.serialize<CartTypes.CartDTO[]>(carts, {
         populate: true,
       }),
       count,
@@ -95,17 +105,20 @@ export default class CartModuleService implements ICartModuleService {
   }
 
   async create(
-    data: CreateCartDTO[],
+    data: CartTypes.CreateCartDTO[],
     sharedContext?: Context
-  ): Promise<CartDTO[]>
+  ): Promise<CartTypes.CartDTO[]>
 
-  async create(data: CreateCartDTO, sharedContext?: Context): Promise<CartDTO>
+  async create(
+    data: CartTypes.CreateCartDTO,
+    sharedContext?: Context
+  ): Promise<CartTypes.CartDTO>
 
   @InjectManager("baseRepository_")
   async create(
-    data: CreateCartDTO[] | CreateCartDTO,
+    data: CartTypes.CreateCartDTO[] | CartTypes.CreateCartDTO,
     @MedusaContext() sharedContext: Context = {}
-  ): Promise<CartDTO[] | CartDTO> {
+  ): Promise<CartTypes.CartDTO[] | CartTypes.CartDTO> {
     const input = Array.isArray(data) ? data : [data]
 
     const carts = await this.create_(input, sharedContext)
@@ -118,29 +131,57 @@ export default class CartModuleService implements ICartModuleService {
       sharedContext
     )
 
-    return (Array.isArray(data) ? result : result[0]) as CartDTO | CartDTO[]
+    return (Array.isArray(data) ? result : result[0]) as
+      | CartTypes.CartDTO
+      | CartTypes.CartDTO[]
   }
 
   @InjectTransactionManager("baseRepository_")
   protected async create_(
-    data: CreateCartDTO[],
+    data: CartTypes.CreateCartDTO[],
     @MedusaContext() sharedContext: Context = {}
   ) {
-    return await this.cartService_.create(data, sharedContext)
+    const lineItemsToCreate: CreateLineItemDTO[] = []
+    const createdCarts: Cart[] = []
+    for (const { items, ...cart } of data) {
+      const [created] = await this.cartService_.create([cart], sharedContext)
+
+      createdCarts.push(created)
+
+      if (items?.length) {
+        const cartItems = items.map((item) => {
+          return {
+            ...item,
+            cart_id: created.id,
+          }
+        })
+
+        lineItemsToCreate.push(...cartItems)
+      }
+    }
+
+    if (lineItemsToCreate.length) {
+      await this.addLineItemsBulk_(lineItemsToCreate, sharedContext)
+    }
+
+    return createdCarts
   }
 
   async update(
-    data: UpdateCartDTO[],
+    data: CartTypes.UpdateCartDTO[],
     sharedContext?: Context
-  ): Promise<CartDTO[]>
+  ): Promise<CartTypes.CartDTO[]>
 
-  async update(data: UpdateCartDTO, sharedContext?: Context): Promise<CartDTO>
+  async update(
+    data: CartTypes.UpdateCartDTO,
+    sharedContext?: Context
+  ): Promise<CartTypes.CartDTO>
 
   @InjectManager("baseRepository_")
   async update(
-    data: UpdateCartDTO[] | UpdateCartDTO,
+    data: CartTypes.UpdateCartDTO[] | CartTypes.UpdateCartDTO,
     @MedusaContext() sharedContext: Context = {}
-  ): Promise<CartDTO[] | CartDTO> {
+  ): Promise<CartTypes.CartDTO[] | CartTypes.CartDTO> {
     const input = Array.isArray(data) ? data : [data]
     const carts = await this.update_(input, sharedContext)
 
@@ -152,12 +193,14 @@ export default class CartModuleService implements ICartModuleService {
       sharedContext
     )
 
-    return (Array.isArray(data) ? result : result[0]) as CartDTO | CartDTO[]
+    return (Array.isArray(data) ? result : result[0]) as
+      | CartTypes.CartDTO
+      | CartTypes.CartDTO[]
   }
 
   @InjectTransactionManager("baseRepository_")
   protected async update_(
-    data: UpdateCartDTO[],
+    data: CartTypes.UpdateCartDTO[],
     @MedusaContext() sharedContext: Context = {}
   ) {
     return await this.cartService_.update(data, sharedContext)
@@ -178,8 +221,8 @@ export default class CartModuleService implements ICartModuleService {
 
   @InjectManager("baseRepository_")
   async listAddresses(
-    filters: FilterableAddressProps = {},
-    config: FindConfig<AddressDTO> = {},
+    filters: CartTypes.FilterableAddressProps = {},
+    config: FindConfig<CartTypes.CartAddressDTO> = {},
     @MedusaContext() sharedContext: Context = {}
   ) {
     const addresses = await this.addressService_.list(
@@ -188,19 +231,279 @@ export default class CartModuleService implements ICartModuleService {
       sharedContext
     )
 
-    return await this.baseRepository_.serialize<CartAddressDTO[]>(addresses, {
+    return await this.baseRepository_.serialize<CartTypes.CartAddressDTO[]>(
+      addresses,
+      {
+        populate: true,
+      }
+    )
+  }
+
+  @InjectManager("baseRepository_")
+  async retrieveLineItem(
+    itemId: string,
+    config: FindConfig<CartTypes.CartLineItemDTO> = {},
+    @MedusaContext() sharedContext: Context = {}
+  ) {
+    const item = await this.lineItemService_.retrieve(
+      itemId,
+      config,
+      sharedContext
+    )
+
+    return await this.baseRepository_.serialize<CartTypes.CartLineItemDTO[]>(
+      item,
+      {
+        populate: true,
+      }
+    )
+  }
+
+  @InjectManager("baseRepository_")
+  async listLineItems(
+    filters: CartTypes.FilterableLineItemProps = {},
+    config: FindConfig<CartTypes.CartLineItemDTO> = {},
+    @MedusaContext() sharedContext: Context = {}
+  ) {
+    const items = await this.lineItemService_.list(
+      filters,
+      config,
+      sharedContext
+    )
+
+    return await this.baseRepository_.serialize<CartTypes.CartLineItemDTO[]>(
+      items,
+      {
+        populate: true,
+      }
+    )
+  }
+
+  @InjectManager("baseRepository_")
+  async listShippingMethods(
+    filters: CartTypes.FilterableShippingMethodProps = {},
+    config: FindConfig<CartTypes.CartShippingMethodDTO> = {},
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<CartTypes.CartShippingMethodDTO[]> {
+    const methods = await this.shippingMethodService_.list(
+      filters,
+      config,
+      sharedContext
+    )
+
+    return await this.baseRepository_.serialize<
+      CartTypes.CartShippingMethodDTO[]
+    >(methods, {
       populate: true,
     })
   }
 
-  async createAddresses(data: CreateAddressDTO, sharedContext?: Context)
-  async createAddresses(data: CreateAddressDTO[], sharedContext?: Context)
+  addLineItems(
+    data: CartTypes.CreateLineItemForCartDTO
+  ): Promise<CartTypes.CartLineItemDTO>
+  addLineItems(
+    data: CartTypes.CreateLineItemForCartDTO[]
+  ): Promise<CartTypes.CartLineItemDTO[]>
+  addLineItems(
+    cartId: string,
+    items: CartTypes.CreateLineItemDTO[],
+    sharedContext?: Context
+  ): Promise<CartTypes.CartLineItemDTO[]>
+
+  @InjectManager("baseRepository_")
+  async addLineItems(
+    cartIdOrData:
+      | string
+      | CartTypes.CreateLineItemForCartDTO[]
+      | CartTypes.CreateLineItemForCartDTO,
+    data?: CartTypes.CreateLineItemDTO[] | CartTypes.CreateLineItemDTO,
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<CartTypes.CartLineItemDTO[] | CartTypes.CartLineItemDTO> {
+    let items: LineItem[] = []
+    if (isString(cartIdOrData)) {
+      items = await this.addLineItems_(
+        cartIdOrData,
+        data as CartTypes.CreateLineItemDTO[],
+        sharedContext
+      )
+    } else {
+      const data = Array.isArray(cartIdOrData) ? cartIdOrData : [cartIdOrData]
+      items = await this.addLineItemsBulk_(data, sharedContext)
+    }
+
+    return await this.baseRepository_.serialize<CartTypes.CartLineItemDTO[]>(
+      items,
+      {
+        populate: true,
+      }
+    )
+  }
+
+  @InjectTransactionManager("baseRepository_")
+  protected async addLineItems_(
+    cartId: string,
+    items: CartTypes.CreateLineItemDTO[],
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<LineItem[]> {
+    const cart = await this.retrieve(cartId, { select: ["id"] }, sharedContext)
+
+    const toUpdate: CreateLineItemDTO[] = items.map((item) => {
+      return {
+        ...item,
+        cart_id: cart.id,
+      }
+    })
+
+    return await this.addLineItemsBulk_(toUpdate, sharedContext)
+  }
+
+  @InjectTransactionManager("baseRepository_")
+  protected async addLineItemsBulk_(
+    data: CreateLineItemDTO[],
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<LineItem[]> {
+    return await this.lineItemService_.create(data, sharedContext)
+  }
+
+  updateLineItems(
+    data: CartTypes.UpdateLineItemWithSelectorDTO[]
+  ): Promise<CartTypes.CartLineItemDTO[]>
+  updateLineItems(
+    selector: Partial<CartTypes.CartLineItemDTO>,
+    data: CartTypes.UpdateLineItemDTO,
+    sharedContext?: Context
+  ): Promise<CartTypes.CartLineItemDTO[]>
+  updateLineItems(
+    lineItemId: string,
+    data: Partial<CartTypes.UpdateLineItemDTO>,
+    sharedContext?: Context
+  ): Promise<CartTypes.CartLineItemDTO>
+
+  @InjectManager("baseRepository_")
+  async updateLineItems(
+    lineItemIdOrDataOrSelector:
+      | string
+      | CartTypes.UpdateLineItemWithSelectorDTO[]
+      | Partial<CartTypes.CartLineItemDTO>,
+    data?: CartTypes.UpdateLineItemDTO | Partial<CartTypes.UpdateLineItemDTO>,
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<CartTypes.CartLineItemDTO[] | CartTypes.CartLineItemDTO> {
+    let items: LineItem[] = []
+    if (isString(lineItemIdOrDataOrSelector)) {
+      const item = await this.updateLineItem_(
+        lineItemIdOrDataOrSelector,
+        data as Partial<CartTypes.UpdateLineItemDTO>,
+        sharedContext
+      )
+
+      return await this.baseRepository_.serialize<CartTypes.CartLineItemDTO>(
+        item,
+        {
+          populate: true,
+        }
+      )
+    }
+
+    const toUpdate = Array.isArray(lineItemIdOrDataOrSelector)
+      ? lineItemIdOrDataOrSelector
+      : [
+          {
+            selector: lineItemIdOrDataOrSelector,
+            data: data,
+          } as CartTypes.UpdateLineItemWithSelectorDTO,
+        ]
+
+    items = await this.updateLineItemsWithSelector_(toUpdate, sharedContext)
+
+    return await this.baseRepository_.serialize<CartTypes.CartLineItemDTO[]>(
+      items,
+      {
+        populate: true,
+      }
+    )
+  }
+
+  @InjectTransactionManager("baseRepository_")
+  protected async updateLineItem_(
+    lineItemId: string,
+    data: Partial<CartTypes.UpdateLineItemDTO>,
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<LineItem> {
+    const [item] = await this.lineItemService_.update(
+      [{ id: lineItemId, ...data }],
+      sharedContext
+    )
+
+    return item
+  }
+
+  @InjectTransactionManager("baseRepository_")
+  protected async updateLineItemsWithSelector_(
+    updates: CartTypes.UpdateLineItemWithSelectorDTO[],
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<LineItem[]> {
+    let toUpdate: UpdateLineItemDTO[] = []
+    for (const { selector, data } of updates) {
+      const items = await this.listLineItems({ ...selector }, {}, sharedContext)
+
+      items.forEach((item) => {
+        toUpdate.push({
+          ...data,
+          id: item.id,
+        })
+      })
+    }
+
+    return await this.lineItemService_.update(toUpdate, sharedContext)
+  }
+
+  async removeLineItems(
+    itemIds: string[],
+    sharedContext?: Context
+  ): Promise<void>
+  async removeLineItems(itemIds: string, sharedContext?: Context): Promise<void>
+  async removeLineItems(
+    selector: Partial<CartTypes.CartLineItemDTO>,
+    sharedContext?: Context
+  ): Promise<void>
+
+  @InjectTransactionManager("baseRepository_")
+  async removeLineItems(
+    itemIdsOrSelector: string | string[] | Partial<CartTypes.CartLineItemDTO>,
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<void> {
+    let toDelete: string[] = []
+    if (isObject(itemIdsOrSelector)) {
+      const items = await this.listLineItems(
+        { ...itemIdsOrSelector } as Partial<CartTypes.CartLineItemDTO>,
+        {},
+        sharedContext
+      )
+
+      toDelete = items.map((item) => item.id)
+    } else {
+      toDelete = Array.isArray(itemIdsOrSelector)
+        ? itemIdsOrSelector
+        : [itemIdsOrSelector]
+    }
+
+    await this.lineItemService_.delete(toDelete, sharedContext)
+  }
+
+  async createAddresses(
+    data: CartTypes.CreateAddressDTO,
+    sharedContext?: Context
+  ): Promise<CartTypes.CartAddressDTO>
+  async createAddresses(
+    data: CartTypes.CreateAddressDTO[],
+    sharedContext?: Context
+  ): Promise<CartTypes.CartAddressDTO[]>
 
   @InjectManager("baseRepository_")
   async createAddresses(
-    data: CreateAddressDTO[] | CreateAddressDTO,
+    data: CartTypes.CreateAddressDTO[] | CartTypes.CreateAddressDTO,
     @MedusaContext() sharedContext: Context = {}
-  ) {
+  ): Promise<CartTypes.CartAddressDTO | CartTypes.CartAddressDTO[]> {
     const input = Array.isArray(data) ? data : [data]
     const addresses = await this.createAddresses_(input, sharedContext)
 
@@ -211,26 +514,32 @@ export default class CartModuleService implements ICartModuleService {
     )
 
     return (Array.isArray(data) ? result : result[0]) as
-      | AddressDTO
-      | AddressDTO[]
+      | CartTypes.CartAddressDTO
+      | CartTypes.CartAddressDTO[]
   }
 
   @InjectTransactionManager("baseRepository_")
   protected async createAddresses_(
-    data: CreateAddressDTO[],
+    data: CartTypes.CreateAddressDTO[],
     @MedusaContext() sharedContext: Context = {}
   ) {
     return await this.addressService_.create(data, sharedContext)
   }
 
-  async updateAddresses(data: UpdateAddressDTO, sharedContext?: Context)
-  async updateAddresses(data: UpdateAddressDTO[], sharedContext?: Context)
+  async updateAddresses(
+    data: CartTypes.UpdateAddressDTO,
+    sharedContext?: Context
+  ): Promise<CartTypes.CartAddressDTO>
+  async updateAddresses(
+    data: CartTypes.UpdateAddressDTO[],
+    sharedContext?: Context
+  ): Promise<CartTypes.CartAddressDTO[]>
 
   @InjectManager("baseRepository_")
   async updateAddresses(
-    data: UpdateAddressDTO[] | UpdateAddressDTO,
+    data: CartTypes.UpdateAddressDTO[] | CartTypes.UpdateAddressDTO,
     @MedusaContext() sharedContext: Context = {}
-  ) {
+  ): Promise<CartTypes.CartAddressDTO | CartTypes.CartAddressDTO[]> {
     const input = Array.isArray(data) ? data : [data]
     const addresses = await this.updateAddresses_(input, sharedContext)
 
@@ -241,27 +550,135 @@ export default class CartModuleService implements ICartModuleService {
     )
 
     return (Array.isArray(data) ? result : result[0]) as
-      | AddressDTO
-      | AddressDTO[]
+      | CartTypes.CartAddressDTO
+      | CartTypes.CartAddressDTO[]
   }
 
   @InjectTransactionManager("baseRepository_")
   protected async updateAddresses_(
-    data: UpdateAddressDTO[],
+    data: CartTypes.UpdateAddressDTO[],
     @MedusaContext() sharedContext: Context = {}
   ) {
     return await this.addressService_.update(data, sharedContext)
   }
 
-  async deleteAddresses(ids: string[], sharedContext?: Context)
-  async deleteAddresses(ids: string, sharedContext?: Context)
+  async deleteAddresses(ids: string[], sharedContext?: Context): Promise<void>
+  async deleteAddresses(ids: string, sharedContext?: Context): Promise<void>
 
   @InjectTransactionManager("baseRepository_")
   async deleteAddresses(
     ids: string[] | string,
     @MedusaContext() sharedContext: Context = {}
-  ) {
+  ): Promise<void> {
     const addressIds = Array.isArray(ids) ? ids : [ids]
     await this.addressService_.delete(addressIds, sharedContext)
   }
+
+  async addShippingMethods(
+    data: CartTypes.CreateShippingMethodDTO
+  ): Promise<CartTypes.CartShippingMethodDTO>
+  async addShippingMethods(
+    data: CartTypes.CreateShippingMethodDTO[]
+  ): Promise<CartTypes.CartShippingMethodDTO[]>
+  async addShippingMethods(
+    cartId: string,
+    methods: CartTypes.CreateShippingMethodDTO[],
+    sharedContext?: Context
+  ): Promise<CartTypes.CartShippingMethodDTO[]>
+
+  @InjectManager("baseRepository_")
+  async addShippingMethods(
+    cartIdOrData:
+      | string
+      | CartTypes.CreateShippingMethodDTO[]
+      | CartTypes.CreateShippingMethodDTO,
+    data?: CartTypes.CreateShippingMethodDTO[],
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<
+    CartTypes.CartShippingMethodDTO[] | CartTypes.CartShippingMethodDTO
+  > {
+    let methods: ShippingMethod[] = []
+    if (isString(cartIdOrData)) {
+      methods = await this.addShippingMethods_(
+        cartIdOrData,
+        data as CartTypes.CreateShippingMethodDTO[],
+        sharedContext
+      )
+    } else {
+      const data = Array.isArray(cartIdOrData) ? cartIdOrData : [cartIdOrData]
+      methods = await this.addShippingMethodsBulk_(data, sharedContext)
+    }
+
+    return await this.baseRepository_.serialize<
+      CartTypes.CartShippingMethodDTO[]
+    >(methods, {
+      populate: true,
+    })
+  }
+
+  @InjectTransactionManager("baseRepository_")
+  protected async addShippingMethods_(
+    cartId: string,
+    data: CartTypes.CreateShippingMethodDTO[],
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<ShippingMethod[]> {
+    const cart = await this.retrieve(cartId, { select: ["id"] }, sharedContext)
+
+    const methods = data.map((method) => {
+      return {
+        ...method,
+        cart_id: cart.id,
+      }
+    })
+
+    return await this.addShippingMethodsBulk_(methods, sharedContext)
+  }
+
+  @InjectTransactionManager("baseRepository_")
+  protected async addShippingMethodsBulk_(
+    data: CartTypes.CreateShippingMethodDTO[],
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<ShippingMethod[]> {
+    return await this.shippingMethodService_.create(data, sharedContext)
+  }
+
+  async removeShippingMethods(
+    methodIds: string[],
+    sharedContext?: Context
+  ): Promise<void>
+  async removeShippingMethods(
+    methodIds: string,
+    sharedContext?: Context
+  ): Promise<void>
+  async removeShippingMethods(
+    selector: Partial<CartTypes.CartShippingMethodDTO>,
+    sharedContext?: Context
+  ): Promise<void>
+
+  @InjectTransactionManager("baseRepository_")
+  async removeShippingMethods(
+    methodIdsOrSelector:
+      | string
+      | string[]
+      | Partial<CartTypes.CartShippingMethodDTO>,
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<void> {
+    let toDelete: string[] = []
+    if (isObject(methodIdsOrSelector)) {
+      const methods = await this.listShippingMethods(
+        {
+          ...(methodIdsOrSelector as Partial<CartTypes.CartShippingMethodDTO>),
+        },
+        {},
+        sharedContext
+      )
+
+      toDelete = methods.map((m) => m.id)
+    } else {
+      toDelete = Array.isArray(methodIdsOrSelector)
+        ? methodIdsOrSelector
+        : [methodIdsOrSelector]
+    }
+    await this.shippingMethodService_.delete(toDelete, sharedContext)
+  }
 }
diff --git a/packages/cart/src/services/cart.ts b/packages/cart/src/services/cart.ts
index 0cae7e1dee..a9c594555b 100644
--- a/packages/cart/src/services/cart.ts
+++ b/packages/cart/src/services/cart.ts
@@ -1,128 +1,23 @@
-import {
-  CartDTO,
-  Context,
-  DAL,
-  FilterableCartProps,
-  FindConfig,
-} from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  MedusaError,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { Cart } from "@models"
-import { CartRepository } from "@repositories"
 import { CreateCartDTO, UpdateCartDTO } from "@types"
 
 type InjectedDependencies = {
   cartRepository: DAL.RepositoryService
 }
 
-export default class CartService<TEntity extends Cart = Cart> {
-  protected readonly cartRepository_: DAL.RepositoryService
-
-  constructor({ cartRepository }: InjectedDependencies) {
-    this.cartRepository_ = cartRepository
+export default class CartService<
+  TEntity extends Cart = Cart
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreateCartDTO
+    update: UpdateCartDTO
   }
-
-  @InjectManager("cartRepository_")
-  async retrieve(
-    id: string,
-    config: FindConfig<CartDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<Cart, CartDTO>({
-      id: id,
-      entityName: Cart.name,
-      repository: this.cartRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("cartRepository_")
-  async list(
-    filters: FilterableCartProps = {},
-    config: FindConfig<CartDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<Cart>(filters, config)
-
-    return (await this.cartRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("cartRepository_")
-  async listAndCount(
-    filters: FilterableCartProps = {},
-    config: FindConfig<CartDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<Cart>(filters, config)
-
-    return (await this.cartRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("cartRepository_")
-  async create(
-    data: CreateCartDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.cartRepository_ as CartRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("cartRepository_")
-  async update(
-    data: UpdateCartDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const existingCarts = await this.list(
-      { id: data.map(({ id }) => id) },
-      {},
-      sharedContext
-    )
-
-    const existingCartsMap = new Map(
-      existingCarts.map<[string, Cart]>((cart) => [cart.id, cart])
-    )
-
-    const updates: { cart: Cart; update: UpdateCartDTO }[] = []
-
-    for (const update of data) {
-      const cart = existingCartsMap.get(update.id)
-
-      if (!cart) {
-        throw new MedusaError(
-          MedusaError.Types.NOT_FOUND,
-          `Cart with id "${update.id}" not found`
-        )
-      }
-
-      updates.push({ cart, update })
-    }
-
-    return (await (this.cartRepository_ as CartRepository).update(
-      updates,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("cartRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.cartRepository_.delete(ids, sharedContext)
+>(Cart)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/cart/src/services/index.ts b/packages/cart/src/services/index.ts
index 1f70a17a34..b3c18ffa65 100644
--- a/packages/cart/src/services/index.ts
+++ b/packages/cart/src/services/index.ts
@@ -1,4 +1,6 @@
 export { default as AddressService } from "./address"
 export { default as CartService } from "./cart"
 export { default as CartModuleService } from "./cart-module"
+export { default as LineItemService } from "./line-item"
+export { default as ShippingMethodService } from "./shipping-method"
 
diff --git a/packages/cart/src/services/line-item.ts b/packages/cart/src/services/line-item.ts
new file mode 100644
index 0000000000..ec736f4010
--- /dev/null
+++ b/packages/cart/src/services/line-item.ts
@@ -0,0 +1,23 @@
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
+import { LineItem } from "@models"
+import { CreateLineItemDTO, UpdateLineItemDTO } from "@types"
+
+type InjectedDependencies = {
+  lineItemRepository: DAL.RepositoryService
+}
+
+export default class LineItemService<
+  TEntity extends LineItem = LineItem
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreateLineItemDTO
+    update: UpdateLineItemDTO
+  }
+>(LineItem)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
+  }
+}
diff --git a/packages/cart/src/services/shipping-method.ts b/packages/cart/src/services/shipping-method.ts
new file mode 100644
index 0000000000..f3cf667144
--- /dev/null
+++ b/packages/cart/src/services/shipping-method.ts
@@ -0,0 +1,23 @@
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
+import { ShippingMethod } from "@models"
+import { CreateShippingMethodDTO, UpdateShippingMethodDTO } from "../types"
+
+type InjectedDependencies = {
+  shippingMethodRepository: DAL.RepositoryService
+}
+
+export default class ShippingMethodService<
+  TEntity extends ShippingMethod = ShippingMethod
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreateShippingMethodDTO
+    update: UpdateShippingMethodDTO
+  }
+>(ShippingMethod)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
+  }
+}
diff --git a/packages/cart/src/types/index.ts b/packages/cart/src/types/index.ts
index 8b97276103..243d7d3c8d 100644
--- a/packages/cart/src/types/index.ts
+++ b/packages/cart/src/types/index.ts
@@ -1,6 +1,8 @@
 import { Logger } from "@medusajs/types"
 export * from "./address"
 export * from "./cart"
+export * from "./line-item"
+export * from "./shipping-method"
 
 export type InitializeModuleInjectableDependencies = {
   logger?: Logger
diff --git a/packages/cart/src/types/line-item.ts b/packages/cart/src/types/line-item.ts
new file mode 100644
index 0000000000..b7fd239713
--- /dev/null
+++ b/packages/cart/src/types/line-item.ts
@@ -0,0 +1,37 @@
+interface PartialUpsertLineItemDTO {
+  subtitle?: string
+  thumbnail?: string
+
+  product_id?: string
+  product_title?: string
+  product_description?: string
+  product_subtitle?: string
+  product_type?: string
+  product_collection?: string
+  product_handle?: string
+
+  variant_id?: string
+  variant_sku?: string
+  variant_barcode?: string
+  variant_title?: string
+  variant_option_values?: Record<string, unknown>
+
+  requires_shipping?: boolean
+  is_discountable?: boolean
+  is_tax_inclusive?: boolean
+
+  compare_at_unit_price?: number
+}
+
+export interface CreateLineItemDTO extends PartialUpsertLineItemDTO {
+  title: string
+  quantity: number
+  unit_price: number
+  cart_id: string
+}
+
+export interface UpdateLineItemDTO
+  extends PartialUpsertLineItemDTO,
+    Partial<CreateLineItemDTO> {
+  id: string
+}
diff --git a/packages/cart/src/types/shipping-method.ts b/packages/cart/src/types/shipping-method.ts
new file mode 100644
index 0000000000..6e70a4056b
--- /dev/null
+++ b/packages/cart/src/types/shipping-method.ts
@@ -0,0 +1,13 @@
+export interface CreateShippingMethodDTO {
+  name: string
+  cart_id: string
+  amount: number
+  data?: Record<string, unknown>
+}
+
+export interface UpdateShippingMethodDTO {
+  id: string
+  name?: string
+  amount?: number
+  data?: Record<string, unknown>
+}
diff --git a/packages/core-flows/src/handlers/cart/create-cart.ts b/packages/core-flows/src/handlers/cart/create-cart.ts
index 198f5e33fb..bb926d211b 100644
--- a/packages/core-flows/src/handlers/cart/create-cart.ts
+++ b/packages/core-flows/src/handlers/cart/create-cart.ts
@@ -1,4 +1,4 @@
-import { AddressDTO, CustomerDTO, RegionDTO, legacy__CartDTO } from "@medusajs/types"
+import { AddressDTO, CustomerDTO, RegionDTO, legacy_CartDTO } from "@medusajs/types"
 import { WorkflowArguments } from "@medusajs/workflows-sdk"
 
 enum Aliases {
@@ -34,7 +34,7 @@ type HandlerInputData = {
 }
 
 type HandlerOutputData = {
-  cart: legacy__CartDTO
+  cart: legacy_CartDTO
 }
 
 export async function createCart({
diff --git a/packages/core-flows/src/handlers/cart/retrieve-cart.ts b/packages/core-flows/src/handlers/cart/retrieve-cart.ts
index 7f3f2884b8..8a5e3a2d01 100644
--- a/packages/core-flows/src/handlers/cart/retrieve-cart.ts
+++ b/packages/core-flows/src/handlers/cart/retrieve-cart.ts
@@ -1,4 +1,4 @@
-import { legacy__CartDTO } from "@medusajs/types"
+import { legacy_CartDTO } from "@medusajs/types"
 import { WorkflowArguments } from "@medusajs/workflows-sdk"
 
 type HandlerInputData = {
@@ -22,7 +22,7 @@ export async function retrieveCart({
   container,
   context,
   data,
-}: WorkflowArguments<HandlerInputData>): Promise<legacy__CartDTO> {
+}: WorkflowArguments<HandlerInputData>): Promise<legacy_CartDTO> {
   const { manager } = context
 
   const cartService = container.resolve("cartService")
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/packages/medusa-plugin-segment/.babelrc b/packages/medusa-plugin-segment/.babelrc
deleted file mode 100644
index 4d2dfe8f09..0000000000
--- a/packages/medusa-plugin-segment/.babelrc
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-instanceof",
-    "@babel/plugin-transform-classes"
-  ],
-  "presets": ["@babel/preset-env"],
-  "env": {
-    "test": {
-      "plugins": ["@babel/plugin-transform-runtime"]
-    }
-  }
-}
diff --git a/packages/medusa-plugin-segment/package.json b/packages/medusa-plugin-segment/package.json
index 4598e08d10..9b1d5b63dc 100644
--- a/packages/medusa-plugin-segment/package.json
+++ b/packages/medusa-plugin-segment/package.json
@@ -14,36 +14,27 @@
   "author": "Sebastian Rindom",
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.7.5",
-    "@babel/core": "^7.7.5",
-    "@babel/node": "^7.7.4",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/plugin-transform-classes": "^7.9.5",
-    "@babel/plugin-transform-instanceof": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.7.5",
-    "@babel/register": "^7.7.4",
-    "@babel/runtime": "^7.9.6",
     "cross-env": "^5.2.1",
     "eslint": "^6.8.0",
     "jest": "^25.5.4",
     "medusa-interfaces": "^1.3.7",
-    "medusa-test-utils": "^1.1.40"
+    "medusa-test-utils": "^1.1.40",
+    "rimraf": "^5.0.1",
+    "typescript": "^4.9.5"
   },
   "scripts": {
-    "prepare": "cross-env NODE_ENV=production yarn run build",
+    "prepublishOnly": "cross-env NODE_ENV=production tsc --build",
     "test": "jest --passWithNoTests src",
-    "build": "babel src --out-dir . --ignore '**/__tests__','**/__mocks__'",
-    "watch": "babel -w src --out-dir . --ignore '**/__tests__','**/__mocks__'"
+    "build": "rimraf dist && tsc -p ./tsconfig.server.json",
+    "watch": "tsc --watch"
   },
   "peerDependencies": {
+    "@medusajs/medusa": ">= 1.18.0 < 2",
     "medusa-interfaces": "^1.3.7"
   },
   "dependencies": {
     "analytics-node": "^3.4.0-beta.1",
     "axios": "^0.19.2",
-    "body-parser": "^1.19.0",
-    "express": "^4.17.1",
     "medusa-core-utils": "^1.2.0"
   },
   "gitHead": "cd1f5afa5aa8c0b15ea957008ee19f1d695cbd2e",
diff --git a/packages/medusa-plugin-segment/src/services/segment.js b/packages/medusa-plugin-segment/src/services/segment.js
index caaae460e4..9fa275de4f 100644
--- a/packages/medusa-plugin-segment/src/services/segment.js
+++ b/packages/medusa-plugin-segment/src/services/segment.js
@@ -78,10 +78,10 @@ class SegmentService extends BaseService {
       order_id: order.id,
       email: order.email,
       region_id: order.region_id,
-      payment_provider: order.payments.map((p) => p.provider_id).join(","),
+      payment_provider: order.payments?.map((p) => p.provider_id).join(","),
       shipping_methods: order.shipping_methods,
-      shipping_country: order.shipping_address.country_code,
-      shipping_city: order.shipping_address.city,
+      shipping_country: order.shipping_address?.country_code,
+      shipping_city: order.shipping_address?.city,
       reporting_total: await this.getReportingValue(order.currency_code, total),
       reporting_subtotal: await this.getReportingValue(
         order.currency_code,
diff --git a/packages/medusa-plugin-segment/src/subscribers/claim-created.ts b/packages/medusa-plugin-segment/src/subscribers/claim-created.ts
new file mode 100644
index 0000000000..01101ffc06
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/subscribers/claim-created.ts
@@ -0,0 +1,46 @@
+export default async function handler({ data: { id }, container }) {
+  const segmentService = container.resolve("segmentService")
+  const claimService = container.resolve("claimService")
+
+  const claim = await claimService.retrieve(id, {
+    relations: [
+      "order",
+      "claim_items",
+      "claim_items.item",
+      "claim_items.tags",
+      "claim_items.variant",
+    ],
+  })
+
+  for (const ci of claim.claim_items) {
+    const price = ci.item.unit_price / 100
+    const reporting_price = await segmentService.getReportingValue(
+      claim.order.currency_code,
+      price
+    )
+    const event = {
+      event: "Item Claimed",
+      userId: claim.order.customer_id,
+      timestamp: claim.created_at,
+      properties: {
+        price,
+        reporting_price,
+        order_id: claim.order_id,
+        claim_id: claim.id,
+        claim_item_id: ci.id,
+        type: claim.type,
+        quantity: ci.quantity,
+        variant: ci.variant.sku,
+        product_id: ci.variant.product_id,
+        reason: ci.reason,
+        note: ci.note,
+        tags: ci.tags.map((t) => ({ id: t.id, value: t.value })),
+      },
+    }
+    await segmentService.track(event)
+  }
+}
+
+export const config = {
+  event: "claim.created",
+}
diff --git a/packages/medusa-plugin-segment/src/subscribers/order-canceled.ts b/packages/medusa-plugin-segment/src/subscribers/order-canceled.ts
new file mode 100644
index 0000000000..daaa233351
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/subscribers/order-canceled.ts
@@ -0,0 +1,21 @@
+export default async function handler({ data: { id }, container }) {
+  const orderService = container.resolve("orderService")
+  const segmentService = container.resolve("segmentService")
+
+  const order = await orderService.retrieveWithTotals(id)
+
+  const date = new Date()
+  const orderData = await segmentService.buildOrder(order)
+  const orderEvent = {
+    event: "Order Cancelled",
+    userId: order.customer_id,
+    properties: orderData,
+    timestamp: date,
+  }
+
+  segmentService.track(orderEvent)
+}
+
+export const config = {
+  event: "order.canceled",
+}
diff --git a/packages/medusa-plugin-segment/src/subscribers/order-items-returned.ts b/packages/medusa-plugin-segment/src/subscribers/order-items-returned.ts
new file mode 100644
index 0000000000..07012730ea
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/subscribers/order-items-returned.ts
@@ -0,0 +1,82 @@
+export default async function handler({ data: { id, return_id }, container }) {
+  const orderService = container.resolve("orderService")
+  const returnService = container.resolve("returnService")
+  const segmentService = container.resolve("segmentService")
+
+  const order = await orderService.retrieveWithTotals(id, {
+    relations: [
+      "customer",
+      "billing_address",
+      "shipping_address",
+      "discounts",
+      "discounts.rule",
+      "shipping_methods",
+      "shipping_methods.shipping_option",
+      "payments",
+      "fulfillments",
+      "returns",
+      "items",
+      "gift_cards",
+      "gift_card_transactions",
+      "swaps",
+      "swaps.return_order",
+      "swaps.payment",
+      "swaps.shipping_methods",
+      "swaps.shipping_methods.shipping_option",
+      "swaps.shipping_address",
+      "swaps.additional_items",
+      "swaps.fulfillments",
+    ],
+  })
+
+  const ret = await returnService.retrieve(return_id, {
+    relations: ["items", "items.reason"],
+  })
+
+  const shipping: object[] = []
+  if (ret.shipping_method && ret.shipping_method.price) {
+    shipping.push({
+      ...ret.shipping_method,
+      price: -1 * (ret.shipping_method.price / 100),
+    })
+  }
+
+  let merged = [...order.items]
+
+  // merge items from order with items from order swaps
+  if (order.swaps && order.swaps.length) {
+    for (const s of order.swaps) {
+      merged = [...merged, ...s.additional_items]
+    }
+  }
+
+  const toBuildFrom = {
+    ...order,
+    shipping_methods: shipping,
+    items: ret.items.map((i) => {
+      const li = merged.find((l) => l.id === i.item_id)
+      if (i.reason) {
+        li.reason = i.reason
+      }
+
+      if (i.note) {
+        li.note = i.note
+      }
+      return li
+    }),
+  }
+
+  const orderData = await segmentService.buildOrder(toBuildFrom)
+  const orderEvent = {
+    event: "Order Refunded",
+    userId: order.customer_id,
+    properties: orderData,
+    timestamp: new Date(),
+  }
+
+  segmentService.track(orderEvent)
+}
+
+export const config = {
+  event: "order.items-returned",
+}
diff --git a/packages/medusa-plugin-segment/src/subscribers/order-placed.ts b/packages/medusa-plugin-segment/src/subscribers/order-placed.ts
new file mode 100644
index 0000000000..044d4637ed
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/subscribers/order-placed.ts
@@ -0,0 +1,87 @@
+export default async function handler({ data: { id }, container }) {
+  const orderService = container.resolve("orderService")
+  const cartService = container.resolve("cartService")
+  const segmentService = container.resolve("segmentService")
+  const order = await orderService.retrieveWithTotals(id, {
+    relations: [
+      "customer",
+      "billing_address",
+      "shipping_address",
+      "discounts",
+      "discounts.rule",
+      "shipping_methods",
+      "shipping_methods.shipping_option",
+      "payments",
+      "fulfillments",
+      "items",
+      "returns",
+      "gift_cards",
+      "gift_card_transactions",
+      "swaps",
+      "swaps.return_order",
+      "swaps.payment",
+      "swaps.shipping_methods",
+      "swaps.shipping_methods.shipping_option",
+      "swaps.shipping_address",
+      "swaps.additional_items",
+      "swaps.fulfillments",
+    ],
+  })
+
+  const eventContext: Record<string, unknown> = {}
+  const integrations: Record<string, unknown> = {}
+
+  if (order.cart_id) {
+    try {
+      const cart = await cartService.retrieve(order.cart_id, {
+        select: ["context"],
+      })
+
+      if (cart.context) {
+        if (cart.context.ip) {
+          eventContext.ip = cart.context.ip
+        }
+
+        if (cart.context.user_agent) {
+          eventContext.user_agent = cart.context.user_agent
+        }
+
+        if (segmentService.options_ && segmentService.options_.use_ga_id) {
+          if (cart.context.ga_id) {
+            integrations["Google Analytics"] = {
+              clientId: cart.context.ga_id,
+            }
+          }
+        }
+      }
+    } catch (err) {
+      console.log(err)
+      console.warn("Failed to gather context for order")
+    }
+  }
+
+  const orderData = await segmentService.buildOrder(order)
+  const orderEvent = {
+    event: "Order Completed",
+    userId: order.customer_id,
+    properties: orderData,
+    timestamp: order.created_at,
+    context: eventContext,
+    integrations,
+  }
+
+  segmentService.identify({
+    userId: order.customer_id,
+    traits: {
+      email: order.email,
+      firstName: order.shipping_address.first_name,
+      lastName: order.shipping_address.last_name,
+    },
+  })
+
+  segmentService.track(orderEvent)
+}
+
+export const config = {
+  event: "order.placed",
+}
diff --git a/packages/medusa-plugin-segment/src/subscribers/order-shipment-created.ts b/packages/medusa-plugin-segment/src/subscribers/order-shipment-created.ts
new file mode 100644
index 0000000000..1428acdff4
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/subscribers/order-shipment-created.ts
@@ -0,0 +1,60 @@
+export default async function handler({
+  data: { id, fulfillment_id },
+  container,
+}) {
+  const orderService = container.resolve("orderService")
+  const fulfillmentService = container.resolve("fulfillmentService")
+  const segmentService = container.resolve("segmentService")
+
+  const order = await orderService.retrieveWithTotals(id, {
+    relations: [
+      "customer",
+      "billing_address",
+      "shipping_address",
+      "discounts",
+      "discounts.rule",
+      "shipping_methods",
+      "shipping_methods.shipping_option",
+      "payments",
+      "fulfillments",
+      "returns",
+      "items",
+      "gift_cards",
+      "gift_card_transactions",
+      "swaps",
+      "swaps.return_order",
+      "swaps.payment",
+      "swaps.shipping_methods",
+      "swaps.shipping_methods.shipping_option",
+      "swaps.shipping_address",
+      "swaps.additional_items",
+      "swaps.fulfillments",
+    ],
+  })
+
+  const fulfillment = await fulfillmentService.retrieve(fulfillment_id, {
+    relations: ["items"],
+  })
+
+  const toBuildFrom = {
+    ...order,
+    provider_id: fulfillment.provider,
+    items: fulfillment.items.map((i) =>
+      order.items.find((l) => l.id === i.item_id)
+    ),
+  }
+
+  const orderData = await segmentService.buildOrder(toBuildFrom)
+  const orderEvent = {
+    event: "Order Shipped",
+    userId: order.customer_id,
+    properties: orderData,
+    timestamp: fulfillment.shipped_at,
+  }
+
+  segmentService.track(orderEvent)
+}
+
+export const config = {
+  event: "order.shipment_created",
+}
diff --git a/packages/medusa-plugin-segment/src/subscribers/order.js b/packages/medusa-plugin-segment/src/subscribers/order.js
deleted file mode 100644
index 3c13b334a5..0000000000
--- a/packages/medusa-plugin-segment/src/subscribers/order.js
+++ /dev/null
@@ -1,338 +0,0 @@
-class OrderSubscriber {
-  constructor({
-    segmentService,
-    eventBusService,
-    orderService,
-    cartService,
-    claimService,
-    returnService,
-    fulfillmentService,
-  }) {
-    this.orderService_ = orderService
-
-    this.cartService_ = cartService
-
-    this.returnService_ = returnService
-
-    this.claimService_ = claimService
-
-    this.fulfillmentService_ = fulfillmentService
-
-    // Swaps
-    // swap.created
-    // swap.received
-    // swap.shipment_created
-    // swap.payment_completed
-    // swap.payment_captured
-    // swap.refund_processed
-
-    eventBusService.subscribe(
-      "order.shipment_created",
-      async ({ id, fulfillment_id }) => {
-        const order = await this.orderService_.retrieve(id, {
-          select: [
-            "shipping_total",
-            "discount_total",
-            "tax_total",
-            "refunded_total",
-            "gift_card_total",
-            "subtotal",
-            "total",
-          ],
-          relations: [
-            "customer",
-            "billing_address",
-            "shipping_address",
-            "discounts",
-            "discounts.rule",
-            "shipping_methods",
-            "shipping_methods.shipping_option",
-            "payments",
-            "fulfillments",
-            "returns",
-            "items",
-            "gift_cards",
-            "gift_card_transactions",
-            "swaps",
-            "swaps.return_order",
-            "swaps.payment",
-            "swaps.shipping_methods",
-            "swaps.shipping_methods.shipping_option",
-            "swaps.shipping_address",
-            "swaps.additional_items",
-            "swaps.fulfillments",
-          ],
-        })
-
-        const fulfillment = await this.fulfillmentService_.retrieve(
-          fulfillment_id,
-          {
-            relations: ["items"],
-          }
-        )
-
-        const toBuildFrom = {
-          ...order,
-          provider_id: fulfillment.provider,
-          items: fulfillment.items.map((i) =>
-            order.items.find((l) => l.id === i.item_id)
-          ),
-        }
-
-        const orderData = await segmentService.buildOrder(toBuildFrom)
-        const orderEvent = {
-          event: "Order Shipped",
-          userId: order.customer_id,
-          properties: orderData,
-          timestamp: fulfillment.shipped_at,
-        }
-
-        segmentService.track(orderEvent)
-      }
-    )
-
-    eventBusService.subscribe("claim.created", async ({ id }) => {
-      const claim = await this.claimService_.retrieve(id, {
-        relations: [
-          "order",
-          "claim_items",
-          "claim_items.item",
-          "claim_items.tags",
-          "claim_items.variant",
-        ],
-      })
-
-      for (const ci of claim.claim_items) {
-        const price = ci.item.unit_price / 100
-        const reporting_price = await segmentService.getReportingValue(
-          claim.order.currency_code,
-          price
-        )
-        const event = {
-          event: "Item Claimed",
-          userId: claim.order.customer_id,
-          timestamp: claim.created_at,
-          properties: {
-            price,
-            reporting_price,
-            order_id: claim.order_id,
-            claim_id: claim.id,
-            claim_item_id: ci.id,
-            type: claim.type,
-            quantity: ci.quantity,
-            variant: ci.variant.sku,
-            product_id: ci.variant.product_id,
-            reason: ci.reason,
-            note: ci.note,
-            tags: ci.tags.map((t) => ({ id: t.id, value: t.value })),
-          },
-        }
-        await segmentService.track(event)
-      }
-    })
-
-    eventBusService.subscribe(
-      "order.items_returned",
-      async ({ id, return_id }) => {
-        const order = await this.orderService_.retrieve(id, {
-          select: [
-            "shipping_total",
-            "discount_total",
-            "tax_total",
-            "refunded_total",
-            "gift_card_total",
-            "subtotal",
-            "total",
-          ],
-          relations: [
-            "customer",
-            "billing_address",
-            "shipping_address",
-            "discounts",
-            "discounts.rule",
-            "shipping_methods",
-            "shipping_methods.shipping_option",
-            "payments",
-            "fulfillments",
-            "returns",
-            "items",
-            "gift_cards",
-            "gift_card_transactions",
-            "swaps",
-            "swaps.return_order",
-            "swaps.payment",
-            "swaps.shipping_methods",
-            "swaps.shipping_methods.shipping_option",
-            "swaps.shipping_address",
-            "swaps.additional_items",
-            "swaps.fulfillments",
-          ],
-        })
-
-        const ret = await this.returnService_.retrieve(return_id, {
-          relations: ["items", "items.reason"],
-        })
-
-        const shipping = []
-        if (ret.shipping_method && ret.shipping_method.price) {
-          shipping.push({
-            ...ret.shipping_method,
-            price: -1 * (ret.shipping_method.price / 100),
-          })
-        }
-
-        let merged = [...order.items]
-
-        // merge items from order with items from order swaps
-        if (order.swaps && order.swaps.length) {
-          for (const s of order.swaps) {
-            merged = [...merged, ...s.additional_items]
-          }
-        }
-
-        const toBuildFrom = {
-          ...order,
-          shipping_methods: shipping,
-          items: ret.items.map((i) => {
-            const li = merged.find((l) => l.id === i.item_id)
-            if (i.reason) {
-              li.reason = i.reason
-            }
-
-            if (i.note) {
-              li.note = i.note
-            }
-            return li
-          }),
-        }
-
-        const orderData = await segmentService.buildOrder(toBuildFrom)
-        const orderEvent = {
-          event: "Order Refunded",
-          userId: order.customer_id,
-          properties: orderData,
-          timestamp: new Date(),
-        }
-
-        segmentService.track(orderEvent)
-      }
-    )
-
-    eventBusService.subscribe("order.canceled", async ({ id }) => {
-      const order = await this.orderService_.retrieve(id, {
-        select: [
-          "shipping_total",
-          "discount_total",
-          "tax_total",
-          "refunded_total",
-          "gift_card_total",
-          "subtotal",
-          "total",
-        ],
-      })
-
-      const date = new Date()
-      const orderData = await segmentService.buildOrder(order)
-      const orderEvent = {
-        event: "Order Cancelled",
-        userId: order.customer_id,
-        properties: orderData,
-        timestamp: date,
-      }
-
-      segmentService.track(orderEvent)
-    })
-
-    eventBusService.subscribe("order.placed", async ({ id }) => {
-      const order = await this.orderService_.retrieve(id, {
-        select: [
-          "shipping_total",
-          "discount_total",
-          "tax_total",
-          "refunded_total",
-          "gift_card_total",
-          "subtotal",
-          "total",
-        ],
-        relations: [
-          "customer",
-          "billing_address",
-          "shipping_address",
-          "discounts",
-          "discounts.rule",
-          "shipping_methods",
-          "shipping_methods.shipping_option",
-          "payments",
-          "fulfillments",
-          "items",
-          "returns",
-          "gift_cards",
-          "gift_card_transactions",
-          "swaps",
-          "swaps.return_order",
-          "swaps.payment",
-          "swaps.shipping_methods",
-          "swaps.shipping_methods.shipping_option",
-          "swaps.shipping_address",
-          "swaps.additional_items",
-          "swaps.fulfillments",
-        ],
-      })
-
-      const eventContext = {}
-      const integrations = {}
-
-      if (order.cart_id) {
-        try {
-          const cart = await this.cartService_.retrieve(order.cart_id, {
-            select: ["context"],
-          })
-
-          if (cart.context) {
-            if (cart.context.ip) {
-              eventContext.ip = cart.context.ip
-            }
-
-            if (cart.context.user_agent) {
-              eventContext.user_agent = cart.context.user_agent
-            }
-
-            if (segmentService.options_ && segmentService.options_.use_ga_id) {
-              if (cart.context.ga_id) {
-                integrations["Google Analytics"] = {
-                  clientId: cart.context.ga_id,
-                }
-              }
-            }
-          }
-        } catch (err) {
-          console.log(err)
-          console.warn("Failed to gather context for order")
-        }
-      }
-
-      const orderData = await segmentService.buildOrder(order)
-      const orderEvent = {
-        event: "Order Completed",
-        userId: order.customer_id,
-        properties: orderData,
-        timestamp: order.created_at,
-        context: eventContext,
-        integrations,
-      }
-
-      segmentService.identify({
-        userId: order.customer_id,
-        traits: {
-          email: order.email,
-          firstName: order.shipping_address.first_name,
-          lastName: order.shipping_address.last_name,
-        },
-      })
-
-      segmentService.track(orderEvent)
-    })
-  }
-}
-
-export default OrderSubscriber
diff --git a/packages/medusa-plugin-segment/src/subscribers/swap-created.ts b/packages/medusa-plugin-segment/src/subscribers/swap-created.ts
new file mode 100644
index 0000000000..ca2be09343
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/subscribers/swap-created.ts
@@ -0,0 +1,24 @@
+import { gatherSwapReport } from "../utils/gather-swap-report"
+
+export default async function handler({ data: { id }, container }) {
+  const swapService = container.resolve("swapService")
+  const segmentService = container.resolve("segmentService")
+  const lineItemService = container.resolve("lineItemService")
+
+  const [swap, swapReport] = await gatherSwapReport(id, {
+    swapService,
+    segmentService,
+    lineItemService,
+  })
+
+  return await segmentService.track({
+    event: "Swap Created",
+    userId: swap.order.customer_id,
+    timestamp: swap.created_at,
+    properties: swapReport,
+  })
+}
+
+export const config = {
+  event: "swap.created",
+}
diff --git a/packages/medusa-plugin-segment/src/subscribers/swap-payment-completed.ts b/packages/medusa-plugin-segment/src/subscribers/swap-payment-completed.ts
new file mode 100644
index 0000000000..c06ddecfa6
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/subscribers/swap-payment-completed.ts
@@ -0,0 +1,36 @@
+import { humanizeAmount } from "medusa-core-utils"
+import { gatherSwapReport } from "../utils/gather-swap-report"
+
+export default async function handler({ data: { id }, container }) {
+  const swapService = container.resolve("swapService")
+  const segmentService = container.resolve("segmentService")
+  const lineItemService = container.resolve("lineItemService")
+
+  const [swap, swapReport] = await gatherSwapReport(id, {
+    swapService,
+    segmentService,
+    lineItemService,
+  })
+
+  const currency = swapReport.currency
+  const total = humanizeAmount(swap.difference_due, currency)
+  const reporting_total = await segmentService.getReportingValue(
+    currency,
+    total
+  )
+
+  return await segmentService.track({
+    event: "Swap Confirmed",
+    userId: swap.order.customer_id,
+    timestamp: swap.confirmed_at,
+    properties: {
+      reporting_total,
+      total,
+      ...swapReport,
+    },
+  })
+}
+
+export const config = {
+  event: "swap.payment_completed",
+}
diff --git a/packages/medusa-plugin-segment/src/subscribers/swap-shipment-created.ts b/packages/medusa-plugin-segment/src/subscribers/swap-shipment-created.ts
new file mode 100644
index 0000000000..06b2a6957a
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/subscribers/swap-shipment-created.ts
@@ -0,0 +1,41 @@
+import { humanizeAmount } from "medusa-core-utils"
+import { gatherSwapReport } from "../utils/gather-swap-report"
+
+export default async function handler({
+  data: { id, fulfillment_id },
+  container,
+}) {
+  const segmentService = container.resolve("segmentService")
+  const fulfillmentService = container.resolve("fulfillmentService")
+  const swapService = container.resolve("swapService")
+  const lineItemService = container.resolve("lineItemService")
+
+  const [swap, swapReport] = await gatherSwapReport(id, {
+    swapService,
+    segmentService,
+    lineItemService,
+  })
+  const fulfillment = await fulfillmentService.retrieve(fulfillment_id)
+
+  const currency = swapReport.currency
+  const total = humanizeAmount(swap.difference_due, currency)
+  const reporting_total = await segmentService.getReportingValue(
+    currency,
+    total
+  )
+
+  return await segmentService.track({
+    event: "Swap Shipped",
+    userId: swap.order.customer_id,
+    timestamp: fulfillment.shipped_at,
+    properties: {
+      reporting_total,
+      total,
+      ...swapReport,
+    },
+  })
+}
+
+export const config = {
+  event: "swap.shipment_created",
+}
diff --git a/packages/medusa-plugin-segment/src/subscribers/swap.js b/packages/medusa-plugin-segment/src/subscribers/swap.js
deleted file mode 100644
index 30c83d0b91..0000000000
--- a/packages/medusa-plugin-segment/src/subscribers/swap.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import { humanizeAmount } from "medusa-core-utils"
-
-class OrderSubscriber {
-  constructor({
-    segmentService,
-    eventBusService,
-    swapService,
-    lineItemService,
-    fulfillmentService,
-  }) {
-    this.fulfillmentService_ = fulfillmentService
-
-    this.lineItemService_ = lineItemService
-
-    this.swapService_ = swapService
-
-    this.segmentService_ = segmentService
-
-    eventBusService.subscribe(
-      "swap.shipment_created",
-      async ({ id, fulfillment_id }) => {
-        const [swap, swapReport] = await this.gatherSwapReport(id)
-        const fulfillment = await this.fulfillmentService_.retrieve(
-          fulfillment_id
-        )
-
-        const currency = swapReport.currency
-        const total = humanizeAmount(swap.difference_due, currency)
-        const reporting_total = await this.segmentService_.getReportingValue(
-          currency,
-          total
-        )
-
-        return await segmentService.track({
-          event: "Swap Shipped",
-          userId: swap.order.customer_id,
-          timestamp: fulfillment.shipped_at,
-          properties: {
-            reporting_total,
-            total,
-            ...swapReport,
-          },
-        })
-      }
-    )
-
-    eventBusService.subscribe("swap.payment_completed", async ({ id }) => {
-      const [swap, swapReport] = await this.gatherSwapReport(id)
-
-      const currency = swapReport.currency
-      const total = humanizeAmount(swap.difference_due, currency)
-      const reporting_total = await this.segmentService_.getReportingValue(
-        currency,
-        total
-      )
-
-      return await segmentService.track({
-        event: "Swap Confirmed",
-        userId: swap.order.customer_id,
-        timestamp: swap.confirmed_at,
-        properties: {
-          reporting_total,
-          total,
-          ...swapReport,
-        },
-      })
-    })
-
-    eventBusService.subscribe("swap.created", async ({ id }) => {
-      const [swap, swapReport] = await this.gatherSwapReport(id)
-
-      return await segmentService.track({
-        event: "Swap Created",
-        userId: swap.order.customer_id,
-        timestamp: swap.created_at,
-        properties: swapReport,
-      })
-    })
-  }
-
-  async gatherSwapReport(id) {
-    const swap = await this.swapService_.retrieve(id, {
-      relations: [
-        "order",
-        "additional_items",
-        "additional_items.variant",
-        "return_order",
-        "return_order.items",
-        "return_order.shipping_method",
-      ],
-    })
-
-    const currency = swap.order.currency_code
-
-    const newItems = await Promise.all(
-      swap.additional_items.map(async (i) => {
-        const price = humanizeAmount(i.unit_price, currency)
-        const reporting_price = await this.segmentService_.getReportingValue(
-          currency,
-          price
-        )
-
-        return {
-          name: i.title,
-          product_id: i.variant.product_id,
-          variant: i.variant.sku,
-          quantity: i.quantity,
-          price,
-          reporting_price,
-        }
-      })
-    )
-
-    const returnItems = await Promise.all(
-      swap.return_order.items.map(async (ri) => {
-        const i = await this.lineItemService_.retrieve(ri.item_id, {
-          relations: ["variant"],
-        })
-        const price = humanizeAmount(i.unit_price, currency)
-        const reporting_price = await this.segmentService_.getReportingValue(
-          currency,
-          price
-        )
-
-        return {
-          name: i.title,
-          product_id: i.variant.product_id,
-          variant: i.variant.sku,
-          quantity: ri.quantity,
-          price,
-          reporting_price,
-        }
-      })
-    )
-
-    return [
-      swap,
-      {
-        swap_id: swap.id,
-        order_id: swap.order_id,
-        new_items: newItems,
-        return_items: returnItems,
-        currency,
-      },
-    ]
-  }
-}
-
-export default OrderSubscriber
diff --git a/packages/medusa-plugin-segment/src/utils/gather-swap-report.ts b/packages/medusa-plugin-segment/src/utils/gather-swap-report.ts
new file mode 100644
index 0000000000..3055b8e33a
--- /dev/null
+++ b/packages/medusa-plugin-segment/src/utils/gather-swap-report.ts
@@ -0,0 +1,71 @@
+import { humanizeAmount } from "medusa-core-utils"
+
+export async function gatherSwapReport(
+  id,
+  { swapService, segmentService, lineItemService }
+) {
+  const swap = await swapService.retrieve(id, {
+    relations: [
+      "order",
+      "additional_items",
+      "additional_items.variant",
+      "return_order",
+      "return_order.items",
+      "return_order.shipping_method",
+    ],
+  })
+
+  const currency = swap.order.currency_code
+
+  const newItems = await Promise.all(
+    swap.additional_items.map(async (i) => {
+      const price = humanizeAmount(i.unit_price, currency)
+      const reporting_price = await segmentService.getReportingValue(
+        currency,
+        price
+      )
+
+      return {
+        name: i.title,
+        product_id: i.variant.product_id,
+        variant: i.variant.sku,
+        quantity: i.quantity,
+        price,
+        reporting_price,
+      }
+    })
+  )
+
+  const returnItems = await Promise.all(
+    swap.return_order.items.map(async (ri) => {
+      const i = await lineItemService.retrieve(ri.item_id, {
+        relations: ["variant"],
+      })
+      const price = humanizeAmount(i.unit_price, currency)
+      const reporting_price = await segmentService.getReportingValue(
+        currency,
+        price
+      )
+
+      return {
+        name: i.title,
+        product_id: i.variant.product_id,
+        variant: i.variant.sku,
+        quantity: ri.quantity,
+        price,
+        reporting_price,
+      }
+    })
+  )
+
+  return [
+    swap,
+    {
+      swap_id: swap.id,
+      order_id: swap.order_id,
+      new_items: newItems,
+      return_items: returnItems,
+      currency,
+    },
+  ]
+}
diff --git a/packages/medusa-plugin-segment/tsconfig.admin.json b/packages/medusa-plugin-segment/tsconfig.admin.json
new file mode 100644
index 0000000000..b109ee6f17
--- /dev/null
+++ b/packages/medusa-plugin-segment/tsconfig.admin.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext"
+  },
+  "include": ["src/admin"],
+  "exclude": ["**/*.spec.js"]
+}
diff --git a/packages/medusa-plugin-segment/tsconfig.json b/packages/medusa-plugin-segment/tsconfig.json
new file mode 100644
index 0000000000..869a718e13
--- /dev/null
+++ b/packages/medusa-plugin-segment/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es5",
+      "es6",
+      "es2019"
+    ],
+    "target": "es5",
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noImplicitReturns": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "downlevelIteration": true // to use ES5 specific tooling
+  },
+  "include": ["src"],
+  "exclude": [
+    "dist",
+    "build",
+    "src/**/__tests__",
+    "src/**/__mocks__",
+    "src/**/__fixtures__",
+    "node_modules",
+    ".eslintrc.js"
+  ]
+}
diff --git a/packages/medusa-plugin-segment/tsconfig.server.json b/packages/medusa-plugin-segment/tsconfig.server.json
new file mode 100644
index 0000000000..0a84ca8c0c
--- /dev/null
+++ b/packages/medusa-plugin-segment/tsconfig.server.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "inlineSourceMap": true /* Emit a single file with source maps instead of having a separate file. */
+  },
+  "exclude": ["src/admin", "**/*.spec.js"]
+}
diff --git a/packages/medusa-plugin-segment/tsconfig.spec.json b/packages/medusa-plugin-segment/tsconfig.spec.json
new file mode 100644
index 0000000000..9b62409191
--- /dev/null
+++ b/packages/medusa-plugin-segment/tsconfig.spec.json
@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/modules-sdk/src/medusa-app.ts b/packages/modules-sdk/src/medusa-app.ts
index 9ba593ab93..062a38a5ed 100644
--- a/packages/modules-sdk/src/medusa-app.ts
+++ b/packages/modules-sdk/src/medusa-app.ts
@@ -308,12 +308,16 @@ export async function MedusaApp(
       }))
   }
 
-  return {
-    modules: allModules,
-    link: remoteLink,
-    query,
-    entitiesMap: schema.getTypeMap(),
-    notFound,
-    runMigrations,
+  try {
+    return {
+      modules: allModules,
+      link: remoteLink,
+      query,
+      entitiesMap: schema.getTypeMap(),
+      notFound,
+      runMigrations,
+    }
+  } finally {
+    await MedusaModule.onApplicationStart()
   }
 }
diff --git a/packages/modules-sdk/src/medusa-module.ts b/packages/modules-sdk/src/medusa-module.ts
index 19c036071e..6144d93ff8 100644
--- a/packages/modules-sdk/src/medusa-module.ts
+++ b/packages/modules-sdk/src/medusa-module.ts
@@ -1,5 +1,6 @@
 import {
   ExternalModuleDeclaration,
+  IModuleService,
   InternalModuleDeclaration,
   LinkModuleDefinition,
   LoadedModule,
@@ -85,6 +86,21 @@ export class MedusaModule {
       return MedusaModule.getModuleInstance(key)
     })
   }
+  
+  public static onApplicationStart(): void {
+    for (const instances of MedusaModule.instances_.values()) {
+      for (const instance of Object.values(instances) as IModuleService[]) {
+        if (instance?.__hooks) {
+          instance.__hooks?.onApplicationStart
+            ?.bind(instance)()
+            .catch(() => {
+              // The module should handle this and log it
+              return void 0
+            })
+        }
+      }
+    }
+  }
 
   public static clearInstances(): void {
     MedusaModule.instances_.clear()
diff --git a/packages/payment/src/models/capture.ts b/packages/payment/src/models/capture.ts
index 259a7dbec3..5c8d1eb53a 100644
--- a/packages/payment/src/models/capture.ts
+++ b/packages/payment/src/models/capture.ts
@@ -41,7 +41,7 @@ export default class Capture {
   created_at: Date
 
   @Property({ columnType: "text", nullable: true })
-  created_by?: string | null
+  created_by: string | null = null
 
   @BeforeCreate()
   onCreate() {
diff --git a/packages/payment/src/models/payment-collection.ts b/packages/payment/src/models/payment-collection.ts
index 5ebb5fa841..3cc690fea1 100644
--- a/packages/payment/src/models/payment-collection.ts
+++ b/packages/payment/src/models/payment-collection.ts
@@ -48,14 +48,14 @@ export default class PaymentCollection {
     nullable: true,
     serializer: optionalNumericSerializer,
   })
-  authorized_amount?: number | null
+  authorized_amount: number | null = null
 
   @Property({
     columnType: "numeric",
     nullable: true,
     serializer: optionalNumericSerializer,
   })
-  refunded_amount?: number | null
+  refunded_amount: number | null = null
 
   @Property({ columnType: "text", index: "IDX_payment_collection_region_id" })
   region_id: string
@@ -80,13 +80,13 @@ export default class PaymentCollection {
     nullable: true,
     index: "IDX_payment_collection_deleted_at",
   })
-  deleted_at?: Date | null
+  deleted_at: Date | null = null
 
   @Property({
     columnType: "timestamptz",
     nullable: true,
   })
-  completed_at?: Date | null
+  completed_at: Date | null = null
 
   @Enum({
     items: () => PaymentCollectionStatus,
diff --git a/packages/payment/src/models/payment-method-token.ts b/packages/payment/src/models/payment-method-token.ts
index a1f284524d..e7af8af115 100644
--- a/packages/payment/src/models/payment-method-token.ts
+++ b/packages/payment/src/models/payment-method-token.ts
@@ -17,19 +17,19 @@ export default class PaymentMethodToken {
   provider_id: string
 
   @Property({ columnType: "jsonb", nullable: true })
-  data?: Record<string, unknown> | null
+  data: Record<string, unknown> | null = null
 
   @Property({ columnType: "text" })
   name: string
 
   @Property({ columnType: "text", nullable: true })
-  type_detail?: string | null
+  type_detail: string | null = null
 
   @Property({ columnType: "text", nullable: true })
-  description_detail?: string | null
+  description_detail: string | null = null
 
   @Property({ columnType: "jsonb", nullable: true })
-  metadata?: Record<string, unknown> | null
+  metadata: Record<string, unknown> | null = null
 
   @BeforeCreate()
   onCreate() {
diff --git a/packages/payment/src/models/payment-session.ts b/packages/payment/src/models/payment-session.ts
index 868290fdc9..f001852af5 100644
--- a/packages/payment/src/models/payment-session.ts
+++ b/packages/payment/src/models/payment-session.ts
@@ -31,7 +31,7 @@ export default class PaymentSession {
   provider_id: string
 
   @Property({ columnType: "jsonb", nullable: true })
-  data?: Record<string, unknown> | null
+  data: Record<string, unknown> | null = null
 
   @Enum({
     items: () => PaymentSessionStatus,
@@ -42,7 +42,7 @@ export default class PaymentSession {
     columnType: "timestamptz",
     nullable: true,
   })
-  authorized_at?: Date | null
+  authorized_at: Date | null = null
 
   @ManyToOne({
     index: "IDX_payment_session_payment_collection_id",
diff --git a/packages/payment/src/models/payment.ts b/packages/payment/src/models/payment.ts
index 15b6e5185a..4647be64ac 100644
--- a/packages/payment/src/models/payment.ts
+++ b/packages/payment/src/models/payment.ts
@@ -45,7 +45,7 @@ export default class Payment {
     nullable: true,
     serializer: optionalNumericSerializer,
   })
-  authorized_amount?: number | null
+  authorized_amount: number | null = null
 
   @Property({ columnType: "text" })
   currency_code: string
@@ -54,19 +54,19 @@ export default class Payment {
   provider_id: string
 
   @Property({ columnType: "text", nullable: true })
-  cart_id?: string | null
+  cart_id: string | null = null
 
   @Property({ columnType: "text", nullable: true })
-  order_id?: string | null
+  order_id: string | null = null
 
   @Property({ columnType: "text", nullable: true })
-  order_edit_id?: string | null
+  order_edit_id: string | null = null
 
   @Property({ columnType: "text", nullable: true })
-  customer_id?: string | null
+  customer_id: string | null = null
 
   @Property({ columnType: "jsonb", nullable: true })
-  data?: Record<string, unknown> | null
+  data: Record<string, unknown> | null = null
 
   @Property({
     onCreate: () => new Date(),
@@ -88,19 +88,19 @@ export default class Payment {
     nullable: true,
     index: "IDX_payment_deleted_at",
   })
-  deleted_at?: Date | null
+  deleted_at: Date | null = null
 
   @Property({
     columnType: "timestamptz",
     nullable: true,
   })
-  captured_at?: Date | null
+  captured_at: Date | null = null
 
   @Property({
     columnType: "timestamptz",
     nullable: true,
   })
-  canceled_at?: Date | null
+  canceled_at: Date | null = null
 
   @OneToMany(() => Refund, (refund) => refund.payment, {
     cascade: [Cascade.REMOVE],
diff --git a/packages/payment/src/models/refund.ts b/packages/payment/src/models/refund.ts
index ca071ac514..4f99da250f 100644
--- a/packages/payment/src/models/refund.ts
+++ b/packages/payment/src/models/refund.ts
@@ -36,7 +36,7 @@ export default class Refund {
   created_at: Date
 
   @Property({ columnType: "text", nullable: true })
-  created_by?: string | null
+  created_by: string | null = null
 
   @BeforeCreate()
   onCreate() {
diff --git a/packages/pricing/src/services/__fixtures__/currency.ts b/packages/pricing/src/services/__fixtures__/currency.ts
index 7a356ebbcf..27315b54df 100644
--- a/packages/pricing/src/services/__fixtures__/currency.ts
+++ b/packages/pricing/src/services/__fixtures__/currency.ts
@@ -1,6 +1,14 @@
+import { Currency } from "@models"
 import { CurrencyService } from "@services"
 import { asClass, asValue, createContainer } from "awilix"
 
+;(Currency as any).meta = {
+  /**
+   * Need to mock the Currency model as well to expose the primary keys when it is different than `id`
+   */
+  primaryKeys: ["code"],
+}
+
 export const nonExistingCurrencyCode = "non-existing-code"
 export const mockContainer = createContainer()
 
diff --git a/packages/pricing/src/services/currency.ts b/packages/pricing/src/services/currency.ts
index 90848f9fbb..4477da7588 100644
--- a/packages/pricing/src/services/currency.ts
+++ b/packages/pricing/src/services/currency.ts
@@ -1,106 +1,23 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { Currency } from "@models"
-import { CurrencyRepository } from "@repositories"
 import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
   currencyRepository: DAL.RepositoryService
 }
 
-export default class CurrencyService<TEntity extends Currency = Currency> {
-  protected readonly currencyRepository_: DAL.RepositoryService
-
+export default class CurrencyService<
+  TEntity extends Currency = Currency
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreateCurrencyDTO
+    update: ServiceTypes.UpdateCurrencyDTO
+  }
+>(Currency)<TEntity> {
   constructor({ currencyRepository }: InjectedDependencies) {
-    this.currencyRepository_ = currencyRepository
-  }
-
-  @InjectManager("currencyRepository_")
-  async retrieve(
-    currencyCode: string,
-    config: FindConfig<ServiceTypes.CurrencyDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<Currency, ServiceTypes.CurrencyDTO>({
-      id: currencyCode,
-      identifierColumn: "code",
-      entityName: Currency.name,
-      repository: this.currencyRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("currencyRepository_")
-  async list(
-    filters: ServiceTypes.FilterableCurrencyProps = {},
-    config: FindConfig<ServiceTypes.CurrencyDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await this.currencyRepository_.find(
-      this.buildQueryForList(filters, config),
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("currencyRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterableCurrencyProps = {},
-    config: FindConfig<ServiceTypes.CurrencyDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    return (await this.currencyRepository_.findAndCount(
-      this.buildQueryForList(filters, config),
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  private buildQueryForList(
-    filters: ServiceTypes.FilterableCurrencyProps = {},
-    config: FindConfig<ServiceTypes.CurrencyDTO> = {}
-  ) {
-    const queryOptions = ModulesSdkUtils.buildQuery<Currency>(filters, config)
-
-    if (filters.code) {
-      queryOptions.where["code"] = { $in: filters.code }
-    }
-
-    return queryOptions
-  }
-
-  @InjectTransactionManager("currencyRepository_")
-  async create(
-    data: ServiceTypes.CreateCurrencyDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.currencyRepository_ as CurrencyRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("currencyRepository_")
-  async update(
-    data: ServiceTypes.UpdateCurrencyDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.currencyRepository_ as CurrencyRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("currencyRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.currencyRepository_.delete(ids, sharedContext)
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/pricing/src/services/money-amount.ts b/packages/pricing/src/services/money-amount.ts
index 640eacd1f7..b73422969e 100644
--- a/packages/pricing/src/services/money-amount.ts
+++ b/packages/pricing/src/services/money-amount.ts
@@ -1,13 +1,6 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { MoneyAmount } from "@models"
-import { MoneyAmountRepository } from "@repositories"
 import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
@@ -16,105 +9,19 @@ type InjectedDependencies = {
 
 export default class MoneyAmountService<
   TEntity extends MoneyAmount = MoneyAmount
-> {
-  protected readonly moneyAmountRepository_: DAL.RepositoryService
-
-  constructor({ moneyAmountRepository }: InjectedDependencies) {
-    this.moneyAmountRepository_ = moneyAmountRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreateMoneyAmountDTO
+    update: ServiceTypes.UpdateMoneyAmountDTO
+  },
+  {
+    list: ServiceTypes.FilterableMoneyAmountProps
+    listAndCount: ServiceTypes.FilterableMoneyAmountProps
   }
-
-  @InjectManager("moneyAmountRepository_")
-  async retrieve(
-    moneyAmountId: string,
-    config: FindConfig<ServiceTypes.MoneyAmountDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<MoneyAmount, ServiceTypes.MoneyAmountDTO>({
-      id: moneyAmountId,
-      entityName: MoneyAmount.name,
-      repository: this.moneyAmountRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("moneyAmountRepository_")
-  async list(
-    filters: ServiceTypes.FilterableMoneyAmountProps = {},
-    config: FindConfig<ServiceTypes.MoneyAmountDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<MoneyAmount>(
-      filters,
-      config
-    )
-
-    return (await this.moneyAmountRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("moneyAmountRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterableMoneyAmountProps = {},
-    config: FindConfig<ServiceTypes.MoneyAmountDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<MoneyAmount>(
-      filters,
-      config
-    )
-
-    return (await this.moneyAmountRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("moneyAmountRepository_")
-  async create(
-    data: ServiceTypes.CreateMoneyAmountDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.moneyAmountRepository_ as MoneyAmountRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("moneyAmountRepository_")
-  async update(
-    data: ServiceTypes.UpdateMoneyAmountDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.moneyAmountRepository_ as MoneyAmountRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("moneyAmountRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.moneyAmountRepository_.delete(ids, sharedContext)
-  }
-
-  @InjectTransactionManager("moneyAmountRepository_")
-  async softDelete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.moneyAmountRepository_.softDelete(ids, sharedContext)
-  }
-
-  @InjectTransactionManager("moneyAmountRepository_")
-  async restore(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], Record<string, unknown[]>]> {
-    return await this.moneyAmountRepository_.restore(ids, sharedContext)
+>(MoneyAmount)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/pricing/src/services/price-list-rule-value.ts b/packages/pricing/src/services/price-list-rule-value.ts
index 52e5370391..d7ee43653a 100644
--- a/packages/pricing/src/services/price-list-rule-value.ts
+++ b/packages/pricing/src/services/price-list-rule-value.ts
@@ -1,15 +1,6 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  doNotForceTransaction,
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-  shouldForceTransaction,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { PriceListRuleValue } from "@models"
-import { PriceListRuleValueRepository } from "@repositories"
 import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
@@ -18,99 +9,19 @@ type InjectedDependencies = {
 
 export default class PriceListRuleValueService<
   TEntity extends PriceListRuleValue = PriceListRuleValue
-> {
-  protected readonly priceListRuleValueRepository_: DAL.RepositoryService
-
-  constructor({ priceListRuleValueRepository }: InjectedDependencies) {
-    this.priceListRuleValueRepository_ = priceListRuleValueRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreatePriceListRuleValueDTO
+    update: ServiceTypes.UpdatePriceListRuleValueDTO
+  },
+  {
+    list: ServiceTypes.FilterablePriceListRuleValueProps
+    listAndCount: ServiceTypes.FilterablePriceListRuleValueProps
   }
-
-  @InjectManager("priceListRuleValueRepository_")
-  async retrieve(
-    priceSetId: string,
-    config: FindConfig<ServiceTypes.PriceListRuleValueDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      PriceListRuleValue,
-      ServiceTypes.PriceListRuleValueDTO
-    >({
-      id: priceSetId,
-      entityName: PriceListRuleValue.name,
-      repository: this.priceListRuleValueRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("priceListRuleValueRepository_")
-  async list(
-    filters: ServiceTypes.FilterablePriceListRuleValueProps = {},
-    config: FindConfig<ServiceTypes.PriceListRuleValueDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceListRuleValue>(
-      filters,
-      config
-    )
-
-    return (await this.priceListRuleValueRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("priceListRuleValueRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterablePriceListRuleValueProps = {},
-    config: FindConfig<ServiceTypes.PriceListRuleValueDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceListRuleValue>(
-      filters,
-      config
-    )
-
-    return (await this.priceListRuleValueRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager(
-    shouldForceTransaction,
-    "priceListRuleValueRepository_"
-  )
-  async create(
-    data: ServiceTypes.CreatePriceListRuleValueDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.priceListRuleValueRepository_ as PriceListRuleValueRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager(
-    shouldForceTransaction,
-    "priceListRuleValueRepository_"
-  )
-  async update(
-    data: ServiceTypes.UpdatePriceListRuleValueDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.priceListRuleValueRepository_ as PriceListRuleValueRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager(
-    doNotForceTransaction,
-    "priceListRuleValueRepository_"
-  )
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.priceListRuleValueRepository_.delete(ids, sharedContext)
+>(PriceListRuleValue)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/pricing/src/services/price-list-rule.ts b/packages/pricing/src/services/price-list-rule.ts
index 474edb789b..c1f1fc0366 100644
--- a/packages/pricing/src/services/price-list-rule.ts
+++ b/packages/pricing/src/services/price-list-rule.ts
@@ -1,15 +1,6 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  doNotForceTransaction,
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-  shouldForceTransaction,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { PriceListRule } from "@models"
-import { PriceListRuleRepository } from "@repositories"
 import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
@@ -18,87 +9,19 @@ type InjectedDependencies = {
 
 export default class PriceListRuleService<
   TEntity extends PriceListRule = PriceListRule
-> {
-  protected readonly priceListRuleRepository_: DAL.RepositoryService
-
-  constructor({ priceListRuleRepository }: InjectedDependencies) {
-    this.priceListRuleRepository_ = priceListRuleRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreatePriceListRuleDTO
+    update: ServiceTypes.UpdatePriceListRuleDTO
+  },
+  {
+    list: ServiceTypes.FilterablePriceListRuleProps
+    listAndCount: ServiceTypes.FilterablePriceListRuleProps
   }
-
-  @InjectManager("priceListRuleRepository_")
-  async retrieve(
-    priceSetId: string,
-    config: FindConfig<ServiceTypes.PriceListRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<PriceListRule, ServiceTypes.PriceListRuleDTO>({
-      id: priceSetId,
-      entityName: PriceListRule.name,
-      repository: this.priceListRuleRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("priceListRuleRepository_")
-  async list(
-    filters: ServiceTypes.FilterablePriceListRuleProps = {},
-    config: FindConfig<ServiceTypes.PriceListRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceListRule>(
-      filters,
-      config
-    )
-
-    return (await this.priceListRuleRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("priceListRuleRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterablePriceListRuleProps = {},
-    config: FindConfig<ServiceTypes.PriceListRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceListRule>(
-      filters,
-      config
-    )
-
-    return (await this.priceListRuleRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager(shouldForceTransaction, "priceListRuleRepository_")
-  async create(
-    data: ServiceTypes.CreatePriceListRuleDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.priceListRuleRepository_ as PriceListRuleRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager(shouldForceTransaction, "priceListRuleRepository_")
-  async update(
-    data: ServiceTypes.UpdatePriceListRuleDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.priceListRuleRepository_ as PriceListRuleRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager(doNotForceTransaction, "priceListRuleRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.priceListRuleRepository_.delete(ids, sharedContext)
+>(PriceListRule)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/pricing/src/services/price-list.ts b/packages/pricing/src/services/price-list.ts
index 11a1b0bfa4..e4fccad003 100644
--- a/packages/pricing/src/services/price-list.ts
+++ b/packages/pricing/src/services/price-list.ts
@@ -1,98 +1,27 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  doNotForceTransaction,
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-  shouldForceTransaction,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { PriceList } from "@models"
-import { PriceListRepository } from "@repositories"
 import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
   priceListRepository: DAL.RepositoryService
 }
 
-export default class PriceListService<TEntity extends PriceList = PriceList> {
-  protected readonly priceListRepository_: DAL.RepositoryService
-
-  constructor({ priceListRepository }: InjectedDependencies) {
-    this.priceListRepository_ = priceListRepository
+export default class PriceListService<
+  TEntity extends PriceList = PriceList
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreatePriceListDTO
+    update: ServiceTypes.UpdatePriceListDTO
+  },
+  {
+    list: ServiceTypes.FilterablePriceListProps
+    listAndCount: ServiceTypes.FilterablePriceListProps
   }
-
-  @InjectManager("priceListRepository_")
-  async retrieve(
-    priceListId: string,
-    config: FindConfig<ServiceTypes.PriceListDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<PriceList, ServiceTypes.PriceListDTO>({
-      id: priceListId,
-      entityName: PriceList.name,
-      repository: this.priceListRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("priceListRepository_")
-  async list(
-    filters: ServiceTypes.FilterablePriceListProps = {},
-    config: FindConfig<ServiceTypes.PriceListDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceList>(filters, config)
-
-    return (await this.priceListRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("priceListRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterablePriceListProps = {},
-    config: FindConfig<ServiceTypes.PriceListDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceList>(filters, config)
-
-    return (await this.priceListRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager(shouldForceTransaction, "priceListRepository_")
-  async create(
-    data: ServiceTypes.CreatePriceListDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.priceListRepository_ as PriceListRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager(shouldForceTransaction, "priceListRepository_")
-  async update(
-    data: Omit<ServiceTypes.UpdatePriceListDTO, "rules">[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.priceListRepository_ as PriceListRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager(doNotForceTransaction, "priceListRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.priceListRepository_.delete(ids, sharedContext)
+>(PriceList)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/pricing/src/services/price-rule.ts b/packages/pricing/src/services/price-rule.ts
index 0c7bb29787..eb9ab85730 100644
--- a/packages/pricing/src/services/price-rule.ts
+++ b/packages/pricing/src/services/price-rule.ts
@@ -1,13 +1,6 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { PriceRule } from "@models"
-import { PriceRuleRepository } from "@repositories"
 
 import { ServiceTypes } from "@types"
 
@@ -15,83 +8,21 @@ type InjectedDependencies = {
   priceRuleRepository: DAL.RepositoryService
 }
 
-export default class PriceRuleService<TEntity extends PriceRule = PriceRule> {
-  protected readonly priceRuleRepository_: DAL.RepositoryService
-
-  constructor({ priceRuleRepository }: InjectedDependencies) {
-    this.priceRuleRepository_ = priceRuleRepository
+export default class PriceRuleService<
+  TEntity extends PriceRule = PriceRule
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreatePriceRuleDTO
+    update: ServiceTypes.UpdatePriceRuleDTO
+  },
+  {
+    list: ServiceTypes.FilterablePriceRuleProps
+    listAndCount: ServiceTypes.FilterablePriceRuleProps
   }
-
-  @InjectManager("priceRuleRepository_")
-  async retrieve(
-    priceRuleId: string,
-    config: FindConfig<ServiceTypes.PriceRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<PriceRule, ServiceTypes.PriceRuleDTO>({
-      id: priceRuleId,
-      entityName: PriceRule.name,
-      repository: this.priceRuleRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("priceRuleRepository_")
-  async list(
-    filters: ServiceTypes.FilterablePriceRuleProps = {},
-    config: FindConfig<ServiceTypes.PriceRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryConfig = ModulesSdkUtils.buildQuery<PriceRule>(filters, config)
-
-    return (await this.priceRuleRepository_.find(
-      queryConfig,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("priceRuleRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterablePriceRuleProps = {},
-    config: FindConfig<ServiceTypes.PriceRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryConfig = ModulesSdkUtils.buildQuery<PriceRule>(filters, config)
-
-    return (await this.priceRuleRepository_.findAndCount(
-      queryConfig,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("priceRuleRepository_")
-  async create(
-    data: ServiceTypes.CreatePriceRuleDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.priceRuleRepository_ as PriceRuleRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceRuleRepository_")
-  async update(
-    data: ServiceTypes.UpdatePriceRuleDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.priceRuleRepository_ as PriceRuleRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceRuleRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.priceRuleRepository_.delete(ids, sharedContext)
+>(PriceRule)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/pricing/src/services/price-set-money-amount-rules.ts b/packages/pricing/src/services/price-set-money-amount-rules.ts
index c283c5d61c..ec073c342c 100644
--- a/packages/pricing/src/services/price-set-money-amount-rules.ts
+++ b/packages/pricing/src/services/price-set-money-amount-rules.ts
@@ -1,11 +1,5 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { PriceSetMoneyAmountRules } from "@models"
 import { ServiceTypes } from "@types"
 
@@ -15,96 +9,15 @@ type InjectedDependencies = {
 
 export default class PriceSetMoneyAmountRulesService<
   TEntity extends PriceSetMoneyAmountRules = PriceSetMoneyAmountRules
-> {
-  protected readonly priceSetMoneyAmountRulesRepository_: DAL.RepositoryService
-
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreatePriceSetMoneyAmountRulesDTO
+    update: ServiceTypes.UpdatePriceSetMoneyAmountRulesDTO
+  }
+>(PriceSetMoneyAmountRules)<TEntity> {
   constructor({ priceSetMoneyAmountRulesRepository }: InjectedDependencies) {
-    this.priceSetMoneyAmountRulesRepository_ =
-      priceSetMoneyAmountRulesRepository
-  }
-
-  @InjectManager("priceSetMoneyAmountRulesRepository_")
-  async retrieve(
-    priceSetMoneyAmountRulesId: string,
-    config: FindConfig<ServiceTypes.PriceSetMoneyAmountRulesDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      PriceSetMoneyAmountRules,
-      ServiceTypes.PriceSetMoneyAmountRulesDTO
-    >({
-      id: priceSetMoneyAmountRulesId,
-      identifierColumn: "id",
-      entityName: PriceSetMoneyAmountRules.name,
-      repository: this.priceSetMoneyAmountRulesRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("priceSetMoneyAmountRulesRepository_")
-  async list(
-    filters: ServiceTypes.FilterablePriceSetMoneyAmountRulesProps = {},
-    config: FindConfig<ServiceTypes.PriceSetMoneyAmountRulesDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await this.priceSetMoneyAmountRulesRepository_.find(
-      this.buildQueryForList(filters, config),
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("priceSetMoneyAmountRulesRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterablePriceSetMoneyAmountRulesProps = {},
-    config: FindConfig<ServiceTypes.PriceSetMoneyAmountRulesDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    return (await this.priceSetMoneyAmountRulesRepository_.findAndCount(
-      this.buildQueryForList(filters, config),
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  private buildQueryForList(
-    filters: ServiceTypes.FilterablePriceSetMoneyAmountRulesProps = {},
-    config: FindConfig<ServiceTypes.PriceSetMoneyAmountRulesDTO> = {}
-  ) {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceSetMoneyAmountRules>(
-      filters,
-      config
-    )
-
-    return queryOptions
-  }
-
-  @InjectTransactionManager("priceSetMoneyAmountRulesRepository_")
-  async create(
-    data: ServiceTypes.CreatePriceSetMoneyAmountRulesDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await this.priceSetMoneyAmountRulesRepository_.create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceSetMoneyAmountRulesRepository_")
-  async update(
-    data: ServiceTypes.UpdatePriceSetMoneyAmountRulesDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await this.priceSetMoneyAmountRulesRepository_.update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceSetMoneyAmountRulesRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.priceSetMoneyAmountRulesRepository_.delete(ids, sharedContext)
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/pricing/src/services/price-set-money-amount.ts b/packages/pricing/src/services/price-set-money-amount.ts
index ff21ef8a22..569cfb5eee 100644
--- a/packages/pricing/src/services/price-set-money-amount.ts
+++ b/packages/pricing/src/services/price-set-money-amount.ts
@@ -1,13 +1,6 @@
 import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
-import { PriceSet, PriceSetMoneyAmount } from "@models"
-import { PriceSetMoneyAmountRepository } from "@repositories"
+import { InjectManager, MedusaContext, ModulesSdkUtils } from "@medusajs/utils"
+import { PriceSetMoneyAmount } from "@models"
 import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
@@ -16,95 +9,51 @@ type InjectedDependencies = {
 
 export default class PriceSetMoneyAmountService<
   TEntity extends PriceSetMoneyAmount = PriceSetMoneyAmount
-> {
-  protected readonly priceSetMoneyAmountRepository_: DAL.RepositoryService
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreatePriceSetMoneyAmountDTO
+    update: ServiceTypes.UpdatePriceSetMoneyAmountDTO
+  }
+>(PriceSetMoneyAmount)<TEntity> {
+  protected readonly priceSetMoneyAmountRepository_: DAL.RepositoryService<TEntity>
 
   constructor({ priceSetMoneyAmountRepository }: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
     this.priceSetMoneyAmountRepository_ = priceSetMoneyAmountRepository
   }
 
   @InjectManager("priceSetMoneyAmountRepository_")
-  async retrieve(
-    priceSetId: string,
-    config: FindConfig<ServiceTypes.PriceSetMoneyAmountDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      PriceSetMoneyAmount,
-      ServiceTypes.PriceSetMoneyAmountDTO
-    >({
-      id: priceSetId,
-      entityName: PriceSet.name,
-      repository: this.priceSetMoneyAmountRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("priceSetMoneyAmountRepository_")
-  async list(
+  async list<TEntityMethod = ServiceTypes.PriceSetMoneyAmountDTO>(
     filters: ServiceTypes.FilterablePriceSetMoneyAmountProps = {},
-    config: FindConfig<ServiceTypes.PriceSetMoneyAmountDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await this.priceSetMoneyAmountRepository_.find(
+    return await this.priceSetMoneyAmountRepository_.find(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as TEntity[]
+    )
   }
 
   @InjectManager("priceSetMoneyAmountRepository_")
-  async listAndCount(
+  async listAndCount<TEntityMethod = ServiceTypes.PriceSetMoneyAmountDTO>(
     filters: ServiceTypes.FilterablePriceSetMoneyAmountProps = {},
-    config: FindConfig<ServiceTypes.PriceSetMoneyAmountDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<[TEntity[], number]> {
-    return (await this.priceSetMoneyAmountRepository_.findAndCount(
+    return await this.priceSetMoneyAmountRepository_.findAndCount(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as [TEntity[], number]
+    )
   }
 
-  private buildQueryForList(
+  private buildQueryForList<
+    TEntityMethod = ServiceTypes.PriceSetMoneyAmountDTO
+  >(
     filters: ServiceTypes.FilterablePriceSetMoneyAmountProps = {},
-    config: FindConfig<ServiceTypes.PriceSetMoneyAmountDTO> = {}
+    config: FindConfig<TEntityMethod> = {}
   ) {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceSet>(filters, config)
-
-    if (filters.id) {
-      queryOptions.where.id = { $in: filters.id }
-    }
-
-    return queryOptions
-  }
-
-  @InjectTransactionManager("priceSetMoneyAmountRepository_")
-  async create(
-    data: ServiceTypes.CreatePriceSetMoneyAmountDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this
-        .priceSetMoneyAmountRepository_ as unknown as PriceSetMoneyAmountRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceSetMoneyAmountRepository_")
-  async update(
-    data: ServiceTypes.UpdatePriceSetMoneyAmountDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this
-        .priceSetMoneyAmountRepository_ as unknown as PriceSetMoneyAmountRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceSetMoneyAmountRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.priceSetMoneyAmountRepository_.delete(ids, sharedContext)
+    return ModulesSdkUtils.buildQuery<TEntity>(filters, config)
   }
 }
diff --git a/packages/pricing/src/services/price-set-rule-type.ts b/packages/pricing/src/services/price-set-rule-type.ts
index 08fcb568c8..27fa9e4b25 100644
--- a/packages/pricing/src/services/price-set-rule-type.ts
+++ b/packages/pricing/src/services/price-set-rule-type.ts
@@ -1,13 +1,6 @@
 import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
-import { PriceSet, PriceSetRuleType } from "@models"
-import { PriceSetRuleTypeRepository } from "src/repositories/price-set-rule-type"
+import { InjectManager, MedusaContext, ModulesSdkUtils } from "@medusajs/utils"
+import { PriceSetRuleType } from "@models"
 import { ServiceTypes } from "@types"
 
 type InjectedDependencies = {
@@ -16,93 +9,51 @@ type InjectedDependencies = {
 
 export default class PriceSetRuleTypeService<
   TEntity extends PriceSetRuleType = PriceSetRuleType
-> {
-  protected readonly priceSetRuleTypeRepository_: DAL.RepositoryService
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreatePriceSetRuleTypeDTO
+    update: ServiceTypes.UpdatePriceSetRuleTypeDTO
+  }
+>(PriceSetRuleType)<TEntity> {
+  protected readonly priceSetRuleTypeRepository_: DAL.RepositoryService<TEntity>
 
   constructor({ priceSetRuleTypeRepository }: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
     this.priceSetRuleTypeRepository_ = priceSetRuleTypeRepository
   }
 
   @InjectManager("priceSetRuleTypeRepository_")
-  async retrieve(
-    priceSetId: string,
-    config: FindConfig<ServiceTypes.PriceSetRuleTypeDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      PriceSetRuleType,
-      ServiceTypes.PriceSetRuleTypeDTO
-    >({
-      id: priceSetId,
-      entityName: PriceSet.name,
-      repository: this.priceSetRuleTypeRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("priceSetRuleTypeRepository_")
-  async list(
+  async list<TEntityMethod = ServiceTypes.PriceSetMoneyAmountDTO>(
     filters: ServiceTypes.FilterablePriceSetRuleTypeProps = {},
-    config: FindConfig<ServiceTypes.PriceSetDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await this.priceSetRuleTypeRepository_.find(
+    return await this.priceSetRuleTypeRepository_.find(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as TEntity[]
+    )
   }
 
   @InjectManager("priceSetRuleTypeRepository_")
-  async listAndCount(
+  async listAndCount<TEntityMethod = ServiceTypes.PriceSetMoneyAmountDTO>(
     filters: ServiceTypes.FilterablePriceSetRuleTypeProps = {},
-    config: FindConfig<ServiceTypes.PriceSetDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<[TEntity[], number]> {
-    return (await this.priceSetRuleTypeRepository_.findAndCount(
+    return await this.priceSetRuleTypeRepository_.findAndCount(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as [TEntity[], number]
+    )
   }
 
-  private buildQueryForList(
+  private buildQueryForList<
+    TEntityMethod = ServiceTypes.PriceSetMoneyAmountDTO
+  >(
     filters: ServiceTypes.FilterablePriceSetRuleTypeProps = {},
-    config: FindConfig<ServiceTypes.PriceSetDTO> = {}
+    config: FindConfig<TEntityMethod> = {}
   ) {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceSet>(filters, config)
-
-    if (filters.id) {
-      queryOptions.where.id = { $in: filters.id }
-    }
-
-    return queryOptions
-  }
-
-  @InjectTransactionManager("priceSetRuleTypeRepository_")
-  async create(
-    data: ServiceTypes.CreatePriceSetRuleTypeDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.priceSetRuleTypeRepository_ as PriceSetRuleTypeRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceSetRuleTypeRepository_")
-  async update(
-    data: ServiceTypes.UpdatePriceSetRuleTypeDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.priceSetRuleTypeRepository_ as PriceSetRuleTypeRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceSetRuleTypeRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.priceSetRuleTypeRepository_.delete(ids, sharedContext)
+    return ModulesSdkUtils.buildQuery<TEntity>(filters, config)
   }
 }
diff --git a/packages/pricing/src/services/price-set.ts b/packages/pricing/src/services/price-set.ts
index ba7ad6080a..c850f045d7 100644
--- a/packages/pricing/src/services/price-set.ts
+++ b/packages/pricing/src/services/price-set.ts
@@ -1,13 +1,6 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { PriceSet } from "@models"
-import { PriceSetRepository } from "@repositories"
 
 import { ServiceTypes } from "@types"
 
@@ -15,83 +8,21 @@ type InjectedDependencies = {
   priceSetRepository: DAL.RepositoryService
 }
 
-export default class PriceSetService<TEntity extends PriceSet = PriceSet> {
-  protected readonly priceSetRepository_: DAL.RepositoryService
-
-  constructor({ priceSetRepository }: InjectedDependencies) {
-    this.priceSetRepository_ = priceSetRepository
+export default class PriceSetService<
+  TEntity extends PriceSet = PriceSet
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: Omit<ServiceTypes.CreatePriceSetDTO, "rules">
+    update: Omit<ServiceTypes.UpdatePriceSetDTO, "rules">
+  },
+  {
+    list: ServiceTypes.FilterablePriceSetProps
+    listAndCount: ServiceTypes.FilterablePriceSetProps
   }
-
-  @InjectManager("priceSetRepository_")
-  async retrieve(
-    priceSetId: string,
-    config: FindConfig<ServiceTypes.PriceSetDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<PriceSet, ServiceTypes.PriceSetDTO>({
-      id: priceSetId,
-      entityName: PriceSet.name,
-      repository: this.priceSetRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("priceSetRepository_")
-  async list(
-    filters: ServiceTypes.FilterablePriceSetProps = {},
-    config: FindConfig<ServiceTypes.PriceSetDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceSet>(filters, config)
-
-    return (await this.priceSetRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("priceSetRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterablePriceSetProps = {},
-    config: FindConfig<ServiceTypes.PriceSetDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PriceSet>(filters, config)
-
-    return (await this.priceSetRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("priceSetRepository_")
-  async create(
-    data: Omit<ServiceTypes.CreatePriceSetDTO, "rules">[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.priceSetRepository_ as PriceSetRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceSetRepository_")
-  async update(
-    data: Omit<ServiceTypes.UpdatePriceSetDTO, "rules">[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.priceSetRepository_ as PriceSetRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("priceSetRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.priceSetRepository_.delete(ids, sharedContext)
+>(PriceSet)<TEntity> {
+  constructor(container: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/pricing/src/services/rule-type.ts b/packages/pricing/src/services/rule-type.ts
index 6d1fbe674a..9bd78752c0 100644
--- a/packages/pricing/src/services/rule-type.ts
+++ b/packages/pricing/src/services/rule-type.ts
@@ -1,10 +1,8 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
+import { Context, DAL } from "@medusajs/types"
 import {
-  InjectManager,
   InjectTransactionManager,
   MedusaContext,
   ModulesSdkUtils,
-  retrieveEntity,
   validateRuleAttributes,
 } from "@medusajs/utils"
 import { RuleType } from "@models"
@@ -14,67 +12,34 @@ type InjectedDependencies = {
   ruleTypeRepository: DAL.RepositoryService
 }
 
-export default class RuleTypeService<TEntity extends RuleType = RuleType> {
-  protected readonly ruleTypeRepository_: DAL.RepositoryService
+export default class RuleTypeService<
+  TEntity extends RuleType = RuleType
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ServiceTypes.CreateRuleTypeDTO
+    update: ServiceTypes.UpdateRuleTypeDTO
+  },
+  {
+    list: ServiceTypes.FilterableRuleTypeProps
+    listAndCount: ServiceTypes.FilterableRuleTypeProps
+  }
+>(RuleType)<TEntity> {
+  protected readonly ruleTypeRepository_: DAL.RepositoryService<TEntity>
 
   constructor({ ruleTypeRepository }: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
     this.ruleTypeRepository_ = ruleTypeRepository
   }
 
-  @InjectManager("ruleTypeRepository_")
-  async retrieve(
-    ruleTypeId: string,
-    config: FindConfig<ServiceTypes.RuleTypeDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<RuleType, ServiceTypes.RuleTypeDTO>({
-      id: ruleTypeId,
-      identifierColumn: "id",
-      entityName: RuleType.name,
-      repository: this.ruleTypeRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("ruleTypeRepository_")
-  async list(
-    filters: ServiceTypes.FilterableRuleTypeProps = {},
-    config: FindConfig<ServiceTypes.RuleTypeDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<RuleType>(filters, config)
-
-    return (await this.ruleTypeRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("ruleTypeRepository_")
-  async listAndCount(
-    filters: ServiceTypes.FilterableRuleTypeProps = {},
-    config: FindConfig<ServiceTypes.RuleTypeDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<RuleType>(filters, config)
-
-    return (await this.ruleTypeRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
   @InjectTransactionManager("ruleTypeRepository_")
   async create(
     data: ServiceTypes.CreateRuleTypeDTO[],
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
     validateRuleAttributes(data.map((d) => d.rule_attribute))
-    return (await this.ruleTypeRepository_.create(
-      data,
-      sharedContext
-    )) as TEntity[]
+    return await this.ruleTypeRepository_.create(data, sharedContext)
   }
 
   @InjectTransactionManager("ruleTypeRepository_")
@@ -83,17 +48,6 @@ export default class RuleTypeService<TEntity extends RuleType = RuleType> {
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
     validateRuleAttributes(data.map((d) => d.rule_attribute))
-    return (await this.ruleTypeRepository_.update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("ruleTypeRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.ruleTypeRepository_.delete(ids, sharedContext)
+    return await this.ruleTypeRepository_.update(data, sharedContext)
   }
 }
diff --git a/packages/product/jest.config.js b/packages/product/jest.config.js
index fc8bdef49c..dce2002dae 100644
--- a/packages/product/jest.config.js
+++ b/packages/product/jest.config.js
@@ -3,6 +3,7 @@ module.exports = {
     "^@models": "<rootDir>/src/models",
     "^@services": "<rootDir>/src/services",
     "^@repositories": "<rootDir>/src/repositories",
+    "^@types": "<rootDir>/src/types",
   },
   transform: {
     "^.+\\.[jt]s?$": [
diff --git a/packages/product/src/repositories/product.ts b/packages/product/src/repositories/product.ts
index 833c61e9d5..eb430a06d4 100644
--- a/packages/product/src/repositories/product.ts
+++ b/packages/product/src/repositories/product.ts
@@ -13,17 +13,20 @@ import {
   WithRequiredProperty,
 } from "@medusajs/types"
 import { SqlEntityManager } from "@mikro-orm/postgresql"
-import { DALUtils, isDefined, MedusaError, promiseAll } from "@medusajs/utils"
+import {
+  DALUtils,
+  isDefined,
+  MedusaError,
+  promiseAll,
+  ProductUtils,
+} from "@medusajs/utils"
 
 import { ProductServiceTypes } from "../types/services"
 
 // eslint-disable-next-line max-len
-export class ProductRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
-  Product,
-  {
-    create: WithRequiredProperty<ProductTypes.CreateProductOnlyDTO, "status">
-  }
->(Product) {
+export class ProductRepository extends DALUtils.mikroOrmBaseRepositoryFactory<Product>(
+  Product
+) {
   constructor(...args: any[]) {
     // @ts-ignore
     super(...arguments)
@@ -103,6 +106,17 @@ export class ProductRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
     }
   }
 
+  async create(
+    data: WithRequiredProperty<ProductTypes.CreateProductOnlyDTO, "status">[],
+    context: Context = {}
+  ): Promise<Product[]> {
+    data.forEach((productData) => {
+      productData.status ??= ProductUtils.ProductStatus.DRAFT
+    })
+
+    return await super.create(data, context)
+  }
+
   async update(
     data: WithRequiredProperty<ProductServiceTypes.UpdateProductDTO, "id">[],
     context: Context = {}
diff --git a/packages/product/src/services/product-category.ts b/packages/product/src/services/product-category.ts
index a2ef62a041..a2798cccf6 100644
--- a/packages/product/src/services/product-category.ts
+++ b/packages/product/src/services/product-category.ts
@@ -9,7 +9,7 @@ import {
   MedusaError,
   ModulesSdkUtils,
 } from "@medusajs/utils"
-import { ProductCategoryServiceTypes } from "../types"
+import { ProductCategoryServiceTypes } from "@types"
 
 type InjectedDependencies = {
   productCategoryRepository: DAL.TreeRepositoryService
diff --git a/packages/product/src/services/product-collection.ts b/packages/product/src/services/product-collection.ts
index 08199ab1ae..31e85c8731 100644
--- a/packages/product/src/services/product-collection.ts
+++ b/packages/product/src/services/product-collection.ts
@@ -1,12 +1,5 @@
 import { Context, DAL, FindConfig, ProductTypes } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
-import { ProductCollectionRepository } from "../repositories"
+import { InjectManager, MedusaContext, ModulesSdkUtils } from "@medusajs/utils"
 
 import { ProductCollection } from "@models"
 
@@ -16,98 +9,61 @@ type InjectedDependencies = {
 
 export default class ProductCollectionService<
   TEntity extends ProductCollection = ProductCollection
-> {
-  protected readonly productCollectionRepository_: DAL.RepositoryService
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ProductTypes.CreateProductCollectionDTO
+    update: ProductTypes.UpdateProductCollectionDTO
+  }
+>(ProductCollection)<TEntity> {
+  // eslint-disable-next-line max-len
+  protected readonly productCollectionRepository_: DAL.RepositoryService<TEntity>
 
-  constructor({ productCollectionRepository }: InjectedDependencies) {
-    this.productCollectionRepository_ = productCollectionRepository
+  constructor(container: InjectedDependencies) {
+    super(container)
+    this.productCollectionRepository_ = container.productCollectionRepository
   }
 
   @InjectManager("productCollectionRepository_")
-  async retrieve(
-    productCollectionId: string,
-    config: FindConfig<ProductTypes.ProductCollectionDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      ProductCollection,
-      ProductTypes.ProductCollectionDTO
-    >({
-      id: productCollectionId,
-      entityName: ProductCollection.name,
-      repository: this.productCollectionRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("productCollectionRepository_")
-  async list(
+  async list<TEntityMethod = ProductTypes.ProductCollectionDTO>(
     filters: ProductTypes.FilterableProductCollectionProps = {},
-    config: FindConfig<ProductTypes.ProductCollectionDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await this.productCollectionRepository_.find(
+    return await this.productCollectionRepository_.find(
       this.buildListQueryOptions(filters, config),
       sharedContext
-    )) as TEntity[]
+    )
   }
 
   @InjectManager("productCollectionRepository_")
-  async listAndCount(
+  async listAndCount<TEntityMethod = ProductTypes.ProductCollectionDTO>(
     filters: ProductTypes.FilterableProductCollectionProps = {},
-    config: FindConfig<ProductTypes.ProductCollectionDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<[TEntity[], number]> {
-    return (await this.productCollectionRepository_.findAndCount(
+    return await this.productCollectionRepository_.findAndCount(
       this.buildListQueryOptions(filters, config),
       sharedContext
-    )) as [TEntity[], number]
+    )
   }
 
-  protected buildListQueryOptions(
+  protected buildListQueryOptions<
+    TEntityMethod = ProductTypes.ProductCollectionDTO
+  >(
     filters: ProductTypes.FilterableProductCollectionProps = {},
-    config: FindConfig<ProductTypes.ProductCollectionDTO> = {}
-  ) {
-    const queryOptions = ModulesSdkUtils.buildQuery<ProductCollection>(
-      filters,
-      config
-    )
+    config: FindConfig<TEntityMethod> = {}
+  ): DAL.FindOptions<TEntity> {
+    const queryOptions = ModulesSdkUtils.buildQuery<TEntity>(filters, config)
 
     queryOptions.where ??= {}
 
     if (filters.title) {
-      queryOptions.where["title"] = { $like: filters.title }
+      queryOptions.where.title = {
+        $like: `%${filters.title}%`,
+      } as DAL.FindOptions<TEntity>["where"]["title"]
     }
 
     return queryOptions
   }
-
-  @InjectTransactionManager("productCollectionRepository_")
-  async create(
-    data: ProductTypes.CreateProductCollectionDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.productCollectionRepository_ as ProductCollectionRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("productCollectionRepository_")
-  async update(
-    data: ProductTypes.UpdateProductCollectionDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.productCollectionRepository_ as ProductCollectionRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("productCollectionRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.productCollectionRepository_.delete(ids, sharedContext)
-  }
 }
diff --git a/packages/product/src/services/product-image.ts b/packages/product/src/services/product-image.ts
index 134ba87a7d..d6c6a62368 100644
--- a/packages/product/src/services/product-image.ts
+++ b/packages/product/src/services/product-image.ts
@@ -1,7 +1,6 @@
 import { Image } from "@models"
 import { Context, DAL } from "@medusajs/types"
 import { InjectTransactionManager, MedusaContext } from "@medusajs/utils"
-import { ProductImageRepository } from "@repositories"
 
 type InjectedDependencies = {
   productImageRepository: DAL.RepositoryService
@@ -19,7 +18,6 @@ export default class ProductImageService<TEntity extends Image = Image> {
     urls: string[],
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await (this.productImageRepository_ as ProductImageRepository)
-      .upsert!(urls, sharedContext)) as TEntity[]
+    return await this.productImageRepository_.upsert!(urls, sharedContext)
   }
 }
diff --git a/packages/product/src/services/product-module-service.ts b/packages/product/src/services/product-module-service.ts
index c67a27bbbf..76f55e6194 100644
--- a/packages/product/src/services/product-module-service.ts
+++ b/packages/product/src/services/product-module-service.ts
@@ -35,24 +35,11 @@ import {
 import ProductImageService from "./product-image"
 
 import {
-  CreateProductCategoryDTO,
-  ProductCategoryEventData,
-  ProductCategoryEvents,
-  UpdateProductCategoryDTO,
-} from "../types/services/product-category"
-
-import { UpdateProductVariantDTO } from "../types/services/product-variant"
-
-import {
-  ProductCollectionEventData,
-  ProductCollectionEvents,
-} from "../types/services/product-collection"
-
-import {
-  ProductEventData,
-  ProductEvents,
-  UpdateProductDTO,
-} from "../types/services/product"
+  ProductCategoryServiceTypes,
+  ProductCollectionServiceTypes,
+  ProductServiceTypes,
+  ProductVariantServiceTypes,
+} from "@types"
 
 import {
   arrayDifference,
@@ -76,6 +63,11 @@ import {
   joinerConfig,
   LinkableKeys,
 } from "./../joiner-config"
+import {
+  ProductCategoryEventData,
+  ProductCategoryEvents,
+} from "../types/services/product-category"
+import { ProductEventData, ProductEvents } from "../types/services/product"
 
 type InjectedDependencies = {
   baseRepository: DAL.RepositoryService
@@ -373,7 +365,7 @@ export default class ProductModuleService<
     const toUpdate = data.map(({ id, options, ...rest }) => {
       const variant = variantsMap.get(id)!
 
-      const toUpdate: UpdateProductVariantDTO = {
+      const toUpdate: ProductVariantServiceTypes.UpdateProductVariantDTO = {
         id,
         product_id: variant.product_id,
       }
@@ -749,9 +741,12 @@ export default class ProductModuleService<
       sharedContext
     )
 
-    await this.eventBusModuleService_?.emit<ProductCollectionEventData>(
+    // eslint-disable-next-line max-len
+    await this.eventBusModuleService_?.emit<ProductCollectionServiceTypes.ProductCollectionEventData>(
       productCollections.map(({ id }) => ({
-        eventName: ProductCollectionEvents.COLLECTION_CREATED,
+        eventName:
+          ProductCollectionServiceTypes.ProductCollectionEvents
+            .COLLECTION_CREATED,
         data: { id },
       }))
     )
@@ -769,9 +764,12 @@ export default class ProductModuleService<
       sharedContext
     )
 
-    await this.eventBusModuleService_?.emit<ProductCollectionEventData>(
+    // eslint-disable-next-line max-len
+    await this.eventBusModuleService_?.emit<ProductCollectionServiceTypes.ProductCollectionEventData>(
       productCollections.map(({ id }) => ({
-        eventName: ProductCollectionEvents.COLLECTION_UPDATED,
+        eventName:
+          ProductCollectionServiceTypes.ProductCollectionEvents
+            .COLLECTION_UPDATED,
         data: { id },
       }))
     )
@@ -789,9 +787,12 @@ export default class ProductModuleService<
       sharedContext
     )
 
-    await this.eventBusModuleService_?.emit<ProductCollectionEventData>(
+    // eslint-disable-next-line max-len
+    await this.eventBusModuleService_?.emit<ProductCollectionServiceTypes.ProductCollectionEventData>(
       productCollectionIds.map((id) => ({
-        eventName: ProductCollectionEvents.COLLECTION_DELETED,
+        eventName:
+          ProductCollectionServiceTypes.ProductCollectionEvents
+            .COLLECTION_DELETED,
         data: { id },
       }))
     )
@@ -829,7 +830,7 @@ export default class ProductModuleService<
 
   @InjectTransactionManager("baseRepository_")
   async createCategory(
-    data: CreateProductCategoryDTO,
+    data: ProductCategoryServiceTypes.CreateProductCategoryDTO,
     @MedusaContext() sharedContext: Context = {}
   ) {
     const productCategory = await this.productCategoryService_.create(
@@ -848,7 +849,7 @@ export default class ProductModuleService<
   @InjectTransactionManager("baseRepository_")
   async updateCategory(
     categoryId: string,
-    data: UpdateProductCategoryDTO,
+    data: ProductCategoryServiceTypes.UpdateProductCategoryDTO,
     @MedusaContext() sharedContext: Context = {}
   ) {
     const productCategory = await this.productCategoryService_.update(
@@ -1124,7 +1125,7 @@ export default class ProductModuleService<
           (productData.options ?? []) as TProductOption[]
         )
 
-        return productData as UpdateProductDTO
+        return productData as ProductServiceTypes.UpdateProductDTO
       })
     )
 
@@ -1203,10 +1204,13 @@ export default class ProductModuleService<
     })
 
     productVariantsToUpdateMap.forEach((variants, productId) => {
+      const variants_ =
+        // eslint-disable-next-line max-len
+        variants as unknown as ProductVariantServiceTypes.UpdateProductVariantDTO[]
       promises.push(
         this.productVariantService_.update(
           productByIdMap.get(productId)!,
-          variants as unknown as UpdateProductVariantDTO[],
+          variants_,
           sharedContext
         )
       )
diff --git a/packages/product/src/services/product-option-value.ts b/packages/product/src/services/product-option-value.ts
index f72a9fb533..b66069c87a 100644
--- a/packages/product/src/services/product-option-value.ts
+++ b/packages/product/src/services/product-option-value.ts
@@ -1,14 +1,7 @@
 import { ProductOptionValue } from "@models"
 import { Context, DAL } from "@medusajs/types"
-import {
-  ProductOptionRepository,
-  ProductOptionValueRepository,
-} from "@repositories"
 import { InjectTransactionManager, MedusaContext } from "@medusajs/utils"
-import {
-  CreateProductOptionValueDTO,
-  UpdateProductOptionValueDTO,
-} from "../types/services/product-option-value"
+import { ProductOptionValueServiceTypes } from "@types"
 
 type InjectedDependencies = {
   productOptionValueRepository: DAL.RepositoryService
@@ -17,11 +10,11 @@ type InjectedDependencies = {
 export default class ProductOptionValueService<
   TEntity extends ProductOptionValue = ProductOptionValue
 > {
-  protected readonly productOptionValueRepository_: DAL.RepositoryService
+  // eslint-disable-next-line max-len
+  protected readonly productOptionValueRepository_: DAL.RepositoryService<TEntity>
 
   constructor({ productOptionValueRepository }: InjectedDependencies) {
-    this.productOptionValueRepository_ =
-      productOptionValueRepository as ProductOptionRepository
+    this.productOptionValueRepository_ = productOptionValueRepository
   }
 
   @InjectTransactionManager("productOptionValueRepository_")
@@ -34,11 +27,12 @@ export default class ProductOptionValueService<
 
   @InjectTransactionManager("productOptionValueRepository_")
   async upsert(
-    data: (UpdateProductOptionValueDTO | CreateProductOptionValueDTO)[],
+    data: (
+      | ProductOptionValueServiceTypes.UpdateProductOptionValueDTO
+      | ProductOptionValueServiceTypes.CreateProductOptionValueDTO
+    )[],
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await (
-      this.productOptionValueRepository_ as ProductOptionValueRepository
-    ).upsert!(data, sharedContext)) as TEntity[]
+    return await this.productOptionValueRepository_.upsert!(data, sharedContext)
   }
 }
diff --git a/packages/product/src/services/product-option.ts b/packages/product/src/services/product-option.ts
index 0a2b391033..c0258996a4 100644
--- a/packages/product/src/services/product-option.ts
+++ b/packages/product/src/services/product-option.ts
@@ -1,12 +1,10 @@
 import { ProductOption } from "@models"
 import { Context, DAL, FindConfig, ProductTypes } from "@medusajs/types"
-import { ProductOptionRepository } from "@repositories"
 import {
   InjectManager,
   InjectTransactionManager,
   MedusaContext,
   ModulesSdkUtils,
-  retrieveEntity,
 } from "@medusajs/utils"
 
 type InjectedDependencies = {
@@ -15,99 +13,59 @@ type InjectedDependencies = {
 
 export default class ProductOptionService<
   TEntity extends ProductOption = ProductOption
-> {
-  protected readonly productOptionRepository_: DAL.RepositoryService
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ProductTypes.CreateProductOptionDTO
+    update: ProductTypes.UpdateProductOptionDTO
+  }
+>(ProductOption)<TEntity> {
+  protected readonly productOptionRepository_: DAL.RepositoryService<TEntity>
 
-  constructor({ productOptionRepository }: InjectedDependencies) {
-    this.productOptionRepository_ =
-      productOptionRepository as ProductOptionRepository
+  constructor(container: InjectedDependencies) {
+    super(container)
+    this.productOptionRepository_ = container.productOptionRepository
   }
 
   @InjectManager("productOptionRepository_")
-  async retrieve(
-    productOptionId: string,
-    config: FindConfig<ProductTypes.ProductOptionDTO> = {},
-    @MedusaContext() sharedContext?: Context
-  ): Promise<TEntity> {
-    return (await retrieveEntity<ProductOption, ProductTypes.ProductOptionDTO>({
-      id: productOptionId,
-      entityName: ProductOption.name,
-      repository: this.productOptionRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("productOptionRepository_")
-  async list(
+  async list<TEntityMethod = ProductTypes.ProductOptionDTO>(
     filters: ProductTypes.FilterableProductOptionProps = {},
-    config: FindConfig<ProductTypes.ProductOptionDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext?: Context
   ): Promise<TEntity[]> {
-    return (await this.productOptionRepository_.find(
+    return await this.productOptionRepository_.find(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as TEntity[]
+    )
   }
 
   @InjectManager("productOptionRepository_")
-  async listAndCount(
+  async listAndCount<TEntityMethod = ProductTypes.ProductOptionDTO>(
     filters: ProductTypes.FilterableProductOptionProps = {},
-    config: FindConfig<ProductTypes.ProductOptionDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext?: Context
   ): Promise<[TEntity[], number]> {
-    return (await this.productOptionRepository_.findAndCount(
+    return await this.productOptionRepository_.findAndCount(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as [TEntity[], number]
+    )
   }
 
-  private buildQueryForList(
+  private buildQueryForList<TEntityMethod = ProductTypes.ProductOptionDTO>(
     filters: ProductTypes.FilterableProductOptionProps = {},
-    config: FindConfig<ProductTypes.ProductOptionDTO> = {}
-  ) {
-    const queryOptions = ModulesSdkUtils.buildQuery<ProductOption>(
-      filters,
-      config
-    )
+    config: FindConfig<TEntityMethod> = {}
+  ): DAL.FindOptions<TEntity> {
+    const queryOptions = ModulesSdkUtils.buildQuery<TEntity>(filters, config)
 
     if (filters.title) {
-      queryOptions.where["title"] = { $ilike: filters.title }
+      queryOptions.where.title = {
+        $ilike: filters.title,
+      } as DAL.FindOptions<TEntity>["where"]["title"]
     }
 
     return queryOptions
   }
 
-  @InjectTransactionManager("productOptionRepository_")
-  async create(
-    data: ProductTypes.CreateProductOptionOnlyDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.productOptionRepository_ as ProductOptionRepository
-    ).create(data, {
-      transactionManager: sharedContext.transactionManager,
-    })) as TEntity[]
-  }
-
-  @InjectTransactionManager("productOptionRepository_")
-  async update(
-    data: ProductTypes.UpdateProductOptionDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.productOptionRepository_ as ProductOptionRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("productOptionRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    return await this.productOptionRepository_.delete(ids, sharedContext)
-  }
-
   @InjectTransactionManager("productOptionRepository_")
   async upsert(
     data:
@@ -115,7 +73,6 @@ export default class ProductOptionService<
       | ProductTypes.UpdateProductOptionDTO[],
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await (this.productOptionRepository_ as ProductOptionRepository)
-      .upsert!(data, sharedContext)) as TEntity[]
+    return await this.productOptionRepository_.upsert!(data, sharedContext)
   }
 }
diff --git a/packages/product/src/services/product-tag.ts b/packages/product/src/services/product-tag.ts
index 90a33aa352..400d92ae7c 100644
--- a/packages/product/src/services/product-tag.ts
+++ b/packages/product/src/services/product-tag.ts
@@ -1,11 +1,9 @@
 import { ProductTag } from "@models"
 import {
   Context,
-  CreateProductTagDTO,
   DAL,
   FindConfig,
   ProductTypes,
-  UpdateProductTagDTO,
   UpsertProductTagDTO,
 } from "@medusajs/types"
 import {
@@ -13,11 +11,7 @@ import {
   InjectTransactionManager,
   MedusaContext,
   ModulesSdkUtils,
-  retrieveEntity,
 } from "@medusajs/utils"
-import { ProductTagRepository } from "@repositories"
-
-import { shouldForceTransaction } from "../utils"
 
 type InjectedDependencies = {
   productTagRepository: DAL.RepositoryService
@@ -25,103 +19,63 @@ type InjectedDependencies = {
 
 export default class ProductTagService<
   TEntity extends ProductTag = ProductTag
-> {
-  protected readonly productTagRepository_: DAL.RepositoryService
-
-  constructor({ productTagRepository }: InjectedDependencies) {
-    this.productTagRepository_ = productTagRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ProductTypes.CreateProductTagDTO
+    update: ProductTypes.UpdateProductTagDTO
   }
+>(ProductTag)<TEntity> {
+  protected readonly productTagRepository_: DAL.RepositoryService<TEntity>
 
-  @InjectManager("productTagRepository_")
-  async retrieve(
-    productTagId: string,
-    config: FindConfig<ProductTypes.ProductTagDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<ProductTag, ProductTypes.ProductTagDTO>({
-      id: productTagId,
-      entityName: ProductTag.name,
-      repository: this.productTagRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
+  constructor(container: InjectedDependencies) {
+    super(container)
+    this.productTagRepository_ = container.productTagRepository
   }
-
   @InjectManager("productTagRepository_")
-  async list(
+  async list<TEntityMethod = ProductTypes.ProductTagDTO>(
     filters: ProductTypes.FilterableProductTagProps = {},
-    config: FindConfig<ProductTypes.ProductTagDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await this.productTagRepository_.find(
+    return await this.productTagRepository_.find(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as TEntity[]
+    )
   }
 
   @InjectManager("productTagRepository_")
-  async listAndCount(
+  async listAndCount<TEntityMethod = ProductTypes.ProductTagDTO>(
     filters: ProductTypes.FilterableProductTagProps = {},
-    config: FindConfig<ProductTypes.ProductTagDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<[TEntity[], number]> {
-    return (await this.productTagRepository_.findAndCount(
+    return await this.productTagRepository_.findAndCount(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as [TEntity[], number]
+    )
   }
 
-  private buildQueryForList(
+  private buildQueryForList<TEntityMethod = ProductTypes.ProductTagDTO>(
     filters: ProductTypes.FilterableProductTagProps = {},
-    config: FindConfig<ProductTypes.ProductTagDTO> = {}
-  ) {
-    const queryOptions = ModulesSdkUtils.buildQuery<ProductTag>(filters, config)
+    config: FindConfig<TEntityMethod> = {}
+  ): DAL.FindOptions<TEntity> {
+    const queryOptions = ModulesSdkUtils.buildQuery<TEntity>(filters, config)
 
     if (filters.value) {
-      queryOptions.where["value"] = { $ilike: filters.value }
+      queryOptions.where.value = {
+        $ilike: filters.value,
+      } as DAL.FindOptions<TEntity>["where"]["value"]
     }
 
     return queryOptions
   }
 
-  @InjectTransactionManager("productTagRepository_")
-  async create(
-    data: CreateProductTagDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.productTagRepository_ as ProductTagRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("productTagRepository_")
-  async update(
-    data: UpdateProductTagDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.productTagRepository_ as ProductTagRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("productTagRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.productTagRepository_.delete(ids, sharedContext)
-  }
-
   @InjectTransactionManager("productTagRepository_")
   async upsert(
     data: UpsertProductTagDTO[],
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await (this.productTagRepository_ as ProductTagRepository).upsert!(
-      data,
-      sharedContext
-    )) as TEntity[]
+    return await this.productTagRepository_.upsert!(data, sharedContext)
   }
 }
diff --git a/packages/product/src/services/product-type.ts b/packages/product/src/services/product-type.ts
index 2d510a3430..ddab918b2a 100644
--- a/packages/product/src/services/product-type.ts
+++ b/packages/product/src/services/product-type.ts
@@ -1,87 +1,72 @@
 import { ProductType } from "@models"
 import {
   Context,
-  CreateProductTypeDTO,
   DAL,
   FindConfig,
   ProductTypes,
-  UpdateProductTypeDTO,
   UpsertProductTypeDTO,
 } from "@medusajs/types"
-import { ProductTypeRepository } from "@repositories"
 import {
   InjectManager,
   InjectTransactionManager,
   MedusaContext,
   ModulesSdkUtils,
-  retrieveEntity,
 } from "@medusajs/utils"
 
-import { shouldForceTransaction } from "../utils"
-
 type InjectedDependencies = {
   productTypeRepository: DAL.RepositoryService
 }
 
 export default class ProductTypeService<
   TEntity extends ProductType = ProductType
-> {
-  protected readonly productTypeRepository_: DAL.RepositoryService
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ProductTypes.CreateProductTypeDTO
+    update: ProductTypes.UpdateProductTypeDTO
+  }
+>(ProductType)<TEntity> {
+  protected readonly productTypeRepository_: DAL.RepositoryService<TEntity>
 
-  constructor({ productTypeRepository }: InjectedDependencies) {
-    this.productTypeRepository_ = productTypeRepository
+  constructor(container: InjectedDependencies) {
+    super(container)
+    this.productTypeRepository_ = container.productTypeRepository
   }
 
   @InjectManager("productTypeRepository_")
-  async retrieve(
-    productTypeId: string,
-    config: FindConfig<ProductTypes.ProductTypeDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<ProductType, ProductTypes.ProductTypeDTO>({
-      id: productTypeId,
-      entityName: ProductType.name,
-      repository: this.productTypeRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("productTypeRepository_")
-  async list(
+  async list<TEntityMethod = ProductTypes.ProductTypeDTO>(
     filters: ProductTypes.FilterableProductTypeProps = {},
-    config: FindConfig<ProductTypes.ProductTypeDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await this.productTypeRepository_.find(
+    return await this.productTypeRepository_.find(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as TEntity[]
+    )
   }
 
   @InjectManager("productTypeRepository_")
-  async listAndCount(
+  async listAndCount<TEntityMethod = ProductTypes.ProductOptionDTO>(
     filters: ProductTypes.FilterableProductTypeProps = {},
-    config: FindConfig<ProductTypes.ProductTypeDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<[TEntity[], number]> {
-    return (await this.productTypeRepository_.findAndCount(
+    return await this.productTypeRepository_.findAndCount(
       this.buildQueryForList(filters, config),
       sharedContext
-    )) as [TEntity[], number]
+    )
   }
 
-  private buildQueryForList(
+  private buildQueryForList<TEntityMethod = ProductTypes.ProductTypeDTO>(
     filters: ProductTypes.FilterableProductTypeProps = {},
-    config: FindConfig<ProductTypes.ProductTypeDTO> = {}
-  ) {
-    const queryOptions = ModulesSdkUtils.buildQuery<ProductType>(
-      filters,
-      config
-    )
+    config: FindConfig<TEntityMethod> = {}
+  ): DAL.FindOptions<TEntity> {
+    const queryOptions = ModulesSdkUtils.buildQuery<TEntity>(filters, config)
 
     if (filters.value) {
-      queryOptions.where["value"] = { $ilike: filters.value }
+      queryOptions.where.value = {
+        $ilike: filters.value,
+      } as DAL.FindOptions<TEntity>["where"]["value"]
     }
 
     return queryOptions
@@ -92,37 +77,6 @@ export default class ProductTypeService<
     types: UpsertProductTypeDTO[],
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
-    return (await (this.productTypeRepository_ as ProductTypeRepository)
-      .upsert!(types, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("productTypeRepository_")
-  async create(
-    data: CreateProductTypeDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.productTypeRepository_ as ProductTypeRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("productTypeRepository_")
-  async update(
-    data: UpdateProductTypeDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.productTypeRepository_ as ProductTypeRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("productTypeRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.productTypeRepository_.delete(ids, sharedContext)
+    return await this.productTypeRepository_.upsert!(types, sharedContext)
   }
 }
diff --git a/packages/product/src/services/product-variant.ts b/packages/product/src/services/product-variant.ts
index 06d30a8f02..38abaf1b4d 100644
--- a/packages/product/src/services/product-variant.ts
+++ b/packages/product/src/services/product-variant.ts
@@ -1,16 +1,13 @@
-import { Context, DAL, FindConfig, ProductTypes } from "@medusajs/types"
+import { Context, DAL, ProductTypes } from "@medusajs/types"
 import {
-  InjectManager,
   InjectTransactionManager,
+  isString,
   MedusaContext,
   ModulesSdkUtils,
-  isString,
-  retrieveEntity,
 } from "@medusajs/utils"
 import { Product, ProductVariant } from "@models"
-import { ProductVariantRepository } from "@repositories"
 
-import { ProductVariantServiceTypes } from "../types/services"
+import { ProductVariantServiceTypes } from "@types"
 import ProductService from "./product"
 
 type InjectedDependencies = {
@@ -21,72 +18,29 @@ type InjectedDependencies = {
 export default class ProductVariantService<
   TEntity extends ProductVariant = ProductVariant,
   TProduct extends Product = Product
-> {
-  protected readonly productVariantRepository_: DAL.RepositoryService
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ProductTypes.CreateProductVariantOnlyDTO
+    update: ProductVariantServiceTypes.UpdateProductVariantDTO
+  }
+>(ProductVariant)<TEntity> {
+  protected readonly productVariantRepository_: DAL.RepositoryService<TEntity>
   protected readonly productService_: ProductService<TProduct>
 
   constructor({
     productVariantRepository,
     productService,
   }: InjectedDependencies) {
+    // @ts-ignore
+    super(...arguments)
     this.productVariantRepository_ = productVariantRepository
     this.productService_ = productService
   }
 
-  @InjectManager("productVariantRepository_")
-  async retrieve(
-    productVariantId: string,
-    config: FindConfig<ProductTypes.ProductVariantDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      ProductVariant,
-      ProductTypes.ProductVariantDTO
-    >({
-      id: productVariantId,
-      entityName: ProductVariant.name,
-      repository: this.productVariantRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("productVariantRepository_")
-  async list(
-    filters: ProductTypes.FilterableProductVariantProps = {},
-    config: FindConfig<ProductTypes.ProductVariantDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<ProductVariant>(
-      filters,
-      config
-    )
-
-    return (await this.productVariantRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("productVariantRepository_")
-  async listAndCount(
-    filters: ProductTypes.FilterableProductVariantProps = {},
-    config: FindConfig<ProductTypes.ProductVariantDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<ProductVariant>(
-      filters,
-      config
-    )
-
-    return (await this.productVariantRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
   @InjectTransactionManager("productVariantRepository_")
-  async create(
+  // @ts-ignore
+  override async create(
     productOrId: TProduct | string,
     data: ProductTypes.CreateProductVariantOnlyDTO[],
     @MedusaContext() sharedContext: Context = {}
@@ -113,15 +67,14 @@ export default class ProductVariantService<
       })
     })
 
-    return (await (
-      this.productVariantRepository_ as ProductVariantRepository
-    ).create(data_, {
+    return await this.productVariantRepository_.create(data_, {
       transactionManager: sharedContext.transactionManager,
-    })) as TEntity[]
+    })
   }
 
   @InjectTransactionManager("productVariantRepository_")
-  async update(
+  // @ts-ignore
+  override async update(
     productOrId: TProduct | string,
     data: ProductVariantServiceTypes.UpdateProductVariantDTO[],
     @MedusaContext() sharedContext: Context = {}
@@ -139,39 +92,7 @@ export default class ProductVariantService<
     const variantsData = [...data]
     variantsData.forEach((variant) => Object.assign(variant, { product }))
 
-    return (await (
-      this.productVariantRepository_ as ProductVariantRepository
-    ).update(variantsData, {
-      transactionManager: sharedContext.transactionManager,
-    })) as TEntity[]
-  }
-
-  @InjectTransactionManager("productVariantRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    return await this.productVariantRepository_.delete(ids, {
-      transactionManager: sharedContext.transactionManager,
-    })
-  }
-
-  @InjectTransactionManager("productVariantRepository_")
-  async softDelete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.productVariantRepository_.softDelete(ids, {
-      transactionManager: sharedContext.transactionManager,
-    })
-  }
-
-  @InjectTransactionManager("productVariantRepository_")
-  async restore(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], Record<string, unknown[]>]> {
-    return await this.productVariantRepository_.restore(ids, {
+    return await this.productVariantRepository_.update(variantsData, {
       transactionManager: sharedContext.transactionManager,
     })
   }
diff --git a/packages/product/src/services/product.ts b/packages/product/src/services/product.ts
index 15d3c010b7..d438fb7513 100644
--- a/packages/product/src/services/product.ts
+++ b/packages/product/src/services/product.ts
@@ -1,74 +1,35 @@
-import {
-  Context,
-  DAL,
-  FindConfig,
-  ProductTypes,
-  WithRequiredProperty,
-} from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  isDefined,
-  MedusaContext,
-  MedusaError,
-  ModulesSdkUtils,
-  ProductUtils,
-} from "@medusajs/utils"
+import { Context, DAL, FindConfig, ProductTypes } from "@medusajs/types"
+import { InjectManager, MedusaContext, ModulesSdkUtils } from "@medusajs/utils"
 import { Product } from "@models"
-import { ProductRepository } from "@repositories"
-
-import { ProductServiceTypes } from "../types/services"
+import { ProductServiceTypes } from "@types"
 
 type InjectedDependencies = {
   productRepository: DAL.RepositoryService
 }
 
-export default class ProductService<TEntity extends Product = Product> {
-  protected readonly productRepository_: DAL.RepositoryService
+export default class ProductService<
+  TEntity extends Product = Product
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: ProductTypes.CreateProductOnlyDTO
+    update: ProductServiceTypes.UpdateProductDTO
+  }
+>(Product)<TEntity> {
+  protected readonly productRepository_: DAL.RepositoryService<TEntity>
 
   constructor({ productRepository }: InjectedDependencies) {
+    // @ts-ignore
+    // eslint-disable-next-line prefer-rest-params
+    super(...arguments)
+
     this.productRepository_ = productRepository
   }
 
   @InjectManager("productRepository_")
-  async retrieve(
-    productId: string,
-    config: FindConfig<ProductTypes.ProductDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    if (!isDefined(productId)) {
-      throw new MedusaError(
-        MedusaError.Types.NOT_FOUND,
-        `"productId" must be defined`
-      )
-    }
-
-    const queryOptions = ModulesSdkUtils.buildQuery<Product>(
-      {
-        id: productId,
-      },
-      config
-    )
-
-    const product = await this.productRepository_.find(
-      queryOptions,
-      sharedContext
-    )
-
-    if (!product?.length) {
-      throw new MedusaError(
-        MedusaError.Types.NOT_FOUND,
-        `Product with id: ${productId} was not found`
-      )
-    }
-
-    return product[0] as TEntity
-  }
-
-  @InjectManager("productRepository_")
-  async list(
+  async list<TEntityMethod = ProductTypes.ProductDTO>(
     filters: ProductTypes.FilterableProductProps = {},
-    config: FindConfig<ProductTypes.ProductDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<TEntity[]> {
     if (filters.category_id) {
@@ -84,17 +45,13 @@ export default class ProductService<TEntity extends Product = Product> {
       delete filters.category_id
     }
 
-    const queryOptions = ModulesSdkUtils.buildQuery<Product>(filters, config)
-    return (await this.productRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
+    return await super.list<TEntityMethod>(filters, config, sharedContext)
   }
 
   @InjectManager("productRepository_")
-  async listAndCount(
+  async listAndCount<TEntityMethod = ProductTypes.ProductDTO>(
     filters: ProductTypes.FilterableProductProps = {},
-    config: FindConfig<ProductTypes.ProductDTO> = {},
+    config: FindConfig<TEntityMethod> = {},
     @MedusaContext() sharedContext: Context = {}
   ): Promise<[TEntity[], number]> {
     if (filters.category_id) {
@@ -110,76 +67,10 @@ export default class ProductService<TEntity extends Product = Product> {
       delete filters.category_id
     }
 
-    const queryOptions = ModulesSdkUtils.buildQuery<Product>(filters, config)
-    return (await this.productRepository_.findAndCount(
-      queryOptions,
+    return await super.listAndCount<TEntityMethod>(
+      filters,
+      config,
       sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("productRepository_")
-  async create(
-    data: ProductTypes.CreateProductOnlyDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    data.forEach((product) => {
-      product.status ??= ProductUtils.ProductStatus.DRAFT
-    })
-
-    return (await (this.productRepository_ as ProductRepository).create(
-      data as WithRequiredProperty<
-        ProductTypes.CreateProductOnlyDTO,
-        "status"
-      >[],
-      {
-        transactionManager: sharedContext.transactionManager,
-      }
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("productRepository_")
-  async update(
-    data: ProductServiceTypes.UpdateProductDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.productRepository_ as ProductRepository).update(
-      data as WithRequiredProperty<
-        ProductServiceTypes.UpdateProductDTO,
-        "id"
-      >[],
-      {
-        transactionManager: sharedContext.transactionManager,
-      }
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("productRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.productRepository_.delete(ids, {
-      transactionManager: sharedContext.transactionManager,
-    })
-  }
-
-  @InjectTransactionManager("productRepository_")
-  async softDelete(
-    productIds: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], Record<string, unknown[]>]> {
-    return await this.productRepository_.softDelete(productIds, {
-      transactionManager: sharedContext.transactionManager,
-    })
-  }
-
-  @InjectTransactionManager("productRepository_")
-  async restore(
-    productIds: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], Record<string, unknown[]>]> {
-    return await this.productRepository_.restore(productIds, {
-      transactionManager: sharedContext.transactionManager,
-    })
+    )
   }
 }
diff --git a/packages/product/src/types/services/index.ts b/packages/product/src/types/services/index.ts
index 40c769ce36..efcb994e07 100644
--- a/packages/product/src/types/services/index.ts
+++ b/packages/product/src/types/services/index.ts
@@ -2,3 +2,4 @@ export * as ProductCategoryServiceTypes from "./product-category"
 export * as ProductServiceTypes from "./product"
 export * as ProductVariantServiceTypes from "./product-variant"
 export * as ProductCollectionServiceTypes from "./product-collection"
+export * as ProductOptionValueServiceTypes from "./product-option-value"
diff --git a/packages/product/tsconfig.json b/packages/product/tsconfig.json
index 213e38fc55..4b79cd6032 100644
--- a/packages/product/tsconfig.json
+++ b/packages/product/tsconfig.json
@@ -22,7 +22,8 @@
     "paths": {
       "@models": ["./src/models"],
       "@services": ["./src/services"],
-      "@repositories": ["./src/repositories"]
+      "@repositories": ["./src/repositories"],
+      "@types": ["./src/types"]
     }
   },
   "include": ["src"],
diff --git a/packages/promotion/integration-tests/__fixtures__/promotion/index.ts b/packages/promotion/integration-tests/__fixtures__/promotion/index.ts
index 2339d9a583..e45cece09f 100644
--- a/packages/promotion/integration-tests/__fixtures__/promotion/index.ts
+++ b/packages/promotion/integration-tests/__fixtures__/promotion/index.ts
@@ -15,8 +15,8 @@ export async function createPromotions(
     let promotion = manager.create(Promotion, promotionData)
 
     manager.persist(promotion)
-
     await manager.flush()
+    promotions.push(promotion)
   }
 
   return promotions
diff --git a/packages/promotion/integration-tests/__tests__/services/promotion-module/campaign.spec.ts b/packages/promotion/integration-tests/__tests__/services/promotion-module/campaign.spec.ts
index 277d5d3fac..27ae0f5ab2 100644
--- a/packages/promotion/integration-tests/__tests__/services/promotion-module/campaign.spec.ts
+++ b/packages/promotion/integration-tests/__tests__/services/promotion-module/campaign.spec.ts
@@ -2,6 +2,7 @@ import { IPromotionModuleService } from "@medusajs/types"
 import { SqlEntityManager } from "@mikro-orm/postgresql"
 import { initialize } from "../../../../src"
 import { createCampaigns } from "../../../__fixtures__/campaigns"
+import { createPromotions } from "../../../__fixtures__/promotion"
 import { DB_URL, MikroOrmWrapper } from "../../../utils"
 
 jest.setTimeout(30000)
@@ -101,6 +102,43 @@ describe("Promotion Module Service: Campaigns", () => {
         })
       )
     })
+
+    it("should create a basic campaign with promotions successfully", async () => {
+      await createPromotions(repositoryManager)
+
+      const startsAt = new Date("01/01/2024")
+      const endsAt = new Date("01/01/2025")
+      const [createdCampaign] = await service.createCampaigns([
+        {
+          name: "test",
+          campaign_identifier: "test",
+          starts_at: startsAt,
+          ends_at: endsAt,
+          promotions: [{ id: "promotion-id-1" }, { id: "promotion-id-2" }],
+        },
+      ])
+
+      const campaign = await service.retrieveCampaign(createdCampaign.id, {
+        relations: ["promotions"],
+      })
+
+      expect(campaign).toEqual(
+        expect.objectContaining({
+          name: "test",
+          campaign_identifier: "test",
+          starts_at: startsAt,
+          ends_at: endsAt,
+          promotions: [
+            expect.objectContaining({
+              id: "promotion-id-1",
+            }),
+            expect.objectContaining({
+              id: "promotion-id-2",
+            }),
+          ],
+        })
+      )
+    })
   })
 
   describe("updateCampaigns", () => {
@@ -163,6 +201,66 @@ describe("Promotion Module Service: Campaigns", () => {
         })
       )
     })
+
+    it("should update promotions of a campaign successfully", async () => {
+      await createCampaigns(repositoryManager)
+      await createPromotions(repositoryManager)
+
+      const [updatedCampaign] = await service.updateCampaigns([
+        {
+          id: "campaign-id-1",
+          description: "test description 1",
+          currency: "EUR",
+          campaign_identifier: "new",
+          starts_at: new Date("01/01/2024"),
+          ends_at: new Date("01/01/2025"),
+          promotions: [{ id: "promotion-id-1" }, { id: "promotion-id-2" }],
+        },
+      ])
+
+      expect(updatedCampaign).toEqual(
+        expect.objectContaining({
+          description: "test description 1",
+          currency: "EUR",
+          campaign_identifier: "new",
+          starts_at: new Date("01/01/2024"),
+          ends_at: new Date("01/01/2025"),
+          promotions: [
+            expect.objectContaining({
+              id: "promotion-id-1",
+            }),
+            expect.objectContaining({
+              id: "promotion-id-2",
+            }),
+          ],
+        })
+      )
+    })
+
+    it("should remove promotions of the campaign successfully", async () => {
+      await createCampaigns(repositoryManager)
+      await createPromotions(repositoryManager)
+
+      await service.updateCampaigns({
+        id: "campaign-id-1",
+        promotions: [{ id: "promotion-id-1" }, { id: "promotion-id-2" }],
+      })
+
+      const updatedCampaign = await service.updateCampaigns({
+        id: "campaign-id-1",
+        promotions: [{ id: "promotion-id-1" }],
+      })
+
+      expect(updatedCampaign).toEqual(
+        expect.objectContaining({
+          promotions: [
+            expect.objectContaining({
+              id: "promotion-id-1",
+            }),
+          ],
+        })
+      )
+    })
   })
 
   describe("retrieveCampaign", () => {
diff --git a/packages/promotion/integration-tests/__tests__/services/promotion-module/compute-actions.spec.ts b/packages/promotion/integration-tests/__tests__/services/promotion-module/compute-actions.spec.ts
index 69fdb9ce07..398f7e00e3 100644
--- a/packages/promotion/integration-tests/__tests__/services/promotion-module/compute-actions.spec.ts
+++ b/packages/promotion/integration-tests/__tests__/services/promotion-module/compute-actions.spec.ts
@@ -2,6 +2,7 @@ import { IPromotionModuleService } from "@medusajs/types"
 import { PromotionType } from "@medusajs/utils"
 import { SqlEntityManager } from "@mikro-orm/postgresql"
 import { initialize } from "../../../../src"
+import { createCampaigns } from "../../../__fixtures__/campaigns"
 import { DB_URL, MikroOrmWrapper } from "../../../utils"
 
 jest.setTimeout(30000)
@@ -459,10 +460,10 @@ describe("Promotion Service: computeActions", () => {
         },
       ])
     })
-  })
 
-  describe("when promotion is for items and allocation is across", () => {
-    it("should compute the correct item amendments", async () => {
+    it("should compute budget exceeded action when applicable total exceeds campaign budget for type spend", async () => {
+      await createCampaigns(repositoryManager)
+
       const [createdPromotion] = await service.create([
         {
           code: "PROMOTION_TEST",
@@ -474,12 +475,13 @@ describe("Promotion Service: computeActions", () => {
               values: ["VIP", "top100"],
             },
           ],
+          campaign_id: "campaign-id-1",
           application_method: {
             type: "fixed",
             target_type: "items",
-            allocation: "across",
-            value: "200",
-            max_quantity: 2,
+            allocation: "each",
+            value: "500",
+            max_quantity: 5,
             target_rules: [
               {
                 attribute: "product_category.id",
@@ -500,7 +502,126 @@ describe("Promotion Service: computeActions", () => {
         items: [
           {
             id: "item_cotton_tshirt",
-            quantity: 1,
+            quantity: 5,
+            unit_price: 1000,
+            product_category: {
+              id: "catg_cotton",
+            },
+            product: {
+              id: "prod_tshirt",
+            },
+          },
+        ],
+      })
+
+      expect(result).toEqual([
+        { action: "campaignBudgetExceeded", code: "PROMOTION_TEST" },
+      ])
+    })
+
+    it("should compute budget exceeded action when applicable total exceeds campaign budget for type usage", async () => {
+      await createCampaigns(repositoryManager)
+
+      const [createdPromotion] = await service.create([
+        {
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          rules: [
+            {
+              attribute: "customer.customer_group.id",
+              operator: "in",
+              values: ["VIP", "top100"],
+            },
+          ],
+          campaign_id: "campaign-id-2",
+          application_method: {
+            type: "fixed",
+            target_type: "items",
+            allocation: "each",
+            value: "500",
+            max_quantity: 5,
+            target_rules: [
+              {
+                attribute: "product_category.id",
+                operator: "eq",
+                values: ["catg_cotton"],
+              },
+            ],
+          },
+        },
+      ])
+
+      await service.updateCampaigns({
+        id: "campaign-id-2",
+        budget: { used: 1000 },
+      })
+
+      const result = await service.computeActions(["PROMOTION_TEST"], {
+        customer: {
+          customer_group: {
+            id: "VIP",
+          },
+        },
+        items: [
+          {
+            id: "item_cotton_tshirt",
+            quantity: 5,
+            unit_price: 1000,
+            product_category: {
+              id: "catg_cotton",
+            },
+            product: {
+              id: "prod_tshirt",
+            },
+          },
+        ],
+      })
+
+      expect(result).toEqual([
+        { action: "campaignBudgetExceeded", code: "PROMOTION_TEST" },
+      ])
+    })
+  })
+
+  describe("when promotion is for items and allocation is across", () => {
+    it("should compute the correct item amendments", async () => {
+      const [createdPromotion] = await service.create([
+        {
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          rules: [
+            {
+              attribute: "customer.customer_group.id",
+              operator: "in",
+              values: ["VIP", "top100"],
+            },
+          ],
+          application_method: {
+            type: "fixed",
+            target_type: "items",
+            allocation: "across",
+            value: "400",
+            target_rules: [
+              {
+                attribute: "product_category.id",
+                operator: "eq",
+                values: ["catg_cotton"],
+              },
+            ],
+          },
+        },
+      ])
+
+      const result = await service.computeActions(["PROMOTION_TEST"], {
+        customer: {
+          customer_group: {
+            id: "VIP",
+          },
+        },
+        items: [
+          {
+            id: "item_cotton_tshirt",
+            quantity: 2,
             unit_price: 100,
             product_category: {
               id: "catg_cotton",
@@ -512,7 +633,7 @@ describe("Promotion Service: computeActions", () => {
           {
             id: "item_cotton_sweater",
             quantity: 2,
-            unit_price: 150,
+            unit_price: 300,
             product_category: {
               id: "catg_cotton",
             },
@@ -527,13 +648,13 @@ describe("Promotion Service: computeActions", () => {
         {
           action: "addItemAdjustment",
           item_id: "item_cotton_tshirt",
-          amount: 50,
+          amount: 100,
           code: "PROMOTION_TEST",
         },
         {
           action: "addItemAdjustment",
           item_id: "item_cotton_sweater",
-          amount: 150,
+          amount: 300,
           code: "PROMOTION_TEST",
         },
       ])
@@ -556,7 +677,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "items",
             allocation: "across",
             value: "30",
-            max_quantity: 2,
             target_rules: [
               {
                 attribute: "product_category.id",
@@ -584,7 +704,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "items",
             allocation: "across",
             value: "50",
-            max_quantity: 1,
             target_rules: [
               {
                 attribute: "product_category.id",
@@ -676,7 +795,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "items",
             allocation: "across",
             value: "500",
-            max_quantity: 2,
             target_rules: [
               {
                 attribute: "product_category.id",
@@ -704,7 +822,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "items",
             allocation: "across",
             value: "50",
-            max_quantity: 1,
             target_rules: [
               {
                 attribute: "product_category.id",
@@ -778,6 +895,125 @@ describe("Promotion Service: computeActions", () => {
         },
       ])
     })
+
+    it("should compute budget exceeded action when applicable total exceeds campaign budget for type spend", async () => {
+      await createCampaigns(repositoryManager)
+
+      const [createdPromotion] = await service.create([
+        {
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          rules: [
+            {
+              attribute: "customer.customer_group.id",
+              operator: "in",
+              values: ["VIP", "top100"],
+            },
+          ],
+          campaign_id: "campaign-id-1",
+          application_method: {
+            type: "fixed",
+            target_type: "items",
+            allocation: "across",
+            value: "1500",
+            target_rules: [
+              {
+                attribute: "product_category.id",
+                operator: "eq",
+                values: ["catg_cotton"],
+              },
+            ],
+          },
+        },
+      ])
+
+      const result = await service.computeActions(["PROMOTION_TEST"], {
+        customer: {
+          customer_group: {
+            id: "VIP",
+          },
+        },
+        items: [
+          {
+            id: "item_cotton_tshirt",
+            quantity: 5,
+            unit_price: 1000,
+            product_category: {
+              id: "catg_cotton",
+            },
+            product: {
+              id: "prod_tshirt",
+            },
+          },
+        ],
+      })
+
+      expect(result).toEqual([
+        { action: "campaignBudgetExceeded", code: "PROMOTION_TEST" },
+      ])
+    })
+
+    it("should compute budget exceeded action when applicable total exceeds campaign budget for type usage", async () => {
+      await createCampaigns(repositoryManager)
+
+      const [createdPromotion] = await service.create([
+        {
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          rules: [
+            {
+              attribute: "customer.customer_group.id",
+              operator: "in",
+              values: ["VIP", "top100"],
+            },
+          ],
+          campaign_id: "campaign-id-2",
+          application_method: {
+            type: "fixed",
+            target_type: "items",
+            allocation: "across",
+            value: "500",
+            target_rules: [
+              {
+                attribute: "product_category.id",
+                operator: "eq",
+                values: ["catg_cotton"],
+              },
+            ],
+          },
+        },
+      ])
+
+      await service.updateCampaigns({
+        id: "campaign-id-2",
+        budget: { used: 1000 },
+      })
+
+      const result = await service.computeActions(["PROMOTION_TEST"], {
+        customer: {
+          customer_group: {
+            id: "VIP",
+          },
+        },
+        items: [
+          {
+            id: "item_cotton_tshirt",
+            quantity: 5,
+            unit_price: 1000,
+            product_category: {
+              id: "catg_cotton",
+            },
+            product: {
+              id: "prod_tshirt",
+            },
+          },
+        ],
+      })
+
+      expect(result).toEqual([
+        { action: "campaignBudgetExceeded", code: "PROMOTION_TEST" },
+      ])
+    })
   })
 
   describe("when promotion is for shipping_method and allocation is each", () => {
@@ -1076,6 +1312,119 @@ describe("Promotion Service: computeActions", () => {
         },
       ])
     })
+
+    it("should compute budget exceeded action when applicable total exceeds campaign budget for type spend", async () => {
+      await createCampaigns(repositoryManager)
+
+      const [createdPromotion] = await service.create([
+        {
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          rules: [
+            {
+              attribute: "customer.customer_group.id",
+              operator: "in",
+              values: ["VIP", "top100"],
+            },
+          ],
+          campaign_id: "campaign-id-1",
+          application_method: {
+            type: "fixed",
+            target_type: "shipping_methods",
+            allocation: "each",
+            value: "1200",
+            max_quantity: 2,
+            target_rules: [
+              {
+                attribute: "shipping_option.id",
+                operator: "in",
+                values: ["express", "standard"],
+              },
+            ],
+          },
+        },
+      ])
+
+      const result = await service.computeActions(["PROMOTION_TEST"], {
+        customer: {
+          customer_group: {
+            id: "VIP",
+          },
+        },
+        shipping_methods: [
+          {
+            id: "shipping_method_express",
+            unit_price: 1200,
+            shipping_option: {
+              id: "express",
+            },
+          },
+        ],
+      })
+
+      expect(result).toEqual([
+        { action: "campaignBudgetExceeded", code: "PROMOTION_TEST" },
+      ])
+    })
+
+    it("should compute budget exceeded action when applicable total exceeds campaign budget for type usage", async () => {
+      await createCampaigns(repositoryManager)
+
+      const [createdPromotion] = await service.create([
+        {
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          rules: [
+            {
+              attribute: "customer.customer_group.id",
+              operator: "in",
+              values: ["VIP", "top100"],
+            },
+          ],
+          campaign_id: "campaign-id-2",
+          application_method: {
+            type: "fixed",
+            target_type: "shipping_methods",
+            allocation: "each",
+            value: "1200",
+            max_quantity: 2,
+            target_rules: [
+              {
+                attribute: "shipping_option.id",
+                operator: "in",
+                values: ["express", "standard"],
+              },
+            ],
+          },
+        },
+      ])
+
+      await service.updateCampaigns({
+        id: "campaign-id-2",
+        budget: { used: 1000 },
+      })
+
+      const result = await service.computeActions(["PROMOTION_TEST"], {
+        customer: {
+          customer_group: {
+            id: "VIP",
+          },
+        },
+        shipping_methods: [
+          {
+            id: "shipping_method_express",
+            unit_price: 1200,
+            shipping_option: {
+              id: "express",
+            },
+          },
+        ],
+      })
+
+      expect(result).toEqual([
+        { action: "campaignBudgetExceeded", code: "PROMOTION_TEST" },
+      ])
+    })
   })
 
   describe("when promotion is for shipping_method and allocation is across", () => {
@@ -1096,7 +1445,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "shipping_methods",
             allocation: "across",
             value: "200",
-            max_quantity: 2,
             target_rules: [
               {
                 attribute: "shipping_option.id",
@@ -1172,7 +1520,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "shipping_methods",
             allocation: "across",
             value: "200",
-            max_quantity: 2,
             target_rules: [
               {
                 attribute: "shipping_option.id",
@@ -1200,7 +1547,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "shipping_methods",
             allocation: "across",
             value: "200",
-            max_quantity: 2,
             target_rules: [
               {
                 attribute: "shipping_option.id",
@@ -1291,7 +1637,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "shipping_methods",
             allocation: "across",
             value: "1000",
-            max_quantity: 2,
             target_rules: [
               {
                 attribute: "shipping_option.id",
@@ -1319,7 +1664,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "shipping_methods",
             allocation: "across",
             value: "200",
-            max_quantity: 2,
             target_rules: [
               {
                 attribute: "shipping_option.id",
@@ -1380,6 +1724,117 @@ describe("Promotion Service: computeActions", () => {
         },
       ])
     })
+
+    it("should compute budget exceeded action when applicable total exceeds campaign budget for type spend", async () => {
+      await createCampaigns(repositoryManager)
+
+      const [createdPromotion] = await service.create([
+        {
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          rules: [
+            {
+              attribute: "customer.customer_group.id",
+              operator: "in",
+              values: ["VIP", "top100"],
+            },
+          ],
+          campaign_id: "campaign-id-1",
+          application_method: {
+            type: "fixed",
+            target_type: "shipping_methods",
+            allocation: "across",
+            value: "1200",
+            target_rules: [
+              {
+                attribute: "shipping_option.id",
+                operator: "in",
+                values: ["express", "standard"],
+              },
+            ],
+          },
+        },
+      ])
+
+      const result = await service.computeActions(["PROMOTION_TEST"], {
+        customer: {
+          customer_group: {
+            id: "VIP",
+          },
+        },
+        shipping_methods: [
+          {
+            id: "shipping_method_express",
+            unit_price: 1200,
+            shipping_option: {
+              id: "express",
+            },
+          },
+        ],
+      })
+
+      expect(result).toEqual([
+        { action: "campaignBudgetExceeded", code: "PROMOTION_TEST" },
+      ])
+    })
+
+    it("should compute budget exceeded action when applicable total exceeds campaign budget for type usage", async () => {
+      await createCampaigns(repositoryManager)
+
+      const [createdPromotion] = await service.create([
+        {
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          rules: [
+            {
+              attribute: "customer.customer_group.id",
+              operator: "in",
+              values: ["VIP", "top100"],
+            },
+          ],
+          campaign_id: "campaign-id-2",
+          application_method: {
+            type: "fixed",
+            target_type: "shipping_methods",
+            allocation: "across",
+            value: "1200",
+            target_rules: [
+              {
+                attribute: "shipping_option.id",
+                operator: "in",
+                values: ["express", "standard"],
+              },
+            ],
+          },
+        },
+      ])
+
+      await service.updateCampaigns({
+        id: "campaign-id-2",
+        budget: { used: 1000 },
+      })
+
+      const result = await service.computeActions(["PROMOTION_TEST"], {
+        customer: {
+          customer_group: {
+            id: "VIP",
+          },
+        },
+        shipping_methods: [
+          {
+            id: "shipping_method_express",
+            unit_price: 1200,
+            shipping_option: {
+              id: "express",
+            },
+          },
+        ],
+      })
+
+      expect(result).toEqual([
+        { action: "campaignBudgetExceeded", code: "PROMOTION_TEST" },
+      ])
+    })
   })
 
   describe("when promotion is for the entire order", () => {
@@ -1740,6 +2195,7 @@ describe("Promotion Service: computeActions", () => {
         {
           action: "removeItemAdjustment",
           adjustment_id: "test-adjustment",
+          code: "ADJUSTMENT_CODE",
         },
         {
           action: "addItemAdjustment",
@@ -1780,7 +2236,6 @@ describe("Promotion Service: computeActions", () => {
             target_type: "shipping_methods",
             allocation: "across",
             value: "200",
-            max_quantity: 2,
             target_rules: [
               {
                 attribute: "shipping_option.id",
@@ -1833,6 +2288,7 @@ describe("Promotion Service: computeActions", () => {
         {
           action: "removeShippingMethodAdjustment",
           adjustment_id: "test-adjustment",
+          code: "ADJUSTMENT_CODE",
         },
         {
           action: "addShippingMethodAdjustment",
diff --git a/packages/promotion/integration-tests/__tests__/services/promotion-module/promotion.spec.ts b/packages/promotion/integration-tests/__tests__/services/promotion-module/promotion.spec.ts
index c98c18f949..72edf031e9 100644
--- a/packages/promotion/integration-tests/__tests__/services/promotion-module/promotion.spec.ts
+++ b/packages/promotion/integration-tests/__tests__/services/promotion-module/promotion.spec.ts
@@ -1,7 +1,8 @@
 import { IPromotionModuleService } from "@medusajs/types"
-import { PromotionType } from "@medusajs/utils"
+import { CampaignBudgetType, PromotionType } from "@medusajs/utils"
 import { SqlEntityManager } from "@mikro-orm/postgresql"
 import { initialize } from "../../../../src"
+import { createCampaigns } from "../../../__fixtures__/campaigns"
 import { createPromotions } from "../../../__fixtures__/promotion"
 import { DB_URL, MikroOrmWrapper } from "../../../utils"
 
@@ -99,6 +100,112 @@ describe("Promotion Service", () => {
       )
     })
 
+    it("should throw an error when both campaign and campaign_id are provided", async () => {
+      const startsAt = new Date("01/01/2023")
+      const endsAt = new Date("01/01/2023")
+
+      const error = await service
+        .create({
+          code: "PROMOTION_TEST",
+          type: PromotionType.STANDARD,
+          campaign_id: "campaign-id-1",
+          campaign: {
+            name: "test",
+            campaign_identifier: "test-promotion-test",
+            starts_at: startsAt,
+            ends_at: endsAt,
+            budget: {
+              type: CampaignBudgetType.SPEND,
+              used: 100,
+              limit: 100,
+            },
+          },
+        })
+        .catch((e) => e)
+
+      expect(error.message).toContain(
+        "Provide either the 'campaign' or 'campaign_id' parameter; both cannot be used simultaneously."
+      )
+    })
+
+    it("should create a basic promotion with campaign successfully", async () => {
+      const startsAt = new Date("01/01/2023")
+      const endsAt = new Date("01/01/2023")
+
+      await createCampaigns(repositoryManager)
+
+      const createdPromotion = await service.create({
+        code: "PROMOTION_TEST",
+        type: PromotionType.STANDARD,
+        campaign: {
+          name: "test",
+          campaign_identifier: "test-promotion-test",
+          starts_at: startsAt,
+          ends_at: endsAt,
+          budget: {
+            type: CampaignBudgetType.SPEND,
+            used: 100,
+            limit: 100,
+          },
+        },
+      })
+
+      const [promotion] = await service.list(
+        { id: [createdPromotion.id] },
+        { relations: ["campaign.budget"] }
+      )
+
+      expect(promotion).toEqual(
+        expect.objectContaining({
+          code: "PROMOTION_TEST",
+          is_automatic: false,
+          type: "standard",
+          campaign: expect.objectContaining({
+            name: "test",
+            campaign_identifier: "test-promotion-test",
+            starts_at: startsAt,
+            ends_at: endsAt,
+            budget: expect.objectContaining({
+              type: CampaignBudgetType.SPEND,
+              used: 100,
+              limit: 100,
+            }),
+          }),
+        })
+      )
+    })
+
+    it("should create a basic promotion with an existing campaign successfully", async () => {
+      await createCampaigns(repositoryManager)
+
+      const createdPromotion = await service.create({
+        code: "PROMOTION_TEST",
+        type: PromotionType.STANDARD,
+        campaign_id: "campaign-id-1",
+      })
+
+      const [promotion] = await service.list(
+        { id: [createdPromotion.id] },
+        { relations: ["campaign.budget"] }
+      )
+
+      expect(promotion).toEqual(
+        expect.objectContaining({
+          code: "PROMOTION_TEST",
+          is_automatic: false,
+          type: "standard",
+          campaign: expect.objectContaining({
+            id: "campaign-id-1",
+            budget: expect.objectContaining({
+              type: CampaignBudgetType.SPEND,
+              limit: 1000,
+              used: 0,
+            }),
+          }),
+        })
+      )
+    })
+
     it("should throw error when creating an item application method without allocation", async () => {
       const error = await service
         .create([
@@ -488,6 +595,33 @@ describe("Promotion Service", () => {
         `application_method.type should be one of fixed, percentage`
       )
     })
+
+    it("should update campaign of the promotion", async () => {
+      await createCampaigns(repositoryManager)
+      const [createdPromotion] = await createPromotions(repositoryManager, [
+        {
+          is_automatic: true,
+          code: "TEST",
+          type: PromotionType.BUYGET,
+          campaign_id: "campaign-id-1",
+        },
+      ])
+
+      const [updatedPromotion] = await service.update([
+        {
+          id: createdPromotion.id,
+          campaign_id: "campaign-id-2",
+        },
+      ])
+
+      expect(updatedPromotion).toEqual(
+        expect.objectContaining({
+          campaign: expect.objectContaining({
+            id: "campaign-id-2",
+          }),
+        })
+      )
+    })
   })
 
   describe("retrieve", () => {
diff --git a/packages/promotion/integration-tests/__tests__/services/promotion-module/register-usage.spec.ts b/packages/promotion/integration-tests/__tests__/services/promotion-module/register-usage.spec.ts
new file mode 100644
index 0000000000..354b3c5582
--- /dev/null
+++ b/packages/promotion/integration-tests/__tests__/services/promotion-module/register-usage.spec.ts
@@ -0,0 +1,199 @@
+import { IPromotionModuleService } from "@medusajs/types"
+import { SqlEntityManager } from "@mikro-orm/postgresql"
+import { initialize } from "../../../../src"
+import { createCampaigns } from "../../../__fixtures__/campaigns"
+import { DB_URL, MikroOrmWrapper } from "../../../utils"
+
+jest.setTimeout(30000)
+
+describe("Promotion Service: campaign usage", () => {
+  let service: IPromotionModuleService
+  let repositoryManager: SqlEntityManager
+
+  beforeEach(async () => {
+    await MikroOrmWrapper.setupDatabase()
+    repositoryManager = MikroOrmWrapper.forkManager()
+
+    await createCampaigns(repositoryManager)
+
+    service = await initialize({
+      database: {
+        clientUrl: DB_URL,
+        schema: process.env.MEDUSA_PROMOTION_DB_SCHEMA,
+      },
+    })
+  })
+
+  afterEach(async () => {
+    await MikroOrmWrapper.clearDatabase()
+  })
+
+  describe("registerUsage", () => {
+    it("should register usage for type spend", async () => {
+      const createdPromotion = await service.create({
+        code: "TEST_PROMO_SPEND",
+        type: "standard",
+        campaign_id: "campaign-id-1",
+      })
+
+      await service.registerUsage([
+        {
+          action: "addShippingMethodAdjustment",
+          shipping_method_id: "shipping_method_express",
+          amount: 200,
+          code: createdPromotion.code!,
+        },
+        {
+          action: "addShippingMethodAdjustment",
+          shipping_method_id: "shipping_method_standard",
+          amount: 500,
+          code: createdPromotion.code!,
+        },
+      ])
+
+      const campaign = await service.retrieveCampaign("campaign-id-1", {
+        relations: ["budget"],
+      })
+
+      expect(campaign.budget).toEqual(
+        expect.objectContaining({
+          type: "spend",
+          limit: 1000,
+          used: 700,
+        })
+      )
+    })
+
+    it("should register usage for type usage", async () => {
+      const createdPromotion = await service.create({
+        code: "TEST_PROMO_USAGE",
+        type: "standard",
+        campaign_id: "campaign-id-2",
+      })
+
+      await service.registerUsage([
+        {
+          action: "addShippingMethodAdjustment",
+          shipping_method_id: "shipping_method_express",
+          amount: 200,
+          code: createdPromotion.code!,
+        },
+        {
+          action: "addShippingMethodAdjustment",
+          shipping_method_id: "shipping_method_standard",
+          amount: 500,
+          code: createdPromotion.code!,
+        },
+      ])
+
+      const campaign = await service.retrieveCampaign("campaign-id-2", {
+        relations: ["budget"],
+      })
+
+      expect(campaign.budget).toEqual(
+        expect.objectContaining({
+          type: "usage",
+          limit: 1000,
+          used: 1,
+        })
+      )
+    })
+
+    it("should not throw an error when compute action with code does not exist", async () => {
+      const response = await service
+        .registerUsage([
+          {
+            action: "addShippingMethodAdjustment",
+            shipping_method_id: "shipping_method_express",
+            amount: 200,
+            code: "DOESNOTEXIST",
+          },
+        ])
+        .catch((e) => e)
+
+      expect(response).toEqual(undefined)
+    })
+
+    it("should not register usage when limit is exceed for type usage", async () => {
+      const createdPromotion = await service.create({
+        code: "TEST_PROMO_USAGE",
+        type: "standard",
+        campaign_id: "campaign-id-2",
+      })
+
+      await service.updateCampaigns({
+        id: "campaign-id-2",
+        budget: { used: 1000, limit: 1000 },
+      })
+
+      await service.registerUsage([
+        {
+          action: "addShippingMethodAdjustment",
+          shipping_method_id: "shipping_method_express",
+          amount: 200,
+          code: createdPromotion.code!,
+        },
+        {
+          action: "addShippingMethodAdjustment",
+          shipping_method_id: "shipping_method_standard",
+          amount: 500,
+          code: createdPromotion.code!,
+        },
+      ])
+
+      const campaign = await service.retrieveCampaign("campaign-id-2", {
+        relations: ["budget"],
+      })
+
+      expect(campaign).toEqual(
+        expect.objectContaining({
+          budget: expect.objectContaining({
+            limit: 1000,
+            used: 1000,
+          }),
+        })
+      )
+    })
+
+    it("should not register usage above limit when exceeded for type spend", async () => {
+      const createdPromotion = await service.create({
+        code: "TEST_PROMO_SPEND",
+        type: "standard",
+        campaign_id: "campaign-id-1",
+      })
+
+      await service.updateCampaigns({
+        id: "campaign-id-1",
+        budget: { used: 900, limit: 1000 },
+      })
+
+      await service.registerUsage([
+        {
+          action: "addShippingMethodAdjustment",
+          shipping_method_id: "shipping_method_express",
+          amount: 100,
+          code: createdPromotion.code!,
+        },
+        {
+          action: "addShippingMethodAdjustment",
+          shipping_method_id: "shipping_method_standard",
+          amount: 100,
+          code: createdPromotion.code!,
+        },
+      ])
+
+      const campaign = await service.retrieveCampaign("campaign-id-1", {
+        relations: ["budget"],
+      })
+
+      expect(campaign).toEqual(
+        expect.objectContaining({
+          budget: expect.objectContaining({
+            limit: 1000,
+            used: 1000,
+          }),
+        })
+      )
+    })
+  })
+})
diff --git a/packages/promotion/src/repositories/campaign.ts b/packages/promotion/src/repositories/campaign.ts
index 5bc683689b..231dcb8563 100644
--- a/packages/promotion/src/repositories/campaign.ts
+++ b/packages/promotion/src/repositories/campaign.ts
@@ -1,5 +1,7 @@
+import { Context } from "@medusajs/types"
 import { DALUtils } from "@medusajs/utils"
-import { Campaign } from "@models"
+import { SqlEntityManager } from "@mikro-orm/postgresql"
+import { Campaign, Promotion } from "@models"
 import { CreateCampaignDTO, UpdateCampaignDTO } from "@types"
 
 export class CampaignRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
@@ -8,4 +10,144 @@ export class CampaignRepository extends DALUtils.mikroOrmBaseRepositoryFactory<
     create: CreateCampaignDTO
     update: UpdateCampaignDTO
   }
->(Campaign) {}
+>(Campaign) {
+  async create(
+    data: CreateCampaignDTO[],
+    context: Context = {}
+  ): Promise<Campaign[]> {
+    const manager = this.getActiveManager<SqlEntityManager>(context)
+    const promotionIdsToUpsert: string[] = []
+    const campaignIdentifierPromotionsMap = new Map<string, string[]>()
+
+    data.forEach((campaignData) => {
+      const campaignPromotionIds =
+        campaignData.promotions?.map((p) => p.id) || []
+
+      promotionIdsToUpsert.push(...campaignPromotionIds)
+
+      campaignIdentifierPromotionsMap.set(
+        campaignData.campaign_identifier,
+        campaignPromotionIds
+      )
+
+      delete campaignData.promotions
+    })
+
+    const existingPromotions = await manager.find(Promotion, {
+      id: promotionIdsToUpsert,
+    })
+
+    const existingPromotionsMap = new Map<string, Promotion>(
+      existingPromotions.map((promotion) => [promotion.id, promotion])
+    )
+
+    const createdCampaigns = await super.create(data, context)
+
+    for (const createdCampaign of createdCampaigns) {
+      const campaignPromotionIds =
+        campaignIdentifierPromotionsMap.get(
+          createdCampaign.campaign_identifier
+        ) || []
+
+      for (const campaignPromotionId of campaignPromotionIds) {
+        const promotion = existingPromotionsMap.get(campaignPromotionId)
+
+        if (!promotion) {
+          continue
+        }
+
+        createdCampaign.promotions.add(promotion)
+      }
+    }
+
+    return createdCampaigns
+  }
+
+  async update(
+    data: UpdateCampaignDTO[],
+    context: Context = {}
+  ): Promise<Campaign[]> {
+    const manager = this.getActiveManager<SqlEntityManager>(context)
+    const promotionIdsToUpsert: string[] = []
+    const campaignIds: string[] = []
+    const campaignPromotionIdsMap = new Map<string, string[]>()
+
+    data.forEach((campaignData) => {
+      const campaignPromotionIds = campaignData.promotions?.map((p) => p.id)
+
+      campaignIds.push(campaignData.id)
+
+      if (campaignPromotionIds) {
+        promotionIdsToUpsert.push(...campaignPromotionIds)
+        campaignPromotionIdsMap.set(campaignData.id, campaignPromotionIds)
+      }
+
+      delete campaignData.promotions
+    })
+
+    const existingCampaigns = await manager.find(
+      Campaign,
+      { id: campaignIds },
+      { populate: ["promotions"] }
+    )
+
+    const promotionIds = existingCampaigns
+      .map((campaign) => campaign.promotions?.map((p) => p.id))
+      .flat(1)
+      .concat(promotionIdsToUpsert)
+
+    const existingPromotions = await manager.find(Promotion, {
+      id: promotionIds,
+    })
+
+    const existingCampaignsMap = new Map<string, Campaign>(
+      existingCampaigns.map((campaign) => [campaign.id, campaign])
+    )
+
+    const existingPromotionsMap = new Map<string, Promotion>(
+      existingPromotions.map((promotion) => [promotion.id, promotion])
+    )
+
+    const updatedCampaigns = await super.update(data, context)
+
+    for (const updatedCampaign of updatedCampaigns) {
+      const upsertPromotionIds = campaignPromotionIdsMap.get(updatedCampaign.id)
+
+      if (!upsertPromotionIds) {
+        continue
+      }
+
+      const existingPromotionIds = (
+        existingCampaignsMap.get(updatedCampaign.id)?.promotions || []
+      ).map((p) => p.id)
+
+      for (const existingPromotionId of existingPromotionIds) {
+        const promotion = existingPromotionsMap.get(existingPromotionId)
+
+        if (!promotion) {
+          continue
+        }
+
+        if (!upsertPromotionIds.includes(existingPromotionId)) {
+          updatedCampaign.promotions.remove(promotion)
+        }
+      }
+
+      for (const promotionIdToAdd of upsertPromotionIds) {
+        const promotion = existingPromotionsMap.get(promotionIdToAdd)
+
+        if (!promotion) {
+          continue
+        }
+
+        if (existingPromotionIds.includes(promotionIdToAdd)) {
+          continue
+        } else {
+          updatedCampaign.promotions.add(promotion)
+        }
+      }
+    }
+
+    return updatedCampaigns
+  }
+}
diff --git a/packages/promotion/src/services/application-method.ts b/packages/promotion/src/services/application-method.ts
index 250e6c8433..2f0e4d38be 100644
--- a/packages/promotion/src/services/application-method.ts
+++ b/packages/promotion/src/services/application-method.ts
@@ -1,17 +1,7 @@
-import { Context, DAL, FindConfig, PromotionTypes } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL, PromotionTypes } from "@medusajs/types"
 import { ApplicationMethod } from "@models"
-import { ApplicationMethodRepository } from "@repositories"
-import {
-  CreateApplicationMethodDTO,
-  UpdateApplicationMethodDTO,
-} from "../types"
+import { ModulesSdkUtils } from "@medusajs/utils"
+import { CreateApplicationMethodDTO, UpdateApplicationMethodDTO } from "@types"
 
 type InjectedDependencies = {
   applicationMethodRepository: DAL.RepositoryService
@@ -19,90 +9,19 @@ type InjectedDependencies = {
 
 export default class ApplicationMethodService<
   TEntity extends ApplicationMethod = ApplicationMethod
-> {
-  protected readonly applicationMethodRepository_: DAL.RepositoryService
-
-  constructor({ applicationMethodRepository }: InjectedDependencies) {
-    this.applicationMethodRepository_ = applicationMethodRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreateApplicationMethodDTO
+    update: UpdateApplicationMethodDTO
+  },
+  {
+    list: PromotionTypes.FilterableApplicationMethodProps
+    listAndCount: PromotionTypes.FilterableApplicationMethodProps
   }
-
-  @InjectManager("applicationMethodRepository_")
-  async retrieve(
-    applicationMethodId: string,
-    config: FindConfig<PromotionTypes.ApplicationMethodDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      ApplicationMethod,
-      PromotionTypes.ApplicationMethodDTO
-    >({
-      id: applicationMethodId,
-      entityName: ApplicationMethod.name,
-      repository: this.applicationMethodRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("applicationMethodRepository_")
-  async list(
-    filters: PromotionTypes.FilterableApplicationMethodProps = {},
-    config: FindConfig<PromotionTypes.ApplicationMethodDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<ApplicationMethod>(
-      filters,
-      config
-    )
-
-    return (await this.applicationMethodRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("applicationMethodRepository_")
-  async listAndCount(
-    filters: PromotionTypes.FilterableApplicationMethodProps = {},
-    config: FindConfig<PromotionTypes.ApplicationMethodDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<ApplicationMethod>(
-      filters,
-      config
-    )
-
-    return (await this.applicationMethodRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("applicationMethodRepository_")
-  async create(
-    data: CreateApplicationMethodDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.applicationMethodRepository_ as ApplicationMethodRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("applicationMethodRepository_")
-  async update(
-    data: UpdateApplicationMethodDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.applicationMethodRepository_ as ApplicationMethodRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("applicationMethodRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.applicationMethodRepository_.delete(ids, sharedContext)
+>(ApplicationMethod)<TEntity> {
+  constructor(...args: any[]) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/promotion/src/services/campaign-budget.ts b/packages/promotion/src/services/campaign-budget.ts
index affef9a89b..269b337787 100644
--- a/packages/promotion/src/services/campaign-budget.ts
+++ b/packages/promotion/src/services/campaign-budget.ts
@@ -1,13 +1,6 @@
-import { Context, DAL, FindConfig, PromotionTypes } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL, PromotionTypes } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { CampaignBudget } from "@models"
-import { CampaignBudgetRepository } from "@repositories"
 import { CreateCampaignBudgetDTO, UpdateCampaignBudgetDTO } from "../types"
 
 type InjectedDependencies = {
@@ -16,90 +9,19 @@ type InjectedDependencies = {
 
 export default class CampaignBudgetService<
   TEntity extends CampaignBudget = CampaignBudget
-> {
-  protected readonly campaignBudgetRepository_: DAL.RepositoryService
-
-  constructor({ campaignBudgetRepository }: InjectedDependencies) {
-    this.campaignBudgetRepository_ = campaignBudgetRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreateCampaignBudgetDTO
+    update: UpdateCampaignBudgetDTO
+  },
+  {
+    list: PromotionTypes.FilterableCampaignBudgetProps
+    listAndCount: PromotionTypes.FilterableCampaignBudgetProps
   }
-
-  @InjectManager("campaignBudgetRepository_")
-  async retrieve(
-    campaignBudgetId: string,
-    config: FindConfig<PromotionTypes.CampaignBudgetDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      CampaignBudget,
-      PromotionTypes.CampaignBudgetDTO
-    >({
-      id: campaignBudgetId,
-      entityName: CampaignBudget.name,
-      repository: this.campaignBudgetRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("campaignBudgetRepository_")
-  async list(
-    filters: PromotionTypes.FilterableCampaignBudgetProps = {},
-    config: FindConfig<PromotionTypes.CampaignBudgetDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<CampaignBudget>(
-      filters,
-      config
-    )
-
-    return (await this.campaignBudgetRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("campaignBudgetRepository_")
-  async listAndCount(
-    filters: PromotionTypes.FilterableCampaignBudgetProps = {},
-    config: FindConfig<PromotionTypes.CampaignBudgetDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<CampaignBudget>(
-      filters,
-      config
-    )
-
-    return (await this.campaignBudgetRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("campaignBudgetRepository_")
-  async create(
-    data: CreateCampaignBudgetDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.campaignBudgetRepository_ as CampaignBudgetRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("campaignBudgetRepository_")
-  async update(
-    data: UpdateCampaignBudgetDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.campaignBudgetRepository_ as CampaignBudgetRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("campaignBudgetRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.campaignBudgetRepository_.delete(ids, sharedContext)
+>(CampaignBudget)<TEntity> {
+  constructor(...args: any[]) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/promotion/src/services/campaign.ts b/packages/promotion/src/services/campaign.ts
index e7cf2f6a1d..1f7b83adae 100644
--- a/packages/promotion/src/services/campaign.ts
+++ b/packages/promotion/src/services/campaign.ts
@@ -1,96 +1,27 @@
-import { Context, DAL, FindConfig, PromotionTypes } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL, PromotionTypes } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { Campaign } from "@models"
-import { CampaignRepository } from "@repositories"
 import { CreateCampaignDTO, UpdateCampaignDTO } from "../types"
 
 type InjectedDependencies = {
   campaignRepository: DAL.RepositoryService
 }
 
-export default class CampaignService<TEntity extends Campaign = Campaign> {
-  protected readonly campaignRepository_: DAL.RepositoryService
-
-  constructor({ campaignRepository }: InjectedDependencies) {
-    this.campaignRepository_ = campaignRepository
+export default class CampaignService<
+  TEntity extends Campaign = Campaign
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreateCampaignDTO
+    update: UpdateCampaignDTO
+  },
+  {
+    list: PromotionTypes.FilterableCampaignProps
+    listAndCount: PromotionTypes.FilterableCampaignProps
   }
-
-  @InjectManager("campaignRepository_")
-  async retrieve(
-    campaignId: string,
-    config: FindConfig<PromotionTypes.CampaignDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<Campaign, PromotionTypes.CampaignDTO>({
-      id: campaignId,
-      entityName: Campaign.name,
-      repository: this.campaignRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("campaignRepository_")
-  async list(
-    filters: PromotionTypes.FilterableCampaignProps = {},
-    config: FindConfig<PromotionTypes.CampaignDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<Campaign>(filters, config)
-
-    return (await this.campaignRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("campaignRepository_")
-  async listAndCount(
-    filters: PromotionTypes.FilterableCampaignProps = {},
-    config: FindConfig<PromotionTypes.CampaignDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<Campaign>(filters, config)
-
-    return (await this.campaignRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("campaignRepository_")
-  async create(
-    data: CreateCampaignDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.campaignRepository_ as CampaignRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("campaignRepository_")
-  async update(
-    data: UpdateCampaignDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.campaignRepository_ as CampaignRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("campaignRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.campaignRepository_.delete(ids, sharedContext)
+>(Campaign)<TEntity> {
+  constructor(...args: any[]) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/promotion/src/services/promotion-module.ts b/packages/promotion/src/services/promotion-module.ts
index 275d74e265..90d61307e9 100644
--- a/packages/promotion/src/services/promotion-module.ts
+++ b/packages/promotion/src/services/promotion-module.ts
@@ -8,6 +8,7 @@ import {
 } from "@medusajs/types"
 import {
   ApplicationMethodTargetType,
+  CampaignBudgetType,
   InjectManager,
   InjectTransactionManager,
   MedusaContext,
@@ -90,6 +91,110 @@ export default class PromotionModuleService<
     return joinerConfig
   }
 
+  @InjectManager("baseRepository_")
+  async registerUsage(
+    computedActions: PromotionTypes.UsageComputedActions[],
+    @MedusaContext() sharedContext: Context = {}
+  ): Promise<void> {
+    const promotionCodes = computedActions
+      .map((computedAction) => computedAction.code)
+      .filter(Boolean)
+
+    const promotionCodeCampaignBudgetMap = new Map<
+      string,
+      UpdateCampaignBudgetDTO
+    >()
+    const promotionCodeUsageMap = new Map<string, boolean>()
+
+    const existingPromotions = await this.list(
+      { code: promotionCodes },
+      { relations: ["application_method", "campaign", "campaign.budget"] },
+      sharedContext
+    )
+
+    const existingPromotionsMap = new Map<string, PromotionTypes.PromotionDTO>(
+      existingPromotions.map((promotion) => [promotion.code!, promotion])
+    )
+
+    for (let computedAction of computedActions) {
+      if (!ComputeActionUtils.canRegisterUsage(computedAction)) {
+        continue
+      }
+
+      const promotion = existingPromotionsMap.get(computedAction.code)
+
+      if (!promotion) {
+        continue
+      }
+
+      const campaignBudget = promotion.campaign?.budget
+
+      if (!campaignBudget) {
+        continue
+      }
+
+      if (campaignBudget.type === CampaignBudgetType.SPEND) {
+        const campaignBudgetData = promotionCodeCampaignBudgetMap.get(
+          campaignBudget.id
+        ) || { id: campaignBudget.id, used: campaignBudget.used || 0 }
+
+        campaignBudgetData.used =
+          (campaignBudgetData.used || 0) + computedAction.amount
+
+        if (
+          campaignBudget.limit &&
+          campaignBudgetData.used > campaignBudget.limit
+        ) {
+          continue
+        }
+
+        promotionCodeCampaignBudgetMap.set(
+          campaignBudget.id,
+          campaignBudgetData
+        )
+      }
+
+      if (campaignBudget.type === CampaignBudgetType.USAGE) {
+        const promotionAlreadyUsed =
+          promotionCodeUsageMap.get(promotion.code!) || false
+
+        if (promotionAlreadyUsed) {
+          continue
+        }
+
+        const campaignBudgetData = {
+          id: campaignBudget.id,
+          used: (campaignBudget.used || 0) + 1,
+        }
+
+        if (
+          campaignBudget.limit &&
+          campaignBudgetData.used > campaignBudget.limit
+        ) {
+          continue
+        }
+
+        promotionCodeCampaignBudgetMap.set(
+          campaignBudget.id,
+          campaignBudgetData
+        )
+
+        promotionCodeUsageMap.set(promotion.code!, true)
+      }
+
+      const campaignBudgetsData: UpdateCampaignBudgetDTO[] = []
+
+      for (const [_, campaignBudgetData] of promotionCodeCampaignBudgetMap) {
+        campaignBudgetsData.push(campaignBudgetData)
+      }
+
+      await this.campaignBudgetService_.update(
+        campaignBudgetsData,
+        sharedContext
+      )
+    }
+  }
+
   async computeActions(
     promotionCodesToApply: string[],
     applicationContext: PromotionTypes.ComputeActionContext,
@@ -140,6 +245,8 @@ export default class PromotionModuleService<
           "application_method.target_rules.values",
           "rules",
           "rules.values",
+          "campaign",
+          "campaign.budget",
         ],
       }
     )
@@ -166,6 +273,7 @@ export default class PromotionModuleService<
         computedActions.push({
           action: "removeItemAdjustment",
           adjustment_id: codeAdjustmentMap.get(appliedCode)!.id,
+          code: appliedCode,
         })
       }
 
@@ -173,6 +281,7 @@ export default class PromotionModuleService<
         computedActions.push({
           action: "removeShippingMethodAdjustment",
           adjustment_id: codeAdjustmentMap.get(appliedCode)!.id,
+          code: appliedCode,
         })
       }
     }
@@ -314,6 +423,7 @@ export default class PromotionModuleService<
           "application_method.target_rules.values",
           "rules",
           "rules.values",
+          "campaign",
         ],
       },
       sharedContext
@@ -329,12 +439,12 @@ export default class PromotionModuleService<
   ) {
     const promotionsData: CreatePromotionDTO[] = []
     const applicationMethodsData: CreateApplicationMethodDTO[] = []
+    const campaignsData: CreateCampaignDTO[] = []
 
     const promotionCodeApplicationMethodDataMap = new Map<
       string,
       PromotionTypes.CreateApplicationMethodDTO
     >()
-
     const promotionCodeRulesDataMap = new Map<
       string,
       PromotionTypes.CreatePromotionRuleDTO[]
@@ -343,10 +453,16 @@ export default class PromotionModuleService<
       string,
       PromotionTypes.CreatePromotionRuleDTO[]
     >()
+    const promotionCodeCampaignMap = new Map<
+      string,
+      PromotionTypes.CreateCampaignDTO
+    >()
 
     for (const {
       application_method: applicationMethodData,
       rules: rulesData,
+      campaign: campaignData,
+      campaign_id: campaignId,
       ...promotionData
     } of data) {
       if (applicationMethodData) {
@@ -360,7 +476,21 @@ export default class PromotionModuleService<
         promotionCodeRulesDataMap.set(promotionData.code, rulesData)
       }
 
-      promotionsData.push(promotionData)
+      if (campaignData && campaignId) {
+        throw new MedusaError(
+          MedusaError.Types.INVALID_DATA,
+          `Provide either the 'campaign' or 'campaign_id' parameter; both cannot be used simultaneously.`
+        )
+      }
+
+      if (campaignData) {
+        promotionCodeCampaignMap.set(promotionData.code, campaignData)
+      }
+
+      promotionsData.push({
+        ...promotionData,
+        campaign: campaignId,
+      })
     }
 
     const createdPromotions = await this.promotionService_.create(
@@ -373,6 +503,15 @@ export default class PromotionModuleService<
         promotion.code
       )
 
+      const campaignData = promotionCodeCampaignMap.get(promotion.code)
+
+      if (campaignData) {
+        campaignsData.push({
+          ...campaignData,
+          promotions: [promotion],
+        })
+      }
+
       if (applMethodData) {
         const {
           target_rules: targetRulesData = [],
@@ -416,6 +555,10 @@ export default class PromotionModuleService<
         sharedContext
       )
 
+    if (campaignsData.length) {
+      await this.createCampaigns(campaignsData, sharedContext)
+    }
+
     for (const applicationMethod of createdApplicationMethods) {
       await this.createPromotionRulesAndValues(
         applicationMethodRuleMap.get(applicationMethod.promotion.id) || [],
@@ -456,6 +599,7 @@ export default class PromotionModuleService<
           "application_method.target_rules",
           "rules",
           "rules.values",
+          "campaign",
         ],
       },
       sharedContext
@@ -471,13 +615,10 @@ export default class PromotionModuleService<
   ) {
     const promotionIds = data.map((d) => d.id)
     const existingPromotions = await this.promotionService_.list(
-      {
-        id: promotionIds,
-      },
-      {
-        relations: ["application_method"],
-      }
+      { id: promotionIds },
+      { relations: ["application_method"] }
     )
+
     const existingPromotionsMap = new Map<string, Promotion>(
       existingPromotions.map((promotion) => [promotion.id, promotion])
     )
@@ -487,9 +628,14 @@ export default class PromotionModuleService<
 
     for (const {
       application_method: applicationMethodData,
+      campaign_id: campaignId,
       ...promotionData
     } of data) {
-      promotionsData.push(promotionData)
+      if (campaignId) {
+        promotionsData.push({ ...promotionData, campaign: campaignId })
+      } else {
+        promotionsData.push(promotionData)
+      }
 
       if (!applicationMethodData) {
         continue
@@ -507,6 +653,7 @@ export default class PromotionModuleService<
         !allowedAllocationForQuantity.includes(applicationMethodData.allocation)
       ) {
         applicationMethodData.max_quantity = null
+        existingApplicationMethod.max_quantity = null
       }
 
       validateApplicationMethodAttributes({
@@ -820,7 +967,19 @@ export default class PromotionModuleService<
     >()
 
     for (const createCampaignData of data) {
-      const { budget: campaignBudgetData, ...campaignData } = createCampaignData
+      const {
+        budget: campaignBudgetData,
+        promotions,
+        ...campaignData
+      } = createCampaignData
+
+      const promotionsToAdd = promotions
+        ? await this.list(
+            { id: promotions.map((p) => p.id) },
+            {},
+            sharedContext
+          )
+        : []
 
       if (campaignBudgetData) {
         campaignIdentifierBudgetMap.set(
@@ -829,7 +988,10 @@ export default class PromotionModuleService<
         )
       }
 
-      campaignsData.push(campaignData)
+      campaignsData.push({
+        ...campaignData,
+        promotions: promotionsToAdd,
+      })
     }
 
     const createdCampaigns = await this.campaignService_.create(
@@ -882,7 +1044,7 @@ export default class PromotionModuleService<
     const campaigns = await this.listCampaigns(
       { id: updatedCampaigns.map((p) => p!.id) },
       {
-        relations: ["budget"],
+        relations: ["budget", "promotions"],
       },
       sharedContext
     )
@@ -900,12 +1062,8 @@ export default class PromotionModuleService<
     const campaignBudgetsData: UpdateCampaignBudgetDTO[] = []
 
     const existingCampaigns = await this.listCampaigns(
-      {
-        id: campaignIds,
-      },
-      {
-        relations: ["budget"],
-      },
+      { id: campaignIds },
+      { relations: ["budget"] },
       sharedContext
     )
 
diff --git a/packages/promotion/src/services/promotion-rule-value.ts b/packages/promotion/src/services/promotion-rule-value.ts
index e54227f32b..90a0487d94 100644
--- a/packages/promotion/src/services/promotion-rule-value.ts
+++ b/packages/promotion/src/services/promotion-rule-value.ts
@@ -1,13 +1,6 @@
-import { Context, DAL, FindConfig, PromotionTypes } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL, PromotionTypes } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { PromotionRuleValue } from "@models"
-import { PromotionRuleValueRepository } from "@repositories"
 import {
   CreatePromotionRuleValueDTO,
   UpdatePromotionRuleValueDTO,
@@ -19,90 +12,19 @@ type InjectedDependencies = {
 
 export default class PromotionRuleValueService<
   TEntity extends PromotionRuleValue = PromotionRuleValue
-> {
-  protected readonly promotionRuleValueRepository_: DAL.RepositoryService
-
-  constructor({ promotionRuleValueRepository }: InjectedDependencies) {
-    this.promotionRuleValueRepository_ = promotionRuleValueRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreatePromotionRuleValueDTO
+    update: UpdatePromotionRuleValueDTO
+  },
+  {
+    list: PromotionTypes.FilterablePromotionRuleValueProps
+    listAndCount: PromotionTypes.FilterablePromotionRuleValueProps
   }
-
-  @InjectManager("promotionRuleValueRepository_")
-  async retrieve(
-    promotionRuleValueId: string,
-    config: FindConfig<PromotionTypes.PromotionRuleValueDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      PromotionRuleValue,
-      PromotionTypes.PromotionRuleValueDTO
-    >({
-      id: promotionRuleValueId,
-      entityName: PromotionRuleValue.name,
-      repository: this.promotionRuleValueRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("promotionRuleValueRepository_")
-  async list(
-    filters: PromotionTypes.FilterablePromotionRuleValueProps = {},
-    config: FindConfig<PromotionTypes.PromotionRuleValueDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PromotionRuleValue>(
-      filters,
-      config
-    )
-
-    return (await this.promotionRuleValueRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("promotionRuleValueRepository_")
-  async listAndCount(
-    filters: PromotionTypes.FilterablePromotionRuleValueProps = {},
-    config: FindConfig<PromotionTypes.PromotionRuleValueDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PromotionRuleValue>(
-      filters,
-      config
-    )
-
-    return (await this.promotionRuleValueRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("promotionRuleValueRepository_")
-  async create(
-    data: CreatePromotionRuleValueDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.promotionRuleValueRepository_ as PromotionRuleValueRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("promotionRuleValueRepository_")
-  async update(
-    data: UpdatePromotionRuleValueDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.promotionRuleValueRepository_ as PromotionRuleValueRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("promotionRuleValueRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.promotionRuleValueRepository_.delete(ids, sharedContext)
+>(PromotionRuleValue)<TEntity> {
+  constructor(...args: any[]) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/promotion/src/services/promotion-rule.ts b/packages/promotion/src/services/promotion-rule.ts
index 6c8fbd5c24..a8654617c7 100644
--- a/packages/promotion/src/services/promotion-rule.ts
+++ b/packages/promotion/src/services/promotion-rule.ts
@@ -1,13 +1,6 @@
-import { Context, DAL, FindConfig, PromotionTypes } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL, PromotionTypes } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { PromotionRule } from "@models"
-import { PromotionRuleRepository } from "@repositories"
 import { CreatePromotionRuleDTO, UpdatePromotionRuleDTO } from "../types"
 
 type InjectedDependencies = {
@@ -16,90 +9,19 @@ type InjectedDependencies = {
 
 export default class PromotionRuleService<
   TEntity extends PromotionRule = PromotionRule
-> {
-  protected readonly promotionRuleRepository_: DAL.RepositoryService
-
-  constructor({ promotionRuleRepository }: InjectedDependencies) {
-    this.promotionRuleRepository_ = promotionRuleRepository
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreatePromotionRuleDTO
+    update: UpdatePromotionRuleDTO
+  },
+  {
+    list: PromotionTypes.FilterablePromotionRuleProps
+    listAndCount: PromotionTypes.FilterablePromotionRuleProps
   }
-
-  @InjectManager("promotionRuleRepository_")
-  async retrieve(
-    promotionRuleId: string,
-    config: FindConfig<PromotionTypes.PromotionRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<
-      PromotionRule,
-      PromotionTypes.PromotionRuleDTO
-    >({
-      id: promotionRuleId,
-      entityName: PromotionRule.name,
-      repository: this.promotionRuleRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("promotionRuleRepository_")
-  async list(
-    filters: PromotionTypes.FilterablePromotionRuleProps = {},
-    config: FindConfig<PromotionTypes.PromotionRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PromotionRule>(
-      filters,
-      config
-    )
-
-    return (await this.promotionRuleRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("promotionRuleRepository_")
-  async listAndCount(
-    filters: PromotionTypes.FilterablePromotionRuleProps = {},
-    config: FindConfig<PromotionTypes.PromotionRuleDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<PromotionRule>(
-      filters,
-      config
-    )
-
-    return (await this.promotionRuleRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("promotionRuleRepository_")
-  async create(
-    data: CreatePromotionRuleDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.promotionRuleRepository_ as PromotionRuleRepository
-    ).create(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("promotionRuleRepository_")
-  async update(
-    data: UpdatePromotionRuleDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (
-      this.promotionRuleRepository_ as PromotionRuleRepository
-    ).update(data, sharedContext)) as TEntity[]
-  }
-
-  @InjectTransactionManager("promotionRuleRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.promotionRuleRepository_.delete(ids, sharedContext)
+>(PromotionRule)<TEntity> {
+  constructor(...args: any[]) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/promotion/src/services/promotion.ts b/packages/promotion/src/services/promotion.ts
index 5461be7df4..74c8e71ba3 100644
--- a/packages/promotion/src/services/promotion.ts
+++ b/packages/promotion/src/services/promotion.ts
@@ -1,96 +1,27 @@
-import { Context, DAL, FindConfig, PromotionTypes } from "@medusajs/types"
-import {
-  InjectManager,
-  InjectTransactionManager,
-  MedusaContext,
-  ModulesSdkUtils,
-  retrieveEntity,
-} from "@medusajs/utils"
+import { DAL, PromotionTypes } from "@medusajs/types"
+import { ModulesSdkUtils } from "@medusajs/utils"
 import { Promotion } from "@models"
-import { PromotionRepository } from "@repositories"
 import { CreatePromotionDTO, UpdatePromotionDTO } from "../types"
 
 type InjectedDependencies = {
   promotionRepository: DAL.RepositoryService
 }
 
-export default class PromotionService<TEntity extends Promotion = Promotion> {
-  protected readonly promotionRepository_: DAL.RepositoryService
-
-  constructor({ promotionRepository }: InjectedDependencies) {
-    this.promotionRepository_ = promotionRepository
+export default class PromotionService<
+  TEntity extends Promotion = Promotion
+> extends ModulesSdkUtils.abstractServiceFactory<
+  InjectedDependencies,
+  {
+    create: CreatePromotionDTO
+    update: UpdatePromotionDTO
+  },
+  {
+    list: PromotionTypes.FilterablePromotionProps
+    listAndCount: PromotionTypes.FilterablePromotionProps
   }
-
-  @InjectManager("promotionRepository_")
-  async retrieve(
-    promotionId: string,
-    config: FindConfig<PromotionTypes.PromotionDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity> {
-    return (await retrieveEntity<Promotion, PromotionTypes.PromotionDTO>({
-      id: promotionId,
-      entityName: Promotion.name,
-      repository: this.promotionRepository_,
-      config,
-      sharedContext,
-    })) as TEntity
-  }
-
-  @InjectManager("promotionRepository_")
-  async list(
-    filters: PromotionTypes.FilterablePromotionProps = {},
-    config: FindConfig<PromotionTypes.PromotionDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<Promotion>(filters, config)
-
-    return (await this.promotionRepository_.find(
-      queryOptions,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectManager("promotionRepository_")
-  async listAndCount(
-    filters: PromotionTypes.FilterablePromotionProps = {},
-    config: FindConfig<PromotionTypes.PromotionDTO> = {},
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<[TEntity[], number]> {
-    const queryOptions = ModulesSdkUtils.buildQuery<Promotion>(filters, config)
-
-    return (await this.promotionRepository_.findAndCount(
-      queryOptions,
-      sharedContext
-    )) as [TEntity[], number]
-  }
-
-  @InjectTransactionManager("promotionRepository_")
-  async create(
-    data: CreatePromotionDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.promotionRepository_ as PromotionRepository).create(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("promotionRepository_")
-  async update(
-    data: UpdatePromotionDTO[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<TEntity[]> {
-    return (await (this.promotionRepository_ as PromotionRepository).update(
-      data,
-      sharedContext
-    )) as TEntity[]
-  }
-
-  @InjectTransactionManager("promotionRepository_")
-  async delete(
-    ids: string[],
-    @MedusaContext() sharedContext: Context = {}
-  ): Promise<void> {
-    await this.promotionRepository_.delete(ids, sharedContext)
+>(Promotion)<TEntity> {
+  constructor(...args: any[]) {
+    // @ts-ignore
+    super(...arguments)
   }
 }
diff --git a/packages/promotion/src/types/campaign.ts b/packages/promotion/src/types/campaign.ts
index be55383763..70e21d2395 100644
--- a/packages/promotion/src/types/campaign.ts
+++ b/packages/promotion/src/types/campaign.ts
@@ -1,3 +1,6 @@
+import { PromotionDTO } from "@medusajs/types"
+import { Promotion } from "@models"
+
 export interface CreateCampaignDTO {
   name: string
   description?: string
@@ -5,6 +8,7 @@ export interface CreateCampaignDTO {
   campaign_identifier: string
   starts_at: Date
   ends_at: Date
+  promotions?: (PromotionDTO | Promotion)[]
 }
 
 export interface UpdateCampaignDTO {
@@ -15,4 +19,5 @@ export interface UpdateCampaignDTO {
   campaign_identifier?: string
   starts_at?: Date
   ends_at?: Date
+  promotions?: (PromotionDTO | Promotion)[]
 }
diff --git a/packages/promotion/src/types/promotion.ts b/packages/promotion/src/types/promotion.ts
index 502e4fdd60..8e63c442cf 100644
--- a/packages/promotion/src/types/promotion.ts
+++ b/packages/promotion/src/types/promotion.ts
@@ -4,6 +4,7 @@ export interface CreatePromotionDTO {
   code: string
   type: PromotionType
   is_automatic?: boolean
+  campaign?: string
 }
 
 export interface UpdatePromotionDTO {
@@ -12,4 +13,5 @@ export interface UpdatePromotionDTO {
   // TODO: add this when buyget is available
   // type: PromotionType
   is_automatic?: boolean
+  campaign?: string
 }
diff --git a/packages/promotion/src/utils/compute-actions/index.ts b/packages/promotion/src/utils/compute-actions/index.ts
index 8b2cbf288c..33d690935a 100644
--- a/packages/promotion/src/utils/compute-actions/index.ts
+++ b/packages/promotion/src/utils/compute-actions/index.ts
@@ -1,3 +1,4 @@
 export * from "./items"
 export * from "./order"
 export * from "./shipping-methods"
+export * from "./usage"
diff --git a/packages/promotion/src/utils/compute-actions/items.ts b/packages/promotion/src/utils/compute-actions/items.ts
index 0e2a308e88..afbf400b56 100644
--- a/packages/promotion/src/utils/compute-actions/items.ts
+++ b/packages/promotion/src/utils/compute-actions/items.ts
@@ -5,9 +5,11 @@ import {
 import {
   ApplicationMethodAllocation,
   ApplicationMethodTargetType,
+  ComputedActions,
   MedusaError,
 } from "@medusajs/utils"
 import { areRulesValidForContext } from "../validations"
+import { computeActionForBudgetExceeded } from "./usage"
 
 export function getComputedActionsForItems(
   promotion: PromotionTypes.PromotionDTO,
@@ -61,22 +63,35 @@ export function applyPromotionToItems(
   ) {
     for (const method of items!) {
       const appliedPromoValue = methodIdPromoValueMap.get(method.id) || 0
-      const promotionValue = parseFloat(applicationMethod!.value!)
+      const quantityMultiplier = Math.min(
+        method.quantity,
+        applicationMethod?.max_quantity!
+      )
+      const promotionValue =
+        parseFloat(applicationMethod!.value!) * quantityMultiplier
       const applicableTotal =
-        method.unit_price *
-          Math.min(method.quantity, applicationMethod?.max_quantity!) -
-        appliedPromoValue
-
+        method.unit_price * quantityMultiplier - appliedPromoValue
       const amount = Math.min(promotionValue, applicableTotal)
 
       if (amount <= 0) {
         continue
       }
 
+      const budgetExceededAction = computeActionForBudgetExceeded(
+        promotion,
+        amount
+      )
+
+      if (budgetExceededAction) {
+        computedActions.push(budgetExceededAction)
+
+        continue
+      }
+
       methodIdPromoValueMap.set(method.id, appliedPromoValue + amount)
 
       computedActions.push({
-        action: "addItemAdjustment",
+        action: ComputedActions.ADD_ITEM_ADJUSTMENT,
         item_id: method.id,
         amount,
         code: promotion.code!,
@@ -91,35 +106,37 @@ export function applyPromotionToItems(
   ) {
     const totalApplicableValue = items!.reduce((acc, method) => {
       const appliedPromoValue = methodIdPromoValueMap.get(method.id) || 0
-      return (
-        acc +
-        method.unit_price *
-          Math.min(method.quantity, applicationMethod?.max_quantity!) -
-        appliedPromoValue
-      )
+      return acc + method.unit_price * method.quantity - appliedPromoValue
     }, 0)
 
     for (const method of items!) {
       const promotionValue = parseFloat(applicationMethod!.value!)
       const appliedPromoValue = methodIdPromoValueMap.get(method.id) || 0
-
       const applicableTotal =
-        method.unit_price *
-          Math.min(method.quantity, applicationMethod?.max_quantity!) -
-        appliedPromoValue
+        method.unit_price * method.quantity - appliedPromoValue
 
       // TODO: should we worry about precision here?
       const applicablePromotionValue =
         (applicableTotal / totalApplicableValue) * promotionValue
-
       const amount = Math.min(applicablePromotionValue, applicableTotal)
 
       if (amount <= 0) {
         continue
       }
 
+      const budgetExceededAction = computeActionForBudgetExceeded(
+        promotion,
+        amount
+      )
+
+      if (budgetExceededAction) {
+        computedActions.push(budgetExceededAction)
+
+        continue
+      }
+
       computedActions.push({
-        action: "addItemAdjustment",
+        action: ComputedActions.ADD_ITEM_ADJUSTMENT,
         item_id: method.id,
         amount,
         code: promotion.code!,
diff --git a/packages/promotion/src/utils/compute-actions/shipping-methods.ts b/packages/promotion/src/utils/compute-actions/shipping-methods.ts
index 2028c1b907..440021f482 100644
--- a/packages/promotion/src/utils/compute-actions/shipping-methods.ts
+++ b/packages/promotion/src/utils/compute-actions/shipping-methods.ts
@@ -2,9 +2,11 @@ import { PromotionTypes } from "@medusajs/types"
 import {
   ApplicationMethodAllocation,
   ApplicationMethodTargetType,
+  ComputedActions,
   MedusaError,
 } from "@medusajs/utils"
 import { areRulesValidForContext } from "../validations"
+import { computeActionForBudgetExceeded } from "./usage"
 
 export function getComputedActionsForShippingMethods(
   promotion: PromotionTypes.PromotionDTO,
@@ -61,10 +63,21 @@ export function applyPromotionToShippingMethods(
         continue
       }
 
+      const budgetExceededAction = computeActionForBudgetExceeded(
+        promotion,
+        amount
+      )
+
+      if (budgetExceededAction) {
+        computedActions.push(budgetExceededAction)
+
+        continue
+      }
+
       methodIdPromoValueMap.set(method.id, appliedPromoValue + amount)
 
       computedActions.push({
-        action: "addShippingMethodAdjustment",
+        action: ComputedActions.ADD_SHIPPING_METHOD_ADJUSTMENT,
         shipping_method_id: method.id,
         amount,
         code: promotion.code!,
@@ -99,10 +112,21 @@ export function applyPromotionToShippingMethods(
         continue
       }
 
+      const budgetExceededAction = computeActionForBudgetExceeded(
+        promotion,
+        amount
+      )
+
+      if (budgetExceededAction) {
+        computedActions.push(budgetExceededAction)
+
+        continue
+      }
+
       methodIdPromoValueMap.set(method.id, appliedPromoValue + amount)
 
       computedActions.push({
-        action: "addShippingMethodAdjustment",
+        action: ComputedActions.ADD_SHIPPING_METHOD_ADJUSTMENT,
         shipping_method_id: method.id,
         amount,
         code: promotion.code!,
diff --git a/packages/promotion/src/utils/compute-actions/usage.ts b/packages/promotion/src/utils/compute-actions/usage.ts
new file mode 100644
index 0000000000..f2f5e10e51
--- /dev/null
+++ b/packages/promotion/src/utils/compute-actions/usage.ts
@@ -0,0 +1,39 @@
+import {
+  CampaignBudgetExceededAction,
+  ComputeActions,
+  PromotionDTO,
+} from "@medusajs/types"
+import { CampaignBudgetType, ComputedActions } from "@medusajs/utils"
+
+export function canRegisterUsage(computedAction: ComputeActions): boolean {
+  return (
+    [
+      ComputedActions.ADD_ITEM_ADJUSTMENT,
+      ComputedActions.ADD_SHIPPING_METHOD_ADJUSTMENT,
+    ] as string[]
+  ).includes(computedAction.action)
+}
+
+export function computeActionForBudgetExceeded(
+  promotion: PromotionDTO,
+  amount: number
+): CampaignBudgetExceededAction | void {
+  const campaignBudget = promotion.campaign?.budget
+
+  if (!campaignBudget) {
+    return
+  }
+
+  const campaignBudgetUsed = campaignBudget.used || 0
+  const totalUsed =
+    campaignBudget.type === CampaignBudgetType.SPEND
+      ? campaignBudgetUsed + amount
+      : campaignBudgetUsed + 1
+
+  if (campaignBudget.limit && totalUsed > campaignBudget.limit) {
+    return {
+      action: ComputedActions.CAMPAIGN_BUDGET_EXCEEDED,
+      code: promotion.code!,
+    }
+  }
+}
diff --git a/packages/promotion/src/utils/validations/application-method.ts b/packages/promotion/src/utils/validations/application-method.ts
index 1f7d299fa6..95d384e19f 100644
--- a/packages/promotion/src/utils/validations/application-method.ts
+++ b/packages/promotion/src/utils/validations/application-method.ts
@@ -9,6 +9,7 @@ import {
   ApplicationMethodType,
   MedusaError,
   isDefined,
+  isPresent,
 } from "@medusajs/utils"
 
 export const allowedAllocationTargetTypes: string[] = [
@@ -33,6 +34,16 @@ export function validateApplicationMethodAttributes(data: {
 }) {
   const allTargetTypes: string[] = Object.values(ApplicationMethodTargetType)
 
+  if (
+    data.allocation === ApplicationMethodAllocation.ACROSS &&
+    isPresent(data.max_quantity)
+  ) {
+    throw new MedusaError(
+      MedusaError.Types.INVALID_DATA,
+      `application_method.max_quantity is not allowed to be set for allocation (${ApplicationMethodAllocation.ACROSS})`
+    )
+  }
+
   if (!allTargetTypes.includes(data.target_type)) {
     throw new MedusaError(
       MedusaError.Types.INVALID_DATA,
diff --git a/packages/types/src/cart/common.ts b/packages/types/src/cart/common.ts
index 1e17abf889..508bfc8dc7 100644
--- a/packages/types/src/cart/common.ts
+++ b/packages/types/src/cart/common.ts
@@ -168,6 +168,11 @@ export interface CartShippingMethodDTO {
    */
   id: string
 
+  /**
+   * The ID of the associated cart
+   */
+  cart_id: string
+
   /**
    * The name of the shipping method
    */
@@ -336,6 +341,16 @@ export interface CartLineItemDTO {
    * @expandable
    */
   adjustments?: LineItemAdjustmentLineDTO[]
+  /**
+   * The associated cart.
+   *
+   * @expandable
+   */
+  cart: CartDTO
+  /**
+   * The ID of the associated cart.
+   */
+  cart_id: string
   /**
    * Holds custom data in key-value pairs.
    */
@@ -470,12 +485,28 @@ export interface FilterableAddressProps
   id?: string | string[]
 }
 
+export interface FilterableLineItemProps
+  extends BaseFilterable<FilterableLineItemProps> {
+  id?: string | string[]
+  cart_id?: string | string[]
+  title?: string
+  variant_id?: string | string[]
+  product_id?: string | string[]
+}
+
+export interface FilterableShippingMethodProps
+  extends BaseFilterable<FilterableShippingMethodProps> {
+  id?: string | string[]
+  cart_id?: string | string[]
+  name?: string
+  shipping_option_id?: string | string[]
+}
+
 /**
- * TODO: Remove this in favor of CartDTO, when module is released 
+ * TODO: Remove this in favor of CartDTO, when module is released
  * @deprecated Use CartDTO instead
  */
- 
-export type legacy__CartDTO = {
+export type legacy_CartDTO = {
   id?: string
   email?: string
   billing_address_id?: string
diff --git a/packages/types/src/cart/mutations.ts b/packages/types/src/cart/mutations.ts
index 0ed7f581aa..6416d0a7c9 100644
--- a/packages/types/src/cart/mutations.ts
+++ b/packages/types/src/cart/mutations.ts
@@ -1,3 +1,5 @@
+import { CartLineItemDTO } from "./common"
+
 export interface UpsertAddressDTO {
   customer_id?: string
   company?: string
@@ -23,17 +25,15 @@ export interface CreateCartDTO {
   region_id?: string
   customer_id?: string
   sales_channel_id?: string
-
   email?: string
   currency_code: string
-
   shipping_address_id?: string
   billing_address_id?: string
-
   shipping_address?: CreateAddressDTO | UpdateAddressDTO
   billing_address?: CreateAddressDTO | UpdateAddressDTO
-
   metadata?: Record<string, unknown>
+
+  items?: CreateLineItemDTO[]
 }
 
 export interface UpdateCartDTO {
@@ -54,7 +54,7 @@ export interface UpdateCartDTO {
   metadata?: Record<string, unknown>
 }
 
-export interface CreateLineItemTaxLineDTO {
+export interface CreateTaxLineDTO {
   description?: string
   tax_rate_id?: string
   code: string
@@ -62,7 +62,7 @@ export interface CreateLineItemTaxLineDTO {
   provider_id?: string
 }
 
-export interface CreateLineItemAdjustmentDTO {
+export interface CreateAdjustmentDTO {
   code: string
   amount: number
   description?: string
@@ -70,7 +70,7 @@ export interface CreateLineItemAdjustmentDTO {
   provider_id?: string
 }
 
-export interface UpdateLineItemTaxLineDTO {
+export interface UpdateTaxLineDTO {
   id: string
   description?: string
   tax_rate_id?: string
@@ -79,7 +79,7 @@ export interface UpdateLineItemTaxLineDTO {
   provider_id?: string
 }
 
-export interface UpdateLineItemAdjustmentDTO {
+export interface UpdateAdjustmentDTO {
   id: string
   code?: string
   amount?: number
@@ -93,6 +93,8 @@ export interface CreateLineItemDTO {
   subtitle?: string
   thumbnail?: string
 
+  cart_id?: string
+
   quantity: number
 
   product_id?: string
@@ -116,24 +118,53 @@ export interface CreateLineItemDTO {
   compare_at_unit_price?: number
   unit_price: number
 
-  tax_lines: CreateLineItemTaxLineDTO[]
-  adjustments: CreateLineItemAdjustmentDTO[]
+  tax_lines?: CreateTaxLineDTO[]
+  adjustments?: CreateAdjustmentDTO[]
+}
+
+export interface CreateLineItemForCartDTO extends CreateLineItemDTO {
+  cart_id: string
+}
+
+export interface UpdateLineItemWithSelectorDTO {
+  selector: Partial<CartLineItemDTO>
+  data: Partial<UpdateLineItemDTO>
 }
 
 export interface UpdateLineItemDTO
-  extends Omit<CreateLineItemDTO, "tax_lines" | "adjustments"> {
+  extends Omit<
+    CreateLineItemDTO,
+    "tax_lines" | "adjustments" | "title" | "quantity" | "unit_price"
+  > {
   id: string
 
-  tax_lines: UpdateLineItemTaxLineDTO[] | CreateLineItemTaxLineDTO[]
-  adjustments: UpdateLineItemAdjustmentDTO[] | CreateLineItemAdjustmentDTO[]
+  title?: string
+  quantity?: number
+  unit_price?: number
+
+  tax_lines?: UpdateTaxLineDTO[] | CreateTaxLineDTO[]
+  adjustments?: UpdateAdjustmentDTO[] | CreateAdjustmentDTO[]
 }
 
-export interface AddLineItemsDTO {
+export interface CreateShippingMethodDTO {
+  name: string
+
   cart_id: string
-  items: CreateLineItemDTO[]
+
+  amount: number
+  data?: Record<string, unknown>
+
+  tax_lines?: CreateTaxLineDTO[]
+  adjustments?: CreateAdjustmentDTO[]
 }
 
-export interface UpdateLineItemsDTO {
-  cart_id: string
-  items: UpdateLineItemDTO[]
+export interface UpdateShippingMethodDTO {
+  id: string
+  name?: string
+
+  amount?: number
+  data?: Record<string, unknown>
+
+  tax_lines?: UpdateTaxLineDTO[] | CreateTaxLineDTO[]
+  adjustments?: UpdateAdjustmentDTO[] | CreateAdjustmentDTO[]
 }
diff --git a/packages/types/src/cart/service.ts b/packages/types/src/cart/service.ts
index caba8cfb1d..14e6222998 100644
--- a/packages/types/src/cart/service.ts
+++ b/packages/types/src/cart/service.ts
@@ -1,13 +1,25 @@
-import { AddressDTO } from "../address"
 import { FindConfig } from "../common"
 import { IModuleService } from "../modules-sdk"
 import { Context } from "../shared-context"
-import { CartAddressDTO, CartDTO, FilterableAddressProps, FilterableCartProps } from "./common"
+import {
+  CartAddressDTO,
+  CartDTO,
+  CartLineItemDTO,
+  CartShippingMethodDTO,
+  FilterableAddressProps,
+  FilterableCartProps,
+  FilterableShippingMethodProps,
+} from "./common"
 import {
   CreateAddressDTO,
   CreateCartDTO,
+  CreateLineItemDTO,
+  CreateLineItemForCartDTO,
+  CreateShippingMethodDTO,
   UpdateAddressDTO,
   UpdateCartDTO,
+  UpdateLineItemDTO,
+  UpdateLineItemWithSelectorDTO,
 } from "./mutations"
 
 export interface ICartModuleService extends IModuleService {
@@ -40,7 +52,7 @@ export interface ICartModuleService extends IModuleService {
 
   listAddresses(
     filters?: FilterableAddressProps,
-    config?: FindConfig<AddressDTO>,
+    config?: FindConfig<CartAddressDTO>,
     sharedContext?: Context
   ): Promise<CartAddressDTO[]>
 
@@ -65,20 +77,63 @@ export interface ICartModuleService extends IModuleService {
   deleteAddresses(ids: string[], sharedContext?: Context): Promise<void>
   deleteAddresses(ids: string, sharedContext?: Context): Promise<void>
 
-  // addLineItems(data: AddLineItemsDTO, sharedContext?: Context): Promise<CartDTO>
-  // addLineItems(
-  //   data: AddLineItemsDTO[],
-  //   sharedContext?: Context
-  // ): Promise<CartDTO[]>
+  addLineItems(data: CreateLineItemForCartDTO): Promise<CartLineItemDTO>
+  addLineItems(data: CreateLineItemForCartDTO[]): Promise<CartLineItemDTO[]>
+  addLineItems(
+    cartId: string,
+    items: CreateLineItemDTO[],
+    sharedContext?: Context
+  ): Promise<CartLineItemDTO[]>
 
-  // updateLineItems(
-  //   data: UpdateLineItemsDTO,
-  //   sharedContext?: Context
-  // ): Promise<CartDTO>
-  // updateLineItems(
-  //   data: UpdateLineItemsDTO[],
-  //   sharedContext?: Context
-  // ): Promise<CartDTO[]>
+  updateLineItems(
+    data: UpdateLineItemWithSelectorDTO[]
+  ): Promise<CartLineItemDTO[]>
+  updateLineItems(
+    selector: Partial<CartLineItemDTO>,
+    data: Partial<UpdateLineItemDTO>,
+    sharedContext?: Context
+  ): Promise<CartLineItemDTO[]>
+  updateLineItems(
+    lineId: string,
+    data: Partial<UpdateLineItemDTO>,
+    sharedContext?: Context
+  ): Promise<CartLineItemDTO>
 
-  // removeLineItems(lineItemIds: string[], sharedContext?: Context): Promise<void>
+  removeLineItems(itemIds: string[], sharedContext?: Context): Promise<void>
+  removeLineItems(itemIds: string, sharedContext?: Context): Promise<void>
+  removeLineItems(
+    selector: Partial<CartLineItemDTO>,
+    sharedContext?: Context
+  ): Promise<void>
+
+  listShippingMethods(
+    filters: FilterableShippingMethodProps,
+    config: FindConfig<CartShippingMethodDTO>,
+    sharedContext: Context
+  ): Promise<CartShippingMethodDTO[]>
+
+  addShippingMethods(
+    data: CreateShippingMethodDTO
+  ): Promise<CartShippingMethodDTO>
+  addShippingMethods(
+    data: CreateShippingMethodDTO[]
+  ): Promise<CartShippingMethodDTO[]>
+  addShippingMethods(
+    cartId: string,
+    methods: CreateShippingMethodDTO[],
+    sharedContext?: Context
+  ): Promise<CartShippingMethodDTO[]>
+
+  removeShippingMethods(
+    methodIds: string[],
+    sharedContext?: Context
+  ): Promise<void>
+  removeShippingMethods(
+    methodIds: string,
+    sharedContext?: Context
+  ): Promise<void>
+  removeShippingMethods(
+    selector: Partial<CartShippingMethodDTO>,
+    sharedContext?: Context
+  ): Promise<void>
 }
diff --git a/packages/types/src/dal/repository-service.ts b/packages/types/src/dal/repository-service.ts
index 483b8d50ff..6e294475c6 100644
--- a/packages/types/src/dal/repository-service.ts
+++ b/packages/types/src/dal/repository-service.ts
@@ -58,6 +58,8 @@ export interface RepositoryService<T = any> extends BaseRepositoryService<T> {
     ids: string[],
     context?: Context
   ): Promise<[T[], Record<string, unknown[]>]>
+
+  upsert?(data: unknown[], context?: Context): Promise<T[]>
 }
 
 export interface TreeRepositoryService<T = any>
@@ -81,7 +83,7 @@ export interface TreeRepositoryService<T = any>
 
 /**
  * @interface
- * 
+ *
  * An object that is used to specify an entity's related entities that should be soft-deleted when the main entity is soft-deleted.
  */
 export type SoftDeleteReturn<TReturnableLinkableKeys = string> = {
@@ -93,7 +95,7 @@ export type SoftDeleteReturn<TReturnableLinkableKeys = string> = {
 
 /**
  * @interface
- * 
+ *
  * An object that is used to specify an entity's related entities that should be restored when the main entity is restored.
  */
 export type RestoreReturn<TReturnableLinkableKeys = string> = {
diff --git a/packages/types/src/promotion/common/campaign-budget.ts b/packages/types/src/promotion/common/campaign-budget.ts
index 0b2b103d58..4f341a43cb 100644
--- a/packages/types/src/promotion/common/campaign-budget.ts
+++ b/packages/types/src/promotion/common/campaign-budget.ts
@@ -5,8 +5,8 @@ export type CampaignBudgetTypeValues = "spend" | "usage"
 export interface CampaignBudgetDTO {
   id: string
   type?: CampaignBudgetTypeValues
-  limit?: string | null
-  used?: string
+  limit?: number | null
+  used?: number
 }
 
 export interface FilterableCampaignBudgetProps
diff --git a/packages/types/src/promotion/common/compute-actions.ts b/packages/types/src/promotion/common/compute-actions.ts
index 3770c6ce7b..b1f97a3c0c 100644
--- a/packages/types/src/promotion/common/compute-actions.ts
+++ b/packages/types/src/promotion/common/compute-actions.ts
@@ -3,6 +3,16 @@ export type ComputeActions =
   | RemoveItemAdjustmentAction
   | AddShippingMethodAdjustment
   | RemoveShippingMethodAdjustment
+  | CampaignBudgetExceededAction
+
+export type UsageComputedActions =
+  | AddShippingMethodAdjustment
+  | AddItemAdjustmentAction
+
+export interface CampaignBudgetExceededAction {
+  action: "campaignBudgetExceeded"
+  code: string
+}
 
 export interface AddItemAdjustmentAction {
   action: "addItemAdjustment"
@@ -16,6 +26,7 @@ export interface RemoveItemAdjustmentAction {
   action: "removeItemAdjustment"
   adjustment_id: string
   description?: string
+  code: string
 }
 
 export interface AddShippingMethodAdjustment {
@@ -29,27 +40,28 @@ export interface AddShippingMethodAdjustment {
 export interface RemoveShippingMethodAdjustment {
   action: "removeShippingMethodAdjustment"
   adjustment_id: string
+  code: string
 }
 
-export interface ComputeActionAdjustmentLine {
+export interface ComputeActionAdjustmentLine extends Record<string, unknown> {
   id: string
   code: string
 }
 
-export interface ComputeActionItemLine {
+export interface ComputeActionItemLine extends Record<string, unknown> {
   id: string
   quantity: number
   unit_price: number
   adjustments?: ComputeActionAdjustmentLine[]
 }
 
-export interface ComputeActionShippingLine {
+export interface ComputeActionShippingLine extends Record<string, unknown> {
   id: string
   unit_price: number
   adjustments?: ComputeActionAdjustmentLine[]
 }
 
-export interface ComputeActionContext {
+export interface ComputeActionContext extends Record<string, unknown> {
   items?: ComputeActionItemLine[]
   shipping_methods?: ComputeActionShippingLine[]
 }
diff --git a/packages/types/src/promotion/common/promotion.ts b/packages/types/src/promotion/common/promotion.ts
index 9c3a47528e..d0cea3caad 100644
--- a/packages/types/src/promotion/common/promotion.ts
+++ b/packages/types/src/promotion/common/promotion.ts
@@ -1,9 +1,11 @@
 import { BaseFilterable } from "../../dal"
+import { CreateCampaignDTO } from "../mutations"
 import {
   ApplicationMethodDTO,
   CreateApplicationMethodDTO,
   UpdateApplicationMethodDTO,
 } from "./application-method"
+import { CampaignDTO } from "./campaign"
 import { CreatePromotionRuleDTO, PromotionRuleDTO } from "./promotion-rule"
 
 export type PromotionType = "standard" | "buyget"
@@ -15,6 +17,7 @@ export interface PromotionDTO {
   is_automatic?: boolean
   application_method?: ApplicationMethodDTO
   rules?: PromotionRuleDTO[]
+  campaign?: CampaignDTO
 }
 
 export interface CreatePromotionDTO {
@@ -23,6 +26,8 @@ export interface CreatePromotionDTO {
   is_automatic?: boolean
   application_method?: CreateApplicationMethodDTO
   rules?: CreatePromotionRuleDTO[]
+  campaign?: CreateCampaignDTO
+  campaign_id?: string
 }
 
 export interface UpdatePromotionDTO {
@@ -31,6 +36,7 @@ export interface UpdatePromotionDTO {
   code?: string
   type?: PromotionType
   application_method?: UpdateApplicationMethodDTO
+  campaign_id?: string
 }
 
 export interface FilterablePromotionProps
@@ -39,4 +45,5 @@ export interface FilterablePromotionProps
   code?: string[]
   is_automatic?: boolean
   type?: PromotionType[]
+  budget_id?: string[]
 }
diff --git a/packages/types/src/promotion/mutations.ts b/packages/types/src/promotion/mutations.ts
index a8e3fef9f5..cef6b28b29 100644
--- a/packages/types/src/promotion/mutations.ts
+++ b/packages/types/src/promotion/mutations.ts
@@ -1,4 +1,4 @@
-import { CampaignBudgetTypeValues } from "./common"
+import { CampaignBudgetTypeValues, PromotionDTO } from "./common"
 
 export interface CreateCampaignBudgetDTO {
   type: CampaignBudgetTypeValues
@@ -21,6 +21,7 @@ export interface CreateCampaignDTO {
   starts_at: Date
   ends_at: Date
   budget?: CreateCampaignBudgetDTO
+  promotions?: Pick<PromotionDTO, "id">[]
 }
 
 export interface UpdateCampaignDTO {
@@ -32,4 +33,5 @@ export interface UpdateCampaignDTO {
   starts_at?: Date
   ends_at?: Date
   budget?: Omit<UpdateCampaignBudgetDTO, "id">
+  promotions?: Pick<PromotionDTO, "id">[]
 }
diff --git a/packages/types/src/promotion/service.ts b/packages/types/src/promotion/service.ts
index 9f35256ac0..0644ae71e5 100644
--- a/packages/types/src/promotion/service.ts
+++ b/packages/types/src/promotion/service.ts
@@ -17,6 +17,8 @@ import {
 import { CreateCampaignDTO, UpdateCampaignDTO } from "./mutations"
 
 export interface IPromotionModuleService extends IModuleService {
+  registerUsage(computedActions: ComputeActions[]): Promise<void>
+
   computeActions(
     promotionCodesToApply: string[],
     applicationContext: ComputeActionContext,
diff --git a/packages/utils/src/dal/mikro-orm/mikro-orm-repository.ts b/packages/utils/src/dal/mikro-orm/mikro-orm-repository.ts
index da3f18819c..5adfae04a5 100644
--- a/packages/utils/src/dal/mikro-orm/mikro-orm-repository.ts
+++ b/packages/utils/src/dal/mikro-orm/mikro-orm-repository.ts
@@ -1,7 +1,7 @@
 import {
   Context,
   DAL,
-  FilterQuery as InternalFilerQuery,
+  FilterQuery as InternalFilterQuery,
   RepositoryTransformOptions,
 } from "@medusajs/types"
 import {
@@ -16,9 +16,9 @@ import {
   EntityName,
   FilterQuery as MikroFilterQuery,
 } from "@mikro-orm/core/typings"
-import { isString, MedusaError } from "../../common"
+import { MedusaError, isString } from "../../common"
 import { MedusaContext } from "../../decorators"
-import { buildQuery, InjectTransactionManager } from "../../modules-sdk"
+import { InjectTransactionManager, buildQuery } from "../../modules-sdk"
 import {
   getSoftDeletedCascadedEntitiesIdsMappedBy,
   transactionWrapper,
@@ -106,7 +106,7 @@ export class MikroOrmBaseRepository<
 
   @InjectTransactionManager()
   async softDelete(
-    idsOrFilter: string[] | InternalFilerQuery,
+    idsOrFilter: string[] | InternalFilterQuery,
     @MedusaContext()
     { transactionManager: manager }: Context = {}
   ): Promise<[T[], Record<string, unknown[]>]> {
@@ -138,7 +138,7 @@ export class MikroOrmBaseRepository<
 
   @InjectTransactionManager()
   async restore(
-    idsOrFilter: string[] | InternalFilerQuery,
+    idsOrFilter: string[] | InternalFilterQuery,
     @MedusaContext()
     { transactionManager: manager }: Context = {}
   ): Promise<[T[], Record<string, unknown[]>]> {
@@ -224,7 +224,7 @@ type DtoBasedMutationMethods = "create" | "update"
 
 export function mikroOrmBaseRepositoryFactory<
   T extends object = object,
-  TDTos extends { [K in DtoBasedMutationMethods]?: any } = {
+  TDTOs extends { [K in DtoBasedMutationMethods]?: any } = {
     [K in DtoBasedMutationMethods]?: any
   }
 >(entity: EntityClass<T> | EntitySchema<T>) {
@@ -242,11 +242,11 @@ export function mikroOrmBaseRepositoryFactory<
     static retrievePrimaryKeys(entity: EntityClass<T> | EntitySchema<T>) {
       return (
         (entity as EntitySchema<T>).meta?.primaryKeys ??
-        (entity as EntityClass<T>).prototype.__meta.primaryKeys
+        (entity as EntityClass<T>).prototype.__meta.primaryKeys ?? ["id"]
       )
     }
 
-    async create(data: TDTos["create"][], context?: Context): Promise<T[]> {
+    async create(data: TDTOs["create"][], context?: Context): Promise<T[]> {
       const manager = this.getActiveManager<EntityManager>(context)
 
       const entities = data.map((data_) => {
@@ -261,7 +261,8 @@ export function mikroOrmBaseRepositoryFactory<
       return entities
     }
 
-    async update(data: TDTos["update"][], context?: Context): Promise<T[]> {
+    async update(data: TDTOs["update"][], context?: Context): Promise<T[]> {
+      // TODO: Move this logic to the service packages/utils/src/modules-sdk/abstract-service-factory.ts
       const manager = this.getActiveManager<EntityManager>(context)
 
       const primaryKeys =
diff --git a/packages/utils/src/modules-sdk/abstract-service-factory.ts b/packages/utils/src/modules-sdk/abstract-service-factory.ts
new file mode 100644
index 0000000000..b176d6ff45
--- /dev/null
+++ b/packages/utils/src/modules-sdk/abstract-service-factory.ts
@@ -0,0 +1,245 @@
+import {
+  Context,
+  FilterQuery as InternalFilterQuery,
+  FindConfig,
+} from "@medusajs/types"
+import { EntitySchema } from "@mikro-orm/core"
+import { EntityClass } from "@mikro-orm/core/typings"
+import {
+  doNotForceTransaction,
+  isDefined,
+  isString,
+  lowerCaseFirst,
+  MedusaError,
+  shouldForceTransaction,
+  upperCaseFirst,
+} from "../common"
+import { MedusaContext } from "../decorators"
+import { buildQuery } from "./build-query"
+import { InjectManager, InjectTransactionManager } from "./decorators"
+
+/**
+ * Utility factory and interfaces for internal module services
+ */
+
+type FilterableMethods = "list" | "listAndCount"
+type Methods = "create" | "update"
+
+export interface AbstractService<
+  TEntity extends {},
+  TContainer extends object = object,
+  TDTOs extends { [K in Methods]?: any } = { [K in Methods]?: any },
+  TFilters extends { [K in FilterableMethods]?: any } = {
+    [K in FilterableMethods]?: any
+  }
+> {
+  get __container__(): TContainer
+
+  retrieve<TEntityMethod = TEntity>(
+    id: string,
+    config?: FindConfig<TEntityMethod>,
+    sharedContext?: Context
+  ): Promise<TEntity>
+  list<TEntityMethod = TEntity>(
+    filters?: TFilters["list"],
+    config?: FindConfig<TEntityMethod>,
+    sharedContext?: Context
+  ): Promise<TEntity[]>
+  listAndCount<TEntityMethod = TEntity>(
+    filters?: TFilters["listAndCount"],
+    config?: FindConfig<TEntityMethod>,
+    sharedContext?: Context
+  ): Promise<[TEntity[], number]>
+  create(data: TDTOs["create"][], sharedContext?: Context): Promise<TEntity[]>
+  update(data: TDTOs["update"][], sharedContext?: Context): Promise<TEntity[]>
+  delete(
+    primaryKeyValues: string[] | object[],
+    sharedContext?: Context
+  ): Promise<void>
+  softDelete(
+    idsOrFilter: string[] | InternalFilterQuery,
+    sharedContext?: Context
+  ): Promise<[TEntity[], Record<string, unknown[]>]>
+  restore(
+    idsOrFilter: string[] | InternalFilterQuery,
+    sharedContext?: Context
+  ): Promise<[TEntity[], Record<string, unknown[]>]>
+}
+
+export function abstractServiceFactory<
+  TContainer extends object = object,
+  TDTOs extends { [K in Methods]?: any } = { [K in Methods]?: any },
+  TFilters extends { [K in FilterableMethods]?: any } = {
+    [K in FilterableMethods]?: any
+  }
+>(
+  model: new (...args: any[]) => any
+): {
+  new <TEntity extends {}>(container: TContainer): AbstractService<
+    TEntity,
+    TContainer,
+    TDTOs,
+    TFilters
+  >
+} {
+  const injectedRepositoryName = `${lowerCaseFirst(model.name)}Repository`
+  const propertyRepositoryName = `__${injectedRepositoryName}__`
+
+  class AbstractService_<TEntity extends {}>
+    implements AbstractService<TEntity, TContainer, TDTOs, TFilters>
+  {
+    readonly __container__: TContainer;
+    [key: string]: any
+
+    constructor(container: TContainer) {
+      this.__container__ = container
+      this[propertyRepositoryName] = container[injectedRepositoryName]
+    }
+
+    static retrievePrimaryKeys(entity: EntityClass<any> | EntitySchema<any>) {
+      return (
+        (entity as EntitySchema<any>).meta?.primaryKeys ??
+        (entity as EntityClass<any>).prototype.__meta?.primaryKeys ?? ["id"]
+      )
+    }
+
+    @InjectManager(propertyRepositoryName)
+    async retrieve<TEntityMethod = TEntity>(
+      primaryKeyValues: string | string[] | object[],
+      config: FindConfig<TEntityMethod> = {},
+      @MedusaContext() sharedContext: Context = {}
+    ): Promise<TEntity> {
+      const primaryKeys = AbstractService_.retrievePrimaryKeys(model)
+
+      if (!isDefined(primaryKeyValues)) {
+        throw new MedusaError(
+          MedusaError.Types.NOT_FOUND,
+          `${
+            primaryKeys.length === 1
+              ? `"${
+                  lowerCaseFirst(model.name) + upperCaseFirst(primaryKeys[0])
+                }"`
+              : `${lowerCaseFirst(model.name)} ${primaryKeys.join(", ")}`
+          } must be defined`
+        )
+      }
+
+      let primaryKeysCriteria = {}
+      if (primaryKeys.length === 1) {
+        primaryKeysCriteria[primaryKeys[0]] = primaryKeyValues
+      } else {
+        primaryKeysCriteria = (primaryKeyValues as string[] | object[]).map(
+          (primaryKeyValue) => ({
+            $and: primaryKeys.map((key) => ({ [key]: primaryKeyValue[key] })),
+          })
+        )
+      }
+
+      const queryOptions = buildQuery<TEntity>(primaryKeysCriteria, config)
+
+      const entities = await this[propertyRepositoryName].find(
+        queryOptions,
+        sharedContext
+      )
+
+      if (!entities?.length) {
+        throw new MedusaError(
+          MedusaError.Types.NOT_FOUND,
+          `${model.name} with ${primaryKeys.join(", ")}: ${
+            Array.isArray(primaryKeyValues)
+              ? primaryKeyValues.map((v) =>
+                  [isString(v) ? v : Object.values(v)].join(", ")
+                )
+              : primaryKeyValues
+          } was not found`
+        )
+      }
+
+      return entities[0]
+    }
+
+    @InjectManager(propertyRepositoryName)
+    async list<TEntityMethod = TEntity>(
+      filters: TFilters["list"] = {},
+      config: FindConfig<TEntityMethod> = {},
+      @MedusaContext() sharedContext: Context = {}
+    ): Promise<TEntity[]> {
+      const queryOptions = buildQuery<TEntity>(filters, config)
+
+      return (await this[propertyRepositoryName].find(
+        queryOptions,
+        sharedContext
+      )) as TEntity[]
+    }
+
+    @InjectManager(propertyRepositoryName)
+    async listAndCount<TEntityMethod = TEntity>(
+      filters: TFilters["listAndCount"] = {},
+      config: FindConfig<TEntityMethod> = {},
+      @MedusaContext() sharedContext: Context = {}
+    ): Promise<[TEntity[], number]> {
+      const queryOptions = buildQuery<TEntity>(filters, config)
+
+      return (await this[propertyRepositoryName].findAndCount(
+        queryOptions,
+        sharedContext
+      )) as [TEntity[], number]
+    }
+
+    @InjectTransactionManager(shouldForceTransaction, propertyRepositoryName)
+    async create(
+      data: TDTOs["create"][],
+      @MedusaContext() sharedContext: Context = {}
+    ): Promise<TEntity[]> {
+      return (await this[propertyRepositoryName].create(
+        data,
+        sharedContext
+      )) as TEntity[]
+    }
+
+    @InjectTransactionManager(shouldForceTransaction, propertyRepositoryName)
+    async update(
+      data: TDTOs["update"][],
+      @MedusaContext() sharedContext: Context = {}
+    ): Promise<TEntity[]> {
+      return (await this[propertyRepositoryName].update(
+        data,
+        sharedContext
+      )) as TEntity[]
+    }
+
+    @InjectTransactionManager(doNotForceTransaction, propertyRepositoryName)
+    async delete(
+      primaryKeyValues: string[] | object[],
+      @MedusaContext() sharedContext: Context = {}
+    ): Promise<void> {
+      await this[propertyRepositoryName].delete(primaryKeyValues, sharedContext)
+    }
+
+    @InjectTransactionManager(propertyRepositoryName)
+    async softDelete(
+      idsOrFilter: string[] | InternalFilterQuery,
+      @MedusaContext() sharedContext: Context = {}
+    ): Promise<[TEntity[], Record<string, unknown[]>]> {
+      return await this[propertyRepositoryName].softDelete(
+        idsOrFilter,
+        sharedContext
+      )
+    }
+
+    @InjectTransactionManager(propertyRepositoryName)
+    async restore(
+      idsOrFilter: string[] | InternalFilterQuery,
+      @MedusaContext() sharedContext: Context = {}
+    ): Promise<[TEntity[], Record<string, unknown[]>]> {
+      return await this[propertyRepositoryName].restore(
+        idsOrFilter,
+        sharedContext
+      )
+    }
+  }
+
+  return AbstractService_ as unknown as new <TEntity extends {}>(
+    container: TContainer
+  ) => AbstractService<TEntity, TContainer, TDTOs, TFilters>
+}
diff --git a/packages/utils/src/modules-sdk/index.ts b/packages/utils/src/modules-sdk/index.ts
index 96948c7bff..b63a859db6 100644
--- a/packages/utils/src/modules-sdk/index.ts
+++ b/packages/utils/src/modules-sdk/index.ts
@@ -1,7 +1,7 @@
 export * from "./load-module-database-config"
 export * from "./decorators"
 export * from "./build-query"
-export * from "./retrieve-entity"
 export * from "./loaders/mikro-orm-connection-loader"
 export * from "./create-pg-connection"
 export * from "./migration-scripts"
+export * from "./abstract-service-factory"
diff --git a/packages/utils/src/modules-sdk/retrieve-entity.ts b/packages/utils/src/modules-sdk/retrieve-entity.ts
deleted file mode 100644
index 62f68a06a2..0000000000
--- a/packages/utils/src/modules-sdk/retrieve-entity.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Context, DAL, FindConfig } from "@medusajs/types"
-import {
-  MedusaError,
-  isDefined,
-  lowerCaseFirst,
-  upperCaseFirst,
-} from "../common"
-import { buildQuery } from "./build-query"
-
-type RetrieveEntityParams<TDTO> = {
-  id: string
-  identifierColumn?: string
-  entityName: string
-  repository: DAL.TreeRepositoryService | DAL.RepositoryService
-  config: FindConfig<TDTO>
-  sharedContext?: Context
-}
-
-export async function retrieveEntity<TEntity, TDTO>({
-  id,
-  identifierColumn = "id",
-  entityName,
-  repository,
-  config = {},
-  sharedContext,
-}: RetrieveEntityParams<TDTO>): Promise<TEntity> {
-  if (!isDefined(id)) {
-    throw new MedusaError(
-      MedusaError.Types.NOT_FOUND,
-      `"${lowerCaseFirst(entityName)}${upperCaseFirst(
-        identifierColumn
-      )}" must be defined`
-    )
-  }
-
-  const queryOptions = buildQuery<TEntity>(
-    {
-      [identifierColumn]: id,
-    },
-    config
-  )
-
-  const entities = await repository.find(queryOptions, sharedContext)
-
-  if (!entities?.length) {
-    throw new MedusaError(
-      MedusaError.Types.NOT_FOUND,
-      `${entityName} with ${identifierColumn}: ${id} was not found`
-    )
-  }
-
-  return entities[0]
-}
diff --git a/packages/utils/src/promotion/index.ts b/packages/utils/src/promotion/index.ts
index b416a7cd96..f3dc9d2409 100644
--- a/packages/utils/src/promotion/index.ts
+++ b/packages/utils/src/promotion/index.ts
@@ -33,3 +33,11 @@ export enum CampaignBudgetType {
   SPEND = "spend",
   USAGE = "usage",
 }
+
+export enum ComputedActions {
+  ADD_ITEM_ADJUSTMENT = "addItemAdjustment",
+  ADD_SHIPPING_METHOD_ADJUSTMENT = "addShippingMethodAdjustment",
+  REMOVE_ITEM_ADJUSTMENT = "removeItemAdjustment",
+  REMOVE_SHIPPING_METHOD_ADJUSTMENT = "removeShippingMethodAdjustment",
+  CAMPAIGN_BUDGET_EXCEEDED = "campaignBudgetExceeded",
+}
diff --git a/packages/workflows-sdk/src/helper/workflow-export.ts b/packages/workflows-sdk/src/helper/workflow-export.ts
index 7a319cb156..e65e9452dd 100644
--- a/packages/workflows-sdk/src/helper/workflow-export.ts
+++ b/packages/workflows-sdk/src/helper/workflow-export.ts
@@ -9,7 +9,6 @@ import {
 import { Context, LoadedModule, MedusaContainer } from "@medusajs/types"
 
 import { MedusaModule } from "@medusajs/modules-sdk"
-import { OrchestrationUtils } from "@medusajs/utils"
 import { EOL } from "os"
 import { ulid } from "ulid"
 import { MedusaWorkflow } from "../medusa-workflow"
@@ -129,33 +128,11 @@ export const exportWorkflow = <TData = unknown, TResult = unknown>(
         throw new Error(errorMessage)
       }
 
-      let result: any = undefined
-
-      const resFrom =
-        resultFrom?.__type === OrchestrationUtils.SymbolWorkflowStep
-          ? resultFrom.__step__
-          : resultFrom
-
-      if (resFrom) {
-        if (Array.isArray(resFrom)) {
-          result = resFrom.map((from) => {
-            const res = transaction.getContext().invoke?.[from]
-            return res?.__type === OrchestrationUtils.SymbolWorkflowWorkflowData
-              ? res.output
-              : res
-          })
-        } else {
-          const res = transaction.getContext().invoke?.[resFrom]
-          result =
-            res?.__type === OrchestrationUtils.SymbolWorkflowWorkflowData
-              ? res.output
-              : res
-        }
-
-        const ret = result || resFrom
-        result = options?.wrappedInput
-          ? await resolveValue(ret, transaction.getContext())
-          : ret
+      let result
+      if (options?.wrappedInput) {
+        result = await resolveValue(resultFrom, transaction.getContext())
+      } else {
+        result = transaction.getContext().invoke?.[resultFrom]
       }
 
       return {
diff --git a/www/apps/docs/content/create-medusa-app.mdx b/www/apps/docs/content/create-medusa-app.mdx
index 9745e27dcf..f3de6fed2b 100644
--- a/www/apps/docs/content/create-medusa-app.mdx
+++ b/www/apps/docs/content/create-medusa-app.mdx
@@ -18,6 +18,7 @@ import EaddrinuseSection from './troubleshooting/eaddrinuse.md'
 import InvalidTokenError from './troubleshooting/create-medusa-app-errors/_no-browser-token-error.md'
 import PostgresDockerError from './troubleshooting/database-errors/_docker.md'
 import DbUrlError from './troubleshooting/create-medusa-app-errors/_db-url-error.md'
+import PortError from './troubleshooting/create-medusa-app-errors/_port.md'
 
 # Install Medusa with create-medusa-app
 
@@ -218,6 +219,10 @@ Based on what you're building, you can find a development path for you in the Re
 
 <DetailsList
   sections={[
+    {
+      title: "Admin Login or User Errors",
+      content: <PortError />
+    },
     {
       title: 'Can\'t connect to database with --db-url option',
       content: <DbUrlError />
diff --git a/www/apps/docs/content/starters/nextjs-medusa-starter.mdx b/www/apps/docs/content/starters/nextjs-medusa-starter.mdx
index feeb586ea5..f09ce9caf7 100644
--- a/www/apps/docs/content/starters/nextjs-medusa-starter.mdx
+++ b/www/apps/docs/content/starters/nextjs-medusa-starter.mdx
@@ -13,6 +13,12 @@ import CorsErrorSection from '../troubleshooting/cors-issues.md'
 
 This document guides you to install and set up the Next.js Starter Storefront.
 
+:::note
+
+Check out the demo [here](https://next.medusajs.com).
+
+:::
+
 ![Next.js Starter Storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1700744057/Medusa%20Docs/Screenshots/next-js-starter-docs_tbu23j.jpg)
 
 ## Prerequisites
diff --git a/www/apps/docs/content/troubleshooting/create-medusa-app-errors.mdx b/www/apps/docs/content/troubleshooting/create-medusa-app-errors.mdx
index 03bd4e11d8..3b7858fa8c 100644
--- a/www/apps/docs/content/troubleshooting/create-medusa-app-errors.mdx
+++ b/www/apps/docs/content/troubleshooting/create-medusa-app-errors.mdx
@@ -7,6 +7,7 @@ import OtherErrors from './create-medusa-app-errors/_other-errors.mdx'
 import InvalidTokenError from './create-medusa-app-errors/_no-browser-token-error.md'
 import DockerSection from "./database-errors/_docker.md"
 import DbUrlError from './create-medusa-app-errors/_db-url-error.md'
+import PortError from './create-medusa-app-errors/_port.md'
 
 ## TypeError: cmd is not a function
 
@@ -14,6 +15,12 @@ import DbUrlError from './create-medusa-app-errors/_db-url-error.md'
 
 ---
 
+## Admin Login or User Errors
+
+<PortError />
+
+---
+
 ## Invalid Token Error with --no-browser Option
 
 <InvalidTokenError />
diff --git a/www/apps/docs/content/troubleshooting/create-medusa-app-errors/_port.md b/www/apps/docs/content/troubleshooting/create-medusa-app-errors/_port.md
new file mode 100644
index 0000000000..99a346d4a8
--- /dev/null
+++ b/www/apps/docs/content/troubleshooting/create-medusa-app-errors/_port.md
@@ -0,0 +1,10 @@
+By default, the Medusa backend runs on `localhost:9000`. However, the port may change based on the `PORT` environment variable.
+
+If you run the `create-medusa-app` command, and the installation finishes successfully, but the backend runs on a different port than `9000`, it may cause errors when you try to create an admin user or login during the onboarding process. This could either be because you have the `PORT` environment variable set to something differnt, or because of port forwarding.
+
+To resolve this, you must:
+
+1. Terminate the `create-medusa-app` process and change to the new backend's directory.
+2. Either explicitely set the `PORT` environment variable to `9000`, or set the environment variable `MEDUSA_ADMIN_BACKEND_URL` to the backend's URL. For example, if the backend is running on `localhost:7000`, change the `MEDUSA_ADMIN_BACKEND_URL` to `http://localhost:7001`. This ensures that the admin uses the correct port. In case of port fowarding, it's recommended to explicitely set the `PORT` environment variable.
+3. Create an admin user using the [user command of the CLI tool](../../cli/reference.mdx#user).
+4. Start the backend again either with the `dev` command of the backend project or using `npx medusa develop` and try to login again.
diff --git a/yarn.lock b/yarn.lock
index 1850f0f6e2..a4ac711383 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"
@@ -37508,27 +37380,18 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "medusa-plugin-segment@workspace:packages/medusa-plugin-segment"
   dependencies:
-    "@babel/cli": ^7.7.5
-    "@babel/core": ^7.7.5
-    "@babel/node": ^7.7.4
-    "@babel/plugin-proposal-class-properties": ^7.7.4
-    "@babel/plugin-transform-classes": ^7.9.5
-    "@babel/plugin-transform-instanceof": ^7.8.3
-    "@babel/plugin-transform-runtime": ^7.7.6
-    "@babel/preset-env": ^7.7.5
-    "@babel/register": ^7.7.4
-    "@babel/runtime": ^7.9.6
     analytics-node: ^3.4.0-beta.1
     axios: ^0.19.2
-    body-parser: ^1.19.0
     cross-env: ^5.2.1
     eslint: ^6.8.0
-    express: ^4.17.1
     jest: ^25.5.4
     medusa-core-utils: ^1.2.0
     medusa-interfaces: ^1.3.7
     medusa-test-utils: ^1.1.40
+    rimraf: ^5.0.1
+    typescript: ^4.9.5
   peerDependencies:
+    "@medusajs/medusa": ">= 1.18.0 < 2"
     medusa-interfaces: ^1.3.7
   languageName: unknown
   linkType: soft
@@ -42204,6 +42067,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 +48474,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"