diff --git a/.storybook/main.js b/.storybook/main.js
index 7afbb5d..6e3993d 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -16,11 +16,7 @@ const config = {
     options: {},
   },
   staticDirs: ["../public"],
-  managerHead: (head) => `${head}<base href="/communityrulestorybook/">`,
-  previewHead: (head) => `${head}<base href="/communityrulestorybook/">`,
   async viteFinal(cfg) {
-    // IMPORTANT: Set base path for GitHub Pages sub-path hosting
-    cfg.base = "/communityrulestorybook/";
     // Ensure esbuild treats .js as JSX during dep pre-bundling
     cfg.optimizeDeps ??= {};
     cfg.optimizeDeps.esbuildOptions ??= {};
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 1fd25df..59394fb 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,20 @@
 import "../app/globals.css";
 
+// Import Google Fonts for Storybook
+import { Inter, Bricolage_Grotesque } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-inter",
+});
+
+const bricolageGrotesque = Bricolage_Grotesque({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-bricolage-grotesque",
+});
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -11,6 +26,13 @@ const preview = {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <div className={`${inter.variable} ${bricolageGrotesque.variable}`}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default preview;
diff --git a/.storybook/preview.local.js b/.storybook/preview.local.js
index 1fd25df..59394fb 100644
--- a/.storybook/preview.local.js
+++ b/.storybook/preview.local.js
@@ -1,5 +1,20 @@
 import "../app/globals.css";
 
+// Import Google Fonts for Storybook
+import { Inter, Bricolage_Grotesque } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-inter",
+});
+
+const bricolageGrotesque = Bricolage_Grotesque({
+  subsets: ["latin"],
+  weight: ["400", "500"],
+  variable: "--font-bricolage-grotesque",
+});
+
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
@@ -11,6 +26,13 @@ const preview = {
       },
     },
   },
+  decorators: [
+    (Story) => (
+      <div className={`${inter.variable} ${bricolageGrotesque.variable}`}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default preview;