diff --git a/frontend/package.json b/frontend/package.json
index 01fab88ce..8568f5c23 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -91,7 +91,7 @@
     "@vitejs/plugin-react": "^4.1.0",
     "autoprefixer": "^10.4.21",
     "babel-plugin-named-exports-order": "^0.0.2",
-    "chromatic": "^7.4.0",
+    "chromatic": "^12.0.0",
     "cypress": "^13.3.1",
     "cypress-vite": "^1.4.2",
     "prop-types": "^15.8.1",
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 5adde795b..f1e6f9bbc 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3063,14 +3063,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^7.4.0":
-  version: 7.6.0
-  resolution: "chromatic@npm:7.6.0"
+"chromatic@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "chromatic@npm:12.0.0"
+  peerDependencies:
+    "@chromatic-com/cypress": ^0.*.* || ^1.0.0
+    "@chromatic-com/playwright": ^0.*.* || ^1.0.0
+  peerDependenciesMeta:
+    "@chromatic-com/cypress":
+      optional: true
+    "@chromatic-com/playwright":
+      optional: true
   bin:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/5ed93689daea8ad22fe3a81e7238357933063905cf5f3acb5a2ec54dbcb5f9ae18c0c66b8bc2d7ed0c909144d9620864f97db70427d10f46de6c7960f6612b2b
+  checksum: 10c0/fb6022581f9d04b29b731a0696178f027cf7b37b90d34bcb6c493f158c7b66f5047b2702d06b4c5246d5ac8ae5712ff5996959b32061726f862c0ec9396adfdb
   languageName: node
   linkType: hard
 
@@ -4244,7 +4252,7 @@ __metadata:
     autoprefixer: "npm:^10.4.21"
     axios: "npm:^1.7.4"
     babel-plugin-named-exports-order: "npm:^0.0.2"
-    chromatic: "npm:^7.4.0"
+    chromatic: "npm:^12.0.0"
     classnames: "npm:^2.3.2"
     cmdk: "npm:^1.1.1"
     cypress: "npm:^13.3.1"