diff --git a/.changeset/happy-zoos-smile.md b/.changeset/happy-zoos-smile.md
new file mode 100644
index 0000000000..99d6236fb6
--- /dev/null
+++ b/.changeset/happy-zoos-smile.md
@@ -0,0 +1,6 @@
+---
+"@medusajs/ui-preset": patch
+"@medusajs/ui": patch
+---
+
+fix(ui,ui-preset): Fixes an issue where the color styles of two code components was broken
diff --git a/packages/design-system/ui-preset/src/theme/extension/theme.ts b/packages/design-system/ui-preset/src/theme/extension/theme.ts
index 6f267b9acf..f3649f13dd 100644
--- a/packages/design-system/ui-preset/src/theme/extension/theme.ts
+++ b/packages/design-system/ui-preset/src/theme/extension/theme.ts
@@ -310,7 +310,6 @@ export const theme = {
     },
     "boxShadow": {
       "elevation-card-hover": "var(--elevation-card-hover)",
-      "elevation-modal": "var(--elevation-modal)",
       "buttons-inverted": "var(--buttons-inverted)",
       "elevation-card-rest": "var(--elevation-card-rest)",
       "buttons-neutral-focus": "var(--buttons-neutral-focus)",
@@ -329,7 +328,9 @@ export const theme = {
       "details-switch-background": "var(--details-switch-background)",
       "elevation-tooltip": "var(--elevation-tooltip)",
       "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
-      "elevation-flyout": "var(--elevation-flyout)"
+      "elevation-flyout": "var(--elevation-flyout)",
+      "details-commandbar": "var(--details-commandbar)",
+      "elevation-modal": "var(--elevation-modal)"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/ui-preset/src/theme/tokens/effects.ts b/packages/design-system/ui-preset/src/theme/tokens/effects.ts
index 0fc6f42044..a024d1d4d1 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/effects.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/effects.ts
@@ -2,7 +2,6 @@ export const effects = {
   "dark": {
     "--details-switch-background-focus": "0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
     "--buttons-neutral-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
-    "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(46, 48, 53, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
     "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
     "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
     "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
@@ -20,11 +19,12 @@ export const effects = {
     "--buttons-danger-focus": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
     "--borders-base": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
     "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 4px rgba(225, 29, 72, 0.25)",
-    "--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)"
+    "--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+    "--details-commandbar": "0px 0px 0px 1px rgba(228, 228, 233, 1) inset, 0px 0px 0px 1.5px rgba(46, 48, 53, 0.2) inset, 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 1.5px rgba(46, 48, 53, 0.6) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)"
   },
   "light": {
     "--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)",
-    "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
     "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8)",
     "--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
     "--buttons-neutral-focus": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
@@ -43,6 +43,8 @@ export const effects = {
     "--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
     "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
     "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
-    "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)"
+    "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)",
+    "--details-commandbar": "0px 0px 0px 1px rgba(27, 27, 31, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset, 0px 16px 32px 0px rgba(3, 7, 18, 0.16), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(229, 231, 235, 0.6) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)"
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/ui-preset/src/theme/tokens/typography.ts b/packages/design-system/ui-preset/src/theme/tokens/typography.ts
index 117bcbd0ad..a8534b6a20 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/typography.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/typography.ts
@@ -131,18 +131,6 @@ export const typography = {
     "fontWeight": "400",
     "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
   },
-  ".code-body": {
-    "fontSize": "0.8125rem",
-    "lineHeight": "1.5rem",
-    "fontWeight": "400",
-    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
-  },
-  ".code-label": {
-    "fontSize": "0.8125rem",
-    "lineHeight": "1.25rem",
-    "fontWeight": "400",
-    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
-  },
   ".txt-compact-xlarge-plus": {
     "fontSize": "1.125rem",
     "lineHeight": "1.25rem",
@@ -190,5 +178,17 @@ export const typography = {
     "lineHeight": "1.75rem",
     "fontWeight": "500",
     "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".code-body": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.375rem",
+    "fontWeight": "400",
+    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
+  },
+  ".code-label": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.25rem",
+    "fontWeight": "400",
+    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/ui/src/components/code-block/code-block.stories.tsx b/packages/design-system/ui/src/components/code-block/code-block.stories.tsx
index 17ad7cd35c..cadfbb42fb 100644
--- a/packages/design-system/ui/src/components/code-block/code-block.stories.tsx
+++ b/packages/design-system/ui/src/components/code-block/code-block.stories.tsx
@@ -41,7 +41,9 @@ export const Default: Story = {
         <CodeBlock snippets={snippets}>
           <CodeBlock.Header>
             <CodeBlock.Header.Meta>
-              <Label weight={"plus"}>/product-detail.js</Label>
+              <Label size="small" weight={"plus"}>
+                /product-detail.js
+              </Label>
             </CodeBlock.Header.Meta>
           </CodeBlock.Header>
           <CodeBlock.Body />
diff --git a/packages/design-system/ui/src/components/code-block/code-block.tsx b/packages/design-system/ui/src/components/code-block/code-block.tsx
index cb065dd6a4..c8723eeccd 100644
--- a/packages/design-system/ui/src/components/code-block/code-block.tsx
+++ b/packages/design-system/ui/src/components/code-block/code-block.tsx
@@ -101,7 +101,7 @@ const HeaderComponent = ({
   return (
     <div
       className={clx(
-        "border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3",
+        "border-b-ui-code-border bg-ui-code-bg-subtle flex items-center gap-2 border-b px-4 py-3",
         className
       )}
       {...props}
@@ -110,9 +110,9 @@ const HeaderComponent = ({
         snippets.map((snippet) => (
           <div
             className={clx(
-              "text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all",
+              "text-ui-code-fg-subtle txt-compact-small-plus transition-fg cursor-pointer rounded-full border border-transparent px-3 py-2",
               {
-                "text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default":
+                "text-ui-code-fg-base border-ui-code-border bg-ui-code-bg-base cursor-default":
                   active.label === snippet.label,
               }
             )}
@@ -137,7 +137,10 @@ const Meta = ({
 }: React.HTMLAttributes<HTMLDivElement>) => {
   return (
     <div
-      className={clx("text-ui-code-text-subtle ml-auto", className)}
+      className={clx(
+        "txt-compact-small text-ui-code-fg-subtle ml-auto",
+        className
+      )}
       {...props}
     />
   )
@@ -165,7 +168,7 @@ const Body = ({
       {!active.hideCopy && (
         <Copy
           content={active.code}
-          className="text-ui-code-icon absolute right-4 top-4"
+          className="text-ui-code-fg-muted absolute right-4 top-4"
         />
       )}
       <div className="max-w-[90%]">
@@ -237,12 +240,9 @@ const Body = ({
         >
           {({ style, tokens, getLineProps, getTokenProps }) => (
             <pre
-              className={clx(
-                "txt-compact-small whitespace-pre-wrap bg-transparent font-mono",
-                {
-                  "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
-                }
-              )}
+              className={clx("code-body whitespace-pre-wrap bg-transparent", {
+                "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
+              })}
               style={{
                 ...style,
                 background: "transparent",
@@ -253,7 +253,7 @@ const Body = ({
                   {tokens.map((_, i) => (
                     <span
                       key={i}
-                      className="text-ui-code-text-subtle tabular-nums"
+                      className="text-ui-code-fg-subtle tabular-nums"
                     >
                       {i + 1}
                     </span>
diff --git a/packages/design-system/ui/src/components/command/command.stories.tsx b/packages/design-system/ui/src/components/command/command.stories.tsx
index 55f1f59005..8cebf5e846 100644
--- a/packages/design-system/ui/src/components/command/command.stories.tsx
+++ b/packages/design-system/ui/src/components/command/command.stories.tsx
@@ -1,7 +1,7 @@
-import React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
-import { Command } from "./command"
+import React from "react"
 import { Badge } from "../badge"
+import { Command } from "./command"
 
 const meta: Meta<typeof Command> = {
   title: "Components/Command",
@@ -20,7 +20,9 @@ export const Default: Story = {
     return (
       <div className="w-[500px]">
         <Command>
-          <Badge color="green">Get</Badge>
+          <Badge className="dark" size="small" color="green">
+            Get
+          </Badge>
           <code>localhost:9000/store/products</code>
           <Command.Copy content="localhost:9000/store/products" />
         </Command>
diff --git a/packages/design-system/ui/src/components/command/command.tsx b/packages/design-system/ui/src/components/command/command.tsx
index 8f3873ddb1..12e78011e4 100644
--- a/packages/design-system/ui/src/components/command/command.tsx
+++ b/packages/design-system/ui/src/components/command/command.tsx
@@ -14,8 +14,8 @@ const CommandComponent = ({
   return (
     <div
       className={clx(
-        "bg-ui-code-bg-header border-ui-code-border flex items-center rounded-lg border px-3 py-2",
-        "[&>code]:text-ui-code-text-base [&>code]:txt-compact-small [&>code]:mx-3 [&>code]:font-mono [&>code]:leading-6",
+        "bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2",
+        "[&>code]:text-ui-code-fg-base [&>code]:code-body [&>code]:mx-3",
         className
       )}
       {...props}
@@ -24,6 +24,20 @@ const CommandComponent = ({
 }
 CommandComponent.displayName = "Command"
 
-const Command = Object.assign(CommandComponent, { Copy })
+const CommandCopy = React.forwardRef<
+  React.ElementRef<typeof Copy>,
+  React.ComponentPropsWithoutRef<typeof Copy>
+>(({ className, ...props }, ref) => {
+  return (
+    <Copy
+      {...props}
+      ref={ref}
+      className={clx("!text-ui-code-fg-muted ml-auto", className)}
+    />
+  )
+})
+CommandCopy.displayName = "Command.Copy"
+
+const Command = Object.assign(CommandComponent, { Copy: CommandCopy })
 
 export { Command }