diff --git a/frontend/docs/packages-license.md b/frontend/docs/packages-license.md
index 2de257f3f..08f8f6d27 100644
--- a/frontend/docs/packages-license.md
+++ b/frontend/docs/packages-license.md
@@ -1,6 +1,6 @@
 # frontend
 
-As of December  2, 2024  6:59am. 990 total
+As of December  2, 2024  7:59am. 990 total
 
 ## Summary
 * 859 MIT
diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json
index 83e698693..3b5a13a2d 100644
--- a/frontend/packages/cli/package.json
+++ b/frontend/packages/cli/package.json
@@ -9,7 +9,6 @@
   },
   "dependencies": {
     "commander": "12.1.0",
-    "destyle.css": "4.0.1",
     "react": "18",
     "react-dom": "18",
     "valibot": "^1.0.0-beta.5"
diff --git a/frontend/packages/cli/src/globals.css b/frontend/packages/cli/src/globals.css
index ec50b293e..47459ba17 100644
--- a/frontend/packages/cli/src/globals.css
+++ b/frontend/packages/cli/src/globals.css
@@ -1,4 +1,4 @@
-@import url('destyle.css');
+@import url('@liam/erd-core/styles/globals.css');
 
 #root {
   display: flex;
diff --git a/frontend/packages/erd-core/styles/globals.css b/frontend/packages/erd-core/styles/globals.css
new file mode 100644
index 000000000..040e96dfd
--- /dev/null
+++ b/frontend/packages/erd-core/styles/globals.css
@@ -0,0 +1 @@
+@import url('@liam/ui/styles/globals.css');
diff --git a/frontend/packages/ui/package.json b/frontend/packages/ui/package.json
index ffcd46b5b..4f9bee47d 100644
--- a/frontend/packages/ui/package.json
+++ b/frontend/packages/ui/package.json
@@ -7,6 +7,7 @@
     "@radix-ui/react-dropdown-menu": "2.1.2",
     "@radix-ui/react-tooltip": "1.1.3",
     "clsx": "2.1.1",
+    "destyle.css": "4.0.1",
     "lucide-react": "0.451.0",
     "ts-pattern": "5.4.0"
   },
