diff --git a/web/package.json b/web/package.json
index bd829cd23..401909c51 100644
--- a/web/package.json
+++ b/web/package.json
@@ -130,6 +130,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-window": "^1.8.8",
     "@types/uuid": "^10.0.0",
+    "chromatic": "^11.25.2",
     "cypress": "^13.17.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
diff --git a/web/src/components/ui/toaster/AppToaster.stories.tsx b/web/src/components/ui/toaster/AppToaster.stories.tsx
index 366cc5ea7..5ac637719 100644
--- a/web/src/components/ui/toaster/AppToaster.stories.tsx
+++ b/web/src/components/ui/toaster/AppToaster.stories.tsx
@@ -60,7 +60,7 @@ const TestComponent = ({
   return (
     <div className="min-h-[250px]">
       <div
-        className="rounded-full bg-purple-700 p-3 text-white"
+        className="flex cursor-pointer items-center justify-center bg-black p-1 text-center text-white"
         style={{ width: 120 }}
         onClick={onClick}>
         Click me!