diff --git a/packages/design-system/icons/src/components/ellipse-mini-solid.tsx b/packages/design-system/icons/src/components/ellipse-mini-solid.tsx
index 59b8392df1..266c1ca922 100644
--- a/packages/design-system/icons/src/components/ellipse-mini-solid.tsx
+++ b/packages/design-system/icons/src/components/ellipse-mini-solid.tsx
@@ -11,7 +11,7 @@ const EllipseMiniSolid = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <circle cx={8} cy={8} r={2} fill={color} />
+        <circle cx={7.5} cy={7.5} r={2} fill={color} />
       </svg>
     )
   }
diff --git a/packages/design-system/toolbox/src/create-cli.ts b/packages/design-system/toolbox/src/create-cli.ts
index 31cc42d118..e87fce31c2 100644
--- a/packages/design-system/toolbox/src/create-cli.ts
+++ b/packages/design-system/toolbox/src/create-cli.ts
@@ -1,7 +1,8 @@
-import { generateIcons } from "@/commands/icons/command"
 import { Command } from "commander"
 
+import { generateIcons } from "@/commands/icons/command"
 import { generateTokens } from "@/commands/tokens/command"
+
 import pkg from "../package.json"
 
 export async function createCli() {
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 7d2736943a..930e42d6b1 100644
--- a/packages/design-system/ui-preset/src/theme/extension/theme.ts
+++ b/packages/design-system/ui-preset/src/theme/extension/theme.ts
@@ -116,9 +116,6 @@ export const theme = {
           "danger": {
             "DEFAULT": "var(--border-danger)"
           },
-          "loud": {
-            "DEFAULT": "var(--border-loud)"
-          },
           "strong": {
             "DEFAULT": "var(--border-strong)"
           },
@@ -127,6 +124,14 @@ export const theme = {
           },
           "transparent": {
             "DEFAULT": "var(--border-transparent)"
+          },
+          "menu": {
+            "bot": {
+              "DEFAULT": "var(--border-menu-bot)"
+            },
+            "top": {
+              "DEFAULT": "var(--border-menu-top)"
+            }
           }
         },
         "bg": {
@@ -136,24 +141,6 @@ export const theme = {
               "DEFAULT": "var(--bg-highlight-hover)"
             }
           },
-          "base": {
-            "DEFAULT": "var(--bg-base)",
-            "pressed": {
-              "DEFAULT": "var(--bg-base-pressed)"
-            },
-            "hover": {
-              "DEFAULT": "var(--bg-base-hover)"
-            }
-          },
-          "subtle": {
-            "pressed": {
-              "DEFAULT": "var(--bg-subtle-pressed)"
-            },
-            "DEFAULT": "var(--bg-subtle)",
-            "hover": {
-              "DEFAULT": "var(--bg-subtle-hover)"
-            }
-          },
           "interactive": {
             "DEFAULT": "var(--bg-interactive)"
           },
@@ -183,14 +170,32 @@ export const theme = {
           "disabled": {
             "DEFAULT": "var(--bg-disabled)"
           },
-          "component": {
-            "hover": {
-              "DEFAULT": "var(--bg-component-hover)"
+          "base": {
+            "pressed": {
+              "DEFAULT": "var(--bg-base-pressed)"
             },
+            "hover": {
+              "DEFAULT": "var(--bg-base-hover)"
+            },
+            "DEFAULT": "var(--bg-base)"
+          },
+          "component": {
             "pressed": {
               "DEFAULT": "var(--bg-component-pressed)"
             },
-            "DEFAULT": "var(--bg-component)"
+            "DEFAULT": "var(--bg-component)",
+            "hover": {
+              "DEFAULT": "var(--bg-component-hover)"
+            }
+          },
+          "subtle": {
+            "DEFAULT": "var(--bg-subtle)",
+            "pressed": {
+              "DEFAULT": "var(--bg-subtle-pressed)"
+            },
+            "hover": {
+              "DEFAULT": "var(--bg-subtle-hover)"
+            }
           }
         },
         "fg": {
diff --git a/packages/design-system/ui-preset/src/theme/tokens/colors.ts b/packages/design-system/ui-preset/src/theme/tokens/colors.ts
index 8f96ad4b21..480940c8eb 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/colors.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/colors.ts
@@ -3,96 +3,77 @@ export const colors = {
     "--fg-on-color": "rgba(255, 255, 255, 1)",
     "--border-danger": "rgba(190, 18, 60, 1)",
     "--border-interactive": "rgba(96, 165, 250, 1)",
-    "--fg-interactive-hover": "rgba(59, 130, 246, 1)",
+    "--fg-interactive-hover": "rgba(147, 197, 253, 1)",
     "--fg-error": "rgba(251, 113, 133, 1)",
     "--bg-interactive": "rgba(96, 165, 250, 1)",
-    "--border-error": "rgba(244, 63, 94, 1)",
+    "--border-error": "rgba(251, 113, 133, 1)",
     "--button-danger": "rgba(159, 18, 57, 1)",
-    "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
     "--fg-interactive": "rgba(96, 165, 250, 1)",
     "--tag-red-border": "rgba(136, 19, 55, 1)",
     "--tag-red-bg": "rgba(76, 5, 25, 1)",
-    "--tag-blue-text": "rgba(96, 165, 250, 1)",
-    "--tag-orange-text": "rgba(251, 191, 36, 1)",
+    "--tag-blue-text": "rgba(147, 197, 253, 1)",
+    "--tag-orange-text": "rgba(253, 186, 116, 1)",
     "--tag-green-text": "rgba(52, 211, 153, 1)",
-    "--tag-orange-border": "rgba(120, 53, 15, 1)",
+    "--tag-orange-border": "rgba(124, 45, 18, 1)",
     "--tag-green-border": "rgba(6, 78, 59, 1)",
-    "--tag-red-text": "rgba(251, 113, 133, 1)",
+    "--tag-red-text": "rgba(253, 164, 175, 1)",
     "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
     "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
     "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
     "--border-transparent": "rgba(255, 255, 255, 0)",
-    "--tag-orange-icon": "rgba(245, 158, 11, 1)",
-    "--tag-purple-bg": "rgba(46, 16, 100, 1)",
+    "--tag-orange-icon": "rgba(251, 146, 60, 1)",
+    "--tag-purple-bg": "rgba(46, 16, 101, 1)",
     "--tag-blue-bg": "rgba(23, 37, 84, 1)",
     "--tag-green-bg": "rgba(2, 44, 34, 1)",
     "--tag-blue-border": "rgba(30, 58, 138, 1)",
-    "--tag-purple-border": "rgba(76, 29, 149, 1)",
+    "--tag-purple-border": "rgba(91, 33, 182, 1)",
     "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
-    "--tag-orange-bg": "rgba(69, 26, 3, 1)",
+    "--tag-orange-bg": "rgba(67, 20, 7, 1)",
     "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
-    "--tag-blue-icon": "rgba(59, 130, 246, 1)",
-    "--tag-red-icon": "rgba(244, 63, 94, 1)",
-    "--tag-purple-icon": "rgba(139, 92, 246, 1)",
-    "--tag-purple-text": "rgba(167, 139, 250, 1)",
+    "--tag-blue-icon": "rgba(96, 165, 250, 1)",
+    "--tag-red-icon": "rgba(251, 113, 133, 1)",
+    "--tag-purple-icon": "rgba(167, 139, 250, 1)",
+    "--tag-purple-text": "rgba(196, 181, 253, 1)",
     "--tag-green-icon": "rgba(16, 185, 129, 1)",
     "--button-danger-pressed": "rgba(225, 29, 72, 1)",
-    "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-danger-hover": "rgba(190, 18, 60, 1)",
-    "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-transparent": "rgba(0, 0, 0, 0.01)",
+    "--button-transparent": "rgba(255, 255, 255, 0)",
     "--code-bg-base": "rgba(9, 9, 11, 1)",
     "--button-neutral": "rgba(39, 39, 42, 1)",
-    "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-transparent-hover": "rgba(39, 39, 42, 1)",
     "--code-fg-subtle": "rgba(161, 161, 170, 1)",
     "--tag-neutral-bg-hover": "rgba(63, 63, 70, 1)",
     "--contrast-border-base": "rgba(82, 82, 91, 1)",
     "--button-neutral-pressed": "rgba(82, 82, 91, 1)",
-    "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
-    "--tag-neutral-bg": "rgba(39, 39, 42, 1)",
+    "--tag-neutral-bg": "rgba(255, 255, 255, 0.08)",
     "--bg-highlight": "rgba(23, 37, 84, 1)",
     "--code-fg-base": "rgba(250, 250, 250, 1)",
     "--tag-neutral-icon": "rgba(113, 113, 122, 1)",
     "--bg-switch-off-hover": "rgba(82, 82, 91, 1)",
     "--bg-base": "rgba(24, 24, 27, 1)",
     "--button-inverted-pressed": "rgba(161, 161, 170, 1)",
-    "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-neutral-hover": "rgba(63, 63, 70, 1)",
-    "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
     "--bg-switch-off": "rgba(63, 63, 70, 1)",
     "--fg-subtle": "rgba(161, 161, 170, 1)",
     "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
     "--button-inverted": "rgba(82, 82, 91, 1)",
-    "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
-    "--fg-base": "rgba(250, 250, 250, 1)",
+    "--fg-base": "rgba(244, 244, 245, 1)",
     "--code-border": "rgba(39, 39, 42, 1)",
     "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
     "--contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
     "--bg-base-hover": "rgba(39, 39, 42, 1)",
     "--bg-subtle-hover": "rgba(24, 24, 27, 1)",
-    "--fg-disabled": "rgba(63, 63, 70, 1)",
+    "--fg-disabled": "rgba(82, 82, 91, 1)",
     "--bg-subtle": "rgba(9, 9, 11, 1)",
     "--tag-neutral-border": "rgba(63, 63, 70, 1)",
-    "--bg-subtle-pressed": "rgba(39, 39, 42, 1)",
-    "--tag-neutral-text": "rgba(161, 161, 170, 1)",
-    "--fg-muted": "rgba(82, 82, 91, 1)",
-    "--bg-overlay": "rgba(9, 9, 11, 0.7)",
+    "--bg-subtle-pressed": "rgba(63, 63, 70, 1)",
+    "--tag-neutral-text": "rgba(212, 212, 216, 1)",
+    "--fg-muted": "rgba(161, 161, 170, 1)",
+    "--bg-overlay": "rgba(9, 9, 11, 0.72)",
     "--button-inverted-hover": "rgba(113, 113, 122, 1)",
-    "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
     "--fg-on-inverted": "rgba(9, 9, 11, 1)",
     "--code-bg-subtle": "rgba(24, 24, 27, 1)",
     "--bg-component": "rgba(39, 39, 42, 1)",
-    "--border-loud": "rgba(250, 250, 250, 1)",
     "--bg-base-pressed": "rgba(63, 63, 70, 1)",
     "--bg-disabled": "rgba(39, 39, 42, 1)",
     "--contrast-bg-highlight": "rgba(82, 82, 91, 1)",
@@ -102,31 +83,32 @@ export const colors = {
     "--contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
     "--contrast-fg-primary": "rgba(250, 250, 250, 1)",
     "--contrast-bg-base": "rgba(63, 63, 70, 1)",
-    "--bg-component-pressed": "rgba(82, 82, 91, 1)",
-    "--bg-component-hover": "rgba(63, 63, 70, 1)",
-    "--bg-field": "rgba(39, 39, 42, 1)",
+    "--bg-component-pressed": "rgba(255, 255, 255, 0.16)",
+    "--bg-component-hover": "rgba(255, 255, 255, 0.1)",
+    "--bg-field": "rgba(255, 255, 255, 0.04)",
     "--bg-field-component": "rgba(24, 24, 27, 1)",
-    "--bg-field-component-hover": "rgba(24, 24, 27, 1)",
-    "--bg-field-hover": "rgba(39, 39, 42, 1)",
+    "--bg-field-component-hover": "rgba(9, 9, 11, 0.24)",
+    "--bg-field-hover": "rgba(255, 255, 255, 0.08)",
     "--border-base": "rgba(255, 255, 255, 0.08)",
-    "--border-strong": "rgba(255, 255, 255, 0.12)",
-    "--contrast-bg-alpha": "rgba(63, 63, 70, 0.9)"
+    "--border-strong": "rgba(255, 255, 255, 0.16)",
+    "--contrast-bg-alpha": "rgba(63, 63, 70, 0.9)",
+    "--border-menu-bot": "rgba(255, 255, 255, 0.08)",
+    "--border-menu-top": "rgba(24, 24, 27, 1)"
   },
   "light": {
     "--tag-green-bg": "rgba(209, 250, 229, 1)",
     "--border-interactive": "rgba(59, 130, 246, 1)",
     "--bg-highlight": "rgba(239, 246, 255, 1)",
     "--tag-red-bg": "rgba(255, 228, 230, 1)",
-    "--tag-orange-bg": "rgba(254, 244, 199, 1)",
-    "--bg-base": "rgba(255, 255, 255, 1)",
-    "--tag-green-icon": "rgba(5, 150, 105, 1)",
+    "--tag-orange-bg": "rgba(255, 237, 213, 1)",
+    "--tag-green-icon": "rgba(16, 185, 129, 1)",
     "--tag-purple-bg-hover": "rgba(221, 214, 254, 1)",
     "--tag-blue-border": "rgba(191, 219, 254, 1)",
-    "--tag-orange-icon": "rgba(217, 119, 6, 1)",
+    "--tag-orange-icon": "rgba(249, 115, 22, 1)",
     "--tag-purple-bg": "rgba(237, 233, 254, 1)",
-    "--tag-purple-text": "rgba(109, 40, 217, 1)",
+    "--tag-purple-text": "rgba(91, 33, 182, 1)",
     "--tag-blue-bg": "rgba(219, 234, 254, 1)",
-    "--tag-blue-icon": "rgba(37, 99, 235, 1)",
+    "--tag-blue-icon": "rgba(59, 130, 246, 1)",
     "--border-error": "rgba(225, 29, 72, 1)",
     "--fg-on-inverted": "rgba(255, 255, 255, 1)",
     "--fg-on-color": "rgba(255, 255, 255, 1)",
@@ -135,37 +117,28 @@ export const colors = {
     "--fg-error": "rgba(225, 29, 72, 1)",
     "--border-danger": "rgba(190, 18, 60, 1)",
     "--fg-muted": "rgba(161, 161, 170, 1)",
-    "--bg-subtle-pressed": "rgba(228, 228, 231, 1)",
     "--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
     "--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
-    "--tag-red-icon": "rgba(225, 29, 72, 1)",
+    "--tag-red-icon": "rgba(244, 63, 94, 1)",
     "--tag-red-bg-hover": "rgba(254, 205, 211, 1)",
-    "--tag-red-text": "rgba(190, 18, 60, 1)",
-    "--tag-purple-icon": "rgba(124, 58, 237, 1)",
-    "--tag-blue-text": "rgba(29, 78, 216, 1)",
+    "--tag-red-text": "rgba(159, 18, 57, 1)",
+    "--tag-purple-icon": "rgba(139, 92, 246, 1)",
+    "--tag-blue-text": "rgba(30, 64, 175, 1)",
     "--tag-orange-bg-hover": "rgba(253, 230, 138, 1)",
     "--tag-purple-border": "rgba(221, 214, 254, 1)",
-    "--tag-orange-text": "rgba(180, 83, 9, 1)",
-    "--tag-orange-border": "rgba(253, 230, 138, 1)",
+    "--tag-orange-text": "rgba(154, 52, 18, 1)",
+    "--tag-orange-border": "rgba(254, 215, 170, 1)",
     "--tag-red-border": "rgba(254, 205, 211, 1)",
     "--tag-green-border": "rgba(167, 243, 208, 1)",
-    "--tag-green-text": "rgba(4, 120, 87, 1)",
+    "--tag-green-text": "rgba(6, 95, 70, 1)",
     "--button-danger": "rgba(225, 29, 72, 1)",
-    "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-danger-pressed": "rgba(159, 18, 57, 1)",
-    "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-danger-hover": "rgba(190, 18, 60, 1)",
-    "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
     "--bg-interactive": "rgba(59, 130, 246, 1)",
     "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
-    "--button-transparent": "rgba(255, 255, 255, 0.01)",
-    "--bg-base-pressed": "rgba(228, 228, 231, 1)",
+    "--button-transparent": "rgba(255, 255, 255, 0)",
     "--bg-overlay": "rgba(9, 9, 11, 0.4)",
     "--tag-neutral-border": "rgba(228, 228, 231, 1)",
-    "--border-loud": "rgba(9, 9, 11, 1)",
     "--bg-switch-off": "rgba(228, 228, 231, 1)",
     "--contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
     "--tag-neutral-text": "rgba(82, 82, 91, 1)",
@@ -183,46 +156,39 @@ export const colors = {
     "--tag-neutral-bg-hover": "rgba(228, 228, 231, 1)",
     "--code-fg-muted": "rgba(113, 113, 122, 1)",
     "--contrast-bg-highlight": "rgba(63, 63, 70, 1)",
-    "--tag-neutral-icon": "rgba(113, 113, 122, 1)",
+    "--tag-neutral-icon": "rgba(161, 161, 170, 1)",
     "--border-base": "rgba(228, 228, 231, 1)",
     "--code-bg-base": "rgba(24, 24, 27, 1)",
     "--button-neutral": "rgba(255, 255, 255, 1)",
-    "--button-neutral-gradient-from": "rgba(9, 9, 11, 0)",
-    "--button-neutral-gradient-to": "rgba(9, 9, 11, 1)",
     "--code-bg-subtle": "rgba(39, 39, 42, 1)",
     "--button-neutral-hover": "rgba(244, 244, 245, 1)",
-    "--button-neutral-hover-gradient-from": "rgba(9, 9, 11, 0)",
-    "--button-neutral-hover-gradient-to": "rgba(9, 9, 11, 1)",
     "--contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
-    "--bg-subtle": "rgba(250, 250, 250, 1)",
     "--bg-switch-off-hover": "rgba(212, 212, 216, 1)",
     "--code-fg-base": "rgba(250, 250, 250, 1)",
     "--bg-disabled": "rgba(244, 244, 245, 1)",
     "--code-border": "rgba(63, 63, 70, 1)",
     "--fg-subtle": "rgba(82, 82, 91, 1)",
-    "--bg-subtle-hover": "rgba(244, 244, 245, 1)",
     "--button-neutral-pressed": "rgba(228, 228, 231, 1)",
-    "--button-neutral-pressed-gradient-from": "rgba(9, 9, 11, 0)",
-    "--button-neutral-pressed-gradient-to": "rgba(9, 9, 11, 1)",
-    "--border-transparent": "rgba(9, 9, 11, 0)",
-    "--button-inverted": "rgba(9, 9, 11, 1)",
-    "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-inverted-pressed": "rgba(39, 39, 42, 1)",
-    "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-inverted-hover": "rgba(24, 24, 27, 1)",
-    "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
-    "--bg-component-hover": "rgba(244, 244, 245, 1)",
+    "--border-transparent": "rgba(255, 255, 255, 0)",
+    "--button-inverted": "rgba(39, 39, 42, 1)",
+    "--button-inverted-pressed": "rgba(82, 82, 91, 1)",
+    "--button-inverted-hover": "rgba(63, 63, 70, 1)",
     "--bg-field-component": "rgba(255, 255, 255, 1)",
     "--bg-field-component-hover": "rgba(250, 250, 250, 1)",
+    "--contrast-bg-alpha": "rgba(9, 9, 11, 0.8)",
+    "--contrast-fg-primary": "rgba(255, 255, 255, 0.88)",
+    "--contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
+    "--contrast-border-base": "rgba(255, 255, 255, 0.15)",
+    "--border-menu-bot": "rgba(255, 255, 255, 1)",
+    "--border-menu-top": "rgba(228, 228, 231, 1)",
+    "--bg-base-pressed": "rgba(228, 228, 231, 1)",
+    "--bg-base-hover": "rgba(244, 244, 245, 1)",
+    "--bg-base": "rgba(255, 255, 255, 1)",
     "--bg-component-pressed": "rgba(228, 228, 231, 1)",
     "--bg-component": "rgba(250, 250, 250, 1)",
-    "--bg-base-hover": "rgba(244, 244, 245, 1)",
-    "--contrast-bg-alpha": "rgba(9, 9, 11, 0.8)",
-    "--contrast-fg-primary": "rgba(255, 255, 255, 0.95)",
-    "--contrast-fg-secondary": "rgba(255, 255, 255, 0.6)",
-    "--contrast-border-base": "rgba(255, 255, 255, 0.15)"
+    "--bg-subtle": "rgba(250, 250, 250, 1)",
+    "--bg-subtle-pressed": "rgba(228, 228, 231, 1)",
+    "--bg-component-hover": "rgba(244, 244, 245, 1)",
+    "--bg-subtle-hover": "rgba(244, 244, 245, 1)"
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/ui-preset/src/theme/tokens/components.ts b/packages/design-system/ui-preset/src/theme/tokens/components.ts
index 76772755e5..df51fb3b63 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/components.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/components.ts
@@ -1,78 +1,4 @@
 export const components = {
-  "dark": {
-    ".button-danger-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
-      "opacity": "10%"
-    },
-    ".button-danger-pressed-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
-      "opacity": "10%"
-    },
-    ".button-danger-hover-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
-      "opacity": "10%"
-    },
-    ".button-neutral-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
-      "opacity": "6%"
-    },
-    ".button-neutral-pressed-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
-      "opacity": "6%"
-    },
-    ".button-inverted-pressed-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
-      "opacity": "6%"
-    },
-    ".button-neutral-hover-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
-      "opacity": "6%"
-    },
-    ".button-inverted-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
-      "opacity": "6%"
-    },
-    ".button-inverted-hover-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
-      "opacity": "6%"
-    }
-  },
-  "light": {
-    ".button-danger-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
-      "opacity": "16%"
-    },
-    ".button-danger-pressed-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
-      "opacity": "16%"
-    },
-    ".button-danger-hover-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
-      "opacity": "16%"
-    },
-    ".button-neutral-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
-      "opacity": "3%"
-    },
-    ".button-neutral-hover-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
-      "opacity": "3%"
-    },
-    ".button-neutral-pressed-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
-      "opacity": "3%"
-    },
-    ".button-inverted-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
-      "opacity": "16%"
-    },
-    ".button-inverted-pressed-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
-      "opacity": "16%"
-    },
-    ".button-inverted-hover-gradient": {
-      "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
-      "opacity": "16%"
-    }
-  }
+  "dark": {},
+  "light": {}
 }
