diff --git a/.storybook/main.js b/.storybook/main.js
deleted file mode 100644
index 0d55f5b84..000000000
--- a/.storybook/main.js
+++ /dev/null
@@ -1,15 +0,0 @@
-module.exports = {
-  "stories": [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
-  ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
-  }
-}
\ No newline at end of file
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 000000000..23a824b53
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/core-common';
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+};
+
+export default config;
\ No newline at end of file
diff --git a/.storybook/preview.js b/.storybook/preview.ts
similarity index 100%
rename from .storybook/preview.js
rename to .storybook/preview.ts