diff --git a/apps/whitebird-ui/.storybook/preview-head.html b/apps/whitebird-ui/.storybook/preview-head.html
index 800fd0c..14c0a61 100644
--- a/apps/whitebird-ui/.storybook/preview-head.html
+++ b/apps/whitebird-ui/.storybook/preview-head.html
@@ -1,5 +1,6 @@
 <script type="module">
   import '../src/index.css'
+  import '../src/fonts.css'
   import { token } from '../styled-system/tokens'
 
   document.head.insertAdjacentHTML(
diff --git a/apps/whitebird-ui/package.json b/apps/whitebird-ui/package.json
index 3334fb8..22cb1e8 100644
--- a/apps/whitebird-ui/package.json
+++ b/apps/whitebird-ui/package.json
@@ -10,11 +10,17 @@
     "./vue/*": "./dist/vue/*.vue",
     "./vue/*.vue": "./dist/vue/*.vue",
     "./react/*": "./dist/react/*",
-    "./react/*.tsx": "./dist/react/*.tsx"
+    "./react/*.tsx": "./dist/react/*.tsx",
+    "./css": "./dist/whitebird.css",
+    "./css/whitebird": "./dist/whitebird.css",
+    "./css/whitebird.css": "./dist/whitebird.css",
+    "./css/fonts": "./src/fonts.css",
+    "./css/fonts.css": "./src/fonts.css"
   },
   "files": [
     "dist",
-    "src/panda/whitebird-preset.ts"
+    "src/panda/whitebird-preset.ts",
+    "src/fonts.css"
   ],
   "scripts": {
     "prepare": "panda codegen",
diff --git a/apps/whitebird-ui/panda.config.ts b/apps/whitebird-ui/panda.config.ts
index f9f5d77..d5ad61b 100644
--- a/apps/whitebird-ui/panda.config.ts
+++ b/apps/whitebird-ui/panda.config.ts
@@ -6,7 +6,6 @@ export default defineConfig({
   // Whether to use css reset
   preflight: true,
 
-  // /src/components/**/*.tsx
   include: [
     './src/components/**/*.{js,jsx,ts,tsx,kaz}',
     './src/stories/**/*.{js,jsx,ts,tsx,kaz}',
diff --git a/apps/whitebird-ui/src/fonts.css b/apps/whitebird-ui/src/fonts.css
new file mode 100644
index 0000000..a70fb32
--- /dev/null
+++ b/apps/whitebird-ui/src/fonts.css
@@ -0,0 +1,3 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&family=Space+Mono&display=swap');
+@import url('https://fontlibrary.org//face/terminal-grotesque');
+@import url('https://cdn.jsdelivr.net/npm/remixicon@latest/fonts/remixicon.css');
diff --git a/apps/whitebird-ui/src/index.css b/apps/whitebird-ui/src/index.css
index 9a858b2..e27a23b 100644
--- a/apps/whitebird-ui/src/index.css
+++ b/apps/whitebird-ui/src/index.css
@@ -1,5 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&family=Space+Mono&display=swap');
-@import url('https://fontlibrary.org//face/terminal-grotesque');
-@import url('https://cdn.jsdelivr.net/npm/remixicon@latest/fonts/remixicon.css');
-
 @layer reset, base, tokens, recipes, utilities;