\ No newline at end of file
diff --git a/packages/design-system/ui/src/components/checkbox/checkbox.tsx b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
index b7f553a5e4..a26d2e9626 100644
--- a/packages/design-system/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/design-system/ui/src/components/checkbox/checkbox.tsx
@@ -24,7 +24,7 @@ const Checkbox = React.forwardRef<
       )}
     >
       <div className="text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base group-hover:bg-ui-bg-base-hover group-focus-visible:!shadow-borders-interactive-with-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base transition-fg h-[14px] w-[14px] rounded-[3px]">
-        <Primitives.Indicator className="absolute inset-0">
+        <Primitives.Indicator className="absolute inset-0 flex items-center justify-center">
           {checked === "indeterminate" ? <MinusMini /> : <CheckMini />}
         </Primitives.Indicator>
       </div>
diff --git a/packages/design-system/ui/src/components/container/container.tsx b/packages/design-system/ui/src/components/container/container.tsx
index 45b1fbbaaa..5f3d5169bd 100644
--- a/packages/design-system/ui/src/components/container/container.tsx
+++ b/packages/design-system/ui/src/components/container/container.tsx
@@ -13,7 +13,7 @@ const Container = React.forwardRef<
     <div
       ref={ref}
       className={clx(
-        "shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-8 pb-8 pt-6",
+        "shadow-elevation-card-rest bg-ui-bg-base w-full rounded-lg px-6 py-4",
         className
       )}
       {...props}
