diff --git a/package.json b/package.json
index 4f974046b48ef..722d0a9d55a0d 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@gravitational/build": "workspace:*",
+    "@storybook/addon-controls": "^8.3.4",
     "@storybook/addon-toolbars": "^8.3.4",
     "@storybook/components": "^8.3.4",
     "@storybook/react": "^8.3.4",
@@ -43,8 +44,8 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
     "@types/history": "^4.7.11",
+    "@types/jest": "^29.5.13",
     "@types/node": "^20.16.10",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27153582c22d3..c7000b287733c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       '@gravitational/build':
         specifier: workspace:*
         version: link:web/packages/build
+      '@storybook/addon-controls':
+        specifier: ^8.3.4
+        version: 8.3.4(storybook@8.3.4)
       '@storybook/addon-toolbars':
         specifier: ^8.3.4
         version: 8.3.4(storybook@8.3.4)
@@ -2174,6 +2177,11 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
+  '@storybook/addon-controls@8.3.4':
+    resolution: {integrity: sha512-qQcaK6dczsb6wXkzGZKOjUYNA7FfKBewRv6NvoVKYY6LfhllGOkmUAtYpdtQG8adsZWTSoZaAOJS2vP2uM67lw==}
+    peerDependencies:
+      storybook: ^8.3.4
+
   '@storybook/addon-toolbars@8.3.4':
     resolution: {integrity: sha512-Km1YciVIxqluDbd1xmHjANNFyMonEOtnA6e4MrnBnC9XkPXSigeFlj0JvxyI/zjBsLBoFRmQiwq55W6l3hQ9sA==}
     peerDependencies:
@@ -8998,6 +9006,14 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.0
 
+  '@storybook/addon-controls@8.3.4(storybook@8.3.4)':
+    dependencies:
+      '@storybook/global': 5.0.0
+      dequal: 2.0.3
+      lodash: 4.17.21
+      storybook: 8.3.4
+      ts-dedent: 2.2.0
+
   '@storybook/addon-toolbars@8.3.4(storybook@8.3.4)':
     dependencies:
       storybook: 8.3.4
diff --git a/web/.storybook/main.ts b/web/.storybook/main.ts
index cc14f9adc1f3f..8dce9b37419d2 100644
--- a/web/.storybook/main.ts
+++ b/web/.storybook/main.ts
@@ -43,7 +43,7 @@ const config: StorybookConfig = {
     options: { builder: { viteConfigPath: 'web/.storybook/vite.config.mts' } },
   },
   staticDirs: ['public'],
-  addons: ['@storybook/addon-toolbars'],
+  addons: ['@storybook/addon-toolbars', '@storybook/addon-controls'],
 };
 
 export default config;