diff --git a/.pnp.cjs b/.pnp.cjs
index 04376155..11fa4ab0 100644
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -57,7 +57,9 @@ const RAW_RUNTIME_STATE =
           ["axios", "npm:1.7.7"],\
           ["canvas-confetti", "npm:1.9.3"],\
           ["chromatic", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:11.18.1"],\
+          ["class-variance-authority", "npm:0.7.1"],\
           ["classnames", "npm:2.5.1"],\
+          ["clsx", "npm:2.1.1"],\
           ["eslint", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:9.15.0"],\
           ["eslint-config-airbnb", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:19.0.4"],\
           ["eslint-config-airbnb-base", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:15.0.0"],\
@@ -91,6 +93,7 @@ const RAW_RUNTIME_STATE =
           ["sharp", "npm:0.33.5"],\
           ["storybook", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:8.4.4"],\
           ["swiper", "npm:11.1.15"],\
+          ["tailwind-merge", "npm:2.5.5"],\
           ["tailwindcss", "npm:3.4.15"],\
           ["tailwindcss-animated", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:1.1.2"],\
           ["ts-pattern", "npm:5.5.0"],\
@@ -9079,6 +9082,16 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["class-variance-authority", [\
+      ["npm:0.7.1", {\
+        "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/class-variance-authority-npm-0.7.1-74a7beaf7c-10c0.zip/node_modules/class-variance-authority/",\
+        "packageDependencies": [\
+          ["class-variance-authority", "npm:0.7.1"],\
+          ["clsx", "npm:2.1.1"]\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["classnames", [\
       ["npm:2.5.1", {\
         "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/classnames-npm-2.5.1-c7273f3423-10c0.zip/node_modules/classnames/",\
@@ -9170,6 +9183,15 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["clsx", [\
+      ["npm:2.1.1", {\
+        "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/clsx-npm-2.1.1-96125b98be-10c0.zip/node_modules/clsx/",\
+        "packageDependencies": [\
+          ["clsx", "npm:2.1.1"]\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["color", [\
       ["npm:4.2.3", {\
         "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/color-npm-4.2.3-4a23227581-10c0.zip/node_modules/color/",\
@@ -15825,6 +15847,15 @@ const RAW_RUNTIME_STATE =
         "linkType": "HARD"\
       }]\
     ]],\
+    ["tailwind-merge", [\
+      ["npm:2.5.5", {\
+        "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/tailwind-merge-npm-2.5.5-b81987675f-10c0.zip/node_modules/tailwind-merge/",\
+        "packageDependencies": [\
+          ["tailwind-merge", "npm:2.5.5"]\
+        ],\
+        "linkType": "HARD"\
+      }]\
+    ]],\
     ["tailwindcss", [\
       ["npm:3.4.15", {\
         "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/tailwindcss-npm-3.4.15-ea0b9b13fd-10c0.zip/node_modules/tailwindcss/",\
@@ -16973,7 +17004,9 @@ const RAW_RUNTIME_STATE =
           ["axios", "npm:1.7.7"],\
           ["canvas-confetti", "npm:1.9.3"],\
           ["chromatic", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:11.18.1"],\
+          ["class-variance-authority", "npm:0.7.1"],\
           ["classnames", "npm:2.5.1"],\
+          ["clsx", "npm:2.1.1"],\
           ["eslint", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:9.15.0"],\
           ["eslint-config-airbnb", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:19.0.4"],\
           ["eslint-config-airbnb-base", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:15.0.0"],\
@@ -17007,6 +17040,7 @@ const RAW_RUNTIME_STATE =
           ["sharp", "npm:0.33.5"],\
           ["storybook", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:8.4.4"],\
           ["swiper", "npm:11.1.15"],\
+          ["tailwind-merge", "npm:2.5.5"],\
           ["tailwindcss", "npm:3.4.15"],\
           ["tailwindcss-animated", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:1.1.2"],\
           ["ts-pattern", "npm:5.5.0"],\
diff --git a/package.json b/package.json
index 39a87112..2ad993de 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,9 @@
         "@turf/turf": "^7.1.0",
         "axios": "^1.7.7",
         "canvas-confetti": "^1.9.3",
+        "class-variance-authority": "^0.7.1",
         "classnames": "^2.5.1",
+        "clsx": "^2.1.1",
         "file-saver": "^2.0.5",
         "html2canvas": "^1.4.1",
         "maplibre-gl": "^4.7.1",
@@ -37,6 +39,7 @@
         "react-textarea-autosize": "^8.5.5",
         "sharp": "^0.33.5",
         "swiper": "^11.1.15",
+        "tailwind-merge": "^2.5.5",
         "tailwindcss-animated": "^1.1.2",
         "ts-pattern": "^5.5.0",
         "zustand": "^5.0.1"
diff --git a/yarn.lock b/yarn.lock
index de8879ef..0943c462 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6454,6 +6454,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"class-variance-authority@npm:^0.7.1":
+  version: 0.7.1
+  resolution: "class-variance-authority@npm:0.7.1"
+  dependencies:
+    clsx: "npm:^2.1.1"
+  checksum: 10c0/0f438cea22131808b99272de0fa933c2532d5659773bfec0c583de7b3f038378996d3350683426b8e9c74a6286699382106d71fbec52f0dd5fbb191792cccb5b
+  languageName: node
+  linkType: hard
+
 "classnames@npm:^2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
@@ -6525,6 +6534,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^2.0.1":
   version: 2.0.1
   resolution: "color-convert@npm:2.0.1"
@@ -12246,6 +12262,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^2.5.5":
+  version: 2.5.5
+  resolution: "tailwind-merge@npm:2.5.5"
+  checksum: 10c0/32614dd2b4ddd4fab070d5ec569e6da00e2b34269b9ac2f2ff16733cef29a076c8e2210fbfc1904d7983a8fdb6b3e63d18ca117645f21b12ca7bcf8fe3507241
+  languageName: node
+  linkType: hard
+
 "tailwindcss-animated@npm:^1.1.2":
   version: 1.1.2
   resolution: "tailwindcss-animated@npm:1.1.2"
@@ -13179,7 +13202,9 @@ __metadata:
     axios: "npm:^1.7.7"
     canvas-confetti: "npm:^1.9.3"
     chromatic: "npm:^11.18.1"
+    class-variance-authority: "npm:^0.7.1"
     classnames: "npm:^2.5.1"
+    clsx: "npm:^2.1.1"
     eslint: "npm:^9.15.0"
     eslint-config-airbnb: "npm:^19.0.4"
     eslint-config-airbnb-base: "npm:^15.0.0"
@@ -13213,6 +13238,7 @@ __metadata:
     sharp: "npm:^0.33.5"
     storybook: "npm:8.4.4"
     swiper: "npm:^11.1.15"
+    tailwind-merge: "npm:^2.5.5"
     tailwindcss: "npm:^3.4.15"
     tailwindcss-animated: "npm:^1.1.2"
     ts-pattern: "npm:^5.5.0"