diff --git a/.changeset/config.json b/.changeset/config.json
index 5cb30af19287e..002fec744b8ad 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,12 +7,19 @@
   "access": "public",
   "baseBranch": "develop",
   "updateInternalDependencies": "patch",
-  "ignore": ["integration-tests-api", "integration-tests-plugins", "integration-tests-repositories"],
+  "ignore": [
+    "integration-tests-api",
+    "integration-tests-plugins",
+    "integration-tests-repositories",
+    "@medusajs/dashboard",
+    "@medusajs/admin-shared",
+    "@medusajs/admin-bundler",
+    "@medusajs/vite-plugin-extension"
+  ],
   "snapshot": {
     "useCalculatedVersion": true
   },
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   }
-
 }
diff --git a/.changeset/hip-squids-return.md b/.changeset/hip-squids-return.md
new file mode 100644
index 0000000000000..39e213e6df208
--- /dev/null
+++ b/.changeset/hip-squids-return.md
@@ -0,0 +1,7 @@
+---
+"create-medusa-app": patch
+"medusa-core-utils": patch
+---
+
+fix(create-medusa-app,medusa-core-utils): Use NodeJS.Timeout instead of NodeJS.Timer as the latter was deprecated in v14.
+chore(icons): Update icons to latest version.
diff --git a/.eslintrc.js b/.eslintrc.js
index 1b7707a9e0490..8c3962e6abc81 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -224,6 +224,27 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ["packages/admin-next/dashboard/**/*"],
+      env: { browser: true, es2020: true, node: true },
+      extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended",
+      ],
+      ignorePatterns: ["dist"],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        project: "./packages/admin-next/dashboard/tsconfig.json",
+      },
+      plugins: ["react-refresh"],
+      rules: {
+        "react-refresh/only-export-components": [
+          "warn",
+          { allowConstantExport: true },
+        ],
+      },
+    },
     {
       files: ["packages/admin-ui/lib/**/*.ts"],
       parser: "@typescript-eslint/parser",
diff --git a/package.json b/package.json
index 211a3526df6b1..336ea9e9a3681 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
       "packages/medusa-js",
       "packages/medusa-react",
       "packages/*",
+      "packages/admin-next/*",
       "packages/design-system/*",
       "packages/generated/*",
       "packages/oas/*",
@@ -38,6 +39,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-unused-imports": "^2.0.0",
     "express": "^4.17.1",
diff --git a/packages/admin-next/admin-bundler/README.md b/packages/admin-next/admin-bundler/README.md
new file mode 100644
index 0000000000000..ecfe9dffd9843
--- /dev/null
+++ b/packages/admin-next/admin-bundler/README.md
@@ -0,0 +1 @@
+# cli
diff --git a/packages/admin-next/admin-bundler/bin/medusa-admin.js b/packages/admin-next/admin-bundler/bin/medusa-admin.js
new file mode 100755
index 0000000000000..05470b3f67b31
--- /dev/null
+++ b/packages/admin-next/admin-bundler/bin/medusa-admin.js
@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+function start() {
+  return import("../dist/cli/index.mjs");
+}
+
+start();
diff --git a/packages/admin-next/admin-bundler/package.json b/packages/admin-next/admin-bundler/package.json
new file mode 100644
index 0000000000000..4d247d95bf8e4
--- /dev/null
+++ b/packages/admin-next/admin-bundler/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@medusajs/admin-bundler",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "rimraf dist && tsup"
+  },
+  "bin": {
+    "medusa-admin": "./bin/medusa-admin.js"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "rimraf": "5.0.1",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@medusajs/ui-preset": "^1.0.2",
+    "@medusajs/vite-plugin-extension": "*",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "commander": "^11.1.0",
+    "deepmerge": "^4.3.1",
+    "glob": "^7.1.6",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "vite": "5.0.10"
+  },
+  "packageManager": "yarn@3.2.1"
+}
diff --git a/packages/admin-next/admin-bundler/src/api/build.ts b/packages/admin-next/admin-bundler/src/api/build.ts
new file mode 100644
index 0000000000000..ed64b7720fae6
--- /dev/null
+++ b/packages/admin-next/admin-bundler/src/api/build.ts
@@ -0,0 +1,22 @@
+import { resolve } from "path"
+import { build as command } from "vite"
+
+import { createViteConfig } from "./create-vite-config"
+
+type BuildArgs = {
+  root?: string
+}
+
+export async function build({ root }: BuildArgs) {
+  const config = await createViteConfig({
+    build: {
+      outDir: resolve(process.cwd(), "build"),
+    },
+  })
+
+  if (!config) {
+    return
+  }
+
+  await command(config)
+}
diff --git a/packages/admin-next/admin-bundler/src/api/bundle.ts b/packages/admin-next/admin-bundler/src/api/bundle.ts
new file mode 100644
index 0000000000000..b37706bce2394
--- /dev/null
+++ b/packages/admin-next/admin-bundler/src/api/bundle.ts
@@ -0,0 +1,46 @@
+import { readFileSync } from "fs"
+import glob from "glob"
+import { relative, resolve } from "path"
+import { build as command } from "vite"
+
+type BundleArgs = {
+  root?: string | undefined
+  watch?: boolean | undefined
+}
+
+export async function bundle({ watch, root }: BundleArgs) {
+  const resolvedRoot = root
+    ? resolve(process.cwd(), root)
+    : resolve(process.cwd(), "src", "admin")
+
+  const files = glob.sync(`${resolvedRoot}/**/*.{ts,tsx,js,jsx}`)
+
+  const input: Record<string, string> = {}
+  for (const file of files) {
+    const relativePath = relative(resolvedRoot, file)
+    input[relativePath] = file
+  }
+
+  const packageJson = JSON.parse(
+    readFileSync(resolve(process.cwd(), "package.json"), "utf-8")
+  )
+  const external = [
+    ...Object.keys(packageJson.dependencies),
+    "@medusajs/ui",
+    "@medusajs/ui-preset",
+    "react",
+    "react-dom",
+    "react-router-dom",
+    "react-hook-form",
+  ]
+
+  await command({
+    build: {
+      watch: watch ? {} : undefined,
+      rollupOptions: {
+        input: input,
+        external: external,
+      },
+    },
+  })
+}
diff --git a/packages/admin-next/admin-bundler/src/api/create-vite-config.ts b/packages/admin-next/admin-bundler/src/api/create-vite-config.ts
new file mode 100644
index 0000000000000..89fc8e9a81cfd
--- /dev/null
+++ b/packages/admin-next/admin-bundler/src/api/create-vite-config.ts
@@ -0,0 +1,253 @@
+import inject from "@medusajs/vite-plugin-extension"
+import react from "@vitejs/plugin-react"
+import deepmerge from "deepmerge"
+import { createRequire } from "module"
+import path from "path"
+import { type Config } from "tailwindcss"
+import { ContentConfig } from "tailwindcss/types/config"
+import { InlineConfig, Logger, createLogger, mergeConfig } from "vite"
+
+const require = createRequire(import.meta.url)
+
+export async function createViteConfig(
+  inline: InlineConfig
+): Promise<InlineConfig | null> {
+  const root = process.cwd()
+  const logger = createCustomLogger()
+
+  let dashboardRoot: string | null = null
+
+  try {
+    dashboardRoot = path.dirname(require.resolve("@medusajs/dashboard"))
+  } catch (err) {
+    dashboardRoot = null
+  }
+
+  if (!dashboardRoot) {
+    logger.error(
+      "Unable to find @medusajs/dashboard. Please install it in your project, or specify the root directory."
+    )
+    return null
+  }
+
+  const { plugins, userConfig } = (await loadConfig(root, logger)) ?? {}
+
+  let viteConfig: InlineConfig = mergeConfig(inline, {
+    plugins: [
+      react(),
+      inject({
+        sources: plugins,
+      }),
+    ],
+    configFile: false,
+    root: dashboardRoot,
+    css: {
+      postcss: {
+        plugins: [
+          require("tailwindcss")({
+            config: createTwConfig(process.cwd(), dashboardRoot),
+          }),
+          require("autoprefixer"),
+        ],
+      },
+    },
+  } satisfies InlineConfig)
+
+  if (userConfig) {
+    viteConfig = await userConfig(viteConfig)
+  }
+
+  return viteConfig
+}
+
+function mergeTailwindConfigs(config1: Config, config2: Config): Config {
+  const content1 = config1.content
+  const content2 = config2.content
+
+  let mergedContent: ContentConfig
+
+  if (Array.isArray(content1) && Array.isArray(content2)) {
+    mergedContent = [...content1, ...content2]
+  } else if (!Array.isArray(content1) && !Array.isArray(content2)) {
+    mergedContent = {
+      files: [...content1.files, ...content2.files],
+      relative: content1.relative || content2.relative,
+      extract: { ...content1.extract, ...content2.extract },
+      transform: { ...content1.transform, ...content2.transform },
+    }
+  } else {
+    throw new Error("Cannot merge content fields of different types")
+  }
+
+  const mergedConfig = deepmerge(config1, config2)
+  mergedConfig.content = mergedContent
+
+  console.log(config1.presets, config2.presets)
+
+  // Ensure presets only contain unique values
+  mergedConfig.presets = config1.presets || []
+
+  return mergedConfig
+}
+
+function createTwConfig(root: string, dashboardRoot: string) {
+  const uiRoot = path.join(
+    path.dirname(require.resolve("@medusajs/ui")),
+    "**/*.{js,jsx,ts,tsx}"
+  )
+
+  const baseConfig: Config = {
+    presets: [require("@medusajs/ui-preset")],
+    content: [
+      `${root}/src/admin/**/*.{js,jsx,ts,tsx}`,
+      `${dashboardRoot}/src/**/*.{js,jsx,ts,tsx}`,
+      uiRoot,
+    ],
+    darkMode: "class",
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }
+
+  let userConfig: Config | null = null
+  const extensions = ["js", "cjs", "mjs", "ts", "cts", "mts"]
+
+  for (const ext of extensions) {
+    try {
+      userConfig = require(path.join(root, `tailwind.config.${ext}`))
+      break
+    } catch (err) {
+      console.log("Failed to load tailwind config with extension", ext, err)
+      userConfig = null
+    }
+  }
+
+  if (!userConfig) {
+    return baseConfig
+  }
+
+  return mergeTailwindConfigs(baseConfig, userConfig)
+}
+
+function createCustomLogger() {
+  const logger = createLogger("info", {
+    prefix: "medusa-admin",
+  })
+  const loggerInfo = logger.info
+
+  logger.info = (msg, opts) => {
+    if (
+      msg.includes("hmr invalidate") &&
+      msg.includes(
+        "Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports"
+      )
+    ) {
+      return
+    }
+
+    loggerInfo(msg, opts)
+  }
+
+  return logger
+}
+
+interface PluginOptions extends Record<string, unknown> {
+  enableUI?: boolean
+}
+
+type Plugin =
+  | string
+  | {
+      resolve: string
+      options?: PluginOptions
+    }
+
+interface MedusaConfig extends Record<string, unknown> {
+  plugins?: Plugin[]
+}
+
+async function loadConfig(root: string, logger: Logger) {
+  const configPath = path.resolve(root, "medusa-config.js")
+
+  const config: MedusaConfig = await import(configPath)
+    .then((c) => c)
+    .catch((e) => {
+      if (e.code === "ERR_MODULE_NOT_FOUND") {
+        logger.warn(
+          "Root 'medusa-config.js' file not found; extensions won't load. If running Admin UI as a standalone app, use the 'standalone' option.",
+          {
+            timestamp: true,
+          }
+        )
+      } else {
+        logger.error(
+          `An error occured while attempting to load '${configPath}':\n${e}`,
+          {
+            timestamp: true,
+          }
+        )
+      }
+
+      return null
+    })
+
+  if (!config) {
+    return
+  }
+
+  if (!config.plugins?.length) {
+    logger.info(
+      "No plugins in 'medusa-config.js', no extensions will load. To enable Admin UI extensions, add them to the 'plugins' array in 'medusa-config.js'.",
+      {
+        timestamp: true,
+      }
+    )
+    return
+  }
+
+  const uiPlugins = config.plugins
+    .filter((p) => typeof p !== "string" && p.options?.enableUI)
+    .map((p: Plugin) => {
+      return typeof p === "string" ? p : p.resolve
+    })
+
+  const extensionSources = uiPlugins.map((p) => {
+    return path.resolve(require.resolve(p), "dist", "admin")
+  })
+
+  const rootSource = path.resolve(process.cwd(), "src", "admin")
+
+  extensionSources.push(rootSource)
+
+  const adminPlugin = config.plugins.find((p) =>
+    typeof p === "string"
+      ? p === "@medusajs/admin"
+      : p.resolve === "@medusajs/admin"
+  )
+
+  if (!adminPlugin) {
+    logger.info(
+      "No @medusajs/admin in 'medusa-config.js', no extensions will load. To enable Admin UI extensions, add it to the 'plugins' array in 'medusa-config.js'.",
+      {
+        timestamp: true,
+      }
+    )
+    return
+  }
+
+  const adminPluginOptions =
+    typeof adminPlugin !== "string" && !!adminPlugin.options
+      ? adminPlugin.options
+      : {}
+
+  const viteConfig = adminPluginOptions.withFinal as
+    | ((config: InlineConfig) => InlineConfig)
+    | ((config: InlineConfig) => Promise<InlineConfig>)
+    | undefined
+
+  return {
+    plugins: extensionSources,
+    userConfig: viteConfig,
+  }
+}
diff --git a/packages/admin-next/admin-bundler/src/api/dev.ts b/packages/admin-next/admin-bundler/src/api/dev.ts
new file mode 100644
index 0000000000000..74eb7870ef2d0
--- /dev/null
+++ b/packages/admin-next/admin-bundler/src/api/dev.ts
@@ -0,0 +1,28 @@
+import { createServer } from "vite"
+// @ts-ignore
+import { createViteConfig } from "./create-vite-config"
+
+type DevArgs = {
+  port?: number | undefined
+  host?: string | boolean | undefined
+}
+
+export async function dev({ port = 5173, host }: DevArgs) {
+  const config = await createViteConfig({
+    server: {
+      port,
+      host,
+    },
+  })
+
+  if (!config) {
+    return
+  }
+
+  const server = await createServer(config)
+
+  await server.listen()
+
+  server.printUrls()
+  server.bindCLIShortcuts({ print: true })
+}
diff --git a/packages/admin-next/admin-bundler/src/cli/create-cli.ts b/packages/admin-next/admin-bundler/src/cli/create-cli.ts
new file mode 100644
index 0000000000000..b7827cff0121e
--- /dev/null
+++ b/packages/admin-next/admin-bundler/src/cli/create-cli.ts
@@ -0,0 +1,28 @@
+import { Command } from "commander"
+
+import { build } from "../api/build"
+import { bundle } from "../api/bundle"
+import { dev } from "../api/dev"
+
+export async function createCli() {
+  const program = new Command()
+
+  program.name("medusa-admin")
+
+  program
+    .command("dev")
+    .description("Starts the development server")
+    .action(dev)
+
+  program
+    .command("build")
+    .description("Builds the admin dashboard")
+    .action(build)
+
+  program
+    .command("bundle")
+    .description("Bundles the admin dashboard")
+    .action(bundle)
+
+  return program
+}
diff --git a/packages/admin-next/admin-bundler/src/cli/index.ts b/packages/admin-next/admin-bundler/src/cli/index.ts
new file mode 100644
index 0000000000000..fd04d6859b570
--- /dev/null
+++ b/packages/admin-next/admin-bundler/src/cli/index.ts
@@ -0,0 +1,8 @@
+import { createCli } from "./create-cli"
+
+createCli()
+  .then(async (cli) => cli.parseAsync(process.argv))
+  .catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })
diff --git a/packages/admin-next/admin-bundler/src/index.ts b/packages/admin-next/admin-bundler/src/index.ts
new file mode 100644
index 0000000000000..d1f47a1452651
--- /dev/null
+++ b/packages/admin-next/admin-bundler/src/index.ts
@@ -0,0 +1,3 @@
+export { build } from "./api/build.js"
+export { bundle } from "./api/bundle.js"
+export { dev } from "./api/dev.js"
diff --git a/packages/admin-next/admin-bundler/tsconfig.json b/packages/admin-next/admin-bundler/tsconfig.json
new file mode 100644
index 0000000000000..98f1c02d5c952
--- /dev/null
+++ b/packages/admin-next/admin-bundler/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "strict": true,
+    "declaration": true,
+    "sourceMap": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/admin-next/admin-bundler/tsup.config.ts b/packages/admin-next/admin-bundler/tsup.config.ts
new file mode 100644
index 0000000000000..b94cf8b9bc10e
--- /dev/null
+++ b/packages/admin-next/admin-bundler/tsup.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "tsup"
+
+export default defineConfig({
+  entry: ["./src/index.ts", "./src/cli/index.ts"],
+  format: ["esm"],
+  dts: true,
+})
diff --git a/packages/admin-next/admin-shared/README.md b/packages/admin-next/admin-shared/README.md
new file mode 100644
index 0000000000000..940368442d02f
--- /dev/null
+++ b/packages/admin-next/admin-shared/README.md
@@ -0,0 +1 @@
+# shared
diff --git a/packages/admin-next/admin-shared/package.json b/packages/admin-next/admin-shared/package.json
new file mode 100644
index 0000000000000..81b227e8ae3bb
--- /dev/null
+++ b/packages/admin-next/admin-shared/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@medusajs/admin-shared",
+  "version": "0.0.0",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3"
+  },
+  "packageManager": "yarn@3.2.1"
+}
diff --git a/packages/admin-next/admin-shared/src/constants.ts b/packages/admin-next/admin-shared/src/constants.ts
new file mode 100644
index 0000000000000..e934069d67278
--- /dev/null
+++ b/packages/admin-next/admin-shared/src/constants.ts
@@ -0,0 +1,59 @@
+export const injectionZones = [
+  // Order injection zones
+  "order.details.before",
+  "order.details.after",
+  "order.list.before",
+  "order.list.after",
+  // Draft order injection zones
+  "draft_order.list.before",
+  "draft_order.list.after",
+  "draft_order.details.before",
+  "draft_order.details.after",
+  // Customer injection zones
+  "customer.details.before",
+  "customer.details.after",
+  "customer.list.before",
+  "customer.list.after",
+  // Customer group injection zones
+  "customer_group.details.before",
+  "customer_group.details.after",
+  "customer_group.list.before",
+  "customer_group.list.after",
+  // Product injection zones
+  "product.details.before",
+  "product.details.after",
+  "product.list.before",
+  "product.list.after",
+  "product.details.side.before",
+  "product.details.side.after",
+  // Product collection injection zones
+  "product_collection.details.before",
+  "product_collection.details.after",
+  "product_collection.list.before",
+  "product_collection.list.after",
+  // Product category injection zones
+  "product_category.details.before",
+  "product_category.details.after",
+  "product_category.list.before",
+  "product_category.list.after",
+  // Price list injection zones
+  "price_list.details.before",
+  "price_list.details.after",
+  "price_list.list.before",
+  "price_list.list.after",
+  // Discount injection zones
+  "discount.details.before",
+  "discount.details.after",
+  "discount.list.before",
+  "discount.list.after",
+  // Gift card injection zones
+  "gift_card.details.before",
+  "gift_card.details.after",
+  "gift_card.list.before",
+  "gift_card.list.after",
+  "custom_gift_card.before",
+  "custom_gift_card.after",
+  // Login
+  "login.before",
+  "login.after",
+] as const
diff --git a/packages/admin-next/admin-shared/src/index.ts b/packages/admin-next/admin-shared/src/index.ts
new file mode 100644
index 0000000000000..6c07e3e75f6dc
--- /dev/null
+++ b/packages/admin-next/admin-shared/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./constants"
+export * from "./types"
diff --git a/packages/admin-next/admin-shared/src/types.ts b/packages/admin-next/admin-shared/src/types.ts
new file mode 100644
index 0000000000000..64c703034f636
--- /dev/null
+++ b/packages/admin-next/admin-shared/src/types.ts
@@ -0,0 +1,3 @@
+import { injectionZones } from "./constants"
+
+export type InjectionZone = (typeof injectionZones)[number]
diff --git a/packages/admin-next/admin-shared/tsconfig.json b/packages/admin-next/admin-shared/tsconfig.json
new file mode 100644
index 0000000000000..ae1fe96f1391a
--- /dev/null
+++ b/packages/admin-next/admin-shared/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "outDir": "dist",
+    "declaration": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/admin-next/dashboard/.gitignore b/packages/admin-next/dashboard/.gitignore
new file mode 100644
index 0000000000000..fc5ae9f0ccc25
--- /dev/null
+++ b/packages/admin-next/dashboard/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vercel
diff --git a/packages/admin-next/dashboard/README.md b/packages/admin-next/dashboard/README.md
new file mode 100644
index 0000000000000..0d6babeddbdbc
--- /dev/null
+++ b/packages/admin-next/dashboard/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/packages/admin-next/dashboard/index.html b/packages/admin-next/dashboard/index.html
new file mode 100644
index 0000000000000..d1812618f33f6
--- /dev/null
+++ b/packages/admin-next/dashboard/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Medusa Admin</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/admin-next/dashboard/package.json b/packages/admin-next/dashboard/package.json
new file mode 100644
index 0000000000000..39e57d182ac54
--- /dev/null
+++ b/packages/admin-next/dashboard/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@medusajs/dashboard",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "main": "index.html",
+  "files": [
+    "index.html",
+    "public",
+    "src",
+    "package.json"
+  ],
+  "dependencies": {
+    "@hookform/resolvers": "3.3.2",
+    "@medusajs/icons": "workspace:^",
+    "@medusajs/ui": "workspace:^",
+    "@radix-ui/react-collapsible": "1.0.3",
+    "@tanstack/react-query": "4.22.0",
+    "@tanstack/react-table": "8.10.7",
+    "@uiw/react-json-view": "2.0.0-alpha.10",
+    "cmdk": "^0.2.0",
+    "i18next": "23.7.11",
+    "i18next-browser-languagedetector": "7.2.0",
+    "i18next-http-backend": "2.4.2",
+    "medusa-react": "workspace:^",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "7.49.1",
+    "react-i18next": "13.5.0",
+    "react-router-dom": "6.20.1",
+    "zod": "3.22.4"
+  },
+  "devDependencies": {
+    "@medusajs/medusa": "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",
+    "tailwindcss": "3.3.6",
+    "typescript": "5.2.2",
+    "vite": "5.0.10"
+  },
+  "packageManager": "yarn@3.2.1"
+}
diff --git a/packages/admin-next/dashboard/postcss.config.cjs b/packages/admin-next/dashboard/postcss.config.cjs
new file mode 100644
index 0000000000000..12a703d900da8
--- /dev/null
+++ b/packages/admin-next/dashboard/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/admin-next/dashboard/public/locales/$schema.json b/packages/admin-next/dashboard/public/locales/$schema.json
new file mode 100644
index 0000000000000..1e210b1de2fe0
--- /dev/null
+++ b/packages/admin-next/dashboard/public/locales/$schema.json
@@ -0,0 +1,259 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "additionalProperties": false,
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "general": {
+      "type": "object",
+      "properties": {
+        "cancel": {
+          "type": "string"
+        },
+        "save": {
+          "type": "string"
+        },
+        "create": {
+          "type": "string"
+        },
+        "delete": {
+          "type": "string"
+        },
+        "edit": {
+          "type": "string"
+        },
+        "extensions": {
+          "type": "string"
+        },
+        "details": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "cancel",
+        "save",
+        "create",
+        "createItem",
+        "delete",
+        "deleteItem",
+        "edit",
+        "editItem",
+        "extensions",
+        "details"
+      ]
+    },
+    "products": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        },
+        "variants": {
+          "type": "string"
+        },
+        "availableInSalesChannels": {
+          "type": "string"
+        }
+      },
+      "required": ["domain", "variants", "availableInSalesChannels"]
+    },
+    "categories": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "collections": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "inventory": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "customers": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "customerGroups": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "orders": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "draftOrders": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "discounts": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "giftCards": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "pricing": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        }
+      },
+      "required": ["domain"]
+    },
+    "users": {
+      "type": "object",
+      "properties": {
+        "domain": {
+          "type": "string"
+        },
+        "role": {
+          "type": "string"
+        },
+        "roles": {
+          "type": "object",
+          "properties": {
+            "admin": {
+              "type": "string"
+            },
+            "member": {
+              "type": "string"
+            },
+            "developer": {
+              "type": "string"
+            }
+          },
+          "required": ["admin", "member", "developer"]
+        }
+      },
+      "required": ["domain", "role", "roles"]
+    },
+    "fields": {
+      "type": "object",
+      "properties": {
+        "title": {
+          "type": "string"
+        },
+        "description": {
+          "type": "string"
+        },
+        "name": {
+          "type": "string"
+        },
+        "email": {
+          "type": "string"
+        },
+        "password": {
+          "type": "string"
+        },
+        "subtitle": {
+          "type": "string"
+        },
+        "handle": {
+          "type": "string"
+        },
+        "type": {
+          "type": "string"
+        },
+        "category": {
+          "type": "string"
+        },
+        "categories": {
+          "type": "string"
+        },
+        "collection": {
+          "type": "string"
+        },
+        "discountable": {
+          "type": "string"
+        },
+        "tags": {
+          "type": "string"
+        },
+        "sales_channels": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "title",
+        "description",
+        "name",
+        "email",
+        "password",
+        "subtitle",
+        "handle",
+        "type",
+        "category",
+        "categories",
+        "collection",
+        "discountable",
+        "tags",
+        "sales_channels"
+      ]
+    }
+  },
+  "required": [
+    "general",
+    "products",
+    "categories",
+    "collections",
+    "inventory",
+    "customers",
+    "customerGroups",
+    "orders",
+    "draftOrders",
+    "discounts",
+    "giftCards",
+    "pricing",
+    "users",
+    "fields"
+  ]
+}
diff --git a/packages/admin-next/dashboard/public/locales/en/translation.json b/packages/admin-next/dashboard/public/locales/en/translation.json
new file mode 100644
index 0000000000000..6a3b624d8bb4a
--- /dev/null
+++ b/packages/admin-next/dashboard/public/locales/en/translation.json
@@ -0,0 +1,140 @@
+{
+  "$schema": "../$schema.json",
+  "general": {
+    "cancel": "Cancel",
+    "save": "Save",
+    "create": "Create",
+    "delete": "Delete",
+    "edit": "Edit",
+    "search": "Search",
+    "extensions": "Extensions",
+    "settings": "Settings",
+    "general": "General",
+    "details": "Details",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "remove": "Remove",
+    "countSelected": "{{count}} selected",
+    "plusCountMore": "+ {{count}} more",
+    "areYouSure": "Are you sure?",
+    "noRecordsFound": "No records found"
+  },
+  "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",
+    "productStatus": {
+      "draft": "Draft",
+      "published": "Published",
+      "proposed": "Proposed",
+      "rejected": "Rejected"
+    }
+  },
+  "collections": {
+    "domain": "Collections"
+  },
+  "categories": {
+    "domain": "Categories"
+  },
+  "inventory": {
+    "domain": "Inventory"
+  },
+  "giftCards": {
+    "domain": "Gift Cards"
+  },
+  "customers": {
+    "domain": "Customers"
+  },
+  "customerGroups": {
+    "domain": "Customer Groups"
+  },
+  "orders": {
+    "domain": "Orders"
+  },
+  "draftOrders": {
+    "domain": "Draft Orders"
+  },
+  "discounts": {
+    "domain": "Discounts"
+  },
+  "pricing": {
+    "domain": "Pricing"
+  },
+  "profile": {
+    "domain": "Profile",
+    "manageYourProfileDetails": "Manage your profile details",
+    "editProfileDetails": "Edit Profile Details",
+    "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>."
+  },
+  "users": {
+    "domain": "Users",
+    "role": "Role",
+    "roles": {
+      "admin": "Admin",
+      "developer": "Developer",
+      "member": "Member"
+    }
+  },
+  "store": {
+    "domain": "Store",
+    "manageYourStoresDetails": "Manage your store's details",
+    "editStoreDetails": "Edit Store Details",
+    "storeName": "Store name",
+    "swapLinkTemplate": "Swap link template",
+    "paymentLinkTemplate": "Payment link template",
+    "inviteLinkTemplate": "Invite link template"
+  },
+  "regions": {
+    "domain": "Regions"
+  },
+  "salesChannels": {
+    "domain": "Sales Channels",
+    "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."
+  },
+  "apiKeyManagement": {
+    "domain": "API Key Management",
+    "createAPublishableApiKey": "Create a publishable API key",
+    "createKey": "Create Key"
+  },
+  "fields": {
+    "name": "Name",
+    "lastName": "Last Name",
+    "firstName": "First Name",
+    "title": "Title",
+    "description": "Description",
+    "email": "Email",
+    "password": "Password",
+    "categories": "Categories",
+    "category": "Category",
+    "collection": "Collection",
+    "discountable": "Discountable",
+    "handle": "Handle",
+    "subtitle": "Subtitle",
+    "tags": "Tags",
+    "type": "Type",
+    "sales_channels": "Sales Channels",
+    "status": "Status",
+    "code": "Code",
+    "availability": "Availability",
+    "inventory": "Inventory",
+    "optional": "Optional"
+  }
+}
diff --git a/packages/admin-next/dashboard/public/vite.svg b/packages/admin-next/dashboard/public/vite.svg
new file mode 100644
index 0000000000000..e7b8dfb1b2a60
--- /dev/null
+++ b/packages/admin-next/dashboard/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/packages/admin-next/dashboard/src/app.tsx b/packages/admin-next/dashboard/src/app.tsx
new file mode 100644
index 0000000000000..9170f0ff08855
--- /dev/null
+++ b/packages/admin-next/dashboard/src/app.tsx
@@ -0,0 +1,31 @@
+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"
+
+function App() {
+  return (
+    <MedusaProvider
+      baseUrl={BASE_URL}
+      queryClientProviderProps={{
+        client: queryClient,
+      }}
+    >
+      <ThemeProvider>
+        <AuthProvider>
+          <RouterProvider />
+          <Toaster />
+        </AuthProvider>
+      </ThemeProvider>
+    </MedusaProvider>
+  )
+}
+
+export default App
diff --git a/packages/admin-next/dashboard/src/assets/fonts/Inter-Medium.ttf b/packages/admin-next/dashboard/src/assets/fonts/Inter-Medium.ttf
new file mode 100644
index 0000000000000..a01f3777a6fc2
Binary files /dev/null and b/packages/admin-next/dashboard/src/assets/fonts/Inter-Medium.ttf differ
diff --git a/packages/admin-next/dashboard/src/assets/fonts/Inter-Regular.ttf b/packages/admin-next/dashboard/src/assets/fonts/Inter-Regular.ttf
new file mode 100644
index 0000000000000..5e4851f0ab7e0
Binary files /dev/null and b/packages/admin-next/dashboard/src/assets/fonts/Inter-Regular.ttf differ
diff --git a/packages/admin-next/dashboard/src/assets/fonts/RobotoMono-Medium.ttf b/packages/admin-next/dashboard/src/assets/fonts/RobotoMono-Medium.ttf
new file mode 100644
index 0000000000000..f6c149a203537
Binary files /dev/null and b/packages/admin-next/dashboard/src/assets/fonts/RobotoMono-Medium.ttf differ
diff --git a/packages/admin-next/dashboard/src/assets/fonts/RobotoMono-Regular.ttf b/packages/admin-next/dashboard/src/assets/fonts/RobotoMono-Regular.ttf
new file mode 100644
index 0000000000000..6df2b25360309
Binary files /dev/null and b/packages/admin-next/dashboard/src/assets/fonts/RobotoMono-Regular.ttf differ
diff --git a/packages/admin-next/dashboard/src/components/authentication/require-auth/index.ts b/packages/admin-next/dashboard/src/components/authentication/require-auth/index.ts
new file mode 100644
index 0000000000000..cb367cc34e81d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/authentication/require-auth/index.ts
@@ -0,0 +1 @@
+export * from "./require-auth";
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
new file mode 100644
index 0000000000000..d64ad20b873c2
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/authentication/require-auth/require-auth.tsx
@@ -0,0 +1,25 @@
+import { Spinner } from "@medusajs/icons";
+import { PropsWithChildren } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+
+import { useAuth } from "../../../providers/auth-provider";
+
+export const RequireAuth = ({ children }: PropsWithChildren) => {
+  const auth = useAuth();
+  const location = useLocation();
+
+  if (auth.isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <Spinner className="animate-spin text-ui-fg-interactive" />
+      </div>
+    );
+  }
+
+  if (!auth.user) {
+    console.log("redirecting");
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+};
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
new file mode 100644
index 0000000000000..49fe276389b5d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/debounced-search/debounced-search.tsx
@@ -0,0 +1,45 @@
+import { Input } from "@medusajs/ui"
+import { ComponentProps, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+type DebouncedSearchProps = Omit<
+  ComponentProps<typeof Input>,
+  "value" | "defaultValue" | "onChange" | "type"
+> & {
+  debounce?: number
+  value: string
+  onChange: (value: string) => void
+}
+
+export const DebouncedSearch = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  placeholder,
+  ...props
+}: DebouncedSearchProps) => {
+  const [value, setValue] = useState<string>(initialValue)
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange?.(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+  }, [value])
+
+  return (
+    <Input
+      {...props}
+      placeholder={placeholder || t("general.search")}
+      type="search"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/common/debounced-search/index.ts b/packages/admin-next/dashboard/src/components/common/debounced-search/index.ts
new file mode 100644
index 0000000000000..0bcdec8cc5ec3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/debounced-search/index.ts
@@ -0,0 +1 @@
+export * from "./debounced-search"
diff --git a/packages/admin-next/dashboard/src/components/common/form/form.tsx b/packages/admin-next/dashboard/src/components/common/form/form.tsx
new file mode 100644
index 0000000000000..b4e385c431a0d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/form/form.tsx
@@ -0,0 +1,199 @@
+import {
+  Hint as HintComponent,
+  Label as LabelComponent,
+  Text,
+  clx,
+} from "@medusajs/ui"
+import * as LabelPrimitives from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import { createContext, forwardRef, useContext, useId } from "react"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState,
+} from "react-hook-form"
+import { useTranslation } from "react-i18next"
+
+const Provider = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const Field = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const useFormField = () => {
+  const fieldContext = useContext(FormFieldContext)
+  const itemContext = useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within a FormField")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formErrorMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+const Item = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = useId()
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div
+          ref={ref}
+          className={clx("flex flex-col space-y-2", className)}
+          {...props}
+        />
+      </FormItemContext.Provider>
+    )
+  }
+)
+Item.displayName = "Form.Item"
+
+const Label = forwardRef<
+  React.ElementRef<typeof LabelPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root> & {
+    optional?: boolean
+  }
+>(({ className, optional = false, ...props }, ref) => {
+  const { formItemId } = useFormField()
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex items-center gap-x-1">
+      <LabelComponent
+        ref={ref}
+        className={clx(className)}
+        htmlFor={formItemId}
+        size="small"
+        weight="plus"
+        {...props}
+      />
+      {optional && (
+        <Text size="small" leading="compact" className="text-ui-fg-muted">
+          ({t("fields.optional")})
+        </Text>
+      )}
+    </div>
+  )
+})
+Label.displayName = "Form.Label"
+
+const Control = forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formErrorMessageId } =
+    useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formErrorMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+Control.displayName = "Form.Control"
+
+const Hint = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <HintComponent
+      ref={ref}
+      id={formDescriptionId}
+      className={className}
+      {...props}
+    />
+  )
+})
+Hint.displayName = "Form.Hint"
+
+const ErrorMessage = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formErrorMessageId } = useFormField()
+  const msg = error ? String(error?.message) : children
+
+  if (!msg) {
+    return null
+  }
+
+  return (
+    <HintComponent
+      ref={ref}
+      id={formErrorMessageId}
+      className={className}
+      variant={error ? "error" : "info"}
+      {...props}
+    >
+      {msg}
+    </HintComponent>
+  )
+})
+ErrorMessage.displayName = "Form.ErrorMessage"
+
+const Form = Object.assign(Provider, {
+  Item,
+  Label,
+  Control,
+  Hint,
+  ErrorMessage,
+  Field,
+})
+
+export { Form }
diff --git a/packages/admin-next/dashboard/src/components/common/form/index.ts b/packages/admin-next/dashboard/src/components/common/form/index.ts
new file mode 100644
index 0000000000000..c4a75a7a6924a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/form/index.ts
@@ -0,0 +1 @@
+export * from "./form";
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
new file mode 100644
index 0000000000000..eed209d97dd5f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/json-view/index.ts
@@ -0,0 +1 @@
+export * from "./json-view";
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/json-view.tsx
new file mode 100644
index 0000000000000..ee8055b46dada
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/json-view/json-view.tsx
@@ -0,0 +1,116 @@
+import {
+  ArrowsPointingOut,
+  CheckCircleMiniSolid,
+  SquareTwoStackMini,
+  XMarkMini,
+} from "@medusajs/icons"
+import {
+  Badge,
+  Container,
+  Drawer,
+  Heading,
+  IconButton,
+  Kbd,
+} from "@medusajs/ui"
+import Primitive from "@uiw/react-json-view"
+import { CSSProperties, Suspense } from "react"
+
+type JsonViewProps = {
+  data: object
+  root?: string
+}
+
+// TODO: Fix the positioning of the copy btn
+export const JsonView = ({ data, root }: JsonViewProps) => {
+  const numberOfKeys = Object.keys(data).length
+
+  return (
+    <Container className="flex items-center justify-between py-6">
+      <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">
+            <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="flex items-center gap-x-4">
+              <Heading>JSON</Heading>
+              <Badge>{numberOfKeys} keys</Badge>
+            </div>
+            <div className="flex items-center gap-x-2">
+              <Kbd>esc</Kbd>
+              <Drawer.Close asChild>
+                <IconButton variant="transparent" className="text-ui-fg-subtle">
+                  <XMarkMini />
+                </IconButton>
+              </Drawer.Close>
+            </div>
+          </div>
+          <Drawer.Body className="overflow-auto p-4">
+            <Suspense fallback={<div>Loading...</div>}>
+              <Primitive
+                value={data}
+                displayDataTypes={false}
+                keyName={root}
+                style={
+                  {
+                    "--w-rjv-font-family": "Roboto Mono, monospace",
+                    "--w-rjv-line-color": "#2E3035",
+                    "--w-rjv-curlybraces-color": "#ADB1B8",
+                    "--w-rjv-key-string": "#A78BFA",
+                    "--w-rjv-info-color": "#FBBF24",
+                    "--w-rjv-type-string-color": "#34D399",
+                    "--w-rjv-quotes-string-color": "#34D399",
+                    "--w-rjv-type-boolean-color": "#FBBF24",
+                    "--w-rjv-type-int-color": "#60A5FA",
+                    "--w-rjv-type-float-color": "#60A5FA",
+                    "--w-rjv-type-bigint-color": "#60A5FA",
+                    "--w-rjv-key-number": "#60A5FA",
+                  } as CSSProperties
+                }
+                collapsed={1}
+              >
+                <Primitive.Copied
+                  // @ts-expect-error - types are missing the 'data-copied' prop
+                  render={({ "data-copied": copied, onClick }) => {
+                    if (copied) {
+                      return (
+                        <CheckCircleMiniSolid className="text-ui-fg-subtle cursor-pointer align-middle" />
+                      )
+                    }
+                    return (
+                      <SquareTwoStackMini
+                        className="text-ui-fg-subtle cursor-pointer align-middle"
+                        onClick={onClick}
+                      />
+                    )
+                  }}
+                />
+                <Primitive.Quote render={() => " "} />
+                <Primitive.Null
+                  render={() => (
+                    <span className="text-ui-tag-red-text">null</span>
+                  )}
+                />
+                <Primitive.CountInfo
+                  render={(_props, { value }) => {
+                    return (
+                      <span className="text-ui-tag-neutral-text ml-2">
+                        {Object.keys(value as object).length} items
+                      </span>
+                    )
+                  }}
+                />
+              </Primitive>
+            </Suspense>
+          </Drawer.Body>
+        </Drawer.Content>
+      </Drawer>
+    </Container>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/common/product-table-cells/index.ts b/packages/admin-next/dashboard/src/components/common/product-table-cells/index.ts
new file mode 100644
index 0000000000000..8e79962ee024c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/product-table-cells/index.ts
@@ -0,0 +1 @@
+export * from "./product-table-cells"
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
new file mode 100644
index 0000000000000..63ca516c8e3ce
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/product-table-cells/product-table-cells.tsx
@@ -0,0 +1,133 @@
+import {
+  Product,
+  ProductCollection,
+  ProductVariant,
+  SalesChannel,
+} from "@medusajs/medusa"
+import { StatusBadge, Text } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { Thumbnail } from "../thumbnail"
+
+export const ProductInventoryCell = ({
+  variants,
+}: {
+  variants: ProductVariant[] | null
+}) => {
+  const { t } = useTranslation()
+
+  if (!variants || !variants.length) {
+    return (
+      <Text size="small" className="text-ui-fg-subtle">
+        -
+      </Text>
+    )
+  }
+
+  const inventory = variants.reduce((acc, v) => acc + v.inventory_quantity, 0)
+
+  return (
+    <Text size="small" className="text-ui-fg-base">
+      {t("products.inStockVariants", {
+        count: variants.length,
+        inventory: inventory,
+      })}
+    </Text>
+  )
+}
+
+export const ProductStatusCell = ({
+  status,
+}: {
+  status: Product["status"]
+}) => {
+  const { t } = useTranslation()
+
+  const color = {
+    draft: "grey",
+    published: "green",
+    rejected: "red",
+    proposed: "blue",
+  }[status] as "grey" | "green" | "red" | "blue"
+
+  return (
+    <StatusBadge color={color}>
+      {t(`products.productStatus.${status}`)}
+    </StatusBadge>
+  )
+}
+
+export const ProductAvailabilityCell = ({
+  salesChannels,
+}: {
+  salesChannels: SalesChannel[] | null
+}) => {
+  const { t } = useTranslation()
+
+  if (!salesChannels || salesChannels.length === 0) {
+    return (
+      <Text size="small" className="text-ui-fg-subtle">
+        -
+      </Text>
+    )
+  }
+
+  if (salesChannels.length < 3) {
+    return (
+      <Text size="small" className="text-ui-fg-base">
+        {salesChannels.map((sc) => sc.name).join(", ")}
+      </Text>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-x-2">
+      <Text size="small" className="text-ui-fg-base">
+        <span>
+          {salesChannels
+            .slice(0, 2)
+            .map((sc) => sc.name)
+            .join(", ")}
+        </span>{" "}
+        <span>
+          {t("general.plusCountMore", {
+            count: salesChannels.length - 2,
+          })}
+        </span>
+      </Text>
+    </div>
+  )
+}
+
+export const ProductTitleCell = ({ product }: { product: Product }) => {
+  const thumbnail = product.thumbnail
+  const title = product.title
+
+  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>
+  )
+}
+
+export const ProductCollectionCell = ({
+  collection,
+}: {
+  collection: ProductCollection | null
+}) => {
+  if (!collection) {
+    return (
+      <Text size="small" className="text-ui-fg-subtle">
+        -
+      </Text>
+    )
+  }
+
+  return (
+    <Text size="small" className="text-ui-fg-base">
+      {collection.title}
+    </Text>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/common/thumbnail/index.ts b/packages/admin-next/dashboard/src/components/common/thumbnail/index.ts
new file mode 100644
index 0000000000000..2ce6a8611ccec
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/thumbnail/index.ts
@@ -0,0 +1 @@
+export * from "./thumbnail";
diff --git a/packages/admin-next/dashboard/src/components/common/thumbnail/thumbnail.tsx b/packages/admin-next/dashboard/src/components/common/thumbnail/thumbnail.tsx
new file mode 100644
index 0000000000000..f63583de3afef
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/common/thumbnail/thumbnail.tsx
@@ -0,0 +1,22 @@
+import { Photo } from "@medusajs/icons";
+
+type ThumbnailProps = {
+  src?: string | null;
+  alt?: string;
+};
+
+export const Thumbnail = ({ src, alt }: ThumbnailProps) => {
+  return (
+    <div className="bg-ui-bg-component flex h-8 w-6 items-center justify-center overflow-hidden rounded-[4px]">
+      {src ? (
+        <img
+          src={src}
+          alt={alt}
+          className="h-full w-full object-cover object-center"
+        />
+      ) : (
+        <Photo />
+      )}
+    </div>
+  );
+};
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
new file mode 100644
index 0000000000000..6bc6d1719c197
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/error/error-boundary/error-boundary.tsx
@@ -0,0 +1,26 @@
+import type { AxiosError } from "axios"
+import { Navigate, useLocation, useRouteError } from "react-router-dom"
+
+export const ErrorBoundary = () => {
+  const error = useRouteError()
+  const location = useLocation()
+
+  if (isAxiosError(error)) {
+    if (error.response?.status === 404) {
+      return <Navigate to="/404" />
+    }
+
+    if (error.response?.status === 401) {
+      return <Navigate to="/login" state={{ from: location }} replace />
+    }
+
+    // TODO: Catch other server errors
+  }
+
+  // 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/error/error-boundary/index.ts b/packages/admin-next/dashboard/src/components/error/error-boundary/index.ts
new file mode 100644
index 0000000000000..05bbdd4b57f12
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/error/error-boundary/index.ts
@@ -0,0 +1 @@
+export { ErrorBoundary } from "./error-boundary"
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
new file mode 100644
index 0000000000000..0946a6a9c34a8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/app-layout.tsx
@@ -0,0 +1,26 @@
+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
new file mode 100644
index 0000000000000..3ccb7ce18e8e4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/breadcrumbs.tsx
@@ -0,0 +1,52 @@
+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
new file mode 100644
index 0000000000000..00b75f447b546
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/gutter.tsx
@@ -0,0 +1,9 @@
+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
new file mode 100644
index 0000000000000..07c56e200ed05
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..917b5b80aae65
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/loader.tsx
@@ -0,0 +1,26 @@
+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
new file mode 100644
index 0000000000000..9332308ea76d3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/main-nav.tsx
@@ -0,0 +1,380 @@
+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
new file mode 100644
index 0000000000000..23d6f9946ea09
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/nav-item.tsx
@@ -0,0 +1,148 @@
+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/notifications.tsx b/packages/admin-next/dashboard/src/components/layout/app-layout/notifications.tsx
new file mode 100644
index 0000000000000..6af0a698a3f0a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/notifications.tsx
@@ -0,0 +1,37 @@
+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);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "n" && (e.metaKey || e.ctrlKey)) {
+        setOpen((prev) => !prev);
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <Drawer.Trigger asChild>
+        <IconButton variant="transparent" className="text-ui-fg-muted">
+          <BellAlert />
+        </IconButton>
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Heading>Notifications</Heading>
+        </Drawer.Header>
+        <Drawer.Body>Notifications will go here</Drawer.Body>
+      </Drawer.Content>
+    </Drawer>
+  );
+};
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
new file mode 100644
index 0000000000000..949cca5ce13c2
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/search-toggle.tsx
@@ -0,0 +1,17 @@
+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
new file mode 100644
index 0000000000000..acb25a8aa93b6
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/settings-nav.tsx
@@ -0,0 +1,119 @@
+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
new file mode 100644
index 0000000000000..4e00210d2f17c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/spacer.tsx
@@ -0,0 +1,7 @@
+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
new file mode 100644
index 0000000000000..cd2bdc40db765
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/app-layout/topbar.tsx
@@ -0,0 +1,19 @@
+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/public-layout/index.ts b/packages/admin-next/dashboard/src/components/layout/public-layout/index.ts
new file mode 100644
index 0000000000000..b207d31a78b13
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/public-layout/index.ts
@@ -0,0 +1 @@
+export * from "./public-layout";
diff --git a/packages/admin-next/dashboard/src/components/layout/public-layout/public-layout.tsx b/packages/admin-next/dashboard/src/components/layout/public-layout/public-layout.tsx
new file mode 100644
index 0000000000000..042fe32ac198d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/layout/public-layout/public-layout.tsx
@@ -0,0 +1,14 @@
+import { Outlet } from "react-router-dom";
+
+export const PublicLayout = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4 py-6">
+      <div className="bg-ui-bg-base text-ui-fg-subtle w-[520px] px-16 py-20 rounded-[32px] shadow-elevation-modal flex flex-col gap-y-12 items-center">
+        <div className="w-24 h-24 rounded-3xl bg-ui-bg-subtle shadow-elevation-card-hover"></div>
+        <div className="w-full">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/components/search/index.ts b/packages/admin-next/dashboard/src/components/search/index.ts
new file mode 100644
index 0000000000000..c368ec9117d09
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/search/index.ts
@@ -0,0 +1 @@
+export { Search } from "./search"
diff --git a/packages/admin-next/dashboard/src/components/search/search.tsx b/packages/admin-next/dashboard/src/components/search/search.tsx
new file mode 100644
index 0000000000000..5bee68d10a922
--- /dev/null
+++ b/packages/admin-next/dashboard/src/components/search/search.tsx
@@ -0,0 +1,245 @@
+import { MagnifyingGlass } from "@medusajs/icons"
+import { clx } from "@medusajs/ui"
+import * as Dialog from "@radix-ui/react-dialog"
+import { Command } from "cmdk"
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  HTMLAttributes,
+  forwardRef,
+  useMemo,
+} from "react"
+import { useTranslation } from "react-i18next"
+import { useSearch } from "../../providers/search-provider"
+
+export const Search = () => {
+  const { open, onOpenChange } = useSearch()
+  const links = useLinks()
+
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
+      <CommandInput placeholder="Search" />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        {links.map((group) => {
+          return (
+            <CommandGroup key={group.title} heading={group.title}>
+              {group.items.map((item) => {
+                return (
+                  <CommandItem key={item.label}>
+                    <span>{item.label}</span>
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+          )
+        })}
+      </CommandList>
+    </CommandDialog>
+  )
+}
+
+type CommandItemProps = {
+  label: string
+}
+
+type CommandGroupProps = {
+  title: string
+  items: CommandItemProps[]
+}
+
+const useLinks = (): CommandGroupProps[] => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      {
+        title: "Pages",
+        items: [
+          {
+            label: t("products.domain"),
+          },
+          {
+            label: t("categories.domain"),
+          },
+          {
+            label: t("collections.domain"),
+          },
+          {
+            label: t("giftCards.domain"),
+          },
+          {
+            label: t("orders.domain"),
+          },
+          {
+            label: t("draftOrders.domain"),
+          },
+          {
+            label: t("customers.domain"),
+          },
+          {
+            label: t("customerGroups.domain"),
+          },
+          {
+            label: t("discounts.domain"),
+          },
+          {
+            label: t("pricing.domain"),
+          },
+        ],
+      },
+      {
+        title: "Settings",
+        items: [
+          {
+            label: t("profile.domain"),
+          },
+          {
+            label: t("store.domain"),
+          },
+          {
+            label: t("users.domain"),
+          },
+        ],
+      },
+    ],
+    [t]
+  )
+}
+
+const CommandPalette = forwardRef<
+  ElementRef<typeof Command>,
+  ComponentPropsWithoutRef<typeof Command>
+>(({ className, ...props }, ref) => (
+  <Command
+    ref={ref}
+    className={clx(
+      "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = Command.displayName
+
+interface CommandDialogProps extends Dialog.DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <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">
+          <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>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+const CommandInput = forwardRef<
+  ElementRef<typeof Command.Input>,
+  ComponentPropsWithoutRef<typeof Command.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlass className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <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",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = Command.Input.displayName
+
+const CommandList = forwardRef<
+  ElementRef<typeof Command.List>,
+  ComponentPropsWithoutRef<typeof Command.List>
+>(({ className, ...props }, ref) => (
+  <Command.List
+    ref={ref}
+    className={clx(
+      "max-h-[300px] overflow-y-auto overflow-x-hidden",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandList.displayName = Command.List.displayName
+
+const CommandEmpty = forwardRef<
+  ElementRef<typeof Command.Empty>,
+  ComponentPropsWithoutRef<typeof Command.Empty>
+>((props, ref) => (
+  <Command.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+
+CommandEmpty.displayName = Command.Empty.displayName
+
+const CommandGroup = forwardRef<
+  ElementRef<typeof Command.Group>,
+  ComponentPropsWithoutRef<typeof Command.Group>
+>(({ className, ...props }, ref) => (
+  <Command.Group
+    ref={ref}
+    className={clx(
+      "text-ui-fg-base [&_[cmdk-group-heading]]:text-ui-fg-muted [&_[cmdk-group-heading]]:txt-compact-xsmall-plus overflow-hidden px-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:pt-4 [&_[cmdk-item]]:py-2",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = Command.Group.displayName
+
+const CommandSeparator = forwardRef<
+  ElementRef<typeof Command.Separator>,
+  ComponentPropsWithoutRef<typeof Command.Separator>
+>(({ className, ...props }, ref) => (
+  <Command.Separator
+    ref={ref}
+    className={clx("bg-border -mx-1 h-px", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = Command.Separator.displayName
+
+const CommandItem = forwardRef<
+  ElementRef<typeof Command.Item>,
+  ComponentPropsWithoutRef<typeof Command.Item>
+>(({ className, ...props }, ref) => (
+  <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",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = Command.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={clx(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
diff --git a/packages/admin-next/dashboard/src/i18n/config.ts b/packages/admin-next/dashboard/src/i18n/config.ts
new file mode 100644
index 0000000000000..c346a4b8aca68
--- /dev/null
+++ b/packages/admin-next/dashboard/src/i18n/config.ts
@@ -0,0 +1,28 @@
+import i18n from "i18next"
+import LanguageDetector from "i18next-browser-languagedetector"
+import Backend, { type HttpBackendOptions } from "i18next-http-backend"
+import { initReactI18next } from "react-i18next"
+
+import { Language } from "./types"
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init<HttpBackendOptions>({
+    fallbackLng: "en",
+    debug: process.env.NODE_ENV === "development",
+    interpolation: {
+      escapeValue: false,
+    },
+  })
+
+export const languages: Language[] = [
+  {
+    code: "en",
+    display_name: "English",
+    ltr: true,
+  },
+]
+
+export default i18n
diff --git a/packages/admin-next/dashboard/src/i18n/types.ts b/packages/admin-next/dashboard/src/i18n/types.ts
new file mode 100644
index 0000000000000..6dd753ee66eb8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/i18n/types.ts
@@ -0,0 +1,13 @@
+import en from "../../public/locales/en/translation.json"
+
+const resources = {
+  translation: en,
+} as const
+
+export type Resources = typeof resources
+
+export type Language = {
+  code: string
+  display_name: string
+  ltr: boolean
+}
diff --git a/packages/admin-next/dashboard/src/i18next.d.ts b/packages/admin-next/dashboard/src/i18next.d.ts
new file mode 100644
index 0000000000000..bd7cf8079ab10
--- /dev/null
+++ b/packages/admin-next/dashboard/src/i18next.d.ts
@@ -0,0 +1,7 @@
+import { Resources } from "./i18n/types";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    resources: Resources;
+  }
+}
diff --git a/packages/admin-next/dashboard/src/index.css b/packages/admin-next/dashboard/src/index.css
new file mode 100644
index 0000000000000..b8cac0738d00b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/index.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: "Inter";
+    font-weight: 400;
+    src: url("./assets/fonts/Inter-Regular.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: "Inter";
+    font-weight: 500;
+    src: url("./assets/fonts/Inter-Medium.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    font-weight: 400;
+    src: url("./assets/fonts/RobotoMono-Regular.ttf") format("truetype");
+  }
+
+  @font-face {
+    font-family: "Roboto Mono";
+    font-weight: 500;
+    src: url("./assets/fonts/RobotoMono-Medium.ttf") format("truetype");
+  }
+
+  :root {
+    @apply bg-ui-bg-subtle text-ui-fg-base;
+  }
+}
diff --git a/packages/admin-next/dashboard/src/lib/medusa.ts b/packages/admin-next/dashboard/src/lib/medusa.ts
new file mode 100644
index 0000000000000..5b3a4f4abe96d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/lib/medusa.ts
@@ -0,0 +1,17 @@
+import Medusa from "@medusajs/medusa-js"
+import { QueryClient } from "@tanstack/react-query"
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      staleTime: 90000,
+      retry: 1,
+    },
+  },
+})
+
+export const medusa = new Medusa({
+  baseUrl: "http://localhost:9000",
+  maxRetries: 3,
+})
diff --git a/packages/admin-next/dashboard/src/main.tsx b/packages/admin-next/dashboard/src/main.tsx
new file mode 100644
index 0000000000000..1a7a8db9a53c0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/main.tsx
@@ -0,0 +1,11 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./app.js"
+import "./i18n/config.js"
+import "./index.css"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/packages/admin-next/dashboard/src/module.d.ts b/packages/admin-next/dashboard/src/module.d.ts
new file mode 100644
index 0000000000000..f4e02f1344504
--- /dev/null
+++ b/packages/admin-next/dashboard/src/module.d.ts
@@ -0,0 +1,39 @@
+declare module "medusa-admin:widgets/*" {
+  const widgets: { Component: () => JSX.Element }[]
+
+  export default {
+    widgets,
+  }
+}
+
+declare module "medusa-admin:routes/links" {
+  const links: { path: string; label: string; icon?: React.ComponentType }[]
+
+  export default {
+    links,
+  }
+}
+
+declare module "medusa-admin:routes/pages" {
+  const pages: { path: string; file: string }[]
+
+  export default {
+    pages,
+  }
+}
+
+declare module "medusa-admin:settings/cards" {
+  const cards: { path: string; label: string; description: string }[]
+
+  export default {
+    cards,
+  }
+}
+
+declare module "medusa-admin:settings/pages" {
+  const pages: { path: string; file: string }[]
+
+  export default {
+    pages,
+  }
+}
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
new file mode 100644
index 0000000000000..4068ea01d8c6d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/auth-provider/auth-context.tsx
@@ -0,0 +1,10 @@
+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
new file mode 100644
index 0000000000000..ddb2589cd46db
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/auth-provider/auth-provider.tsx
@@ -0,0 +1,24 @@
+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
new file mode 100644
index 0000000000000..c2b66aa1c09de
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/auth-provider/index.ts
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 0000000000000..8bef3683caaf5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/auth-provider/use-auth.tsx
@@ -0,0 +1,10 @@
+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/feature-provider/feature-context.tsx b/packages/admin-next/dashboard/src/providers/feature-provider/feature-context.tsx
new file mode 100644
index 0000000000000..6174089677a5a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/feature-provider/feature-context.tsx
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { Feature } from "./types";
+
+type FeatureContextValue = {
+  isFeatureEnabled: (feature: Feature) => boolean;
+};
+
+export const FeatureContext = createContext<FeatureContextValue | null>(null);
diff --git a/packages/admin-next/dashboard/src/providers/feature-provider/feature-provider.tsx b/packages/admin-next/dashboard/src/providers/feature-provider/feature-provider.tsx
new file mode 100644
index 0000000000000..106f9c60e951a
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/feature-provider/feature-provider.tsx
@@ -0,0 +1,33 @@
+import { useAdminStore } from "medusa-react";
+import { PropsWithChildren, useEffect, useState } from "react";
+import { FeatureContext } from "./feature-context";
+import { Feature } from "./types";
+
+export const FeatureProvider = ({ children }: PropsWithChildren) => {
+  const { store, isLoading } = useAdminStore();
+  const [features, setFeatures] = useState<Feature[]>([]);
+
+  useEffect(() => {
+    if (!store || isLoading) {
+      return;
+    }
+
+    const flags = store.feature_flags
+      .filter((f) => f.value === true)
+      .map((f) => f.key);
+    const modules = store.modules.map((m) => m.module);
+    const enabled = flags.concat(modules);
+
+    setFeatures(enabled as Feature[]);
+  }, [store, isLoading]);
+
+  function isFeatureEnabled(feature: Feature) {
+    return features.includes(feature);
+  }
+
+  return (
+    <FeatureContext.Provider value={{ isFeatureEnabled }}>
+      {children}
+    </FeatureContext.Provider>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/providers/feature-provider/index.ts b/packages/admin-next/dashboard/src/providers/feature-provider/index.ts
new file mode 100644
index 0000000000000..a78a41ce93f96
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/feature-provider/index.ts
@@ -0,0 +1,2 @@
+export { FeatureProvider } from "./feature-provider";
+export { useFeature } from "./use-feature";
diff --git a/packages/admin-next/dashboard/src/providers/feature-provider/types.ts b/packages/admin-next/dashboard/src/providers/feature-provider/types.ts
new file mode 100644
index 0000000000000..cc639bb4f1507
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/feature-provider/types.ts
@@ -0,0 +1,16 @@
+const featureFlags = [
+  "analytics",
+  "order_editing",
+  "product_categories",
+  "publishable_api_keys",
+  "sales_channels",
+  "tax_inclusive_pricing",
+] as const;
+
+type FeatureFlag = (typeof featureFlags)[number];
+
+const modules = ["inventory"] as const;
+
+type Module = (typeof modules)[number];
+
+export type Feature = FeatureFlag | Module;
diff --git a/packages/admin-next/dashboard/src/providers/feature-provider/use-feature.tsx b/packages/admin-next/dashboard/src/providers/feature-provider/use-feature.tsx
new file mode 100644
index 0000000000000..d49a8548f3cd9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/feature-provider/use-feature.tsx
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { FeatureContext } from "./feature-context";
+
+export const useFeature = () => {
+  const context = useContext(FeatureContext);
+  if (context === null) {
+    throw new Error("useFeature must be used within a FeatureProvider");
+  }
+  return context;
+};
diff --git a/packages/admin-next/dashboard/src/providers/router-provider/index.ts b/packages/admin-next/dashboard/src/providers/router-provider/index.ts
new file mode 100644
index 0000000000000..c259add166444
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/router-provider/index.ts
@@ -0,0 +1 @@
+export * from "./router-provider";
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
new file mode 100644
index 0000000000000..ae5b05bfb891b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/router-provider/router-provider.tsx
@@ -0,0 +1,319 @@
+import {
+  RouterProvider as Provider,
+  RouteObject,
+  createBrowserRouter,
+} from "react-router-dom"
+
+import { RequireAuth } from "../../components/authentication/require-auth"
+import { AppLayout } from "../../components/layout/app-layout"
+import { PublicLayout } from "../../components/layout/public-layout"
+
+import { AdminProductsRes } from "@medusajs/medusa"
+import routes from "medusa-admin:routes/pages"
+import settings from "medusa-admin:settings/pages"
+import { ErrorBoundary } from "../../components/error/error-boundary"
+import { SearchProvider } from "../search-provider"
+
+const routeExtensions: RouteObject[] = routes.pages.map((ext) => {
+  return {
+    path: ext.path,
+    async lazy() {
+      const { default: Component } = await import(/* @vite-ignore */ ext.file)
+      return { Component }
+    },
+  }
+})
+
+const settingsExtensions: RouteObject[] = settings.pages.map((ext) => {
+  return {
+    path: `/settings${ext.path}`,
+    async lazy() {
+      const { default: Component } = await import(/* @vite-ignore */ ext.file)
+      return { Component }
+    },
+  }
+})
+
+const router = createBrowserRouter([
+  {
+    element: <PublicLayout />,
+    children: [
+      {
+        path: "/login",
+        lazy: () => import("../../routes/login"),
+      },
+    ],
+  },
+  {
+    element: (
+      <RequireAuth>
+        <SearchProvider>
+          <AppLayout />
+        </SearchProvider>
+      </RequireAuth>
+    ),
+    errorElement: <ErrorBoundary />,
+    children: [
+      {
+        path: "/",
+        lazy: () => import("../../routes/home"),
+      },
+      {
+        path: "/orders",
+        children: [
+          {
+            index: true,
+            lazy: () => import("../../routes/orders/list"),
+          },
+          {
+            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"),
+            handle: {
+              crumb: (data: AdminProductsRes) => data.product.title,
+            },
+          },
+        ],
+      },
+      {
+        path: "/categories",
+        children: [
+          {
+            index: true,
+            lazy: () => import("../../routes/categories/list"),
+          },
+          {
+            path: ":id",
+            lazy: () => import("../../routes/categories/details"),
+          },
+        ],
+      },
+      {
+        path: "/collections",
+        children: [
+          {
+            index: true,
+            lazy: () => import("../../routes/collections/list"),
+          },
+          {
+            path: ":id",
+            lazy: () => import("../../routes/collections/details"),
+          },
+        ],
+      },
+      {
+        path: "/customers",
+        children: [
+          {
+            index: true,
+            lazy: () => import("../../routes/customers/list"),
+          },
+          {
+            path: ":id",
+            lazy: () => import("../../routes/customers/details"),
+          },
+        ],
+      },
+      {
+        path: "/customer-groups",
+        children: [
+          {
+            index: true,
+            lazy: () => import("../../routes/customer-groups/list"),
+          },
+          {
+            path: ":id",
+            lazy: () => import("../../routes/customer-groups/details"),
+          },
+        ],
+      },
+      {
+        path: "/gift-cards",
+        children: [
+          {
+            index: true,
+            lazy: () => import("../../routes/gift-cards/list"),
+          },
+          {
+            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: ":id",
+            lazy: () => import("../../routes/discounts/details"),
+          },
+        ],
+      },
+      {
+        path: "/pricing",
+        children: [
+          {
+            index: true,
+            lazy: () => import("../../routes/pricing/list"),
+          },
+          {
+            path: ":id",
+            lazy: () => import("../../routes/pricing/details"),
+          },
+        ],
+      },
+      {
+        path: "/settings",
+        handle: {
+          crumb: () => "Settings",
+        },
+        children: [
+          {
+            index: true,
+            lazy: () => import("../../routes/settings"),
+          },
+          {
+            path: "profile",
+            lazy: () => import("../../routes/profile/views/profile-details"),
+            handle: {
+              crumb: () => "Profile",
+            },
+          },
+          {
+            path: "store",
+            lazy: () => import("../../routes/store/views/store-details"),
+            handle: {
+              crumb: () => "Store",
+            },
+          },
+          {
+            path: "locations",
+            lazy: () => import("../../routes/locations/list"),
+          },
+          {
+            path: "regions",
+            handle: {
+              crumb: () => "Regions",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/regions/views/region-list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/regions/views/region-details"),
+              },
+            ],
+          },
+          {
+            path: "users",
+            lazy: () => import("../../routes/users"),
+            handle: {
+              crumb: () => "Users",
+            },
+          },
+          {
+            path: "currencies",
+            lazy: () =>
+              import("../../routes/currencies/views/currencies-details"),
+            handle: {
+              crumb: () => "Currencies",
+            },
+          },
+          {
+            path: "taxes",
+            handle: {
+              crumb: () => "Taxes",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () => import("../../routes/taxes/views/tax-list"),
+              },
+              {
+                path: ":id",
+                lazy: () => import("../../routes/taxes/views/tax-details"),
+              },
+            ],
+          },
+          {
+            path: "sales-channels",
+            handle: {
+              crumb: () => "Sales Channels",
+            },
+            children: [
+              {
+                index: true,
+                lazy: () =>
+                  import(
+                    "../../routes/sales-channels/views/sales-channel-list"
+                  ),
+              },
+              {
+                path: ":id",
+                lazy: () =>
+                  import(
+                    "../../routes/sales-channels/views/sales-channel-details"
+                  ),
+              },
+            ],
+          },
+          {
+            path: "api-key-management",
+            lazy: () => import("../../routes/api-key-management"),
+            handle: {
+              crumb: () => "API Key Management",
+            },
+          },
+          ...settingsExtensions,
+        ],
+      },
+      ...routeExtensions,
+    ],
+  },
+  {
+    path: "*",
+    lazy: () => import("../../routes/no-match"),
+  },
+])
+
+export const RouterProvider = () => {
+  return <Provider router={router} />
+}
diff --git a/packages/admin-next/dashboard/src/providers/search-provider/index.ts b/packages/admin-next/dashboard/src/providers/search-provider/index.ts
new file mode 100644
index 0000000000000..990ae4daeada7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/search-provider/index.ts
@@ -0,0 +1,2 @@
+export { SearchProvider } from "./search-provider"
+export { useSearch } from "./use-search"
diff --git a/packages/admin-next/dashboard/src/providers/search-provider/search-context.tsx b/packages/admin-next/dashboard/src/providers/search-provider/search-context.tsx
new file mode 100644
index 0000000000000..d8ea6ddc84341
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/search-provider/search-context.tsx
@@ -0,0 +1,9 @@
+import { createContext } from "react"
+
+type SearchContextValue = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  toggleSearch: () => void
+}
+
+export const SearchContext = createContext<SearchContextValue | null>(null)
diff --git a/packages/admin-next/dashboard/src/providers/search-provider/search-provider.tsx b/packages/admin-next/dashboard/src/providers/search-provider/search-provider.tsx
new file mode 100644
index 0000000000000..eb42c28c22eb3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/search-provider/search-provider.tsx
@@ -0,0 +1,38 @@
+import { PropsWithChildren, useEffect, useState } from "react"
+import { Search } from "../../components/search"
+import { SearchContext } from "./search-context"
+
+export const SearchProvider = ({ children }: PropsWithChildren) => {
+  const [open, setOpen] = useState(false)
+
+  const toggleSearch = () => {
+    setOpen(!open)
+  }
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        setOpen((prev) => !prev)
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown)
+
+    return () => {
+      document.removeEventListener("keydown", onKeyDown)
+    }
+  }, [])
+
+  return (
+    <SearchContext.Provider
+      value={{
+        open,
+        onOpenChange: setOpen,
+        toggleSearch,
+      }}
+    >
+      {children}
+      <Search />
+    </SearchContext.Provider>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/providers/search-provider/use-search.tsx b/packages/admin-next/dashboard/src/providers/search-provider/use-search.tsx
new file mode 100644
index 0000000000000..88b6f2863fcd9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/search-provider/use-search.tsx
@@ -0,0 +1,10 @@
+import { useContext } from "react"
+import { SearchContext } from "./search-context"
+
+export const useSearch = () => {
+  const context = useContext(SearchContext)
+  if (!context) {
+    throw new Error("useSearch must be used within a SearchProvider")
+  }
+  return context
+}
diff --git a/packages/admin-next/dashboard/src/providers/theme-provider/index.ts b/packages/admin-next/dashboard/src/providers/theme-provider/index.ts
new file mode 100644
index 0000000000000..d12c36092f5f4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/theme-provider/index.ts
@@ -0,0 +1,3 @@
+export type { Theme } from "./theme-context";
+export * from "./theme-provider";
+export * from "./use-theme";
diff --git a/packages/admin-next/dashboard/src/providers/theme-provider/theme-context.tsx b/packages/admin-next/dashboard/src/providers/theme-provider/theme-context.tsx
new file mode 100644
index 0000000000000..bcb55c682333e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/theme-provider/theme-context.tsx
@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+export type Theme = "light" | "dark";
+
+type ThemeContextValue = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null);
diff --git a/packages/admin-next/dashboard/src/providers/theme-provider/theme-provider.tsx b/packages/admin-next/dashboard/src/providers/theme-provider/theme-provider.tsx
new file mode 100644
index 0000000000000..0bb741620db2e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/theme-provider/theme-provider.tsx
@@ -0,0 +1,54 @@
+import { PropsWithChildren, useEffect, useState } from "react";
+import { Theme, ThemeContext } from "./theme-context";
+
+const THEME_KEY = "medusa_admin_theme";
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  const [state, setState] = useState<Theme>(
+    (localStorage?.getItem(THEME_KEY) as Theme) || "light"
+  );
+
+  const setTheme = (theme: Theme) => {
+    localStorage.setItem(THEME_KEY, theme);
+    setState(theme);
+  };
+
+  useEffect(() => {
+    const html = document.querySelector("html");
+    if (html) {
+      /**
+       * Temporarily disable transitions to prevent
+       * the theme change from flashing.
+       */
+      const css = document.createElement("style");
+      css.appendChild(
+        document.createTextNode(
+          `* {
+            -webkit-transition: none !important;
+            -moz-transition: none !important;
+            -o-transition: none !important;
+            -ms-transition: none !important;
+            transition: none !important;
+          }`
+        )
+      );
+      document.head.appendChild(css);
+
+      html.classList.remove(state === "light" ? "dark" : "light");
+      html.classList.add(state);
+
+      /**
+       * Re-enable transitions after the theme has been set,
+       * and force the browser to repaint.
+       */
+      window.getComputedStyle(css).opacity;
+      document.head.removeChild(css);
+    }
+  }, [state]);
+
+  return (
+    <ThemeContext.Provider value={{ theme: state, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/providers/theme-provider/use-theme.tsx b/packages/admin-next/dashboard/src/providers/theme-provider/use-theme.tsx
new file mode 100644
index 0000000000000..e272a578b4173
--- /dev/null
+++ b/packages/admin-next/dashboard/src/providers/theme-provider/use-theme.tsx
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { ThemeContext } from "./theme-context";
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
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.tsx
new file mode 100644
index 0000000000000..d896d2578a62d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/api-key-management.tsx
@@ -0,0 +1,368 @@
+import { InformationCircle } from "@medusajs/icons"
+import { PublishableApiKey, SalesChannel } from "@medusajs/medusa"
+import {
+  Button,
+  Checkbox,
+  Container,
+  FocusModal,
+  Heading,
+  Hint,
+  Input,
+  Label,
+  Table,
+  Text,
+  clx,
+} from "@medusajs/ui"
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import {
+  useAdminCreatePublishableApiKey,
+  useAdminPublishableApiKeys,
+  useAdminSalesChannels,
+} from "medusa-react"
+import { 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"
+
+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
+
+  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}
+      />
+    </div>
+  )
+}
+
+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: "ID",
+        cell: ({ getValue }) => getValue(),
+      }),
+    ],
+    [t]
+  )
+
+  return columns
+}
+
+const CreatePublishableApiKeySchema = zod.object({
+  title: zod.string().min(1),
+  sales_channel_ids: zod.array(zod.string()).min(1),
+})
+
+type CreatePublishableApiKeySchema = zod.infer<
+  typeof CreatePublishableApiKeySchema
+>
+
+type CreatePublishableApiKeyProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const salesChannelColumnHelper = createColumnHelper<SalesChannel>()
+
+const useSalesChannelColumns = () => {
+  const { t } = useTranslation()
+
+  const columns = useMemo(
+    () => [
+      salesChannelColumnHelper.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()
+              }}
+            />
+          )
+        },
+      }),
+      salesChannelColumnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => getValue(),
+      }),
+      salesChannelColumnHelper.accessor("description", {
+        header: t("fields.description"),
+        cell: ({ getValue }) => getValue(),
+      }),
+    ],
+    [t]
+  )
+
+  return columns
+}
+
+const CreatePublishableApiKey = (props: CreatePublishableApiKeyProps) => {
+  const form = useForm<CreatePublishableApiKeySchema>({
+    defaultValues: {
+      title: "",
+      sales_channel_ids: [],
+    },
+  })
+
+  const { mutateAsync } = useAdminCreatePublishableApiKey()
+
+  const { sales_channels, isLoading, isError, error } = useAdminSalesChannels()
+  const columns = useSalesChannelColumns()
+
+  const table = useReactTable({
+    data: sales_channels || [],
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  const onSubmit = form.handleSubmit(async ({ title, sales_channel_ids }) => {
+    await mutateAsync({
+      title,
+    })
+  })
+
+  const { t } = useTranslation()
+
+  return (
+    <FocusModal {...props}>
+      <Form {...form}>
+        <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>
+            </div>
+          </FocusModal.Header>
+          <FocusModal.Body className="flex flex-col items-center py-16">
+            <div className="flex w-full max-w-[720px] flex-col gap-y-4">
+              <div className="flex flex-col gap-y-4">
+                <Heading>Create API Key</Heading>
+                <Text size="small" className="text-ui-fg-subtle">
+                  Create and manage API keys. API keys are used to limit the
+                  scope of requests to specific sales channels.
+                </Text>
+              </div>
+              <div className="flex flex-col gap-y-8">
+                <div className="grid grid-cols-2">
+                  <Form.Field
+                    control={form.control}
+                    name="title"
+                    render={({ field }) => (
+                      <Form.Item>
+                        <Form.Label>{t("fields.title")}</Form.Label>
+                        <Form.Control>
+                          <Input {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )}
+                  />
+                </div>
+                <div>
+                  <Label weight="plus">Sales Channels</Label>
+                  <Hint></Hint>
+                  <Container className="overflow-hidden p-0">
+                    <div className="px-8 pb-4 pt-6">
+                      <Heading level="h2">Sales Channels</Heading>
+                    </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 last-of-type:border-b-0 [&_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>
+                  </Container>
+                </div>
+              </div>
+            </div>
+          </FocusModal.Body>
+        </FocusModal.Content>
+      </Form>
+    </FocusModal>
+  )
+}
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
new file mode 100644
index 0000000000000..9ddecac337c28
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/api-key-management/index.ts
@@ -0,0 +1 @@
+export { ApiKeyManagement as Component } from "./api-key-management"
diff --git a/packages/admin-next/dashboard/src/routes/categories/details/details.tsx b/packages/admin-next/dashboard/src/routes/categories/details/details.tsx
new file mode 100644
index 0000000000000..f2b6b1cf9cdcc
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/categories/details/details.tsx
@@ -0,0 +1,28 @@
+import { Container, Heading } from "@medusajs/ui";
+
+import after from "medusa-admin:widgets/product_category/details/after";
+import before from "medusa-admin:widgets/product_category/details/before";
+
+export const CategoryDetails = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        );
+      })}
+      <Container>
+        <Heading>Category</Heading>
+      </Container>
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/categories/details/index.ts b/packages/admin-next/dashboard/src/routes/categories/details/index.ts
new file mode 100644
index 0000000000000..b3fb063949c4d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/categories/details/index.ts
@@ -0,0 +1 @@
+export { CategoryDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/categories/list/index.ts b/packages/admin-next/dashboard/src/routes/categories/list/index.ts
new file mode 100644
index 0000000000000..3bb3f12d0021f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/categories/list/index.ts
@@ -0,0 +1 @@
+export { CategoriesList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/categories/list/list.tsx b/packages/admin-next/dashboard/src/routes/categories/list/list.tsx
new file mode 100644
index 0000000000000..9048fd81619d4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/categories/list/list.tsx
@@ -0,0 +1,28 @@
+import { Container, Heading } from "@medusajs/ui";
+
+import after from "medusa-admin:widgets/product_category/list/after";
+import before from "medusa-admin:widgets/product_category/list/before";
+
+export const CategoriesList = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        );
+      })}
+      <Container>
+        <Heading>Categories</Heading>
+      </Container>
+      {after.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/collections/details/details.tsx b/packages/admin-next/dashboard/src/routes/collections/details/details.tsx
new file mode 100644
index 0000000000000..eaa4c0692f717
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/collections/details/details.tsx
@@ -0,0 +1,11 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const CollectionDetails = () => {
+  return (
+    <div>
+      <Container>
+        <Heading>Collection</Heading>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/collections/details/index.ts b/packages/admin-next/dashboard/src/routes/collections/details/index.ts
new file mode 100644
index 0000000000000..3b15dda2e499f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/collections/details/index.ts
@@ -0,0 +1 @@
+export { CollectionDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/collections/list/index.ts b/packages/admin-next/dashboard/src/routes/collections/list/index.ts
new file mode 100644
index 0000000000000..aed84bc76a712
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/collections/list/index.ts
@@ -0,0 +1 @@
+export { CollectionsList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/collections/list/list.tsx b/packages/admin-next/dashboard/src/routes/collections/list/list.tsx
new file mode 100644
index 0000000000000..ec9bda189e159
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/collections/list/list.tsx
@@ -0,0 +1,11 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const CollectionsList = () => {
+  return (
+    <div>
+      <Container>
+        <Heading>Collections</Heading>
+      </Container>
+    </div>
+  );
+};
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
new file mode 100644
index 0000000000000..3a2fc31169181
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/edit-currencies-details-drawer.tsx
@@ -0,0 +1,159 @@
+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
new file mode 100644
index 0000000000000..8a247de79e4c3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/currencies/components/edit-currencies-details-drawer/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..c2550a459a20f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/currencies-details.tsx
@@ -0,0 +1,488 @@
+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
new file mode 100644
index 0000000000000..5069f29b0c7be
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/currencies/views/currencies-details/index.ts
@@ -0,0 +1 @@
+export { CurrenciesDetails as Component } from "./currencies-details"
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
new file mode 100644
index 0000000000000..cc59b9ecdcde8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/details/details.tsx
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 0000000000000..bb5e10a796f37
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/details/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..c9929eedb7b7e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/list/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..6d5f9e292b63f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customer-groups/list/list.tsx
@@ -0,0 +1,11 @@
+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/details/details.tsx b/packages/admin-next/dashboard/src/routes/customers/details/details.tsx
new file mode 100644
index 0000000000000..542e709a0bebd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/details/details.tsx
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 0000000000000..884ed5286cb9f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/details/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..a4826e8abab9f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/list/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..7fdc230dd924e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/customers/list/list.tsx
@@ -0,0 +1,11 @@
+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/discounts/details/details.tsx b/packages/admin-next/dashboard/src/routes/discounts/details/details.tsx
new file mode 100644
index 0000000000000..e93087080eeb9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/discounts/details/details.tsx
@@ -0,0 +1,11 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const DiscountsDetails = () => {
+  return (
+    <div>
+      <Container>
+        <Heading>Discounts</Heading>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/discounts/details/index.ts b/packages/admin-next/dashboard/src/routes/discounts/details/index.ts
new file mode 100644
index 0000000000000..a189be735dcd4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/discounts/details/index.ts
@@ -0,0 +1 @@
+export { DiscountsDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/discounts/list/index.ts b/packages/admin-next/dashboard/src/routes/discounts/list/index.ts
new file mode 100644
index 0000000000000..9ede617802d13
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/discounts/list/index.ts
@@ -0,0 +1 @@
+export { DiscountsList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/discounts/list/list.tsx b/packages/admin-next/dashboard/src/routes/discounts/list/list.tsx
new file mode 100644
index 0000000000000..5be301f0c6f52
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/discounts/list/list.tsx
@@ -0,0 +1,11 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const DiscountsList = () => {
+  return (
+    <div>
+      <Container>
+        <Heading>Discounts</Heading>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/draft-orders/details/details.tsx b/packages/admin-next/dashboard/src/routes/draft-orders/details/details.tsx
new file mode 100644
index 0000000000000..b8524e12f6d4e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/draft-orders/details/details.tsx
@@ -0,0 +1,3 @@
+export const DraftOrderDetails = () => {
+  return <div>Draft Order Details</div>;
+};
diff --git a/packages/admin-next/dashboard/src/routes/draft-orders/details/index.ts b/packages/admin-next/dashboard/src/routes/draft-orders/details/index.ts
new file mode 100644
index 0000000000000..161c177badda0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/draft-orders/details/index.ts
@@ -0,0 +1 @@
+export { DraftOrderDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/draft-orders/list/index.ts b/packages/admin-next/dashboard/src/routes/draft-orders/list/index.ts
new file mode 100644
index 0000000000000..faac1801864a3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/draft-orders/list/index.ts
@@ -0,0 +1 @@
+export { DraftOrderList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/draft-orders/list/list.tsx b/packages/admin-next/dashboard/src/routes/draft-orders/list/list.tsx
new file mode 100644
index 0000000000000..bb62d485b5aae
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/draft-orders/list/list.tsx
@@ -0,0 +1,9 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const DraftOrderList = () => {
+  return (
+    <Container>
+      <Heading>Draft Orders</Heading>
+    </Container>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/gift-cards/details/details.tsx b/packages/admin-next/dashboard/src/routes/gift-cards/details/details.tsx
new file mode 100644
index 0000000000000..a3fb2af4c76d7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/gift-cards/details/details.tsx
@@ -0,0 +1,3 @@
+export const GiftCardDetails = () => {
+  return <div>Gift Card Details</div>;
+};
diff --git a/packages/admin-next/dashboard/src/routes/gift-cards/details/index.ts b/packages/admin-next/dashboard/src/routes/gift-cards/details/index.ts
new file mode 100644
index 0000000000000..efdfebaf78488
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/gift-cards/details/index.ts
@@ -0,0 +1 @@
+export { GiftCardDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/gift-cards/list/index.ts b/packages/admin-next/dashboard/src/routes/gift-cards/list/index.ts
new file mode 100644
index 0000000000000..b28d751cab5f8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/gift-cards/list/index.ts
@@ -0,0 +1 @@
+export { GiftCardList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/gift-cards/list/list.tsx b/packages/admin-next/dashboard/src/routes/gift-cards/list/list.tsx
new file mode 100644
index 0000000000000..bde0081772b36
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/gift-cards/list/list.tsx
@@ -0,0 +1,9 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const GiftCardList = () => {
+  return (
+    <Container>
+      <Heading>Gift Card List</Heading>
+    </Container>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/home/home.tsx b/packages/admin-next/dashboard/src/routes/home/home.tsx
new file mode 100644
index 0000000000000..39541fa17db3d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/home/home.tsx
@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+export const Home = () => {
+  const navigate = useNavigate();
+
+  // Currently, the home page simply redirects to the orders page
+  useEffect(() => {
+    navigate("/orders", { replace: true });
+  }, [navigate]);
+
+  return <div />;
+};
diff --git a/packages/admin-next/dashboard/src/routes/home/index.ts b/packages/admin-next/dashboard/src/routes/home/index.ts
new file mode 100644
index 0000000000000..ea1e81bb8adb8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/home/index.ts
@@ -0,0 +1 @@
+export { Home as Component } from "./home";
diff --git a/packages/admin-next/dashboard/src/routes/inventory/list/index.ts b/packages/admin-next/dashboard/src/routes/inventory/list/index.ts
new file mode 100644
index 0000000000000..cc22dde9bcf1d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/inventory/list/index.ts
@@ -0,0 +1 @@
+export { InventoryList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/inventory/list/list.tsx b/packages/admin-next/dashboard/src/routes/inventory/list/list.tsx
new file mode 100644
index 0000000000000..792b2186be739
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/inventory/list/list.tsx
@@ -0,0 +1,9 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const InventoryList = () => {
+  return (
+    <Container>
+      <Heading>Inventory</Heading>
+    </Container>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/locations/list/index.ts b/packages/admin-next/dashboard/src/routes/locations/list/index.ts
new file mode 100644
index 0000000000000..4ede307bd7acd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/list/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..25a6d42694b32
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/locations/list/list.tsx
@@ -0,0 +1,11 @@
+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/login/index.ts b/packages/admin-next/dashboard/src/routes/login/index.ts
new file mode 100644
index 0000000000000..984b6fdd60d93
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/login/index.ts
@@ -0,0 +1 @@
+export { Login as Component } from "./login";
diff --git a/packages/admin-next/dashboard/src/routes/login/login.tsx b/packages/admin-next/dashboard/src/routes/login/login.tsx
new file mode 100644
index 0000000000000..e042eccff2d20
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/login/login.tsx
@@ -0,0 +1,101 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Heading, Input, Text } from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { Link, useLocation, useNavigate } from "react-router-dom"
+import * as z from "zod"
+
+import { Form } from "../../components/common/form"
+import { useAuth } from "../../providers/auth-provider"
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string(),
+})
+
+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),
+    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",
+            })
+        }
+      })
+  })
+
+  return (
+    <div className="flex flex-col gap-y-12">
+      <div className="flex flex-col items-center">
+        <Heading>Login</Heading>
+        <Text>Welcome back. Login to get started!</Text>
+      </div>
+      <Form {...form}>
+        <form onSubmit={onSubmit} className="flex flex-col gap-y-12">
+          <Form.Field
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <Form.Item>
+                <Form.Label>Email</Form.Label>
+                <Form.Control>
+                  <Input {...field} />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )}
+          />
+          <Form.Field
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <Form.Item>
+                <div className="flex items-center justify-between">
+                  <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"
+                  >
+                    <Text leading="compact">Forgot password?</Text>
+                  </Link>
+                </div>
+                <Form.Control>
+                  <Input type="password" {...field} />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )}
+          />
+          <Button size="large" variant="secondary" className="w-full">
+            Submit
+          </Button>
+        </form>
+      </Form>
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/no-match/index.ts b/packages/admin-next/dashboard/src/routes/no-match/index.ts
new file mode 100644
index 0000000000000..b934e7afd6b5c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/no-match/index.ts
@@ -0,0 +1 @@
+export { NoMatch as Component } from "./no-match";
diff --git a/packages/admin-next/dashboard/src/routes/no-match/no-match.tsx b/packages/admin-next/dashboard/src/routes/no-match/no-match.tsx
new file mode 100644
index 0000000000000..e6d1116c61347
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/no-match/no-match.tsx
@@ -0,0 +1,3 @@
+export const NoMatch = () => {
+  return <div>404 Not Found</div>;
+};
diff --git a/packages/admin-next/dashboard/src/routes/orders/details/details.tsx b/packages/admin-next/dashboard/src/routes/orders/details/details.tsx
new file mode 100644
index 0000000000000..24ef1a58301ff
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/orders/details/details.tsx
@@ -0,0 +1,3 @@
+export const OrderDetails = () => {
+  return <div>Order Details</div>;
+};
diff --git a/packages/admin-next/dashboard/src/routes/orders/details/index.ts b/packages/admin-next/dashboard/src/routes/orders/details/index.ts
new file mode 100644
index 0000000000000..0e5b01fb734a0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/orders/details/index.ts
@@ -0,0 +1 @@
+export { OrderDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/orders/list/index.ts b/packages/admin-next/dashboard/src/routes/orders/list/index.ts
new file mode 100644
index 0000000000000..ad7ea56183413
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/orders/list/index.ts
@@ -0,0 +1 @@
+export { OrderList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/orders/list/list.tsx b/packages/admin-next/dashboard/src/routes/orders/list/list.tsx
new file mode 100644
index 0000000000000..d5498116ac06c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/orders/list/list.tsx
@@ -0,0 +1,11 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const OrderList = () => {
+  return (
+    <div>
+      <Container>
+        <Heading>Orders</Heading>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/pricing/details/details.tsx b/packages/admin-next/dashboard/src/routes/pricing/details/details.tsx
new file mode 100644
index 0000000000000..6e417894474df
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/pricing/details/details.tsx
@@ -0,0 +1,11 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const PricingDetails = () => {
+  return (
+    <div>
+      <Container>
+        <Heading>Pricing</Heading>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/pricing/details/index.ts b/packages/admin-next/dashboard/src/routes/pricing/details/index.ts
new file mode 100644
index 0000000000000..720fdcf6f816e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/pricing/details/index.ts
@@ -0,0 +1 @@
+export { PricingDetails as Component } from "./details";
diff --git a/packages/admin-next/dashboard/src/routes/pricing/list/index.ts b/packages/admin-next/dashboard/src/routes/pricing/list/index.ts
new file mode 100644
index 0000000000000..b2b32b4611953
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/pricing/list/index.ts
@@ -0,0 +1 @@
+export { PricingList as Component } from "./list";
diff --git a/packages/admin-next/dashboard/src/routes/pricing/list/list.tsx b/packages/admin-next/dashboard/src/routes/pricing/list/list.tsx
new file mode 100644
index 0000000000000..fe3df51b7e2bd
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/pricing/list/list.tsx
@@ -0,0 +1,11 @@
+import { Container, Heading } from "@medusajs/ui";
+
+export const PricingList = () => {
+  return (
+    <div>
+      <Container>
+        <Heading>Pricing</Heading>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-attribute-section/index.ts b/packages/admin-next/dashboard/src/routes/products/components/product-attribute-section/index.ts
new file mode 100644
index 0000000000000..b61348398df56
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-attribute-section/index.ts
@@ -0,0 +1 @@
+export * from "./product-attribute-section";
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/components/product-attribute-section/product-attribute-section.tsx
new file mode 100644
index 0000000000000..92e2bf8912e06
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-attribute-section/product-attribute-section.tsx
@@ -0,0 +1,18 @@
+import { Product } from "@medusajs/medusa";
+import { Container, Heading } from "@medusajs/ui";
+
+type ProductAttributeSectionProps = {
+  product: Product;
+};
+
+export const ProductAttributeSection = ({
+  product,
+}: ProductAttributeSectionProps) => {
+  return (
+    <div>
+      <Container>
+        <Heading level="h2">Attributes</Heading>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-general-section/index.ts b/packages/admin-next/dashboard/src/routes/products/components/product-general-section/index.ts
new file mode 100644
index 0000000000000..1f711401bf939
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-general-section/index.ts
@@ -0,0 +1 @@
+export * from "./product-general-section";
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/components/product-general-section/product-general-section.tsx
new file mode 100644
index 0000000000000..d4b06f84448b0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-general-section/product-general-section.tsx
@@ -0,0 +1,109 @@
+import { EllipseGreenSolid, EllipsisHorizontal } from "@medusajs/icons";
+import { Product, ProductTag } from "@medusajs/medusa";
+import {
+  Badge,
+  Button,
+  Container,
+  Heading,
+  IconButton,
+  Text,
+} from "@medusajs/ui";
+import { type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+
+type ProductGeneralSectionProps = {
+  product: Product;
+};
+
+export const ProductGeneralSection = ({
+  product,
+}: ProductGeneralSectionProps) => {
+  return (
+    <div>
+      <Container>
+        <div className="flex flex-col gap-y-6">
+          <div className="flex flex-col gap-y-4">
+            <div className="flex items-center justify-between">
+              <Heading>{product.title}</Heading>
+              <div className="flex items-center gap-x-2">
+                <Button variant="secondary">
+                  <EllipseGreenSolid />
+                  Published
+                </Button>
+                <IconButton>
+                  <EllipsisHorizontal />
+                </IconButton>
+              </div>
+            </div>
+            <div className="max-w-[90%]">
+              <Text className="text-ui-fg-subtle">{product.description}</Text>
+            </div>
+            <ProductTags tags={product.tags} />
+          </div>
+          <ProductDetails product={product} />
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+type ProductTagsProps = {
+  tags?: ProductTag[] | null;
+};
+
+const ProductTags = ({ tags }: ProductTagsProps) => {
+  if (!tags || tags.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="inline-flex flex-wrap gap-2">
+      {tags.map((t) => {
+        return (
+          <Badge key={t.id} color="grey">
+            {t.value}
+          </Badge>
+        );
+      })}
+    </div>
+  );
+};
+
+type ProductDetailProps = {
+  label: string;
+  value?: ReactNode;
+};
+
+const ProductDetail = ({ label, value }: ProductDetailProps) => {
+  return (
+    <div className="flex items-center justify-between">
+      <Text>{label}</Text>
+      <Text>{value ? value : "-"}</Text>
+    </div>
+  );
+};
+
+type ProductDetailsProps = {
+  product: Product;
+};
+
+const ProductDetails = ({ product }: ProductDetailsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <Text weight="plus">{t("general.details")}</Text>
+      <div className="flex flex-col gap-y-2 text-ui-fg-subtle">
+        <ProductDetail label={t("fields.subtitle")} value={product.subtitle} />
+        <ProductDetail label={t("fields.handle")} value={product.handle} />
+        <ProductDetail label={t("fields.categories")} value={undefined} />
+        <ProductDetail label={t("fields.type")} value={undefined} />
+        <ProductDetail label={t("fields.collection")} value={undefined} />
+        <ProductDetail
+          label={t("fields.discountable")}
+          value={product.discountable ? "True" : "False"}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-media-section/index.ts b/packages/admin-next/dashboard/src/routes/products/components/product-media-section/index.ts
new file mode 100644
index 0000000000000..3ebde5696add3
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-media-section/index.ts
@@ -0,0 +1 @@
+export * from "./product-media-section";
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/components/product-media-section/product-media-section.tsx
new file mode 100644
index 0000000000000..a765327b0455d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-media-section/product-media-section.tsx
@@ -0,0 +1,36 @@
+import { Product } from "@medusajs/medusa";
+import { Container, Heading } from "@medusajs/ui";
+
+type ProductMedisaSectionProps = {
+  product: Product;
+};
+
+export const ProductMediaSection = ({ product }: ProductMedisaSectionProps) => {
+  return (
+    <div>
+      <Container className="flex flex-col gap-y-4">
+        <div>
+          <Heading level="h2">Media</Heading>
+        </div>
+        {product.images?.length > 0 && (
+          <div className="grid grid-cols-3 gap-4">
+            {product.images.map((i) => {
+              return (
+                <div
+                  className="overflow-hidden flex items-center justify-center h-24"
+                  key={i.id}
+                >
+                  <img
+                    src={i.url}
+                    alt={`${product.title} image`}
+                    className="h-full object-contain rounded-md"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-option-section/index.ts b/packages/admin-next/dashboard/src/routes/products/components/product-option-section/index.ts
new file mode 100644
index 0000000000000..c705e38c43b0c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-option-section/index.ts
@@ -0,0 +1 @@
+export * from "./product-option-section";
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/components/product-option-section/product-option-section.tsx
new file mode 100644
index 0000000000000..cba0159b02af8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-option-section/product-option-section.tsx
@@ -0,0 +1,18 @@
+import { Product } from "@medusajs/medusa";
+import { Container, Heading } from "@medusajs/ui";
+
+type ProductOptionSectionProps = {
+  product: Product;
+};
+
+export const ProductOptionSection = ({
+  product,
+}: ProductOptionSectionProps) => {
+  return (
+    <div>
+      <Container>
+        <Heading level="h2">Options</Heading>
+      </Container>
+    </div>
+  );
+};
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/components/product-sales-channel-section/index.ts
new file mode 100644
index 0000000000000..9742ed8fb95f5
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-sales-channel-section/index.ts
@@ -0,0 +1 @@
+export * from "./product-sales-channel-section";
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/components/product-sales-channel-section/product-sales-channel-section.tsx
new file mode 100644
index 0000000000000..e7cac61138166
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-sales-channel-section/product-sales-channel-section.tsx
@@ -0,0 +1,54 @@
+import { Channels } from "@medusajs/icons";
+import { Product } from "@medusajs/medusa";
+import { Container, Heading, Text } from "@medusajs/ui";
+import { useAdminSalesChannels } from "medusa-react";
+import { Trans, useTranslation } from "react-i18next";
+
+type ProductSalesChannelSectionProps = {
+  product: Product;
+};
+
+export const ProductSalesChannelSection = ({
+  product,
+}: ProductSalesChannelSectionProps) => {
+  const { count } = useAdminSalesChannels();
+  const { t } = useTranslation();
+
+  const availableInSalesChannels =
+    product.sales_channels?.map((sc) => ({
+      id: sc.id,
+      name: sc.name,
+    })) ?? [];
+
+  return (
+    <div>
+      <Container className="flex flex-col gap-y-4">
+        <div>
+          <Heading level="h2">{t("fields.sales_channels")}</Heading>
+        </div>
+        <div>
+          <div className="w-10 h-10 rounded-[8px] bg-ui-bg-base shadow-borders-base flex items-center justify-center">
+            <div className="h-8 w-8 rounded-[4px] bg-ui-bg-component flex items-center justify-center">
+              <Channels className="text-ui-fg-subtle" />
+            </div>
+          </div>
+        </div>
+        <div>
+          <Text className="text-ui-fg-subtle">
+            <Trans
+              i18nKey="products.availableInSalesChannels"
+              values={{
+                x: availableInSalesChannels.length,
+                y: count ?? 0,
+              }}
+              components={[
+                <span className="text-ui-fg-base txt-compact-medium-plus" />,
+                <span className="text-ui-fg-base txt-compact-medium-plus" />,
+              ]}
+            />
+          </Text>
+        </div>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-thumbnail-section/index.ts b/packages/admin-next/dashboard/src/routes/products/components/product-thumbnail-section/index.ts
new file mode 100644
index 0000000000000..f3fb2a0e2b1ad
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-thumbnail-section/index.ts
@@ -0,0 +1 @@
+export * from "./product-thumbnail-section";
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/components/product-thumbnail-section/product-thumbnail-section.tsx
new file mode 100644
index 0000000000000..7926e0ab91d28
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-thumbnail-section/product-thumbnail-section.tsx
@@ -0,0 +1,31 @@
+import { Product } from "@medusajs/medusa";
+import { Container, Heading } from "@medusajs/ui";
+
+type ProductThumbnailSectionProps = {
+  product: Product;
+};
+
+export const ProductThumbnailSection = ({
+  product,
+}: ProductThumbnailSectionProps) => {
+  return (
+    <div>
+      <Container className="flex flex-col gap-y-4">
+        <div>
+          <Heading level="h2">Thumbnail</Heading>
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          {product.thumbnail && (
+            <div className="overflow-hidden flex items-center justify-center h-24">
+              <img
+                src={product.thumbnail}
+                alt={`${product.title} thumbnail`}
+                className="h-full object-contain rounded-md"
+              />
+            </div>
+          )}
+        </div>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/products/components/product-variant-section/index.ts b/packages/admin-next/dashboard/src/routes/products/components/product-variant-section/index.ts
new file mode 100644
index 0000000000000..f9796823468a4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-variant-section/index.ts
@@ -0,0 +1 @@
+export * from "./product-variant-section";
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/components/product-variant-section/product-variant-section.tsx
new file mode 100644
index 0000000000000..8f8f331524e4b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/components/product-variant-section/product-variant-section.tsx
@@ -0,0 +1,18 @@
+import { Product } from "@medusajs/medusa";
+import { Container, Heading } from "@medusajs/ui";
+
+type ProductVariantSectionProps = {
+  product: Product;
+};
+
+export const ProductVariantSection = ({
+  product,
+}: ProductVariantSectionProps) => {
+  return (
+    <div>
+      <Container>
+        <Heading level="h2">Variants</Heading>
+      </Container>
+    </div>
+  );
+};
diff --git a/packages/admin-next/dashboard/src/routes/products/views/product-details/details.tsx b/packages/admin-next/dashboard/src/routes/products/views/product-details/details.tsx
new file mode 100644
index 0000000000000..5139d932ae9ea
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/views/product-details/details.tsx
@@ -0,0 +1,116 @@
+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 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 = () => {
+  const initialData = useLoaderData() as Awaited<
+    ReturnType<typeof productLoader>
+  >;
+
+  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>;
+  }
+
+  // TODO: Move to error.tsx and set as ErrorBoundary for the route
+  if (isError || !product) {
+    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">
+      {before.widgets.map((w, i) => {
+        return (
+          <div key={i}>
+            <w.Component />
+          </div>
+        );
+      })}
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr,400px] gap-x-4">
+        <div className="flex flex-col gap-y-2">
+          <ProductGeneralSection product={product} />
+          <ProductSalesChannelSection product={product} />
+          <ProductOptionSection product={product} />
+          <ProductVariantSection product={product} />
+          <ProductAttributeSection product={product} />
+          <div className="flex flex-col gap-y-2 lg:hidden">
+            {sideBefore.widgets.map((w, i) => {
+              return (
+                <div key={i}>
+                  <w.Component />
+                </div>
+              );
+            })}
+            <ProductThumbnailSection product={product} />
+            <ProductMediaSection product={product} />
+            {sideAfter.widgets.map((w, i) => {
+              return (
+                <div key={i}>
+                  <w.Component />
+                </div>
+              );
+            })}
+          </div>
+          {after.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            );
+          })}
+          <JsonView data={product} root="product" />
+        </div>
+        <div className="lg:flex flex-col gap-y-2 hidden">
+          {sideBefore.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            );
+          })}
+          <ProductThumbnailSection product={product} />
+          <ProductMediaSection product={product} />
+          {sideAfter.widgets.map((w, i) => {
+            return (
+              <div key={i}>
+                <w.Component />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </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
new file mode 100644
index 0000000000000..a1671c01de64c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/views/product-details/index.ts
@@ -0,0 +1,2 @@
+export { ProductDetails as Component } from "./details";
+export { productLoader as loader } from "./loader";
diff --git a/packages/admin-next/dashboard/src/routes/products/views/product-details/loader.ts b/packages/admin-next/dashboard/src/routes/products/views/product-details/loader.ts
new file mode 100644
index 0000000000000..0f27a0d25fca0
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/views/product-details/loader.ts
@@ -0,0 +1,21 @@
+import { AdminProductsRes } 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 productDetailQuery = (id: string) => ({
+  queryKey: adminProductKeys.detail(id),
+  queryFn: async () => medusa.admin.products.retrieve(id),
+})
+
+export const productLoader = async ({ params }: LoaderFunctionArgs) => {
+  const id = params.id
+  const query = productDetailQuery(id!)
+
+  return (
+    queryClient.getQueryData<Response<AdminProductsRes>>(query.queryKey) ??
+    (await queryClient.fetchQuery(query))
+  )
+}
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
new file mode 100644
index 0000000000000..bad072e574525
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/views/product-list/index.ts
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 0000000000000..bf546c833b843
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/views/product-list/list.tsx
@@ -0,0 +1,277 @@
+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/products/views/product-list/loader.ts b/packages/admin-next/dashboard/src/routes/products/views/product-list/loader.ts
new file mode 100644
index 0000000000000..2828984d46645
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/products/views/product-list/loader.ts
@@ -0,0 +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 { 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();
+
+    return (
+      queryClient.getQueryData<Response<AdminProductsListRes>>(
+        query.queryKey
+      ) ?? (await client.fetchQuery(query))
+    );
+  };
+};
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
new file mode 100644
index 0000000000000..27b4d5684c736
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/components/edit-profile-details-drawer/edit-profile-details-drawer.tsx
@@ -0,0 +1,236 @@
+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/views/profile-details/index.ts b/packages/admin-next/dashboard/src/routes/profile/views/profile-details/index.ts
new file mode 100644
index 0000000000000..0402621d02605
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/views/profile-details/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..6e607d3608bfb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/profile/views/profile-details/profile.tsx
@@ -0,0 +1,70 @@
+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
new file mode 100644
index 0000000000000..8752f83a901ff
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/components/edit-region-details-drawer/edit-region-details-drawer.tsx
@@ -0,0 +1,12 @@
+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/views/region-details/index.ts b/packages/admin-next/dashboard/src/routes/regions/views/region-details/index.ts
new file mode 100644
index 0000000000000..cd1dedc129d49
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/views/region-details/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..2f00216e38a70
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/views/region-details/region-details.tsx
@@ -0,0 +1,142 @@
+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/index.ts b/packages/admin-next/dashboard/src/routes/regions/views/region-list/index.ts
new file mode 100644
index 0000000000000..a37eced3be819
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/views/region-list/index.ts
@@ -0,0 +1 @@
+export { RegionList as Component } from "./region-list"
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
new file mode 100644
index 0000000000000..84c4592430788
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/regions/views/region-list/region-list.tsx
@@ -0,0 +1,26 @@
+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
new file mode 100644
index 0000000000000..a2677176a737f
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..559c432748f67
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-details-section/sales-channel-details-section.tsx
@@ -0,0 +1,200 @@
+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
new file mode 100644
index 0000000000000..43405e2d5d39b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..2a8a98aaffbdb
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/components/sales-channel-products-section/sales-channel-products-section.tsx
@@ -0,0 +1,621 @@
+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/views/sales-channel-details/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/index.ts
new file mode 100644
index 0000000000000..82989a3bab77d
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/index.ts
@@ -0,0 +1 @@
+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
new file mode 100644
index 0000000000000..edd377945074b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-details/sales-channel-details.tsx
@@ -0,0 +1,23 @@
+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/sales-channels/views/sales-channel-list/index.ts b/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-list/index.ts
new file mode 100644
index 0000000000000..7c4e547be67b8
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-list/index.ts
@@ -0,0 +1 @@
+export { SalesChannelList as Component } from "./sales-channel-list"
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/sales-channels/views/sales-channel-list/sales-channel-list.tsx
new file mode 100644
index 0000000000000..24c577883e0d7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/sales-channels/views/sales-channel-list/sales-channel-list.tsx
@@ -0,0 +1,202 @@
+import { EllipsisHorizontal, PencilSquare, Trash } from "@medusajs/icons"
+import { SalesChannel } from "@medusajs/medusa"
+import {
+  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 { useNavigate } from "react-router-dom"
+
+const PAGE_SIZE = 50
+
+export const SalesChannelList = () => {
+  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 { sales_channels, count, isLoading } = useAdminSalesChannels({
+    limit: PAGE_SIZE,
+    offset: pageIndex * PAGE_SIZE,
+  })
+
+  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,
+  })
+
+  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>
+          <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 [&_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>
+          <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>
+      </Container>
+    </div>
+  )
+}
+
+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 }) => getValue(),
+      }),
+      columnHelper.accessor("is_disabled", {
+        header: () => <div className="text-right">{t("fields.status")}</div>,
+        cell: ({ getValue }) => {
+          const value = getValue()
+          return (
+            <div className="text-right">
+              <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/settings/index.ts b/packages/admin-next/dashboard/src/routes/settings/index.ts
new file mode 100644
index 0000000000000..af259dd1e4914
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/settings/index.ts
@@ -0,0 +1 @@
+export { Settings as Component } from "./settings";
diff --git a/packages/admin-next/dashboard/src/routes/settings/settings.tsx b/packages/admin-next/dashboard/src/routes/settings/settings.tsx
new file mode 100644
index 0000000000000..e167c950e8d55
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/settings/settings.tsx
@@ -0,0 +1,16 @@
+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();
+
+  useEffect(() => {
+    if (location.pathname === "/settings") {
+      navigate("/settings/profile");
+    }
+  }, [location.pathname, navigate]);
+
+  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
new file mode 100644
index 0000000000000..e071d314db9ff
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/edit-store-details-drawer.tsx
@@ -0,0 +1,174 @@
+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
new file mode 100644
index 0000000000000..b39ace948d801
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/components/edit-store-details-drawer/index.ts
@@ -0,0 +1 @@
+export * from "./edit-store-details-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
new file mode 100644
index 0000000000000..9674d35627647
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/views/store-details/index.ts
@@ -0,0 +1,2 @@
+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/loader.ts b/packages/admin-next/dashboard/src/routes/store/views/store-details/loader.ts
new file mode 100644
index 0000000000000..b4f2ded1f6e7c
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/views/store-details/loader.ts
@@ -0,0 +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 { 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;
+  } catch (error) {
+    const err = error ? JSON.parse(JSON.stringify(error)) : null;
+
+    if ((err as Error & { status: number })?.status === 401) {
+      redirect("/login", 401);
+    }
+  }
+};
+
+export const storeLoader = async () => {
+  const query = storeDetailQuery();
+
+  return (
+    queryClient.getQueryData<Response<AdminExtendedStoresRes>>(
+      query.queryKey
+    ) ?? (await fetchQuery(query))
+  );
+};
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
new file mode 100644
index 0000000000000..459dd231435b7
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/store/views/store-details/store-details.tsx
@@ -0,0 +1,101 @@
+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/taxes/components/tax-details-section/index.ts b/packages/admin-next/dashboard/src/routes/taxes/components/tax-details-section/index.ts
new file mode 100644
index 0000000000000..342d8c2cd69f1
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/taxes/components/tax-details-section/index.ts
@@ -0,0 +1 @@
+export * from "./tax-details-section"
diff --git a/packages/admin-next/dashboard/src/routes/taxes/components/tax-details-section/tax-details-section.tsx b/packages/admin-next/dashboard/src/routes/taxes/components/tax-details-section/tax-details-section.tsx
new file mode 100644
index 0000000000000..a027cd18043da
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/taxes/components/tax-details-section/tax-details-section.tsx
@@ -0,0 +1,85 @@
+import { Region } from "@medusajs/medusa"
+import { Container, Heading, StatusBadge, Text, Tooltip } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+type Props = {
+  region: Region
+}
+
+export const TaxDetailsSection = ({ region }: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <Container className="divide-ui-border-base divide-y p-0">
+      <div className="px-8 py-6">
+        <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>
+      <div className="grid grid-cols-2 px-8 py-6">
+        <Text size="small" weight="plus" leading="compact">
+          Tax Provider
+        </Text>
+        <Text size="small" leading="compact">
+          {region.tax_provider_id
+            ? region.tax_provider_id
+            : "System Tax Provider"}
+        </Text>
+      </div>
+      <div className="grid grid-cols-2 px-8 py-6">
+        <Text size="small" weight="plus" leading="compact">
+          Automatic Tax Calculation
+        </Text>
+        <StatusBadge
+          color={region.automatic_taxes ? "green" : "green"}
+          className="w-fit"
+        >
+          {region.automatic_taxes
+            ? t("general.enabled")
+            : t("general.disabled")}
+        </StatusBadge>
+      </div>
+      <div className="grid grid-cols-2 px-8 py-6">
+        <Text size="small" weight="plus" leading="compact">
+          Gift Cards Taxable
+        </Text>
+        <StatusBadge
+          color={region.gift_cards_taxable ? "green" : "grey"}
+          className="w-fit"
+        >
+          {region.gift_cards_taxable
+            ? t("general.enabled")
+            : t("general.disabled")}
+        </StatusBadge>
+      </div>
+    </Container>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/taxes/components/tax-rates-section/index.ts b/packages/admin-next/dashboard/src/routes/taxes/components/tax-rates-section/index.ts
new file mode 100644
index 0000000000000..e6d46bf5fe510
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/taxes/components/tax-rates-section/index.ts
@@ -0,0 +1 @@
+export * from "./tax-rates-section"
diff --git a/packages/admin-next/dashboard/src/routes/taxes/components/tax-rates-section/tax-rates-section.tsx b/packages/admin-next/dashboard/src/routes/taxes/components/tax-rates-section/tax-rates-section.tsx
new file mode 100644
index 0000000000000..a2c318dbd1683
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/taxes/components/tax-rates-section/tax-rates-section.tsx
@@ -0,0 +1,64 @@
+import { TaxRate } from "@medusajs/medusa"
+import { Button, Container, Heading } from "@medusajs/ui"
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useAdminTaxRates } from "medusa-react"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { DebouncedSearch } from "../../../../components/common/debounced-search"
+
+export const TaxRatesSection = () => {
+  const { id } = useParams()
+  const [query, setQuery] = useState("")
+
+  const { tax_rates, isLoading } = useAdminTaxRates(
+    {
+      region_id: id,
+    },
+    {
+      enabled: !!id,
+    }
+  )
+
+  const columns = useColumns()
+
+  const table = useReactTable({
+    data: tax_rates ?? [],
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-8 pb-4 pt-6">
+        <Heading level="h2">Tax Rates</Heading>
+        <div className="flex items-center gap-x-2">
+          <DebouncedSearch size="small" value={query} onChange={setQuery} />
+          <Button variant="secondary">Add Tax Rate</Button>
+        </div>
+      </div>
+    </Container>
+  )
+}
+
+const columnHelper = createColumnHelper<TaxRate>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: t("fields.name"),
+        cell: ({ getValue }) => {
+          return <span>{getValue()}</span>
+        },
+      }),
+    ],
+    [t]
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/taxes/views/tax-details/index.ts b/packages/admin-next/dashboard/src/routes/taxes/views/tax-details/index.ts
new file mode 100644
index 0000000000000..b4c4ee27902f1
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/taxes/views/tax-details/index.ts
@@ -0,0 +1 @@
+export { TaxDetails as Component } from "./tax-details"
diff --git a/packages/admin-next/dashboard/src/routes/taxes/views/tax-details/tax-details.tsx b/packages/admin-next/dashboard/src/routes/taxes/views/tax-details/tax-details.tsx
new file mode 100644
index 0000000000000..dfa2cfb698da9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/taxes/views/tax-details/tax-details.tsx
@@ -0,0 +1,34 @@
+import { useAdminRegion } from "medusa-react"
+import { useParams } from "react-router-dom"
+import { TaxDetailsSection } from "../../components/tax-details-section"
+import { TaxRatesSection } from "../../components/tax-rates-section"
+
+export const TaxDetails = () => {
+  const { id } = useParams()
+
+  const { region, isLoading, isError, error } = useAdminRegion(id!)
+
+  if (isLoading) {
+    return <div>Loading</div>
+  }
+
+  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">
+      <TaxDetailsSection region={region} />
+      <TaxRatesSection />
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/taxes/views/tax-list/index.ts b/packages/admin-next/dashboard/src/routes/taxes/views/tax-list/index.ts
new file mode 100644
index 0000000000000..dada0aa95cff9
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/taxes/views/tax-list/index.ts
@@ -0,0 +1 @@
+export { TaxList as Component } from "./tax-list"
diff --git a/packages/admin-next/dashboard/src/routes/taxes/views/tax-list/tax-list.tsx b/packages/admin-next/dashboard/src/routes/taxes/views/tax-list/tax-list.tsx
new file mode 100644
index 0000000000000..bae54be245bc4
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/taxes/views/tax-list/tax-list.tsx
@@ -0,0 +1,26 @@
+import { useAdminRegions } from "medusa-react"
+import { Link } from "react-router-dom"
+
+export const TaxList = () => {
+  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/taxes/${region.id}`}>{region.name}</Link>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/packages/admin-next/dashboard/src/routes/users/index.ts b/packages/admin-next/dashboard/src/routes/users/index.ts
new file mode 100644
index 0000000000000..6fdeb1001023e
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/index.ts
@@ -0,0 +1 @@
+export { Users as Component } from "./users";
diff --git a/packages/admin-next/dashboard/src/routes/users/users.tsx b/packages/admin-next/dashboard/src/routes/users/users.tsx
new file mode 100644
index 0000000000000..894e17545eb5b
--- /dev/null
+++ b/packages/admin-next/dashboard/src/routes/users/users.tsx
@@ -0,0 +1,155 @@
+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/admin-next/dashboard/src/vite-env.d.ts b/packages/admin-next/dashboard/src/vite-env.d.ts
new file mode 100644
index 0000000000000..d87dfc2661465
--- /dev/null
+++ b/packages/admin-next/dashboard/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly MEDUSA_ADMIN_BACKEND_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/packages/admin-next/dashboard/tailwind.config.cjs b/packages/admin-next/dashboard/tailwind.config.cjs
new file mode 100644
index 0000000000000..4fb53b7c80287
--- /dev/null
+++ b/packages/admin-next/dashboard/tailwind.config.cjs
@@ -0,0 +1,29 @@
+import preset from "@medusajs/ui-preset";
+import path from "path";
+
+const rootProject = path.join(
+  process.cwd(),
+  "../../apps/server/src/admin/**/*.{js,jsx,ts,tsx}"
+);
+
+// get the path of the dependency "@medusajs/ui"
+const medusaUI = path.join(
+  path.dirname(require.resolve("@medusajs/ui")),
+  "**/*.{js,jsx,ts,tsx}"
+);
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [preset],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    medusaUI,
+    rootProject,
+  ],
+  darkMode: "class",
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/admin-next/dashboard/tsconfig.json b/packages/admin-next/dashboard/tsconfig.json
new file mode 100644
index 0000000000000..a7fc6fbf23de2
--- /dev/null
+++ b/packages/admin-next/dashboard/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/admin-next/dashboard/tsconfig.node.json b/packages/admin-next/dashboard/tsconfig.node.json
new file mode 100644
index 0000000000000..a8583534f27e5
--- /dev/null
+++ b/packages/admin-next/dashboard/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.mts"]
+}
diff --git a/packages/admin-next/dashboard/vite.config.mts b/packages/admin-next/dashboard/vite.config.mts
new file mode 100644
index 0000000000000..2e26c6462c574
--- /dev/null
+++ b/packages/admin-next/dashboard/vite.config.mts
@@ -0,0 +1,22 @@
+import inject from "@medusajs/vite-plugin-extension"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), inject()],
+  server: {
+    open: true,
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          react: ["react"],
+          "react-dom": ["react-dom"],
+          "react-router-dom": ["react-router-dom"],
+        },
+      },
+    },
+  },
+})
diff --git a/packages/admin-next/vite-plugin-extension/README.md b/packages/admin-next/vite-plugin-extension/README.md
new file mode 100644
index 0000000000000..d7fda64585815
--- /dev/null
+++ b/packages/admin-next/vite-plugin-extension/README.md
@@ -0,0 +1 @@
+# plugin-extension
diff --git a/packages/admin-next/vite-plugin-extension/package.json b/packages/admin-next/vite-plugin-extension/package.json
new file mode 100644
index 0000000000000..c3bc9395dc3bd
--- /dev/null
+++ b/packages/admin-next/vite-plugin-extension/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@medusajs/vite-plugin-extension",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "devDependencies": {
+    "@babel/types": "7.22.5",
+    "@medusajs/admin-shared": "*",
+    "@types/babel__traverse": "7.20.5",
+    "@types/node": "^20.10.4",
+    "tsup": "8.0.1",
+    "typescript": "5.3.3",
+    "vite": "5.0.10"
+  },
+  "peerDependencies": {
+    "vite": "^5.0.0"
+  },
+  "dependencies": {
+    "@babel/parser": "7.23.5",
+    "@babel/traverse": "7.23.5",
+    "chokidar": "3.5.3",
+    "fdir": "6.1.1",
+    "magic-string": "0.30.5"
+  },
+  "packageManager": "yarn@3.2.1"
+}
diff --git a/packages/admin-next/vite-plugin-extension/src/index.ts b/packages/admin-next/vite-plugin-extension/src/index.ts
new file mode 100644
index 0000000000000..b76fb350eab3e
--- /dev/null
+++ b/packages/admin-next/vite-plugin-extension/src/index.ts
@@ -0,0 +1,885 @@
+import { ParseResult, ParserOptions, parse } from "@babel/parser"
+import _traverse, { NodePath } from "@babel/traverse"
+import {
+  ExportDefaultDeclaration,
+  ExportNamedDeclaration,
+  File,
+  ObjectExpression,
+  ObjectProperty,
+} from "@babel/types"
+import chokidar from "chokidar"
+import { fdir } from "fdir"
+import fs from "fs/promises"
+import MagicString from "magic-string"
+import path from "path"
+import { Logger, PluginOption, ViteDevServer } from "vite"
+
+import { InjectionZone, injectionZones } from "@medusajs/admin-shared"
+
+const traverse = (_traverse as any).default as typeof _traverse
+
+const VIRTUAL_PREFIX = "/@virtual/medusajs-vite-plugin-extension/"
+const IMPORT_PREFIX = "medusa-admin:"
+
+const WIDGET_MODULE = `${IMPORT_PREFIX}widgets/`
+const WIDGET_MODULES = injectionZones.map((zone) => {
+  return `${WIDGET_MODULE}${zone.replace(/\./g, "/")}`
+})
+
+const ROUTE_PAGE_MODULE = `${IMPORT_PREFIX}routes/pages`
+const ROUTE_LINK_MODULE = `${IMPORT_PREFIX}routes/links`
+
+const ROUTE_MODULES = [ROUTE_PAGE_MODULE, ROUTE_LINK_MODULE]
+
+const SETTING_PAGE_MODULE = `${IMPORT_PREFIX}settings/pages`
+const SETTING_CARD_MODULE = `${IMPORT_PREFIX}settings/cards`
+
+const SETTING_MODULE = [SETTING_PAGE_MODULE, SETTING_CARD_MODULE]
+
+const MODULES = [...WIDGET_MODULES, ...ROUTE_MODULES, ...SETTING_MODULE]
+
+type InjectArgs = {
+  sources?: string[]
+}
+
+type LoadModuleOptions =
+  | { type: "widget"; get: InjectionZone }
+  | { type: "route"; get: "page" | "link" }
+  | { type: "setting"; get: "page" | "card" }
+
+export default function inject(args?: InjectArgs): PluginOption {
+  const _extensionGraph = new Map<string, Set<string>>()
+  const _sources = new Set<string>([...(args?.sources || [])])
+
+  let server: ViteDevServer
+  let watcher: chokidar.FSWatcher
+  let logger: Logger
+
+  /**
+   * Traverses the directory and returns all files that ends with .tsx or .jsx,
+   * excluding files in subdirectories that starts with _.
+   *
+   * @param dir - The directory to traverse
+   * @param file - The file name to filter by without extension
+   * @param depth - The depth of the files to return
+   */
+  async function traverseDirectory(
+    dir: string,
+    file?: string,
+    depth?: { min: number; max?: number }
+  ) {
+    const baseDepth = dir.split(path.sep).length
+
+    const crawler = new fdir()
+      .withBasePath()
+      .exclude((dirName) => dirName.startsWith("_"))
+      .filter((path) => path.endsWith(".tsx") || path.endsWith(".jsx"))
+
+    if (file) {
+      crawler.filter(
+        (path) => path.endsWith(`${file}.tsx`) || path.endsWith(`${file}.jsx`)
+      )
+    }
+
+    if (depth) {
+      crawler.filter((file) => {
+        const directoryDepth = file.split(path.sep).length - 1
+
+        if (depth.max && directoryDepth > baseDepth + depth.max) {
+          return false
+        }
+
+        if (directoryDepth < baseDepth + depth.min) {
+          return false
+        }
+
+        return true
+      })
+    }
+
+    return await crawler.crawl(dir).withPromise()
+  }
+
+  /**
+   * Generates a module with a source map from a code string
+   */
+  function generateModule(code: string) {
+    const magicString = new MagicString(code)
+
+    return {
+      code: magicString.toString(),
+      map: magicString.generateMap({ hires: true }),
+    }
+  }
+
+  /**
+   * Validates that the default export of a file is a JSX component
+   */
+  function validateDefaultExport(
+    path: NodePath<ExportDefaultDeclaration>,
+    ast: ParseResult<File>
+  ) {
+    let hasComponentExport = false
+    const declaration = path.node.declaration
+
+    if (
+      declaration &&
+      (declaration.type === "Identifier" ||
+        declaration.type === "FunctionDeclaration")
+    ) {
+      const exportName =
+        declaration.type === "Identifier"
+          ? declaration.name
+          : declaration.id && declaration.id.name
+
+      if (exportName) {
+        try {
+          traverse(ast, {
+            VariableDeclarator({ node, scope }) {
+              let isDefaultExport = false
+
+              if (
+                node.id.type === "Identifier" &&
+                node.id.name === exportName
+              ) {
+                isDefaultExport = true
+              }
+
+              if (!isDefaultExport) {
+                return
+              }
+
+              traverse(
+                node,
+                {
+                  ReturnStatement(path) {
+                    if (
+                      path.node.argument?.type === "JSXElement" ||
+                      path.node.argument?.type === "JSXFragment"
+                    ) {
+                      hasComponentExport = true
+                    }
+                  },
+                },
+                scope
+              )
+            },
+          })
+        } catch (e) {
+          console.error(
+            `An error occured while validating the default export of '${path}'. The following error must be resolved before continuing:\n${e}`
+          )
+          return false
+        }
+      }
+    }
+
+    return hasComponentExport
+  }
+
+  /**
+   * Gets the properties of the config object in an extension file
+   */
+  function getProperties(path: NodePath<ExportNamedDeclaration>) {
+    const declaration = path.node.declaration
+
+    if (declaration && declaration.type === "VariableDeclaration") {
+      const configDeclaration = declaration.declarations.find(
+        (d) =>
+          d.type === "VariableDeclarator" &&
+          d.id.type === "Identifier" &&
+          d.id.name === "config"
+      )
+
+      if (
+        configDeclaration &&
+        configDeclaration.init?.type === "ObjectExpression"
+      ) {
+        return configDeclaration.init.properties
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Validates that the provided zone is a valid injection zone for a widget
+   */
+  function validateInjectionZone(zone: any): zone is InjectionZone {
+    return injectionZones.includes(zone)
+  }
+
+  function validateWidgetConfig(
+    path: NodePath<ExportNamedDeclaration>,
+    zone?: InjectionZone
+  ) {
+    const properties = getProperties(path)
+
+    if (!properties) {
+      return { zoneIsValid: false, zoneValue: undefined }
+    }
+
+    const zoneProperty = properties.find(
+      (p) =>
+        p.type === "ObjectProperty" &&
+        p.key.type === "Identifier" &&
+        p.key.name === "zone"
+    ) as ObjectProperty | undefined
+
+    if (!zoneProperty) {
+      return { zoneIsValid: false, zoneValue: undefined }
+    }
+
+    let zoneIsValid = false
+    let zoneValue: string | string[] | undefined = undefined
+
+    if (zoneProperty.value.type === "StringLiteral") {
+      zoneIsValid = !zone
+        ? validateInjectionZone(zoneProperty.value.value)
+        : zone === zoneProperty.value.value
+      zoneValue = zoneProperty.value.value
+    } else if (zoneProperty.value.type === "ArrayExpression") {
+      zoneIsValid = zoneProperty.value.elements.every((_zone) => {
+        if (!_zone || _zone.type !== "StringLiteral") {
+          return false
+        }
+
+        const isZoneMatch = !zone ? true : zone === _zone.value
+
+        return validateInjectionZone(_zone.value) && isZoneMatch
+      })
+
+      zoneValue = zoneProperty.value.elements
+        .map((e) => {
+          if (e && e.type === "StringLiteral") {
+            return e.value
+          }
+        })
+        .filter(Boolean) as string[]
+    }
+
+    return { zoneIsValid, zoneValue }
+  }
+
+  async function validateWidget(file: string, zone?: InjectionZone) {
+    const content = await fs.readFile(file, "utf-8")
+
+    const parserOptions: ParserOptions = {
+      sourceType: "module",
+      plugins: ["jsx"],
+    }
+
+    if (file.endsWith(".tsx")) {
+      parserOptions.plugins?.push("typescript")
+    }
+
+    let ast: ParseResult<File>
+
+    try {
+      ast = parse(content, parserOptions)
+    } catch (err) {
+      logger.error(
+        `An error occured while parsing the content of ${file}:\n${err}`,
+        {
+          error: err as Error,
+          timestamp: true,
+        }
+      )
+      return { isValidWidget: false, zoneValue: undefined }
+    }
+
+    let hasDefaultExport = false
+    let hasNamedExport = false
+    let zoneValue: string | string[] | undefined
+
+    try {
+      traverse(ast, {
+        ExportDefaultDeclaration(path) {
+          hasDefaultExport = validateDefaultExport(path, ast)
+        },
+        ExportNamedDeclaration(path) {
+          const { zoneIsValid, zoneValue: value } = validateWidgetConfig(
+            path,
+            zone
+          )
+          hasNamedExport = zoneIsValid
+          zoneValue = value
+        },
+      })
+    } catch (err) {
+      logger.error(`An error occured while validating the content of ${file}`, {
+        error: err as Error,
+        timestamp: true,
+      })
+
+      return { isValidWidget: false, zoneValue: undefined }
+    }
+
+    return { isValidWidget: hasDefaultExport && hasNamedExport, zoneValue }
+  }
+
+  async function generateWidgetEntrypoint(zone: InjectionZone) {
+    const files = (
+      await Promise.all(
+        Array.from(_sources).map((source) =>
+          traverseDirectory(`${source}/widgets`)
+        )
+      )
+    ).flat()
+
+    const validatedWidgets = (
+      await Promise.all(
+        files.map(async (widget) => {
+          const { isValidWidget } = await validateWidget(widget, zone)
+          return isValidWidget ? widget : null
+        })
+      )
+    ).filter(Boolean) as string[]
+
+    if (!validatedWidgets.length) {
+      const code = `export default {
+        widgets: [],
+      }`
+
+      return { module: generateModule(code), paths: [] }
+    }
+
+    const importString = validatedWidgets
+      .map((path, index) => `import WidgetExt${index} from "${path}";`)
+      .join("\n")
+
+    const exportString = `export default {
+      widgets: [${validatedWidgets
+        .map((_, index) => `{ Component: WidgetExt${index} }`)
+        .join(", ")}],
+    }`
+
+    const code = `${importString}\n${exportString}`
+
+    return { module: generateModule(code), paths: validatedWidgets }
+  }
+
+  function validateRouteConfig(
+    path: NodePath<ExportNamedDeclaration>,
+    requireLink: boolean
+  ) {
+    const properties = getProperties(path)
+
+    if (!properties) {
+      return false
+    }
+
+    const linkProperty = properties.find(
+      (p) =>
+        p.type === "ObjectProperty" &&
+        p.key.type === "Identifier" &&
+        p.key.name === "link"
+    ) as ObjectProperty | undefined
+
+    /**
+     * Link is optional unless requireLink is true.
+     */
+    if (!linkProperty && !requireLink) {
+      return true
+    }
+
+    const linkValue = linkProperty?.value as ObjectExpression | undefined
+
+    if (!linkValue) {
+      return false
+    }
+
+    let labelIsValid = false
+
+    if (
+      linkValue.properties.some(
+        (p) =>
+          p.type === "ObjectProperty" &&
+          p.key.type === "Identifier" &&
+          p.key.name === "label" &&
+          p.value.type === "StringLiteral"
+      )
+    ) {
+      labelIsValid = true
+    }
+
+    return labelIsValid
+  }
+
+  async function validateRoute(file: string, requireLink: boolean) {
+    const content = await fs.readFile(file, "utf-8")
+
+    const parserOptions: ParserOptions = {
+      sourceType: "module",
+      plugins: ["jsx"],
+    }
+
+    if (file.endsWith(".tsx")) {
+      parserOptions.plugins?.push("typescript")
+    }
+
+    let ast: ParseResult<File>
+
+    try {
+      ast = parse(content, parserOptions)
+    } catch (err) {
+      logger.error("An error occured while validating a route.", {
+        error: err as Error,
+        timestamp: true,
+      })
+      return false
+    }
+
+    let hasDefaultExport = false
+    let hasNamedExport = false
+
+    try {
+      traverse(ast, {
+        ExportDefaultDeclaration(path) {
+          hasDefaultExport = validateDefaultExport(path, ast)
+        },
+        ExportNamedDeclaration(path) {
+          hasNamedExport = validateRouteConfig(path, requireLink)
+        },
+      })
+    } catch (err) {
+      logger.error("An error occured while validating a route.", {
+        error: err as Error,
+        timestamp: true,
+      })
+      return false
+    }
+
+    return hasDefaultExport && hasNamedExport
+  }
+
+  function createPath(file: string) {
+    return file
+      .replace(/.*\/admin\/(routes|settings)/, "")
+      .replace(/\[([^\]]+)\]/g, ":$1")
+      .replace(/\/page\.(tsx|jsx)/, "")
+  }
+
+  async function generateRouteEntrypoint(get: "page" | "link") {
+    const files = (
+      await Promise.all(
+        Array.from(_sources).map((source) =>
+          traverseDirectory(`${source}/routes`, "page", { min: 1 })
+        )
+      )
+    ).flat()
+
+    const validatedRoutes = (
+      await Promise.all(
+        files.map(async (route) => {
+          const isValid = await validateRoute(route, get === "link")
+          return isValid ? route : null
+        })
+      )
+    ).filter(Boolean) as string[]
+
+    if (!validatedRoutes.length) {
+      const code = `export default {
+        ${get}s: [],
+      }`
+
+      return { module: generateModule(code), paths: [] }
+    }
+
+    const importString = validatedRoutes
+      .map((path, index) => {
+        return get === "page"
+          ? `import RouteExt${index} from "${path}";`
+          : `import { config as routeConfig${index} } from "${path}";`
+      })
+      .join("\n")
+
+    const exportString = `export default {
+      ${get}s: [${validatedRoutes
+      .map((file, index) =>
+        get === "page"
+          ? `{ path: "${createPath(file)}", file: "${file}" }`
+          : `{ path: "${createPath(file)}", ...routeConfig${index}.link }`
+      )
+      .join(", ")}],
+    }`
+
+    const code = `${importString}\n${exportString}`
+
+    return { module: generateModule(code), paths: validatedRoutes }
+  }
+
+  async function validateSetting(file: string) {
+    const content = await fs.readFile(file, "utf-8")
+
+    const parserOptions: ParserOptions = {
+      sourceType: "module",
+      plugins: ["jsx"],
+    }
+
+    if (file.endsWith(".tsx")) {
+      parserOptions.plugins?.push("typescript")
+    }
+
+    let ast: ParseResult<File>
+
+    try {
+      ast = parse(content, parserOptions)
+    } catch (err) {
+      logger.error("An error occured while validating a setting.", {
+        error: err as Error,
+        timestamp: true,
+      })
+      return false
+    }
+
+    let hasDefaultExport = false
+    let hasNamedExport = false
+
+    try {
+      traverse(ast, {
+        ExportDefaultDeclaration(path) {
+          hasDefaultExport = validateDefaultExport(path, ast)
+        },
+        ExportNamedDeclaration(path) {
+          hasNamedExport = validateSettingConfig(path)
+        },
+      })
+    } catch (err) {
+      logger.error("An error occured while validating a setting.", {
+        error: err as Error,
+        timestamp: true,
+      })
+      return false
+    }
+
+    return hasDefaultExport && hasNamedExport
+  }
+
+  function validateSettingConfig(path: NodePath<ExportNamedDeclaration>) {
+    const properties = getProperties(path)
+
+    if (!properties) {
+      return false
+    }
+
+    const cardProperty = properties.find(
+      (p) =>
+        p.type === "ObjectProperty" &&
+        p.key.type === "Identifier" &&
+        p.key.name === "card"
+    ) as ObjectProperty | undefined
+
+    // Link property is required for settings
+    if (!cardProperty) {
+      return false
+    }
+
+    const cardValue = cardProperty.value as ObjectExpression
+
+    let hasLabel = false
+    let hasDescription = false
+
+    if (
+      cardValue.properties.some(
+        (p) =>
+          p.type === "ObjectProperty" &&
+          p.key.type === "Identifier" &&
+          p.key.name === "label" &&
+          p.value.type === "StringLiteral"
+      )
+    ) {
+      hasLabel = true
+    }
+
+    if (
+      cardValue.properties.some(
+        (p) =>
+          p.type === "ObjectProperty" &&
+          p.key.type === "Identifier" &&
+          p.key.name === "description" &&
+          p.value.type === "StringLiteral"
+      )
+    ) {
+      hasDescription = true
+    }
+
+    return hasLabel && hasDescription
+  }
+
+  async function generateSettingEntrypoint(get: "page" | "card") {
+    const files = (
+      await Promise.all(
+        Array.from(_sources).map((source) =>
+          traverseDirectory(`${source}/settings`, "page", { min: 1, max: 1 })
+        )
+      )
+    ).flat()
+
+    const validatedSettings = (
+      await Promise.all(
+        files.map(async (setting) => {
+          const isValid = await validateSetting(setting)
+          return isValid ? setting : null
+        })
+      )
+    ).filter(Boolean) as string[]
+
+    if (!validatedSettings.length) {
+      const code = `export default {
+        ${get}s: [],
+      }`
+
+      return { module: generateModule(code), paths: [] }
+    }
+
+    const importString = validatedSettings
+      .map((path, index) => {
+        return get === "page"
+          ? `import SettingExt${index} from "${path}";`
+          : `import { config as settingConfig${index} } from "${path}";`
+      })
+      .join("\n")
+
+    const exportString = `export default {
+      ${get}s: [${validatedSettings
+      .map((file, index) =>
+        get === "page"
+          ? `{ path: "${createPath(file)}", file: "${file}" }`
+          : `{ path: "${createPath(file)}", ...settingConfig${index}.card }`
+      )
+      .join(", ")}],
+    }`
+
+    const code = `${importString}\n${exportString}`
+
+    return { module: generateModule(code), paths: validatedSettings }
+  }
+
+  async function loadModule(options: LoadModuleOptions) {
+    switch (options.type) {
+      case "widget": {
+        return await generateWidgetEntrypoint(options.get)
+      }
+      case "route": {
+        return await generateRouteEntrypoint(options.get)
+      }
+      case "setting": {
+        return await generateSettingEntrypoint(options.get)
+      }
+    }
+  }
+
+  function getExtensionType(file: string) {
+    const normalizedPath = path.normalize(file)
+
+    if (normalizedPath.includes(path.normalize("/admin/widgets/"))) {
+      return "widget"
+    } else if (normalizedPath.includes(path.normalize("/admin/routes/"))) {
+      return "route"
+    } else if (normalizedPath.includes(path.normalize("/admin/settings/"))) {
+      return "setting"
+    } else {
+      return "none"
+    }
+  }
+
+  async function handleWidgetChange(file: string) {
+    const { isValidWidget, zoneValue } = await validateWidget(file)
+
+    if (!isValidWidget || !zoneValue) {
+      _extensionGraph.delete(file)
+      return
+    }
+
+    const zoneValues = Array.isArray(zoneValue) ? zoneValue : [zoneValue]
+
+    for (const zone of zoneValues) {
+      const zonePath = zone.replace(/\./g, "/")
+      const moduleId = `${VIRTUAL_PREFIX}${WIDGET_MODULE}${zonePath}`
+
+      const module = server.moduleGraph.getModuleById(moduleId)
+
+      if (module) {
+        server.reloadModule(module)
+      }
+    }
+  }
+
+  async function handleRouteChange(file: string) {
+    const isValidRoute = await validateRoute(file, false)
+
+    if (!isValidRoute) {
+      _extensionGraph.delete(file)
+      return
+    }
+
+    for (const moduleId of ROUTE_MODULES) {
+      const fullModuleId = `${VIRTUAL_PREFIX}${moduleId}`
+      const module = server.moduleGraph.getModuleById(fullModuleId)
+
+      if (module) {
+        server.reloadModule(module)
+      }
+    }
+  }
+
+  async function handleSettingChange(file: string) {
+    const isValidSetting = await validateSetting(file)
+
+    if (!isValidSetting) {
+      _extensionGraph.delete(file)
+      return
+    }
+
+    for (const moduleId of SETTING_MODULE) {
+      const fullModuleId = `${VIRTUAL_PREFIX}${moduleId}`
+      const module = server.moduleGraph.getModuleById(fullModuleId)
+
+      if (module) {
+        server.reloadModule(module)
+      }
+    }
+  }
+
+  async function handleExtensionUnlink(file: string) {
+    const moduleIds = _extensionGraph.get(file)
+
+    if (!moduleIds) {
+      return
+    }
+
+    for (const moduleId of moduleIds) {
+      const module = server.moduleGraph.getModuleById(moduleId)
+
+      if (module) {
+        _extensionGraph.delete(file)
+        server.reloadModule(module)
+      }
+    }
+  }
+
+  async function loadModuleAndUpdateGraph(
+    id: string,
+    options: LoadModuleOptions
+  ) {
+    const { module, paths } = await loadModule(options)
+
+    for (const path of paths) {
+      const ids = _extensionGraph.get(path) || new Set<string>()
+      ids.add(id)
+      _extensionGraph.set(path, ids)
+    }
+
+    return module
+  }
+
+  return {
+    name: "@medusajs/vite-plugin-extension",
+    configureServer(s) {
+      server = s
+      logger = s.config.logger
+
+      watcher = chokidar.watch(Array.from(_sources), {
+        persistent: true,
+        ignoreInitial: true,
+      })
+
+      watcher.on("add", async (file) => {
+        const type = getExtensionType(file)
+
+        if (type === "none") {
+          return
+        }
+
+        if (type === "widget") {
+          await handleWidgetChange(file)
+          return
+        }
+
+        if (type === "route") {
+          await handleRouteChange(file)
+          return
+        }
+
+        if (type === "setting") {
+          await handleSettingChange(file)
+          return
+        }
+
+        return
+      })
+
+      watcher.on("change", async (file) => {
+        const type = getExtensionType(file)
+
+        if (type === "none") {
+          return
+        }
+
+        if (type === "widget") {
+          await handleWidgetChange(file)
+          return
+        }
+
+        if (type === "route") {
+          await handleRouteChange(file)
+          return
+        }
+
+        if (type === "setting") {
+          await handleSettingChange(file)
+          return
+        }
+
+        return
+      })
+
+      watcher.on("unlink", (file) => {
+        handleExtensionUnlink(file)
+        return
+      })
+    },
+    resolveId(id) {
+      if (MODULES.includes(id)) {
+        return VIRTUAL_PREFIX + id
+      }
+
+      return null
+    },
+    async load(id: string) {
+      if (!id.startsWith(VIRTUAL_PREFIX)) {
+        return null
+      }
+
+      const idNoPrefix = id.slice(VIRTUAL_PREFIX.length)
+
+      const moduleMap: Record<string, LoadModuleOptions> = {
+        [ROUTE_PAGE_MODULE]: { type: "route", get: "page" },
+        [ROUTE_LINK_MODULE]: { type: "route", get: "link" },
+        [SETTING_PAGE_MODULE]: { type: "setting", get: "page" },
+        [SETTING_CARD_MODULE]: { type: "setting", get: "card" },
+      }
+
+      if (WIDGET_MODULES.includes(idNoPrefix)) {
+        const zone = idNoPrefix
+          .replace(WIDGET_MODULE, "")
+          .replace(/\//g, ".") as InjectionZone
+        return loadModuleAndUpdateGraph(id, { type: "widget", get: zone })
+      }
+
+      const moduleOptions = moduleMap[idNoPrefix]
+
+      if (moduleOptions) {
+        return loadModuleAndUpdateGraph(id, moduleOptions)
+      }
+
+      return null
+    },
+    closeBundle() {
+      if (watcher) {
+        watcher.close()
+      }
+    },
+  }
+}
diff --git a/packages/admin-next/vite-plugin-extension/tsconfig.json b/packages/admin-next/vite-plugin-extension/tsconfig.json
new file mode 100644
index 0000000000000..98f1c02d5c952
--- /dev/null
+++ b/packages/admin-next/vite-plugin-extension/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "strict": true,
+    "declaration": true,
+    "sourceMap": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/admin-next/vite-plugin-extension/tsup.config.ts b/packages/admin-next/vite-plugin-extension/tsup.config.ts
new file mode 100644
index 0000000000000..5f73ddd831b6c
--- /dev/null
+++ b/packages/admin-next/vite-plugin-extension/tsup.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["./src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+});
diff --git a/packages/create-medusa-app/src/utils/facts.ts b/packages/create-medusa-app/src/utils/facts.ts
index f028b26010912..f8dcea3c6c49a 100644
--- a/packages/create-medusa-app/src/utils/facts.ts
+++ b/packages/create-medusa-app/src/utils/facts.ts
@@ -1,11 +1,11 @@
 import boxen from "boxen"
 import chalk from "chalk"
-import { Ora } from "ora"
 import { emojify } from "node-emoji"
+import { Ora } from "ora"
 import ProcessManager from "./process-manager.js"
 
 export type FactBoxOptions = {
-  interval: NodeJS.Timer | null
+  interval: NodeJS.Timeout | null
   spinner: Ora
   processManager: ProcessManager
   message?: string
@@ -53,7 +53,7 @@ export const createFactBox = (
   spinner: Ora,
   title: string,
   processManager: ProcessManager
-): NodeJS.Timer => {
+): NodeJS.Timeout => {
   showFact(spinner, title)
   const interval = setInterval(() => {
     showFact(spinner, title)
@@ -65,12 +65,12 @@ export const createFactBox = (
 }
 
 export const resetFactBox = (
-  interval: NodeJS.Timer | null,
+  interval: NodeJS.Timeout | null,
   spinner: Ora,
   successMessage: string,
   processManager: ProcessManager,
   newTitle?: string
-): NodeJS.Timer | null => {
+): NodeJS.Timeout | null => {
   if (interval) {
     clearInterval(interval)
   }
@@ -90,7 +90,7 @@ export function displayFactBox({
   processManager,
   title = "",
   message = "",
-}: FactBoxOptions): NodeJS.Timer | null {
+}: FactBoxOptions): NodeJS.Timeout | null {
   if (!message) {
     return createFactBox(spinner, title, processManager)
   }
diff --git a/packages/create-medusa-app/src/utils/process-manager.ts b/packages/create-medusa-app/src/utils/process-manager.ts
index 1bf45245f638a..b530cf47a823f 100644
--- a/packages/create-medusa-app/src/utils/process-manager.ts
+++ b/packages/create-medusa-app/src/utils/process-manager.ts
@@ -4,7 +4,7 @@ type ProcessOptions = {
 }
 
 export default class ProcessManager {
-  intervals: NodeJS.Timer[] = []
+  intervals: NodeJS.Timeout[] = []
   static MAX_RETRIES = 3
 
   constructor() {
@@ -20,7 +20,7 @@ export default class ProcessManager {
     process.on("SIGINT", () => fn())
   }
 
-  addInterval(interval: NodeJS.Timer) {
+  addInterval(interval: NodeJS.Timeout) {
     this.intervals.push(interval)
   }
 
diff --git a/packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx
index 556c6a635399a..15cd59484e568 100644
--- a/packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx
@@ -4,7 +4,7 @@
   import AcademicCapSolid from "../academic-cap-solid"
 
   describe("AcademicCapSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<AcademicCapSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/academic-cap.spec.tsx b/packages/design-system/icons/src/components/__tests__/academic-cap.spec.tsx
index 2f1870b60b929..4293dfc112c00 100644
--- a/packages/design-system/icons/src/components/__tests__/academic-cap.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/academic-cap.spec.tsx
@@ -4,7 +4,7 @@
   import AcademicCap from "../academic-cap"
 
   describe("AcademicCap", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<AcademicCap data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/adjustments.spec.tsx b/packages/design-system/icons/src/components/__tests__/adjustments.spec.tsx
index 7bca88ad3954e..b10d779bf1501 100644
--- a/packages/design-system/icons/src/components/__tests__/adjustments.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/adjustments.spec.tsx
@@ -4,7 +4,7 @@
   import Adjustments from "../adjustments"
 
   describe("Adjustments", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Adjustments data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/apple.spec.tsx b/packages/design-system/icons/src/components/__tests__/apple.spec.tsx
index 35cbad5a087b0..726020db1b9fb 100644
--- a/packages/design-system/icons/src/components/__tests__/apple.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/apple.spec.tsx
@@ -4,7 +4,7 @@
   import Apple from "../apple"
 
   describe("Apple", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Apple data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/archive-box.spec.tsx b/packages/design-system/icons/src/components/__tests__/archive-box.spec.tsx
index 4278fa82d86d9..8c504d47c9919 100644
--- a/packages/design-system/icons/src/components/__tests__/archive-box.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/archive-box.spec.tsx
@@ -4,7 +4,7 @@
   import ArchiveBox from "../archive-box"
 
   describe("ArchiveBox", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArchiveBox data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-circle.spec.tsx
index 035192a08451f..5d2f818d5b57f 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-down-circle.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-down-circle.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowDownCircle from "../arrow-down-circle"
 
   describe("ArrowDownCircle", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowDownCircle data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-left-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-left-mini.spec.tsx
index bde4b5ae66367..c1445c266eb99 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-down-left-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-down-left-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowDownLeftMini from "../arrow-down-left-mini"
 
   describe("ArrowDownLeftMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowDownLeftMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-left.spec.tsx
index 4c01374b9788a..fb235104bb5f6 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-down-left.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-down-left.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowDownLeft from "../arrow-down-left"
 
   describe("ArrowDownLeft", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowDownLeft data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-mini.spec.tsx
index cee35898d008a..ac78c1e955c5b 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-down-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-down-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowDownMini from "../arrow-down-mini"
 
   describe("ArrowDownMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowDownMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-right-mini.spec.tsx
index 02df8833e53bf..a525c1ca6d9e1 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-down-right-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-down-right-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowDownRightMini from "../arrow-down-right-mini"
 
   describe("ArrowDownRightMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowDownRightMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down-tray.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down-tray.spec.tsx
index 60a4e9635bd2a..e1a4eb72adb67 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-down-tray.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-down-tray.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowDownTray from "../arrow-down-tray"
 
   describe("ArrowDownTray", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowDownTray data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-down.spec.tsx
index d983ccea7c70e..2d72bb2794828 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-down.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-down.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowDown from "../arrow-down"
 
   describe("ArrowDown", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowDown data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx
index 14c531affa3d7..49b8b50142364 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowLeftMini from "../arrow-left-mini"
 
   describe("ArrowLeftMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowLeftMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-left.spec.tsx
index 29abb62ce7380..8ecc650e271d9 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-left.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-left.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowLeft from "../arrow-left"
 
   describe("ArrowLeft", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowLeft data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-long-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-long-down.spec.tsx
index e30cbe9a67193..0160ea1acc92d 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-long-down.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-long-down.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowLongDown from "../arrow-long-down"
 
   describe("ArrowLongDown", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowLongDown data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx
index 95298f773cd53..45818faabb73b 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowLongLeft from "../arrow-long-left"
 
   describe("ArrowLongLeft", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowLongLeft data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-long-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-long-right.spec.tsx
index 9ff29841b1759..d762f44ff8e78 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-long-right.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-long-right.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowLongRight from "../arrow-long-right"
 
   describe("ArrowLongRight", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowLongRight data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx
index 9dfcdd3889d1d..a45ef8af397c1 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowLongUp from "../arrow-long-up"
 
   describe("ArrowLongUp", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowLongUp data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx
index d534f0d4f97d6..1d0b2dddbfdb6 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowPathMini from "../arrow-path-mini"
 
   describe("ArrowPathMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowPathMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-path.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-path.spec.tsx
index 2309565e77df3..55320e8b05b20 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-path.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-path.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowPath from "../arrow-path"
 
   describe("ArrowPath", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowPath data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-right-mini.spec.tsx
index f927f6c098810..56c73e070a25f 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-right-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-right-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowRightMini from "../arrow-right-mini"
 
   describe("ArrowRightMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowRightMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-right-on-rectangle.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-right-on-rectangle.spec.tsx
index 2ce51e4632b9a..49319f0ee285c 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-right-on-rectangle.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-right-on-rectangle.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowRightOnRectangle from "../arrow-right-on-rectangle"
 
   describe("ArrowRightOnRectangle", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowRightOnRectangle data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx
index 056c99aa5c24c..809e1dcac4d5e 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowUpCircleSolid from "../arrow-up-circle-solid"
 
   describe("ArrowUpCircleSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowUpCircleSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-down.spec.tsx
index f1afec7e9ac09..0a06b0b557f4c 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-up-down.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-up-down.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowUpDown from "../arrow-up-down"
 
   describe("ArrowUpDown", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowUpDown data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx
index bb174e16ca267..5b3d970f0dad4 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowUpMini from "../arrow-up-mini"
 
   describe("ArrowUpMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowUpMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-right-mini.spec.tsx
index 0c0af2a762ae4..1769d12140ecc 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-up-right-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-up-right-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowUpRightMini from "../arrow-up-right-mini"
 
   describe("ArrowUpRightMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowUpRightMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx
index 9382524a5f107..05036c5c909b8 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowUpRightOnBox from "../arrow-up-right-on-box"
 
   describe("ArrowUpRightOnBox", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowUpRightOnBox data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx
index 8975750767ea5..92e179a424bdd 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowUpTray from "../arrow-up-tray"
 
   describe("ArrowUpTray", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowUpTray data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx
index d75c7b45759a0..65ee92ee75fe4 100644
--- a/packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowUturnLeft from "../arrow-uturn-left"
 
   describe("ArrowUturnLeft", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowUturnLeft data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx
index b33e72e7e40e0..0c9d4537748fc 100644
--- a/packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowsPointingOutMini from "../arrows-pointing-out-mini"
 
   describe("ArrowsPointingOutMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowsPointingOutMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx
index 8db16567fc219..ca4d953d80db3 100644
--- a/packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx
@@ -4,7 +4,7 @@
   import ArrowsPointingOut from "../arrows-pointing-out"
 
   describe("ArrowsPointingOut", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrowsPointingOut data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx
index a787a1800f5a4..73387d79e479c 100644
--- a/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/arrrow-right.spec.tsx
@@ -4,7 +4,7 @@
   import ArrrowRight from "../arrrow-right"
 
   describe("ArrrowRight", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ArrrowRight data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/at-symbol.spec.tsx b/packages/design-system/icons/src/components/__tests__/at-symbol.spec.tsx
index 379ba44be2e14..6080d1d4a593d 100644
--- a/packages/design-system/icons/src/components/__tests__/at-symbol.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/at-symbol.spec.tsx
@@ -4,7 +4,7 @@
   import AtSymbol from "../at-symbol"
 
   describe("AtSymbol", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<AtSymbol data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/backward-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/backward-solid.spec.tsx
index 9fc989126101d..9c71c07ba1577 100644
--- a/packages/design-system/icons/src/components/__tests__/backward-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/backward-solid.spec.tsx
@@ -4,7 +4,7 @@
   import BackwardSolid from "../backward-solid"
 
   describe("BackwardSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BackwardSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/bars-three.spec.tsx b/packages/design-system/icons/src/components/__tests__/bars-three.spec.tsx
index 005d5bd4df7b9..2abf8f2de6b00 100644
--- a/packages/design-system/icons/src/components/__tests__/bars-three.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/bars-three.spec.tsx
@@ -4,7 +4,7 @@
   import BarsThree from "../bars-three"
 
   describe("BarsThree", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BarsThree data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/beaker.spec.tsx b/packages/design-system/icons/src/components/__tests__/beaker.spec.tsx
new file mode 100644
index 0000000000000..914740af8ad0d
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/beaker.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Beaker from "../beaker"
+
+  describe("Beaker", () => {
+    it("should render the icon without errors", async () => {
+      render(<Beaker 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__/bell-alert-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/bell-alert-solid.spec.tsx
index 5047d86ede6c4..0320ab72e8d02 100644
--- a/packages/design-system/icons/src/components/__tests__/bell-alert-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/bell-alert-solid.spec.tsx
@@ -4,7 +4,7 @@
   import BellAlertSolid from "../bell-alert-solid"
 
   describe("BellAlertSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BellAlertSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/bell-alert.spec.tsx b/packages/design-system/icons/src/components/__tests__/bell-alert.spec.tsx
index ccf989c70a379..ac3727c9e48eb 100644
--- a/packages/design-system/icons/src/components/__tests__/bell-alert.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/bell-alert.spec.tsx
@@ -4,7 +4,7 @@
   import BellAlert from "../bell-alert"
 
   describe("BellAlert", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BellAlert data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/bolt-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/bolt-solid.spec.tsx
index 19bc2fa5b92c7..cfa741267069a 100644
--- a/packages/design-system/icons/src/components/__tests__/bolt-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/bolt-solid.spec.tsx
@@ -4,7 +4,7 @@
   import BoltSolid from "../bolt-solid"
 
   describe("BoltSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BoltSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/bolt.spec.tsx b/packages/design-system/icons/src/components/__tests__/bolt.spec.tsx
index 5502825dc27f6..8cb7558cedf20 100644
--- a/packages/design-system/icons/src/components/__tests__/bolt.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/bolt.spec.tsx
@@ -4,7 +4,7 @@
   import Bolt from "../bolt"
 
   describe("Bolt", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Bolt data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/book-open.spec.tsx b/packages/design-system/icons/src/components/__tests__/book-open.spec.tsx
index 2a6b7adf9af76..75bb7558ffd05 100644
--- a/packages/design-system/icons/src/components/__tests__/book-open.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/book-open.spec.tsx
@@ -4,7 +4,7 @@
   import BookOpen from "../book-open"
 
   describe("BookOpen", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BookOpen data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx
index 2239def735d3c..cc324bc60e928 100644
--- a/packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx
@@ -4,7 +4,7 @@
   import BugAntSolid from "../bug-ant-solid"
 
   describe("BugAntSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BugAntSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/bug.spec.tsx b/packages/design-system/icons/src/components/__tests__/bug.spec.tsx
index 2313d4a92aef3..c199fd4056ef6 100644
--- a/packages/design-system/icons/src/components/__tests__/bug.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/bug.spec.tsx
@@ -4,7 +4,7 @@
   import Bug from "../bug"
 
   describe("Bug", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Bug data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/building-storefront.spec.tsx b/packages/design-system/icons/src/components/__tests__/building-storefront.spec.tsx
index e6ac06362108f..29bce53d86c64 100644
--- a/packages/design-system/icons/src/components/__tests__/building-storefront.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/building-storefront.spec.tsx
@@ -4,7 +4,7 @@
   import BuildingStorefront from "../building-storefront"
 
   describe("BuildingStorefront", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BuildingStorefront data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/building-tax.spec.tsx b/packages/design-system/icons/src/components/__tests__/building-tax.spec.tsx
index 5528526dde05f..607d7339f8ca7 100644
--- a/packages/design-system/icons/src/components/__tests__/building-tax.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/building-tax.spec.tsx
@@ -4,7 +4,7 @@
   import BuildingTax from "../building-tax"
 
   describe("BuildingTax", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BuildingTax data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/buildings-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/buildings-mini.spec.tsx
index 938fe98ae473e..a3877ca07871c 100644
--- a/packages/design-system/icons/src/components/__tests__/buildings-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/buildings-mini.spec.tsx
@@ -4,7 +4,7 @@
   import BuildingsMini from "../buildings-mini"
 
   describe("BuildingsMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BuildingsMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/buildings-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/buildings-solid.spec.tsx
index cb5d6f9921f21..735d5aad76507 100644
--- a/packages/design-system/icons/src/components/__tests__/buildings-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/buildings-solid.spec.tsx
@@ -4,7 +4,7 @@
   import BuildingsSolid from "../buildings-solid"
 
   describe("BuildingsSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<BuildingsSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/buildings.spec.tsx b/packages/design-system/icons/src/components/__tests__/buildings.spec.tsx
index 4ac4a8a0c7c4b..2a651fff32762 100644
--- a/packages/design-system/icons/src/components/__tests__/buildings.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/buildings.spec.tsx
@@ -4,7 +4,7 @@
   import Buildings from "../buildings"
 
   describe("Buildings", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Buildings data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/calendar-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/calendar-mini.spec.tsx
index 2189aa5645753..531d90507951a 100644
--- a/packages/design-system/icons/src/components/__tests__/calendar-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/calendar-mini.spec.tsx
@@ -4,7 +4,7 @@
   import CalendarMini from "../calendar-mini"
 
   describe("CalendarMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CalendarMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/calendar-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/calendar-solid.spec.tsx
index 321084c3ed454..51ab1d77bf7a6 100644
--- a/packages/design-system/icons/src/components/__tests__/calendar-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/calendar-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CalendarSolid from "../calendar-solid"
 
   describe("CalendarSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CalendarSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/calendar.spec.tsx b/packages/design-system/icons/src/components/__tests__/calendar.spec.tsx
index 2a83fbefb8efd..88d636fe69311 100644
--- a/packages/design-system/icons/src/components/__tests__/calendar.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/calendar.spec.tsx
@@ -4,7 +4,7 @@
   import Calendar from "../calendar"
 
   describe("Calendar", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Calendar data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/camera.spec.tsx b/packages/design-system/icons/src/components/__tests__/camera.spec.tsx
index 3f329df64192e..da2c82c78a4a2 100644
--- a/packages/design-system/icons/src/components/__tests__/camera.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/camera.spec.tsx
@@ -4,7 +4,7 @@
   import Camera from "../camera"
 
   describe("Camera", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Camera data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/cash-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/cash-solid.spec.tsx
index db495bd239e74..540452ce6ee92 100644
--- a/packages/design-system/icons/src/components/__tests__/cash-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/cash-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CashSolid from "../cash-solid"
 
   describe("CashSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CashSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/cash.spec.tsx b/packages/design-system/icons/src/components/__tests__/cash.spec.tsx
index 5d5fedbcdbad1..a0c2db0a9c29a 100644
--- a/packages/design-system/icons/src/components/__tests__/cash.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/cash.spec.tsx
@@ -4,7 +4,7 @@
   import Cash from "../cash"
 
   describe("Cash", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Cash data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/channels-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/channels-solid.spec.tsx
index 513fbba5edf8e..9887c96cc398d 100644
--- a/packages/design-system/icons/src/components/__tests__/channels-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/channels-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ChannelsSolid from "../channels-solid"
 
   describe("ChannelsSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChannelsSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/channels.spec.tsx b/packages/design-system/icons/src/components/__tests__/channels.spec.tsx
index 8be7936092c56..0c4c28c3a4d9f 100644
--- a/packages/design-system/icons/src/components/__tests__/channels.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/channels.spec.tsx
@@ -4,7 +4,7 @@
   import Channels from "../channels"
 
   describe("Channels", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Channels data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chart-bar.spec.tsx b/packages/design-system/icons/src/components/__tests__/chart-bar.spec.tsx
index 2fbd704d1ffd8..8d4ab23dd6abe 100644
--- a/packages/design-system/icons/src/components/__tests__/chart-bar.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chart-bar.spec.tsx
@@ -4,7 +4,7 @@
   import ChartBar from "../chart-bar"
 
   describe("ChartBar", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChartBar data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx
index 19dcc277ac475..a51555ed4d2db 100644
--- a/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ChatBubbleLeftRightSolid from "../chat-bubble-left-right-solid"
 
   describe("ChatBubbleLeftRightSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChatBubbleLeftRightSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx
index 5623d1ecebdd7..fd1c8e8c9f61a 100644
--- a/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx
@@ -4,7 +4,7 @@
   import ChatBubbleLeftRight from "../chat-bubble-left-right"
 
   describe("ChatBubbleLeftRight", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChatBubbleLeftRight data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chat-bubble.spec.tsx b/packages/design-system/icons/src/components/__tests__/chat-bubble.spec.tsx
index 4f446d9fff0e5..12fc754d96253 100644
--- a/packages/design-system/icons/src/components/__tests__/chat-bubble.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chat-bubble.spec.tsx
@@ -4,7 +4,7 @@
   import ChatBubble from "../chat-bubble"
 
   describe("ChatBubble", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChatBubble data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx
index 0cab24c2123d6..9b82216b72b2c 100644
--- a/packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CheckCircleMiniSolid from "../check-circle-mini-solid"
 
   describe("CheckCircleMiniSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CheckCircleMiniSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/check-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/check-circle-solid.spec.tsx
index 9ce54e82c4aa3..635f44695c75d 100644
--- a/packages/design-system/icons/src/components/__tests__/check-circle-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/check-circle-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CheckCircleSolid from "../check-circle-solid"
 
   describe("CheckCircleSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CheckCircleSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/check-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/check-mini.spec.tsx
index 5d155897f80be..3dab1992771c8 100644
--- a/packages/design-system/icons/src/components/__tests__/check-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/check-mini.spec.tsx
@@ -4,7 +4,7 @@
   import CheckMini from "../check-mini"
 
   describe("CheckMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CheckMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/check.spec.tsx b/packages/design-system/icons/src/components/__tests__/check.spec.tsx
index b979efe31b27c..0326ccdcb2ac5 100644
--- a/packages/design-system/icons/src/components/__tests__/check.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/check.spec.tsx
@@ -4,7 +4,7 @@
   import Check from "../check"
 
   describe("Check", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Check data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx
index 194bd7148c332..12965d73b67ef 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronDoubleLeftMiniSolid from "../chevron-double-left-mini-solid"
 
   describe("ChevronDoubleLeftMiniSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronDoubleLeftMiniSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx
index b97923c2a6214..50ca7e1ebf735 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronDoubleLeft from "../chevron-double-left"
 
   describe("ChevronDoubleLeft", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronDoubleLeft data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx
index fdbd9245e7805..76a674835eb80 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronDoubleRightMiniSolid from "../chevron-double-right-mini-solid"
 
   describe("ChevronDoubleRightMiniSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronDoubleRightMiniSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx
index a021523388c4d..73972f8495ba0 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronDoubleRight from "../chevron-double-right"
 
   describe("ChevronDoubleRight", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronDoubleRight data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx
index f120cd306489b..d6813394665fd 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronDownMini from "../chevron-down-mini"
 
   describe("ChevronDownMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronDownMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-down.spec.tsx
index f420fa314a001..f4ae7cb490ac7 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-down.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-down.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronDown from "../chevron-down"
 
   describe("ChevronDown", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronDown data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx
index 0c2f1cc52ade9..3b539f215be7f 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronLeftMini from "../chevron-left-mini"
 
   describe("ChevronLeftMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronLeftMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-left.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-left.spec.tsx
index ce547f59122fd..0bdbbfbc54136 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-left.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-left.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronLeft from "../chevron-left"
 
   describe("ChevronLeft", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronLeft data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx
index c279d11587207..0f4ede4b53681 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronRightMini from "../chevron-right-mini"
 
   describe("ChevronRightMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronRightMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-right.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-right.spec.tsx
index 661d8abdd4a03..402cecae2854a 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-right.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-right.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronRight from "../chevron-right"
 
   describe("ChevronRight", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronRight data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx
index 1c5cae25607c3..7d7e65cb560ed 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronUpDown from "../chevron-up-down"
 
   describe("ChevronUpDown", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronUpDown data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx
index 1fd13096a7b69..0552c7f808106 100644
--- a/packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ChevronUpMini from "../chevron-up-mini"
 
   describe("ChevronUpMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ChevronUpMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-dotted-line.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-dotted-line.spec.tsx
index 73fda1f054140..ee5eef0ca3222 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-dotted-line.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-dotted-line.spec.tsx
@@ -4,7 +4,7 @@
   import CircleDottedLine from "../circle-dotted-line"
 
   describe("CircleDottedLine", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleDottedLine data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-filled-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-filled-solid.spec.tsx
index 5b183f049d1f5..36470bec9091e 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-filled-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-filled-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CircleFilledSolid from "../circle-filled-solid"
 
   describe("CircleFilledSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleFilledSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-half-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-half-solid.spec.tsx
index 5e1c2b619b523..949e1cee9e787 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-half-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-half-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CircleHalfSolid from "../circle-half-solid"
 
   describe("CircleHalfSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleHalfSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx
index d9a9882aa3dbc..1af532cad8d03 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CircleMiniFilledSolid from "../circle-mini-filled-solid"
 
   describe("CircleMiniFilledSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleMiniFilledSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-mini-solid.spec.tsx
index bdfc5320fd4cf..d696eb0bbb244 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-mini-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-mini-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CircleMiniSolid from "../circle-mini-solid"
 
   describe("CircleMiniSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleMiniSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-quarter-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-quarter-solid.spec.tsx
index e93acd1da2aba..96fff07b78c8f 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-quarter-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-quarter-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CircleQuarterSolid from "../circle-quarter-solid"
 
   describe("CircleQuarterSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleQuarterSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-solid.spec.tsx
index c64bd6f1dd66e..3a0869e50dbec 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CircleSolid from "../circle-solid"
 
   describe("CircleSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-stack-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-stack-solid.spec.tsx
index 13f2d8e6476e9..a574e41817985 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-stack-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-stack-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CircleStackSolid from "../circle-stack-solid"
 
   describe("CircleStackSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleStackSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-stack.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-stack.spec.tsx
index 0e5d540e83d16..73616b891c094 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-stack.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-stack.spec.tsx
@@ -4,7 +4,7 @@
   import CircleStack from "../circle-stack"
 
   describe("CircleStack", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleStack data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx
index 021099e37343b..a924d27bbeb2b 100644
--- a/packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CircleThreeQuartersSolid from "../circle-three-quarters-solid"
 
   describe("CircleThreeQuartersSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CircleThreeQuartersSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx
index 9eeb68231ed78..b7b298f71db0b 100644
--- a/packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ClockChangedSolidMini from "../clock-changed-solid-mini"
 
   describe("ClockChangedSolidMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ClockChangedSolidMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/clock-solid-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/clock-solid-mini.spec.tsx
index 3a8d46eeebf20..a59aebc8dd644 100644
--- a/packages/design-system/icons/src/components/__tests__/clock-solid-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/clock-solid-mini.spec.tsx
@@ -4,7 +4,7 @@
   import ClockSolidMini from "../clock-solid-mini"
 
   describe("ClockSolidMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ClockSolidMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/clock-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/clock-solid.spec.tsx
index ab4b42d611040..8baa9e959a1d9 100644
--- a/packages/design-system/icons/src/components/__tests__/clock-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/clock-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ClockSolid from "../clock-solid"
 
   describe("ClockSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ClockSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/clock.spec.tsx b/packages/design-system/icons/src/components/__tests__/clock.spec.tsx
index e1713f7377839..f52620b523d32 100644
--- a/packages/design-system/icons/src/components/__tests__/clock.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/clock.spec.tsx
@@ -4,7 +4,7 @@
   import Clock from "../clock"
 
   describe("Clock", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Clock data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/cloud-arrow-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/cloud-arrow-down.spec.tsx
index c366c89e3fae0..b3dd9979a9ee9 100644
--- a/packages/design-system/icons/src/components/__tests__/cloud-arrow-down.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/cloud-arrow-down.spec.tsx
@@ -4,7 +4,7 @@
   import CloudArrowDown from "../cloud-arrow-down"
 
   describe("CloudArrowDown", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CloudArrowDown data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/cloud-arrow-up.spec.tsx b/packages/design-system/icons/src/components/__tests__/cloud-arrow-up.spec.tsx
index 256c3bda560f2..f315df00230cd 100644
--- a/packages/design-system/icons/src/components/__tests__/cloud-arrow-up.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/cloud-arrow-up.spec.tsx
@@ -4,7 +4,7 @@
   import CloudArrowUp from "../cloud-arrow-up"
 
   describe("CloudArrowUp", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CloudArrowUp data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/cog-six-tooth-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/cog-six-tooth-solid.spec.tsx
index 8f7de53ccc094..39d2147ff1c9c 100644
--- a/packages/design-system/icons/src/components/__tests__/cog-six-tooth-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/cog-six-tooth-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CogSixToothSolid from "../cog-six-tooth-solid"
 
   describe("CogSixToothSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CogSixToothSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/cog-six-tooth.spec.tsx b/packages/design-system/icons/src/components/__tests__/cog-six-tooth.spec.tsx
index ed58ac87db0b3..62381774ffb9a 100644
--- a/packages/design-system/icons/src/components/__tests__/cog-six-tooth.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/cog-six-tooth.spec.tsx
@@ -4,7 +4,7 @@
   import CogSixTooth from "../cog-six-tooth"
 
   describe("CogSixTooth", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CogSixTooth data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/command-line-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/command-line-solid.spec.tsx
index d1de824d77939..2a619c252c481 100644
--- a/packages/design-system/icons/src/components/__tests__/command-line-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/command-line-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CommandLineSolid from "../command-line-solid"
 
   describe("CommandLineSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CommandLineSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/command-line.spec.tsx b/packages/design-system/icons/src/components/__tests__/command-line.spec.tsx
index 09384495120da..1d6e377a76f66 100644
--- a/packages/design-system/icons/src/components/__tests__/command-line.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/command-line.spec.tsx
@@ -4,7 +4,7 @@
   import CommandLine from "../command-line"
 
   describe("CommandLine", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CommandLine data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/component-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/component-solid.spec.tsx
index b27cd9aa5eba1..4aa26cae374cd 100644
--- a/packages/design-system/icons/src/components/__tests__/component-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/component-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ComponentSolid from "../component-solid"
 
   describe("ComponentSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ComponentSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/component.spec.tsx b/packages/design-system/icons/src/components/__tests__/component.spec.tsx
index b9d15b2f3efbb..1ccfbfcc14f9f 100644
--- a/packages/design-system/icons/src/components/__tests__/component.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/component.spec.tsx
@@ -4,7 +4,7 @@
   import Component from "../component"
 
   describe("Component", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Component data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/computer-desktop-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/computer-desktop-solid.spec.tsx
index 26e111b13c48a..ee4ce100eb61f 100644
--- a/packages/design-system/icons/src/components/__tests__/computer-desktop-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/computer-desktop-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ComputerDesktopSolid from "../computer-desktop-solid"
 
   describe("ComputerDesktopSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ComputerDesktopSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/computer-desktop.spec.tsx b/packages/design-system/icons/src/components/__tests__/computer-desktop.spec.tsx
index e163cc55695dd..b3af679c97cc4 100644
--- a/packages/design-system/icons/src/components/__tests__/computer-desktop.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/computer-desktop.spec.tsx
@@ -4,7 +4,7 @@
   import ComputerDesktop from "../computer-desktop"
 
   describe("ComputerDesktop", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ComputerDesktop data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/credit-card-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/credit-card-solid.spec.tsx
index 9af9852841a0f..c4f8a1b641d89 100644
--- a/packages/design-system/icons/src/components/__tests__/credit-card-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/credit-card-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CreditCardSolid from "../credit-card-solid"
 
   describe("CreditCardSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CreditCardSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/credit-card.spec.tsx b/packages/design-system/icons/src/components/__tests__/credit-card.spec.tsx
index cd7249700719e..eed86cf00ee70 100644
--- a/packages/design-system/icons/src/components/__tests__/credit-card.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/credit-card.spec.tsx
@@ -4,7 +4,7 @@
   import CreditCard from "../credit-card"
 
   describe("CreditCard", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CreditCard data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/cube-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/cube-solid.spec.tsx
index 73ed02173c284..1b147d92a2ecb 100644
--- a/packages/design-system/icons/src/components/__tests__/cube-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/cube-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CubeSolid from "../cube-solid"
 
   describe("CubeSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CubeSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/currency-dollar-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/currency-dollar-solid.spec.tsx
index a0bedb4bd4655..2b393e682ff41 100644
--- a/packages/design-system/icons/src/components/__tests__/currency-dollar-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/currency-dollar-solid.spec.tsx
@@ -4,7 +4,7 @@
   import CurrencyDollarSolid from "../currency-dollar-solid"
 
   describe("CurrencyDollarSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CurrencyDollarSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/currency-dollar.spec.tsx b/packages/design-system/icons/src/components/__tests__/currency-dollar.spec.tsx
index 816de68c1d83a..a2a7591c07a29 100644
--- a/packages/design-system/icons/src/components/__tests__/currency-dollar.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/currency-dollar.spec.tsx
@@ -4,7 +4,7 @@
   import CurrencyDollar from "../currency-dollar"
 
   describe("CurrencyDollar", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CurrencyDollar data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/cursor-arrow-rays.spec.tsx b/packages/design-system/icons/src/components/__tests__/cursor-arrow-rays.spec.tsx
index bf94249d11992..08cd863e7651d 100644
--- a/packages/design-system/icons/src/components/__tests__/cursor-arrow-rays.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/cursor-arrow-rays.spec.tsx
@@ -4,7 +4,7 @@
   import CursorArrowRays from "../cursor-arrow-rays"
 
   describe("CursorArrowRays", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<CursorArrowRays data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/discord.spec.tsx b/packages/design-system/icons/src/components/__tests__/discord.spec.tsx
index e4208edd0e485..935d7162f33cf 100644
--- a/packages/design-system/icons/src/components/__tests__/discord.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/discord.spec.tsx
@@ -4,7 +4,7 @@
   import Discord from "../discord"
 
   describe("Discord", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Discord data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/document-series.spec.tsx b/packages/design-system/icons/src/components/__tests__/document-series.spec.tsx
index bd8c1d752c453..bcc15cc4716c6 100644
--- a/packages/design-system/icons/src/components/__tests__/document-series.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/document-series.spec.tsx
@@ -4,7 +4,7 @@
   import DocumentSeries from "../document-series"
 
   describe("DocumentSeries", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<DocumentSeries data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/document-text-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/document-text-solid.spec.tsx
index c2321beb0f604..fa5368d9e5e81 100644
--- a/packages/design-system/icons/src/components/__tests__/document-text-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/document-text-solid.spec.tsx
@@ -4,7 +4,7 @@
   import DocumentTextSolid from "../document-text-solid"
 
   describe("DocumentTextSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<DocumentTextSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/document-text.spec.tsx b/packages/design-system/icons/src/components/__tests__/document-text.spec.tsx
index cbc967d0e255f..02931312bdecb 100644
--- a/packages/design-system/icons/src/components/__tests__/document-text.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/document-text.spec.tsx
@@ -4,7 +4,7 @@
   import DocumentText from "../document-text"
 
   describe("DocumentText", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<DocumentText data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/dots-six.spec.tsx b/packages/design-system/icons/src/components/__tests__/dots-six.spec.tsx
index 60ad58308ccb9..7507ce737f6ad 100644
--- a/packages/design-system/icons/src/components/__tests__/dots-six.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/dots-six.spec.tsx
@@ -4,7 +4,7 @@
   import DotsSix from "../dots-six"
 
   describe("DotsSix", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<DotsSix data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-blue-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-blue-solid.spec.tsx
index cca3eadfb6576..10a6fe83822c3 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipse-blue-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipse-blue-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EllipseBlueSolid from "../ellipse-blue-solid"
 
   describe("EllipseBlueSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipseBlueSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-green-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-green-solid.spec.tsx
index 100460a2a239e..9ddd7ff4ffe2c 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipse-green-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipse-green-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EllipseGreenSolid from "../ellipse-green-solid"
 
   describe("EllipseGreenSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipseGreenSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-grey-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-grey-solid.spec.tsx
index 9abc1a2d95d97..879b37fa1a8f7 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipse-grey-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipse-grey-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EllipseGreySolid from "../ellipse-grey-solid"
 
   describe("EllipseGreySolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipseGreySolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-mini-solid.spec.tsx
index 9d2323d2105a1..999abd2d6726b 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipse-mini-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipse-mini-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EllipseMiniSolid from "../ellipse-mini-solid"
 
   describe("EllipseMiniSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipseMiniSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-orange-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-orange-solid.spec.tsx
index 69739932cabb9..77a6cce31e086 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipse-orange-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipse-orange-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EllipseOrangeSolid from "../ellipse-orange-solid"
 
   describe("EllipseOrangeSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipseOrangeSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-purple-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-purple-solid.spec.tsx
index a18781ffe825c..f61e7d02aacb0 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipse-purple-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipse-purple-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EllipsePurpleSolid from "../ellipse-purple-solid"
 
   describe("EllipsePurpleSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipsePurpleSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-red-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-red-solid.spec.tsx
index 4305fa6828a40..23077645efc3c 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipse-red-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipse-red-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EllipseRedSolid from "../ellipse-red-solid"
 
   describe("EllipseRedSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipseRedSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse-solid.spec.tsx
index 80739383379b9..d144cce811558 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipse-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipse-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EllipseSolid from "../ellipse-solid"
 
   describe("EllipseSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipseSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipse.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipse.spec.tsx
new file mode 100644
index 0000000000000..89f67c83d90a2
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/ellipse.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Ellipse from "../ellipse"
+
+  describe("Ellipse", () => {
+    it("should render the icon without errors", async () => {
+      render(<Ellipse 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__/ellipsis-horizontal.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipsis-horizontal.spec.tsx
index 8dc45b736e2ee..c20100ab8a62a 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipsis-horizontal.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipsis-horizontal.spec.tsx
@@ -4,7 +4,7 @@
   import EllipsisHorizontal from "../ellipsis-horizontal"
 
   describe("EllipsisHorizontal", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipsisHorizontal data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/ellipsis-vertical.spec.tsx b/packages/design-system/icons/src/components/__tests__/ellipsis-vertical.spec.tsx
index de093e048323d..873a7e03f4a27 100644
--- a/packages/design-system/icons/src/components/__tests__/ellipsis-vertical.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/ellipsis-vertical.spec.tsx
@@ -4,7 +4,7 @@
   import EllipsisVertical from "../ellipsis-vertical"
 
   describe("EllipsisVertical", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EllipsisVertical data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/envelope-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/envelope-solid.spec.tsx
index 6c0424c598be6..f61bf8f3c21d3 100644
--- a/packages/design-system/icons/src/components/__tests__/envelope-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/envelope-solid.spec.tsx
@@ -4,7 +4,7 @@
   import EnvelopeSolid from "../envelope-solid"
 
   describe("EnvelopeSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EnvelopeSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/envelope.spec.tsx b/packages/design-system/icons/src/components/__tests__/envelope.spec.tsx
index 2e17a89825269..98700f5115d0b 100644
--- a/packages/design-system/icons/src/components/__tests__/envelope.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/envelope.spec.tsx
@@ -4,7 +4,7 @@
   import Envelope from "../envelope"
 
   describe("Envelope", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Envelope data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/exclamation-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/exclamation-circle-solid.spec.tsx
index 4278abdb4b679..5356ea05c7676 100644
--- a/packages/design-system/icons/src/components/__tests__/exclamation-circle-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/exclamation-circle-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ExclamationCircleSolid from "../exclamation-circle-solid"
 
   describe("ExclamationCircleSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ExclamationCircleSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/exclamation-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/exclamation-circle.spec.tsx
index 2c7c61dc54b72..2cfc78f129ac1 100644
--- a/packages/design-system/icons/src/components/__tests__/exclamation-circle.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/exclamation-circle.spec.tsx
@@ -4,7 +4,7 @@
   import ExclamationCircle from "../exclamation-circle"
 
   describe("ExclamationCircle", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ExclamationCircle data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/eye-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/eye-mini.spec.tsx
index 222c99fab5ccd..80db68849d40d 100644
--- a/packages/design-system/icons/src/components/__tests__/eye-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/eye-mini.spec.tsx
@@ -4,7 +4,7 @@
   import EyeMini from "../eye-mini"
 
   describe("EyeMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EyeMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/eye-slash-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/eye-slash-mini.spec.tsx
index 1eeff839e4ad5..c7806557f1bcb 100644
--- a/packages/design-system/icons/src/components/__tests__/eye-slash-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/eye-slash-mini.spec.tsx
@@ -4,7 +4,7 @@
   import EyeSlashMini from "../eye-slash-mini"
 
   describe("EyeSlashMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EyeSlashMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/eye-slash.spec.tsx b/packages/design-system/icons/src/components/__tests__/eye-slash.spec.tsx
index f3f70ff47923d..7ae4bd918f1dd 100644
--- a/packages/design-system/icons/src/components/__tests__/eye-slash.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/eye-slash.spec.tsx
@@ -4,7 +4,7 @@
   import EyeSlash from "../eye-slash"
 
   describe("EyeSlash", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<EyeSlash data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/eye.spec.tsx b/packages/design-system/icons/src/components/__tests__/eye.spec.tsx
index b670224cc4788..b686f106e9ee2 100644
--- a/packages/design-system/icons/src/components/__tests__/eye.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/eye.spec.tsx
@@ -4,7 +4,7 @@
   import Eye from "../eye"
 
   describe("Eye", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Eye data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/face-smile.spec.tsx b/packages/design-system/icons/src/components/__tests__/face-smile.spec.tsx
index f5370c6c50edb..5e1a62c55ec34 100644
--- a/packages/design-system/icons/src/components/__tests__/face-smile.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/face-smile.spec.tsx
@@ -4,7 +4,7 @@
   import FaceSmile from "../face-smile"
 
   describe("FaceSmile", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<FaceSmile data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/facebook.spec.tsx b/packages/design-system/icons/src/components/__tests__/facebook.spec.tsx
index 31573de45cb2b..543f1124bf23c 100644
--- a/packages/design-system/icons/src/components/__tests__/facebook.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/facebook.spec.tsx
@@ -4,7 +4,7 @@
   import Facebook from "../facebook"
 
   describe("Facebook", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Facebook data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/figma.spec.tsx b/packages/design-system/icons/src/components/__tests__/figma.spec.tsx
index 69530492dee62..d54325a081605 100644
--- a/packages/design-system/icons/src/components/__tests__/figma.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/figma.spec.tsx
@@ -4,7 +4,7 @@
   import Figma from "../figma"
 
   describe("Figma", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Figma data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/flag-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/flag-mini.spec.tsx
new file mode 100644
index 0000000000000..ba37f6162fdfc
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/flag-mini.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import FlagMini from "../flag-mini"
+
+  describe("FlagMini", () => {
+    it("should render the icon without errors", async () => {
+      render(<FlagMini 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__/flying-box.spec.tsx b/packages/design-system/icons/src/components/__tests__/flying-box.spec.tsx
index ec1fca4221db2..d05f6a42afead 100644
--- a/packages/design-system/icons/src/components/__tests__/flying-box.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/flying-box.spec.tsx
@@ -4,7 +4,7 @@
   import FlyingBox from "../flying-box"
 
   describe("FlyingBox", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<FlyingBox data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/folder-open.spec.tsx b/packages/design-system/icons/src/components/__tests__/folder-open.spec.tsx
index 93bd21425a684..2fd5ced78aea1 100644
--- a/packages/design-system/icons/src/components/__tests__/folder-open.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/folder-open.spec.tsx
@@ -4,7 +4,7 @@
   import FolderOpen from "../folder-open"
 
   describe("FolderOpen", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<FolderOpen data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/folder.spec.tsx b/packages/design-system/icons/src/components/__tests__/folder.spec.tsx
index 0e77d5f4bd961..402890ac17e28 100644
--- a/packages/design-system/icons/src/components/__tests__/folder.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/folder.spec.tsx
@@ -4,7 +4,7 @@
   import Folder from "../folder"
 
   describe("Folder", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Folder data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/forward-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/forward-solid.spec.tsx
index 8e46b1fbb2d59..7e2946457cf1c 100644
--- a/packages/design-system/icons/src/components/__tests__/forward-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/forward-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ForwardSolid from "../forward-solid"
 
   describe("ForwardSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ForwardSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/funnel.spec.tsx b/packages/design-system/icons/src/components/__tests__/funnel.spec.tsx
index 70f940555145b..ef63d8059ddde 100644
--- a/packages/design-system/icons/src/components/__tests__/funnel.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/funnel.spec.tsx
@@ -4,7 +4,7 @@
   import Funnel from "../funnel"
 
   describe("Funnel", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Funnel data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/gatsby-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/gatsby-ex.spec.tsx
index 71bceea433ab1..bd4e72139608b 100644
--- a/packages/design-system/icons/src/components/__tests__/gatsby-ex.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/gatsby-ex.spec.tsx
@@ -4,7 +4,7 @@
   import GatsbyEx from "../gatsby-ex"
 
   describe("GatsbyEx", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<GatsbyEx data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/gatsby.spec.tsx b/packages/design-system/icons/src/components/__tests__/gatsby.spec.tsx
index fe48570b4a5a5..ae11e0b7547f2 100644
--- a/packages/design-system/icons/src/components/__tests__/gatsby.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/gatsby.spec.tsx
@@ -4,7 +4,7 @@
   import Gatsby from "../gatsby"
 
   describe("Gatsby", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Gatsby data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/gift-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/gift-solid.spec.tsx
index e97fec1853487..2e13e24154ac2 100644
--- a/packages/design-system/icons/src/components/__tests__/gift-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/gift-solid.spec.tsx
@@ -4,7 +4,7 @@
   import GiftSolid from "../gift-solid"
 
   describe("GiftSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<GiftSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/gift.spec.tsx b/packages/design-system/icons/src/components/__tests__/gift.spec.tsx
index a97887504cc2d..5208b04b8e6a7 100644
--- a/packages/design-system/icons/src/components/__tests__/gift.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/gift.spec.tsx
@@ -4,7 +4,7 @@
   import Gift from "../gift"
 
   describe("Gift", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Gift data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/github.spec.tsx b/packages/design-system/icons/src/components/__tests__/github.spec.tsx
index 1d6f68a14ab72..a05077ef71fb6 100644
--- a/packages/design-system/icons/src/components/__tests__/github.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/github.spec.tsx
@@ -4,7 +4,7 @@
   import Github from "../github"
 
   describe("Github", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Github data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/globe-europe-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/globe-europe-solid.spec.tsx
index 31567f4b5d49a..1fcf48b0ede04 100644
--- a/packages/design-system/icons/src/components/__tests__/globe-europe-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/globe-europe-solid.spec.tsx
@@ -4,7 +4,7 @@
   import GlobeEuropeSolid from "../globe-europe-solid"
 
   describe("GlobeEuropeSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<GlobeEuropeSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/globe-europe.spec.tsx b/packages/design-system/icons/src/components/__tests__/globe-europe.spec.tsx
index 510d1e4bfc765..04d888172e129 100644
--- a/packages/design-system/icons/src/components/__tests__/globe-europe.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/globe-europe.spec.tsx
@@ -4,7 +4,7 @@
   import GlobeEurope from "../globe-europe"
 
   describe("GlobeEurope", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<GlobeEurope data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/google.spec.tsx b/packages/design-system/icons/src/components/__tests__/google.spec.tsx
index 4a90ad4c7a44f..77ed51ae21839 100644
--- a/packages/design-system/icons/src/components/__tests__/google.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/google.spec.tsx
@@ -4,7 +4,7 @@
   import Google from "../google"
 
   describe("Google", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Google data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/hashtag.spec.tsx b/packages/design-system/icons/src/components/__tests__/hashtag.spec.tsx
index 3b484946b062a..20c48bae5bc30 100644
--- a/packages/design-system/icons/src/components/__tests__/hashtag.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/hashtag.spec.tsx
@@ -4,7 +4,7 @@
   import Hashtag from "../hashtag"
 
   describe("Hashtag", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Hashtag data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/heart.spec.tsx b/packages/design-system/icons/src/components/__tests__/heart.spec.tsx
index 64fe3a716f9de..596f18716348d 100644
--- a/packages/design-system/icons/src/components/__tests__/heart.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/heart.spec.tsx
@@ -4,7 +4,7 @@
   import Heart from "../heart"
 
   describe("Heart", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Heart data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/inbox-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/inbox-solid.spec.tsx
index 292719f98bc96..086ad25921d58 100644
--- a/packages/design-system/icons/src/components/__tests__/inbox-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/inbox-solid.spec.tsx
@@ -4,7 +4,7 @@
   import InboxSolid from "../inbox-solid"
 
   describe("InboxSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<InboxSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/information-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/information-circle-solid.spec.tsx
index 4fcdb8fd63608..1bb144a1b97fd 100644
--- a/packages/design-system/icons/src/components/__tests__/information-circle-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/information-circle-solid.spec.tsx
@@ -4,7 +4,7 @@
   import InformationCircleSolid from "../information-circle-solid"
 
   describe("InformationCircleSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<InformationCircleSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/information-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/information-circle.spec.tsx
index 4e1a927e348bf..596c826a54ac6 100644
--- a/packages/design-system/icons/src/components/__tests__/information-circle.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/information-circle.spec.tsx
@@ -4,7 +4,7 @@
   import InformationCircle from "../information-circle"
 
   describe("InformationCircle", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<InformationCircle data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/javascript-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/javascript-ex.spec.tsx
index 7397f3f347f82..d63a2f5f332ab 100644
--- a/packages/design-system/icons/src/components/__tests__/javascript-ex.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/javascript-ex.spec.tsx
@@ -4,7 +4,7 @@
   import JavascriptEx from "../javascript-ex"
 
   describe("JavascriptEx", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<JavascriptEx data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/javascript.spec.tsx b/packages/design-system/icons/src/components/__tests__/javascript.spec.tsx
index 264376216a8c4..fff64afca7b7a 100644
--- a/packages/design-system/icons/src/components/__tests__/javascript.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/javascript.spec.tsx
@@ -4,7 +4,7 @@
   import Javascript from "../javascript"
 
   describe("Javascript", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Javascript data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/key-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/key-solid.spec.tsx
index 43bdd1f1dffa7..0b5bb3d50d88b 100644
--- a/packages/design-system/icons/src/components/__tests__/key-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/key-solid.spec.tsx
@@ -4,7 +4,7 @@
   import KeySolid from "../key-solid"
 
   describe("KeySolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<KeySolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/key.spec.tsx b/packages/design-system/icons/src/components/__tests__/key.spec.tsx
index 8137673b6d4ef..42305c7371cbe 100644
--- a/packages/design-system/icons/src/components/__tests__/key.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/key.spec.tsx
@@ -4,7 +4,7 @@
   import Key from "../key"
 
   describe("Key", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Key data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/klarna-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/klarna-ex.spec.tsx
index 17399b83333bf..e967ca335e8ca 100644
--- a/packages/design-system/icons/src/components/__tests__/klarna-ex.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/klarna-ex.spec.tsx
@@ -4,7 +4,7 @@
   import KlarnaEx from "../klarna-ex"
 
   describe("KlarnaEx", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<KlarnaEx data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/klarna.spec.tsx b/packages/design-system/icons/src/components/__tests__/klarna.spec.tsx
index 6cbc5f0dc277d..64b5772c32e3b 100644
--- a/packages/design-system/icons/src/components/__tests__/klarna.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/klarna.spec.tsx
@@ -4,7 +4,7 @@
   import Klarna from "../klarna"
 
   describe("Klarna", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Klarna data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/klaviyo.spec.tsx b/packages/design-system/icons/src/components/__tests__/klaviyo.spec.tsx
new file mode 100644
index 0000000000000..b686e5c1dbc00
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/klaviyo.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Klaviyo from "../klaviyo"
+
+  describe("Klaviyo", () => {
+    it("should render the icon without errors", async () => {
+      render(<Klaviyo 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__/lifebuoy.spec.tsx b/packages/design-system/icons/src/components/__tests__/lifebuoy.spec.tsx
new file mode 100644
index 0000000000000..ba11215c3aaef
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/lifebuoy.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Lifebuoy from "../lifebuoy"
+
+  describe("Lifebuoy", () => {
+    it("should render the icon without errors", async () => {
+      render(<Lifebuoy 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__/light-bulb-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/light-bulb-solid.spec.tsx
index bbbc9b401bb92..7ac452fda058a 100644
--- a/packages/design-system/icons/src/components/__tests__/light-bulb-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/light-bulb-solid.spec.tsx
@@ -4,7 +4,7 @@
   import LightBulbSolid from "../light-bulb-solid"
 
   describe("LightBulbSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<LightBulbSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/light-bulb.spec.tsx b/packages/design-system/icons/src/components/__tests__/light-bulb.spec.tsx
index 7e1519d636a3a..3161f8c354e6d 100644
--- a/packages/design-system/icons/src/components/__tests__/light-bulb.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/light-bulb.spec.tsx
@@ -4,7 +4,7 @@
   import LightBulb from "../light-bulb"
 
   describe("LightBulb", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<LightBulb data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/link.spec.tsx b/packages/design-system/icons/src/components/__tests__/link.spec.tsx
index ce153b411dd02..8772e95d34ded 100644
--- a/packages/design-system/icons/src/components/__tests__/link.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/link.spec.tsx
@@ -4,7 +4,7 @@
   import Link from "../link"
 
   describe("Link", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Link data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/linkedin.spec.tsx b/packages/design-system/icons/src/components/__tests__/linkedin.spec.tsx
index b3d7fec0ec39d..508ee8b410078 100644
--- a/packages/design-system/icons/src/components/__tests__/linkedin.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/linkedin.spec.tsx
@@ -4,7 +4,7 @@
   import Linkedin from "../linkedin"
 
   describe("Linkedin", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Linkedin data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/list-bullet.spec.tsx b/packages/design-system/icons/src/components/__tests__/list-bullet.spec.tsx
index fbb0d9b786ec5..b746af2c2970f 100644
--- a/packages/design-system/icons/src/components/__tests__/list-bullet.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/list-bullet.spec.tsx
@@ -4,7 +4,7 @@
   import ListBullet from "../list-bullet"
 
   describe("ListBullet", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ListBullet data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/lock-closed-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/lock-closed-solid.spec.tsx
index 14d1694b60490..5d4d2a53126cd 100644
--- a/packages/design-system/icons/src/components/__tests__/lock-closed-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/lock-closed-solid.spec.tsx
@@ -4,7 +4,7 @@
   import LockClosedSolid from "../lock-closed-solid"
 
   describe("LockClosedSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<LockClosedSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/lock-open-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/lock-open-solid.spec.tsx
index c21da783aa47c..1a476f7c5bca1 100644
--- a/packages/design-system/icons/src/components/__tests__/lock-open-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/lock-open-solid.spec.tsx
@@ -4,7 +4,7 @@
   import LockOpenSolid from "../lock-open-solid"
 
   describe("LockOpenSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<LockOpenSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/magnifying-glass-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/magnifying-glass-mini.spec.tsx
index a446d3bb99bcd..fa9b86add9472 100644
--- a/packages/design-system/icons/src/components/__tests__/magnifying-glass-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/magnifying-glass-mini.spec.tsx
@@ -4,7 +4,7 @@
   import MagnifyingGlassMini from "../magnifying-glass-mini"
 
   describe("MagnifyingGlassMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<MagnifyingGlassMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/magnifying-glass.spec.tsx b/packages/design-system/icons/src/components/__tests__/magnifying-glass.spec.tsx
index 5e75279292348..69d3a094d01db 100644
--- a/packages/design-system/icons/src/components/__tests__/magnifying-glass.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/magnifying-glass.spec.tsx
@@ -4,7 +4,7 @@
   import MagnifyingGlass from "../magnifying-glass"
 
   describe("MagnifyingGlass", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<MagnifyingGlass data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/map-pin.spec.tsx b/packages/design-system/icons/src/components/__tests__/map-pin.spec.tsx
index 4ee98f0c9500b..6a1d50f6c31cd 100644
--- a/packages/design-system/icons/src/components/__tests__/map-pin.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/map-pin.spec.tsx
@@ -4,7 +4,7 @@
   import MapPin from "../map-pin"
 
   describe("MapPin", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<MapPin data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/map.spec.tsx b/packages/design-system/icons/src/components/__tests__/map.spec.tsx
index 244376853de27..21e3b49efe517 100644
--- a/packages/design-system/icons/src/components/__tests__/map.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/map.spec.tsx
@@ -4,7 +4,7 @@
   import Map from "../map"
 
   describe("Map", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Map data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/mastercard.spec.tsx b/packages/design-system/icons/src/components/__tests__/mastercard.spec.tsx
new file mode 100644
index 0000000000000..96aa3b35e851e
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/mastercard.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Mastercard from "../mastercard"
+
+  describe("Mastercard", () => {
+    it("should render the icon without errors", async () => {
+      render(<Mastercard 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__/medusa.spec.tsx b/packages/design-system/icons/src/components/__tests__/medusa.spec.tsx
index 95e343ad3b00e..123821dc38d31 100644
--- a/packages/design-system/icons/src/components/__tests__/medusa.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/medusa.spec.tsx
@@ -4,7 +4,7 @@
   import Medusa from "../medusa"
 
   describe("Medusa", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Medusa data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/meta.spec.tsx b/packages/design-system/icons/src/components/__tests__/meta.spec.tsx
new file mode 100644
index 0000000000000..1c7bfe11c2a17
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/meta.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Meta from "../meta"
+
+  describe("Meta", () => {
+    it("should render the icon without errors", async () => {
+      render(<Meta 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__/minus-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/minus-mini.spec.tsx
index 1c550045e43b7..35db5a904889d 100644
--- a/packages/design-system/icons/src/components/__tests__/minus-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/minus-mini.spec.tsx
@@ -4,7 +4,7 @@
   import MinusMini from "../minus-mini"
 
   describe("MinusMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<MinusMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/minus.spec.tsx b/packages/design-system/icons/src/components/__tests__/minus.spec.tsx
index 336e73deb9b24..c07f0a777cf28 100644
--- a/packages/design-system/icons/src/components/__tests__/minus.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/minus.spec.tsx
@@ -4,7 +4,7 @@
   import Minus from "../minus"
 
   describe("Minus", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Minus data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/moon-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/moon-solid.spec.tsx
index 572f52183f8aa..dfe317ab9b5dd 100644
--- a/packages/design-system/icons/src/components/__tests__/moon-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/moon-solid.spec.tsx
@@ -4,7 +4,7 @@
   import MoonSolid from "../moon-solid"
 
   describe("MoonSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<MoonSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/moon.spec.tsx b/packages/design-system/icons/src/components/__tests__/moon.spec.tsx
index 4818a01b83681..de5fe53bf2258 100644
--- a/packages/design-system/icons/src/components/__tests__/moon.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/moon.spec.tsx
@@ -4,7 +4,7 @@
   import Moon from "../moon"
 
   describe("Moon", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Moon data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/newspaper.spec.tsx b/packages/design-system/icons/src/components/__tests__/newspaper.spec.tsx
index 9065e390f0afa..9b39e6fad1497 100644
--- a/packages/design-system/icons/src/components/__tests__/newspaper.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/newspaper.spec.tsx
@@ -4,7 +4,7 @@
   import Newspaper from "../newspaper"
 
   describe("Newspaper", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Newspaper data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/next-js.spec.tsx b/packages/design-system/icons/src/components/__tests__/next-js.spec.tsx
index 3297a5d2f876e..2c39501b82cf1 100644
--- a/packages/design-system/icons/src/components/__tests__/next-js.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/next-js.spec.tsx
@@ -4,7 +4,7 @@
   import NextJs from "../next-js"
 
   describe("NextJs", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<NextJs data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/paper-clip.spec.tsx b/packages/design-system/icons/src/components/__tests__/paper-clip.spec.tsx
index ad96afb788b07..d26bf6ecba3e1 100644
--- a/packages/design-system/icons/src/components/__tests__/paper-clip.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/paper-clip.spec.tsx
@@ -4,7 +4,7 @@
   import PaperClip from "../paper-clip"
 
   describe("PaperClip", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PaperClip data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/pause-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/pause-solid.spec.tsx
index 0d45043856c9b..3b32ee158f8cb 100644
--- a/packages/design-system/icons/src/components/__tests__/pause-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/pause-solid.spec.tsx
@@ -4,7 +4,7 @@
   import PauseSolid from "../pause-solid"
 
   describe("PauseSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PauseSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/pencil-square-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/pencil-square-solid.spec.tsx
index cf3d817b6bfa9..e52f52e32f389 100644
--- a/packages/design-system/icons/src/components/__tests__/pencil-square-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/pencil-square-solid.spec.tsx
@@ -4,7 +4,7 @@
   import PencilSquareSolid from "../pencil-square-solid"
 
   describe("PencilSquareSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PencilSquareSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/pencil-square.spec.tsx b/packages/design-system/icons/src/components/__tests__/pencil-square.spec.tsx
index d355a78f877af..4666b44322bef 100644
--- a/packages/design-system/icons/src/components/__tests__/pencil-square.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/pencil-square.spec.tsx
@@ -4,7 +4,7 @@
   import PencilSquare from "../pencil-square"
 
   describe("PencilSquare", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PencilSquare data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/pencil.spec.tsx b/packages/design-system/icons/src/components/__tests__/pencil.spec.tsx
index 49eac38d97ff8..05cc1a9009bc4 100644
--- a/packages/design-system/icons/src/components/__tests__/pencil.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/pencil.spec.tsx
@@ -4,7 +4,7 @@
   import Pencil from "../pencil"
 
   describe("Pencil", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Pencil data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/phone.spec.tsx b/packages/design-system/icons/src/components/__tests__/phone.spec.tsx
index 073f98d1a20c2..a0217e4b2a120 100644
--- a/packages/design-system/icons/src/components/__tests__/phone.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/phone.spec.tsx
@@ -4,7 +4,7 @@
   import Phone from "../phone"
 
   describe("Phone", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Phone data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/photo-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/photo-solid.spec.tsx
index 001a381d103a6..0743f491ad980 100644
--- a/packages/design-system/icons/src/components/__tests__/photo-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/photo-solid.spec.tsx
@@ -4,7 +4,7 @@
   import PhotoSolid from "../photo-solid"
 
   describe("PhotoSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PhotoSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/photo.spec.tsx b/packages/design-system/icons/src/components/__tests__/photo.spec.tsx
index 2e8c5b1658ab5..01ccba292ecb8 100644
--- a/packages/design-system/icons/src/components/__tests__/photo.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/photo.spec.tsx
@@ -4,7 +4,7 @@
   import Photo from "../photo"
 
   describe("Photo", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Photo data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/play-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/play-mini-solid.spec.tsx
index f6bc5aa9d28d0..2400b8b53264c 100644
--- a/packages/design-system/icons/src/components/__tests__/play-mini-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/play-mini-solid.spec.tsx
@@ -4,7 +4,7 @@
   import PlayMiniSolid from "../play-mini-solid"
 
   describe("PlayMiniSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PlayMiniSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/play-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/play-solid.spec.tsx
index 0828166513081..9e96972a79537 100644
--- a/packages/design-system/icons/src/components/__tests__/play-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/play-solid.spec.tsx
@@ -4,7 +4,7 @@
   import PlaySolid from "../play-solid"
 
   describe("PlaySolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PlaySolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/plus-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/plus-mini.spec.tsx
index 1617f6f5bb0d1..33c9a86783669 100644
--- a/packages/design-system/icons/src/components/__tests__/plus-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/plus-mini.spec.tsx
@@ -4,7 +4,7 @@
   import PlusMini from "../plus-mini"
 
   describe("PlusMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PlusMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/plus.spec.tsx b/packages/design-system/icons/src/components/__tests__/plus.spec.tsx
index 2e73169ac7ca6..3cccd6d364386 100644
--- a/packages/design-system/icons/src/components/__tests__/plus.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/plus.spec.tsx
@@ -4,7 +4,7 @@
   import Plus from "../plus"
 
   describe("Plus", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Plus data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/puzzle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/puzzle-solid.spec.tsx
index e5c5aed663523..64f82f440f479 100644
--- a/packages/design-system/icons/src/components/__tests__/puzzle-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/puzzle-solid.spec.tsx
@@ -4,7 +4,7 @@
   import PuzzleSolid from "../puzzle-solid"
 
   describe("PuzzleSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<PuzzleSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/puzzle.spec.tsx b/packages/design-system/icons/src/components/__tests__/puzzle.spec.tsx
index 2ff99f5d31197..8a42b9eeb4256 100644
--- a/packages/design-system/icons/src/components/__tests__/puzzle.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/puzzle.spec.tsx
@@ -4,7 +4,7 @@
   import Puzzle from "../puzzle"
 
   describe("Puzzle", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Puzzle data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/question-mark-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/question-mark-circle.spec.tsx
index a6fe2db92466b..44ace7b8b22c9 100644
--- a/packages/design-system/icons/src/components/__tests__/question-mark-circle.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/question-mark-circle.spec.tsx
@@ -4,7 +4,7 @@
   import QuestionMarkCircle from "../question-mark-circle"
 
   describe("QuestionMarkCircle", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<QuestionMarkCircle data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/question-mark.spec.tsx b/packages/design-system/icons/src/components/__tests__/question-mark.spec.tsx
index a599ffa9866f1..39b1c2bbd5337 100644
--- a/packages/design-system/icons/src/components/__tests__/question-mark.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/question-mark.spec.tsx
@@ -4,7 +4,7 @@
   import QuestionMark from "../question-mark"
 
   describe("QuestionMark", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<QuestionMark data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/react-js-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/react-js-ex.spec.tsx
index 5e013275d816b..ca7e21a8c0a3f 100644
--- a/packages/design-system/icons/src/components/__tests__/react-js-ex.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/react-js-ex.spec.tsx
@@ -4,7 +4,7 @@
   import ReactJsEx from "../react-js-ex"
 
   describe("ReactJsEx", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ReactJsEx data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/react-js.spec.tsx b/packages/design-system/icons/src/components/__tests__/react-js.spec.tsx
index 1c32718836553..eb36074defd4f 100644
--- a/packages/design-system/icons/src/components/__tests__/react-js.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/react-js.spec.tsx
@@ -4,7 +4,7 @@
   import ReactJs from "../react-js"
 
   describe("ReactJs", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ReactJs data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/receipt-percent.spec.tsx b/packages/design-system/icons/src/components/__tests__/receipt-percent.spec.tsx
index a90a0d70b7682..97eb1ed977f35 100644
--- a/packages/design-system/icons/src/components/__tests__/receipt-percent.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/receipt-percent.spec.tsx
@@ -4,7 +4,7 @@
   import ReceiptPercent from "../receipt-percent"
 
   describe("ReceiptPercent", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ReceiptPercent data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/replay-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/replay-solid.spec.tsx
index d3affbd7a90c6..f6894ed67dcbd 100644
--- a/packages/design-system/icons/src/components/__tests__/replay-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/replay-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ReplaySolid from "../replay-solid"
 
   describe("ReplaySolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ReplaySolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/resize.spec.tsx b/packages/design-system/icons/src/components/__tests__/resize.spec.tsx
index cd9249b704585..33eff39e56ebb 100644
--- a/packages/design-system/icons/src/components/__tests__/resize.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/resize.spec.tsx
@@ -4,7 +4,7 @@
   import Resize from "../resize"
 
   describe("Resize", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Resize data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/rocket-launch-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/rocket-launch-solid.spec.tsx
index e55ae78218311..fc4a8d235842f 100644
--- a/packages/design-system/icons/src/components/__tests__/rocket-launch-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/rocket-launch-solid.spec.tsx
@@ -4,7 +4,7 @@
   import RocketLaunchSolid from "../rocket-launch-solid"
 
   describe("RocketLaunchSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<RocketLaunchSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/rocket-launch.spec.tsx b/packages/design-system/icons/src/components/__tests__/rocket-launch.spec.tsx
index b32f1c048bae5..ee1db403f636b 100644
--- a/packages/design-system/icons/src/components/__tests__/rocket-launch.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/rocket-launch.spec.tsx
@@ -4,7 +4,7 @@
   import RocketLaunch from "../rocket-launch"
 
   describe("RocketLaunch", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<RocketLaunch data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/rss.spec.tsx b/packages/design-system/icons/src/components/__tests__/rss.spec.tsx
index 6e429f1bb136f..c84f5d9af4a42 100644
--- a/packages/design-system/icons/src/components/__tests__/rss.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/rss.spec.tsx
@@ -4,7 +4,7 @@
   import Rss from "../rss"
 
   describe("Rss", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Rss data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/sanity.spec.tsx b/packages/design-system/icons/src/components/__tests__/sanity.spec.tsx
new file mode 100644
index 0000000000000..3e113a7179da8
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/sanity.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Sanity from "../sanity"
+
+  describe("Sanity", () => {
+    it("should render the icon without errors", async () => {
+      render(<Sanity 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__/server-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/server-solid.spec.tsx
index d9b44b3994580..8e76d7221dc5f 100644
--- a/packages/design-system/icons/src/components/__tests__/server-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/server-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ServerSolid from "../server-solid"
 
   describe("ServerSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ServerSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/server-stack-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/server-stack-solid.spec.tsx
index 46ef17f8e522e..840bca5cf8086 100644
--- a/packages/design-system/icons/src/components/__tests__/server-stack-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/server-stack-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ServerStackSolid from "../server-stack-solid"
 
   describe("ServerStackSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ServerStackSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/server-stack.spec.tsx b/packages/design-system/icons/src/components/__tests__/server-stack.spec.tsx
index e246b91bb9056..1ce8301edbf79 100644
--- a/packages/design-system/icons/src/components/__tests__/server-stack.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/server-stack.spec.tsx
@@ -4,7 +4,7 @@
   import ServerStack from "../server-stack"
 
   describe("ServerStack", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ServerStack data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/server.spec.tsx b/packages/design-system/icons/src/components/__tests__/server.spec.tsx
index f66d614c446e2..55c3790498162 100644
--- a/packages/design-system/icons/src/components/__tests__/server.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/server.spec.tsx
@@ -4,7 +4,7 @@
   import Server from "../server"
 
   describe("Server", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Server data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/shopping-bag.spec.tsx b/packages/design-system/icons/src/components/__tests__/shopping-bag.spec.tsx
index b276fdde0e844..ce9d6c0a2409e 100644
--- a/packages/design-system/icons/src/components/__tests__/shopping-bag.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/shopping-bag.spec.tsx
@@ -4,7 +4,7 @@
   import ShoppingBag from "../shopping-bag"
 
   describe("ShoppingBag", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ShoppingBag data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/shopping-cart-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/shopping-cart-solid.spec.tsx
index 95a13eb9859e1..bc27ba6726aba 100644
--- a/packages/design-system/icons/src/components/__tests__/shopping-cart-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/shopping-cart-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ShoppingCartSolid from "../shopping-cart-solid"
 
   describe("ShoppingCartSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ShoppingCartSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/shopping-cart.spec.tsx b/packages/design-system/icons/src/components/__tests__/shopping-cart.spec.tsx
index 20ec520aecc32..309b5195f13cf 100644
--- a/packages/design-system/icons/src/components/__tests__/shopping-cart.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/shopping-cart.spec.tsx
@@ -4,7 +4,7 @@
   import ShoppingCart from "../shopping-cart"
 
   describe("ShoppingCart", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ShoppingCart data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/sidebar.spec.tsx b/packages/design-system/icons/src/components/__tests__/sidebar.spec.tsx
index c61caae767597..c2476afdc33a0 100644
--- a/packages/design-system/icons/src/components/__tests__/sidebar.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/sidebar.spec.tsx
@@ -4,7 +4,7 @@
   import Sidebar from "../sidebar"
 
   describe("Sidebar", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Sidebar data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/slack.spec.tsx b/packages/design-system/icons/src/components/__tests__/slack.spec.tsx
index ecf208e3acfee..dfd3e35ab1364 100644
--- a/packages/design-system/icons/src/components/__tests__/slack.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/slack.spec.tsx
@@ -4,7 +4,7 @@
   import Slack from "../slack"
 
   describe("Slack", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Slack data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/snooze.spec.tsx b/packages/design-system/icons/src/components/__tests__/snooze.spec.tsx
index 1fad3a8dd6269..5adad45470579 100644
--- a/packages/design-system/icons/src/components/__tests__/snooze.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/snooze.spec.tsx
@@ -4,7 +4,7 @@
   import Snooze from "../snooze"
 
   describe("Snooze", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Snooze data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/sparkles-mini-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/sparkles-mini-solid.spec.tsx
index e7095c2f7be83..5ec0c6521b0e9 100644
--- a/packages/design-system/icons/src/components/__tests__/sparkles-mini-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/sparkles-mini-solid.spec.tsx
@@ -4,7 +4,7 @@
   import SparklesMiniSolid from "../sparkles-mini-solid"
 
   describe("SparklesMiniSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SparklesMiniSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/sparkles-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/sparkles-mini.spec.tsx
index f0b7479558b19..4ce3078acb690 100644
--- a/packages/design-system/icons/src/components/__tests__/sparkles-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/sparkles-mini.spec.tsx
@@ -4,7 +4,7 @@
   import SparklesMini from "../sparkles-mini"
 
   describe("SparklesMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SparklesMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/sparkles-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/sparkles-solid.spec.tsx
index f4de02b87fe4d..2074f527403ac 100644
--- a/packages/design-system/icons/src/components/__tests__/sparkles-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/sparkles-solid.spec.tsx
@@ -4,7 +4,7 @@
   import SparklesSolid from "../sparkles-solid"
 
   describe("SparklesSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SparklesSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/sparkles.spec.tsx b/packages/design-system/icons/src/components/__tests__/sparkles.spec.tsx
index 3f257a96adcee..af31b15e7cec3 100644
--- a/packages/design-system/icons/src/components/__tests__/sparkles.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/sparkles.spec.tsx
@@ -4,7 +4,7 @@
   import Sparkles from "../sparkles"
 
   describe("Sparkles", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Sparkles data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/spinner.spec.tsx b/packages/design-system/icons/src/components/__tests__/spinner.spec.tsx
index 0f588f840b188..8f2e1c17d179d 100644
--- a/packages/design-system/icons/src/components/__tests__/spinner.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/spinner.spec.tsx
@@ -4,7 +4,7 @@
   import Spinner from "../spinner"
 
   describe("Spinner", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Spinner data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/square-two-stack-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/square-two-stack-mini.spec.tsx
index 142d539a4cc9c..ab61127d19ef3 100644
--- a/packages/design-system/icons/src/components/__tests__/square-two-stack-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/square-two-stack-mini.spec.tsx
@@ -4,7 +4,7 @@
   import SquareTwoStackMini from "../square-two-stack-mini"
 
   describe("SquareTwoStackMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SquareTwoStackMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/square-two-stack-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/square-two-stack-solid.spec.tsx
index 97ad1278bd84d..a3d6ab1908cf0 100644
--- a/packages/design-system/icons/src/components/__tests__/square-two-stack-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/square-two-stack-solid.spec.tsx
@@ -4,7 +4,7 @@
   import SquareTwoStackSolid from "../square-two-stack-solid"
 
   describe("SquareTwoStackSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SquareTwoStackSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/square-two-stack.spec.tsx b/packages/design-system/icons/src/components/__tests__/square-two-stack.spec.tsx
index b01ecc2a7b17d..aefda6ddde716 100644
--- a/packages/design-system/icons/src/components/__tests__/square-two-stack.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/square-two-stack.spec.tsx
@@ -4,7 +4,7 @@
   import SquareTwoStack from "../square-two-stack"
 
   describe("SquareTwoStack", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SquareTwoStack data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/squares-plus-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/squares-plus-solid.spec.tsx
index 163200290e02b..d443b48023751 100644
--- a/packages/design-system/icons/src/components/__tests__/squares-plus-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/squares-plus-solid.spec.tsx
@@ -4,7 +4,7 @@
   import SquaresPlusSolid from "../squares-plus-solid"
 
   describe("SquaresPlusSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SquaresPlusSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/squares-plus.spec.tsx b/packages/design-system/icons/src/components/__tests__/squares-plus.spec.tsx
index 65fb312b749ef..be5638f9e324f 100644
--- a/packages/design-system/icons/src/components/__tests__/squares-plus.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/squares-plus.spec.tsx
@@ -4,7 +4,7 @@
   import SquaresPlus from "../squares-plus"
 
   describe("SquaresPlus", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SquaresPlus data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/star-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/star-solid.spec.tsx
index 5f436dd579bdf..7c15799ff43f8 100644
--- a/packages/design-system/icons/src/components/__tests__/star-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/star-solid.spec.tsx
@@ -4,7 +4,7 @@
   import StarSolid from "../star-solid"
 
   describe("StarSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<StarSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/star.spec.tsx b/packages/design-system/icons/src/components/__tests__/star.spec.tsx
index 67c450f53bb13..d9eb29fe99874 100644
--- a/packages/design-system/icons/src/components/__tests__/star.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/star.spec.tsx
@@ -4,7 +4,7 @@
   import Star from "../star"
 
   describe("Star", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Star data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/stripe.spec.tsx b/packages/design-system/icons/src/components/__tests__/stripe.spec.tsx
index 8a91494de3148..dc0fd57403930 100644
--- a/packages/design-system/icons/src/components/__tests__/stripe.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/stripe.spec.tsx
@@ -4,7 +4,7 @@
   import Stripe from "../stripe"
 
   describe("Stripe", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Stripe data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/sun-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/sun-solid.spec.tsx
index 1c15be1eb726d..d59e00ee7f419 100644
--- a/packages/design-system/icons/src/components/__tests__/sun-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/sun-solid.spec.tsx
@@ -4,7 +4,7 @@
   import SunSolid from "../sun-solid"
 
   describe("SunSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SunSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/sun.spec.tsx b/packages/design-system/icons/src/components/__tests__/sun.spec.tsx
index 6b12df6330b17..c07bad35e1292 100644
--- a/packages/design-system/icons/src/components/__tests__/sun.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/sun.spec.tsx
@@ -4,7 +4,7 @@
   import Sun from "../sun"
 
   describe("Sun", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Sun data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/swatch-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/swatch-solid.spec.tsx
index 3750fecd99faa..6daeabf9206e6 100644
--- a/packages/design-system/icons/src/components/__tests__/swatch-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/swatch-solid.spec.tsx
@@ -4,7 +4,7 @@
   import SwatchSolid from "../swatch-solid"
 
   describe("SwatchSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<SwatchSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/swatch.spec.tsx b/packages/design-system/icons/src/components/__tests__/swatch.spec.tsx
index 51943c5f00696..20b9f84537e12 100644
--- a/packages/design-system/icons/src/components/__tests__/swatch.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/swatch.spec.tsx
@@ -4,7 +4,7 @@
   import Swatch from "../swatch"
 
   describe("Swatch", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Swatch data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/tag-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/tag-solid.spec.tsx
index 63a15ae853ea1..5e61aa533f5de 100644
--- a/packages/design-system/icons/src/components/__tests__/tag-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/tag-solid.spec.tsx
@@ -4,7 +4,7 @@
   import TagSolid from "../tag-solid"
 
   describe("TagSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<TagSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/tag.spec.tsx b/packages/design-system/icons/src/components/__tests__/tag.spec.tsx
index bd7dbb4a859e6..c0aab1585bb71 100644
--- a/packages/design-system/icons/src/components/__tests__/tag.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/tag.spec.tsx
@@ -4,7 +4,7 @@
   import Tag from "../tag"
 
   describe("Tag", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Tag data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/tailwind.spec.tsx b/packages/design-system/icons/src/components/__tests__/tailwind.spec.tsx
index 19cd0571368a2..e35bd73fd166e 100644
--- a/packages/design-system/icons/src/components/__tests__/tailwind.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/tailwind.spec.tsx
@@ -4,7 +4,7 @@
   import Tailwind from "../tailwind"
 
   describe("Tailwind", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Tailwind data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/text.spec.tsx b/packages/design-system/icons/src/components/__tests__/text.spec.tsx
index f1f1b450b30fa..638ef915a4242 100644
--- a/packages/design-system/icons/src/components/__tests__/text.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/text.spec.tsx
@@ -4,7 +4,7 @@
   import Text from "../text"
 
   describe("Text", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Text data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/thumb-down.spec.tsx b/packages/design-system/icons/src/components/__tests__/thumb-down.spec.tsx
index e089f59b1eb8c..045a3ab450625 100644
--- a/packages/design-system/icons/src/components/__tests__/thumb-down.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/thumb-down.spec.tsx
@@ -4,7 +4,7 @@
   import ThumbDown from "../thumb-down"
 
   describe("ThumbDown", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ThumbDown data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/thumb-up.spec.tsx b/packages/design-system/icons/src/components/__tests__/thumb-up.spec.tsx
index 80b38623507cc..c12645e38b5bd 100644
--- a/packages/design-system/icons/src/components/__tests__/thumb-up.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/thumb-up.spec.tsx
@@ -4,7 +4,7 @@
   import ThumbUp from "../thumb-up"
 
   describe("ThumbUp", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ThumbUp data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/tools-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/tools-solid.spec.tsx
index e04e0cc6cd42d..67efc469d942f 100644
--- a/packages/design-system/icons/src/components/__tests__/tools-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/tools-solid.spec.tsx
@@ -4,7 +4,7 @@
   import ToolsSolid from "../tools-solid"
 
   describe("ToolsSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<ToolsSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/tools.spec.tsx b/packages/design-system/icons/src/components/__tests__/tools.spec.tsx
index 2c4533efda9dd..98d85ca06d4ac 100644
--- a/packages/design-system/icons/src/components/__tests__/tools.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/tools.spec.tsx
@@ -4,7 +4,7 @@
   import Tools from "../tools"
 
   describe("Tools", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Tools data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/trash.spec.tsx b/packages/design-system/icons/src/components/__tests__/trash.spec.tsx
index 461fb5cda70c4..75c469ddfd52f 100644
--- a/packages/design-system/icons/src/components/__tests__/trash.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/trash.spec.tsx
@@ -4,7 +4,7 @@
   import Trash from "../trash"
 
   describe("Trash", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Trash data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/triangle-down-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/triangle-down-mini.spec.tsx
index f34ebcb9ad609..cb814b3e52586 100644
--- a/packages/design-system/icons/src/components/__tests__/triangle-down-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/triangle-down-mini.spec.tsx
@@ -4,7 +4,7 @@
   import TriangleDownMini from "../triangle-down-mini"
 
   describe("TriangleDownMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<TriangleDownMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/triangle-right-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/triangle-right-mini.spec.tsx
index 499c0b227dd68..6dcfd971c0e8a 100644
--- a/packages/design-system/icons/src/components/__tests__/triangle-right-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/triangle-right-mini.spec.tsx
@@ -4,7 +4,7 @@
   import TriangleRightMini from "../triangle-right-mini"
 
   describe("TriangleRightMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<TriangleRightMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/twitter.spec.tsx b/packages/design-system/icons/src/components/__tests__/twitter.spec.tsx
index a7623820393c8..da805c4673517 100644
--- a/packages/design-system/icons/src/components/__tests__/twitter.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/twitter.spec.tsx
@@ -4,7 +4,7 @@
   import Twitter from "../twitter"
 
   describe("Twitter", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Twitter data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/typescript-ex.spec.tsx b/packages/design-system/icons/src/components/__tests__/typescript-ex.spec.tsx
index a30e6453178d2..dd3d2b3982b86 100644
--- a/packages/design-system/icons/src/components/__tests__/typescript-ex.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/typescript-ex.spec.tsx
@@ -4,7 +4,7 @@
   import TypescriptEx from "../typescript-ex"
 
   describe("TypescriptEx", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<TypescriptEx data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/typescript.spec.tsx b/packages/design-system/icons/src/components/__tests__/typescript.spec.tsx
index 3ca38fe2d89a5..d7170aa57d15e 100644
--- a/packages/design-system/icons/src/components/__tests__/typescript.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/typescript.spec.tsx
@@ -4,7 +4,7 @@
   import Typescript from "../typescript"
 
   describe("Typescript", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Typescript data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/user-circle-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/user-circle-mini.spec.tsx
index 73bcfd1d9a870..5beab8b5bf7d3 100644
--- a/packages/design-system/icons/src/components/__tests__/user-circle-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/user-circle-mini.spec.tsx
@@ -4,7 +4,7 @@
   import UserCircleMini from "../user-circle-mini"
 
   describe("UserCircleMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<UserCircleMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/user-group.spec.tsx b/packages/design-system/icons/src/components/__tests__/user-group.spec.tsx
index 1a39be05fe83f..16834db443f8c 100644
--- a/packages/design-system/icons/src/components/__tests__/user-group.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/user-group.spec.tsx
@@ -4,7 +4,7 @@
   import UserGroup from "../user-group"
 
   describe("UserGroup", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<UserGroup data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/user.spec.tsx b/packages/design-system/icons/src/components/__tests__/user.spec.tsx
index a1d6def039346..284254f15548d 100644
--- a/packages/design-system/icons/src/components/__tests__/user.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/user.spec.tsx
@@ -4,7 +4,7 @@
   import User from "../user"
 
   describe("User", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<User data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/users-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/users-solid.spec.tsx
index f20d5b3b93424..38be9b738d8b1 100644
--- a/packages/design-system/icons/src/components/__tests__/users-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/users-solid.spec.tsx
@@ -4,7 +4,7 @@
   import UsersSolid from "../users-solid"
 
   describe("UsersSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<UsersSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/users.spec.tsx b/packages/design-system/icons/src/components/__tests__/users.spec.tsx
index 962581e9e5193..0f3c4a04e22de 100644
--- a/packages/design-system/icons/src/components/__tests__/users.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/users.spec.tsx
@@ -4,7 +4,7 @@
   import Users from "../users"
 
   describe("Users", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Users data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/vercel.spec.tsx b/packages/design-system/icons/src/components/__tests__/vercel.spec.tsx
index 389a7a003a9db..017602e0b2da3 100644
--- a/packages/design-system/icons/src/components/__tests__/vercel.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/vercel.spec.tsx
@@ -4,7 +4,7 @@
   import Vercel from "../vercel"
 
   describe("Vercel", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Vercel data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/visa.spec.tsx b/packages/design-system/icons/src/components/__tests__/visa.spec.tsx
new file mode 100644
index 0000000000000..2cec7e2730fef
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/visa.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Visa from "../visa"
+
+  describe("Visa", () => {
+    it("should render the icon without errors", async () => {
+      render(<Visa 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__/window.spec.tsx b/packages/design-system/icons/src/components/__tests__/window.spec.tsx
index efd175027091a..2335bdbe059a3 100644
--- a/packages/design-system/icons/src/components/__tests__/window.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/window.spec.tsx
@@ -4,7 +4,7 @@
   import Window from "../window"
 
   describe("Window", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<Window data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/x-circle-solid.spec.tsx b/packages/design-system/icons/src/components/__tests__/x-circle-solid.spec.tsx
index b5721ad97bba6..21e805932694b 100644
--- a/packages/design-system/icons/src/components/__tests__/x-circle-solid.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/x-circle-solid.spec.tsx
@@ -4,7 +4,7 @@
   import XCircleSolid from "../x-circle-solid"
 
   describe("XCircleSolid", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<XCircleSolid data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/x-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/x-circle.spec.tsx
new file mode 100644
index 0000000000000..dcd4e0d99d092
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/x-circle.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import XCircle from "../x-circle"
+
+  describe("XCircle", () => {
+    it("should render the icon without errors", async () => {
+      render(<XCircle 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__/x-mark-mini.spec.tsx b/packages/design-system/icons/src/components/__tests__/x-mark-mini.spec.tsx
index acafddb31997d..07306dddb1421 100644
--- a/packages/design-system/icons/src/components/__tests__/x-mark-mini.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/x-mark-mini.spec.tsx
@@ -4,7 +4,7 @@
   import XMarkMini from "../x-mark-mini"
 
   describe("XMarkMini", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<XMarkMini data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/x-mark.spec.tsx b/packages/design-system/icons/src/components/__tests__/x-mark.spec.tsx
index 07566667ad3cb..eb8024a26c161 100644
--- a/packages/design-system/icons/src/components/__tests__/x-mark.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/x-mark.spec.tsx
@@ -4,7 +4,7 @@
   import XMark from "../x-mark"
 
   describe("XMark", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<XMark data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/__tests__/x.spec.tsx b/packages/design-system/icons/src/components/__tests__/x.spec.tsx
index c51b935f8b09d..5654d1095f42e 100644
--- a/packages/design-system/icons/src/components/__tests__/x.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/x.spec.tsx
@@ -4,7 +4,7 @@
   import X from "../x"
 
   describe("X", () => {
-    it("should render without crashing", async () => {
+    it("should render the icon without errors", async () => {
       render(<X data-testid="icon" />)
 
 
diff --git a/packages/design-system/icons/src/components/beaker.tsx b/packages/design-system/icons/src/components/beaker.tsx
new file mode 100644
index 0000000000000..4345e712899ea
--- /dev/null
+++ b/packages/design-system/icons/src/components/beaker.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Beaker = 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
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.25}
+          d="M8.125 2.587v4.761a1.875 1.875 0 0 1-.55 1.326l-3.408 3.41m3.958-9.498c-.21.02-.418.042-.625.069m.625-.068a20.252 20.252 0 0 1 3.75 0m-7.708 9.496.641-.16A7.554 7.554 0 0 1 10 12.5a7.554 7.554 0 0 0 5.192.577l1.308-.327m-12.333-.667L2.332 13.92c-1.028 1.026-.543 2.764.889 3.008 2.203.377 4.468.573 6.779.573 2.272 0 4.54-.19 6.78-.573 1.43-.244 1.915-1.982.888-3.009L16.5 12.75M11.875 2.587v4.761c0 .498.197.975.55 1.326L16.5 12.75M11.875 2.587c.21.019.418.041.625.068"
+        />
+      </svg>
+    )
+  }
+)
+Beaker.displayName = "Beaker"
+export default Beaker
diff --git a/packages/design-system/icons/src/components/building-tax.tsx b/packages/design-system/icons/src/components/building-tax.tsx
index a3cff446d15ff..6fe45b8f2d71d 100644
--- a/packages/design-system/icons/src/components/building-tax.tsx
+++ b/packages/design-system/icons/src/components/building-tax.tsx
@@ -12,29 +12,8 @@ const BuildingTax = React.forwardRef<SVGSVGElement, IconProps>(
         {...props}
       >
         <path
-          stroke={color}
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M17.5 7.5h-15V5.833L10 2.5l7.5 3.333V7.5Z"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M8.333 16.667H2.5l.73-2.5h5.103"
-        />
-        <path
-          stroke={color}
-          strokeWidth={1.5}
-          d="M4.167 7.5v6.667m3.333 0V7.5"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="m17.135 11.198-5.104 5.104M12.292 12.083a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25ZM16.875 16.667a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25Z"
+          fill={color}
+          d="M2.5 7.5h-.75c0 .414.336.75.75.75V7.5Zm15 0v.75a.75.75 0 0 0 .75-.75h-.75Zm0-1.667h.75a.75.75 0 0 0-.445-.685l-.305.685ZM10 2.5l.305-.685a.75.75 0 0 0-.61 0L10 2.5ZM2.5 5.833l-.305-.685a.75.75 0 0 0-.445.685h.75Zm5.833 11.584a.75.75 0 0 0 0-1.5v1.5Zm-5.833-.75-.72-.21a.75.75 0 0 0 .72.96v-.75Zm.73-2.5v-.75a.75.75 0 0 0-.72.54l.72.21Zm5.103.75a.75.75 0 0 0 0-1.5v1.5Zm9.333-3.189a.75.75 0 1 0-1.06-1.06l1.06 1.06ZM11.5 15.772a.75.75 0 1 0 1.06 1.06l-1.06-1.06ZM2.5 8.25h15v-1.5h-15v1.5Zm15.75-.75V5.833h-1.5V7.5h1.5Zm-.445-2.352-7.5-3.333-.61 1.37 7.5 3.334.61-1.371Zm-8.11-3.333-7.5 3.333.61 1.37 7.5-3.333-.61-1.37ZM1.75 5.833V7.5h1.5V5.833h-1.5Zm6.583 10.084H2.5v1.5h5.833v-1.5Zm-5.113.96.73-2.5-1.44-.42-.73 2.5 1.44.42Zm.01-1.96h5.103v-1.5H3.23v1.5ZM3.416 7.5v6.667h1.5V7.5h-1.5Zm4.833 6.667V7.5h-1.5v6.667h1.5Zm8.355-3.5-5.104 5.105 1.06 1.06 5.105-5.104-1.06-1.06Zm-4.438.791c0-.069.056-.125.125-.125v1.5c.76 0 1.375-.615 1.375-1.375h-1.5Zm.125-.125c.069 0 .125.056.125.125h-1.5c0 .76.615 1.375 1.375 1.375v-1.5Zm.125.125c0 .07-.056.125-.125.125v-1.5c-.76 0-1.375.616-1.375 1.375h1.5Zm-.125.125a.125.125 0 0 1-.125-.125h1.5c0-.76-.616-1.375-1.375-1.375v1.5Zm4.458 4.459c0-.07.056-.125.125-.125v1.5c.76 0 1.375-.616 1.375-1.375h-1.5Zm.125-.125c.069 0 .125.056.125.125h-1.5c0 .76.616 1.375 1.375 1.375v-1.5Zm.125.125a.125.125 0 0 1-.125.125v-1.5c-.76 0-1.375.615-1.375 1.375H17Zm-.125.125a.125.125 0 0 1-.125-.125h1.5c0-.76-.616-1.375-1.375-1.375v1.5Z"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/buildings.tsx b/packages/design-system/icons/src/components/buildings.tsx
index fa1788bf1b617..684aad7039592 100644
--- a/packages/design-system/icons/src/components/buildings.tsx
+++ b/packages/design-system/icons/src/components/buildings.tsx
@@ -16,21 +16,7 @@ const Buildings = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M17.014 16.542V8.8a.774.774 0 0 0-.774-.775h-3.097"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M3.077 16.542V4.154a.774.774 0 0 1 .775-.774h8.516a.774.774 0 0 1 .775.774v12.388M5.98 6.652h4.26M5.98 9.96h4.26"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M5.98 16.542h4.26V13.21H5.98v3.333ZM17.788 16.542H2.303"
+          d="M17.014 16.542V8.8a.774.774 0 0 0-.774-.775h-3.097M3.077 16.542V4.154a.774.774 0 0 1 .775-.774h8.516a.774.774 0 0 1 .775.774v12.388M5.98 6.652h4.258M5.981 9.961h4.258m7.55 6.581H2.302m7.936 0H5.981V13.21h4.258v3.333Z"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/channels.tsx b/packages/design-system/icons/src/components/channels.tsx
index 6625e9503645b..ed3be94880279 100644
--- a/packages/design-system/icons/src/components/channels.tsx
+++ b/packages/design-system/icons/src/components/channels.tsx
@@ -16,14 +16,7 @@ const Channels = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M14.719 5.875a1.687 1.687 0 1 0 0-3.375 1.687 1.687 0 0 0 0 3.375ZM14.719 11.688a1.687 1.687 0 1 0 0-3.375 1.687 1.687 0 0 0 0 3.374ZM4.594 11.688a1.687 1.687 0 1 0 0-3.375 1.687 1.687 0 0 0 0 3.374ZM14.719 17.5a1.687 1.687 0 1 0 0-3.375 1.687 1.687 0 0 0 0 3.375Z"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M13.03 4.188h-1.874a1.5 1.5 0 0 0-1.5 1.5v8.625a1.5 1.5 0 0 0 1.5 1.5h1.875M13.03 10H6.28"
+          d="M13.031 4.188a1.687 1.687 0 1 0 3.375 0 1.687 1.687 0 0 0-3.375 0Zm0 0h-1.875a1.5 1.5 0 0 0-1.5 1.5v8.625a1.5 1.5 0 0 0 1.5 1.5h1.875M6.281 10a1.687 1.687 0 1 1-3.375 0 1.687 1.687 0 0 1 3.375 0Zm0 0h6.75m0 5.813a1.688 1.688 0 1 0 3.375 0 1.688 1.688 0 0 0-3.375 0ZM16.406 10a1.687 1.687 0 1 1-3.375 0 1.687 1.687 0 0 1 3.375 0Z"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/clock.tsx b/packages/design-system/icons/src/components/clock.tsx
index f70776375e1dd..823975fb83036 100644
--- a/packages/design-system/icons/src/components/clock.tsx
+++ b/packages/design-system/icons/src/components/clock.tsx
@@ -16,14 +16,7 @@ const Clock = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M10 17.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M10 5.833v4.375l2.5 1.459"
+          d="M10 5.833v4.375l2.5 1.459m5-1.667a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/currency-dollar-solid.tsx b/packages/design-system/icons/src/components/currency-dollar-solid.tsx
index 72e704c7d3ef0..e9dc5b2ae95c3 100644
--- a/packages/design-system/icons/src/components/currency-dollar-solid.tsx
+++ b/packages/design-system/icons/src/components/currency-dollar-solid.tsx
@@ -13,7 +13,7 @@ const CurrencyDollarSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <path
           fill={color}
-          d="M10.75 10.818v2.614A3.13 3.13 0 0 0 11.888 13c.482-.315.612-.648.612-.875 0-.227-.13-.56-.612-.875a3.131 3.131 0 0 0-1.138-.432ZM8.33 8.62c.053.055.115.11.184.164.208.16.46.284.736.363V6.603a2.45 2.45 0 0 0-.35.13 2.01 2.01 0 0 0-.386.233c-.377.292-.514.627-.514.909 0 .184.058.39.202.592.037.051.08.103.128.153Z"
+          d="M10.75 10.818v2.614A3.13 3.13 0 0 0 11.888 13c.482-.315.612-.648.612-.875 0-.227-.13-.56-.612-.875a3.13 3.13 0 0 0-1.138-.432ZM8.33 8.62c.053.055.115.11.184.164.208.16.46.284.736.363V6.603a2.45 2.45 0 0 0-.35.13 2.01 2.01 0 0 0-.386.233c-.377.292-.514.627-.514.909 0 .184.058.39.202.592.037.051.08.103.128.153Z"
         />
         <path
           fill={color}
diff --git a/packages/design-system/icons/src/components/ellipse.tsx b/packages/design-system/icons/src/components/ellipse.tsx
new file mode 100644
index 0000000000000..38a662a589668
--- /dev/null
+++ b/packages/design-system/icons/src/components/ellipse.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Ellipse = 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}
+      >
+        <circle cx={10} cy={10} r={2.25} stroke={color} strokeWidth={1.5} />
+      </svg>
+    )
+  }
+)
+Ellipse.displayName = "Ellipse"
+export default Ellipse
diff --git a/packages/design-system/icons/src/components/figma.tsx b/packages/design-system/icons/src/components/figma.tsx
index d0b7b33b4c1e2..8889689161686 100644
--- a/packages/design-system/icons/src/components/figma.tsx
+++ b/packages/design-system/icons/src/components/figma.tsx
@@ -11,33 +11,26 @@ const Figma = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
         ref={ref}
         {...props}
       >
-        <g clipPath="url(#a)">
-          <path
-            fill="#1ABCFE"
-            d="M10 10a2.97 2.97 0 1 1 5.939 0A2.97 2.97 0 0 1 10 10Z"
-          />
-          <path
-            fill="#0ACF83"
-            d="M4.061 15.939a2.97 2.97 0 0 1 2.97-2.97H10v2.97a2.97 2.97 0 1 1-5.94 0Z"
-          />
-          <path
-            fill="#FF7262"
-            d="M10 1.092V7.03h2.97a2.97 2.97 0 1 0 0-5.94H10Z"
-          />
-          <path
-            fill="#F24E1E"
-            d="M4.061 4.061a2.97 2.97 0 0 0 2.97 2.97H10V1.09H7.03a2.97 2.97 0 0 0-2.97 2.97Z"
-          />
-          <path
-            fill="#A259FF"
-            d="M4.061 10a2.97 2.97 0 0 0 2.97 2.97H10V7.03H7.03A2.97 2.97 0 0 0 4.06 10Z"
-          />
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M4 1h12v18H4z" />
-          </clipPath>
-        </defs>
+        <path
+          fill="#1ABCFE"
+          d="M10 10a2.97 2.97 0 1 1 5.939 0A2.97 2.97 0 0 1 10 10Z"
+        />
+        <path
+          fill="#0ACF83"
+          d="M4.061 15.939a2.97 2.97 0 0 1 2.97-2.97H10v2.97a2.97 2.97 0 1 1-5.94 0Z"
+        />
+        <path
+          fill="#FF7262"
+          d="M10 1.092V7.03h2.97a2.97 2.97 0 1 0 0-5.94H10Z"
+        />
+        <path
+          fill="#F24E1E"
+          d="M4.061 4.061a2.97 2.97 0 0 0 2.97 2.97H10V1.09H7.03a2.97 2.97 0 0 0-2.97 2.97Z"
+        />
+        <path
+          fill="#A259FF"
+          d="M4.061 10a2.97 2.97 0 0 0 2.97 2.97H10V7.03H7.03A2.97 2.97 0 0 0 4.06 10Z"
+        />
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/flag-mini.tsx b/packages/design-system/icons/src/components/flag-mini.tsx
new file mode 100644
index 0000000000000..749a5cdc4b1ff
--- /dev/null
+++ b/packages/design-system/icons/src/components/flag-mini.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const FlagMini = 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
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m4.886 11.667.633-6.97a.4.4 0 0 1 .399-.364h9.196a.4.4 0 0 1 .399.437l-.594 6.533a.4.4 0 0 1-.399.364H4.886Zm0 0-.4 4M7.552 6.667l4.667 2.667"
+        />
+      </svg>
+    )
+  }
+)
+FlagMini.displayName = "FlagMini"
+export default FlagMini
diff --git a/packages/design-system/icons/src/components/index.ts b/packages/design-system/icons/src/components/index.ts
index 7a9a737c06940..df5d4c79efbdb 100644
--- a/packages/design-system/icons/src/components/index.ts
+++ b/packages/design-system/icons/src/components/index.ts
@@ -34,6 +34,7 @@ export { default as ArrrowRight } from "./arrrow-right"
 export { default as AtSymbol } from "./at-symbol"
 export { default as BackwardSolid } from "./backward-solid"
 export { default as BarsThree } from "./bars-three"
+export { default as Beaker } from "./beaker"
 export { default as BellAlertSolid } from "./bell-alert-solid"
 export { default as BellAlert } from "./bell-alert"
 export { default as BoltSolid } from "./bolt-solid"
@@ -117,6 +118,7 @@ export { default as EllipseOrangeSolid } from "./ellipse-orange-solid"
 export { default as EllipsePurpleSolid } from "./ellipse-purple-solid"
 export { default as EllipseRedSolid } from "./ellipse-red-solid"
 export { default as EllipseSolid } from "./ellipse-solid"
+export { default as Ellipse } from "./ellipse"
 export { default as EllipsisHorizontal } from "./ellipsis-horizontal"
 export { default as EllipsisVertical } from "./ellipsis-vertical"
 export { default as EnvelopeSolid } from "./envelope-solid"
@@ -130,6 +132,7 @@ export { default as Eye } from "./eye"
 export { default as FaceSmile } from "./face-smile"
 export { default as Facebook } from "./facebook"
 export { default as Figma } from "./figma"
+export { default as FlagMini } from "./flag-mini"
 export { default as FlyingBox } from "./flying-box"
 export { default as FolderOpen } from "./folder-open"
 export { default as Folder } from "./folder"
@@ -154,6 +157,8 @@ export { default as KeySolid } from "./key-solid"
 export { default as Key } from "./key"
 export { default as KlarnaEx } from "./klarna-ex"
 export { default as Klarna } from "./klarna"
+export { default as Klaviyo } from "./klaviyo"
+export { default as Lifebuoy } from "./lifebuoy"
 export { default as LightBulbSolid } from "./light-bulb-solid"
 export { default as LightBulb } from "./light-bulb"
 export { default as Link } from "./link"
@@ -165,7 +170,9 @@ export { default as MagnifyingGlassMini } from "./magnifying-glass-mini"
 export { default as MagnifyingGlass } from "./magnifying-glass"
 export { default as MapPin } from "./map-pin"
 export { default as Map } from "./map"
+export { default as Mastercard } from "./mastercard"
 export { default as Medusa } from "./medusa"
+export { default as Meta } from "./meta"
 export { default as MinusMini } from "./minus-mini"
 export { default as Minus } from "./minus"
 export { default as MoonSolid } from "./moon-solid"
@@ -196,6 +203,7 @@ export { default as Resize } from "./resize"
 export { default as RocketLaunchSolid } from "./rocket-launch-solid"
 export { default as RocketLaunch } from "./rocket-launch"
 export { default as Rss } from "./rss"
+export { default as Sanity } from "./sanity"
 export { default as ServerSolid } from "./server-solid"
 export { default as ServerStackSolid } from "./server-stack-solid"
 export { default as ServerStack } from "./server-stack"
@@ -243,8 +251,10 @@ export { default as User } from "./user"
 export { default as UsersSolid } from "./users-solid"
 export { default as Users } from "./users"
 export { default as Vercel } from "./vercel"
+export { default as Visa } from "./visa"
 export { default as Window } from "./window"
 export { default as XCircleSolid } from "./x-circle-solid"
+export { default as XCircle } from "./x-circle"
 export { default as XMarkMini } from "./x-mark-mini"
 export { default as XMark } from "./x-mark"
 export { default as X } from "./x"
diff --git a/packages/design-system/icons/src/components/klaviyo.tsx b/packages/design-system/icons/src/components/klaviyo.tsx
new file mode 100644
index 0000000000000..ff70dceafceba
--- /dev/null
+++ b/packages/design-system/icons/src/components/klaviyo.tsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Klaviyo = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path fill="url(#a)" d="M19 16H1V4h18l-3.778 6L19 16Z" />
+        <defs>
+          <linearGradient
+            id="a"
+            x1={20.2}
+            x2={-1.7}
+            y1={4.835}
+            y2={18.335}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#ED7598" />
+            <stop offset={0.456} stopColor="#F75650" />
+            <stop offset={1} stopColor="#FFA661" />
+          </linearGradient>
+        </defs>
+      </svg>
+    )
+  }
+)
+Klaviyo.displayName = "Klaviyo"
+export default Klaviyo
diff --git a/packages/design-system/icons/src/components/lifebuoy.tsx b/packages/design-system/icons/src/components/lifebuoy.tsx
new file mode 100644
index 0000000000000..59ee8fbfdd2f4
--- /dev/null
+++ b/packages/design-system/icons/src/components/lifebuoy.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Lifebuoy = 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
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M13.927 3.608a7.52 7.52 0 0 1 2.465 2.465m-2.465-2.465-2.874 3.449m2.874-3.449a7.512 7.512 0 0 0-7.854 0m10.319 2.465-3.449 2.874m3.449-2.874a7.512 7.512 0 0 1 0 7.854m-5.339-6.87c.435.155.83.406 1.157.733.327.326.578.721.733 1.157m-1.89-1.89a3.137 3.137 0 0 0-2.106 0M6.073 3.608l2.874 3.449M6.073 3.608a7.52 7.52 0 0 0-2.465 2.465m9.335 2.874a3.138 3.138 0 0 1 0 2.106m3.449 2.874-3.449-2.874m3.449 2.874a7.52 7.52 0 0 1-2.465 2.465m-.984-5.339a3.128 3.128 0 0 1-1.89 1.89M8.947 7.057a3.128 3.128 0 0 0-1.89 1.89m3.996 3.996 2.874 3.449m-2.874-3.449a3.137 3.137 0 0 1-2.106 0m4.98 3.449a7.511 7.511 0 0 1-7.854 0m0 0 2.874-3.449m-2.874 3.449a7.522 7.522 0 0 1-2.465-2.465m5.339-.984a3.115 3.115 0 0 1-1.157-.733 3.115 3.115 0 0 1-.733-1.157m0 0-3.449 2.874m3.449-2.874a3.138 3.138 0 0 1 0-2.106m-3.449 4.98a7.512 7.512 0 0 1 0-7.854m0 0 3.449 2.874"
+        />
+      </svg>
+    )
+  }
+)
+Lifebuoy.displayName = "Lifebuoy"
+export default Lifebuoy
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 87dafc828bddc..05a2da787bf8b 100644
--- a/packages/design-system/icons/src/components/lock-closed-solid.tsx
+++ b/packages/design-system/icons/src/components/lock-closed-solid.tsx
@@ -12,10 +12,12 @@ const LockClosedSolid = React.forwardRef<SVGSVGElement, IconProps>(
         {...props}
       >
         <path
-          fill={color}
-          fillRule="evenodd"
-          d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 0 0-6 0V9h6Z"
-          clipRule="evenodd"
+          fill="#212121"
+          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"
+          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 3d4d05f9c6e0e..7a346dd9b28d3 100644
--- a/packages/design-system/icons/src/components/lock-open-solid.tsx
+++ b/packages/design-system/icons/src/components/lock-open-solid.tsx
@@ -11,12 +11,15 @@ const LockOpenSolid = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <path
-          fill={color}
-          fillRule="evenodd"
-          d="M14.5 1A4.5 4.5 0 0 0 10 5.5V9H3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-1.5V5.5a3 3 0 0 1 6 0v2.75a.75.75 0 1 0 1.5 0V5.5A4.5 4.5 0 0 0 14.5 1Z"
-          clipRule="evenodd"
-        />
+        <g fill="#212121" 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>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h20v20H0z" />
+          </clipPath>
+        </defs>
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/mastercard.tsx b/packages/design-system/icons/src/components/mastercard.tsx
new file mode 100644
index 0000000000000..c6f046f4d255b
--- /dev/null
+++ b/packages/design-system/icons/src/components/mastercard.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Mastercard = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path fill="#FF5A00" d="M12.428 5.578h-4.87v8.844h4.87V5.578Z" />
+        <path
+          fill="#EB001B"
+          d="M7.882 10c0-1.797.835-3.391 2.118-4.422a5.5 5.5 0 0 0-3.434-1.203C3.49 4.375 1 6.891 1 10c0 3.11 2.49 5.625 5.566 5.625A5.5 5.5 0 0 0 10 14.422 5.635 5.635 0 0 1 7.882 10Z"
+        />
+        <path
+          fill="#F79E1B"
+          d="M19 10c0 3.11-2.49 5.625-5.566 5.625A5.5 5.5 0 0 1 10 14.422 5.616 5.616 0 0 0 12.118 10 5.663 5.663 0 0 0 10 5.578a5.492 5.492 0 0 1 3.432-1.203C16.51 4.375 19 6.907 19 10Z"
+        />
+      </svg>
+    )
+  }
+)
+Mastercard.displayName = "Mastercard"
+export default Mastercard
diff --git a/packages/design-system/icons/src/components/meta.tsx b/packages/design-system/icons/src/components/meta.tsx
new file mode 100644
index 0000000000000..c397f2757b5e3
--- /dev/null
+++ b/packages/design-system/icons/src/components/meta.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Meta = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#0467DF"
+          d="M6.186 4.022c-1.476 0-2.762.96-3.653 2.335C1.528 7.906 1 9.912 1 11.837c0 .53.052 1.027.157 1.48.052.219.118.434.2.644.077.198.17.389.278.571.521.87 1.363 1.445 2.694 1.445 1.123 0 1.975-.503 2.974-1.832.57-.76.858-1.22 1.997-3.24L9.867 9.9l.14-.244.137.225 1.614 2.697c.543.907 1.249 1.917 1.853 2.485.784.74 1.493.915 2.294.915.807 0 1.408-.266 1.842-.632.242-.207.448-.454.607-.73.407-.704.646-1.595.646-2.809 0-2.04-.51-4.017-1.563-5.587-.962-1.434-2.218-2.198-3.537-2.198-.785 0-1.566.35-2.29.981-.489.428-.942.968-1.365 1.538-.517-.656-1.001-1.16-1.468-1.542-.887-.725-1.736-.977-2.59-.977Zm7.62 1.54c.86 0 1.641.569 2.244 1.5.85 1.31 1.235 3.146 1.235 4.8 0 1.16-.276 2.175-1.379 2.175-.435 0-.77-.173-1.248-.754-.372-.45-1.007-1.408-2.124-3.268l-.463-.771c-.3-.503-.614-.998-.94-1.485.052-.082.105-.168.158-.245.84-1.25 1.587-1.952 2.517-1.952Zm-7.65.415c.948 0 1.543.593 2.006 1.084.23.246.552.654.925 1.185L8.322 9.42c-.567.873-1.411 2.263-2.127 3.254-.894 1.237-1.358 1.363-1.865 1.363-.393 0-.779-.178-1.037-.596-.198-.32-.348-.848-.348-1.535 0-1.665.472-3.4 1.245-4.566.34-.515.723-.919 1.15-1.15.25-.138.53-.212.816-.213Z"
+        />
+      </svg>
+    )
+  }
+)
+Meta.displayName = "Meta"
+export default Meta
diff --git a/packages/design-system/icons/src/components/sanity.tsx b/packages/design-system/icons/src/components/sanity.tsx
new file mode 100644
index 0000000000000..ce57cbdcd3a34
--- /dev/null
+++ b/packages/design-system/icons/src/components/sanity.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Sanity = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#F03E2F"
+          d="M6.545 6.482a4.309 4.309 0 0 1-.624-.51c-.685-.682-1.035-1.55-1.035-2.676v-.43C6.024 1.695 7.779 1 9.87 1c4.045 0 6.386 2.1 6.963 5.055h-3.67c-.404-1.165-1.417-2.073-3.263-2.073-1.817 0-3.102.957-3.355 2.5ZM4.512 3.296c0 2.427 1.526 3.872 4.58 4.633l3.236.737c2.891.653 4.65 2.273 4.65 4.913a4.957 4.957 0 0 1-1.077 3.18c0-2.634-1.387-4.058-4.732-4.913l-3.177-.71c-2.545-.57-4.508-1.902-4.508-4.77a4.934 4.934 0 0 1 1.028-3.07Zm9.373 10.067c-.22 1.676-1.57 2.621-3.524 2.621-1.735 0-3.036-.71-3.527-2.242H3.02C3.638 17.08 6.418 19 10.39 19c2.121 0 3.958-.652 5.138-1.83v-.412c0-1.245-.325-2.157-1.007-2.862a4.13 4.13 0 0 0-.635-.532v-.001Z"
+        />
+      </svg>
+    )
+  }
+)
+Sanity.displayName = "Sanity"
+export default Sanity
diff --git a/packages/design-system/icons/src/components/sidebar.tsx b/packages/design-system/icons/src/components/sidebar.tsx
index e5c2b2cbee134..e665007b027b2 100644
--- a/packages/design-system/icons/src/components/sidebar.tsx
+++ b/packages/design-system/icons/src/components/sidebar.tsx
@@ -16,7 +16,7 @@ const Sidebar = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M9 3.125H4.375A1.875 1.875 0 0 0 2.5 5v10a1.875 1.875 0 0 0 1.875 1.875H9m0-13.75h6.625A1.875 1.875 0 0 1 17.5 5v10a1.875 1.875 0 0 1-1.875 1.875H9m0-13.75v13.75M5 6.5h1.5M5 9.5h1.5"
+          d="M5.5 6v8m-3-7.125V15a1.875 1.875 0 0 0 1.875 1.875h11.25A1.875 1.875 0 0 0 17.5 15V5a1.875 1.875 0 0 0-1.875-1.875H4.375A1.875 1.875 0 0 0 2.5 5v1.875Z"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/triangle-down-mini.tsx b/packages/design-system/icons/src/components/triangle-down-mini.tsx
index bb52238c660b7..c8fe9dd7430fc 100644
--- a/packages/design-system/icons/src/components/triangle-down-mini.tsx
+++ b/packages/design-system/icons/src/components/triangle-down-mini.tsx
@@ -13,9 +13,7 @@ const TriangleDownMini = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <path
           fill={color}
-          fillRule="evenodd"
-          d="M13.087 6.25c.693 0 1.133.75.799 1.363l-3.087 5.66a.908.908 0 0 1-1.598 0l-3.087-5.66C5.78 7 6.22 6.25 6.914 6.25h6.173Z"
-          clipRule="evenodd"
+          d="M12.59 7.5c.163 0 .323.037.463.108.14.07.256.172.335.293a.68.68 0 0 1 .111.397.693.693 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.848.848 0 0 1 .335-.293c.14-.07.3-.108.463-.108h5.18Z"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/triangle-right-mini.tsx b/packages/design-system/icons/src/components/triangle-right-mini.tsx
index b8d44554455e5..0540fcad4ecb6 100644
--- a/packages/design-system/icons/src/components/triangle-right-mini.tsx
+++ b/packages/design-system/icons/src/components/triangle-right-mini.tsx
@@ -13,9 +13,7 @@ const TriangleRightMini = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <path
           fill={color}
-          fillRule="evenodd"
-          d="M6.25 6.913c0-.693.75-1.133 1.363-.799l5.66 3.087a.908.908 0 0 1 0 1.598l-5.66 3.087c-.613.334-1.363-.106-1.363-.8V6.914Z"
-          clipRule="evenodd"
+          d="M7.5 7.41c0-.163.037-.323.108-.464a.848.848 0 0 1 .293-.334.68.68 0 0 1 .397-.112.693.693 0 0 1 .39.142l3.454 2.59c.11.082.2.195.263.33a1.04 1.04 0 0 1 0 .876.867.867 0 0 1-.263.33l-3.455 2.59a.693.693 0 0 1-.39.141.68.68 0 0 1-.396-.111.85.85 0 0 1-.293-.335c-.07-.14-.108-.3-.108-.464V7.41Z"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/visa.tsx b/packages/design-system/icons/src/components/visa.tsx
new file mode 100644
index 0000000000000..d30c0f9ece53a
--- /dev/null
+++ b/packages/design-system/icons/src/components/visa.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Visa = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#1A1F71"
+          d="m7.834 7.197-2.356 5.622H3.94L2.78 8.332c-.07-.276-.13-.378-.345-.494-.35-.19-.927-.367-1.435-.478l.034-.163H3.51a.678.678 0 0 1 .67.573l.613 3.253 1.513-3.826h1.528Zm6.025 3.787c.006-1.485-2.052-1.566-2.038-2.23.005-.201.197-.416.617-.47.492-.047.987.04 1.434.252l.255-1.193a3.906 3.906 0 0 0-1.36-.25c-1.438 0-2.45.765-2.459 1.86-.009.809.723 1.26 1.274 1.53.567.275.757.452.754.698-.004.378-.451.544-.87.55-.731.012-1.155-.197-1.494-.354l-.263 1.231c.34.156.967.293 1.617.299 1.528 0 2.527-.755 2.533-1.923Zm3.795 1.835H19l-1.174-5.622h-1.242a.662.662 0 0 0-.62.412l-2.181 5.21h1.527l.304-.84h1.866l.174.84Zm-1.622-1.992.765-2.111.441 2.11h-1.206Zm-6.12-3.63L8.71 12.819H7.255l1.204-5.622h1.453Z"
+        />
+      </svg>
+    )
+  }
+)
+Visa.displayName = "Visa"
+export default Visa
diff --git a/packages/design-system/icons/src/components/x-circle.tsx b/packages/design-system/icons/src/components/x-circle.tsx
new file mode 100644
index 0000000000000..2c2dde4403717
--- /dev/null
+++ b/packages/design-system/icons/src/components/x-circle.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const XCircle = 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
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m8.125 8.125 3.75 3.75m0-3.75-3.75 3.75M17.5 10a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"
+        />
+      </svg>
+    )
+  }
+)
+XCircle.displayName = "XCircle"
+export default XCircle
diff --git a/packages/medusa-core-utils/src/graceful-shutdown-server.ts b/packages/medusa-core-utils/src/graceful-shutdown-server.ts
index b88f5043e1207..c6be54e8399ef 100644
--- a/packages/medusa-core-utils/src/graceful-shutdown-server.ts
+++ b/packages/medusa-core-utils/src/graceful-shutdown-server.ts
@@ -1,6 +1,6 @@
 import { Server } from "http"
 import { Socket } from "net"
-import Timer = NodeJS.Timer
+import Timeout = NodeJS.Timeout
 
 interface SocketState extends Socket {
   _idle: boolean
@@ -30,7 +30,7 @@ export abstract class GracefulShutdownServer {
 
       shutdownPromise = new Promise((ok, nok) => {
         let forceQuit = false
-        let cleanInterval: Timer
+        let cleanInterval: Timeout
 
         try {
           // stop accepting new incoming connections
diff --git a/yarn.lock b/yarn.lock
index 159c7348f1ba7..aa6a2cd1bb723 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1039,6 +1039,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/code-frame@npm:7.23.5"
+  dependencies:
+    "@babel/highlight": ^7.23.4
+    chalk: ^2.4.2
+  checksum: a10e843595ddd9f97faa99917414813c06214f4d9205294013e20c70fbdf4f943760da37dec1d998bf3e6fc20fa2918a47c0e987a7e458663feb7698063ad7c6
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.11.0, @babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/compat-data@npm:7.22.5"
@@ -1053,6 +1063,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/compat-data@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/compat-data@npm:7.23.5"
+  checksum: 081278ed46131a890ad566a59c61600a5f9557bd8ee5e535890c8548192532ea92590742fd74bd9db83d74c669ef8a04a7e1c85cdea27f960233e3b83c3a957c
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:7.12.9":
   version: 7.12.9
   resolution: "@babel/core@npm:7.12.9"
@@ -1146,6 +1163,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.23.5":
+  version: 7.23.7
+  resolution: "@babel/core@npm:7.23.7"
+  dependencies:
+    "@ampproject/remapping": ^2.2.0
+    "@babel/code-frame": ^7.23.5
+    "@babel/generator": ^7.23.6
+    "@babel/helper-compilation-targets": ^7.23.6
+    "@babel/helper-module-transforms": ^7.23.3
+    "@babel/helpers": ^7.23.7
+    "@babel/parser": ^7.23.6
+    "@babel/template": ^7.22.15
+    "@babel/traverse": ^7.23.7
+    "@babel/types": ^7.23.6
+    convert-source-map: ^2.0.0
+    debug: ^4.1.0
+    gensync: ^1.0.0-beta.2
+    json5: ^2.2.3
+    semver: ^6.3.1
+  checksum: 38c9934973d384ed83369712978453eac91dc3f22167404dbdb272b64f602e74728a6f37012c53ee57e521b8ae2da60097f050497d9b6a212d28b59cdfb2cd1d
+  languageName: node
+  linkType: hard
+
 "@babel/eslint-parser@npm:^7.15.4, @babel/eslint-parser@npm:^7.15.8":
   version: 7.22.5
   resolution: "@babel/eslint-parser@npm:7.22.5"
@@ -1184,6 +1224,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.23.5, @babel/generator@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/generator@npm:7.23.6"
+  dependencies:
+    "@babel/types": ^7.23.6
+    "@jridgewell/gen-mapping": ^0.3.2
+    "@jridgewell/trace-mapping": ^0.3.17
+    jsesc: ^2.5.1
+  checksum: 53540e905cd10db05d9aee0a5304e36927f455ce66f95d1253bb8a179f286b88fa7062ea0db354c566fe27f8bb96567566084ffd259f8feaae1de5eccc8afbda
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -1230,6 +1282,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/helper-compilation-targets@npm:7.23.6"
+  dependencies:
+    "@babel/compat-data": ^7.23.5
+    "@babel/helper-validator-option": ^7.23.5
+    browserslist: ^4.22.2
+    lru-cache: ^5.1.1
+    semver: ^6.3.1
+  checksum: ba38506d11185f48b79abf439462ece271d3eead1673dd8814519c8c903c708523428806f05f2ec5efd0c56e4e278698fac967e5a4b5ee842c32415da54bc6fa
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.12.1, @babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.5"
@@ -1440,6 +1505,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/helper-module-transforms@npm:7.23.3"
+  dependencies:
+    "@babel/helper-environment-visitor": ^7.22.20
+    "@babel/helper-module-imports": ^7.22.15
+    "@babel/helper-simple-access": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/helper-validator-identifier": ^7.22.20
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 211e1399d0c4993671e8e5c2b25383f08bee40004ace5404ed4065f0e9258cc85d99c1b82fd456c030ce5cfd4d8f310355b54ef35de9924eabfc3dff1331d946
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-optimise-call-expression@npm:7.22.5"
@@ -1560,6 +1640,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/helper-string-parser@npm:7.23.4"
+  checksum: f348d5637ad70b6b54b026d6544bd9040f78d24e7ec245a0fc42293968181f6ae9879c22d89744730d246ce8ec53588f716f102addd4df8bbc79b73ea10004ac
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-validator-identifier@npm:7.22.20"
@@ -1588,6 +1675,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.23.5":
+  version: 7.23.5
+  resolution: "@babel/helper-validator-option@npm:7.23.5"
+  checksum: af45d5c0defb292ba6fd38979e8f13d7da63f9623d8ab9ededc394f67eb45857d2601278d151ae9affb6e03d5d608485806cd45af08b4468a0515cf506510e94
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-wrap-function@npm:7.22.20"
@@ -1633,6 +1727,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/helpers@npm:7.23.7"
+  dependencies:
+    "@babel/template": ^7.22.15
+    "@babel/traverse": ^7.23.7
+    "@babel/types": ^7.23.6
+  checksum: f74a61ad28a1bc1fdd9133ad571c07787b66d6db017c707b87c203b0cd06879cea8b33e9c6a8585765a4949efa5df3cc9e19b710fe867f11be38ee29fd4a0488
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.10.4, @babel/highlight@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/highlight@npm:7.22.5"
@@ -1655,6 +1760,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.23.4":
+  version: 7.23.4
+  resolution: "@babel/highlight@npm:7.23.4"
+  dependencies:
+    "@babel/helper-validator-identifier": ^7.22.20
+    chalk: ^2.4.2
+    js-tokens: ^4.0.0
+  checksum: fbff9fcb2f5539289c3c097d130e852afd10d89a3a08ac0b5ebebbc055cc84a4bcc3dcfed463d488cde12dd0902ef1858279e31d7349b2e8cee43913744bda33
+  languageName: node
+  linkType: hard
+
 "@babel/node@npm:^7.12.10, @babel/node@npm:^7.12.6, @babel/node@npm:^7.15.4, @babel/node@npm:^7.7.4":
   version: 7.22.5
   resolution: "@babel/node@npm:7.22.5"
@@ -1700,6 +1816,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:7.23.5":
+  version: 7.23.5
+  resolution: "@babel/parser@npm:7.23.5"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 3356aa90d7bafb4e2c7310e7c2c3d443c4be4db74913f088d3d577a1eb914ea4188e05fd50a47ce907a27b755c4400c4e3cbeee73dbeb37761f6ca85954f5a20
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.13.16, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.22.7, @babel/parser@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/parser@npm:7.23.0"
@@ -1709,6 +1834,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/parser@npm:7.23.6"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 6f76cd5ccae1fa9bcab3525b0865c6222e9c1d22f87abc69f28c5c7b2c8816a13361f5bd06bddbd5faf903f7320a8feba02545c981468acec45d12a03db7755e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.15"
@@ -3046,6 +3180,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx-self@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.23.3"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 6b586508fc58998483d4ee93a7e784c4f4d2350e2633739cf1990b7ad172e13906f72382fdaf7f07b4e3c7e7555342634d392bdeb1a079bb64762c6368ca9a32
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx-source@npm:^7.19.6, @babel/plugin-transform-react-jsx-source@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5"
@@ -3057,6 +3202,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx-source@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.23.3"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: a3aad7cf738e9bfaddc26cdbb83bb9684c2e689d26fb0793d772af0c8da0cd25bb02523d192fbc6946c32143e56b472c1d33fa82466b3f2d3346e1ce8fe83cf6
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx@npm:^7.0.0, @babel/plugin-transform-react-jsx@npm:^7.12.11, @babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-react-jsx@npm:7.22.5"
@@ -3683,6 +3839,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2":
+  version: 7.23.7
+  resolution: "@babel/runtime@npm:7.23.7"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 3e304133ee55b0750e03e53cb4efb47fb2bdcdb5795f85bbffa10595196c34b9be60eb65bd6d833c87f49fc827f0365f86f95f51d85b188004d3128bb5129c93
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.12.13, @babel/template@npm:^7.12.7, @babel/template@npm:^7.16.7, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3":
   version: 7.22.5
   resolution: "@babel/template@npm:7.22.5"
@@ -3723,6 +3888,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:7.23.5":
+  version: 7.23.5
+  resolution: "@babel/traverse@npm:7.23.5"
+  dependencies:
+    "@babel/code-frame": ^7.23.5
+    "@babel/generator": ^7.23.5
+    "@babel/helper-environment-visitor": ^7.22.20
+    "@babel/helper-function-name": ^7.23.0
+    "@babel/helper-hoist-variables": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/parser": ^7.23.5
+    "@babel/types": ^7.23.5
+    debug: ^4.1.0
+    globals: ^11.1.0
+  checksum: c5ea793080ca6719b0a1612198fd25e361cee1f3c14142d7a518d2a1eeb5c1d21f7eec1b26c20ea6e1ddd8ed12ab50b960ff95ffd25be353b6b46e1b54d6f825
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.22.8, @babel/traverse@npm:^7.23.2":
   version: 7.23.2
   resolution: "@babel/traverse@npm:7.23.2"
@@ -3741,6 +3924,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/traverse@npm:7.23.7"
+  dependencies:
+    "@babel/code-frame": ^7.23.5
+    "@babel/generator": ^7.23.6
+    "@babel/helper-environment-visitor": ^7.22.20
+    "@babel/helper-function-name": ^7.23.0
+    "@babel/helper-hoist-variables": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/parser": ^7.23.6
+    "@babel/types": ^7.23.6
+    debug: ^4.3.1
+    globals: ^11.1.0
+  checksum: e32fceb4249beec2bde83968ddffe17444221c1ee5cd18c543a2feaf94e3ca83f2a4dfbc2dcca87cf226e0105973e0fe3717063a21e982a9de9945615ab3f3f5
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:7.22.5, @babel/types@npm:^7.0.0, @babel/types@npm:^7.0.0-beta.49, @babel/types@npm:^7.11.5, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.7, @babel/types@npm:^7.14.2, @babel/types@npm:^7.15.4, @babel/types@npm:^7.16.8, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.22.5
   resolution: "@babel/types@npm:7.22.5"
@@ -3763,6 +3964,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.23.5, @babel/types@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/types@npm:7.23.6"
+  dependencies:
+    "@babel/helper-string-parser": ^7.23.4
+    "@babel/helper-validator-identifier": ^7.22.20
+    to-fast-properties: ^2.0.0
+  checksum: 42cefce8a68bd09bb5828b4764aa5586c53c60128ac2ac012e23858e1c179347a4aac9c66fc577994fbf57595227611c5ec8270bf0cfc94ff033bbfac0550b70
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -4590,6 +4802,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/aix-ppc64@npm:0.19.11"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.17.18":
   version: 0.17.18
   resolution: "@esbuild/android-arm64@npm:0.17.18"
@@ -4611,6 +4830,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/android-arm64@npm:0.19.11"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/android-arm64@npm:0.19.2"
@@ -4639,6 +4865,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/android-arm@npm:0.19.11"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/android-arm@npm:0.19.2"
@@ -4667,6 +4900,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/android-x64@npm:0.19.11"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/android-x64@npm:0.19.2"
@@ -4695,6 +4935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/darwin-arm64@npm:0.19.11"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/darwin-arm64@npm:0.19.2"
@@ -4723,6 +4970,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/darwin-x64@npm:0.19.11"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/darwin-x64@npm:0.19.2"
@@ -4751,6 +5005,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/freebsd-arm64@npm:0.19.11"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/freebsd-arm64@npm:0.19.2"
@@ -4779,6 +5040,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/freebsd-x64@npm:0.19.11"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/freebsd-x64@npm:0.19.2"
@@ -4807,6 +5075,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-arm64@npm:0.19.11"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-arm64@npm:0.19.2"
@@ -4835,6 +5110,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-arm@npm:0.19.11"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-arm@npm:0.19.2"
@@ -4863,6 +5145,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-ia32@npm:0.19.11"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-ia32@npm:0.19.2"
@@ -4891,6 +5180,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-loong64@npm:0.19.11"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-loong64@npm:0.19.2"
@@ -4919,6 +5215,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-mips64el@npm:0.19.11"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-mips64el@npm:0.19.2"
@@ -4947,6 +5250,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-ppc64@npm:0.19.11"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-ppc64@npm:0.19.2"
@@ -4975,6 +5285,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-riscv64@npm:0.19.11"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-riscv64@npm:0.19.2"
@@ -5003,6 +5320,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-s390x@npm:0.19.11"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-s390x@npm:0.19.2"
@@ -5031,6 +5355,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/linux-x64@npm:0.19.11"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/linux-x64@npm:0.19.2"
@@ -5059,6 +5390,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/netbsd-x64@npm:0.19.11"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/netbsd-x64@npm:0.19.2"
@@ -5087,6 +5425,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/openbsd-x64@npm:0.19.11"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/openbsd-x64@npm:0.19.2"
@@ -5115,6 +5460,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/sunos-x64@npm:0.19.11"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/sunos-x64@npm:0.19.2"
@@ -5143,6 +5495,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/win32-arm64@npm:0.19.11"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/win32-arm64@npm:0.19.2"
@@ -5171,6 +5530,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/win32-ia32@npm:0.19.11"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/win32-ia32@npm:0.19.2"
@@ -5199,6 +5565,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.19.11":
+  version: 0.19.11
+  resolution: "@esbuild/win32-x64@npm:0.19.11"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.19.2":
   version: 0.19.2
   resolution: "@esbuild/win32-x64@npm:0.19.2"
@@ -5206,7 +5579,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/eslint-utils@npm:^4.2.0":
+"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
   version: 4.4.0
   resolution: "@eslint-community/eslint-utils@npm:4.4.0"
   dependencies:
@@ -5224,6 +5597,13 @@ __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"
@@ -5714,6 +6094,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@hookform/resolvers@npm:3.3.2":
+  version: 3.3.2
+  resolution: "@hookform/resolvers@npm:3.3.2"
+  peerDependencies:
+    react-hook-form: ^7.0.0
+  checksum: 538c86a744c71735a5c3be7b450c704111fe53a52634463ed3c801681d57504d3717ab5f7bd20e99ee87d81a9da0aca640af0837eb807486d9d5c927269a9b37
+  languageName: node
+  linkType: hard
+
 "@hookform/resolvers@npm:^3.3.1":
   version: 3.3.1
   resolution: "@hookform/resolvers@npm:3.3.1"
@@ -7268,6 +7657,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@medusajs/admin-bundler@workspace:packages/admin-next/admin-bundler":
+  version: 0.0.0-use.local
+  resolution: "@medusajs/admin-bundler@workspace:packages/admin-next/admin-bundler"
+  dependencies:
+    "@medusajs/ui-preset": ^1.0.2
+    "@medusajs/vite-plugin-extension": "*"
+    "@vitejs/plugin-react": ^4.2.1
+    autoprefixer: ^10.4.16
+    commander: ^11.1.0
+    deepmerge: ^4.3.1
+    glob: ^7.1.6
+    postcss: ^8.4.32
+    rimraf: 5.0.1
+    tailwindcss: ^3.3.6
+    tsup: ^8.0.1
+    typescript: ^5.3.3
+    vite: 5.0.10
+  bin:
+    medusa-admin: ./bin/medusa-admin.js
+  languageName: unknown
+  linkType: soft
+
+"@medusajs/admin-shared@*, @medusajs/admin-shared@workspace:packages/admin-next/admin-shared":
+  version: 0.0.0-use.local
+  resolution: "@medusajs/admin-shared@workspace:packages/admin-next/admin-shared"
+  dependencies:
+    typescript: ^5.3.3
+  languageName: unknown
+  linkType: soft
+
 "@medusajs/admin-ui@^2.1.10, @medusajs/admin-ui@workspace:packages/admin-ui":
   version: 0.0.0-use.local
   resolution: "@medusajs/admin-ui@workspace:packages/admin-ui"
@@ -7526,6 +7945,44 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@medusajs/dashboard@workspace:packages/admin-next/dashboard":
+  version: 0.0.0-use.local
+  resolution: "@medusajs/dashboard@workspace:packages/admin-next/dashboard"
+  dependencies:
+    "@hookform/resolvers": 3.3.2
+    "@medusajs/icons": "workspace:^"
+    "@medusajs/medusa": "workspace:^"
+    "@medusajs/ui": "workspace:^"
+    "@medusajs/ui-preset": "workspace:^"
+    "@medusajs/vite-plugin-extension": "workspace:^"
+    "@radix-ui/react-collapsible": 1.0.3
+    "@tanstack/react-query": 4.22.0
+    "@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
+    i18next: 23.7.11
+    i18next-browser-languagedetector: 7.2.0
+    i18next-http-backend: 2.4.2
+    medusa-react: "workspace:^"
+    postcss: 8.4.32
+    react: 18.2.0
+    react-dom: 18.2.0
+    react-hook-form: 7.49.1
+    react-i18next: 13.5.0
+    react-router-dom: 6.20.1
+    tailwindcss: 3.3.6
+    typescript: 5.2.2
+    vite: 5.0.10
+    zod: 3.22.4
+  languageName: unknown
+  linkType: soft
+
 "@medusajs/event-bus-local@workspace:*, @medusajs/event-bus-local@workspace:packages/event-bus-local":
   version: 0.0.0-use.local
   resolution: "@medusajs/event-bus-local@workspace:packages/event-bus-local"
@@ -7576,7 +8033,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@medusajs/icons@^1.1.0, @medusajs/icons@workspace:packages/design-system/icons":
+"@medusajs/icons@^1.1.0, @medusajs/icons@workspace:^, @medusajs/icons@workspace:packages/design-system/icons":
   version: 0.0.0-use.local
   resolution: "@medusajs/icons@workspace:packages/design-system/icons"
   dependencies:
@@ -7739,7 +8196,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@medusajs/medusa@^1.12.1, @medusajs/medusa@^1.12.2, @medusajs/medusa@^1.15.0, @medusajs/medusa@^1.17.1, @medusajs/medusa@^1.17.4, @medusajs/medusa@^1.19.0, @medusajs/medusa@workspace:*, @medusajs/medusa@workspace:packages/medusa":
+"@medusajs/medusa@^1.12.1, @medusajs/medusa@^1.12.2, @medusajs/medusa@^1.15.0, @medusajs/medusa@^1.17.1, @medusajs/medusa@^1.17.4, @medusajs/medusa@^1.19.0, @medusajs/medusa@workspace:*, @medusajs/medusa@workspace:^, @medusajs/medusa@workspace:packages/medusa":
   version: 0.0.0-use.local
   resolution: "@medusajs/medusa@workspace:packages/medusa"
   dependencies:
@@ -8048,7 +8505,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@medusajs/ui-preset@^1.0.2, @medusajs/ui-preset@workspace:packages/design-system/ui-preset":
+"@medusajs/ui-preset@^1.0.2, @medusajs/ui-preset@workspace:^, @medusajs/ui-preset@workspace:packages/design-system/ui-preset":
   version: 0.0.0-use.local
   resolution: "@medusajs/ui-preset@workspace:packages/design-system/ui-preset"
   dependencies:
@@ -8063,7 +8520,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@medusajs/ui@^2.2.4, @medusajs/ui@workspace:packages/design-system/ui":
+"@medusajs/ui@^2.2.4, @medusajs/ui@workspace:^, @medusajs/ui@workspace:packages/design-system/ui":
   version: 0.0.0-use.local
   resolution: "@medusajs/ui@workspace:packages/design-system/ui"
   dependencies:
@@ -8158,6 +8615,27 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@medusajs/vite-plugin-extension@*, @medusajs/vite-plugin-extension@workspace:^, @medusajs/vite-plugin-extension@workspace:packages/admin-next/vite-plugin-extension":
+  version: 0.0.0-use.local
+  resolution: "@medusajs/vite-plugin-extension@workspace:packages/admin-next/vite-plugin-extension"
+  dependencies:
+    "@babel/parser": 7.23.5
+    "@babel/traverse": 7.23.5
+    "@babel/types": 7.22.5
+    "@medusajs/admin-shared": "*"
+    "@types/babel__traverse": 7.20.5
+    "@types/node": ^20.10.4
+    chokidar: 3.5.3
+    fdir: 6.1.1
+    magic-string: 0.30.5
+    tsup: 8.0.1
+    typescript: 5.3.3
+    vite: 5.0.10
+  peerDependencies:
+    vite: ^5.0.0
+  languageName: unknown
+  linkType: soft
+
 "@medusajs/workflows-sdk@^0.1.0, @medusajs/workflows-sdk@workspace:packages/workflows-sdk":
   version: 0.0.0-use.local
   resolution: "@medusajs/workflows-sdk@workspace:packages/workflows-sdk"
@@ -9255,6 +9733,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/primitive@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/primitive@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  checksum: 4b0a4bdbf312df2317c3a3c728b0d2249242220a93eedaffecd4207bc0b8d3f28498c4b15f16c8f60b8292302d6d28ef73d751f63e77ef9bf6a318f52c6dc19b
+  languageName: node
+  linkType: hard
+
 "@radix-ui/primitive@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/primitive@npm:1.0.1"
@@ -9437,6 +9924,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-compose-refs@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 449148920c1df82ffcdd78a68d3485036d198b41b9fcfc407b008df5dfefc8f1a60391f7b53e2bc69e0fdbbba846b0b79fede5f7ed35bca82af4eff6c56b8854
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
@@ -9452,6 +9950,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-context@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-context@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 3744c8f6291d1c0645dfb2497e232b2084f8c62075258370987592e3533710dc84b8ae983489ca354c0567eff3f311230f6c696bc4536ba0e431068b79196b00
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-context@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-context@npm:1.0.1"
@@ -9467,6 +9976,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dialog@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-dialog@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-context": 1.0.0
+    "@radix-ui/react-dismissable-layer": 1.0.0
+    "@radix-ui/react-focus-guards": 1.0.0
+    "@radix-ui/react-focus-scope": 1.0.0
+    "@radix-ui/react-id": 1.0.0
+    "@radix-ui/react-portal": 1.0.0
+    "@radix-ui/react-presence": 1.0.0
+    "@radix-ui/react-primitive": 1.0.0
+    "@radix-ui/react-slot": 1.0.0
+    "@radix-ui/react-use-controllable-state": 1.0.0
+    aria-hidden: ^1.1.1
+    react-remove-scroll: 2.5.4
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: af2afc8b88f6fc542d6e4d8594afcf038dff47baed76fccbc619e1ac99c7a6d0735ef736bfa1c89d64a56f0e0a70c01f8290ffc5c1e03dde7c643a09b6541b05
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dialog@npm:1.0.4, @radix-ui/react-dialog@npm:^1.0.4":
   version: 1.0.4
   resolution: "@radix-ui/react-dialog@npm:1.0.4"
@@ -9515,6 +10050,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-dismissable-layer@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.0
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-primitive": 1.0.0
+    "@radix-ui/react-use-callback-ref": 1.0.0
+    "@radix-ui/react-use-escape-keydown": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 4aec9216d85671ea1c22ac56f0bf98dde3ddc10d912bedc9bfdbc230057411c4567cdb014fc006495bcbffeffab904fbfa0622e1bbd8b30c9bb327e0304dea33
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-dismissable-layer@npm:1.0.4":
   version: 1.0.4
   resolution: "@radix-ui/react-dismissable-layer@npm:1.0.4"
@@ -9589,6 +10141,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-guards@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-focus-guards@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 3b6578b31ad042d06e00fc511cd465fb019cfc2726edcd9b56a6d47f22049c1c6f1aec203a099c9f1e1bb5870c47cfaf9a969a5448159b90346b47b8c24ceef7
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-focus-guards@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
@@ -9604,6 +10167,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-focus-scope@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-focus-scope@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-primitive": 1.0.0
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 0c4cad9c3db4cb7882435fac05ee7ae3b3e0244410d9b8d264370a1edf56b0c7285df6dffe556ba7939f4a3d887d0d5044acee8cb2f04818b91bcbe9b912c2a7
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-focus-scope@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-focus-scope@npm:1.0.3"
@@ -9648,6 +10226,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-id@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-id@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 56e9817abdc209e0d5169ba2e6d3de477101650b02c04f7f1477800cfd3a9e8bc415bcd14760557a17de8cfcae571342e4f6a5ec182b05d613ae7d77309a861c
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-id@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-id@npm:1.0.1"
@@ -9813,6 +10403,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-portal@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-portal@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-primitive": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: c7330e05d99cbb52bfc16c60c996edf2ace0d80b78eb3828dbce45fe53558a5474dfc347d152a956259740d37d92ec63a88638a22ab808c5f80681f1ad41a810
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-portal@npm:1.0.3, @radix-ui/react-portal@npm:^1.0.2, @radix-ui/react-portal@npm:^1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-portal@npm:1.0.3"
@@ -9853,6 +10456,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-presence@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-presence@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-use-layout-effect": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 2d696781e58f7acc45df2965b4756d5072a80704677cb6905a927754bd2076c87cd137820d3e58d8c2118a9b12aaa82fee79c6fef49b80012a12983002101fc5
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-presence@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-presence@npm:1.0.1"
@@ -9874,6 +10491,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-primitive@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-primitive@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-slot": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: a68b3afe6eb39e1c73d6cc162283ce071b2a5793e5c417547a0b43281654346be7474f51c7055b5d2636667efbab863eb76f785e8484e63c670b0a9d863684be
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-primitive@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-primitive@npm:1.0.3"
@@ -10079,6 +10709,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-slot@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-slot@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a02573ae7c637b16a72d8511d879db37f33cf35b34b8d2cfe507ba8312abbb8e4075b0cb8cd39c5ba89ce341045375f83634457113256321e7a4c3c3638d2955
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
@@ -10284,6 +10926,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-callback-ref@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 91bf130d39cfbda61de83fd4a6893cf459b3d72ec01268e3761eafd3c709f70f82940a6b46676ba6fe06fc707fdefe580946b3b99bb2af5f59887aa203e56533
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
@@ -10299,6 +10952,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-controllable-state@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fa2ad3b70bec91b628883455152b7ce19d321199e3677051822c14aa3941901f5fd14cddec1c9ab0998e4061fd3b8397727aef856fec099c419d8e1e3d7f75de
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-controllable-state@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
@@ -10315,6 +10980,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-escape-keydown@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/react-use-callback-ref": 1.0.0
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a64e8dbd0e37b53c6cb9f370923afbf29646d6c28dcadd2a7076451692b70263916b9926322ecd7cc3975b2a5111903ec5abcda7e389b35ef197eb1aba17be38
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-escape-keydown@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
@@ -10331,6 +11008,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-layout-effect@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.0"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 04bbcddbfaa2863cbd64978b70925d0a0b664131f8c33a518b0df2866966840b3d72302258b0f8cb7ed45b50b6d52d6cbdca00cc159c47f323eb8d7b70126d83
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-layout-effect@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
@@ -10825,6 +11513,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@remix-run/router@npm:1.13.1":
+  version: 1.13.1
+  resolution: "@remix-run/router@npm:1.13.1"
+  checksum: 2f8c213dd0f1ebc0c2c1357badf6e1a65a42c40d38558f5e5085fbe7b144439eb326955d97ae0b2505f95ec8defa77a2492d44f5b10f351a0a90a50758169a22
+  languageName: node
+  linkType: hard
+
 "@remix-run/router@npm:1.3.1":
   version: 1.3.1
   resolution: "@remix-run/router@npm:1.3.1"
@@ -11133,6 +11828,97 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/rollup-android-arm-eabi@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.2"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-android-arm64@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-android-arm64@npm:4.9.2"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-darwin-arm64@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.9.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-darwin-x64@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-darwin-x64@npm:4.9.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.9.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm64-gnu@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.9.2"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm64-musl@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.9.2"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-riscv64-gnu@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.9.2"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-gnu@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.9.2"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-musl@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.9.2"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-arm64-msvc@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.9.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-ia32-msvc@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.9.2"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-x64-msvc@npm:4.9.2":
+  version: 4.9.2
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.9.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@rushstack/ts-command-line@npm:^4.12.2":
   version: 4.15.1
   resolution: "@rushstack/ts-command-line@npm:4.15.1"
@@ -15583,6 +16369,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-table@npm:8.10.7":
+  version: 8.10.7
+  resolution: "@tanstack/react-table@npm:8.10.7"
+  dependencies:
+    "@tanstack/table-core": 8.10.7
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: 2ddf6f90b06e7af069f16dbe5d0dc8c8afab3de88c25e33f6c297beaf2507c2e46fee1f746f7977d48bad2114909bba0016026fc2b6a85bcaee472cdafdc7ffd
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-table@npm:^8.7.9":
   version: 8.9.3
   resolution: "@tanstack/react-table@npm:8.9.3"
@@ -15595,6 +16393,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/table-core@npm:8.10.7":
+  version: 8.10.7
+  resolution: "@tanstack/table-core@npm:8.10.7"
+  checksum: 3f671484319094443bb2db86356f408d4246e22bebd7ad444edc919fef131899384c3a27261c5ee01fb18887bc9157c5a0d9db3e32aae940ce5416f6e58b038b
+  languageName: node
+  linkType: hard
+
 "@tanstack/table-core@npm:8.9.3":
   version: 8.9.3
   resolution: "@tanstack/table-core@npm:8.9.3"
@@ -15835,6 +16640,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__core@npm:^7.20.5":
+  version: 7.20.5
+  resolution: "@types/babel__core@npm:7.20.5"
+  dependencies:
+    "@babel/parser": ^7.20.7
+    "@babel/types": ^7.20.7
+    "@types/babel__generator": "*"
+    "@types/babel__template": "*"
+    "@types/babel__traverse": "*"
+  checksum: bdee3bb69951e833a4b811b8ee9356b69a61ed5b7a23e1a081ec9249769117fa83aaaf023bb06562a038eb5845155ff663e2d5c75dd95c1d5ccc91db012868ff
+  languageName: node
+  linkType: hard
+
 "@types/babel__generator@npm:*":
   version: 7.6.4
   resolution: "@types/babel__generator@npm:7.6.4"
@@ -15863,6 +16681,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__traverse@npm:7.20.5":
+  version: 7.20.5
+  resolution: "@types/babel__traverse@npm:7.20.5"
+  dependencies:
+    "@babel/types": ^7.20.7
+  checksum: 033abcb2f4c084ad33e30c3efaad82161240f351e3c71b6154ed289946b33b363696c0fbd42502b68e4582a87413c418321f40eb1ea863e34fe525641345e05b
+  languageName: node
+  linkType: hard
+
 "@types/babel__traverse@npm:^7.18.0":
   version: 7.20.3
   resolution: "@types/babel__traverse@npm:7.20.3"
@@ -16416,6 +17243,13 @@ __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"
@@ -16626,6 +17460,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^20.10.4":
+  version: 20.10.6
+  resolution: "@types/node@npm:20.10.6"
+  dependencies:
+    undici-types: ~5.26.4
+  checksum: 6692ccfa8552ef60c4069fda3c8de726c23e8d403cdf788e3c7efa769987e80fbda5f02723dd857f9de7df24a5fa40b3ed4580ec3c5cbac04eba44cf7b2ab1dc
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^8.5.7":
   version: 8.10.66
   resolution: "@types/node@npm:8.10.66"
@@ -16772,6 +17615,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:18.2.17":
+  version: 18.2.17
+  resolution: "@types/react-dom@npm:18.2.17"
+  dependencies:
+    "@types/react": "*"
+  checksum: 33b53078ed7e9e0cfc4dc691e938f7db1cc06353bc345947b41b581c3efe2b980c9e4eb6460dbf5ddc521dd91959194c970221a2bd4bfad9d23ebce338e12938
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^17.0.18":
   version: 17.0.20
   resolution: "@types/react-dom@npm:17.0.20"
@@ -16828,6 +17680,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:18.2.43":
+  version: 18.2.43
+  resolution: "@types/react@npm:18.2.43"
+  dependencies:
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: 10477a50fbd3c0cc5b8a2ade679f442717f68fb27c8460b2aa1d3256cd18c48f742bbe5b9ee37a8c4c5f832ffa37b3a23c09fd96dd880a8e3182d8929c05e803
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:>=16, @types/react@npm:^18.2.0, @types/react@npm:^18.2.14":
   version: 18.2.31
   resolution: "@types/react@npm:18.2.31"
@@ -17207,6 +18070,31 @@ __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"
@@ -17269,6 +18157,24 @@ __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"
@@ -17333,6 +18239,16 @@ __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"
@@ -17350,6 +18266,23 @@ __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"
@@ -17371,6 +18304,13 @@ __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"
@@ -17425,6 +18365,24 @@ __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"
@@ -17443,6 +18401,23 @@ __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"
@@ -17491,6 +18466,27 @@ __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"
+  peerDependencies:
+    "@babel/runtime": ">=7.10.0"
+    react: ">=18.0.0"
+    react-dom: ">=18.0.0"
+  checksum: d1278e92320251b1b61ecacd5c701989bd732ce4155b14a00b674d151c5b0da1b4a043b8696d23675006bf345559e56492960e33a9c0f40bc3c18eed031a136d
+  languageName: node
+  linkType: hard
+
 "@vercel/webpack-asset-relocator-loader@npm:^1.7.0":
   version: 1.7.3
   resolution: "@vercel/webpack-asset-relocator-loader@npm:1.7.3"
@@ -17559,6 +18555,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitejs/plugin-react@npm:4.2.1, @vitejs/plugin-react@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "@vitejs/plugin-react@npm:4.2.1"
+  dependencies:
+    "@babel/core": ^7.23.5
+    "@babel/plugin-transform-react-jsx-self": ^7.23.3
+    "@babel/plugin-transform-react-jsx-source": ^7.23.3
+    "@types/babel__core": ^7.20.5
+    react-refresh: ^0.14.0
+  peerDependencies:
+    vite: ^4.2.0 || ^5.0.0
+  checksum: de1eec44d703f32e5b58e776328ca20793657fe991835d15b290230b19a2a08be5d31501d424279ae13ecfed28044c117b69d746891c8d9b92c69e8a8907e989
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-react@npm:^3.0.1":
   version: 3.1.0
   resolution: "@vitejs/plugin-react@npm:3.1.0"
@@ -19227,6 +20238,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:10.4.16, autoprefixer@npm:^10.4.16":
+  version: 10.4.16
+  resolution: "autoprefixer@npm:10.4.16"
+  dependencies:
+    browserslist: ^4.21.10
+    caniuse-lite: ^1.0.30001538
+    fraction.js: ^4.3.6
+    normalize-range: ^0.1.2
+    picocolors: ^1.0.0
+    postcss-value-parser: ^4.2.0
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: e00256e754d481a026d928bca729b25954074dd142dbec022f0a7db0d3bbc0dc2e2dc7542e94fec22eff81e21fe140e6856448e2d9a002660cb1e2ad434daee0
+  languageName: node
+  linkType: hard
+
 "autoprefixer@npm:^10.1.0, autoprefixer@npm:^10.4.0, autoprefixer@npm:^10.4.13, autoprefixer@npm:^10.4.14":
   version: 10.4.14
   resolution: "autoprefixer@npm:10.4.14"
@@ -20651,6 +21680,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.22.2":
+  version: 4.22.2
+  resolution: "browserslist@npm:4.22.2"
+  dependencies:
+    caniuse-lite: ^1.0.30001565
+    electron-to-chromium: ^1.4.601
+    node-releases: ^2.0.14
+    update-browserslist-db: ^1.0.13
+  bin:
+    browserslist: cli.js
+  checksum: 2a331aab90503130043ca41dd5d281fa1e89d5e076d07a2d75e76bf4d693bd56e73d5abcd8c4f39119da6328d450578c216cf1cd5c99b82d8a90a2ae6271b465
+  languageName: node
+  linkType: hard
+
 "bs-logger@npm:0.x":
   version: 0.2.6
   resolution: "bs-logger@npm:0.2.6"
@@ -21134,6 +22177,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565":
+  version: 1.0.30001572
+  resolution: "caniuse-lite@npm:1.0.30001572"
+  checksum: 7d02570fa576b158d96739f2c65ea3ad22e90a8b028a343902de1f13b7db8512144870f1d29ec5e9ae7189d96158d9643871b6e902e6680a06b27a9afe556da2
+  languageName: node
+  linkType: hard
+
 "capital-case@npm:^1.0.4":
   version: 1.0.4
   resolution: "capital-case@npm:1.0.4"
@@ -21389,6 +22439,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:3.5.3, chokidar@npm:^3.4.0, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3":
+  version: 3.5.3
+  resolution: "chokidar@npm:3.5.3"
+  dependencies:
+    anymatch: ~3.1.2
+    braces: ~3.0.2
+    fsevents: ~2.3.2
+    glob-parent: ~5.1.2
+    is-binary-path: ~2.1.0
+    is-glob: ~4.0.1
+    normalize-path: ~3.0.0
+    readdirp: ~3.6.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: 1076953093e0707c882a92c66c0f56ba6187831aa51bb4de878c1fec59ae611a3bf02898f190efec8e77a086b8df61c2b2a3ea324642a0558bdf8ee6c5dc9ca1
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:^2.1.8":
   version: 2.1.8
   resolution: "chokidar@npm:2.1.8"
@@ -21412,25 +22481,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.4.0, chokidar@npm:^3.4.1, chokidar@npm:^3.4.2, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3":
-  version: 3.5.3
-  resolution: "chokidar@npm:3.5.3"
-  dependencies:
-    anymatch: ~3.1.2
-    braces: ~3.0.2
-    fsevents: ~2.3.2
-    glob-parent: ~5.1.2
-    is-binary-path: ~2.1.0
-    is-glob: ~4.0.1
-    normalize-path: ~3.0.0
-    readdirp: ~3.6.0
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 1076953093e0707c882a92c66c0f56ba6187831aa51bb4de878c1fec59ae611a3bf02898f190efec8e77a086b8df61c2b2a3ea324642a0558bdf8ee6c5dc9ca1
-  languageName: node
-  linkType: hard
-
 "chownr@npm:^1.1.1, chownr@npm:^1.1.4":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -21833,6 +22883,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cmdk@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "cmdk@npm:0.2.0"
+  dependencies:
+    "@radix-ui/react-dialog": 1.0.0
+    command-score: 0.1.2
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: bd706c78fc933562acc5723bb4663bad68b34f4e065405de16d400a76ed4c36633de63ac3b6458e8aa93aba10ca5116563d1fc00b9fb298f6876175e190c3479
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -22017,6 +23080,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"command-score@npm:0.1.2":
+  version: 0.1.2
+  resolution: "command-score@npm:0.1.2"
+  checksum: 0fe355e311f339c217befade6337e734c8e199eaf8442cf65233461134b6bac8a53c85c2c1c929f1b1b8c6125772a50d55991a27ea486cdd846e8c083c852706
+  languageName: node
+  linkType: hard
+
 "commander@npm:*, commander@npm:11.0.0, commander@npm:~11.0.0":
   version: 11.0.0
   resolution: "commander@npm:11.0.0"
@@ -22038,6 +23108,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "commander@npm:11.1.0"
+  checksum: 13cc6ac875e48780250f723fb81c1c1178d35c5decb1abb1b628b3177af08a8554e76b2c0f29de72d69eef7c864d12613272a71fabef8047922bc622ab75a179
+  languageName: node
+  linkType: hard
+
 "commander@npm:^2.19.0, commander@npm:^2.20.0, commander@npm:^2.20.3":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
@@ -22762,6 +23839,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cross-fetch@npm:4.0.0":
+  version: 4.0.0
+  resolution: "cross-fetch@npm:4.0.0"
+  dependencies:
+    node-fetch: ^2.6.12
+  checksum: 386727dc4c6b044746086aced959ff21101abb85c43df5e1d151547ccb6f338f86dec3f28b9dbddfa8ff5b9ec8662ed2263ad4607a93b2dc354fb7fe3bbb898a
+  languageName: node
+  linkType: hard
+
 "cross-fetch@npm:^3.1.5, cross-fetch@npm:^3.1.6":
   version: 3.1.8
   resolution: "cross-fetch@npm:3.1.8"
@@ -24407,6 +25493,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.4.601":
+  version: 1.4.616
+  resolution: "electron-to-chromium@npm:1.4.616"
+  checksum: a02416f3293d28120d5132546a6aea614ebd2d820a684f41b1c20138331922ddc672c4a59bfc4b91bb5aee1ba608f6c10cd3f69c344cd434397e7f14a4c97348
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3":
   version: 6.5.4
   resolution: "elliptic@npm:6.5.4"
@@ -25225,6 +26318,86 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild@npm:^0.19.2, esbuild@npm:^0.19.3":
+  version: 0.19.11
+  resolution: "esbuild@npm:0.19.11"
+  dependencies:
+    "@esbuild/aix-ppc64": 0.19.11
+    "@esbuild/android-arm": 0.19.11
+    "@esbuild/android-arm64": 0.19.11
+    "@esbuild/android-x64": 0.19.11
+    "@esbuild/darwin-arm64": 0.19.11
+    "@esbuild/darwin-x64": 0.19.11
+    "@esbuild/freebsd-arm64": 0.19.11
+    "@esbuild/freebsd-x64": 0.19.11
+    "@esbuild/linux-arm": 0.19.11
+    "@esbuild/linux-arm64": 0.19.11
+    "@esbuild/linux-ia32": 0.19.11
+    "@esbuild/linux-loong64": 0.19.11
+    "@esbuild/linux-mips64el": 0.19.11
+    "@esbuild/linux-ppc64": 0.19.11
+    "@esbuild/linux-riscv64": 0.19.11
+    "@esbuild/linux-s390x": 0.19.11
+    "@esbuild/linux-x64": 0.19.11
+    "@esbuild/netbsd-x64": 0.19.11
+    "@esbuild/openbsd-x64": 0.19.11
+    "@esbuild/sunos-x64": 0.19.11
+    "@esbuild/win32-arm64": 0.19.11
+    "@esbuild/win32-ia32": 0.19.11
+    "@esbuild/win32-x64": 0.19.11
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 0fd913124089e26d30ec30f73b94d4ef9607935251df3253f869106980a5d4c78aa517738c8746abe6e933262e91a77d31427ce468ed8fc7fe498a20f7f92fbc
+  languageName: node
+  linkType: hard
+
 "escalade@npm:^3.1.1":
   version: 3.1.1
   resolution: "escalade@npm:3.1.1"
@@ -25467,6 +26640,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react-refresh@npm:^0.4.5":
+  version: 0.4.5
+  resolution: "eslint-plugin-react-refresh@npm:0.4.5"
+  peerDependencies:
+    eslint: ">=7"
+  checksum: ea696811c6264d2efee10efe07f80aaae75ded66c941d8d5ce65e15e6c4bb8ad50ac225310ed04f35ed68d2d57937ba4c6f06d9306e78931d583648abf496a41
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-react@npm:^7.30.1, eslint-plugin-react@npm:^7.31.11":
   version: 7.32.2
   resolution: "eslint-plugin-react@npm:7.32.2"
@@ -26622,6 +27804,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fdir@npm:6.1.1":
+  version: 6.1.1
+  resolution: "fdir@npm:6.1.1"
+  peerDependencies:
+    picomatch: 3.x
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: 547db0a2624a3ca6d11e4d2950cba6d0e71a53af58785c43ad678c3cba3ae1e7c38c522718e977d9387570cc7504181aa2a08f3e7df9a0920ae9a59552c2b8af
+  languageName: node
+  linkType: hard
+
 "fecha@npm:^4.2.0":
   version: 4.2.3
   resolution: "fecha@npm:4.2.3"
@@ -27214,6 +28408,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fraction.js@npm:^4.3.6":
+  version: 4.3.7
+  resolution: "fraction.js@npm:4.3.7"
+  checksum: df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711
+  languageName: node
+  linkType: hard
+
 "fragment-cache@npm:^0.2.1":
   version: 0.2.1
   resolution: "fragment-cache@npm:0.2.1"
@@ -27461,6 +28662,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@npm:~2.3.3":
+  version: 2.3.3
+  resolution: "fsevents@npm:2.3.3"
+  dependencies:
+    node-gyp: latest
+  checksum: a1f0c44595123ed717febbc478aa952e47adfc28e2092be66b8ab1635147254ca6cfe1df792a8997f22716d4cbafc73309899ff7bfac2ac3ad8cf2e4ecc3ec60
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@patch:fsevents@^1.2.7#~builtin<compat/fsevents>":
   version: 1.2.13
   resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=18f3a7"
@@ -27480,6 +28691,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@patch:fsevents@~2.3.3#~builtin<compat/fsevents>":
+  version: 2.3.3
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin<compat/fsevents>::version=2.3.3&hash=18f3a7"
+  dependencies:
+    node-gyp: latest
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "function-bind@npm:^1.1.1":
   version: 1.1.1
   resolution: "function-bind@npm:1.1.1"
@@ -29643,6 +30863,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next-browser-languagedetector@npm:7.2.0":
+  version: 7.2.0
+  resolution: "i18next-browser-languagedetector@npm:7.2.0"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+  checksum: d7676e6c9895d46e659effaeba11f10c39cbe99429560667de7689cb56db6977239d350be850c4caf4279781c19c50a7193cb9cc38bb485f391b8e1893e407ae
+  languageName: node
+  linkType: hard
+
 "i18next-browser-languagedetector@npm:^7.0.1":
   version: 7.1.0
   resolution: "i18next-browser-languagedetector@npm:7.1.0"
@@ -29652,6 +30881,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next-http-backend@npm:2.4.2":
+  version: 2.4.2
+  resolution: "i18next-http-backend@npm:2.4.2"
+  dependencies:
+    cross-fetch: 4.0.0
+  checksum: a117cd6d0cdcf6da6633f6a3ad9ec03cb77af49949cff09bda6660a7bdd3235768db91b367ec1e1b16026594c78643252ffc3cffc99cdafb5d3a847b0475485b
+  languageName: node
+  linkType: hard
+
 "i18next-http-backend@npm:^2.2.1":
   version: 2.2.1
   resolution: "i18next-http-backend@npm:2.2.1"
@@ -29688,6 +30926,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next@npm:23.7.11":
+  version: 23.7.11
+  resolution: "i18next@npm:23.7.11"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+  checksum: 66f166bebbde565d4e0ed98b0f046f49d97c591fa8e4919bd9badfb6be3b1057ec137b9332beb4835b2d6714af243726dc3996d60f54949cfd23c839b0f8a3b6
+  languageName: node
+  linkType: hard
+
 "i18next@npm:^22.0.4, i18next@npm:^22.5.0":
   version: 22.5.1
   resolution: "i18next@npm:22.5.1"
@@ -35341,6 +36588,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:0.30.5, magic-string@npm:^0.30.0, magic-string@npm:^0.30.2, magic-string@npm:^0.30.3, magic-string@npm:~0.30.0":
+  version: 0.30.5
+  resolution: "magic-string@npm:0.30.5"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.4.15
+  checksum: 38ac220ca7539e96da7ea2f38d85796bdf5c69b6bcae728c4bc2565084e6dc326b9174ee9770bea345cf6c9b3a24041b767167874fab5beca874d2356a9d1520
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.25.7":
   version: 0.25.9
   resolution: "magic-string@npm:0.25.9"
@@ -35359,15 +36615,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.0, magic-string@npm:^0.30.2, magic-string@npm:^0.30.3, magic-string@npm:~0.30.0":
-  version: 0.30.5
-  resolution: "magic-string@npm:0.30.5"
-  dependencies:
-    "@jridgewell/sourcemap-codec": ^1.4.15
-  checksum: 38ac220ca7539e96da7ea2f38d85796bdf5c69b6bcae728c4bc2565084e6dc326b9174ee9770bea345cf6c9b3a24041b767167874fab5beca874d2356a9d1520
-  languageName: node
-  linkType: hard
-
 "mailchimp-api-v3@npm:^1.14.0":
   version: 1.15.0
   resolution: "mailchimp-api-v3@npm:1.15.0"
@@ -36373,7 +37620,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"medusa-react@^9.0.11, medusa-react@^9.0.12, medusa-react@workspace:packages/medusa-react":
+"medusa-react@^9.0.11, medusa-react@^9.0.12, medusa-react@workspace:^, medusa-react@workspace:packages/medusa-react":
   version: 0.0.0-use.local
   resolution: "medusa-react@workspace:packages/medusa-react"
   dependencies:
@@ -37474,6 +38721,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "nanoid@npm:3.3.7"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: e3fb661aa083454f40500473bb69eedb85dc160e763150b9a2c567c7e9ff560ce028a9f833123b618a6ea742e311138b591910e795614a629029e86e180660f3
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^4.0.2":
   version: 4.0.2
   resolution: "nanoid@npm:4.0.2"
@@ -37933,6 +39189,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.14":
+  version: 2.0.14
+  resolution: "node-releases@npm:2.0.14"
+  checksum: 199fc93773ae70ec9969bc6d5ac5b2bbd6eb986ed1907d751f411fef3ede0e4bfdb45ceb43711f8078bea237b6036db8b1bf208f6ff2b70c7d615afd157f3ab9
+  languageName: node
+  linkType: hard
+
 "node-schedule@npm:^2.1.1":
   version: 2.1.1
   resolution: "node-schedule@npm:2.1.1"
@@ -40672,6 +41935,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:8.4.32, postcss@npm:^8.4.32":
+  version: 8.4.32
+  resolution: "postcss@npm:8.4.32"
+  dependencies:
+    nanoid: ^3.3.7
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 39308a9195fa34d4dbdd7b58a896cff0c7809f84f7a4ac1b95b68ca86c9138a395addff33075668ed3983d41b90aac05754c445237a9365eb1c3a5602ebd03ad
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^7.0.14, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.36, postcss@npm:^7.0.5, postcss@npm:^7.0.6":
   version: 7.0.39
   resolution: "postcss@npm:7.0.39"
@@ -41846,6 +43120,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:18.2.0, react-dom@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
+  dependencies:
+    loose-envify: ^1.1.0
+    scheduler: ^0.23.0
+  peerDependencies:
+    react: ^18.2.0
+  checksum: 66dfc5f93e13d0674e78ef41f92ed21dfb80f9c4ac4ac25a4b51046d41d4d2186abc915b897f69d3d0ebbffe6184e7c5876f2af26bfa956f179225d921be713a
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^15.7.0":
   version: 15.7.0
   resolution: "react-dom@npm:15.7.0"
@@ -41873,18 +43159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.2.0":
-  version: 18.2.0
-  resolution: "react-dom@npm:18.2.0"
-  dependencies:
-    loose-envify: ^1.1.0
-    scheduler: ^0.23.0
-  peerDependencies:
-    react: ^18.2.0
-  checksum: 66dfc5f93e13d0674e78ef41f92ed21dfb80f9c4ac4ac25a4b51046d41d4d2186abc915b897f69d3d0ebbffe6184e7c5876f2af26bfa956f179225d921be713a
-  languageName: node
-  linkType: hard
-
 "react-element-to-jsx-string@npm:^14.3.4":
   version: 14.3.4
   resolution: "react-element-to-jsx-string@npm:14.3.4"
@@ -41976,6 +43250,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hook-form@npm:7.49.1":
+  version: 7.49.1
+  resolution: "react-hook-form@npm:7.49.1"
+  peerDependencies:
+    react: ^16.8.0 || ^17 || ^18
+  checksum: 9496155273220a432f897fbe1c393f11b273cd1c9c2ede70e301df95190e2cac6479bdaed7479612c027954b0da35b01c4eec7a428c0dfafcd04b915a170fc8c
+  languageName: node
+  linkType: hard
+
 "react-hot-toast@npm:2.4.0":
   version: 2.4.0
   resolution: "react-hot-toast@npm:2.4.0"
@@ -42000,6 +43283,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-i18next@npm:13.5.0":
+  version: 13.5.0
+  resolution: "react-i18next@npm:13.5.0"
+  dependencies:
+    "@babel/runtime": ^7.22.5
+    html-parse-stringify: ^3.0.1
+  peerDependencies:
+    i18next: ">= 23.2.3"
+    react: ">= 16.8.0"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: 955db09fb83bc68aa9fe7ed11c95fb3e9dc5ab95e85854f169c07a9e71f9154d2cc01f46e343801e2478d5de86475e7a19ec677bec532c3870cb7a01246a6a86
+  languageName: node
+  linkType: hard
+
 "react-i18next@npm:^12.3.1":
   version: 12.3.1
   resolution: "react-i18next@npm:12.3.1"
@@ -42188,6 +43489,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-remove-scroll@npm:2.5.4":
+  version: 2.5.4
+  resolution: "react-remove-scroll@npm:2.5.4"
+  dependencies:
+    react-remove-scroll-bar: ^2.3.3
+    react-style-singleton: ^2.2.1
+    tslib: ^2.1.0
+    use-callback-ref: ^1.3.0
+    use-sidecar: ^1.1.2
+  peerDependencies:
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 8d5436c6738f4bf2ee56851280cf669202ccb4d796e29ce509549c57393ce21846840d5f9b747749192f122c404e3bd540fdb51aec14b1a5ce24126925ce45eb
+  languageName: node
+  linkType: hard
+
 "react-remove-scroll@npm:2.5.5":
   version: 2.5.5
   resolution: "react-remove-scroll@npm:2.5.5"
@@ -42207,6 +43527,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:6.20.1":
+  version: 6.20.1
+  resolution: "react-router-dom@npm:6.20.1"
+  dependencies:
+    "@remix-run/router": 1.13.1
+    react-router: 6.20.1
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 85d94fe4d21120c8782030cb94546a2a59cf057583dceb8e9a7f804655680af9488f4438533e0e5a128412e5c2dcac8c17b934907a7669085fdca19ec6bd5123
+  languageName: node
+  linkType: hard
+
 "react-router-dom@npm:6.8.0":
   version: 6.8.0
   resolution: "react-router-dom@npm:6.8.0"
@@ -42220,6 +43553,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router@npm:6.20.1":
+  version: 6.20.1
+  resolution: "react-router@npm:6.20.1"
+  dependencies:
+    "@remix-run/router": 1.13.1
+  peerDependencies:
+    react: ">=16.8"
+  checksum: 5249f42048633fef42361e08b6fb879e6a575415ac3068a0805ae5464fec998a3149ca262cc1939ae8f4607ee24caa6ec0623c0fef702f1d323faba4a5f87d53
+  languageName: node
+  linkType: hard
+
 "react-router@npm:6.8.0":
   version: 6.8.0
   resolution: "react-router@npm:6.8.0"
@@ -42331,6 +43675,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:18.2.0, react@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
+  dependencies:
+    loose-envify: ^1.1.0
+  checksum: b562d9b569b0cb315e44b48099f7712283d93df36b19a39a67c254c6686479d3980b7f013dc931f4a5a3ae7645eae6386b4aa5eea933baa54ecd0f9acb0902b8
+  languageName: node
+  linkType: hard
+
 "react@npm:^15.7.0":
   version: 15.7.0
   resolution: "react@npm:15.7.0"
@@ -42354,15 +43707,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.2.0":
-  version: 18.2.0
-  resolution: "react@npm:18.2.0"
-  dependencies:
-    loose-envify: ^1.1.0
-  checksum: b562d9b569b0cb315e44b48099f7712283d93df36b19a39a67c254c6686479d3980b7f013dc931f4a5a3ae7645eae6386b4aa5eea933baa54ecd0f9acb0902b8
-  languageName: node
-  linkType: hard
-
 "read-cache@npm:^1.0.0":
   version: 1.0.0
   resolution: "read-cache@npm:1.0.0"
@@ -43431,6 +44775,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rimraf@npm:5.0.1, rimraf@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "rimraf@npm:5.0.1"
+  dependencies:
+    glob: ^10.2.5
+  bin:
+    rimraf: dist/cjs/src/bin.js
+  checksum: 9e6062c0aea96f384dd937e6bb06b624c881de2eee79a83d3068193183d44eb9b1f3f68a27a54b9ca8cce56bf34c2951ff4239b093b970e0501a091907031f52
+  languageName: node
+  linkType: hard
+
 "rimraf@npm:^2.5.4, rimraf@npm:^2.6.1, rimraf@npm:^2.6.2, rimraf@npm:^2.6.3":
   version: 2.7.1
   resolution: "rimraf@npm:2.7.1"
@@ -43453,17 +44808,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "rimraf@npm:5.0.1"
-  dependencies:
-    glob: ^10.2.5
-  bin:
-    rimraf: dist/cjs/src/bin.js
-  checksum: 9e6062c0aea96f384dd937e6bb06b624c881de2eee79a83d3068193183d44eb9b1f3f68a27a54b9ca8cce56bf34c2951ff4239b093b970e0501a091907031f52
-  languageName: node
-  linkType: hard
-
 "rimraf@npm:~2.4.0":
   version: 2.4.5
   resolution: "rimraf@npm:2.4.5"
@@ -43724,6 +45068,59 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^4.0.2, rollup@npm:^4.2.0":
+  version: 4.9.2
+  resolution: "rollup@npm:4.9.2"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": 4.9.2
+    "@rollup/rollup-android-arm64": 4.9.2
+    "@rollup/rollup-darwin-arm64": 4.9.2
+    "@rollup/rollup-darwin-x64": 4.9.2
+    "@rollup/rollup-linux-arm-gnueabihf": 4.9.2
+    "@rollup/rollup-linux-arm64-gnu": 4.9.2
+    "@rollup/rollup-linux-arm64-musl": 4.9.2
+    "@rollup/rollup-linux-riscv64-gnu": 4.9.2
+    "@rollup/rollup-linux-x64-gnu": 4.9.2
+    "@rollup/rollup-linux-x64-musl": 4.9.2
+    "@rollup/rollup-win32-arm64-msvc": 4.9.2
+    "@rollup/rollup-win32-ia32-msvc": 4.9.2
+    "@rollup/rollup-win32-x64-msvc": 4.9.2
+    fsevents: ~2.3.2
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: c9cd2bd09c3074730c51f22088fdc27c6ff674c81724cc75dcc26d36039a61be8ef982923493b680d583002f20f0792bca7fbbb355e303deaefbd41906a8c638
+  languageName: node
+  linkType: hard
+
 "root@workspace:.":
   version: 0.0.0-use.local
   resolution: "root@workspace:."
@@ -43754,6 +45151,7 @@ __metadata:
     eslint-plugin-prettier: ^4.2.1
     eslint-plugin-react: ^7.31.11
     eslint-plugin-react-hooks: ^4.6.0
+    eslint-plugin-react-refresh: ^0.4.5
     eslint-plugin-storybook: ^0.6.12
     eslint-plugin-unused-imports: ^2.0.0
     express: ^4.17.1
@@ -46341,6 +47739,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:3.3.6":
+  version: 3.3.6
+  resolution: "tailwindcss@npm:3.3.6"
+  dependencies:
+    "@alloc/quick-lru": ^5.2.0
+    arg: ^5.0.2
+    chokidar: ^3.5.3
+    didyoumean: ^1.2.2
+    dlv: ^1.1.3
+    fast-glob: ^3.3.0
+    glob-parent: ^6.0.2
+    is-glob: ^4.0.3
+    jiti: ^1.19.1
+    lilconfig: ^2.1.0
+    micromatch: ^4.0.5
+    normalize-path: ^3.0.0
+    object-hash: ^3.0.0
+    picocolors: ^1.0.0
+    postcss: ^8.4.23
+    postcss-import: ^15.1.0
+    postcss-js: ^4.0.1
+    postcss-load-config: ^4.0.1
+    postcss-nested: ^6.0.1
+    postcss-selector-parser: ^6.0.11
+    resolve: ^1.22.2
+    sucrase: ^3.32.0
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 69caade773249cb963c33e81f85b7fc423dcb74b416727483f434f4e12874187f633970c9de864fa96736289abaf71189314a53589ada0be6c09ccb0e8b78391
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:^3.3.2":
   version: 3.3.4
   resolution: "tailwindcss@npm:3.3.4"
@@ -46374,6 +47805,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwindcss@npm:^3.3.6":
+  version: 3.4.0
+  resolution: "tailwindcss@npm:3.4.0"
+  dependencies:
+    "@alloc/quick-lru": ^5.2.0
+    arg: ^5.0.2
+    chokidar: ^3.5.3
+    didyoumean: ^1.2.2
+    dlv: ^1.1.3
+    fast-glob: ^3.3.0
+    glob-parent: ^6.0.2
+    is-glob: ^4.0.3
+    jiti: ^1.19.1
+    lilconfig: ^2.1.0
+    micromatch: ^4.0.5
+    normalize-path: ^3.0.0
+    object-hash: ^3.0.0
+    picocolors: ^1.0.0
+    postcss: ^8.4.23
+    postcss-import: ^15.1.0
+    postcss-js: ^4.0.1
+    postcss-load-config: ^4.0.1
+    postcss-nested: ^6.0.1
+    postcss-selector-parser: ^6.0.11
+    resolve: ^1.22.2
+    sucrase: ^3.32.0
+  bin:
+    tailwind: lib/cli.js
+    tailwindcss: lib/cli.js
+  checksum: 0a1cef7468e6d17c2857d0b3c4017af2cb37ed8ba27dfb14780c517b8a74f6786970227c400ac1325fc8bcfc09099d8e990fa7c60924bf945f3d0a912d63f546
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0, tapable@npm:^1.1.3":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"
@@ -47113,6 +48577,15 @@ __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"
@@ -47491,6 +48964,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsup@npm:8.0.1, tsup@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "tsup@npm:8.0.1"
+  dependencies:
+    bundle-require: ^4.0.0
+    cac: ^6.7.12
+    chokidar: ^3.5.1
+    debug: ^4.3.1
+    esbuild: ^0.19.2
+    execa: ^5.0.0
+    globby: ^11.0.3
+    joycon: ^3.0.1
+    postcss-load-config: ^4.0.1
+    resolve-from: ^5.0.0
+    rollup: ^4.0.2
+    source-map: 0.8.0-beta.0
+    sucrase: ^3.20.3
+    tree-kill: ^1.2.2
+  peerDependencies:
+    "@microsoft/api-extractor": ^7.36.0
+    "@swc/core": ^1
+    postcss: ^8.4.12
+    typescript: ">=4.5.0"
+  peerDependenciesMeta:
+    "@microsoft/api-extractor":
+      optional: true
+    "@swc/core":
+      optional: true
+    postcss:
+      optional: true
+    typescript:
+      optional: true
+  bin:
+    tsup: dist/cli-default.js
+    tsup-node: dist/cli-node.js
+  checksum: 2869187881fd30ce883d2069a1948b80946fc09a1bedb2ceb5ec20ea29602a897177dc3d19617c489b0811b86a902f5c52f51cc0b2d7e1892cb5328c3a197bfe
+  languageName: node
+  linkType: hard
+
 "tsup@npm:^7.1.0":
   version: 7.2.0
   resolution: "tsup@npm:7.2.0"
@@ -47928,7 +49440,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.1.6":
+"typescript@npm:5.2.2, typescript@npm:^5.1.6":
   version: 5.2.2
   resolution: "typescript@npm:5.2.2"
   bin:
@@ -47938,6 +49450,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:5.3.3, typescript@npm:^5.3.3":
+  version: 5.3.3
+  resolution: "typescript@npm:5.3.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@4.9.5#~builtin<compat/typescript>, typescript@patch:typescript@^4.1.3#~builtin<compat/typescript>, typescript@patch:typescript@^4.4.4#~builtin<compat/typescript>, typescript@patch:typescript@^4.5.2#~builtin<compat/typescript>, typescript@patch:typescript@^4.9.3#~builtin<compat/typescript>, typescript@patch:typescript@^4.9.5#~builtin<compat/typescript>":
   version: 4.9.5
   resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=7ad353"
@@ -47958,7 +49480,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^5.1.6#~builtin<compat/typescript>":
+"typescript@patch:typescript@5.2.2#~builtin<compat/typescript>, typescript@patch:typescript@^5.1.6#~builtin<compat/typescript>":
   version: 5.2.2
   resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=7ad353"
   bin:
@@ -47968,6 +49490,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@5.3.3#~builtin<compat/typescript>, typescript@patch:typescript@^5.3.3#~builtin<compat/typescript>":
+  version: 5.3.3
+  resolution: "typescript@patch:typescript@npm%3A5.3.3#~builtin<compat/typescript>::version=5.3.3&hash=7ad353"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: e22df47df9b2b2f2617b8bf511a29aea3d177f9f7a0756818230a76b01cbd7da988bf55f9463aaa1a4c1ff90b80f8dc5676460d4e9dfc010572cbba59b822b0c
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:^0.7.30":
   version: 0.7.35
   resolution: "ua-parser-js@npm:0.7.35"
@@ -48065,6 +49597,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici-types@npm:~5.26.4":
+  version: 5.26.5
+  resolution: "undici-types@npm:5.26.5"
+  checksum: bb673d7876c2d411b6eb6c560e0c571eef4a01c1c19925175d16e3a30c4c428181fb8d7ae802a261f283e4166a0ac435e2f505743aa9e45d893f9a3df017b501
+  languageName: node
+  linkType: hard
+
 "unfetch@npm:^3.1.1":
   version: 3.1.2
   resolution: "unfetch@npm:3.1.2"
@@ -49061,6 +50600,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:5.0.10":
+  version: 5.0.10
+  resolution: "vite@npm:5.0.10"
+  dependencies:
+    esbuild: ^0.19.3
+    fsevents: ~2.3.3
+    postcss: ^8.4.32
+    rollup: ^4.2.0
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: d666b2760d2a7ea1d0d35f67c042053e562144f80554be4e4dc58e607fd5f62193cd203d73ab2e315df66830d8b9d9a2e3509d0208bdef1b2e92e0a5c364df84
+  languageName: node
+  linkType: hard
+
 "vite@npm:^3.0.0 || ^4.0.0, vite@npm:^4.3.9":
   version: 4.5.0
   resolution: "vite@npm:4.5.0"
@@ -50458,6 +52037,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:3.22.4":
+  version: 3.22.4
+  resolution: "zod@npm:3.22.4"
+  checksum: 7578ab283dac0eee66a0ad0fc4a7f28c43e6745aadb3a529f59a4b851aa10872b3890398b3160f257f4b6817b4ce643debdda4fb21a2c040adda7862cab0a587
+  languageName: node
+  linkType: hard
+
 "zod@npm:^3.22.2":
   version: 3.22.2
   resolution: "zod@npm:3.22.2"