diff --git a/eslint.config.mjs b/eslint.config.mjs
index 96c3bdf..6c693cb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -51,6 +51,7 @@ export default tseslint.config(
     files: ["**/routes/**/*.{ts,tsx}"],
     rules: {
       "perfectionist/sort-objects": "off",
+      "react-refresh/only-export-components": "off",
     },
   },
   {
diff --git a/package-lock.json b/package-lock.json
index 17e1e44..de9b0d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,30 +47,30 @@
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@types/eslint__js": "^9.14.0",
-        "@types/node": "^25.0.9",
+        "@types/node": "^25.2.0",
         "@types/react": "^19.2.8",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react-swc": "^4.2.2",
         "concurrently": "^9.2.1",
         "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-perfectionist": "^5.3.1",
+        "eslint-plugin-perfectionist": "^5.4.0",
         "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.4.26",
-        "eslint-plugin-storybook": "^10.1.11",
+        "eslint-plugin-react-refresh": "^0.5.0",
+        "eslint-plugin-storybook": "^10.2.3",
         "fishery": "^2.4.0",
-        "globals": "^17.0.0",
+        "globals": "^17.3.0",
         "jsdom": "^27.4.0",
-        "prettier": "^3.8.0",
+        "prettier": "^3.8.1",
         "prettier-plugin-tailwindcss": "^0.7.2",
         "storybook": "^10.2.3",
         "tailwind-csstree": "^0.1.0",
         "tailwindcss": "^4.1.8",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.53.1",
+        "typescript-eslint": "^8.54.0",
         "vite": "^7.3.1",
-        "vite-tsconfig-paths": "^6.0.4",
-        "vitest": "^4.0.17"
+        "vite-tsconfig-paths": "^6.0.5",
+        "vitest": "^4.0.18"
       }
     },
     "node_modules/@acemir/cssom": {
@@ -3545,9 +3545,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "25.0.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.9.tgz",
-      "integrity": "sha512-/rpCXHlCWeqClNBwUhDcusJxXYDjZTyE8v5oTO7WbL8eij2nKhUeU89/6xgjU7N4/Vh3He0BtyhJdQbDyhiXAw==",
+      "version": "25.2.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.0.tgz",
+      "integrity": "sha512-DZ8VwRFUNzuqJ5khrvwMXHmvPe+zGayJhr2CDNiKB1WBE1ST8Djl00D0IC4vvNmHMdj6DlbYRIaFE7WHjlDl5w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3582,17 +3582,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.53.1.tgz",
-      "integrity": "sha512-cFYYFZ+oQFi6hUnBTbLRXfTJiaQtYE3t4O692agbBl+2Zy+eqSKWtPjhPXJu1G7j4RLjKgeJPDdq3EqOwmX5Ag==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.54.0.tgz",
+      "integrity": "sha512-hAAP5io/7csFStuOmR782YmTthKBJ9ND3WVL60hcOjvtGFb+HJxH4O5huAcmcZ9v9G8P+JETiZ/G1B8MALnWZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/type-utils": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/type-utils": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.4.0"
@@ -3605,7 +3605,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.53.1",
+        "@typescript-eslint/parser": "^8.54.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -3621,16 +3621,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
-      "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
+      "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3646,14 +3646,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.53.1.tgz",
-      "integrity": "sha512-WYC4FB5Ra0xidsmlPb+1SsnaSKPmS3gsjIARwbEkHkoWloQmuzcfypljaJcR78uyLA1h8sHdWWPHSLDI+MtNog==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
+      "integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.53.1",
-        "@typescript-eslint/types": "^8.53.1",
+        "@typescript-eslint/tsconfig-utils": "^8.54.0",
+        "@typescript-eslint/types": "^8.54.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -3668,14 +3668,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.53.1.tgz",
-      "integrity": "sha512-Lu23yw1uJMFY8cUeq7JlrizAgeQvWugNQzJp8C3x8Eo5Jw5Q2ykMdiiTB9vBVOOUBysMzmRRmUfwFrZuI2C4SQ==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
+      "integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1"
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3686,9 +3686,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.53.1.tgz",
-      "integrity": "sha512-qfvLXS6F6b1y43pnf0pPbXJ+YoXIC7HKg0UGZ27uMIemKMKA6XH2DTxsEDdpdN29D+vHV07x/pnlPNVLhdhWiA==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
+      "integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3703,15 +3703,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.53.1.tgz",
-      "integrity": "sha512-MOrdtNvyhy0rHyv0ENzub1d4wQYKb2NmIqG7qEqPWFW7Mpy2jzFC3pQ2yKDvirZB7jypm5uGjF2Qqs6OIqu47w==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.54.0.tgz",
+      "integrity": "sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.4.0"
       },
