diff --git a/web/apps/ui-docs/.storybook/main.ts b/web/apps/ui-docs/.storybook/main.ts
index 549f4c5e92..ef7d8badf9 100644
--- a/web/apps/ui-docs/.storybook/main.ts
+++ b/web/apps/ui-docs/.storybook/main.ts
@@ -12,14 +12,11 @@ import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   stories: ["../stories"],
   addons: [
-    // getAbsolutePath("@storybook/addon-links"),
-    // getAbsolutePath("@storybook/addon-essentials"),
-    // getAbsolutePath("@storybook/addon-themes")
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-themes'
   ],
-  framework: '@storybook/react-vite', // 👈 Add this
+  framework: '@storybook/react-vite',
   docs: {
     autodocs: true
   }
diff --git a/web/apps/ui-docs/.storybook/preview.js b/web/apps/ui-docs/.storybook/preview.tsx
similarity index 86%
rename from web/apps/ui-docs/.storybook/preview.js
rename to web/apps/ui-docs/.storybook/preview.tsx
index d3e12b14c2..7bc9e1dd2a 100644
--- a/web/apps/ui-docs/.storybook/preview.js
+++ b/web/apps/ui-docs/.storybook/preview.tsx
@@ -1,8 +1,9 @@
 import storybookSignalcoTheme from './signalco-theme';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import '../global.css';
+import { Preview } from '@storybook/react';
 
-const preview = {
+const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
@@ -21,7 +22,7 @@ const preview = {
         dark: 'dark'
       },
       defaultTheme: 'dark',
-    }),
+    })
   ]
 };
 
diff --git a/web/apps/ui-docs/.storybook/signalco-theme.js b/web/apps/ui-docs/.storybook/signalco-theme.ts
similarity index 70%
rename from web/apps/ui-docs/.storybook/signalco-theme.js
rename to web/apps/ui-docs/.storybook/signalco-theme.ts
index 3d0a366103..939d1ea25f 100644
--- a/web/apps/ui-docs/.storybook/signalco-theme.js
+++ b/web/apps/ui-docs/.storybook/signalco-theme.ts
@@ -1,9 +1,9 @@
 import { create } from '@storybook/theming/create';
-
+export type ThemeVars = ReturnType<typeof create>;
 export default create({
     base: 'dark',
     brandTitle: 'signalco UI',
     brandUrl: 'https://ui.signalco.io',
     brandImage: 'https://www.signalco.io/LogotypeDark.png',
-    brandTarget: '_self'
-});
\ No newline at end of file
+    brandTarget: '_self',
+}) as ThemeVars;
\ No newline at end of file