diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 00000000..e1951859
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,24 @@
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic:
+    name: 'Run Chromatic'
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@latest
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index a46e550c..0c461061 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,7 +31,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+.env
+.env.local
 
 # vercel
 .vercel
diff --git a/package-lock.json b/package-lock.json
index ac5cf0ba..84c0b3e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@types/react-dom": "^19",
         "ajv": "^8.17.1",
         "autoprefixer": "^10.4.21",
+        "chromatic": "^13.2.0",
         "eslint": "^9",
         "eslint-config-next": "15.5.3",
         "eslint-plugin-storybook": "^9.1.8",
@@ -6129,6 +6130,30 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chromatic": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-13.2.0.tgz",
+      "integrity": "sha512-7ikJxdpLdYa6zmd+nLoP1U0HX6oCCtyj2eiAMd0rD4L9kbkWpl1pVIyI3CUQ/lQLtD3VKMTVi+bI3cWD+qz/IA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "chroma": "dist/bin.js",
+        "chromatic": "dist/bin.js",
+        "chromatic-cli": "dist/bin.js"
+      },
+      "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
+        }
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
diff --git a/package.json b/package.json
index 16df191c..1fe5f898 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepare": "husky"
+    "prepare": "husky",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "axios": "^1.12.2",
@@ -31,6 +32,7 @@
     "@types/react-dom": "^19",
     "ajv": "^8.17.1",
     "autoprefixer": "^10.4.21",
+    "chromatic": "^13.2.0",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
     "eslint-plugin-storybook": "^9.1.8",