diff --git a/.storybook/main.ts b/.storybook/main.ts
index a3731ef3f..2a195c2a1 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,21 +1,53 @@
 import type { StorybookConfig } from '@storybook/vue3-vite'
-import { mergeConfig } from 'vite'
+import { type InlineConfig, mergeConfig } from 'vite'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-onboarding'],
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}
   },
   async viteFinal(config) {
     return mergeConfig(config, {
+      server: {
+        allowedHosts: true
+      },
       resolve: {
         alias: {
-          '@': '/src'
+          '@': __dirname + '/../src'
         }
+      },
+      build: {
+        rollupOptions: {
+          external: (id) => {
+            // Suppress warnings for unused Vue internal imports
+            return false
+          },
+          onwarn: (warning, warn) => {
+            // Suppress specific warnings
+            if (warning.code === 'UNUSED_EXTERNAL_IMPORT' && warning.message?.includes('resolveComponent')) {
+              return
+            }
+            warn(warning)
+          },
+          output: {
+            manualChunks: {
+              'vue-vendor': ['vue', 'vue-router'],
+              'primevue': ['primevue/config', 'primevue'],
+              'storybook-docs': ['@storybook/docs-tools'],
+              'litegraph': ['./src/lib/litegraph']
+            }
+          }
+        },
+        chunkSizeWarningLimit: 1000
       }
-    })
+    } satisfies InlineConfig)
   }
 }
 export default config
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 531d3cd66..b400a4b07 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,11 +1,53 @@
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
 import { setup } from '@storybook/vue3'
 import type { Preview } from '@storybook/vue3-vite'
 import { createPinia } from 'pinia'
+import 'primeicons/primeicons.css'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+import Tooltip from 'primevue/tooltip'
+
+import '../src/assets/css/style.css'
+import { i18n } from '../src/i18n'
+import '../src/lib/litegraph/public/css/litegraph.css'
+import { useWidgetStore } from '../src/stores/widgetStore'
+import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
+
+const ComfyUIPreset = definePreset(Aura, {
+  semantic: {
+    // @ts-expect-error fixme ts strict error
+    primary: Aura['primitive'].blue
+  }
+})
 
 // Setup Vue app for Storybook
 setup((app) => {
-  // Add Pinia store
-  app.use(createPinia())
+  app.directive('tooltip', Tooltip)
+  const pinia = createPinia()
+  app.use(pinia)
+
+  // Initialize stores
+  const colorPaletteStore = useColorPaletteStore(pinia)
+  const widgetStore = useWidgetStore(pinia)
+
+  app.use(i18n)
+  app.use(PrimeVue, {
+    theme: {
+      preset: ComfyUIPreset,
+      options: {
+        prefix: 'p',
+        cssLayer: {
+          name: 'primevue',
+          order: 'primevue, tailwind-utilities'
+        },
+        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
+      }
+    }
+  })
+  app.use(ConfirmationService)
+  app.use(ToastService)
 })
 
 const preview: Preview = {
diff --git a/package-lock.json b/package-lock.json
index 2e4d84289..f7fadb020 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,7 +60,6 @@
         "@pinia/testing": "^0.1.5",
         "@playwright/test": "^1.52.0",
         "@storybook/addon-docs": "^9.1.1",
-        "@storybook/addon-onboarding": "^9.1.1",
         "@storybook/vue3-vite": "^9.1.1",
         "@trivago/prettier-plugin-sort-imports": "^5.2.0",
         "@types/dompurify": "^3.0.5",
@@ -4435,20 +4434,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@storybook/addon-onboarding": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-9.1.1.tgz",
-      "integrity": "sha512-QHkirYjgHqhJMmD2riVJ4qvkwNif79phEJuMd+Zna2niT5MMkmFSd+lfLgbEYr6ufbL2OWnsoUmxRY5s3RgKQw==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      },
-      "peerDependencies": {
-        "storybook": "^9.1.1"
-      }
-    },
     "node_modules/@storybook/builder-vite": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.1.1.tgz",
diff --git a/package.json b/package.json
index 9f80ea238..c6e922fc2 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,6 @@
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-onboarding": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/dompurify": "^3.0.5",
diff --git a/vite.config.mts b/vite.config.mts
index 3b1c81566..9c16e63ad 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -179,7 +179,7 @@ export default defineConfig({
 
   resolve: {
     alias: {
-      '@': '/src'
+      '@': './src'
     }
   },