diff --git a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
index 3711b4b800..f949917ca1 100644
--- a/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
@@ -103,7 +103,7 @@ const Content = React.forwardRef<
         align={align}
         collisionPadding={collisionPadding}
         className={clx(
-          "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[220px] overflow-hidden rounded-lg p-1",
+          "bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout max-h-[var(--radix-popper-available-height)] min-w-[220px] overflow-hidden rounded-lg p-1",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
@@ -124,7 +124,10 @@ const Item = React.forwardRef<
   <Primitives.Item
     ref={ref}
     className={clx(
-      "bg-ui-bg-base hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-pressed text-ui-fg-base data-[disabled]:text-ui-fg-disabled txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors",
+      "focus-visible:bg-ui-bg-component-hover",
+      "active:bg-ui-bg-component-pressed",
+      "data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
       className
     )}
     {...props}
@@ -142,13 +145,17 @@ const CheckboxItem = React.forwardRef<
   <Primitives.CheckboxItem
     ref={ref}
     className={clx(
-      "focus-visible:bg-ui-bg-base-pressed hover:bg-ui-bg-base-hover text-ui-fg-base data-[disabled]:text-ui-fg-disabled relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-9 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none",
+      "bg-ui-bg-component text-ui-fg-base relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 txt-compact-small outline-none transition-colors",
+      "focus-visible:bg-ui-bg-component-pressed",
+      "active:bg-ui-bg-component-pressed",
+      "data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
+      "data-[state=checked]:txt-compact-small-plus",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-3 flex h-5 w-5 items-center justify-center">
+    <span className="absolute left-2 flex size-[15px] items-center justify-center">
       <Primitives.ItemIndicator>
         <CheckMini />
       </Primitives.ItemIndicator>
@@ -168,12 +175,16 @@ const RadioItem = React.forwardRef<
   <Primitives.RadioItem
     ref={ref}
     className={clx(
-      "focus-visible:bg-ui-bg-base-pressed hover:bg-ui-base-hover bg-ui-bg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-9 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[state=checked]:font-medium data-[disabled]:opacity-50",
+      "bg-ui-bg-component txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors",
+      "focus-visible:bg-ui-bg-component-hover",
+      "active:bg-ui-bg-component-pressed",
+      "data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
+      "data-[state=checked]:txt-compact-small-plus",
       className
     )}
     {...props}
   >
-    <span className="absolute left-3 flex h-5 w-5 items-center justify-center">
+    <span className="absolute left-2 flex size-[15px] items-center justify-center">
       <Primitives.ItemIndicator>
         <EllipseMiniSolid className="text-ui-fg-base" />
       </Primitives.ItemIndicator>
@@ -207,7 +218,7 @@ const Separator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Primitives.Separator
     ref={ref}
-    className={clx("bg-ui-border-base -mx-1 my-1 h-px", className)}
+    className={clx("bg-ui-border-component -mx-1 my-1 h-0.5 border-t border-t-ui-border-menu-top border-b border-b-ui-border-menu-bot", className)}
     {...props}
   />
 ))
diff --git a/packages/design-system/ui/src/components/select/select.stories.tsx b/packages/design-system/ui/src/components/select/select.stories.tsx
index e1729c794e..6dab1465aa 100644
--- a/packages/design-system/ui/src/components/select/select.stories.tsx
+++ b/packages/design-system/ui/src/components/select/select.stories.tsx
@@ -80,7 +80,7 @@ export const Default: Story = {
   render: () => {
     return (
       <div className="w-[250px]">
-        <Select>
+        <Select open>
           <Select.Trigger>
             <Select.Value placeholder="Select" />
           </Select.Trigger>
diff --git a/packages/design-system/ui/src/components/select/select.tsx b/packages/design-system/ui/src/components/select/select.tsx
index 6807dbf45a..7ab7003e14 100644
--- a/packages/design-system/ui/src/components/select/select.tsx
+++ b/packages/design-system/ui/src/components/select/select.tsx
@@ -123,7 +123,7 @@ const Content = React.forwardRef<
       <SelectPrimitive.Content
         ref={ref}
         className={clx(
-          "bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout relative max-h-[200px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg",
+          "bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout relative max-h-[200px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -163,7 +163,7 @@ const Label = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={clx(
-      "txt-compact-xsmall-plus text-ui-fg-subtle px-3 py-2",
+      "txt-compact-xsmall-plus text-ui-fg-muted px-2 py-1.5",
       className
     )}
     {...props}
@@ -179,26 +179,21 @@ const Item = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => {
-  const { size } = useSelectContext()
-
   return (
     <SelectPrimitive.Item
       ref={ref}
       className={clx(
-        "bg-ui-bg-base grid cursor-pointer grid-cols-[20px_1fr] gap-x-2 rounded-md px-3 py-2 outline-none transition-colors",
-        "hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover",
-        {
-          "txt-compact-medium data-[state=checked]:txt-compact-medium-plus":
-            size === "base",
-          "txt-compact-small data-[state=checked]:txt-compact-medium-plus":
-            size === "small",
-        },
+        "bg-ui-bg-component grid cursor-pointer grid-cols-[15px_1fr] gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors txt-compact-small items-center",
+        "focus-visible:bg-ui-bg-component-hover",
+        "active:bg-ui-bg-component-pressed",
+        "data-[state=checked]:txt-compact-small-plus",
+        "disabled:text-ui-fg-disabled",
         className
       )}
       {...props}
     >
-      <span className="flex h-5 w-5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
+      <span className="flex h-[15px] w-[15px] items-center justify-center">
+        <SelectPrimitive.ItemIndicator className="flex items-center justify-center">
           <EllipseMiniSolid />
         </SelectPrimitive.ItemIndicator>
       </span>
@@ -216,7 +211,7 @@ const Separator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={clx("bg-ui-border-base -mx-1 my-1 h-px", className)}
+    className={clx("bg-ui-border-component -mx-1 my-1 h-0.5 border-t border-t-ui-border-menu-top border-b border-b-ui-border-menu-bot", className)}
     {...props}
   />
 ))
diff --git a/packages/design-system/ui/src/main.css b/packages/design-system/ui/src/main.css
index bb587cf7fd..6c1817e993 100644
--- a/packages/design-system/ui/src/main.css
+++ b/packages/design-system/ui/src/main.css
@@ -5,5 +5,6 @@
 @layer base {
   body {
     @apply !bg-ui-bg-base;
+    text-rendering: optimizeLegibility;
   }
 }