diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..97c1a643
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,47 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Start Storybook",
+      "cwd": "${workspaceFolder}/packages/apps/storybook",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["start"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "serverReadyAction": {
+        "pattern": "Local:\\s+(https?://\\S+)",
+        "uriFormat": "%s",
+        "action": "openExternally"
+      }
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Debug Storybook",
+      "url": "http://localhost:6006",
+      "webRoot": "${workspaceFolder}",
+      "sourceMaps": true,
+      "skipFiles": ["<node_internals>/**"],
+      "sourceMapPathOverrides": {
+        "webpack:///packages/modules/*": "${webRoot}/packages/modules/*",
+        "webpack:///./packages/apps/storybook/src/*": "${webRoot}/packages/apps/storybook/src/*",
+        "webpack:///./packages/modules/imodel-browser/src/*": "${webRoot}/packages/modules/imodel-browser/src/*",
+        "webpack:///./packages/modules/create-imodel/src/*": "${webRoot}/packages/modules/create-imodel/src/*",
+        "webpack:///./packages/modules/delete-imodel/src/*": "${webRoot}/packages/modules/delete-imodel/src/*",
+        "webpack:///./packages/modules/delete-itwin/src/*": "${webRoot}/packages/modules/delete-itwin/src/*",
+        "webpack:///./packages/modules/manage-versions/src/*": "${webRoot}/packages/modules/manage-versions/src/*",
+        "webpack://@itwin/imodel-browser-react/src/*": "${webRoot}/packages/modules/imodel-browser/src/*",
+        "webpack://@itwin/create-imodel-react/src/*": "${webRoot}/packages/modules/create-imodel/src/*",
+        "webpack://@itwin/delete-imodel-react/src/*": "${webRoot}/packages/modules/delete-imodel/src/*",
+        "webpack://@itwin/delete-itwin-react/src/*": "${webRoot}/packages/modules/delete-itwin/src/*",
+        "webpack://@itwin/manage-versions-react/src/*": "${webRoot}/packages/modules/manage-versions/src/*",
+        "webpack:///*": "${webRoot}/*",
+        "webpack:///./~/*": "${webRoot}/node_modules/*",
+        "webpack:///./*": "${webRoot}/*"
+      },
+      "preLaunchTask": "Start Storybook Server"
+    }
+  ]
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 00000000..0a6fe4d8
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,32 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Start Storybook Server",
+      "type": "shell",
+      "command": "pnpm",
+      "args": ["start"],
+      "options": {
+        "cwd": "${workspaceFolder}/packages/apps/storybook"
+      },
+      "isBackground": true,
+      "problemMatcher": {
+        "pattern": {
+          "regexp": "^(.*)$",
+          "file": 1,
+          "location": 2,
+          "message": 3
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": ".*",
+          "endsPattern": "(Local:|On Your Network:).*http"
+        }
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated"
+      }
+    }
+  ]
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 775a1fe1..554b5b7f 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -13,6 +13,9 @@ importers:
   ../../packages/apps/storybook:
     specifiers:
       '@babel/core': ^7.12.10
+      '@babel/preset-env': ^7.12.10
+      '@babel/preset-react': ^7.12.10
+      '@babel/preset-typescript': ^7.12.10
       '@bentley/bentleyjs-core': 2.11.0
       '@bentley/frontend-authorization-client': 2.11.0
       '@bentley/itwin-client': 2.11.0
@@ -40,6 +43,7 @@ importers:
       '@typescript-eslint/parser': ^5.62.0
       babel-eslint: ^10.0.0
       babel-loader: ^8.2.5
+      css-loader: ^6.7.0
       eslint: ^8.3.0
       eslint-config-airbnb: ^0.0.4
       eslint-config-prettier: ^6.11.0
@@ -54,10 +58,16 @@ importers:
       react: ^18.3.1
       react-dom: ^18.3.1
       rimraf: ^3.0.2
+      sass: ^1.50.0
+      sass-loader: ^12.6.0
       storybook-dark-mode: ^1.0.7
+      style-loader: ^3.3.0
       webpack: ^5.28.0
     devDependencies:
       '@babel/core': 7.26.10
+      '@babel/preset-env': 7.26.9_@babel+core@7.26.10
+      '@babel/preset-react': 7.26.3_@babel+core@7.26.10
+      '@babel/preset-typescript': 7.27.0_@babel+core@7.26.10
       '@bentley/bentleyjs-core': 2.11.0
       '@bentley/frontend-authorization-client': 2.11.0_cjh5q6m4zamwx26gput4667t4m
       '@bentley/itwin-client': 2.11.0_7u5scf6prkfxf3zwbn37h5tfme
@@ -85,6 +95,7 @@ importers:
       '@typescript-eslint/parser': 5.62.0_eslint@8.57.1
       babel-eslint: 10.1.0_eslint@8.57.1
       babel-loader: 8.4.1_x2b7la4oj7v77gkgnuhuzjngny