@@ -3728,9 +3728,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.53.1.tgz",
-      "integrity": "sha512-jr/swrr2aRmUAUjW5/zQHbMaui//vQlsZcJKijZf3M26bnmLj8LyZUpj8/Rd6uzaek06OWsqdofN/Thenm5O8A==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
+      "integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3742,16 +3742,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.53.1.tgz",
-      "integrity": "sha512-RGlVipGhQAG4GxV1s34O91cxQ/vWiHJTDHbXRr0li2q/BGg3RR/7NM8QDWgkEgrwQYCvmJV9ichIwyoKCQ+DTg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
+      "integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.53.1",
-        "@typescript-eslint/tsconfig-utils": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/visitor-keys": "8.53.1",
+        "@typescript-eslint/project-service": "8.54.0",
+        "@typescript-eslint/tsconfig-utils": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/visitor-keys": "8.54.0",
         "debug": "^4.4.3",
         "minimatch": "^9.0.5",
         "semver": "^7.7.3",
@@ -3783,16 +3783,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.53.1.tgz",
-      "integrity": "sha512-c4bMvGVWW4hv6JmDUEG7fSYlWOl3II2I4ylt0NM+seinYQlZMQIaKaXIIVJWt9Ofh6whrpM+EdDQXKXjNovvrg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
+      "integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.53.1",
-        "@typescript-eslint/types": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1"
+        "@typescript-eslint/scope-manager": "8.54.0",
+        "@typescript-eslint/types": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3807,13 +3807,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.53.1.tgz",
-      "integrity": "sha512-oy+wV7xDKFPRyNggmXuZQSBzvoLnpmJs+GhzRhPjrxl2b/jIlyjVokzm47CZCDUdXKr2zd7ZLodPfOBpOPyPlg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
+      "integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.53.1",
+        "@typescript-eslint/types": "8.54.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -3870,6 +3870,53 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vitest/mocker": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz",
+      "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.0.18",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/@vitest/spy": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
+      "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/@vitest/pretty-format": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
@@ -3883,13 +3930,13 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.17.tgz",
-      "integrity": "sha512-JmuQyf8aMWoo/LmNFppdpkfRVHJcsgzkbCA+/Bk7VfNH7RE6Ut2qxegeyx2j3ojtJtKIbIGy3h+KxGfYfk28YQ==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz",
+      "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "4.0.17",
+        "@vitest/utils": "4.0.18",
         "pathe": "^2.0.3"
       },
       "funding": {
@@ -3897,9 +3944,9 @@
       }
     },
     "node_modules/@vitest/runner/node_modules/@vitest/pretty-format": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.17.tgz",
-      "integrity": "sha512-Ah3VAYmjcEdHg6+MwFE17qyLqBHZ+ni2ScKCiW2XrlSBV4H3Z7vYfPfz7CWQ33gyu76oc0Ai36+kgLU3rfF4nw==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
+      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3910,13 +3957,13 @@
       }
     },
     "node_modules/@vitest/runner/node_modules/@vitest/utils": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.17.tgz",
-      "integrity": "sha512-RG6iy+IzQpa9SB8HAFHJ9Y+pTzI+h8553MrciN9eC6TFBErqrQaTas4vG+MVj8S4uKk8uTT2p0vgZPnTdxd96w==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
+      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.0.17",
+        "@vitest/pretty-format": "4.0.18",
         "tinyrainbow": "^3.0.3"
       },
       "funding": {
@@ -3934,13 +3981,13 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.17.tgz",
-      "integrity": "sha512-npPelD7oyL+YQM2gbIYvlavlMVWUfNNGZPcu0aEUQXt7FXTuqhmgiYupPnAanhKvyP6Srs2pIbWo30K0RbDtRQ==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz",
+      "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.0.17",
+        "@vitest/pretty-format": "4.0.18",
         "magic-string": "^0.30.21",
         "pathe": "^2.0.3"
       },
