diff --git a/apps/web/vitest.storybook.config.ts b/apps/web/vitest.storybook.config.ts
new file mode 100644
index 000000000..1b43df9bd
--- /dev/null
+++ b/apps/web/vitest.storybook.config.ts
@@ -0,0 +1,51 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Separate vitest config for Storybook browser tests.
+ * Run with: npx vitest --config vitest.storybook.config.ts
+ *
+ * These tests run in a real browser (Playwright/Chromium) and cannot use
+ * msw/node or other Node-only setup files.
+ */
+export default defineConfig({
+  plugins: [
+    react(),
+    storybookTest({
+      configDir: path.join(dirname, '.storybook'),
+    }),
+  ],
+  test: {
+    name: 'storybook',
+    globals: true,
+    browser: {
+      enabled: true,
+      headless: true,
+      provider: 'playwright',
+      instances: [{ browser: 'chromium' }],
+    },
+    setupFiles: ['.storybook/vitest.setup.ts'],
+    include: ['src/**/*.stories.tsx'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@hooks': path.resolve(__dirname, './src/hooks'),
+      '@services': path.resolve(__dirname, './src/services'),
+      '@types': path.resolve(__dirname, './src/types'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+      '@stores': path.resolve(__dirname, './src/stores'),
+      '@locales': path.resolve(__dirname, './src/locales'),
+    },
+  },
+});