diff --git a/apps/storybook/.storybook/css.d.ts b/apps/storybook/.storybook/css.d.ts
new file mode 100644
index 0000000..cbe652d
--- /dev/null
+++ b/apps/storybook/.storybook/css.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
index e99a3f9..d90b0b5 100644
--- a/apps/storybook/.storybook/main.ts
+++ b/apps/storybook/.storybook/main.ts
@@ -8,12 +8,9 @@ const config: StorybookConfig = {
     autodocs: "tag",
   },
   async viteFinal(config) {
-    const { mergeConfig } = await import("vite");
     const tailwindPlugin = await import("@tailwindcss/vite");
-
-    return mergeConfig(config, {
-      plugins: [tailwindPlugin.default()],
-    });
+    config.plugins = [tailwindPlugin.default(), ...(config.plugins || [])];
+    return config;
   },
 };
 
diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
index 37914b1..58cc4c4 100644
--- a/apps/storybook/.storybook/preview.ts
+++ b/apps/storybook/.storybook/preview.ts
@@ -1,3 +1,4 @@
+import "./storybook.css";
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
diff --git a/apps/storybook/.storybook/storybook.css b/apps/storybook/.storybook/storybook.css
new file mode 100644
index 0000000..1661f90
--- /dev/null
+++ b/apps/storybook/.storybook/storybook.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@source "../../../packages/core-ui/src";
+
+@import "../../../packages/core-ui/src/styles/theme.css";
diff --git a/apps/storybook/tsconfig.json b/apps/storybook/tsconfig.json
index 99326ef..c5162ee 100644
--- a/apps/storybook/tsconfig.json
+++ b/apps/storybook/tsconfig.json
@@ -5,6 +5,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "*.ts", "*.tsx"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    ".storybook/**/*.ts",
+    "*.ts",
+    "*.tsx"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/packages/core-ui/package.json b/packages/core-ui/package.json
index 004e849..ae7b053 100644
--- a/packages/core-ui/package.json
+++ b/packages/core-ui/package.json
@@ -5,7 +5,8 @@
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./styles/globals.css": "./src/styles/globals.css"
+    "./styles/globals.css": "./src/styles/globals.css",
+    "./styles/theme.css": "./src/styles/theme.css"
   },
   "scripts": {
     "build": "tsc --noEmit",
diff --git a/packages/core-ui/src/styles/globals.css b/packages/core-ui/src/styles/globals.css
index 2eb4936..8d76f98 100644
--- a/packages/core-ui/src/styles/globals.css
+++ b/packages/core-ui/src/styles/globals.css
@@ -1,26 +1,2 @@
 @import "tailwindcss";
-
-@theme {
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(240 10% 3.9%);
-  --color-card: hsl(0 0% 100%);
-  --color-card-foreground: hsl(240 10% 3.9%);
-  --color-popover: hsl(0 0% 100%);
-  --color-popover-foreground: hsl(240 10% 3.9%);
-  --color-primary: hsl(240 5.9% 10%);
-  --color-primary-foreground: hsl(0 0% 98%);
-  --color-secondary: hsl(240 4.8% 95.9%);
-  --color-secondary-foreground: hsl(240 5.9% 10%);
-  --color-muted: hsl(240 4.8% 95.9%);
-  --color-muted-foreground: hsl(240 3.8% 46.1%);
-  --color-accent: hsl(240 4.8% 95.9%);
-  --color-accent-foreground: hsl(240 5.9% 10%);
-  --color-destructive: hsl(0 84.2% 60.2%);
-  --color-destructive-foreground: hsl(0 0% 98%);
-  --color-border: hsl(240 5.9% 90%);
-  --color-input: hsl(240 5.9% 90%);
-  --color-ring: hsl(240 5.9% 10%);
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-}
+@import "./theme.css";
diff --git a/packages/core-ui/src/styles/theme.css b/packages/core-ui/src/styles/theme.css
new file mode 100644
index 0000000..52aaa9b
--- /dev/null
+++ b/packages/core-ui/src/styles/theme.css
@@ -0,0 +1,24 @@
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(240 10% 3.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(240 10% 3.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(240 10% 3.9%);
+  --color-primary: hsl(240 5.9% 10%);
+  --color-primary-foreground: hsl(0 0% 98%);
+  --color-secondary: hsl(240 4.8% 95.9%);
+  --color-secondary-foreground: hsl(240 5.9% 10%);
+  --color-muted: hsl(240 4.8% 95.9%);
+  --color-muted-foreground: hsl(240 3.8% 46.1%);
+  --color-accent: hsl(240 4.8% 95.9%);
+  --color-accent-foreground: hsl(240 5.9% 10%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(240 5.9% 90%);
+  --color-input: hsl(240 5.9% 90%);
+  --color-ring: hsl(240 5.9% 10%);
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+}