diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index 629d5a808..593698643 100644
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -7,6 +7,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-styling',
   ],
   framework: {
     name: '@storybook/react-webpack5',
diff --git a/frontend/.storybook/preview.ts b/frontend/.storybook/preview.tsx
similarity index 60%
rename from frontend/.storybook/preview.ts
rename to frontend/.storybook/preview.tsx
index 4d16d5f9f..c3237a5c5 100644
--- a/frontend/.storybook/preview.ts
+++ b/frontend/.storybook/preview.tsx
@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/react';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 import GlobalStyles from '../src/styles/GlobalStyles';
+import { ThemeProvider } from 'styled-components';
+import theme from '../src/styles/theme';
 
 const preview: Preview = {
   parameters: {
@@ -12,7 +14,14 @@ const preview: Preview = {
       },
     },
   },
-  decorators: [withThemeFromJSXProvider({ GlobalStyles })],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        <Story />
+      </ThemeProvider>
+    ),
+    withThemeFromJSXProvider({ GlobalStyles }),
+  ],
 };
 
 export default preview;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 38f68a370..3cd8bc65a 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -18,5 +18,5 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src"]
+  "include": ["src", ".storybook/*"]
 }