diff --git a/frontend/packages/ui/styles/Dark/variables.css b/frontend/packages/ui/styles/Dark/variables.css
new file mode 100644
index 000000000..3bfbda992
--- /dev/null
+++ b/frontend/packages/ui/styles/Dark/variables.css
@@ -0,0 +1,296 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Thu, 17 Oct 2024 04:57:00 GMT
+ */
+
+:root {
+  --color-gray-0: #ffffff;
+  --color-gray-5: #f7f7f7;
+  --color-gray-10: #f0f0f0;
+  --color-gray-30: #e7e8ea;
+  --color-gray-50: #d1d2d3;
+  --color-gray-100: #bebfc1;
+  --color-gray-400: #5f6366;
+  --color-gray-500: #434546;
+  --color-gray-600: #393b3c;
+  --color-gray-700: #383a3b;
+  --color-gray-800: #2e3031;
+  --color-gray-900: #232526;
+  --color-gray-1000: #141616;
+  --color-vermilion-700: #803f30;
+  --color-vermilion-800: #a6523f;
+  --color-vermilion-900: #d55235;
+  --color-vermilion-1000: #c64427;
+  --color-gold-50: #fff9eb;
+  --color-gold-300: #ffbf36;
+  --color-gold-950: #461402;
+  --color-gold-alpha-10: rgba(240, 181, 55, 0.1);
+  --color-gold-alpha-20: rgba(240, 181, 55, 0.2);
+  --color-gold-alpha-40: rgba(240, 181, 55, 0.4);
+  --color-gold-alpha-50: rgba(240, 181, 55, 0.5);
+  --color-gold-alpha-100: #ffbf36;
+  --color-white-alpha-5: rgba(255, 255, 255, 0.05);
+  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
+  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
+  --color-white-alpha-30: rgba(255, 255, 255, 0.3);
+  --color-white-alpha-40: rgba(255, 255, 255, 0.4);
+  --color-white-alpha-50: rgba(255, 255, 255, 0.5);
+  --color-white-alpha-60: rgba(255, 255, 255, 0.6);
+  --color-white-alpha-70: rgba(255, 255, 255, 0.7);
+  --color-white-alpha-100: #ffffff;
+  --color-black-alpha-5: rgba(0, 0, 0, 0.05);
+  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
+  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
+  --color-black-alpha-30: rgba(0, 0, 0, 0.3);
+  --color-black-alpha-40: rgba(0, 0, 0, 0.4);
+  --color-black-alpha-50: rgba(0, 0, 0, 0.5);
+  --color-black-alpha-60: rgba(0, 0, 0, 0.6);
+  --color-black-alpha-70: rgba(0, 0, 0, 0.7);
+  --color-black-alpha-100: #000000;
+  --color-yellow-alpha-10: rgba(255, 215, 72, 0.1);
+  --color-yellow-alpha-20: rgba(255, 215, 72, 0.2);
+  --color-yellow-alpha-100: #ffd748;
+  --color-teal-100: #f9fefe;
+  --color-teal-200: #f0fbfc;
+  --color-teal-300: #d7f9fc;
+  --color-teal-400: #bef4f9;
+  --color-teal-500: #a5edf3;
+  --color-teal-600: #87e2eb;
+  --color-teal-700: #5bd3de;
+  --color-teal-800: #00bfcf;
+  --color-teal-900: #00a9b6;
+  --color-teal-1000: #009ba8;
+  --color-teal-1100: #00818c;
+  --color-teal-1200: #003f45;
+  --color-teal-alpha-20: rgba(0, 169, 182, 0.2);
+  --color-teal-alpha-40: rgba(0, 169, 182, 0.4);
+  --color-green-10: #fafefb;
+  --color-green-50: #eefff5;
+  --color-green-80: #deffe6;
+  --color-green-100: #c8ffd7;
+  --color-green-200: #b4fed7;
+  --color-green-300: #4af19c;
+  --color-green-400: #1ded83;
+  --color-green-500: #36c271;
+  --color-green-600: #008543;
+  --color-green-700: #174428;
+  --color-green-950: #00331b;
+  --color-green-alpha-10: rgba(29, 237, 131, 0.1);
+  --color-green-alpha-20: rgba(29, 237, 131, 0.2);
+  --color-green-alpha-40: rgba(29, 237, 131, 0.4);
+  --color-green-alpha-100: #1ded83;
+  --color-purple-alpha-10: rgba(193, 112, 255, 0.1);
+  --color-purple-alpha-20: rgba(193, 112, 255, 0.2);
+  --color-purple-alpha-40: rgba(193, 112, 255, 0.4);
+  --color-purple-alpha-100: #c170ff;
+  --color-red-50: #fff2f1;
+  --color-red-300: #ffa5a1;
+  --color-red-500: #f75049;
+  --color-red-550: #d55235;
+  --color-red-600: #c64427;
+  --color-red-650: #a6523f;
+  --color-red-700: #803f30;
+  --color-red-950: #480a07;
+  --color-red-alpha-10: rgba(247, 80, 73, 0.1);
+  --color-red-alpha-20: rgba(247, 80, 73, 0.2);
+  --color-red-alpha-40: rgba(247, 80, 73, 0.4);
+  --color-red-alpha-100: #f75049;
+  --color-blue-alpha-10: rgba(20, 188, 255, 0.1);
+  --color-blue-alpha-20: rgba(20, 188, 255, 0.2);
+  --color-blue-alpha-100: #14bcff;
+  --color-blue-alpha-900-accentcolor: #3e63dd;
+  --color-red-milk-40: rgba(255, 195, 193, 0.4);
+  --color-red-milk-100: #ffc3c1;
+  --color-red-milk-200: #ea928e;
+  --color-green-milk-40: rgba(176, 249, 212, 0.4);
+  --color-green-milk-100: #b0f9d4;
+  --color-green-milk-200: #5ec692;
+  --color-blue-milk-40: rgba(204, 232, 242, 0.4);
+  --color-blue-milk-100: #cce8f2;
+  --color-blue-milk-200: #97bdcb;
+  --color-yellow-milk-40: rgba(231, 221, 179, 0.4);
+  --color-yellow-milk-100: #e7ddb3;
+  --color-yellow-milk-200: #c3b476;
+  --border-radius-none: 0px;
+  --border-radius-xs: 1px;
+  --border-radius-sm: 2px;
+  --border-radius-smbase: 3px;
+  --border-radius-base: 4px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+  --border-radius-lg-plus: 9px;
+  --border-radius-xl: 12px;
+  --border-radius-2xl: 16px;
+  --border-radius-3xl: 20px;
+  --border-radius-full: 9999px;
+  --border-width-base: 1px;
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-14: 56px;
+  --spacing-20: 80px;
+  --spacing-30: 120px;
+  --spacing-275: 275px;
+  --spacing-1half: 6px;
+  --spacing-half: 2px;
+  --global-background: #141616;
+  --global-foreground: #ffffff;
+  --global-muted-background: #232526;
+  --global-border: #383a3b;
+  --global-body-text: #d1d2d3;
+  --global-mute-text: #bebfc1;
+  --primary-accent: #1ded83;
+  --primary-hover: #4af19c;
+  --primary-color: #1ded83;
+  --primary-accent-overlay: rgba(29, 237, 131, 0.1);
+  --primary-on-white-shape: #36c271;
+  --primary-on-white-text: #008543;
+  --info-background: #ffffff;
+  --info-foreground: #003f45;
+  --error-background: #ffffff;
+  --error-foreground: #480a07;
+  --success-background: #ffffff;
+  --success-foreground: #00331b;
+  --warning-background: #ffffff;
+  --warning-foreground: #461402;
+  --button-border: #434546;
+  --button-foreground: #000000;
+  --button-primary-foreground: #000000;
+  --button-secondary-foreground: #ffffff;
+  --button-background: #2e3031;
+  --button-background-hover: #434546;
+  --button-background-active: #5f6366;
+  --button-disabled-foreground: #5f6366;
+  --button-disabled-background: #2e3031;
+  --button-primary: #1ded83;
+  --button-primary-background-hover: #4af19c;
+  --button-danger: #c64427;
+  --button-danger-foreground: #ffffff;
+  --button-danger-background-hover: #d55235;
+  --button-ghost-secondary-background: #00331b;
+  --button-secondary-background-hover: #ffffff;
+  --avatar-text: #232526;
+  --avatar-background: #ffd748;
+  --pane-border: #383a3b;
+  --pane-border-hover: #5f6366;
+  --pane-border-active: #434546;
+  --pane-muted-background: #2e3031;
+  --pane-background: #232526;
+  --pane-background-hover: #383a3b;
+  --pane-background-active: #2e3031;
+  --link-default: #bebfc1;
+  --link-active: #ffffff;
+  --tooltip-border: #f0f0f0;
+  --tooltip-foreground: #2e3031;
+  --tooltip-background: #ffffff;
+  --toggle-background: #5f6366;
+  --toggle-background-checked: #1ded83;
+  --toggle-foreground: #ffffff;
+  --node-border: #2e3031;
+  --node-background: #141616;
+  --node-block: #00a9b6;
+  --node-page-active: #ffbf36;
+  --node-layout: #1ded83;
+  --node-action: #f75049;
+  --node-page-default: rgba(240, 181, 55, 0.5);
+  --node-partial: #c170ff;
+  --danger-default: #c64427;
+  --danger-hover: #d55235;
+  --danger-disabled: #803f30;
+  --collaborator-color-1: #14bcff;
+  --collaborator-color-2: #f87dbd;
+  --collaborator-color-3: #ff8570;
+  --collaborator-color-4: #00caa7;
+  --collaborator-color-5: #7fc44f;
+  --collaborator-color-6: #b39aff;
+  --collaborator-color-7: #d2a800;
+  --collaborator-color-8: #83acff;
+  --collaborator-color-9: #fb8d30;
+  --collaborator-color-you: #ffd748;
+  --checkbox-background: #f0f0f0;
+  --checkbox-border: #d1d2d3;
+  --checkbox-border-hover: #bebfc1;
+  --checkbox-border-active: #5f6366;
+  --checkbox-border-disable: #434546;
+  --checkbox-background-disable: #393b3c;
+  --checkbox-foreground: #ffffff;
+  --dropdown-background-hover: #2e3031;
+  --dropdown-background-active: #232526;
+  --dropdown-border: #5f6366;
+  --shadow-basic-shadow: #000000;
+  --shadow-context-menu-shadow: rgba(0, 0, 0, 0.4);
+  --overlay-5: rgba(255, 255, 255, 0.05);
+  --overlay-10: rgba(255, 255, 255, 0.1);
+  --overlay-20: rgba(255, 255, 255, 0.2);
+  --overlay-30: rgba(255, 255, 255, 0.3);
+  --overlay-40: rgba(255, 255, 255, 0.4);
+  --overlay-50: rgba(255, 255, 255, 0.5);
+  --overlay-60: rgba(255, 255, 255, 0.6);
+  --overlay-70: rgba(255, 255, 255, 0.7);
+  --overlay-100: #ffffff;
+  --overlay-30-revert: rgba(0, 0, 0, 0.3);
+  --modal-overlay: rgba(0, 0, 0, 0.2);
+  --edit: #28507a;
+  --accent: #3e63dd;
+  --select-royal-blue: #3e63dd;
+  --select-indigo: #4d56c9;
+  --select-blue-violet: #5e52c1;
+  --select-studio: #7b4cb8;
+  --select-trendy-pink: #984bac;
+  --select-mulberry: #c44791;
+  --select-cabaret: #d84676;
+  --select-mandy: #d54a5c;
+  --select-valencia: #d54b48;
+  --select-flamingo: #e9672b;
+  --select-saffron: #ffbb38;
+  --select-golden-dream: #ffe52e;
+  --select-yellow-green: #bee76b;
+  --select-fruit-salad: #509956;
+  --select-ocean-green: #3f957a;
+  --select-lochinvar: #379889;
+  --select-boston-blue: #3096bc;
+  --select-spray: #81dcfa;
+  --select-riptide: #8ce3cf;
+  --select-cherokee: #ffdd9c;
+  --select-kobi: #eca3bb;
+  --select-light-wisteria: #bda6dc;
+  --position-pattern-border: #393b3c;
+  --position-pattern-border-hover: #5f6366;
+  --position-pattern-background: #232526;
+  --position-pattern-foreground: #5f6366;
+  --position-pattern-foreground-hover: #bebfc1;
+  --callout-callout: #ffffff;
+  --callout-default-background: rgba(255, 255, 255, 0.05);
+  --callout-default-border: rgba(255, 255, 255, 0.1);
+  --callout-default-text: #bebfc1;
+  --callout-default-link: #ffffff;
+  --callout-default-underline: rgba(255, 255, 255, 0.4);
+  --callout-danger-background: rgba(247, 80, 73, 0.1);
+  --callout-danger-border: rgba(247, 80, 73, 0.2);
+  --callout-danger-text: #ea928e;
+  --callout-danger-link: #ffc3c1;
+  --callout-danger-underline: rgba(255, 195, 193, 0.4);
+  --callout-success-background: rgba(29, 237, 131, 0.1);
+  --callout-success-border: rgba(29, 237, 131, 0.2);
+  --callout-success-text: #5ec692;
+  --callout-success-link: #b0f9d4;
+  --callout-success-underline: rgba(176, 249, 212, 0.4);
+  --callout-info-background: rgba(20, 188, 255, 0.1);
+  --callout-info-border: rgba(20, 188, 255, 0.2);
+  --callout-info-text: #97bdcb;
+  --callout-info-link: #cce8f2;
+  --callout-info-underline: rgba(204, 232, 242, 0.4);
+  --callout-warning-background: rgba(255, 215, 72, 0.1);
+  --callout-warning-border: rgba(255, 215, 72, 0.2);
+  --callout-warning-text: #c3b476;
+  --callout-warning-link: #e7ddb3;
+  --callout-warning-underline: rgba(231, 221, 179, 0.4);
+}
diff --git a/frontend/packages/ui/styles/Mode 1/variables.css b/frontend/packages/ui/styles/Mode 1/variables.css
new file mode 100644
index 000000000..2458036a7
--- /dev/null
+++ b/frontend/packages/ui/styles/Mode 1/variables.css	
@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Thu, 17 Oct 2024 04:57:00 GMT
+ */
+
+:root {
+  --font-size-1: 10px;
+  --font-size-2: 11px;
+  --font-size-3: 12px;
+  --font-size-4: 13px;
+  --font-size-5: 14px;
+  --font-size-6: 16px;
+  --font-size-7: 18px;
+  --font-size-8: 20px;
+  --font-size-9: 22px;
+  --font-size-10: 24px;
+  --font-size-14: 32px;
+  --font-size-16: 40px;
+  --font-size-18: 48px;
+  --text-weight-en-light: Light;
+  --text-weight-en-regular: Regular;
+  --text-weight-en-medium: Medium;
+  --text-weight-en-semibold: SemiBold;
+  --text-weight-en-bold: Bold;
+  --text-weight-ja-regular: W3;
+  --text-weight-ja-bold: W6;
+  --main-font: Inter;
+  --message-font: Montserrat;
+  --main-font-ja: Hiragino Sans;
+}
diff --git a/frontend/packages/ui/styles/globals.css b/frontend/packages/ui/styles/globals.css
new file mode 100644
index 000000000..3a9e94c0f
--- /dev/null
+++ b/frontend/packages/ui/styles/globals.css
@@ -0,0 +1,3 @@
+@import url('destyle.css');
+@import './Dark/variables.css';
+@import './Mode 1/variables.css';
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 96f7ac82c..5314cad3a 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -75,9 +75,6 @@ importers:
       commander:
         specifier: 12.1.0
         version: 12.1.0
-      destyle.css:
-        specifier: 4.0.1
-        version: 4.0.1
       react:
         specifier: '18'
         version: 18.3.1
@@ -232,6 +229,9 @@ importers:
       clsx:
         specifier: 2.1.1
         version: 2.1.1
+      destyle.css:
+        specifier: 4.0.1
+        version: 4.0.1
       lucide-react:
         specifier: 0.451.0
         version: 0.451.0(react@18.3.1)