+      css-loader: 6.11.0_webpack@5.99.5
       eslint: 8.57.1
       eslint-config-airbnb: 0.0.4
       eslint-config-prettier: 6.15.0_eslint@8.57.1
@@ -99,7 +110,10 @@ importers:
       react: 18.3.1
       react-dom: 18.3.1_react@18.3.1
       rimraf: 3.0.2
+      sass: 1.86.3
+      sass-loader: 12.6.0_sass@1.86.3+webpack@5.99.5
       storybook-dark-mode: 1.1.2_nnrd3gsncyragczmpvfhocinkq
+      style-loader: 3.3.4_webpack@5.99.5
       webpack: 5.99.5
 
   ../../packages/modules/create-imodel:
@@ -1135,7 +1149,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.9
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.26.5
       '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.12.9
       '@babel/plugin-transform-parameters': 7.25.9_@babel+core@7.12.9
     dev: true
@@ -7155,7 +7169,7 @@ packages:
       regenerator: 0.8.40
       regexpu: 1.3.0
       repeating: 1.1.3
-      resolve: 1.1.6
+      resolve: 1.22.10
       shebang-regex: 1.0.0
       slash: 1.0.0
       source-map: 0.5.7
diff --git a/packages/apps/storybook/.storybook/main.js b/packages/apps/storybook/.storybook/main.js
index 681a4917..e7fbc071 100644
--- a/packages/apps/storybook/.storybook/main.js
+++ b/packages/apps/storybook/.storybook/main.js
@@ -27,7 +27,55 @@ module.exports = {
 
     config.resolve.mainFields = ["module", "main"];
 
-    // Return the altered config
+    const packagePaths = {
+      "@itwin/imodel-browser-react": path.resolve(__dirname, "../../../modules/imodel-browser/src"),
+        "@itwin/create-imodel-react": path.resolve(__dirname, "../../../modules/create-imodel/src"),
+        "@itwin/delete-imodel-react": path.resolve(__dirname, "../../../modules/delete-imodel/src"),
+        "@itwin/delete-itwin-react": path.resolve(__dirname, "../../../modules/delete-itwin/src"),
+        "@itwin/manage-versions-react": path.resolve(__dirname, "../../../modules/manage-versions/src"),
+    }
+    // Enable HMR for local packages in development by aliasing to source directories
+    if (configType === 'DEVELOPMENT') {
+      // Use full source maps to allow VS Code Chrome debugger to map back to TS/TSX sources
+      config.devtool = 'source-map';
+      config.output = config.output || {};
+      config.output.devtoolModuleFilenameTemplate = (info) => {
+        // Derive repo root (four levels up from .storybook: ../../../../)
+        const repoRoot = path.resolve(__dirname, '../../../../');
+        let relPath = path.relative(repoRoot, info.absoluteResourcePath).replace(/\\/g, '/');
+        return `webpack:///${relPath}`;
+      };
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        ...packagePaths
+      };
+
+      // Ensure TypeScript files from source directories are processed
+      config.module.rules.push({
+        test: /\.(ts|tsx)$/,
+        include: Object.values(packagePaths),
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              presets: [
+                require.resolve('@babel/preset-env'),
+                require.resolve('@babel/preset-react'),
+                require.resolve('@babel/preset-typescript'),
+              ],
+            },
+          },
+        ],
+      });
+
+      // Handle SCSS files from source directories
+      config.module.rules.push({
+        test: /\.scss$/,
+        include: Object.values(packagePaths),
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      });
+    }
+
     return config;
   },
   staticDirs: ["../../../modules/storybook-auth-addon/build"]
diff --git a/packages/apps/storybook/package.json b/packages/apps/storybook/package.json
index fda75d4d..cca5a271 100644
--- a/packages/apps/storybook/package.json
+++ b/packages/apps/storybook/package.json
@@ -4,11 +4,18 @@
   "private": true,
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.10",
     "@bentley/bentleyjs-core": "2.11.0",
     "@storybook/builder-webpack5": "6.5.16",
     "@storybook/manager-webpack5": "6.5.16",
     "@bentley/frontend-authorization-client": "2.11.0",
     "@bentley/itwin-client": "2.11.0",
+    "css-loader": "^6.7.0",
+    "sass": "^1.50.0",
+    "sass-loader": "^12.6.0",
+    "style-loader": "^3.3.0",
     "@itwin/create-imodel-react": "workspace:*",
     "@itwin/delete-imodel-react": "workspace:*",
     "@itwin/delete-itwin-react": "workspace:*",
@@ -53,5 +60,6 @@
     "build": "",
     "test": "build-storybook --loglevel error --quiet",
     "clean": "rimraf storybook-static"
-  }
+  },
+  "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67"
 }