@@ -3949,9 +3996,9 @@
       }
     },
     "node_modules/@vitest/snapshot/node_modules/@vitest/pretty-format": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.17.tgz",
-      "integrity": "sha512-Ah3VAYmjcEdHg6+MwFE17qyLqBHZ+ni2ScKCiW2XrlSBV4H3Z7vYfPfz7CWQ33gyu76oc0Ai36+kgLU3rfF4nw==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
+      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5153,13 +5200,13 @@
       }
     },
     "node_modules/eslint-plugin-perfectionist": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-perfectionist/-/eslint-plugin-perfectionist-5.3.1.tgz",
-      "integrity": "sha512-v8kAP8TarQYqDC4kxr343ZNi++/oOlBnmWovsUZpbJ7A/pq1VHGlgsf/fDh4CdEvEstzkrc8NLvoVKtfpsC4oA==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-perfectionist/-/eslint-plugin-perfectionist-5.4.0.tgz",
+      "integrity": "sha512-XxpUMpeVaSJF5rpF6NHmhj3xavHZrflKcRbDssAUWrHUU/+l3l7PPYnVJ6IOpR2KjQ1Blucaeb0cFL3LIBis0A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/utils": "^8.52.0",
+        "@typescript-eslint/utils": "^8.53.1",
         "natural-orderby": "^5.0.0"
       },
       "engines": {
@@ -5190,27 +5237,27 @@
       }
     },
     "node_modules/eslint-plugin-react-refresh": {
-      "version": "0.4.26",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.26.tgz",
-      "integrity": "sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.0.tgz",
+      "integrity": "sha512-ZYvmh7VfVgqR/7wR71I3Zl6hK/C5CcxdWYKZSpHawS5JCNgE4efhQWg/+/WPpgGAp9Ngp/rRZYyaIwmPQBq/lA==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
-        "eslint": ">=8.40"
+        "eslint": ">=9"
       }
     },
     "node_modules/eslint-plugin-storybook": {
-      "version": "10.1.11",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-10.1.11.tgz",
-      "integrity": "sha512-mbq2r2kK5+AcLl0XDJ3to91JOgzCbHOqj+J3n+FRw6drk+M1boRqMShSoMMm0HdzXPLmlr7iur+qJ5ZuhH6ayQ==",
+      "version": "10.2.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-10.2.3.tgz",
+      "integrity": "sha512-5wy+OKe6VexZecAedroKv+GR+agciZqK/Su7cdo6b1mICWaWwejU/XjjTLL9zr6wiEjCN/0mhYg7yz70DoaMQQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/utils": "^8.8.1"
+        "@typescript-eslint/utils": "^8.48.0"
       },
       "peerDependencies": {
         "eslint": ">=8",
-        "storybook": "^10.1.11"
+        "storybook": "^10.2.3"
       }
     },
     "node_modules/eslint-scope": {
@@ -5659,9 +5706,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-17.0.0.tgz",
-      "integrity": "sha512-gv5BeD2EssA793rlFWVPMMCqefTlpusw6/2TbAVMy0FzcG8wKJn4O+NqJ4+XWmmwrayJgw5TzrmWjFgmz1XPqw==",
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.3.0.tgz",
+      "integrity": "sha512-yMqGUQVVCkD4tqjOJf3TnrvaaHDMYp4VlUSObbkIiuCPe/ofdMBFIAcBbCSRFWOnos6qRiTVStDwqPLUclaxIw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6873,9 +6920,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.0.tgz",
-      "integrity": "sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==",
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -8003,16 +8050,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.53.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.53.1.tgz",
-      "integrity": "sha512-gB+EVQfP5RDElh9ittfXlhZJdjSU4jUSTyE2+ia8CYyNvet4ElfaLlAIqDvQV9JPknKx0jQH1racTYe/4LaLSg==",
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.54.0.tgz",
+      "integrity": "sha512-CKsJ+g53QpsNPqbzUsfKVgd3Lny4yKZ1pP4qN3jdMOg/sisIDLGyDMezycquXLE5JsEU0wp3dGNdzig0/fmSVQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.53.1",
-        "@typescript-eslint/parser": "8.53.1",
-        "@typescript-eslint/typescript-estree": "8.53.1",
-        "@typescript-eslint/utils": "8.53.1"
+        "@typescript-eslint/eslint-plugin": "8.54.0",
+        "@typescript-eslint/parser": "8.54.0",
+        "@typescript-eslint/typescript-estree": "8.54.0",
+        "@typescript-eslint/utils": "8.54.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -8210,24 +8257,18 @@
       }
     },
     "node_modules/vite-tsconfig-paths": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-6.0.4.tgz",
