diff --git a/client/.storybook/main.js b/client/.storybook/main.js
index 5e2cbdab..94f98969 100644
--- a/client/.storybook/main.js
+++ b/client/.storybook/main.js
@@ -6,6 +6,7 @@ const config = {
     '../src/**/__tests__/**/*.story.@(js|jsx|mjs|ts|tsx|mdx)',
   ],
   addons: ['@storybook/addon-a11y', '@storybook/addon-links'],
+  staticDirs: ['../public'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
diff --git a/client/package-lock.json b/client/package-lock.json
index 4e2784c7..42bed08a 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "client",
       "version": "1.59.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@emotion/react": "^11.11.0",
         "@emotion/styled": "^11.11.0",
diff --git a/client/package.json b/client/package.json
index 9beec8a1..46e41398 100644
--- a/client/package.json
+++ b/client/package.json
@@ -28,6 +28,7 @@
     "typescript": "5.9.3"
   },
   "scripts": {
+    "postinstall": "npx msw init public/ --save",
     "dev": "vite",
     "start": "vite",
     "build": "vite build",
diff --git a/client/src/components/__tests__/ChannelManager.story.tsx b/client/src/components/__tests__/ChannelManager.story.tsx
index 5ff04002..837b9bca 100644
--- a/client/src/components/__tests__/ChannelManager.story.tsx
+++ b/client/src/components/__tests__/ChannelManager.story.tsx
@@ -16,6 +16,13 @@ const meta: Meta<typeof ChannelManager> = {
   parameters: {
     layout: 'fullscreen',
   },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 };
 
 export default meta;
diff --git a/client/src/components/__tests__/VideosPage.story.tsx b/client/src/components/__tests__/VideosPage.story.tsx
index 5675598b..913bd32f 100644
--- a/client/src/components/__tests__/VideosPage.story.tsx
+++ b/client/src/components/__tests__/VideosPage.story.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within, waitFor } from 'storybook/test';
 import { http, HttpResponse } from 'msw';
+import { MemoryRouter } from 'react-router-dom';
 import VideosPage from '../VideosPage';
 
 const meta: Meta<typeof VideosPage> = {
@@ -13,6 +14,13 @@ const meta: Meta<typeof VideosPage> = {
   parameters: {
     layout: 'fullscreen',
   },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
 };
 
 export default meta;
diff --git a/docs/DEVELOPMENT.md b/docs/DEVELOPMENT.md
index 79b93673..99a94af8 100644
--- a/docs/DEVELOPMENT.md
+++ b/docs/DEVELOPMENT.md
@@ -114,12 +114,19 @@ The Vite dev server will proxy API and WebSocket requests to the backend at port
 
 Use Storybook to develop and document components in isolation.
 
+**Prerequisites:** Complete Step 2 (Build Development Environment) first, or at minimum install client dependencies:
+```bash
+cd client && npm install
+```
+
+This automatically generates the MSW (Mock Service Worker) file needed for API mocking in stories.
+
 ```bash
 # Start Storybook Server
 npm run storybook
 ```
 
-Storybook runs on http://localhost:6006. Story validation is done via Jest tests (see `client/src/tests/storybook_coverage.test.js`).
+Storybook will open automatically in your browser. Story validation is done via Jest tests (see `client/src/tests/storybook_coverage.test.js`).
 
 ### 6. Access the Application