diff --git a/.github/workflows/front_storybook.yml b/.github/workflows/front_storybook.yml
new file mode 100644
index 00000000..40b1d39f
--- /dev/null
+++ b/.github/workflows/front_storybook.yml
@@ -0,0 +1,27 @@
+name: "Chromatic"
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.15.1
+      - name: Install dependencies
+        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 7888ad78..92fdb229 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -3,3 +3,5 @@ node_modules
 .DS_Store
 dist
 settings.json
+
+*storybook.log
\ No newline at end of file
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
new file mode 100644
index 00000000..e28432ad
--- /dev/null
+++ b/frontend/.storybook/main.ts
@@ -0,0 +1,38 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+const path = require('path');
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+      };
+    }
+    return config;
+  },
+};
+export default config;
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
new file mode 100644
index 00000000..590ee840
--- /dev/null
+++ b/frontend/.storybook/preview.tsx
@@ -0,0 +1,27 @@
+import type { Preview } from '@storybook/react';
+import GlobalStyle from '../src/styles/GlobalStyle';
+import React from 'react';
+import { GlobalLayout } from '../src/styles/GlobalLayout';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'centered',
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <GlobalLayout>
+      <GlobalStyle />
+      <Story />
+    </GlobalLayout>
+  ),
+];
+
+export default preview;