diff --git a/frontend/package.json b/frontend/package.json
index b3af76cbc..84c5df26c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,11 +34,12 @@
     "compile:cljs": "clojure -M:dev:shadow-cljs compile main",
     "compile:storybook": "node ./scripts/compile-storybook.js",
     "watch": "node ./scripts/watch.js",
+    "watch:storybook": "node ./scripts/watch-storybook.js",
     "e2e:server": "node ./scripts/e2e-server.js",
     "e2e:test": "playwright test --project default",
     "storybook:compile": "yarn run compile:storybook && clojure -M:dev:shadow-cljs release storybook",
     "storybook:server": "yarn run storybook dev -p 6006 --no-open",
-    "storybook:watch": "concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"yarn run storybook:server\" \"yarn run watch\"",
+    "storybook:watch": "concurrently \"clojure -M:dev:shadow-cljs watch storybook\" \"yarn run storybook:server\" \"yarn run watch:storybook\"",
     "storybook:build": "yarn run storybook:compile && storybook build"
   },
   "devDependencies": {
diff --git a/frontend/scripts/watch-storybook.js b/frontend/scripts/watch-storybook.js
new file mode 100644
index 000000000..a82a66932
--- /dev/null
+++ b/frontend/scripts/watch-storybook.js
@@ -0,0 +1,86 @@
+import fs from "node:fs/promises";
+import ph from "node:path";
+
+import log from "fancy-log";
+import * as h from "./_helpers.js";
+import ppt from "pretty-time";
+
+const worker = h.startWorker();
+let sass = null;
+
+async function compileSassAll() {
+  const start = process.hrtime();
+  log.info("init: compile storybook styles");
+
+  sass = await h.compileSassStorybook(worker);
+  let output = await h.concatSass(sass);
+  await fs.writeFile("./resources/public/css/ds.css", output);
+
+  const end = process.hrtime(start);
+  log.info("done: compile storybook styles", `(${ppt(end)})`);
+}
+
+async function compileSass(path) {
+  const start = process.hrtime();
+  log.info("changed:", path);
+  const result = await h.compileSass(worker, path, { modules: true });
+  sass.index[result.outputPath] = result.css;
+
+  const output = h.concatSass(sass);
+  await fs.writeFile("./resources/public/css/ds.css", output);
+
+  const end = process.hrtime(start);
+  log.info("done:", `(${ppt(end)})`);
+}
+
+await fs.mkdir("./resources/public/css/", { recursive: true });
+await compileSassAll();
+await h.copyAssets();
+await h.compileSvgSprites();
+await h.compileTemplates();
+await h.compilePolyfills();
+
+log.info("watch: scss src (~)");
+
+h.watch("src", h.isSassFile, async function (path) {
+  const isPartial = ph.basename(path).startsWith("_");
+  const isCommon = isPartial || ph.dirname(path).endsWith("/ds");
+
+  if (isCommon) {
+    await compileSassAll(path);
+  } else {
+    await compileSass(path);
+  }
+});
+
+log.info("watch: scss: resources (~)");
+h.watch("resources/styles", h.isSassFile, async function (path) {
+  log.info("changed:", path);
+  await compileSassAll();
+});
+
+log.info("watch: templates (~)");
+h.watch("resources/templates", null, async function (path) {
+  log.info("changed:", path);
+  await h.compileTemplates();
+});
+
+log.info("watch: translations (~)");
+h.watch("translations", null, async function (path) {
+  log.info("changed:", path);
+  await h.compileTemplates();
+});
+
+log.info("watch: assets (~)");
+h.watch(
+  ["resources/images", "resources/fonts", "resources/plugins-runtime"],
+  null,
+  async function (path) {
+    log.info("changed:", path);
+    await h.compileSvgSprites();
+    await h.copyAssets();
+    await h.compileTemplates();
+  },
+);
+
+worker.terminate();