-      "integrity": "sha512-iIsEJ+ek5KqRTK17pmxtgIxXtqr3qDdE6OxrP9mVeGhVDNXRJTKN/l9oMbujTQNzMLe6XZ8qmpztfbkPu2TiFQ==",
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-6.0.5.tgz",
+      "integrity": "sha512-f/WvY6ekHykUF1rWJUAbCU7iS/5QYDIugwpqJA+ttwKbxSbzNlqlE8vZSrsnxNQciUW+z6lvhlXMaEyZn9MSig==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "^4.1.1",
         "globrex": "^0.1.2",
-        "tsconfck": "^3.0.3",
-        "vite": "*"
+        "tsconfck": "^3.0.3"
       },
       "peerDependencies": {
         "vite": "*"
-      },
-      "peerDependenciesMeta": {
-        "vite": {
-          "optional": true
-        }
       }
     },
     "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
@@ -8712,19 +8753,19 @@
       }
     },
     "node_modules/vitest": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.17.tgz",
-      "integrity": "sha512-FQMeF0DJdWY0iOnbv466n/0BudNdKj1l5jYgl5JVTwjSsZSlqyXFt/9+1sEyhR6CLowbZpV7O1sCHrzBhucKKg==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz",
+      "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "4.0.17",
-        "@vitest/mocker": "4.0.17",
-        "@vitest/pretty-format": "4.0.17",
-        "@vitest/runner": "4.0.17",
-        "@vitest/snapshot": "4.0.17",
-        "@vitest/spy": "4.0.17",
-        "@vitest/utils": "4.0.17",
+        "@vitest/expect": "4.0.18",
+        "@vitest/mocker": "4.0.18",
+        "@vitest/pretty-format": "4.0.18",
+        "@vitest/runner": "4.0.18",
+        "@vitest/snapshot": "4.0.18",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
         "es-module-lexer": "^1.7.0",
         "expect-type": "^1.2.2",
         "magic-string": "^0.30.21",
@@ -8752,10 +8793,10 @@
         "@edge-runtime/vm": "*",
         "@opentelemetry/api": "^1.9.0",
         "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
-        "@vitest/browser-playwright": "4.0.17",
-        "@vitest/browser-preview": "4.0.17",
-        "@vitest/browser-webdriverio": "4.0.17",
-        "@vitest/ui": "4.0.17",
+        "@vitest/browser-playwright": "4.0.18",
+        "@vitest/browser-preview": "4.0.18",
+        "@vitest/browser-webdriverio": "4.0.18",
+        "@vitest/ui": "4.0.18",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -8790,16 +8831,16 @@
       }
     },
     "node_modules/vitest/node_modules/@vitest/expect": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.17.tgz",
-      "integrity": "sha512-mEoqP3RqhKlbmUmntNDDCJeTDavDR+fVYkSOw8qRwJFaW/0/5zA9zFeTrHqNtcmwh6j26yMmwx2PqUDPzt5ZAQ==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
+      "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "@types/chai": "^5.2.2",
-        "@vitest/spy": "4.0.17",
-        "@vitest/utils": "4.0.17",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
         "chai": "^6.2.1",
         "tinyrainbow": "^3.0.3"
       },
