diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 00000000..a4fd4264
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,23 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          onlyChanged: true
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 0fb633d1..45fe530d 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -31,6 +31,3 @@ jobs:
         run: npx playwright install --with-deps
       - name: Test
         run: npm run test
-
-      - name: Chromatic
-        run: npm run chromatic
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 641e8c34..639842a9 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,11 +1,17 @@
-<link type="text/css" rel="stylesheet" href="" id="reset-css"/>
+<link type="text/css" rel="stylesheet" href="" id="reset-css" />
 
 <script>
   document.documentElement.setAttribute('lang', 'ja');
 </script>
 
 <style>
-    html {
-        font-family: Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif;
-    }
-</style>
\ No newline at end of file
+  html {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      Hiragino Kaku Gothic ProN,
+      Hiragino Sans,
+      Meiryo,
+      sans-serif;
+  }
+</style>
diff --git a/.storybook/public/styles/modern-css-reset.css b/.storybook/public/styles/modern-css-reset.css
index 0aa1d9b2..7b961d18 100644
--- a/.storybook/public/styles/modern-css-reset.css
+++ b/.storybook/public/styles/modern-css-reset.css
@@ -4,7 +4,7 @@
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 /* Remove default margin */
@@ -18,37 +18,37 @@ figure,
 blockquote,
 dl,
 dd {
-    margin: 0;
+  margin: 0;
 }
 
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role="list"],
-ol[role="list"] {
-    list-style: none;
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
 }
 
 /* Set core root defaults */
 html:focus-within {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 /* Set core body defaults */
 body {
-    min-height: 100vh;
-    text-rendering: optimizespeed;
-    line-height: 1.5;
+  min-height: 100vh;
+  text-rendering: optimizespeed;
+  line-height: 1.5;
 }
 
 /* A elements that don't have a class get default styles */
 a:not([class]) {
-    text-decoration-skip-ink: auto;
+  text-decoration-skip-ink: auto;
 }
 
 /* Make images easier to work with */
 img,
 picture {
-    display: block;
-    max-width: 100%;
+  display: block;
+  max-width: 100%;
 }
 
 /* Inherit fonts for inputs and buttons */
@@ -56,21 +56,21 @@ input,
 button,
 textarea,
 select {
-    font: inherit;
+  font: inherit;
 }
 
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
-    html:focus-within {
-        scroll-behavior: auto;
-    }
+  html:focus-within {
+    scroll-behavior: auto;
+  }
 
-    *,
-    *::before,
-    *::after {
-        transition-duration: 0.01ms !important;
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        scroll-behavior: auto !important;
-    }
-}
\ No newline at end of file
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index c53116c1..4d729c76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,11 +64,11 @@
         "vitest": "^2.1.1"
       },
       "peerDependencies": {
-        "@headlessui/react": ">1.7.0 <2.0.0",
+        "@headlessui/react": "^2.0.0",
         "@ubie/design-tokens": ">=0.2.0",
         "@ubie/ubie-icons": ">=0.5.0 <0.6.2 || >=0.8.0",
         "react": "^17 || ^18",
-        "react-dom": "^17 || ^18"
+        "react-dom": "^18"
       }
     },
     "node_modules/@adobe/css-tools": {
diff --git a/package.json b/package.json
index cddcbae1..74a1492f 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,7 @@
     "prestorybook": "npm run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepublishOnly": "npm run build",
-    "chromatic": "npx chromatic --project-token=chpt_37d0a81ccfe372f"
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",