diff --git a/package-lock.json b/package-lock.json
index d25393b8d..d2ad1c037 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36197,8 +36197,8 @@
         "msw": "2.4.1"
       },
       "devDependencies": {
-        "@web/dev-server": "^0.4.6",
-        "@web/dev-server-storybook": "^2.0.0"
+        "@web/storybook-builder": "^0.2.2",
+        "@web/storybook-framework-web-components": "^0.2.1"
       }
     },
     "packages/mocks/node_modules/@mswjs/interceptors": {
diff --git a/packages/mocks/demo/wc/.storybook/main.cjs b/packages/mocks/demo/wc/.storybook/main.cjs
deleted file mode 100644
index e263b2210..000000000
--- a/packages/mocks/demo/wc/.storybook/main.cjs
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  stories: ['../stories/**/*.stories.js'],
-  addons: [
-    '@web/mocks/storybook/addon.js',
-  ],
-};
diff --git a/packages/mocks/demo/wc/.storybook/main.js b/packages/mocks/demo/wc/.storybook/main.js
new file mode 100644
index 000000000..999d1e5c4
--- /dev/null
+++ b/packages/mocks/demo/wc/.storybook/main.js
@@ -0,0 +1,9 @@
+/** @type { import('../../../../index.d.ts').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.stories.js'],
+  addons: ['@web/mocks/storybook-addon'],
+  framework: {
+    name: '@web/storybook-framework-web-components',
+  },
+};
+export default config;
diff --git a/packages/mocks/demo/wc/.storybook/preview.js b/packages/mocks/demo/wc/.storybook/preview.js
deleted file mode 100644
index d315ba81e..000000000
--- a/packages/mocks/demo/wc/.storybook/preview.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { withMocks } from '../../../storybook/decorator.js';
-
-export const decorators = [
-  withMocks
-];
\ No newline at end of file
diff --git a/packages/mocks/demo/wc/src/MyFeature.js b/packages/mocks/demo/wc/src/MyElement.js
similarity index 90%
rename from packages/mocks/demo/wc/src/MyFeature.js
rename to packages/mocks/demo/wc/src/MyElement.js
index 72b89f660..38b3b1570 100644
--- a/packages/mocks/demo/wc/src/MyFeature.js
+++ b/packages/mocks/demo/wc/src/MyElement.js
@@ -2,7 +2,7 @@
 
 import { LitElement, html } from 'lit';
 
-class MyElement extends LitElement {
+export class MyElement extends LitElement {
   static properties = {
     transactions: { type: Array },
     state: { type: String },
@@ -34,5 +34,3 @@ class MyElement extends LitElement {
     }
   }
 }
-
-customElements.define('my-element', MyElement);
diff --git a/packages/mocks/demo/wc/stories/MyFeature.stories.js b/packages/mocks/demo/wc/stories/MyFeature.stories.js
deleted file mode 100644
index e82a62f32..000000000
--- a/packages/mocks/demo/wc/stories/MyFeature.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-// @ts-nocheck
-
-import { html } from 'lit';
-import { http } from '../../../http.js';
-import '../src/MyFeature.js';
-
-export default {
-  title: 'My feature',
-};
-
-const Template = () => html`<my-element></my-element>`;
-export const Default = Template.bind({});
-Default.parameters = {
-  mocks: [
-    http.get('/api/transactions', () => Response.json({transactions: ['foo', 'bar'] })),
-    http.post('/api/transactions/create', () => Response.json({ ok: true })),
-    http.put('/api/transactions/update', () => Response.json({ ok: true })),
-  ]
-}
-
-export const Second = Template.bind({});
-Second.parameters = {
-  mocks: [
-    http.get('/api/transactions', () => Response.json({transactions: ['foo', 'bar'] })),
-    http.post('/api/transactions/create', () => Response.json({ ok: true })),
-    http.put('/api/transactions/update', () => Response.json({ ok: true })),
-  ]
-}
-
-export const NoMocks = Template.bind({});
diff --git a/packages/mocks/demo/wc/stories/my-element.stories.js b/packages/mocks/demo/wc/stories/my-element.stories.js
new file mode 100644
index 000000000..ef8c20698
--- /dev/null
+++ b/packages/mocks/demo/wc/stories/my-element.stories.js
@@ -0,0 +1,32 @@
+// @ts-nocheck
+
+import { html } from 'lit';
+import { http } from '../../../http.js';
+import { MyElement } from '../src/MyElement.js';
+
+customElements.define('my-element', MyElement);
+
+export default {
+  title: 'My element',
+  render: () => html`<my-element></my-element>`,
+};
+
+export const Default = {
+  parameters: {
+    mocks: [
+      http.get('/api/transactions', () => Response.json({ transactions: ['foo', 'bar'] })),
+      http.post('/api/transactions/create', () => Response.json({ ok: true })),
+      http.put('/api/transactions/update', () => Response.json({ ok: true })),
+    ],
+  },
+};
+
+export const Second = {
+  parameters: {
+    mocks: [
+      http.get('/api/transactions', () => Response.json({ transactions: ['foo 2', 'bar 2'] })),
+      http.post('/api/transactions/create', () => Response.json({ ok: true })),
+      http.put('/api/transactions/update', () => Response.json({ ok: true })),
+    ],
+  },
+};
diff --git a/packages/mocks/demo/wc/web-dev-server.config.mjs b/packages/mocks/demo/wc/web-dev-server.config.mjs
deleted file mode 100644
index 74975eca4..000000000
--- a/packages/mocks/demo/wc/web-dev-server.config.mjs
+++ /dev/null
@@ -1,15 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import { mockPlugin } from '../../plugins.js';
-
-export default {
-  rootDir: '../..',
-  open: true,
-  nodeResolve: true,
-  plugins: [
-    mockPlugin(),
-    storybookPlugin({
-      type: 'web-components',
-      configDir: 'demo/wc/.storybook',
-    }),
-  ],
-};
diff --git a/packages/mocks/package.json b/packages/mocks/package.json
index 385f25e9d..522342228 100644
--- a/packages/mocks/package.json
+++ b/packages/mocks/package.json
@@ -50,7 +50,7 @@
     }
   },
   "scripts": {
-    "start": "wds --config demo/wc/web-dev-server.config.mjs",
+    "start": "storybook dev -c ./demo/wc/.storybook",
     "test:browser": "node ../test-runner/dist/bin.js test-browser/*.test.js --config test-browser/web-test-runner.config.js",
     "types": "wireit"
   },
@@ -72,8 +72,8 @@
     "msw": "2.4.1"
   },
   "devDependencies": {
-    "@web/dev-server": "^0.4.6",
-    "@web/dev-server-storybook": "^2.0.0"
+    "@web/storybook-builder": "^0.2.2",
+    "@web/storybook-framework-web-components": "^0.2.1"
   },
   "imports": {
     "#sw-path": {