@@ -8807,37 +8848,10 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/vitest/node_modules/@vitest/mocker": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.17.tgz",
-      "integrity": "sha512-+ZtQhLA3lDh1tI2wxe3yMsGzbp7uuJSWBM1iTIKCbppWTSBN09PUC+L+fyNlQApQoR+Ps8twt2pbSSXg2fQVEQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/spy": "4.0.17",
-        "estree-walker": "^3.0.3",
-        "magic-string": "^0.30.21"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "msw": "^2.4.9",
-        "vite": "^6.0.0 || ^7.0.0-0"
-      },
-      "peerDependenciesMeta": {
-        "msw": {
-          "optional": true
-        },
-        "vite": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/vitest/node_modules/@vitest/pretty-format": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.17.tgz",
-      "integrity": "sha512-Ah3VAYmjcEdHg6+MwFE17qyLqBHZ+ni2ScKCiW2XrlSBV4H3Z7vYfPfz7CWQ33gyu76oc0Ai36+kgLU3rfF4nw==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
+      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8848,9 +8862,9 @@
       }
     },
     "node_modules/vitest/node_modules/@vitest/spy": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.17.tgz",
-      "integrity": "sha512-I1bQo8QaP6tZlTomQNWKJE6ym4SHf3oLS7ceNjozxxgzavRAgZDc06T7kD8gb9bXKEgcLNt00Z+kZO6KaJ62Ew==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
+      "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -8858,13 +8872,13 @@
       }
     },
     "node_modules/vitest/node_modules/@vitest/utils": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.17.tgz",
