diff --git a/.storybook/main.ts b/.storybook/main.ts
index 881c2d0..ac52e66 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -7,7 +7,8 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
-    "@storybook/addon-a11y"
+    "@storybook/addon-a11y",
+    "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/react-vite",
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 1cdef2a..99f43d8 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,6 +1,6 @@
 import "../src/index.css";
-
-import type { Preview } from "@storybook/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import type { Preview, ReactRenderer } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
@@ -14,6 +14,15 @@ const preview: Preview = {
       toc: true,
     },
   },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
   tags: ["autodocs"],
 };
 
diff --git a/bun.lockb b/bun.lockb
index bcb7ba1..95b12f2 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 9be008b..42d378c 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
diff --git a/src/styles/globalCss.ts b/src/styles/globalCss.ts
index 892d9de..03aeeaf 100644
--- a/src/styles/globalCss.ts
+++ b/src/styles/globalCss.ts
@@ -2,7 +2,7 @@ import { defineGlobalStyles } from "@pandacss/dev";
 
 export const globalCss = defineGlobalStyles({
   ":root": {
-    "--global-font-body": "var  (--fonts-sans)",
+    "--global-font-body": "var(--fonts-sans)",
   },
   h1: {
     fontSize: "var(--font-sizes-4xl)", // 2.25rem