diff --git a/client/.storybook/main.ts b/client/.storybook/main.ts
index cf0da38f9..fbee93416 100644
--- a/client/.storybook/main.ts
+++ b/client/.storybook/main.ts
@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/nextjs';
 import path from 'path';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)'],
   staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',
@@ -25,7 +25,7 @@ const config: StorybookConfig = {
     },
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
   },
   core: {
     builder: '@storybook/builder-webpack5',
diff --git a/client/.storybook/preview.ts b/client/.storybook/preview.ts
deleted file mode 100644
index 3e1c88584..000000000
--- a/client/.storybook/preview.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Preview } from '@storybook/react';
-import '../src/app/styles/globals.scss';
-import './font.scss';
-
-const preview: Preview = {
-  parameters: {
-    backgrounds: {
-      default: 'blacked',
-      values: [
-        {
-          name: 'blacked',
-          value: '#26292b',
-        },
-      ],
-    },
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-};
-
-export default preview;
diff --git a/client/.storybook/preview.tsx b/client/.storybook/preview.tsx
new file mode 100644
index 000000000..e928527f9
--- /dev/null
+++ b/client/.storybook/preview.tsx
@@ -0,0 +1,67 @@
+import type { StoryFn } from '@storybook/react';
+import '../src/app/styles/globals.scss';
+import './font.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  viewMode: 'docs',
+  previewTabs: {
+    canvas: {
+      title: 'Story',
+    },
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+    },
+  },
+  viewport: {
+    viewports: {
+      '360': {
+        name: '360',
+        styles: {
+          width: '360px',
+          height: '780px',
+        },
+      },
+      '768': {
+        name: '768',
+        styles: {
+          width: '768px',
+          height: '1664px',
+        },
+      },
+      '1024': {
+        name: '1024',
+        styles: {
+          width: '1024px',
+          height: '576px',
+        },
+      },
+      '1600+': {
+        name: '1600+',
+        styles: {
+          width: '1600px',
+          height: '900px',
+        },
+      },
+    },
+  },
+};
+
+export const decorators = [
+  (Story: StoryFn) => (
+    <div
+      style={{
+        margin: 10,
+        display: 'flex',
+        justifyContent: 'start',
+        alignItems: 'start',
+        flexDirection: 'column',
+        gap: '20px',
+      }}
+    >
+      <Story />
+    </div>
+  ),
+];