diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 00000000..da5b820c
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,22 @@
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  test:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # 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/package-lock.json b/package-lock.json
index f0c9a1b6..9ecbea92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "@typescript-eslint/eslint-plugin": "^6.0.0",
         "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react": "^4.0.3",
-        "chromatic": "^10.0.0",
+        "chromatic": "^10.6.1",
         "eslint": "^8.45.0",
         "eslint-plugin-mui-path-imports": "^0.0.15",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -7370,14 +7370,26 @@
       }
     },
     "node_modules/chromatic": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-10.0.0.tgz",
-      "integrity": "sha512-RLU/Y0FdYVnPJIhm/gG3CSJO1hKg2O/nvfutyWT88Tg2o4aIGqSrQKCBiAUAHKrQKpfF+9Dvn/oHRTPtRcinHA==",
+      "version": "10.6.1",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-10.6.1.tgz",
+      "integrity": "sha512-bd4C5sEEtN83uUmbc4Fu+x7+lJIPdMUdu4D6HRDQEIDl/Tatc8+By4bZluH1pzg/MbP9vllkL6Ua9vF4EEA7VA==",
       "dev": true,
       "bin": {
         "chroma": "dist/bin.js",
         "chromatic": "dist/bin.js",
         "chromatic-cli": "dist/bin.js"
+      },
+      "peerDependencies": {
+        "chromatic-cypress": "^0.4.0 || ^1.0.0",
+        "chromatic-playwright": "^0.4.0 || ^1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "chromatic-cypress": {
+          "optional": true
+        },
+        "chromatic-playwright": {
+          "optional": true
+        }
       }
     },
     "node_modules/ci-info": {
diff --git a/package.json b/package.json
index b8d17d68..7250e406 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "publish-storybook": "npx chromatic --project-token=chpt_645d82175874a7d"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
@@ -47,7 +48,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
-    "chromatic": "^10.0.0",
+    "chromatic": "^10.6.1",
     "eslint": "^8.45.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "eslint-plugin-react-hooks": "^4.6.0",