-      "integrity": "sha512-RG6iy+IzQpa9SB8HAFHJ9Y+pTzI+h8553MrciN9eC6TFBErqrQaTas4vG+MVj8S4uKk8uTT2p0vgZPnTdxd96w==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
+      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.0.17",
+        "@vitest/pretty-format": "4.0.18",
         "tinyrainbow": "^3.0.3"
       },
       "funding": {
@@ -8881,16 +8895,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/vitest/node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
     "node_modules/vitest/node_modules/picomatch": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
diff --git a/package.json b/package.json
index ecf3826..f347c98 100644
--- a/package.json
+++ b/package.json
@@ -43,30 +43,30 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/eslint__js": "^9.14.0",
-    "@types/node": "^25.0.9",
+    "@types/node": "^25.2.0",
     "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "concurrently": "^9.2.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-perfectionist": "^5.3.1",
+    "eslint-plugin-perfectionist": "^5.4.0",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-storybook": "^10.1.11",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "eslint-plugin-storybook": "^10.2.3",
     "fishery": "^2.4.0",
-    "globals": "^17.0.0",
+    "globals": "^17.3.0",
     "jsdom": "^27.4.0",
-    "prettier": "^3.8.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "storybook": "^10.2.3",
     "tailwind-csstree": "^0.1.0",
     "tailwindcss": "^4.1.8",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.0.4",
-    "vitest": "^4.0.17"
+    "vite-tsconfig-paths": "^6.0.5",
+    "vitest": "^4.0.18"
   },
   "overrides": {
     "storybook": "$storybook"
diff --git a/src/components/Badge.colors.ts b/src/components/Badge.colors.ts
new file mode 100644
index 0000000..4410d5d
--- /dev/null
+++ b/src/components/Badge.colors.ts
@@ -0,0 +1,53 @@
+export const BadgeColors = [
+  "amber",
+  "blue",
+  "cyan",
+  "emerald",
+  "fuchsia",
+  "green",
+  "indigo",
+  "light",
+  "lime",
+  "orange",
+  "pink",
+  "purple",
+  "red",
+  "rose",
+  "sky",
+  "teal",
+  "violet",
+  "yellow",
+  "zinc",
+] as const;
+
+export const badgeColors = {
+  amber:
+    "bg-amber-400/20 text-amber-700 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-hover:bg-amber-400/15",
+  blue: "bg-blue-500/15 text-blue-700 group-data-hover:bg-blue-500/25 dark:text-blue-400 dark:group-data-hover:bg-blue-500/25",
+  cyan: "bg-cyan-400/20 text-cyan-700 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-hover:bg-cyan-400/15",
+  emerald:
+    "bg-emerald-500/15 text-emerald-700 group-data-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-hover:bg-emerald-500/20",
+  fuchsia:
+    "bg-fuchsia-400/15 text-fuchsia-700 group-data-hover:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-hover:bg-fuchsia-400/20",
+  green:
+    "bg-green-500/15 text-green-700 group-data-hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-hover:bg-green-500/20",
+  indigo:
+    "bg-indigo-500/15 text-indigo-700 group-data-hover:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-hover:bg-indigo-500/20",
+  light:
+    "bg-slate-50 text-slate-600 dark:bg-slate-900 dark:text-white ring-1 ring-inset ring-slate-200 dark:ring-slate-700 group-data-hover:bg-slate-50 dark:group-data-hover:bg-slate-800 dark:group-data-hover:text-slate-100",
+  lime: "bg-lime-400/20 text-lime-700 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-hover:bg-lime-400/15",
+  orange:
+    "bg-orange-500/15 text-orange-700 group-data-hover:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-hover:bg-orange-500/20",
+  pink: "bg-pink-400/15 text-pink-700 group-data-hover:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-hover:bg-pink-400/20",
+  purple:
+    "bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-400 dark:group-data-hover:bg-purple-500/20",
+  red: "bg-red-500/15 text-red-700 group-data-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-hover:bg-red-500/20",
+  rose: "bg-rose-400/15 text-rose-700 group-data-hover:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-hover:bg-rose-400/20",
+  sky: "bg-sky-500/15 text-sky-700 group-data-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-hover:bg-sky-500/20",
+  teal: "bg-teal-500/15 text-teal-700 group-data-hover:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-hover:bg-teal-500/20",
+  violet:
+    "bg-violet-500/15 text-violet-700 group-data-hover:bg-violet-500/25 dark:text-violet-400 dark:group-data-hover:bg-violet-500/20",
+  yellow:
+    "bg-yellow-400/20 text-yellow-700 group-data-hover:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-hover:bg-yellow-400/15",
+  zinc: "bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10",
+} as const;
diff --git a/src/components/Badge.stories.tsx b/src/components/Badge.stories.tsx
index bb1c19a..100f966 100644
--- a/src/components/Badge.stories.tsx
+++ b/src/components/Badge.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Badge, BadgeButton, BadgeColors } from "./Badge";
+import { Badge, BadgeButton } from "./Badge";
+import { BadgeColors } from "./Badge.colors";
 
 const meta: Meta<typeof Badge> = {
   component: Badge,
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 2edc103..e7365c9 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -2,67 +2,12 @@ import * as Headless from "@headlessui/react";
 import clsx from "clsx";
 import React from "react";
 
+import { badgeColors } from "./Badge.colors";
 import { TouchTarget } from "./Button";
 import { HeadlessLink } from "./HeadlessLink";
+export type BadgeColor = keyof typeof badgeColors;
 
-// List of available badge colors
-export const BadgeColors = [
-  "amber",
-  "blue",
-  "cyan",
-  "emerald",
-  "fuchsia",
-  "green",
-  "indigo",
-  "light",
-  "lime",
-  "orange",
-  "pink",
-  "purple",
-  "red",
-  "rose",
-  "sky",
-  "teal",
-  "violet",
-  "yellow",
-  "zinc",
-] as const;
-
-const colors = {
-  amber:
-    "bg-amber-400/20 text-amber-700 group-data-hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-hover:bg-amber-400/15",
-  blue: "bg-blue-500/15 text-blue-700 group-data-hover:bg-blue-500/25 dark:text-blue-400 dark:group-data-hover:bg-blue-500/25",
-  cyan: "bg-cyan-400/20 text-cyan-700 group-data-hover:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-hover:bg-cyan-400/15",
-  emerald:
-    "bg-emerald-500/15 text-emerald-700 group-data-hover:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-hover:bg-emerald-500/20",
-  fuchsia:
-    "bg-fuchsia-400/15 text-fuchsia-700 group-data-hover:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-hover:bg-fuchsia-400/20",
-  green:
-    "bg-green-500/15 text-green-700 group-data-hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-hover:bg-green-500/20",
-  indigo:
-    "bg-indigo-500/15 text-indigo-700 group-data-hover:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-hover:bg-indigo-500/20",
-  light:
-    "bg-slate-50 text-slate-600 dark:bg-slate-900 dark:text-white ring-1 ring-inset ring-slate-200 dark:ring-slate-700 group-data-hover:bg-slate-50 dark:group-data-hover:bg-slate-800 dark:group-data-hover:text-slate-100",
-  lime: "bg-lime-400/20 text-lime-700 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-hover:bg-lime-400/15",
-  orange:
-    "bg-orange-500/15 text-orange-700 group-data-hover:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-hover:bg-orange-500/20",
-  pink: "bg-pink-400/15 text-pink-700 group-data-hover:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-hover:bg-pink-400/20",
-  purple:
-    "bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-400 dark:group-data-hover:bg-purple-500/20",
-  red: "bg-red-500/15 text-red-700 group-data-hover:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-hover:bg-red-500/20",
-  rose: "bg-rose-400/15 text-rose-700 group-data-hover:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-hover:bg-rose-400/20",
-  sky: "bg-sky-500/15 text-sky-700 group-data-hover:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-hover:bg-sky-500/20",
-  teal: "bg-teal-500/15 text-teal-700 group-data-hover:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-hover:bg-teal-500/20",
-  violet:
-    "bg-violet-500/15 text-violet-700 group-data-hover:bg-violet-500/25 dark:text-violet-400 dark:group-data-hover:bg-violet-500/20",
-  yellow:
-    "bg-yellow-400/20 text-yellow-700 group-data-hover:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-hover:bg-yellow-400/15",
-  zinc: "bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10",
-};
-
-export type BadgeColor = keyof typeof colors;
-
-type BadgeProps = { color?: keyof typeof colors };
+type BadgeProps = { color?: BadgeColor };
 
 export function Badge({
   className,
@@ -75,7 +20,7 @@ export function Badge({
       className={clsx(
         "inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline",
         className,
-        colors[color],
+        badgeColors[color],
       )}
     />
   );
diff --git a/src/components/TagInput.stories.ts b/src/components/TagInput.stories.ts
index 8b4f489..761d04b 100644
--- a/src/components/TagInput.stories.ts
+++ b/src/components/TagInput.stories.ts
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { type BadgeColor, BadgeColors } from "./Badge";
+import { type BadgeColor } from "./Badge";
+import { BadgeColors } from "./Badge.colors";
 import TagInput from "./TagInput";
 
 const meta: Meta<typeof TagInput> = {
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 63adef3..1426fa3 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -93,9 +93,9 @@ export interface FileRoutesByFullPath {
   "/queues/$name": typeof QueuesNameRoute
   "/workflows/$workflowId": typeof WorkflowsWorkflowIdRoute
   "/jobs/": typeof JobsIndexRoute
-  "/periodic-jobs": typeof PeriodicJobsIndexRoute
+  "/periodic-jobs/": typeof PeriodicJobsIndexRoute
   "/queues/": typeof QueuesIndexRoute
-  "/workflows": typeof WorkflowsIndexRoute
+  "/workflows/": typeof WorkflowsIndexRoute
 }
 export interface FileRoutesByTo {
   "/": typeof IndexRoute
@@ -136,9 +136,9 @@ export interface FileRouteTypes {
     | "/queues/$name"
     | "/workflows/$workflowId"
     | "/jobs/"
-    | "/periodic-jobs"
+    | "/periodic-jobs/"
     | "/queues/"
-    | "/workflows"
+    | "/workflows/"
   fileRoutesByTo: FileRoutesByTo
   to:
     | "/"
@@ -211,7 +211,7 @@ declare module "@tanstack/react-router" {
     "/workflows/": {
       id: "/workflows/"
       path: "/workflows"
-      fullPath: "/workflows"
+      fullPath: "/workflows/"
       preLoaderRoute: typeof WorkflowsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -225,7 +225,7 @@ declare module "@tanstack/react-router" {
     "/periodic-jobs/": {
       id: "/periodic-jobs/"
       path: "/periodic-jobs"
-      fullPath: "/periodic-jobs"
+      fullPath: "/periodic-jobs/"
       preLoaderRoute: typeof PeriodicJobsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }