diff --git a/.eslintrc.json b/.eslintrc.json
index dc2f075a8..1ed440983 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -30,6 +30,10 @@
     "prettier/prettier": [
       "warn",
       { "endOfLine": "auto" }
+    ],
+    "react/jsx-curly-brace-presence": [
+      "warn",
+      { "props": "never", "children":"never" }
     ]
   },
   "overrides": [
diff --git a/README.md b/README.md
index 12c18fbdd..a6fcb2f70 100644
--- a/README.md
+++ b/README.md
@@ -152,7 +152,7 @@ and it is recommended to set VITE_LEGACY_TRADE_BY_SOURCE_RANGE to true in .env t
 
 ## Change Colors
 
-The theme is defined in the [`tailwind.config.js`](./tailwind.config.js#L36) file.
+The theme is defined in the [`tailwind.config.ts`](./tailwind.config.ts#L36) file.
 You can update these colors:
 
 - **background**: used for surfaces
@@ -169,7 +169,7 @@ To get the oklch value of an hex color you can use this webapp: https://oklch.co
 
 ### Background
 
-Background shades are calculated based on hue and chroma. In [`tailwind.config.js`](./tailwind.config.js#L38) you can specify `hue` and `chroma` of the background.
+Background shades are calculated based on hue and chroma. In [`tailwind.config.ts`](./tailwind.config.ts#L37) you can specify `hue` and `chroma` of the background.
 
 - `hue`: from 0 (pink) to 360 (pink).
 - `chroma`: It's recommended to use 0.01 or 0.02 depending on the hue.
@@ -186,7 +186,7 @@ All other colors are defined with l,c,h values (see https://oklch.com), and the
 }
 ```
 
-You can change the % of the `lighten` & `darken` function with the [`lightDark`](./tailwind.config.js#L18) function.
+You can change the % of the `lighten` & `darken` function with the [`lightDark`](./tailwind.config.ts#L20) function.
 
 # License
 
diff --git a/e2e/screenshots/simulator/recurring/Recurring limit limit/form.jpg b/e2e/screenshots/simulator/recurring/Recurring limit limit/form.jpg
index 6d9a18b96..0a7cc9071 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring limit limit/form.jpg and b/e2e/screenshots/simulator/recurring/Recurring limit limit/form.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-input-price.jpg b/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-input-price.jpg
index c3b1bf725..28bf4b9a2 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-input-price.jpg and b/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-input-price.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-results-animation.jpg b/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-results-animation.jpg
index 5f4830fe0..83c3a2370 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-results-animation.jpg and b/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-results-animation.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-results-summary.jpg b/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-results-summary.jpg
index a26aa45cd..2361c40ce 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-results-summary.jpg and b/e2e/screenshots/simulator/recurring/Recurring limit limit/simulator-results-summary.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring limit range/form.jpg b/e2e/screenshots/simulator/recurring/Recurring limit range/form.jpg
index d9c738abc..a67ef8bd4 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring limit range/form.jpg and b/e2e/screenshots/simulator/recurring/Recurring limit range/form.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring limit range/simulator-input-price.jpg b/e2e/screenshots/simulator/recurring/Recurring limit range/simulator-input-price.jpg
index f6edc094b..3f90b4482 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring limit range/simulator-input-price.jpg and b/e2e/screenshots/simulator/recurring/Recurring limit range/simulator-input-price.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring limit range/simulator-results-summary.jpg b/e2e/screenshots/simulator/recurring/Recurring limit range/simulator-results-summary.jpg
index 899ea664c..110c8134d 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring limit range/simulator-results-summary.jpg and b/e2e/screenshots/simulator/recurring/Recurring limit range/simulator-results-summary.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring range limit/form.jpg b/e2e/screenshots/simulator/recurring/Recurring range limit/form.jpg
index 15b0dcc8d..bedbd06d0 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring range limit/form.jpg and b/e2e/screenshots/simulator/recurring/Recurring range limit/form.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-input-price.jpg b/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-input-price.jpg
index 696fd8029..14bcf9c34 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-input-price.jpg and b/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-input-price.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-results-animation.jpg b/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-results-animation.jpg
index 21111e6ad..b434e3891 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-results-animation.jpg and b/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-results-animation.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-results-summary.jpg b/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-results-summary.jpg
index fd0f19f3f..8319b0527 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-results-summary.jpg and b/e2e/screenshots/simulator/recurring/Recurring range limit/simulator-results-summary.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring range range/form.jpg b/e2e/screenshots/simulator/recurring/Recurring range range/form.jpg
index 83b90f319..17d38061f 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring range range/form.jpg and b/e2e/screenshots/simulator/recurring/Recurring range range/form.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring range range/simulator-input-price.jpg b/e2e/screenshots/simulator/recurring/Recurring range range/simulator-input-price.jpg
index 0ba9020ee..f0a9cb641 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring range range/simulator-input-price.jpg and b/e2e/screenshots/simulator/recurring/Recurring range range/simulator-input-price.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring range range/simulator-results-animation.jpg b/e2e/screenshots/simulator/recurring/Recurring range range/simulator-results-animation.jpg
index 56dbbe3d6..a1aa98801 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring range range/simulator-results-animation.jpg and b/e2e/screenshots/simulator/recurring/Recurring range range/simulator-results-animation.jpg differ
diff --git a/e2e/screenshots/simulator/recurring/Recurring range range/simulator-results-summary.jpg b/e2e/screenshots/simulator/recurring/Recurring range range/simulator-results-summary.jpg
index c5010ead2..0174716b8 100644
Binary files a/e2e/screenshots/simulator/recurring/Recurring range range/simulator-results-summary.jpg and b/e2e/screenshots/simulator/recurring/Recurring range range/simulator-results-summary.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable buy limit/create/form.jpg b/e2e/screenshots/strategy/disposable/Disposable buy limit/create/form.jpg
index 5a92b04dc..edec80275 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable buy limit/create/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable buy limit/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable buy limit/deposit/form.jpg b/e2e/screenshots/strategy/disposable/Disposable buy limit/deposit/form.jpg
index 3808709ea..e0fce52b7 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable buy limit/deposit/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable buy limit/deposit/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable buy limit/editPrices/form.jpg b/e2e/screenshots/strategy/disposable/Disposable buy limit/editPrices/form.jpg
index 49a6742c9..b363dc600 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable buy limit/editPrices/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable buy limit/editPrices/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable buy limit/withdraw/form.jpg b/e2e/screenshots/strategy/disposable/Disposable buy limit/withdraw/form.jpg
index 21212475e..bc08c8f54 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable buy limit/withdraw/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable buy limit/withdraw/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable buy range/create/form.jpg b/e2e/screenshots/strategy/disposable/Disposable buy range/create/form.jpg
index c383b4852..412427816 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable buy range/create/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable buy range/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable buy range/deposit/form.jpg b/e2e/screenshots/strategy/disposable/Disposable buy range/deposit/form.jpg
index e528976c7..4754e7a3b 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable buy range/deposit/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable buy range/deposit/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable buy range/editPrices/form.jpg b/e2e/screenshots/strategy/disposable/Disposable buy range/editPrices/form.jpg
index 6d184c488..b4d25470d 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable buy range/editPrices/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable buy range/editPrices/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable buy range/withdraw/form.jpg b/e2e/screenshots/strategy/disposable/Disposable buy range/withdraw/form.jpg
index c880e0f62..c4c0bc679 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable buy range/withdraw/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable buy range/withdraw/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable sell limit/create/form.jpg b/e2e/screenshots/strategy/disposable/Disposable sell limit/create/form.jpg
index ad6bebd94..7ef70b701 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable sell limit/create/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable sell limit/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable sell limit/deposit/form.jpg b/e2e/screenshots/strategy/disposable/Disposable sell limit/deposit/form.jpg
index 496b30f30..e27a5f877 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable sell limit/deposit/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable sell limit/deposit/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable sell limit/editPrices/form.jpg b/e2e/screenshots/strategy/disposable/Disposable sell limit/editPrices/form.jpg
index 54cc1199d..61000a58a 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable sell limit/editPrices/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable sell limit/editPrices/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable sell limit/withdraw/form.jpg b/e2e/screenshots/strategy/disposable/Disposable sell limit/withdraw/form.jpg
index 4dc20a66c..bc00a96ff 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable sell limit/withdraw/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable sell limit/withdraw/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable sell range/create/form.jpg b/e2e/screenshots/strategy/disposable/Disposable sell range/create/form.jpg
index f0dc380b2..56e91acba 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable sell range/create/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable sell range/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable sell range/deposit/form.jpg b/e2e/screenshots/strategy/disposable/Disposable sell range/deposit/form.jpg
index fbc4a3e8a..de568309b 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable sell range/deposit/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable sell range/deposit/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable sell range/editPrices/form.jpg b/e2e/screenshots/strategy/disposable/Disposable sell range/editPrices/form.jpg
index f5acedb0f..bc5a50d0e 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable sell range/editPrices/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable sell range/editPrices/form.jpg differ
diff --git a/e2e/screenshots/strategy/disposable/Disposable sell range/withdraw/form.jpg b/e2e/screenshots/strategy/disposable/Disposable sell range/withdraw/form.jpg
index c4899d026..d6c3608cb 100644
Binary files a/e2e/screenshots/strategy/disposable/Disposable sell range/withdraw/form.jpg and b/e2e/screenshots/strategy/disposable/Disposable sell range/withdraw/form.jpg differ
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/create/form.jpg b/e2e/screenshots/strategy/overlapping/Overlapping/create/form.jpg
index 2342e3377..c3907b967 100644
Binary files a/e2e/screenshots/strategy/overlapping/Overlapping/create/form.jpg and b/e2e/screenshots/strategy/overlapping/Overlapping/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/overlapping/Overlapping/create/my-strategy.jpg b/e2e/screenshots/strategy/overlapping/Overlapping/create/my-strategy.jpg
index 637616b35..863aa318e 100644
Binary files a/e2e/screenshots/strategy/overlapping/Overlapping/create/my-strategy.jpg and b/e2e/screenshots/strategy/overlapping/Overlapping/create/my-strategy.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit limit/create/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit limit/create/form.jpg
index 805fa9736..1da368cff 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit limit/create/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit limit/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit limit/create/my-strategy.jpg b/e2e/screenshots/strategy/recurring/Recurring limit limit/create/my-strategy.jpg
index 14ab32428..16379a5f8 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit limit/create/my-strategy.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit limit/create/my-strategy.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit limit/deposit/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit limit/deposit/form.jpg
index b47df47fc..c77689a2c 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit limit/deposit/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit limit/deposit/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit limit/editPrices/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit limit/editPrices/form.jpg
index 776ce132c..05dafbe76 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit limit/editPrices/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit limit/editPrices/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit limit/renew/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit limit/renew/form.jpg
index 8a0570c05..5e8b31612 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit limit/renew/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit limit/renew/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit limit/withdraw/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit limit/withdraw/form.jpg
index a798e55a6..97c00b221 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit limit/withdraw/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit limit/withdraw/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit range/create/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit range/create/form.jpg
index cbe9f54d0..f89175cc4 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit range/create/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit range/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit range/deposit/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit range/deposit/form.jpg
index 10edcf61e..199775162 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit range/deposit/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit range/deposit/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit range/editPrices/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit range/editPrices/form.jpg
index d6563ac7f..dd7592fb0 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit range/editPrices/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit range/editPrices/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit range/renew/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit range/renew/form.jpg
index f6aa66516..9c2adb215 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit range/renew/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit range/renew/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring limit range/withdraw/form.jpg b/e2e/screenshots/strategy/recurring/Recurring limit range/withdraw/form.jpg
index d27c8ea6f..42826a63b 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring limit range/withdraw/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring limit range/withdraw/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range limit/create/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range limit/create/form.jpg
index 8826a3c42..08e1d0eae 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range limit/create/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range limit/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range limit/create/my-strategy.jpg b/e2e/screenshots/strategy/recurring/Recurring range limit/create/my-strategy.jpg
index 05ac6b35e..a25336e4a 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range limit/create/my-strategy.jpg and b/e2e/screenshots/strategy/recurring/Recurring range limit/create/my-strategy.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range limit/deposit/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range limit/deposit/form.jpg
index ec5302b2c..67c782838 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range limit/deposit/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range limit/deposit/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range limit/editPrices/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range limit/editPrices/form.jpg
index 5d52b545d..792aba953 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range limit/editPrices/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range limit/editPrices/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range limit/renew/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range limit/renew/form.jpg
index b788fa5b9..bf8732a34 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range limit/renew/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range limit/renew/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range limit/withdraw/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range limit/withdraw/form.jpg
index 6b6e997b2..a2f85648a 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range limit/withdraw/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range limit/withdraw/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range range/create/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range range/create/form.jpg
index b0d378f65..07d0ce081 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range range/create/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range range/create/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range range/deposit/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range range/deposit/form.jpg
index 9bf794fab..dd55d16e9 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range range/deposit/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range range/deposit/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range range/editPrices/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range range/editPrices/form.jpg
index e51890905..e816b832c 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range range/editPrices/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range range/editPrices/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range range/renew/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range range/renew/form.jpg
index 6c2fecbb7..6c801e7fa 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range range/renew/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range range/renew/form.jpg differ
diff --git a/e2e/screenshots/strategy/recurring/Recurring range range/withdraw/form.jpg b/e2e/screenshots/strategy/recurring/Recurring range range/withdraw/form.jpg
index dc284e0d7..6032dc116 100644
Binary files a/e2e/screenshots/strategy/recurring/Recurring range range/withdraw/form.jpg and b/e2e/screenshots/strategy/recurring/Recurring range range/withdraw/form.jpg differ
diff --git a/package.json b/package.json
index 692fa1584..01b1ebbe1 100644
--- a/package.json
+++ b/package.json
@@ -83,8 +83,8 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "source-map-explorer": "^2.5.3",
-    "tailwind-merge": "^1.13.2",
-    "tailwindcss": "3.1.8",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss": "3.4.3",
     "typechain": "^8.1.0",
     "typescript": "^5.3.3",
     "ua-parser-js": "^1.0.35",
@@ -124,4 +124,4 @@
   "devDependencies": {
     "@types/d3": "^7.4.3"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 0c5f06b09..bb9b92e6a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,7 +35,7 @@ export const App = () => {
     <>
       <NotificationAlerts />
       <MainMenu />
-      <main className="mt-80 mb-16 flex w-full flex-grow flex-col">
+      <main className="mb-16 mt-80 flex w-full flex-grow flex-col">
         <MainContent />
       </main>
       <Footer />
diff --git a/src/components/activity/ActivityExport.tsx b/src/components/activity/ActivityExport.tsx
index 930502b9f..bc17a2b3a 100644
--- a/src/components/activity/ActivityExport.tsx
+++ b/src/components/activity/ActivityExport.tsx
@@ -70,10 +70,10 @@ export const ActivityExport: FC<Props> = ({ activities }) => {
   return (
     <a
       href={csvURI}
-      className="flex items-center gap-8 rounded-full border-2 border-background-800 px-12 py-8 text-12 hover:border-background-700 hover:bg-background-800"
+      className="border-background-800 text-12 hover:border-background-700 hover:bg-background-800 flex items-center gap-8 rounded-full border-2 px-12 py-8"
       download="activities.csv"
     >
-      <IconDownloadFile className="h-14 w-14 text-primary" />
+      <IconDownloadFile className="text-primary size-14" />
       <span>Export</span>
     </a>
   );
diff --git a/src/components/activity/ActivityFilter.tsx b/src/components/activity/ActivityFilter.tsx
index 0a30eb9c4..71077dc1f 100644
--- a/src/components/activity/ActivityFilter.tsx
+++ b/src/components/activity/ActivityFilter.tsx
@@ -91,7 +91,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
           form={formId}
           name="ids"
           value={ids}
-          icon={<IconSearch className="w-14 text-primary" />}
+          icon={<IconSearch className="text-primary w-14" />}
           label={
             ids.length
               ? `${ids.length} Strategies Selected`
@@ -116,7 +116,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
           form={formId}
           name="pairs"
           value={pairs}
-          icon={<IconPair className="w-14 text-primary" />}
+          icon={<IconPair className="text-primary w-14" />}
           label={
             pairs.length ? `${pairs.length} Pairs Selected` : 'Filter Pairs'
           }
@@ -133,7 +133,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
         form={formId}
         name="actions"
         value={actions}
-        icon={<IconSearch className="w-14 text-primary" />}
+        icon={<IconSearch className="text-primary w-14" />}
         label={
           actions.length
             ? `${actions.length} Actions Selected`
diff --git a/src/components/activity/ActivityList.tsx b/src/components/activity/ActivityList.tsx
index 3325a263f..f204a5776 100644
--- a/src/components/activity/ActivityList.tsx
+++ b/src/components/activity/ActivityList.tsx
@@ -38,7 +38,7 @@ export const ActivityList: FC<ActivityListProps> = (props) => {
       </ul>
       {limit < size && (
         <>
-          <p className="mb-16 text-center text-12 text-white/60">
+          <p className="text-12 mb-16 text-center text-white/60">
             {limit} / {size}
           </p>
           <Button
@@ -69,10 +69,10 @@ const ActivityItem: FC<ActivityItemProps> = ({ activity, hideIds }) => {
     setSearchParams({ actions });
   };
   return (
-    <li className="flex flex-col gap-16 rounded border-2 border-background-800">
+    <li className="border-background-800 flex flex-col gap-16 rounded border-2">
       <header className="flex px-16 pt-16">
         {!hideIds && <ActivityId activity={activity} size={12} />}
-        <p className="flex flex-1 items-center justify-end gap-8 font-mono text-12 text-white/60">
+        <p className="text-12 flex flex-1 items-center justify-end gap-8 font-mono text-white/60">
           {activityDateFormatter.format(activity.date)}
           <TransactionLink txHash={activity.txHash} className="h-16" />
         </p>
@@ -83,7 +83,7 @@ const ActivityItem: FC<ActivityItemProps> = ({ activity, hideIds }) => {
             <ActivityIcon activity={activity} size={24} />
             {activityActionName[activity.action]}
           </h3>
-          <p className="font-mono text-12 text-white/60">
+          <p className="text-12 font-mono text-white/60">
             {activityDescription(activity)}
           </p>
         </button>
@@ -91,9 +91,9 @@ const ActivityItem: FC<ActivityItemProps> = ({ activity, hideIds }) => {
       <hr className="border-background-800" />
       <table className="w-full table-fixed">
         <thead>
-          <tr className="font-mono text-12 text-white/60">
-            <th className="px-16 font-weight-400">Buy Budget</th>
-            <th className="px-16 font-weight-400">Sell Budget</th>
+          <tr className="text-12 font-mono text-white/60">
+            <th className="font-weight-400 px-16">Buy Budget</th>
+            <th className="font-weight-400 px-16">Sell Budget</th>
           </tr>
         </thead>
         <tbody>
diff --git a/src/components/activity/ActivityNotification.tsx b/src/components/activity/ActivityNotification.tsx
index e71cbf82d..b37df5139 100644
--- a/src/components/activity/ActivityNotification.tsx
+++ b/src/components/activity/ActivityNotification.tsx
@@ -20,7 +20,7 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
   return (
     <article aria-labelledby={titleId} className="flex gap-16">
       <AnimatedActionIcon action={activity.action} />
-      <div className="flex flex-1 flex-col gap-8 overflow-hidden text-14">
+      <div className="text-14 flex flex-1 flex-col gap-8 overflow-hidden">
         <hgroup>
           <h3 className="text-16" id={titleId} data-testid="notif-title">
             {activityActionName[activity.action]}
@@ -32,7 +32,7 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
         <Link
           to="/strategy/$id"
           params={{ id: activity.strategy.id }}
-          className="flex items-center font-weight-500"
+          className="font-weight-500 flex items-center"
         >
           View Activity
         </Link>
@@ -43,10 +43,10 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
           data-testid="notif-close"
           aria-label="Remove notification"
         >
-          <IconClose className="h-14 w-14 text-white/80" />
+          <IconClose className="size-14 text-white/80" />
         </button>
 
-        <p className="whitespace-nowrap text-12 font-weight-500 text-white/60">
+        <p className="text-12 font-weight-500 whitespace-nowrap text-white/60">
           {unix(notification.timestamp).fromNow(true)}
         </p>
       </div>
@@ -59,7 +59,7 @@ export const AnimatedActionIcon = (props: { action: ActivityAction }) => {
   return (
     <div
       className={cn(
-        'relative grid h-38 w-38 place-items-center rounded-full',
+        'size-38 relative grid place-items-center rounded-full',
         style.icon,
         {
           'bg-buy/20 text-buy': props.action === 'buy',
diff --git a/src/components/activity/ActivitySection.tsx b/src/components/activity/ActivitySection.tsx
index 396673569..999b95f0e 100644
--- a/src/components/activity/ActivitySection.tsx
+++ b/src/components/activity/ActivitySection.tsx
@@ -11,7 +11,7 @@ export const ActivitySection: FC<ActivityFilterProps> = ({ filters = [] }) => {
   const { list: activities, all: allActivities } = useActivity();
   const { aboveBreakpoint } = useBreakpoints();
   return (
-    <section className="rounded bg-background-900">
+    <section className="bg-background-900 rounded">
       <header className="grid grid-cols-[auto_1fr] gap-16 px-20 py-24 md:grid-cols-[auto_1fr_auto]">
         <h2 className="row-start-1">Activity</h2>
         <ActivityFilter
diff --git a/src/components/activity/ActivityTable.tsx b/src/components/activity/ActivityTable.tsx
index 64a0c62aa..9932d7feb 100644
--- a/src/components/activity/ActivityTable.tsx
+++ b/src/components/activity/ActivityTable.tsx
@@ -49,7 +49,7 @@ export const ActivityTable: FC<ActivityListProps> = (props) => {
   return (
     <table className={cn('w-full border-collapse', style.table)}>
       <thead>
-        <tr className="border-y border-background-800 font-mono text-14 text-white/60">
+        <tr className="border-background-800 text-14 border-y font-mono text-white/60">
           {!hideIds && <th className={thStyle}>ID</th>}
           <th className={thStyle} colSpan={2}>
             Action
@@ -136,7 +136,7 @@ const ActivityRow: FC<ActivityRowProps> = ({ activity, hideIds, index }) => {
         </td>
       </tr>
       <tr
-        className="font-mono text-12 text-white/60"
+        className="text-12 font-mono text-white/60"
         style={{ animationDelay: `${index * 50}ms` }}
       >
         {/* ID */}
@@ -173,7 +173,7 @@ export const ActivityId: FC<ActivityIdProps> = ({ activity, size }) => {
     <Link
       to="/strategy/$id"
       params={{ id: id }}
-      className="inline-flex items-center gap-4 rounded-full bg-background-800 py-4 px-8"
+      className="bg-background-800 inline-flex items-center gap-4 rounded-full px-8 py-4"
     >
       <span className={`text-${size}`}>{getLowestBits(id)}</span>
       <TokensOverlap tokens={[base, quote]} size={size + 2} />
@@ -191,7 +191,7 @@ export const ActivityIcon: FC<ActivityIconProps> = (props) => {
   const classes = cn(
     'grid place-items-center rounded-full',
     iconColor(activity.action),
-    `h-${size} w-${size}`,
+    `size-${size}`,
     className
   );
   return (
@@ -248,12 +248,12 @@ const ActivityPaginator = () => {
   };
 
   return (
-    <tr className="border-t border-background-800 text-14 text-white/80">
+    <tr className="border-background-800 text-14 border-t text-white/80">
       <td className="px-24 py-16" colSpan={3}>
         <div className="flex items-center gap-8">
           <label>Show results</label>
           <select
-            className="rounded-full border-2 border-background-800 bg-background-900 px-12 py-8"
+            className="border-background-800 bg-background-900 rounded-full border-2 px-12 py-8"
             name="limit"
             onChange={changeLimit}
             value={limit}
@@ -285,7 +285,7 @@ const ActivityPaginator = () => {
             <IconChevronLeft className="h-12" />
           </button>
           <p
-            className="flex gap-8 rounded-full border-2 border-background-800 px-12 py-8"
+            className="border-background-800 flex gap-8 rounded-full border-2 px-12 py-8"
             aria-label="page position"
           >
             <span className="text-white">{currentPage}</span>
@@ -327,7 +327,7 @@ const iconColor = (action: ActivityAction) => {
 };
 
 const ActionIcon: FC<ActionIconProps> = ({ action, size }) => {
-  const className = `h-${size} w-${size}`;
+  const className = `size-${size}`;
   if (action === 'create') return <IconCheck className={className} />;
   if (action === 'transfer') return <IconTransfer className={className} />;
   if (action === 'edit') return <IconEdit className={className} />;
diff --git a/src/components/common/Checkbox/Checkbox.tsx b/src/components/common/Checkbox/Checkbox.tsx
index 5f0ca7d57..553b8cb31 100644
--- a/src/components/common/Checkbox/Checkbox.tsx
+++ b/src/components/common/Checkbox/Checkbox.tsx
@@ -9,7 +9,7 @@ type Props = JSX.IntrinsicElements['button'] & {
 
 export const Checkbox: FC<Props> = ({ isChecked, setIsChecked, ...attr }) => {
   const classNames =
-    'h-18 w-18 rounded-4 border-2 flex items-center justify-center cursor-pointer';
+    'size-18 rounded-4 border-2 flex items-center justify-center cursor-pointer';
   const borderColor = isChecked
     ? 'border-primary bg-primary'
     : 'border-white/60';
@@ -21,7 +21,7 @@ export const Checkbox: FC<Props> = ({ isChecked, setIsChecked, ...attr }) => {
       className={cn(`${classNames} ${borderColor}`, attr.className)}
       onClick={() => setIsChecked(!isChecked)}
     >
-      {isChecked && <IconCheck className="h-10 w-10 text-background-900" />}
+      {isChecked && <IconCheck className="text-background-900 size-10" />}
     </button>
   );
 };
diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx
index 83e71e457..db0a94363 100644
--- a/src/components/common/Footer/Footer.tsx
+++ b/src/components/common/Footer/Footer.tsx
@@ -4,11 +4,11 @@ import { ReactComponent as LogoCarbonDeFi } from 'assets/logos/carbondefi.svg';
 
 export const Footer: FC = () => {
   return (
-    <footer className="mb-80 flex items-center border-t border-background-800 bg-black py-24 px-20 md:mb-0">
+    <footer className="border-background-800 mb-80 flex items-center border-t bg-black px-20 py-24 md:mb-0">
       <NewTabLink
         aria-label="Powered By CarbonDeFi"
         to={externalLinks.carbonHomepage}
-        className="flex items-center gap-8 whitespace-nowrap text-14 font-weight-500 text-white/60"
+        className="text-14 font-weight-500 flex items-center gap-8 whitespace-nowrap text-white/60"
       >
         Powered by
         <LogoCarbonDeFi className="w-[114px] text-white" />
diff --git a/src/components/common/NotFound.tsx b/src/components/common/NotFound.tsx
index aebed9b78..ca8633b33 100644
--- a/src/components/common/NotFound.tsx
+++ b/src/components/common/NotFound.tsx
@@ -21,16 +21,16 @@ export const NotFound = ({
   return (
     <section
       className={cn(
-        'relative flex min-h-[500px] flex-col items-center justify-center gap-30 px-20 py-50 text-center',
-        bordered && 'rounded border-2 border-background-800'
+        'gap-30 py-50 relative flex min-h-[500px] flex-col items-center justify-center px-20 text-center',
+        bordered && 'border-background-800 rounded border-2'
       )}
     >
       {showBackButton && (
         <button
           onClick={() => history.back()}
-          className="absolute top-8 left-8 rounded-full p-16 hover:bg-white/20"
+          className="absolute left-8 top-8 rounded-full p-16 hover:bg-white/20"
         >
-          <ForwardArrow className="h-16 w-16 rotate-180" />
+          <ForwardArrow className="size-16 rotate-180" />
         </button>
       )}
       <div
@@ -40,14 +40,14 @@ export const NotFound = ({
         })}
       >
         <IconSearch
-          className={cn('h-32 w-32', {
+          className={cn('size-32', {
             'text-primary': variant === 'info',
             'text-error': variant === 'error',
           })}
         />
       </div>
       <h2 className="max-w-[440px] text-[32px] leading-[36px]">{title}</h2>
-      <p className="max-w-[440px] text-16 text-white/60">{text}</p>
+      <p className="text-16 max-w-[440px] text-white/60">{text}</p>
     </section>
   );
 };
diff --git a/src/components/common/PairLogoName.tsx b/src/components/common/PairLogoName.tsx
index afc304222..9df70754a 100644
--- a/src/components/common/PairLogoName.tsx
+++ b/src/components/common/PairLogoName.tsx
@@ -16,7 +16,7 @@ export const PairLogoName: FC<Props> = ({
   return (
     <>
       <TokensOverlap tokens={[baseToken, quoteToken]} size={30} />
-      <p className="flex items-center gap-4 font-weight-500">
+      <p className="font-weight-500 flex items-center gap-4">
         {baseToken.symbol}
         {baseToken.isSuspicious && (
           <WarningWithTooltip tooltipContent={suspiciousTokenTooltipMsg} />
diff --git a/src/components/common/Toaster/Toaster.tsx b/src/components/common/Toaster/Toaster.tsx
index 3cc5399b6..27126d7a5 100644
--- a/src/components/common/Toaster/Toaster.tsx
+++ b/src/components/common/Toaster/Toaster.tsx
@@ -8,7 +8,7 @@ export const Toaster: FC = () => {
       {toaster.toasts.map((toast) => (
         <li
           key={toast.id}
-          className="my-5 animate-slideUp rounded-full border border-white/60 bg-background-800 py-8 px-16"
+          className="animate-slideUp bg-background-800 my-5 rounded-full border border-white/60 px-16 py-8"
         >
           <output>{toast.content}</output>
         </li>
diff --git a/src/components/common/TokenInputField/Slippage.tsx b/src/components/common/TokenInputField/Slippage.tsx
index 9eb3ccb0d..621818f64 100644
--- a/src/components/common/TokenInputField/Slippage.tsx
+++ b/src/components/common/TokenInputField/Slippage.tsx
@@ -26,11 +26,11 @@ export const Slippage: FC<Props> = ({ slippage }) => {
       element={`The slippage is calculated based on the ${selectedFiatCurrency} value difference between the selected source and target tokens.`}
     >
       <span className={cn('flex flex-1 items-center gap-5', textColor)}>
-        {slippage?.eq(0) && <IconWarning className="h-12 w-12" />}
+        {slippage?.eq(0) && <IconWarning className="size-12" />}
         {slippage?.gt(0) && <>(+{slippageValue}%)</>}
         {slippage?.lt(0) && <>(-{slippageValue}%)</>}
         {slippage?.eq(0) && <>Notice: price & slippage are unknown</>}
-        {slippage.lt(-3) && <IconWarning className="h-12 w-12" />}
+        {slippage.lt(-3) && <IconWarning className="size-12" />}
       </span>
     </Tooltip>
   );
diff --git a/src/components/common/TokenInputField/TokenInputField.tsx b/src/components/common/TokenInputField/TokenInputField.tsx
index 52d16c0c9..b4e86b3d4 100644
--- a/src/components/common/TokenInputField/TokenInputField.tsx
+++ b/src/components/common/TokenInputField/TokenInputField.tsx
@@ -5,7 +5,12 @@ import { useWeb3 } from 'libs/web3';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { LogoImager } from 'components/common/imager/Imager';
 import { Slippage } from './Slippage';
-import { prettifyNumber, formatNumber, sanitizeNumber } from 'utils/helpers';
+import {
+  prettifyNumber,
+  formatNumber,
+  sanitizeNumber,
+  cn,
+} from 'utils/helpers';
 import { decimalNumberValidationRegex } from 'utils/inputsValidations';
 
 type Props = {
@@ -73,12 +78,11 @@ export const TokenInputField: FC<Props> = ({
 
   return (
     <div
-      className={`
-        flex cursor-text flex-col gap-8 border border-black p-16
-        focus-within:border-white/50
-        ${isError ? '!border-error/50' : ''}
-        ${className}
-      `}
+      className={cn(
+        'flex cursor-text flex-col gap-8 border border-black p-16 focus-within:border-white/50',
+        className,
+        isError && 'border-error/50 focus-within:border-error/50'
+      )}
       onClick={() => inputRef.current?.focus()}
     >
       <div className="flex items-center justify-between">
@@ -94,21 +98,20 @@ export const TokenInputField: FC<Props> = ({
           placeholder={placeholder}
           onFocus={(e) => e.target.select()}
           onBlur={handleBlur}
-          className={`
-            grow text-ellipsis bg-transparent text-18 font-weight-500 focus:outline-none
-            ${isError ? 'text-error' : ''}
-            ${disabled ? 'text-white/40' : ''}
-            ${disabled ? 'cursor-not-allowed' : ''}
-          `}
+          className={cn(
+            'text-18 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none',
+            disabled && 'cursor-not-allowed text-white/40',
+            isError && 'text-error'
+          )}
           disabled={disabled}
           data-testid={testid}
         />
-        <div className="flex items-center gap-6 rounded-[20px] bg-background-800 py-6 px-8">
-          <LogoImager alt="Token" src={token.logoURI} className="h-20 w-20" />
+        <div className="bg-background-800 flex items-center gap-6 rounded-[20px] px-8 py-6">
+          <LogoImager alt="Token" src={token.logoURI} className="size-20" />
           <span className="font-weight-500">{token.symbol}</span>
         </div>
       </div>
-      <div className="flex min-h-[16px] flex-wrap items-center justify-between gap-10 font-mono text-12 font-weight-500">
+      <div className="text-12 font-weight-500 flex min-h-[16px] flex-wrap items-center justify-between gap-10 font-mono">
         <p className="flex items-center gap-5 break-all text-white/60">
           {!slippage?.isZero() && showFiatValue && getFiatAsString(value)}
           {slippage && value && <Slippage slippage={slippage} />}
diff --git a/src/components/common/WarningMessageWithIcon.tsx b/src/components/common/WarningMessageWithIcon.tsx
index e1ebacefa..124695961 100644
--- a/src/components/common/WarningMessageWithIcon.tsx
+++ b/src/components/common/WarningMessageWithIcon.tsx
@@ -22,12 +22,12 @@ export const WarningMessageWithIcon: FC<WarningMessageWithIconProps> = ({
       role="alert"
       aria-live="polite"
       className={`
-        flex items-center gap-10 text-12
+        text-12 flex items-center gap-10
         ${isError ? 'text-error' : 'text-warning'}
         ${className}
       `}
     >
-      <IconWarning className="h-12 w-12" />
+      <IconWarning className="size-12" />
       <span className="flex-1">{children ?? message}</span>
     </output>
   );
diff --git a/src/components/common/WarningWithTooltip/WarningWithTooltip.tsx b/src/components/common/WarningWithTooltip/WarningWithTooltip.tsx
index bfe15677b..3ccb24139 100644
--- a/src/components/common/WarningWithTooltip/WarningWithTooltip.tsx
+++ b/src/components/common/WarningWithTooltip/WarningWithTooltip.tsx
@@ -1,5 +1,6 @@
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
+import { cn } from 'utils/helpers';
 
 type WarningWithTooltipProps = {
   tooltipContent: string;
@@ -13,7 +14,7 @@ export const WarningWithTooltip = ({
   return (
     <Tooltip interactive={false} element={tooltipContent}>
       <span>
-        <IconWarning className={`w-14 text-warning ${className}`} />
+        <IconWarning className={cn('text-warning w-14', className)} />
       </span>
     </Tooltip>
   );
diff --git a/src/components/common/approval/ApproveToken.tsx b/src/components/common/approval/ApproveToken.tsx
index f288d1eef..11f5c928c 100644
--- a/src/components/common/approval/ApproveToken.tsx
+++ b/src/components/common/approval/ApproveToken.tsx
@@ -165,14 +165,10 @@ export const ApproveToken: FC<Props> = ({
 
   return (
     <>
-      <div className="bg-content flex h-85 items-center justify-between rounded px-20">
-        <div className={'space-y-6'}>
-          <div className={'flex items-center space-x-10'}>
-            <LogoImager
-              alt={'Token'}
-              src={token.logoURI}
-              className="h-30 w-30"
-            />
+      <div className="bg-content h-85 flex items-center justify-between rounded px-20">
+        <div className="space-y-6">
+          <div className="flex items-center space-x-10">
+            <LogoImager alt="Token" src={token.logoURI} className="size-30" />
             <div className="font-weight-500">{token.symbol}</div>
           </div>
         </div>
@@ -181,11 +177,11 @@ export const ApproveToken: FC<Props> = ({
           txBusy ? (
             <div>Waiting for Confirmation</div>
           ) : (
-            <div className="flex h-82 flex-col items-end justify-center gap-10">
+            <div className="h-82 flex flex-col items-end justify-center gap-10">
               <div className="flex items-center space-x-8">
                 <div className="flex items-center space-x-10">
                   <div
-                    className={`font-mono text-12 font-weight-500 transition-all ${
+                    className={`text-12 font-weight-500 font-mono transition-all ${
                       isLimited ? 'text-white/60' : 'text-white/85'
                     }`}
                   >
@@ -195,7 +191,7 @@ export const ApproveToken: FC<Props> = ({
                     variant={isLimited ? 'secondary' : 'white'}
                     isOn={!isLimited}
                     setIsOn={handleLimitChange}
-                    size={'sm'}
+                    size="sm"
                   />
                 </div>
               </div>
@@ -204,7 +200,7 @@ export const ApproveToken: FC<Props> = ({
                 variant="white"
                 onClick={onApprove}
                 size="sm"
-                className="px-10 text-14"
+                className="text-14 px-10"
                 data-testid={`approve-${token.symbol}`}
               >
                 {data.nullApprovalRequired ? 'Revoke and Approve' : 'Approve'}
@@ -220,7 +216,7 @@ export const ApproveToken: FC<Props> = ({
         {error ? <pre>{JSON.stringify(error, null, 2)}</pre> : null}
       </div>
       {data.nullApprovalRequired && (
-        <div className="flex space-x-20 font-mono text-14 text-warning">
+        <div className="text-14 text-warning flex space-x-20 font-mono">
           <div>
             <IconWarning className="w-16" />
           </div>
diff --git a/src/components/common/button/buttonStyles.ts b/src/components/common/button/buttonStyles.ts
index f99721589..5266d6f8d 100644
--- a/src/components/common/button/buttonStyles.ts
+++ b/src/components/common/button/buttonStyles.ts
@@ -20,31 +20,31 @@ export const buttonStyles = cva<ButtonVariants>(
     variants: {
       variant: {
         black: [
-          'bg-black border-2 border-black !text-white',
+          'bg-black border-2 border-black text-white',
           'hover:border-background-700 hover:disabled:black',
         ],
         white: [
-          'bg-white border-2 border-white !text-black',
+          'bg-white border-2 border-white text-black',
           'hover:border-background-400 hover:disabled:border-white',
         ],
         secondary: [
-          'bg-background-800 border-2 border-background-800 !text-white',
+          'bg-background-800 border-2 border-background-800 text-white',
           'hover:border-background-700 hover:disabled:border-background-800',
         ],
         success: [
-          'bg-primary border-2 border-primary !text-black',
+          'bg-primary border-2 border-primary text-black',
           'hover:border-primary-light hover:disabled:border-primary',
         ],
         buy: [
-          'bg-buy border-2 border-buy !text-black',
-          'hover:border-buy-light hover:!text-black hover:bg-buy hover:disabled:border-buy',
+          'bg-buy border-2 border-buy text-black',
+          'hover:border-buy-light hover:text-black hover:bg-buy hover:disabled:border-buy',
         ],
         sell: [
-          'bg-sell border-2 border-sell !text-black',
-          'hover:border-sell-light hover:!text-black hover:bg-sell hover:disabled:border-sell',
+          'bg-sell border-2 border-sell text-black',
+          'hover:border-sell-light hover:text-black hover:bg-sell hover:disabled:border-sell',
         ],
         error: [
-          'bg-error border-2 border-error !text-black',
+          'bg-error border-2 border-error text-black',
           'hover:border-error-light hover:disabled:border-error',
         ],
       },
diff --git a/src/components/common/button/index.tsx b/src/components/common/button/index.tsx
index 53d0e6dec..594da1efd 100644
--- a/src/components/common/button/index.tsx
+++ b/src/components/common/button/index.tsx
@@ -8,6 +8,7 @@ import {
 import { VariantProps } from 'class-variance-authority';
 import { buttonStyles } from 'components/common/button/buttonStyles';
 import { m } from 'libs/motion';
+import { cn } from 'utils/helpers';
 
 export type ButtonHTMLProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -33,7 +34,9 @@ export const Button: FC<ButtonProps> = ({
   return (
     // @ts-ignore
     <m.button
-      className={buttonStyles({ variant, size, fullWidth, class: className })}
+      className={cn(
+        buttonStyles({ variant, size, fullWidth, class: className })
+      )}
       {...props}
       disabled={props.disabled || loading}
     >
diff --git a/src/components/common/buySellPriceRangeIndicator/BuySellPriceRangeIndicator.tsx b/src/components/common/buySellPriceRangeIndicator/BuySellPriceRangeIndicator.tsx
index 8acf53ddc..3d1e0be9a 100644
--- a/src/components/common/buySellPriceRangeIndicator/BuySellPriceRangeIndicator.tsx
+++ b/src/components/common/buySellPriceRangeIndicator/BuySellPriceRangeIndicator.tsx
@@ -7,22 +7,22 @@ export const BuySellPriceRangeIndicator = ({ buy, limit }: Props) => {
   const background = buy ? 'bg-buy' : 'bg-sell';
   return (
     <div
-      className={`flex w-full justify-center rounded-b-6 bg-gradient-to-t ${
+      className={`rounded-b-6 flex w-full justify-center bg-gradient-to-t ${
         buy ? 'from-buy/10' : 'from-sell/10'
       }`}
     >
-      <div className={'flex items-end'}>
-        <div className={'flex flex-col items-center'}>
-          <div className={`h-4 w-4 rounded-full ${background}`} />
+      <div className="flex items-end">
+        <div className="flex flex-col items-center">
+          <div className={`size-4 rounded-full ${background}`} />
           <div className={`h-16 w-2 ${background}`} />
         </div>
         {!limit && (
           <>
             <div
-              className={`-mx-2 h-14 w-100 ${buy ? 'bg-buy/20' : 'bg-sell/20'}`}
+              className={`w-100 -mx-2 h-14 ${buy ? 'bg-buy/20' : 'bg-sell/20'}`}
             />
-            <div className={'flex flex-col items-center'}>
-              <div className={`h-4 w-4 rounded-full ${background}`} />
+            <div className="flex flex-col items-center">
+              <div className={`size-4 rounded-full ${background}`} />
               <div className={`h-16 w-2 ${background}`} />
             </div>
           </>
diff --git a/src/components/common/calendar/index.tsx b/src/components/common/calendar/index.tsx
index d091fbc81..fe14f78d4 100644
--- a/src/components/common/calendar/index.tsx
+++ b/src/components/common/calendar/index.tsx
@@ -23,7 +23,7 @@ export const Calendar = ({
         caption_start: 'flex-row ',
         caption_label: 'flex-1 text-center text-14 order-1',
         nav: 'contents gap-10',
-        nav_button: 'h-16 w-16 bg-transparent opacity-50 hover:opacity-100',
+        nav_button: 'size-16 bg-transparent opacity-50 hover:opacity-100',
         nav_button_previous: 'order-0',
         nav_button_next: 'order-2',
         table: 'border-collapse',
@@ -34,17 +34,17 @@ export const Calendar = ({
         day: cn(
           'text-white/60 h-32 w-36 p-0 rounded-8 border-box',
           'focus-visible:border focus-visible:border-white/50 focus-visible:outline-none',
-          'hover:bg-background-900 hover:text-white'
+          'hover:!bg-background-900 hover:text-white'
         ),
         day_selected:
-          'focus-visible:bg-primary/80 font-weight-500 text-white bg-primary/20 rounded-0 [&:not(.outside)]:opacity-100',
+          'focus-visible:bg-primary/80 font-weight-500 !text-white bg-primary/20 !rounded-0 [&:not(.outside)]:opacity-100',
         day_range_start:
-          'rounded-l-8 [&:not(.outside)]:bg-primary [&:not(.outside)]:text-black',
+          '!rounded-l-8 [&:not(.outside)]:!bg-primary [&:not(.outside)]:!text-black',
         day_range_end:
-          'rounded-r-8 [&:not(.outside)]:bg-primary [&:not(.outside)]:text-black',
+          '!rounded-r-8 [&:not(.outside)]:!bg-primary [&:not(.outside)]:!text-black',
         day_today: 'border border-white/80',
-        day_outside: 'outside opacity-20',
-        day_disabled: 'text-white/20 opacity-50',
+        day_outside: 'outside !opacity-20',
+        day_disabled: 'hover:!text-white !text-white/20 opacity-50',
         day_range_middle: 'aria-selected:bg-primary/20',
         day_hidden: 'invisible',
         ...classNames,
@@ -52,13 +52,13 @@ export const Calendar = ({
       components={{
         IconLeft: () => (
           <Chevron
-            className="h-16 w-16 rotate-90"
+            className="size-16 rotate-90"
             data-testid="date-picker-left-arrow"
           />
         ),
         IconRight: () => (
           <Chevron
-            className="h-16 w-16 -rotate-90"
+            className="size-16 -rotate-90"
             data-testid="date-picker-right-arrow"
           />
         ),
diff --git a/src/components/common/combobox/index.tsx b/src/components/common/combobox/index.tsx
index 3ef96a25b..a1912eb2e 100644
--- a/src/components/common/combobox/index.tsx
+++ b/src/components/common/combobox/index.tsx
@@ -182,7 +182,7 @@ export const Combobox: FC<ComboboxProps> = (props) => {
         {...getReferenceProps({ ref: refs.setReference })}
         type="button"
         className={cn(
-          'flex items-center gap-8 rounded-full border-2 px-12 py-8 text-12',
+          'text-12 flex items-center gap-8 rounded-full border-2 px-12 py-8',
           'hover:bg-background-800',
           selected.length
             ? 'border-primary active:border-primary-light'
@@ -193,7 +193,7 @@ export const Combobox: FC<ComboboxProps> = (props) => {
         {icon}
         <span className="text-white/60">{label}</span>
         <IconChevron
-          className={cn('h-12 w-12 text-white/60 transition-transform', {
+          className={cn('size-12 text-white/60 transition-transform', {
             'rotate-180': open,
           })}
         />
@@ -206,7 +206,7 @@ export const Combobox: FC<ComboboxProps> = (props) => {
               style={{ ...floatingStyles, ...transition }}
               {...getFloatingProps()}
               id={rootId}
-              className="z-50 flex flex-col gap-8 rounded bg-background-800 p-16"
+              className="bg-background-800 z-50 flex flex-col gap-8 rounded p-16"
               onChange={onChange}
             >
               <div className="flex gap-8 rounded bg-black p-10 focus-within:outline-1">
@@ -214,7 +214,7 @@ export const Combobox: FC<ComboboxProps> = (props) => {
                 <input
                   id={inputId}
                   type="search"
-                  className="border-none bg-transparent text-14 outline-none"
+                  className="text-14 border-none bg-transparent outline-none"
                   aria-label={filterLabel}
                   placeholder={filterLabel}
                   onChange={(e) => filter(e.target.value)}
@@ -223,7 +223,7 @@ export const Combobox: FC<ComboboxProps> = (props) => {
               <button
                 type="button"
                 onClick={reset}
-                className="rounded bg-background-900 p-10 text-12 font-weight-500"
+                className="bg-background-900 text-12 font-weight-500 rounded p-10"
               >
                 Reset Filter
               </button>
@@ -271,7 +271,7 @@ export const Option: FC<OptionProps> = (props) => {
         name={name}
         value={value}
         defaultChecked={checked}
-        className="h-14 w-14"
+        className="size-14"
         tabIndex={checked ? 1 : 0}
       />
       <label htmlFor={id} className={cn('flex items-center gap-8', className)}>
@@ -285,10 +285,10 @@ const Empty = () => {
   return (
     <output className="flex max-w-[200px] flex-col items-center p-16">
       <div className="mb-16 grid place-items-center rounded-full bg-white/40 p-8">
-        <IconSearch className="h-16 w-16 self-center" />
+        <IconSearch className="size-16 self-center" />
       </div>
-      <h3 className="mb-8 text-14 font-weight-500">Nothing found</h3>
-      <p className="text-center text-12 text-white/80">
+      <h3 className="text-14 font-weight-500 mb-8">Nothing found</h3>
+      <p className="text-12 text-center text-white/80">
         Unfortunately we couldn't find what you're looking for.
       </p>
     </output>
diff --git a/src/components/common/datePicker/DateRangePicker.tsx b/src/components/common/datePicker/DateRangePicker.tsx
index d36a4b6bc..13df7b7af 100644
--- a/src/components/common/datePicker/DateRangePicker.tsx
+++ b/src/components/common/datePicker/DateRangePicker.tsx
@@ -62,18 +62,18 @@ export const DateRangePicker = memo((props: Omit<Props, 'setIsOpen'>) => {
       type="button"
       aria-label="Pick date range"
       className={cn(
-        'flex items-center gap-8 rounded-full border-2 px-12 py-8 text-12',
+        'text-12 flex items-center gap-8 rounded-full border-2 px-12 py-8',
         'hover:bg-background-800',
         hasDates
           ? 'border-primary active:border-primary-light'
           : 'border-background-800 hover:border-background-700 active:border-background-600',
         props.disabled &&
-          'cursor-not-allowed border-background-800 hover:border-background-800 hover:bg-transparent active:border-background-800'
+          'border-background-800 hover:border-background-800 active:border-background-800 cursor-not-allowed hover:bg-transparent'
       )}
       data-testid="date-picker-button"
       disabled={props.disabled}
     >
-      <CalendarIcon className="h-14 w-14 text-primary" />
+      <CalendarIcon className="text-primary size-14" />
       <span
         className="justify-self-end text-white/60"
         data-testid="simulation-dates"
@@ -164,7 +164,7 @@ const Content = (props: Props) => {
 
   return (
     <div className="flex flex-col gap-20 p-20">
-      <div className="flex gap-30">
+      <div className="gap-30 flex">
         <div
           role="radiogroup"
           aria-label="presets"
@@ -175,7 +175,7 @@ const Content = (props: Props) => {
               type="button"
               role="radio"
               key={days}
-              className="box-border rounded-8 border-2 border-transparent bg-clip-padding py-8 px-30 text-start text-14 font-weight-500 hover:border-background-700 [&[aria-checked=true]]:bg-black"
+              className="rounded-8 px-30 text-14 font-weight-500 hover:border-background-700 box-border border-2 border-transparent bg-clip-padding py-8 text-start [&[aria-checked=true]]:bg-black"
               onClick={() => handlePreset(days)}
               aria-checked={selectedPreset?.days === days}
               data-testid="date-picker-button"
@@ -255,14 +255,14 @@ export const DatePickerButton = memo(
 
     return (
       <>
-        <CalendarIcon className="h-14 w-14 text-primary" />
+        <CalendarIcon className="text-primary size-14" />
         <span
           className="justify-self-end text-white/60"
           data-testid="simulation-dates"
         >
           {hasDates ? `${startDate} - ${endDate}` : 'Select Date Range'}
         </span>
-        <ChevronIcon className="h-12 w-12 rotate-180 text-white/80" />
+        <ChevronIcon className="size-12 rotate-180 text-white/80" />
       </>
     );
   }
diff --git a/src/components/common/dropdownMenu/index.tsx b/src/components/common/dropdownMenu/index.tsx
index 45ae8c5bc..437195f6d 100644
--- a/src/components/common/dropdownMenu/index.tsx
+++ b/src/components/common/dropdownMenu/index.tsx
@@ -100,7 +100,7 @@ export const DropdownMenu: FC<Props> = ({
               ref={refs.setFloating}
               className={cn(
                 // z-index is above header/footer
-                'z-50 min-w-[200px] rounded bg-background-800 shadow-lg backdrop-blur-2xl',
+                'bg-background-800 z-50 min-w-[200px] rounded shadow-lg backdrop-blur-2xl',
                 className
               )}
               style={{ ...floatingStyles, ...transition }}
diff --git a/src/components/common/forwardArrow.tsx b/src/components/common/forwardArrow.tsx
index 050c8ae5d..2ff49daf8 100644
--- a/src/components/common/forwardArrow.tsx
+++ b/src/components/common/forwardArrow.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { ReactComponent as IconArrowCut } from 'assets/icons/arrow-cut.svg';
 import { ReactComponent as IconArrowFull } from 'assets/icons/arrow.svg';
+import { cn } from 'utils/helpers';
 
 export type ForwardArrowProps = {
   arrowType?: 'full' | 'cut';
@@ -11,7 +12,7 @@ export const ForwardArrow: FC<ForwardArrowProps> = ({
   arrowType = 'cut',
   className = '',
 }) => {
-  const newClassName = `h-12 w-7 ${className}`;
+  const newClassName = cn('h-12 w-7', className);
 
   return arrowType === 'cut' ? (
     <IconArrowCut className={newClassName} />
diff --git a/src/components/common/iconTitleText/IconTitleText.tsx b/src/components/common/iconTitleText/IconTitleText.tsx
index 47f9f2e3d..a013249a7 100644
--- a/src/components/common/iconTitleText/IconTitleText.tsx
+++ b/src/components/common/iconTitleText/IconTitleText.tsx
@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { cn } from 'utils/helpers';
 
 export type IconTitleTextProps = {
   icon: ReactNode;
@@ -31,13 +32,18 @@ export const IconTitleText: FC<IconTitleTextProps> = ({
   return (
     <div className="flex flex-col items-center">
       <div
-        className={`flex h-60 w-60 items-center justify-center rounded-full p-18 ${variantClass}`}
+        className={cn(
+          'p-18 flex size-60 items-center justify-center rounded-full',
+          variantClass
+        )}
       >
         {icon}
       </div>
       <h2 className="my-16 text-center">{title}</h2>
       {text && (
-        <p className="text-secondary text-center font-weight-400">{text}</p>
+        <p className="text-14 font-weight-400 text-center text-white/60">
+          {text}
+        </p>
       )}
     </div>
   );
diff --git a/src/components/common/inputField/Input.tsx b/src/components/common/inputField/Input.tsx
index 2e32eed32..007f12e79 100644
--- a/src/components/common/inputField/Input.tsx
+++ b/src/components/common/inputField/Input.tsx
@@ -1,6 +1,7 @@
 import { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { inputStyles } from 'components/common/inputField/inputStyles';
+import { cn } from 'utils/helpers';
 
 type InputHTMLProps = DetailedHTMLProps<
   InputHTMLAttributes<HTMLInputElement>,
@@ -22,7 +23,7 @@ export const Input: FC<InputProps> = ({
 }) => {
   return (
     <div className="relative w-full">
-      <div className="pointer-events-none absolute top-1/2 left-10 h-20 w-20 -translate-y-1/2 transform">
+      <div className="pointer-events-none absolute left-10 top-1/2 size-20 -translate-y-1/2 transform">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
@@ -32,7 +33,7 @@ export const Input: FC<InputProps> = ({
           <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
         </svg>
       </div>
-      <div className="pointer-events-none absolute top-1/2 right-10 h-20 w-20 -translate-y-1/2 transform">
+      <div className="pointer-events-none absolute right-10 top-1/2 size-20 -translate-y-1/2 transform">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
@@ -43,7 +44,9 @@ export const Input: FC<InputProps> = ({
         </svg>
       </div>
       <input
-        className={inputStyles({ variant, size, fullWidth, class: className })}
+        className={cn(
+          inputStyles({ variant, size, fullWidth, class: className })
+        )}
         {...props}
       />
     </div>
diff --git a/src/components/common/inputField/Label.tsx b/src/components/common/inputField/Label.tsx
index bc88095bb..e796fd781 100644
--- a/src/components/common/inputField/Label.tsx
+++ b/src/components/common/inputField/Label.tsx
@@ -1,6 +1,7 @@
 import { DetailedHTMLProps, FC, LabelHTMLAttributes } from 'react';
 import { labelStyles } from 'components/common/inputField/labelStyles';
 import { VariantProps } from 'class-variance-authority';
+import { cn } from 'utils/helpers';
 
 type LabelHTMLProps = DetailedHTMLProps<
   LabelHTMLAttributes<HTMLLabelElement>,
@@ -19,11 +20,13 @@ export const Label: FC<LabelProps & VariantProps<typeof labelStyles>> = ({
   ...props
 }) => {
   return (
-    <label className={'w-full'} {...props}>
+    <label className="w-full" {...props}>
       {(label || msg) && (
-        <div className={'mb-10 flex justify-between'}>
+        <div className="mb-10 flex justify-between">
           <div>{label}</div>
-          <div className={labelStyles({ variant: props.variant })}>{msg}</div>
+          <div className={cn(labelStyles({ variant: props.variant }))}>
+            {msg}
+          </div>
         </div>
       )}
       {children}
diff --git a/src/components/common/inputField/inputStyles.ts b/src/components/common/inputField/inputStyles.ts
index b398993f2..15ead3a13 100644
--- a/src/components/common/inputField/inputStyles.ts
+++ b/src/components/common/inputField/inputStyles.ts
@@ -30,21 +30,21 @@ export const inputStyles = cva<InputVariants>(
           'outline-offset-2',
           'outline-2',
           'outline-primary',
-          'focus:!outline-primary',
+          'focus:outline-primary',
         ],
         buy: [
           'outline',
           'outline-offset-2',
           'outline-2',
           'outline-buy',
-          'focus:!outline-buy',
+          'focus:outline-buy',
         ],
         sell: [
           'outline',
           'outline-offset-2',
           'outline-2',
           'outline-sell',
-          'focus:!outline-sell',
+          'focus:outline-sell',
         ],
         error: [
           'outline',
diff --git a/src/components/common/noOrder.tsx b/src/components/common/noOrder.tsx
index a44736b5e..a645ee053 100644
--- a/src/components/common/noOrder.tsx
+++ b/src/components/common/noOrder.tsx
@@ -8,10 +8,10 @@ type NoOrdersProps = {
 export const NoOrders: FC<NoOrdersProps> = ({ text = 'No Orders' }) => {
   return (
     <div className="flex flex-col items-center justify-center">
-      <div className="flex h-48 w-48 items-center justify-center self-center rounded-full bg-white/10">
-        <NoOrdersIcon className="aspect-square w-18" />
+      <div className="flex size-48 items-center justify-center self-center rounded-full bg-white/10">
+        <NoOrdersIcon className="w-18 aspect-square" />
       </div>
-      <div className="mt-14 text-18 font-weight-500">{text}</div>
+      <div className="text-18 font-weight-500 mt-14">{text}</div>
     </div>
   );
 };
diff --git a/src/components/common/page/index.tsx b/src/components/common/page/index.tsx
index c4e4433c2..2597d3c36 100644
--- a/src/components/common/page/index.tsx
+++ b/src/components/common/page/index.tsx
@@ -11,7 +11,7 @@ export const Page: FC<{
   return (
     <div
       className={cn(
-        'px-content mx-auto flex max-w-[1280px] flex-grow flex-col pb-30 pt-20 xl:px-50',
+        'px-content pb-30 xl:px-50 mx-auto flex max-w-[1280px] flex-grow flex-col pt-20',
         className
       )}
     >
diff --git a/src/components/common/selectToken/index.tsx b/src/components/common/selectToken/index.tsx
index 213e245fa..cf520b515 100644
--- a/src/components/common/selectToken/index.tsx
+++ b/src/components/common/selectToken/index.tsx
@@ -30,7 +30,7 @@ export const SelectTokenButton: FC<Props> = ({
       type="button"
       data-testid={testId}
       className={cn(
-        'flex items-center gap-8 rounded-12 p-10',
+        'rounded-12 flex items-center gap-8 p-10',
         symbol ? 'bg-black text-white' : 'bg-primary text-black',
         className
       )}
@@ -39,15 +39,15 @@ export const SelectTokenButton: FC<Props> = ({
       {symbol ? (
         <LogoImager alt="Token Logo" src={imgUrl} width="30" height="30" />
       ) : (
-        <div className="grid h-30 w-30 place-items-center rounded-full bg-black">
-          <IconPlus className="h-16 w-16 p-2 text-primary" />
+        <div className="size-30 grid place-items-center rounded-full bg-black">
+          <IconPlus className="text-primary size-16 p-2" />
         </div>
       )}
       <div className="flex-1 text-left">
         {description && <p className="text-12 opacity-90">{description}</p>}
         <p>{symbol ?? text}</p>
       </div>
-      <IconChevron className={cn('h-20 w-20', chevronClassName)} />
+      <IconChevron className={cn('size-20', chevronClassName)} />
     </button>
   );
 };
diff --git a/src/components/common/selectTokens/index.tsx b/src/components/common/selectTokens/index.tsx
index 0ed95214d..65d4d7ee8 100644
--- a/src/components/common/selectTokens/index.tsx
+++ b/src/components/common/selectTokens/index.tsx
@@ -26,15 +26,13 @@ export const SelectTokens: FC<Props> = ({
   middleDisabled,
 }) => {
   return (
-    <div className={'flex items-center justify-between'}>
+    <div className="flex items-center justify-between">
       <button
         onClick={() => onClick0()}
-        className={
-          '-mr-13 flex w-[140px] flex-grow items-center rounded-12 bg-black py-10 px-18'
-        }
+        className="-mr-13 rounded-12 px-18 flex w-[140px] flex-grow items-center bg-black py-10"
       >
-        <LogoImager alt={''} src={imgUrl0} className={'mr-8 h-30 w-30'} />
-        <div className={'mr-auto text-16 font-weight-500'}>
+        <LogoImager alt="" src={imgUrl0} className="size-30 mr-8" />
+        <div className="text-16 font-weight-500 mr-auto">
           {symbol0 ? shortenString(symbol0, '...', 5) : 'Select'}
         </div>
         <IconChevron className="w-14" />
@@ -42,24 +40,20 @@ export const SelectTokens: FC<Props> = ({
       <button
         onClick={() => onMiddleClick?.()}
         disabled={middleDisabled}
-        className={
-          'z-20 flex h-30 w-30 flex-grow-0 items-center justify-center rounded-full bg-background-900 disabled:cursor-not-allowed'
-        }
+        className="size-30 bg-background-900 z-20 flex flex-grow-0 items-center justify-center rounded-full disabled:cursor-not-allowed"
       >
         <IconArrow className={`${middleDisabled && 'opacity-25'}`} />
       </button>
       <button
         onClick={() => onClick1()}
-        className={
-          '-ml-13 flex w-[140px] flex-grow items-center rounded-12 bg-black py-10 px-18'
-        }
+        className="-ml-13 rounded-12 px-18 flex w-[140px] flex-grow items-center bg-black py-10"
       >
         <LogoImager
-          alt={''}
+          alt=""
           src={imgUrl1}
-          className={'mr-8 h-30 w-30 rounded-full'}
+          className="size-30 mr-8 rounded-full"
         />
-        <div className={'mr-auto text-16 font-weight-500'}>
+        <div className="text-16 font-weight-500 mr-auto">
           {symbol1 ? shortenString(symbol1, '...', 5) : 'Select'}
         </div>
         <IconChevron className="w-14" />
diff --git a/src/components/common/switch/index.tsx b/src/components/common/switch/index.tsx
index b5b4b94bd..ebb458195 100644
--- a/src/components/common/switch/index.tsx
+++ b/src/components/common/switch/index.tsx
@@ -2,6 +2,7 @@ import { motion } from 'framer-motion';
 import { BaseHTMLAttributes, DetailedHTMLProps, FC } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { switchStyles } from 'components/common/switch/switchStyles';
+import { cn } from 'utils/helpers';
 
 type SwitchHTMLProps = DetailedHTMLProps<
   BaseHTMLAttributes<HTMLDivElement>,
@@ -24,7 +25,7 @@ export const Switch: FC<SwitchProps> = ({
 }) => {
   return (
     <div
-      className={switchStyles({ variant, size, isOn, class: className })}
+      className={cn(switchStyles({ variant, size, isOn, class: className }))}
       onClick={() => setIsOn(!isOn)}
       {...props}
     >
diff --git a/src/components/common/tabs/TabsMenu.tsx b/src/components/common/tabs/TabsMenu.tsx
index 70767303e..2ba565fe3 100644
--- a/src/components/common/tabs/TabsMenu.tsx
+++ b/src/components/common/tabs/TabsMenu.tsx
@@ -6,6 +6,6 @@ type TabsMenuProps = {
 
 export const TabsMenu: FC<TabsMenuProps> = ({ children }) => {
   return (
-    <div className={'flex space-x-2 rounded-10 bg-black p-2'}>{children}</div>
+    <div className="rounded-10 flex space-x-2 bg-black p-2">{children}</div>
   );
 };
diff --git a/src/components/common/tokensOverlap/index.tsx b/src/components/common/tokensOverlap/index.tsx
index fa971d36b..0d39a4378 100644
--- a/src/components/common/tokensOverlap/index.tsx
+++ b/src/components/common/tokensOverlap/index.tsx
@@ -13,7 +13,7 @@ export const TokensOverlap = ({
 }) => {
   const tokenCount = tokens.length;
   return (
-    <span className={`isolate flex shrink-0 items-center`}>
+    <span className="isolate flex shrink-0 items-center">
       {tokens.slice(0, maxLogos).map((token, index, list) => (
         <LogoImager
           width={size}
@@ -31,7 +31,7 @@ export const TokensOverlap = ({
       ))}
       {tokenCount > maxLogos && (
         <span
-          className="flex h-30 w-30 items-center justify-center rounded-full bg-black text-12"
+          className="size-30 text-12 flex items-center justify-center rounded-full bg-black"
           style={{
             marginLeft: `-${size * 0.3}px`,
           }}
diff --git a/src/components/common/tooltip/FloatTooltip.tsx b/src/components/common/tooltip/FloatTooltip.tsx
index f41a2b4b1..5405f9e78 100644
--- a/src/components/common/tooltip/FloatTooltip.tsx
+++ b/src/components/common/tooltip/FloatTooltip.tsx
@@ -126,7 +126,7 @@ export const FloatTooltipContent = forwardRef<
   return (
     <FloatingPortal>
       <div
-        className="rounded bg-background-800 p-16"
+        className="bg-background-800 rounded p-16"
         ref={ref}
         style={{
           ...context.floatingStyles,
diff --git a/src/components/common/tooltip/Tooltip.tsx b/src/components/common/tooltip/Tooltip.tsx
index e4a4c8a3d..bcbed73c9 100644
--- a/src/components/common/tooltip/Tooltip.tsx
+++ b/src/components/common/tooltip/Tooltip.tsx
@@ -5,6 +5,7 @@ import { Instance } from 'tippy.js';
 import { ReactComponent as IconTooltip } from 'assets/icons/tooltip.svg';
 import ReactDOMServer from 'react-dom/server';
 import { carbonEvents } from 'services/events';
+import { cn } from 'utils/helpers';
 
 interface Props extends TippyProps {
   element: ReactNode;
@@ -29,9 +30,7 @@ export const Tooltip: FC<Props> = ({
   stiffness = 300,
   children = (
     <span>
-      <IconTooltip
-        className={`h-18 w-18 ${iconClassName ? iconClassName : ''}`}
-      />
+      <IconTooltip className={cn('size-18', iconClassName)} />
     </span>
   ),
   ...props
@@ -78,7 +77,10 @@ export const Tooltip: FC<Props> = ({
       delay={500}
       render={(attrs) => (
         <m.div
-          className={`rounded border border-background-800 bg-background-800/30 px-24 py-16 text-14 text-white shadow-lg backdrop-blur-2xl ${className}`}
+          className={cn(
+            'border-background-800 bg-background-800/30 text-14 rounded border px-24 py-16 text-white shadow-lg backdrop-blur-2xl',
+            className
+          )}
           style={{ scale, opacity, maxWidth }}
           data-testid="tippy-tooltip"
           {...attrs}
diff --git a/src/components/common/walletConnect/index.tsx b/src/components/common/walletConnect/index.tsx
index 59525012f..093441aef 100644
--- a/src/components/common/walletConnect/index.tsx
+++ b/src/components/common/walletConnect/index.tsx
@@ -6,13 +6,13 @@ export const WalletConnect = () => {
   return (
     <section
       aria-labelledby="wallet-connect-title"
-      className="flex flex-1 flex-col justify-evenly gap-32 rounded-10 border border-background-800 py-24 px-32 md:mt-32 md:flex-row md:items-center"
+      className="rounded-10 border-background-800 flex flex-1 flex-col justify-evenly gap-32 border px-32 py-24 md:mt-32 md:flex-row md:items-center"
     >
       <article className="flex flex-col justify-center md:w-[360px] md:items-start">
         <h1 id="wallet-connect-title" className="text-30 md:text-36">
           Automate your Trading Strategies
         </h1>
-        <p className="mt-16 mb-24 text-white/60 md:mt-24 md:mb-40">
+        <p className="mb-24 mt-16 text-white/60 md:mb-40 md:mt-24">
           A decentralized protocol for automating on-chain trading strategies.
         </p>
 
@@ -23,8 +23,8 @@ export const WalletConnect = () => {
           Create strategy
         </Link>
       </article>
-      <hr className="border-t border-background-800 md:h-[300px] md:border-r" />
-      <ul className="flex flex-col justify-center gap-30">
+      <hr className="border-background-800 border-t md:h-[300px] md:border-r" />
+      <ul className="gap-30 flex flex-col justify-center">
         {items.map((item, index) => (
           <li className="flex items-center gap-20" key={index}>
             {item.icon}
diff --git a/src/components/common/walletConnect/items.tsx b/src/components/common/walletConnect/items.tsx
index a469c8b55..309aca023 100644
--- a/src/components/common/walletConnect/items.tsx
+++ b/src/components/common/walletConnect/items.tsx
@@ -7,27 +7,27 @@ import { ReactComponent as IconWallet6 } from 'assets/icons/wallet-6.svg';
 
 export const items = [
   {
-    icon: <IconWallet1 className="h-20 w-20 text-primary" />,
+    icon: <IconWallet1 className="text-primary size-20" />,
     title: 'On-chain Limit & Range Orders',
   },
   {
-    icon: <IconWallet2 className="h-20 w-20 text-primary" />,
+    icon: <IconWallet2 className="text-primary size-20" />,
     title: 'Automated and Recurring strategies',
   },
   {
-    icon: <IconWallet3 className="h-20 w-20 text-primary" />,
+    icon: <IconWallet3 className="text-primary size-20" />,
     title: 'Easily Adjustable',
   },
   {
-    icon: <IconWallet4 className="h-20 w-20 text-primary" />,
+    icon: <IconWallet4 className="text-primary size-20" />,
     title: 'Rotating Liquidity',
   },
   {
-    icon: <IconWallet5 className="h-20 w-20 text-primary" />,
+    icon: <IconWallet5 className="text-primary size-20" />,
     title: 'All standard ERC-20 tokens',
   },
   {
-    icon: <IconWallet6 className="h-20 w-20 text-primary" />,
+    icon: <IconWallet6 className="text-primary size-20" />,
     title: 'MEV Resistant',
   },
 ];
diff --git a/src/components/core/error/ErrorNetworkConnection.tsx b/src/components/core/error/ErrorNetworkConnection.tsx
index 0b00c9b4e..136d7d4c2 100644
--- a/src/components/core/error/ErrorNetworkConnection.tsx
+++ b/src/components/core/error/ErrorNetworkConnection.tsx
@@ -5,11 +5,9 @@ export const ErrorNetworkConnection = () => {
   return (
     <ErrorWrapper
       icon={<IconWarning />}
-      title={'Network Error'}
-      text={
-        'Failed to establish RPC connection. Please check your network connection and try again.'
-      }
-      variant={'error'}
+      title="Network Error"
+      text="Failed to establish RPC connection. Please check your network connection and try again."
+      variant="error"
     />
   );
 };
diff --git a/src/components/core/error/ErrorSDKStartSync.tsx b/src/components/core/error/ErrorSDKStartSync.tsx
index e5a7d6b84..543ef1809 100644
--- a/src/components/core/error/ErrorSDKStartSync.tsx
+++ b/src/components/core/error/ErrorSDKStartSync.tsx
@@ -5,11 +5,9 @@ export const ErrorSDKStartSync = () => {
   return (
     <ErrorWrapper
       icon={<IconWarning />}
-      title={'Internal Error'}
-      text={
-        'Data sync using Carbon SDK has failed. Please contact support or try again.'
-      }
-      variant={'error'}
+      title="Internal Error"
+      text="Data sync using Carbon SDK has failed. Please contact support or try again."
+      variant="error"
     />
   );
 };
diff --git a/src/components/core/error/ErrorTokenList.tsx b/src/components/core/error/ErrorTokenList.tsx
index faf3228a5..43ff7ee60 100644
--- a/src/components/core/error/ErrorTokenList.tsx
+++ b/src/components/core/error/ErrorTokenList.tsx
@@ -5,11 +5,9 @@ export const ErrorTokenList = () => {
   return (
     <ErrorWrapper
       icon={<IconWarning />}
-      title={'Network Error'}
-      text={
-        'Failed to fetch token list. Please check your network connection and try again.'
-      }
-      variant={'error'}
+      title="Network Error"
+      text="Failed to fetch token list. Please check your network connection and try again."
+      variant="error"
     />
   );
 };
diff --git a/src/components/core/error/ErrorUnsupportedNetwork.tsx b/src/components/core/error/ErrorUnsupportedNetwork.tsx
index 17ee763fd..ccc8d2f92 100644
--- a/src/components/core/error/ErrorUnsupportedNetwork.tsx
+++ b/src/components/core/error/ErrorUnsupportedNetwork.tsx
@@ -9,16 +9,14 @@ export const ErrorUnsupportedNetwork = () => {
   return (
     <ErrorWrapper
       icon={<IconWarning />}
-      title={'Wrong Network'}
-      text={
-        'Please connect to Ethereum Mainnet using your wallet or the button below'
-      }
-      variant={'error'}
+      title="Wrong Network"
+      text="Please connect to Ethereum Mainnet using your wallet or the button below"
+      variant="error"
     >
-      <Button variant={'white'} fullWidth onClick={switchNetwork}>
+      <Button variant="white" fullWidth onClick={switchNetwork}>
         Change Network
       </Button>
-      <Button variant={'black'} fullWidth onClick={disconnect}>
+      <Button variant="black" fullWidth onClick={disconnect}>
         Disconnect Wallet
       </Button>
     </ErrorWrapper>
diff --git a/src/components/core/error/ErrorUserBlocked.tsx b/src/components/core/error/ErrorUserBlocked.tsx
index ebeda0cc1..dc6f645e3 100644
--- a/src/components/core/error/ErrorUserBlocked.tsx
+++ b/src/components/core/error/ErrorUserBlocked.tsx
@@ -10,17 +10,15 @@ export const ErrorUserBlocked = () => {
   return (
     <ErrorWrapper
       icon={<IconWarning />}
-      title={'Wallet Blocked'}
-      text={
-        'For compliance reasons, this wallet has been blocked from using the Carbon App.'
-      }
-      variant={'error'}
+      title="Wallet Blocked"
+      text="For compliance reasons, this wallet has been blocked from using the Carbon App."
+      variant="error"
     >
-      <div className={'space-y-10'}>
+      <div className="space-y-10">
         <NewTabLink to={externalLinks.treasuryGov} className="w-full">
           <Button fullWidth>Learn More</Button>
         </NewTabLink>
-        <Button variant={'black'} onClick={disconnect} fullWidth>
+        <Button variant="black" onClick={disconnect} fullWidth>
           Logout
         </Button>
       </div>
diff --git a/src/components/core/error/ErrorWrapper.tsx b/src/components/core/error/ErrorWrapper.tsx
index bffb910e4..579d8d744 100644
--- a/src/components/core/error/ErrorWrapper.tsx
+++ b/src/components/core/error/ErrorWrapper.tsx
@@ -13,7 +13,7 @@ type Props = IconTitleTextProps & {
 const DefaultChildren = () => (
   <div>
     <NewTabLink to={externalLinks.faq}>
-      <Button variant={'error'} fullWidth>
+      <Button variant="error" fullWidth>
         Contact Support
       </Button>
     </NewTabLink>
@@ -22,11 +22,7 @@ const DefaultChildren = () => (
 
 export const ErrorWrapper: FC<Props> = ({ children, ...props }) => {
   return (
-    <div
-      className={
-        'mx-auto mt-100 w-[385px] space-y-16 rounded-10 bg-background-900 p-20'
-      }
-    >
+    <div className="mt-100 rounded-10 bg-background-900 mx-auto w-[385px] space-y-16 p-20">
       <IconTitleText {...props} />
       {children ? children : <DefaultChildren />}
     </div>
diff --git a/src/components/core/menu/mainMenu/MainMenuLeft.tsx b/src/components/core/menu/mainMenu/MainMenuLeft.tsx
index 2ce0ed658..5e6b54171 100644
--- a/src/components/core/menu/mainMenu/MainMenuLeft.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuLeft.tsx
@@ -24,10 +24,10 @@ export const MainMenuLeft: FC = () => {
         to="/"
         onClick={() => carbonEvents.navigation.navHomeClick(undefined)}
       >
-        <LogoCarbon className={'w-34'} />
+        <LogoCarbon className="w-34" />
       </Link>
 
-      <div className={'hidden space-x-24 md:block'}>
+      <div className="hidden space-x-24 md:block">
         {menuItems.map(({ label, href }, index) => {
           const isSamePage = isSamePageLink(href);
 
diff --git a/src/components/core/menu/mainMenu/MainMenuRight.tsx b/src/components/core/menu/mainMenu/MainMenuRight.tsx
index e15598c62..7862361f7 100644
--- a/src/components/core/menu/mainMenu/MainMenuRight.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuRight.tsx
@@ -9,7 +9,7 @@ import { useBurgerMenuItems } from './MainMenuRightBurger/useBurgerMenuItems';
 
 const TenderlyForkAlert = () => {
   return IS_TENDERLY_FORK ? (
-    <Button variant={'error'} size={'sm'} className={'px-8'}>
+    <Button variant="error" size="sm">
       Fork
     </Button>
   ) : null;
@@ -20,7 +20,7 @@ export const MainMenuRight: FC = () => {
   const { aboveBreakpoint } = useBreakpoints();
 
   return (
-    <div className={'flex items-center space-x-20'}>
+    <div className="flex items-center space-x-20">
       <TenderlyForkAlert />
       <MainMenuRightNotifications />
       {aboveBreakpoint('md') && (
diff --git a/src/components/core/menu/mainMenu/MainMenuRightBurger/MenuItem.tsx b/src/components/core/menu/mainMenu/MainMenuRightBurger/MenuItem.tsx
index a090b9171..3bc801daa 100644
--- a/src/components/core/menu/mainMenu/MainMenuRightBurger/MenuItem.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuRightBurger/MenuItem.tsx
@@ -1,5 +1,6 @@
 import { FC, ReactElement } from 'react';
 import { ForwardArrow } from 'components/common/forwardArrow';
+import { cn } from 'utils/helpers';
 
 type MenuItemProps = {
   item: {
@@ -22,9 +23,12 @@ export const MenuItem: FC<MenuItemProps> = ({ item }) => {
   return (
     <div
       onClick={() => item.onClick && item.onClick()}
-      className={`text-18 md:text-16 ${
-        disableHoverEffect ? 'p-4' : 'p-10 md:hover:bg-black'
-      } block cursor-pointer rounded-6 md:hover:text-white ${className}`}
+      className={cn(
+        'text-18 md:text-16',
+        disableHoverEffect ? 'p-4' : 'p-10 md:hover:bg-black',
+        'rounded-6 block cursor-pointer md:hover:text-white',
+        className
+      )}
     >
       <div
         className={`${hasSubMenu ? 'flex items-center justify-between' : ''}`}
diff --git a/src/components/core/menu/mainMenu/MainMenuRightBurger/index.tsx b/src/components/core/menu/mainMenu/MainMenuRightBurger/index.tsx
index 7e5efd6f6..c50f8ee5c 100644
--- a/src/components/core/menu/mainMenu/MainMenuRightBurger/index.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuRightBurger/index.tsx
@@ -22,21 +22,18 @@ export const MainMenuRightBurger: FC<{
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       placement="bottom"
-      className="rounded-[10px] p-8 text-16 font-weight-400 text-white"
+      className="text-16 font-weight-400 rounded-[10px] p-8 text-white"
       button={(attr) => (
         <button
           {...attr}
-          className={cn(
-            buttonStyles({ variant: 'secondary' }),
-            'relative !p-0'
-          )}
+          className={cn(buttonStyles({ variant: 'secondary' }), 'relative p-0')}
           onClick={(e) => {
             setIsOpen(true);
             attr.onClick(e);
           }}
         >
-          <span className="flex h-36 w-36 items-center justify-center">
-            <span className="relative flex inline-flex h-36 w-36 items-center justify-center rounded-full">
+          <span className="flex size-36 items-center justify-center">
+            <span className="relative inline-flex size-36 items-center justify-center rounded-full">
               <IconBurger className="h-14" />
             </span>
           </span>
diff --git a/src/components/core/menu/mainMenu/MainMenuRightBurger/useBurgerMenuItems.tsx b/src/components/core/menu/mainMenu/MainMenuRightBurger/useBurgerMenuItems.tsx
index 52e004657..1d5e63e96 100644
--- a/src/components/core/menu/mainMenu/MainMenuRightBurger/useBurgerMenuItems.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuRightBurger/useBurgerMenuItems.tsx
@@ -19,7 +19,7 @@ export type MenuType = 'main' | 'resources' | 'currency';
 
 export type Menu = { title?: string; items: MenuItemType[] };
 
-const iconStyles = 'h-32 w-32 md:h-20 md:w-20';
+const iconStyles = 'size-32 md:size-20';
 
 export const useBurgerMenuItems = () => {
   const { selectedFiatCurrency, setSelectedFiatCurrency, availableCurrencies } =
@@ -58,14 +58,14 @@ export const useBurgerMenuItems = () => {
     },
     {
       content: (
-        <Link className="flex" to={'/terms'}>
+        <Link className="flex" to="/terms">
           Terms of Use
         </Link>
       ),
     },
     {
       content: (
-        <Link className="flex" to={'/privacy'}>
+        <Link className="flex" to="/privacy">
           Privacy Policy
         </Link>
       ),
@@ -117,7 +117,7 @@ export const useBurgerMenuItems = () => {
               <span>{currency}</span>
               <span className="flex items-center">
                 <IconV
-                  className={`invisible h-12 w-12 ${
+                  className={`invisible size-12 ${
                     isCurrencySelected ? '!visible' : ''
                   }`}
                 />
@@ -199,7 +199,7 @@ const CurrencyMenuItemContent = () => {
   return (
     <div className="flex w-full items-center justify-between">
       <span>Currency</span>
-      <span className="mr-10 font-weight-500">{selectedFiatCurrency}</span>
+      <span className="font-weight-500 mr-10">{selectedFiatCurrency}</span>
     </div>
   );
 };
diff --git a/src/components/core/menu/mainMenu/MainMenuRightModals.tsx b/src/components/core/menu/mainMenu/MainMenuRightModals.tsx
index 7bd1e6477..d06ed2667 100644
--- a/src/components/core/menu/mainMenu/MainMenuRightModals.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuRightModals.tsx
@@ -10,8 +10,8 @@ export const MainMenuRightModals: FC = () => {
       {modals.minimized.map((m) => (
         <Button
           key={m.id}
-          variant={'error'}
-          size={'sm'}
+          variant="error"
+          size="sm"
           onClick={() => maximizeModal(m.id)}
         >
           {m.key}
diff --git a/src/components/core/menu/mainMenu/MainMenuRightNotifications.tsx b/src/components/core/menu/mainMenu/MainMenuRightNotifications.tsx
index 679bd0d06..6ce21bc13 100644
--- a/src/components/core/menu/mainMenu/MainMenuRightNotifications.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuRightNotifications.tsx
@@ -15,18 +15,18 @@ export const MainMenuRightNotifications: FC = () => {
 
   return (
     <Button
-      variant={'secondary'}
-      className={'relative !p-0'}
+      variant="secondary"
+      className="relative p-0"
       onClick={() => {
         carbonEvents.navigation.navNotificationClick(undefined);
         openModal('notifications', undefined);
       }}
     >
-      <span className="flex h-36 w-36 items-center justify-center">
+      <span className="flex size-36 items-center justify-center">
         {hasPendingTx && (
-          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-error/30 opacity-75"></span>
+          <span className="bg-error/30 absolute inline-flex size-full animate-ping rounded-full opacity-75"></span>
         )}
-        <span className="relative flex inline-flex h-36 w-36 items-center justify-center rounded-full">
+        <span className="relative inline-flex size-36 items-center justify-center rounded-full">
           <IconBell />
         </span>
       </span>
diff --git a/src/components/core/menu/mainMenu/MainMenuRightWallet.tsx b/src/components/core/menu/mainMenu/MainMenuRightWallet.tsx
index ac7075089..74bfa4fbf 100644
--- a/src/components/core/menu/mainMenu/MainMenuRightWallet.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuRightWallet.tsx
@@ -156,17 +156,17 @@ const ConnectedMenu: FC = () => {
   return (
     <div
       role="menu"
-      className="w-[180px] space-y-10 font-weight-400 text-white"
+      className="font-weight-400 w-[180px] space-y-10 text-white"
     >
       {isSupportedNetwork ? (
         <>
-          <div className="flex w-full items-center space-x-10 p-8 font-weight-400">
+          <div className="font-weight-400 flex w-full items-center space-x-10 p-8">
             <IconETHLogo className="w-16" />
             <span>Ethereum Network</span>
           </div>
           <button
             role="menuitem"
-            className="flex w-full items-center space-x-10 rounded-6 p-8 hover:bg-black"
+            className="rounded-6 flex w-full items-center space-x-10 p-8 hover:bg-black"
             onClick={copyAddress}
           >
             <IconCopy className="w-16" />
@@ -176,7 +176,7 @@ const ConnectedMenu: FC = () => {
       ) : (
         <button
           role="menuitem"
-          className="flex w-full rounded-6 p-8 text-error/80 hover:bg-black hover:text-error"
+          className="rounded-6 text-error/80 hover:text-error flex w-full p-8 hover:bg-black"
           onClick={switchNetwork}
         >
           Switch Network
@@ -184,7 +184,7 @@ const ConnectedMenu: FC = () => {
       )}
       <button
         role="menuitem"
-        className="flex w-full items-center space-x-10 rounded-6 p-8 hover:bg-black"
+        className="rounded-6 flex w-full items-center space-x-10 p-8 hover:bg-black"
         onClick={onDisconnect}
       >
         <IconDisconnect className="w-16" />
diff --git a/src/components/core/menu/mainMenu/MainMenuTradePairs.tsx b/src/components/core/menu/mainMenu/MainMenuTradePairs.tsx
index fe1e80c34..190ab8581 100644
--- a/src/components/core/menu/mainMenu/MainMenuTradePairs.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuTradePairs.tsx
@@ -25,7 +25,7 @@ export const MainMenuTradePairs: FC<Props> = ({ baseToken, quoteToken }) => {
         });
       }}
       data-testid="select-trade-pair"
-      className="flex items-center gap-10 rounded-full bg-background-900 py-5 pl-15 pr-15"
+      className="pl-15 pr-15 flex items-center gap-10 rounded-full py-5"
     >
       <TokensOverlap tokens={[baseToken, quoteToken]} size={30} />
       <span className="text-14 font-weight-500">{`${baseToken.symbol} - ${quoteToken.symbol}`}</span>
diff --git a/src/components/core/menu/mainMenu/MainMenuTradeSettings.tsx b/src/components/core/menu/mainMenu/MainMenuTradeSettings.tsx
index 8ff83f3a3..d209f879f 100644
--- a/src/components/core/menu/mainMenu/MainMenuTradeSettings.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuTradeSettings.tsx
@@ -16,8 +16,8 @@ export const MainMenuTradeSettings: FC<Props> = ({ baseToken, quoteToken }) => {
 
   return (
     <Button
-      variant={'secondary'}
-      className={'flex w-40 items-center justify-center !p-0'}
+      variant="secondary"
+      className="flex w-40 items-center justify-center p-0"
       onClick={() => {
         openModal('tradeSettings', { base: baseToken, quote: quoteToken });
         carbonEvents.trade.tradeSettingsClick({
@@ -26,7 +26,7 @@ export const MainMenuTradeSettings: FC<Props> = ({ baseToken, quoteToken }) => {
         });
       }}
     >
-      <IconCog className={'h-20 w-20'} />
+      <IconCog className="size-20" />
     </Button>
   );
 };
diff --git a/src/components/core/menu/mainMenu/MainMenuTradeSwitch.tsx b/src/components/core/menu/mainMenu/MainMenuTradeSwitch.tsx
index 5b7776411..2a03b3fe9 100644
--- a/src/components/core/menu/mainMenu/MainMenuTradeSwitch.tsx
+++ b/src/components/core/menu/mainMenu/MainMenuTradeSwitch.tsx
@@ -26,11 +26,11 @@ export const MainMenuTradeSwitch: FC<Props> = ({ baseToken, quoteToken }) => {
 
   return (
     <Button
-      variant={'secondary'}
-      className={'flex w-40 items-center justify-center !p-0'}
+      variant="secondary"
+      className="flex w-40 items-center justify-center p-0"
       onClick={onClick}
     >
-      <IconSwitch className={'w-14'} />
+      <IconSwitch className="w-14" />
     </Button>
   );
 };
diff --git a/src/components/core/menu/mobileMenu/MobileMenu.tsx b/src/components/core/menu/mobileMenu/MobileMenu.tsx
index 007f28e6a..6a97d4f7d 100644
--- a/src/components/core/menu/mobileMenu/MobileMenu.tsx
+++ b/src/components/core/menu/mobileMenu/MobileMenu.tsx
@@ -15,7 +15,7 @@ export const MobileMenu = () => {
   };
 
   return (
-    <footer className={`mobile-menu`}>
+    <footer className="mobile-menu">
       {menuItems.map(({ label, href }, index) => {
         const isSamePage = isSamePageLink(href);
 
@@ -38,7 +38,7 @@ export const MobileMenu = () => {
       })}
       <div
         onClick={() => openModal('burgerMenu', undefined)}
-        className="flex h-30 w-24 cursor-pointer items-center hover:text-white"
+        className="h-30 flex w-24 cursor-pointer items-center hover:text-white"
       >
         <IconDots />
       </div>
diff --git a/src/components/debug/DebugImposter.tsx b/src/components/debug/DebugImposter.tsx
index 5cf243980..0abe8e90b 100644
--- a/src/components/debug/DebugImposter.tsx
+++ b/src/components/debug/DebugImposter.tsx
@@ -17,12 +17,12 @@ export const DebugImposter = () => {
   return (
     <div
       className={
-        'flex flex-col items-center space-y-20 rounded-18 bg-background-900 p-20'
+        'rounded-18 bg-background-900 flex flex-col items-center space-y-20 p-20'
       }
     >
       <h2>Set Imposter Account</h2>
       <InputUserAccount
-        label={'Imposter Account'}
+        label="Imposter Account"
         value={input}
         onChange={(e) => setInput(e.target.value)}
       />
diff --git a/src/components/debug/DebugNotifications.tsx b/src/components/debug/DebugNotifications.tsx
index 437cde1fa..8bcfe7880 100644
--- a/src/components/debug/DebugNotifications.tsx
+++ b/src/components/debug/DebugNotifications.tsx
@@ -7,7 +7,7 @@ export const DebugNotifications = () => {
   return (
     <div
       className={
-        'flex flex-col items-center space-y-20 rounded-18 bg-background-900 p-20'
+        'rounded-18 bg-background-900 flex flex-col items-center space-y-20 p-20'
       }
     >
       <h2>Notifications</h2>
@@ -23,7 +23,7 @@ export const DebugNotifications = () => {
           })
         }
       >
-        Save
+        Pending
       </Button>
 
       <Button
@@ -39,7 +39,7 @@ export const DebugNotifications = () => {
           })
         }
       >
-        Save
+        Success
       </Button>
 
       <Button
@@ -55,7 +55,47 @@ export const DebugNotifications = () => {
           })
         }
       >
-        Save
+        Fail
+      </Button>
+
+      <Button
+        onClick={() =>
+          dispatchNotification('activity', {
+            activity: {
+              action: 'create',
+              strategy: {
+                id: '10000',
+                base: {
+                  address: '0xeeeeeeeeeeeeeeee',
+                  decimals: 18,
+                  symbol: 'ETH',
+                },
+                quote: {
+                  address: '0xeeeeeeeeeeeeeeee',
+                  decimals: 18,
+                  symbol: 'USDC',
+                },
+                owner: '0x312213123111312',
+                buy: {
+                  min: '1000',
+                  max: '2000',
+                  budget: '10',
+                },
+                sell: {
+                  min: '1000',
+                  max: '2000',
+                  budget: '10',
+                },
+              },
+              blockNumber: 10000,
+              txHash: '0x1231231323123112313111232123',
+              timestamp: 31223121,
+              date: new Date('14-04-2024'),
+            },
+          })
+        }
+      >
+        Activity Create
       </Button>
 
       <Button onClick={() => dispatchNotification('reject', undefined)}>
diff --git a/src/components/debug/DebugOrderBook.tsx b/src/components/debug/DebugOrderBook.tsx
index 842ca429e..52b43a8de 100644
--- a/src/components/debug/DebugOrderBook.tsx
+++ b/src/components/debug/DebugOrderBook.tsx
@@ -18,11 +18,11 @@ export const DebugOrderBook = () => {
   return (
     <div
       className={
-        'flex flex-col items-center space-y-20 rounded-18 bg-background-900 p-20'
+        'rounded-18 bg-background-900 flex flex-col items-center space-y-20 p-20'
       }
     >
       <h2>Reset to defaults</h2>
-      <Label label={'Steps'}>
+      <Label label="Steps">
         <Input
           type="number"
           value={steps}
@@ -31,7 +31,7 @@ export const DebugOrderBook = () => {
         />
       </Label>
 
-      <Label label={'Depth Chart Buckets'}>
+      <Label label="Depth Chart Buckets">
         <Input
           type="number"
           value={depthChartBuckets}
@@ -40,7 +40,7 @@ export const DebugOrderBook = () => {
         />
       </Label>
 
-      <Label label={'Order Book Buckets'}>
+      <Label label="Order Book Buckets">
         <Input
           type="number"
           value={orderBookBuckets}
diff --git a/src/components/debug/DebugTenderlyRPC.tsx b/src/components/debug/DebugTenderlyRPC.tsx
index 96771892f..1926b2e81 100644
--- a/src/components/debug/DebugTenderlyRPC.tsx
+++ b/src/components/debug/DebugTenderlyRPC.tsx
@@ -33,7 +33,7 @@ export const DebugTenderlyRPC = () => {
   return (
     <form
       onSubmit={submit}
-      className="flex flex-col items-center space-y-20 rounded-18 bg-background-900 p-20"
+      className="rounded-18 bg-background-900 flex flex-col items-center space-y-20 p-20"
     >
       <h2>Set Tenderly RPC</h2>
       <Label label="RPC URL">
diff --git a/src/components/debug/DebugTransferNFT.tsx b/src/components/debug/DebugTransferNFT.tsx
index 2c7a2fd8f..2a91646a9 100644
--- a/src/components/debug/DebugTransferNFT.tsx
+++ b/src/components/debug/DebugTransferNFT.tsx
@@ -44,26 +44,26 @@ export const DebugTransferNFT = () => {
   return (
     <div
       className={
-        'flex flex-col items-center space-y-20 rounded-18 bg-background-900 p-20'
+        'rounded-18 bg-background-900 flex flex-col items-center space-y-20 p-20'
       }
     >
       <h2>Transfer Strategy NFT</h2>
-      <Label label={'Strategy ID'}>
+      <Label label="Strategy ID">
         <Input
-          type={'number'}
+          type="number"
           value={inputId}
           onChange={(e) => setInputId(e.target.value)}
           fullWidth
         />
       </Label>
       <InputUserAccount
-        label={'Recipient'}
+        label="Recipient"
         value={inputRecipient}
         onChange={(e) => setInputRecipient(e.target.value)}
       />
 
-      {isSuccess && <p className={'text-primary'}>Success!</p>}
-      {isError && <p className={'text-error'}>Error!</p>}
+      {isSuccess && <p className="text-primary">Success!</p>}
+      {isError && <p className="text-error">Error!</p>}
       <Button onClick={handleOnClick} disabled={isLoading}>
         {isLoading ? 'loading' : 'Confirm'}
       </Button>
diff --git a/src/components/debug/DebugWeb3.tsx b/src/components/debug/DebugWeb3.tsx
index b3a25c8f7..f546aa7fa 100644
--- a/src/components/debug/DebugWeb3.tsx
+++ b/src/components/debug/DebugWeb3.tsx
@@ -15,38 +15,38 @@ export const DebugWeb3 = () => {
   return (
     <div
       className={
-        'flex flex-col items-center space-y-20 rounded-18 bg-background-900 p-20'
+        'rounded-18 bg-background-900 flex flex-col items-center space-y-20 p-20'
       }
     >
       <h2>Web3 Status</h2>
-      <div className={'w-full space-y-3 rounded-10 bg-black p-10'}>
-        <div className={'flex justify-between'}>
+      <div className="rounded-10 w-full space-y-3 bg-black p-10">
+        <div className="flex justify-between">
           <div>ChainID:</div>
           <div>{chainId}</div>
         </div>
-        <div className={'flex justify-between'}>
+        <div className="flex justify-between">
           <div>Network Active:</div>
           <div>{isNetworkActive ? 'true' : 'false'}</div>
         </div>
         {networkError && (
-          <div className={'flex flex-col justify-between'}>
+          <div className="flex flex-col justify-between">
             <div>Network Error:</div>
             <div>{networkError}</div>
           </div>
         )}
-        <div className={'flex justify-between'}>
+        <div className="flex justify-between">
           <div>Tenderly Fork:</div>
           <div>{IS_TENDERLY_FORK ? 'true' : 'false'}</div>
         </div>
-        <div className={'flex justify-between'}>
+        <div className="flex justify-between">
           <div>User:</div>
           <div>{user ? shortenString(user) : 'Not logged in'}</div>
         </div>
-        <div className={'flex justify-between'}>
+        <div className="flex justify-between">
           <div>Imposter:</div>
           <div>{isImposter ? 'true' : 'false'}</div>
         </div>
-        <div className={'flex justify-between'}>
+        <div className="flex justify-between">
           <div>Blocked:</div>
           <div>{isUserBlocked ? 'true' : 'false'}</div>
         </div>
diff --git a/src/components/explorer/ExplorerSearch.tsx b/src/components/explorer/ExplorerSearch.tsx
index bf982a701..343eece87 100644
--- a/src/components/explorer/ExplorerSearch.tsx
+++ b/src/components/explorer/ExplorerSearch.tsx
@@ -102,7 +102,7 @@ export const _ExplorerSearch: FC = () => {
   };
 
   return (
-    <div className={'relative'}>
+    <div className="relative">
       <form
         role="search"
         onSubmit={submitHandler}
@@ -128,7 +128,7 @@ export const _ExplorerSearch: FC = () => {
           <div className="shrink-0">
             <DropdownMenu
               placement="bottom-start"
-              className="mt-10 -ml-17 p-10"
+              className="-ml-17 mt-10 p-10"
               button={(attr) => <ExplorerSearchDropdownButton {...attr} />}
             >
               <ExplorerSearchDropdownItems setSearch={setSearch} />
@@ -145,21 +145,17 @@ export const _ExplorerSearch: FC = () => {
 
         <Button
           type="submit"
-          variant={'success'}
-          size={'md'}
-          className={'w-40 shrink-0 !px-0 md:w-[180px]'}
+          variant="success"
+          size="md"
+          className="w-40 shrink-0 px-0 md:w-[180px]"
         >
-          <IconSearch className={'h-16 w-16 md:mr-8'} />
-          <span className={'hidden md:block'}>Search</span>
+          <IconSearch className="size-16 md:mr-8" />
+          <span className="hidden md:block">Search</span>
         </Button>
       </form>
       {isInvalidAddress && (
-        <div
-          className={
-            'absolute mt-4 flex items-center font-mono text-14 text-error'
-          }
-        >
-          <IconWarning className={'mr-10 h-16 w-16'} />
+        <div className="text-14 text-error absolute mt-4 flex items-center font-mono">
+          <IconWarning className="mr-10 size-16" />
           Invalid Wallet Address
         </div>
       )}
diff --git a/src/components/explorer/ExplorerSearchDropdownButton.tsx b/src/components/explorer/ExplorerSearchDropdownButton.tsx
index 36dd953fc..d18ef416b 100644
--- a/src/components/explorer/ExplorerSearchDropdownButton.tsx
+++ b/src/components/explorer/ExplorerSearchDropdownButton.tsx
@@ -14,22 +14,22 @@ export const ExplorerSearchDropdownButton = forwardRef<
     <button
       ref={ref}
       type="button"
-      className="flex items-center gap-10 font-weight-500"
+      className="font-weight-500 flex items-center gap-10"
       {...props}
     >
       {type === 'wallet' && (
         <>
-          <IconWallet className="h-18 w-18 text-primary" />
+          <IconWallet className="size-18 text-primary" />
           <span className="hidden md:inline">Wallet</span>
         </>
       )}
       {type === 'token-pair' && (
         <>
-          <IconTokenPair className="h-18 w-18 text-primary" />
+          <IconTokenPair className="size-18 text-primary" />
           <span className="hidden md:inline">Token Pair</span>
         </>
       )}
-      <IconChevron className="h-16 w-16 text-white/40" />
+      <IconChevron className="size-16 text-white/40" />
     </button>
   );
 });
diff --git a/src/components/explorer/ExplorerSearchDropdownItems.tsx b/src/components/explorer/ExplorerSearchDropdownItems.tsx
index 096eb262b..10379f1ec 100644
--- a/src/components/explorer/ExplorerSearchDropdownItems.tsx
+++ b/src/components/explorer/ExplorerSearchDropdownItems.tsx
@@ -24,7 +24,7 @@ export const ExplorerSearchDropdownItems: FC<Props> = ({ setSearch }) => {
   ];
 
   return (
-    <div className={'flex w-full flex-col space-y-10 font-weight-400'}>
+    <div className="font-weight-400 flex w-full flex-col space-y-10">
       {items.map(({ label, type, active }) => (
         <Link
           key={type}
diff --git a/src/components/explorer/ExplorerTabs.tsx b/src/components/explorer/ExplorerTabs.tsx
index 1f9163dc2..09d1cb8be 100644
--- a/src/components/explorer/ExplorerTabs.tsx
+++ b/src/components/explorer/ExplorerTabs.tsx
@@ -30,20 +30,20 @@ export const ExplorerTabs = () => {
       label: 'Overview',
       href: '/explore/$type/$slug',
       params: { type, slug },
-      icon: <IconOverview className="h-18 w-18" />,
+      icon: <IconOverview className="size-18" />,
       badge: strategies?.length || 0,
     },
     {
       label: 'Portfolio',
       href: '/explore/$type/$slug/portfolio',
       params: { type, slug },
-      icon: <IconPieChart className="h-18 w-18" />,
+      icon: <IconPieChart className="size-18" />,
     },
     {
       label: 'Activity',
       href: '/explore/$type/$slug/activity',
       params: { type, slug },
-      icon: <IconActivity className="h-18 w-18" />,
+      icon: <IconActivity className="size-18" />,
     },
   ];
 
diff --git a/src/components/explorer/suggestion/SuggestionEmpty.tsx b/src/components/explorer/suggestion/SuggestionEmpty.tsx
index 0dd2a5c59..dafdd143b 100644
--- a/src/components/explorer/suggestion/SuggestionEmpty.tsx
+++ b/src/components/explorer/suggestion/SuggestionEmpty.tsx
@@ -9,11 +9,11 @@ export const SuggestionEmpty: FC = () => {
       aria-labelledby={emptyId}
       className={cn(suggestionClasses, 'px-20')}
     >
-      <h3 className="text-secondary mb-8 font-weight-500">0 Results</h3>
-      <h4 id={emptyId} className={'font-weight-500'}>
+      <h3 className="text-14 font-weight-500 mb-8 text-white/60">0 Results</h3>
+      <h4 id={emptyId} className="font-weight-500">
         We couldn't find any strategies
       </h4>
-      <p className={'text-secondary'}>
+      <p className="text-14 text-white/60">
         Please make sure your search input is correct or try searching by a
         different token pair
       </p>
diff --git a/src/components/explorer/suggestion/SuggestionList.tsx b/src/components/explorer/suggestion/SuggestionList.tsx
index ed4e42f74..b99a918d2 100644
--- a/src/components/explorer/suggestion/SuggestionList.tsx
+++ b/src/components/explorer/suggestion/SuggestionList.tsx
@@ -1,11 +1,9 @@
 import { Dispatch, FC, SetStateAction } from 'react';
 import { suggestionClasses } from './utils';
-import { cn } from 'utils/helpers';
 import { PairLogoName } from 'components/common/PairLogoName';
 import { TradePair } from 'libs/modals/modals/ModalTradeTokenList';
 import { Link } from '@tanstack/react-router';
 import { toPairSlug } from 'utils/pairSearch';
-import styles from './suggestion.module.css';
 
 interface Props {
   listboxId: string;
@@ -16,7 +14,7 @@ interface Props {
 export const SuggestionList: FC<Props> = (props) => {
   return (
     <div role="listbox" id={props.listboxId} className={suggestionClasses}>
-      <h3 className="text-secondary ml-20 mb-8 font-weight-500">
+      <h3 className="text-14 font-weight-500 mb-8 ml-20 text-white/60">
         {props.filteredPairs.length} Results
       </h3>
       {props.filteredPairs.map((pair) => {
@@ -28,10 +26,7 @@ export const SuggestionList: FC<Props> = (props) => {
             onMouseDown={(e) => e.preventDefault()} // prevent blur on click
             onClick={() => props.setOpen(false)}
             role="option"
-            className={cn(
-              styles.option,
-              'flex cursor-pointer items-center space-x-10 px-30 py-10 hover:bg-white/20'
-            )}
+            className="px-30 flex cursor-pointer items-center space-x-10 py-10  hover:bg-white/20 aria-selected:bg-white/10"
             to="/explore/$type/$slug"
             params={params}
             search={{}}
diff --git a/src/components/explorer/suggestion/suggestion.module.css b/src/components/explorer/suggestion/suggestion.module.css
deleted file mode 100644
index 08e954730..000000000
--- a/src/components/explorer/suggestion/suggestion.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* @todo(#774) use Tailwind aria-selected operator once Tailwind is up-to-date */
-.option[aria-selected="true"] {
-  @apply bg-white/10;
-}
diff --git a/src/components/simulator/input/BuySellBlockNew/BudgetSection.tsx b/src/components/simulator/input/BuySellBlockNew/BudgetSection.tsx
index f33ddd6dc..b564a2f90 100644
--- a/src/components/simulator/input/BuySellBlockNew/BudgetSection.tsx
+++ b/src/components/simulator/input/BuySellBlockNew/BudgetSection.tsx
@@ -52,8 +52,8 @@ export const BudgetSection: FC<Props> = ({
 
   return (
     <fieldset className="flex flex-col gap-8">
-      <legend className="mb-11 flex items-center gap-6 text-14 font-weight-500">
-        <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+      <legend className="text-14 font-weight-500 mb-11 flex items-center gap-6">
+        <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
           2
         </span>
         <Tooltip
@@ -79,7 +79,7 @@ export const BudgetSection: FC<Props> = ({
           <span className="text-white/80">Set {capitalize(type)} Budget</span>
         </Tooltip>
         {isBudgetOptional && (
-          <span className="ml-8 font-weight-500 text-white/60">Optional</span>
+          <span className="font-weight-500 ml-8 text-white/60">Optional</span>
         )}
       </legend>
       <TokenInputField
@@ -98,9 +98,9 @@ export const BudgetSection: FC<Props> = ({
           htmlFor={inputId}
           role="alert"
           aria-live="polite"
-          className="flex items-center gap-10 font-mono text-12 text-error"
+          className="text-12 text-error flex items-center gap-10 font-mono"
         >
-          <IconWarning className="h-12 w-12" />
+          <IconWarning className="size-12" />
           <span className="flex-1">Insufficient balance</span>
         </output>
       )}
diff --git a/src/components/simulator/input/BuySellBlockNew/Header.tsx b/src/components/simulator/input/BuySellBlockNew/Header.tsx
index 06f7d7d44..f157c15f5 100644
--- a/src/components/simulator/input/BuySellBlockNew/Header.tsx
+++ b/src/components/simulator/input/BuySellBlockNew/Header.tsx
@@ -5,6 +5,7 @@ import {
 import { FC, ReactNode } from 'react';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { Token } from 'libs/tokens';
+import { cn } from 'utils/helpers';
 
 interface Props {
   children: ReactNode;
@@ -40,15 +41,17 @@ export const BuySellHeader: FC<Props> = (props) => {
   return (
     <header className="flex items-center justify-between">
       {children}
-      <div className="flex items-center gap-10 text-14">
+      <div className="text-14 flex items-center gap-10">
         <div className="flex items-center rounded-[100px] bg-black p-2">
           <button
             type="button"
             tabIndex={!isRange ? -1 : 0}
             onClick={setLimit}
-            className={`rounded-40 font-weight-500 ${
-              !isRange ? 'bg-background-900' : 'text-secondary'
-            } px-10 py-4`}
+            className={cn(
+              'rounded-40 font-weight-500',
+              !isRange ? 'bg-background-900' : 'text-white/60',
+              'px-10 py-4'
+            )}
             data-testid="tab-limit"
           >
             Limit
@@ -57,9 +60,11 @@ export const BuySellHeader: FC<Props> = (props) => {
             type="button"
             tabIndex={isRange ? -1 : 0}
             onClick={setRange}
-            className={`rounded-40 font-weight-500 ${
-              isRange ? 'bg-background-900' : 'text-secondary'
-            } px-10 py-4`}
+            className={cn(
+              'rounded-40 font-weight-500',
+              isRange ? 'bg-background-900' : 'text-white/60',
+              'px-10 py-4'
+            )}
             data-testid="tab-range"
           >
             Range
@@ -67,6 +72,7 @@ export const BuySellHeader: FC<Props> = (props) => {
         </div>
         <Tooltip
           sendEventOnMount={{ buy }}
+          iconClassName="text-white/60"
           element={
             <>
               This section will define the order details in which you are
diff --git a/src/components/simulator/input/BuySellBlockNew/LimitRangeSection.tsx b/src/components/simulator/input/BuySellBlockNew/LimitRangeSection.tsx
index c914c7dae..d606e8d3f 100644
--- a/src/components/simulator/input/BuySellBlockNew/LimitRangeSection.tsx
+++ b/src/components/simulator/input/BuySellBlockNew/LimitRangeSection.tsx
@@ -66,7 +66,7 @@ export const LimitRangeSection: FC<Props> = ({
 
   return (
     <fieldset className="flex flex-col gap-8">
-      <legend className="mb-11 flex items-center gap-6 text-14 font-weight-500">
+      <legend className="text-14 font-weight-500 mb-11 flex items-center gap-6">
         {inputTitle}
       </legend>
       {isRange ? (
diff --git a/src/components/simulator/input/BuySellBlockNew/index.tsx b/src/components/simulator/input/BuySellBlockNew/index.tsx
index c7ddc74b2..6d549d614 100644
--- a/src/components/simulator/input/BuySellBlockNew/index.tsx
+++ b/src/components/simulator/input/BuySellBlockNew/index.tsx
@@ -52,7 +52,7 @@ export const BuySellBlock: FC<Props> = ({
 
   const inputTitle = (
     <>
-      <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+      <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
         1
       </span>
       <Tooltip
@@ -97,7 +97,7 @@ export const BuySellBlock: FC<Props> = ({
   return (
     <section
       aria-labelledby={titleId}
-      className={`flex flex-col gap-20 rounded-10 border-l-2 bg-background-900 p-20 ${
+      className={`rounded-10 bg-background-900 flex flex-col gap-20 border-l-2 p-20 ${
         buy
           ? 'border-buy/50 focus-within:border-buy'
           : 'border-sell/50 focus-within:border-sell'
@@ -109,7 +109,7 @@ export const BuySellBlock: FC<Props> = ({
           <Tooltip sendEventOnMount={{ buy }} element={tooltipText}>
             <span>{buy ? 'Buy Low' : 'Sell High'}</span>
           </Tooltip>
-          <LogoImager alt="Token" src={base.logoURI} className="h-18 w-18" />
+          <LogoImager alt="Token" src={base.logoURI} className="size-18" />
           <span>{base.symbol}</span>
         </h3>
       </BuySellHeader>
@@ -118,7 +118,7 @@ export const BuySellBlock: FC<Props> = ({
       {warningMsg && <WarningMessageWithIcon message={warningMsg} />}
       {!ignoreMarketPriceWarning && (
         <FullOutcome
-          price={''}
+          price=""
           min={order.min}
           max={order.max}
           budget={order.budget}
diff --git a/src/components/simulator/input/SimInputChart.tsx b/src/components/simulator/input/SimInputChart.tsx
index 03f7e7dd3..5db2c9bc1 100644
--- a/src/components/simulator/input/SimInputChart.tsx
+++ b/src/components/simulator/input/SimInputChart.tsx
@@ -105,9 +105,9 @@ export const SimInputChart = ({
   );
 
   return (
-    <div className="align-stretch top-120 fixed right-20 grid h-[calc(100vh-220px)] min-h-[500px] w-[calc(100%-500px)] flex-1 grid-rows-[auto_1fr] justify-items-stretch rounded-12 bg-background-900 p-20">
+    <div className="align-stretch top-120 rounded-12 bg-background-900 fixed right-20 grid h-[calc(100vh-220px)] min-h-[500px] w-[calc(100%-500px)] flex-1 grid-rows-[auto_1fr] justify-items-stretch p-20">
       <div className="mb-20 flex items-center justify-between">
-        <h2 className="mr-20 text-20 font-weight-500">Price Chart</h2>
+        <h2 className="text-20 font-weight-500 mr-20">Price Chart</h2>
         <DateRangePicker
           defaultStart={startOfDay(sub(new Date(), { days: 364 }))}
           defaultEnd={startOfDay(new Date())}
@@ -135,7 +135,7 @@ export const SimInputChart = ({
       {!!data && (
         <D3ChartWrapper
           settings={chartSettings}
-          className="self-stretch rounded-12 bg-black"
+          className="rounded-12 self-stretch bg-black"
           data-testid="price-chart"
         >
           {(dms) => (
@@ -167,13 +167,13 @@ const ErrorMsg = ({ base, quote }: { base?: string; quote?: string }) => {
         text="Unfortunately, price history for this pair is not available and cannot be simulated."
         variant="success"
       />
-      <p className="my-20 text-center text-14 text-white/60">
+      <p className="text-14 my-20 text-center text-white/60">
         However, you can{' '}
         <span className="font-weight-500 text-white">Create a Strategy</span>
       </p>
 
       <Link
-        to={'/strategies/create'}
+        to="/strategies/create"
         search={{ base, quote }}
         className={buttonStyles({ variant: 'success' })}
       >
diff --git a/src/components/simulator/input/SimInputStrategyType.tsx b/src/components/simulator/input/SimInputStrategyType.tsx
index 6550c1edc..b196c63d4 100644
--- a/src/components/simulator/input/SimInputStrategyType.tsx
+++ b/src/components/simulator/input/SimInputStrategyType.tsx
@@ -21,13 +21,13 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
   const items: ItemProps[] = [
     {
       label: 'recurring',
-      svg: <IconTwoRanges className="h-16 w-37" />,
+      svg: <IconTwoRanges className="w-37 h-16" />,
       tooltipText:
         'Create buy and sell orders (limit or range) that are linked together. Newly acquired funds automatically rotate between them, creating an endless trading cycle without need for manual intervention.',
     },
     {
       label: 'overlapping',
-      svg: <IconOverlappingStrategy className="h-16 w-37" />,
+      svg: <IconOverlappingStrategy className="w-37 h-16" />,
       tooltipText:
         'A concentrated position where you buy and sell in a custom price range, used to create a bid-ask spread that moves as the market does.',
     },
@@ -39,9 +39,9 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
       key="simulatorTypeSelection"
     >
       <header className="mb-16 flex items-center justify-between">
-        <h2 className="m-0 text-18 font-weight-500">Strategy Type</h2>
+        <h2 className="text-18 font-weight-500 m-0">Strategy Type</h2>
       </header>
-      <article role="tablist" className={`grid grid-cols-2 gap-8`}>
+      <article role="tablist" className="grid grid-cols-2 gap-8">
         {items.map(({ label, svg, tooltipText }) => (
           <Link
             role="tab"
@@ -51,7 +51,7 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
             to={`/simulate/${label}`}
             search={{ baseToken, quoteToken }}
             className={cn(
-              'flex h-full w-full flex-row items-center justify-center gap-8 rounded-10 bg-black px-8 py-16 text-14 font-weight-500 outline-white/60',
+              'rounded-10 text-14 font-weight-500 flex size-full flex-row items-center justify-center gap-8 bg-black px-8 py-16 outline-white/60',
               'md:px-12',
               'focus-visible:outline focus-visible:outline-1'
             )}
@@ -74,7 +74,7 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
                   </span>
                   <Tooltip
                     element={<div>{tooltipText}</div>}
-                    iconClassName="!h-12 !w-12 text-white/60"
+                    iconClassName="size-12 text-white/60"
                   />
                 </>
               );
diff --git a/src/components/simulator/input/SimInputTokenSelection.tsx b/src/components/simulator/input/SimInputTokenSelection.tsx
index 90ea4d1fa..335961890 100644
--- a/src/components/simulator/input/SimInputTokenSelection.tsx
+++ b/src/components/simulator/input/SimInputTokenSelection.tsx
@@ -27,13 +27,13 @@ export const SimInputTokenSelection: FC<Props> = ({
 
   return (
     <section
-      className="flex flex-col gap-16 rounded-10 bg-background-900 p-16"
+      className="rounded-10 bg-background-900 flex flex-col gap-16 p-16"
       key="simulatorTokenSelection"
     >
       <header className="flex items-center justify-between">
-        <h2 className="m-0 text-18 font-weight-500">Token Pair</h2>
+        <h2 className="text-18 font-weight-500 m-0">Token Pair</h2>
         <Tooltip
-          iconClassName="h-18 w-18 text-white/60"
+          iconClassName="size-18 text-white/60"
           element={
             <p>
               Selecting the tokens you would like to create a simulation for.
@@ -47,7 +47,7 @@ export const SimInputTokenSelection: FC<Props> = ({
           }
         />
       </header>
-      <article className="flex flex-row items-center -space-x-10 font-weight-500">
+      <article className="font-weight-500 flex flex-row items-center -space-x-10">
         <SelectTokenButton
           chevronClassName="h-7.5 w-13"
           symbol={base?.symbol}
@@ -63,7 +63,7 @@ export const SimInputTokenSelection: FC<Props> = ({
           }
           className={cn(
             'h-[50px] flex-1 pl-10 pr-20',
-            noPriceHistory && 'border-2 border-warning'
+            noPriceHistory && 'border-warning border-2'
           )}
           onClick={() => {
             openModal('tokenLists', {
@@ -81,7 +81,7 @@ export const SimInputTokenSelection: FC<Props> = ({
         />
         <button
           type="button"
-          className="relative z-10 grid h-40 w-40 flex-shrink-0 -rotate-90 place-items-center rounded-full border-[5px] border-background-900 bg-black"
+          className="border-background-900 relative z-10 grid h-40 w-40 flex-shrink-0 -rotate-90 place-items-center rounded-full border-[5px] bg-black"
           onClick={() => {
             navigate({
               search: { baseToken: quoteToken, quoteToken: baseToken },
@@ -107,7 +107,7 @@ export const SimInputTokenSelection: FC<Props> = ({
           }
           className={cn(
             'h-[50px] flex-1 pl-16 pr-16',
-            noPriceHistory && 'border-2 border-warning'
+            noPriceHistory && 'border-warning border-2'
           )}
           onClick={() => {
             openModal('tokenLists', {
diff --git a/src/components/simulator/input/d3Chart/xAxis.tsx b/src/components/simulator/input/d3Chart/xAxis.tsx
index f59ffee8f..e18d72950 100644
--- a/src/components/simulator/input/d3Chart/xAxis.tsx
+++ b/src/components/simulator/input/d3Chart/xAxis.tsx
@@ -50,7 +50,7 @@ export const XAxis = ({ xScale, dms }: Props) => {
         y2={dms.boundedHeight}
         x1={-bandwidthOffset}
         x2={dms.width}
-        className={'stroke-background-800'}
+        className="stroke-background-800"
       />
     </>
   );
diff --git a/src/components/simulator/input/overlapping/CreateOverlappingStrategy.tsx b/src/components/simulator/input/overlapping/CreateOverlappingStrategy.tsx
index cf4fa73dd..44332081c 100644
--- a/src/components/simulator/input/overlapping/CreateOverlappingStrategy.tsx
+++ b/src/components/simulator/input/overlapping/CreateOverlappingStrategy.tsx
@@ -159,10 +159,10 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
 
   return (
     <>
-      <article className="grid grid-flow-col grid-cols-[auto_auto] grid-rows-2 gap-8 rounded-10 bg-background-900 p-20">
-        <h4 className="flex items-center gap-8 text-14 font-weight-500">
+      <article className="rounded-10 bg-background-900 grid grid-flow-col grid-cols-[auto_auto] grid-rows-2 gap-8 p-20">
+        <h4 className="text-14 font-weight-500 flex items-center gap-8">
           Discover Overlapping Strategies
-          <span className="rounded-8 bg-primary-dark px-8 py-4 text-10 text-primary">
+          <span className="rounded-8 bg-primary-dark text-10 text-primary px-8 py-4">
             NEW
           </span>
         </h4>
@@ -172,19 +172,19 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
         <a
           href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy"
           target="_blank"
-          className="row-span-2 flex items-center gap-4 self-center justify-self-end text-12 font-weight-500 text-primary"
+          className="text-12 font-weight-500 text-primary row-span-2 flex items-center gap-4 self-center justify-self-end"
           rel="noreferrer"
         >
           Learn More
           <IconLink className="h-12 w-12" />
         </a>
       </article>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header className="flex items-center gap-8">
-          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+          <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
             1
           </span>
-          <h3 className="flex-1 text-18 font-weight-500">
+          <h3 className="text-18 font-weight-500 flex-1">
             Set Price Range&nbsp;
             <span className="text-white/40">
               ({quote?.symbol} per 1 {base?.symbol})
@@ -192,7 +192,7 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           </h3>
           <Tooltip
             element="Indicate the strategy exact buy and sell prices."
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="text-white/60"
           />
         </header>
         {base && quote && (
@@ -208,15 +208,15 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           />
         )}
       </article>
-      <article className="flex flex-col gap-10 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-10 p-20">
         <header className="mb-10 flex items-center gap-8 ">
-          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+          <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
             2
           </span>
-          <h3 className="flex-1 text-18 font-weight-500">Indicate Spread</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Indicate Spread</h3>
           <Tooltip
             element="The difference between the highest bidding (Sell) price, and the lowest asking (Buy) price"
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="text-white/60"
           />
         </header>
         <OverlappingStrategySpread
@@ -228,15 +228,15 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           setSpread={setSpread}
         />
       </article>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header className="flex items-center gap-8 ">
-          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+          <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
             3
           </span>
-          <h3 className="flex-1 text-18 font-weight-500">Set Budgets</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Set Budgets</h3>
           <Tooltip
             element="Indicate the budget you would like to allocate to the strategy. Note that in order to maintain the overlapping behavior, the 2nd budget indication will be calculated using the prices, spread and budget values."
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="text-white/60"
           />
         </header>
         <CreateOverlappingStrategyBudget
diff --git a/src/components/simulator/input/overlapping/CreateOverlappingStrategyBudget.tsx b/src/components/simulator/input/overlapping/CreateOverlappingStrategyBudget.tsx
index 1be51176f..4dc79f149 100644
--- a/src/components/simulator/input/overlapping/CreateOverlappingStrategyBudget.tsx
+++ b/src/components/simulator/input/overlapping/CreateOverlappingStrategyBudget.tsx
@@ -114,11 +114,11 @@ export const CreateOverlappingStrategyBudget: FC<Props> = (props) => {
           <a
             href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy#overlapping-budget-dynamics"
             target="_blank"
-            className="inline-flex items-center gap-4 text-12 font-weight-500 text-primary"
+            className="text-12 font-weight-500 text-primary inline-flex items-center gap-4"
             rel="noreferrer"
           >
             Learn More
-            <IconLink className="h-12 w-12" />
+            <IconLink className="size-12" />
           </a>
         </p>
       )}
@@ -137,11 +137,11 @@ const Explanation: FC<{ base?: Token; buy?: boolean }> = ({ base, buy }) => {
       <a
         href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy#overlapping-budget-dynamics"
         target="_blank"
-        className="inline-flex items-center gap-4 text-12 font-weight-500 text-primary"
+        className="text-12 font-weight-500 text-primary inline-flex items-center gap-4"
         rel="noreferrer"
       >
         Learn More
-        <IconLink className="h-12 w-12" />
+        <IconLink className="size-12" />
       </a>
     </p>
   );
diff --git a/src/components/simulator/mobile-placeholder.tsx b/src/components/simulator/mobile-placeholder.tsx
index c8c1e99db..63ced3a19 100644
--- a/src/components/simulator/mobile-placeholder.tsx
+++ b/src/components/simulator/mobile-placeholder.tsx
@@ -4,9 +4,9 @@ import { buttonStyles } from 'components/common/button/buttonStyles';
 
 export const SimulatorMobilePlaceholder = () => {
   return (
-    <section className="my-40 mx-auto flex w-[300px] flex-col items-center gap-20 text-center ">
-      <div className="rounded-full bg-background-800 p-12">
-        <IconInfo className="h-24 w-24 text-white/60" />
+    <section className="mx-auto my-40 flex w-[300px] flex-col items-center gap-20 text-center ">
+      <div className="bg-background-800 rounded-full p-12">
+        <IconInfo className="size-24 text-white/60" />
       </div>
       <h1 className="text-18">Device not supported</h1>
       <p className="text-14 text-white/80">
diff --git a/src/components/simulator/result/SimResultChart.tsx b/src/components/simulator/result/SimResultChart.tsx
index 67d0ba0b8..3828686aa 100644
--- a/src/components/simulator/result/SimResultChart.tsx
+++ b/src/components/simulator/result/SimResultChart.tsx
@@ -25,7 +25,7 @@ export const SimResultChart = ({ state, simulationType }: Props) => {
       <div
         role="alert"
         aria-live="polite"
-        className="mx-auto my-10 flex h-[400px] flex-col items-center justify-center gap-20 rounded-10 bg-black"
+        className="rounded-10 mx-auto my-10 flex h-[400px] flex-col items-center justify-center gap-20 bg-black"
       >
         <IconTitleText
           icon={<IconWarning />}
@@ -120,7 +120,7 @@ export const SimResultChart = ({ state, simulationType }: Props) => {
 };
 
 const Loading = () => (
-  <div className="grid h-[400px] place-items-center rounded-10 bg-black py-10">
+  <div className="rounded-10 grid h-[400px] place-items-center bg-black py-10">
     <CarbonLogoLoading className="h-[100px]" />
   </div>
 );
diff --git a/src/components/simulator/result/SimResultChartAnimation.tsx b/src/components/simulator/result/SimResultChartAnimation.tsx
index ba3a57629..ec96d1d4f 100644
--- a/src/components/simulator/result/SimResultChartAnimation.tsx
+++ b/src/components/simulator/result/SimResultChartAnimation.tsx
@@ -53,7 +53,7 @@ export const SimResultChartAnimation = ({
     <>
       <D3ChartWrapper
         settings={chartSettings}
-        className="min-h-[350px] w-full border-t border-background-800"
+        className="border-background-800 min-h-[350px] w-full border-t"
         data-testid="chart-animation-price"
       >
         {(dms) => (
@@ -64,7 +64,7 @@ export const SimResultChartAnimation = ({
       <div className={`grid ${gridCols} min-h-[250px] items-stretch`}>
         <D3ChartWrapper
           settings={chartPerformanceSettings}
-          className="w-full border-t border-r border-background-800"
+          className="border-background-800 w-full border-r border-t"
           data-testid="chart-animation-performance"
         >
           {(dms) => <D3ChartSimulatorPerformance data={data} dms={dms} />}
@@ -72,7 +72,7 @@ export const SimResultChartAnimation = ({
 
         <D3ChartWrapper
           settings={chartSettingsBalance}
-          className="w-full border-t border-background-800"
+          className="border-background-800 w-full border-t"
           data-testid="chart-animation-balance"
         >
           {(dms) => (
diff --git a/src/components/simulator/result/SimResultChartControls.tsx b/src/components/simulator/result/SimResultChartControls.tsx
index 83241f2d5..5c47cc7d6 100644
--- a/src/components/simulator/result/SimResultChartControls.tsx
+++ b/src/components/simulator/result/SimResultChartControls.tsx
@@ -59,7 +59,7 @@ export const SimResultChartControls = () => {
         button={(attr) => (
           <button
             {...attr}
-            className="h-20 min-w-[20px] place-items-center rounded-[6px] px-2 text-14 hover:bg-black"
+            className="text-14 h-20 min-w-[20px] place-items-center rounded-[6px] px-2 hover:bg-black"
             onClick={(e) => {
               setIsOpen(true);
               attr.onClick(e);
@@ -77,7 +77,7 @@ export const SimResultChartControls = () => {
               key={`${index}_${speed}`}
               role="menuitem"
               aria-label={`Playback Speed: ${speed}`}
-              className="flex w-full rounded-6 py-8 px-12 text-left text-14 text-white/80 hover:bg-black"
+              className="rounded-6 text-14 flex w-full px-12 py-8 text-left text-white/80 hover:bg-black"
               onClick={() => setSpeed(speed)}
               data-testid={`set-speed-${speed}`}
             >
@@ -93,9 +93,9 @@ export const SimResultChartControls = () => {
         data-testid="animation-controls-play&pause"
       >
         {!isRunning || isStopped ? (
-          <PlayIcon className="h-16 w-16" />
+          <PlayIcon className="size-16" />
         ) : (
-          <PauseIcon className="h-16 w-16" />
+          <PauseIcon className="size-16" />
         )}
       </button>
       <input
@@ -113,7 +113,7 @@ export const SimResultChartControls = () => {
         onClick={end}
         data-testid="animation-controls-end"
       >
-        <SkipIcon className="h-16 w-16" />
+        <SkipIcon className="size-16" />
       </button>
       <button
         aria-label="replay"
@@ -121,7 +121,7 @@ export const SimResultChartControls = () => {
         onClick={replay}
         data-testid="animation-controls-replay"
       >
-        <ReplayIcon className="h-16 w-16" />
+        <ReplayIcon className="size-16" />
       </button>
     </article>
   );
diff --git a/src/components/simulator/result/SimResultChartDownload.tsx b/src/components/simulator/result/SimResultChartDownload.tsx
index a6f268137..3c356a376 100644
--- a/src/components/simulator/result/SimResultChartDownload.tsx
+++ b/src/components/simulator/result/SimResultChartDownload.tsx
@@ -40,14 +40,14 @@ export const SimResultChartDownload = ({
       <button
         className={cn(
           buttonStyles({ variant: 'black' }),
-          'flex h-40 w-40 items-center justify-center border-background-900 p-0'
+          'border-background-900 flex size-40 items-center justify-center p-0'
         )}
         onClick={() => {
           downloadCSV({ data, baseSymbol, quoteSymbol, simulationType });
         }}
         aria-label="Download Simulation"
       >
-        <IconDownload className="h-18 w-18" />
+        <IconDownload className="size-18" />
       </button>
     </Tooltip>
   );
diff --git a/src/components/simulator/result/SimResultChartHeader.tsx b/src/components/simulator/result/SimResultChartHeader.tsx
index 90332e65c..62fb559d6 100644
--- a/src/components/simulator/result/SimResultChartHeader.tsx
+++ b/src/components/simulator/result/SimResultChartHeader.tsx
@@ -73,7 +73,7 @@ export const SimResultChartHeader = ({
   }, [endUnix, onDatePickerConfirm, simulationType, startUnix]);
 
   return (
-    <section className="flex flex-wrap items-center justify-evenly gap-8 py-20 px-24 md:justify-between">
+    <section className="flex flex-wrap items-center justify-evenly gap-8 px-24 py-20 md:justify-between">
       {DateRangePickerMemo}
 
       {!showSummary && <SimResultChartControls />}
diff --git a/src/components/simulator/result/SimResultChartSummary.tsx b/src/components/simulator/result/SimResultChartSummary.tsx
index f19c26d27..6fe9bb5f9 100644
--- a/src/components/simulator/result/SimResultChartSummary.tsx
+++ b/src/components/simulator/result/SimResultChartSummary.tsx
@@ -28,11 +28,11 @@ export const SimResultChartSummary = ({
 }: Props) => {
   return (
     <div
-      className="flex w-full border-t border-background-800"
+      className="border-background-800 flex w-full border-t"
       data-testid="chart-summary"
     >
       <p
-        className="-rotate-180 border-l border-background-800 p-8 text-center font-mono text-12 text-white/60"
+        className="border-background-800 text-12 -rotate-180 border-l p-8 text-center font-mono text-white/60"
         style={{ writingMode: 'vertical-lr', textOrientation: 'mixed' }}
       >
         Price ({quoteToken.symbol} per {baseToken.symbol})
@@ -46,7 +46,7 @@ export const SimResultChartSummary = ({
         )}
       </D3ChartWrapper>
       <p
-        className="-rotate-180 border-r border-background-800 p-8 text-center font-mono text-12 text-white/60"
+        className="border-background-800 text-12 -rotate-180 border-r p-8 text-center font-mono text-white/60"
         style={{ writingMode: 'vertical-lr', textOrientation: 'mixed' }}
       >
         Portfolio Value ({quoteToken.symbol})
diff --git a/src/components/simulator/result/SimResultChartTabs.tsx b/src/components/simulator/result/SimResultChartTabs.tsx
index 6995aebd2..1af740760 100644
--- a/src/components/simulator/result/SimResultChartTabs.tsx
+++ b/src/components/simulator/result/SimResultChartTabs.tsx
@@ -12,13 +12,13 @@ export const SimResultChartTabs = ({ showSummary, setShowSummary }: Props) => {
   const tabs = [
     {
       label: 'animation',
-      icon: <IconAnimation className="h-18 w-18" />,
+      icon: <IconAnimation className="size-18" />,
       isActive: () => !showSummary,
       click: () => setShowSummary(false),
     },
     {
       label: 'summary',
-      icon: <IconSummary className="h-18 w-18" />,
+      icon: <IconSummary className="size-18" />,
       isActive: () => showSummary,
       click: () => setShowSummary(true),
     },
@@ -27,7 +27,7 @@ export const SimResultChartTabs = ({ showSummary, setShowSummary }: Props) => {
   return (
     <nav
       aria-label="Simulation Tabs"
-      className="max-w-40 flex h-40 w-full gap-2 rounded-full border-2 border-background-900 p-4 text-14 md:w-auto"
+      className="border-background-900 text-14 flex h-40 w-full max-w-40 gap-2 rounded-full border-2 p-4 md:w-auto"
     >
       {tabs.map(({ label, icon, isActive, click }) => {
         const active = isActive();
@@ -36,7 +36,7 @@ export const SimResultChartTabs = ({ showSummary, setShowSummary }: Props) => {
             key={label}
             onClick={click}
             className={cn(
-              'flex w-full items-center justify-center gap-4 rounded-full py-5 px-16',
+              'flex w-full items-center justify-center gap-4 rounded-full px-16 py-5',
               active ? 'bg-white/10' : 'bg-transparent text-white/60'
             )}
             data-testid={`chart-tab-${label}`}
diff --git a/src/components/simulator/result/SimResultSummary.tsx b/src/components/simulator/result/SimResultSummary.tsx
index d207fc27b..be61eb740 100644
--- a/src/components/simulator/result/SimResultSummary.tsx
+++ b/src/components/simulator/result/SimResultSummary.tsx
@@ -27,7 +27,7 @@ export const SimResultSummary = ({
     <header className="my-8 grid gap-8 xl:grid-cols-2">
       <section
         className={cn(
-          'flex min-h-[72px] items-center justify-between gap-8 rounded-10 bg-black py-10 px-16',
+          'rounded-10 flex min-h-[72px] items-center justify-between gap-8 bg-black px-16 py-10',
           {
             'animate-pulse': isLoading,
           }
@@ -51,7 +51,7 @@ export const SimResultSummary = ({
       </section>
       <section
         className={cn(
-          'grid min-h-[72px] grid-cols-4 items-center gap-8 rounded-10 bg-black py-10 px-16',
+          'rounded-10 grid min-h-[72px] grid-cols-4 items-center gap-8 bg-black px-16 py-10',
           {
             'animate-pulse': isLoading,
           }
diff --git a/src/components/simulator/result/SimResultSummaryGains.tsx b/src/components/simulator/result/SimResultSummaryGains.tsx
index a86290dda..d7388f518 100644
--- a/src/components/simulator/result/SimResultSummaryGains.tsx
+++ b/src/components/simulator/result/SimResultSummaryGains.tsx
@@ -23,11 +23,11 @@ export const SimResultSummaryGains: FC<Props> = ({
   );
 
   return (
-    <article className="col-span-2 flex flex-col rounded-8">
+    <article className="rounded-8 col-span-2 flex flex-col">
       <Tooltip element={<TooltipContent />}>
-        <h4 className="text-secondary flex items-center gap-4 font-mono !text-12">
+        <h4 className="text-12 flex items-center gap-4 font-mono text-white/60">
           Estimated Gains
-          <IconTooltip className="h-10 w-10" />
+          <IconTooltip className="size-10" />
         </h4>
       </Tooltip>
       <AnimatedNumber
diff --git a/src/components/simulator/result/SimResultSummaryRoi.tsx b/src/components/simulator/result/SimResultSummaryRoi.tsx
index c719025d4..59936f873 100644
--- a/src/components/simulator/result/SimResultSummaryRoi.tsx
+++ b/src/components/simulator/result/SimResultSummaryRoi.tsx
@@ -24,11 +24,11 @@ export const SimResultSummaryRoi = ({ portfolioRoi }: Props) => {
   const color = portfolioRoi >= 0 ? 'text-success' : 'text-error';
 
   return (
-    <article className="flex flex-col rounded-8 border-background-800">
+    <article className="rounded-8 border-background-800 flex flex-col">
       <Tooltip element={<TooltipContent />}>
-        <h4 className="text-secondary flex items-center gap-4 font-mono !text-12">
+        <h4 className="text-12 flex items-center gap-4 font-mono text-white/60">
           ROI
-          <IconTooltip className="h-10 w-10" />
+          <IconTooltip className="size-10" />
         </h4>
       </Tooltip>
       <AnimatedNumber
@@ -47,7 +47,7 @@ const TooltipContent = () => (
   <>
     <NewTabLink to={externalLinks.roiLearnMore} className="text-primary">
       <span className="align-middle">Learn how ROI is calculated.</span>
-      <IconLink className="mb-1 inline-block h-14 w-14 align-middle" />
+      <IconLink className="mb-1 inline-block size-14 align-middle" />
     </NewTabLink>
   </>
 );
diff --git a/src/components/simulator/result/SimResultSummaryTable.tsx b/src/components/simulator/result/SimResultSummaryTable.tsx
index 6d0e201f3..2c8460210 100644
--- a/src/components/simulator/result/SimResultSummaryTable.tsx
+++ b/src/components/simulator/result/SimResultSummaryTable.tsx
@@ -30,7 +30,7 @@ export const SimResultSummaryTable = ({
 
   return (
     <article className="grid grid-cols-[auto,auto,auto,auto] grid-rows-2 items-center justify-evenly gap-x-8 gap-y-4">
-      <Arrow className="h-16 w-16 -rotate-90 text-sell" />
+      <Arrow className="text-sell size-16 -rotate-90" />
       <span data-testid="table-sell-order-rates">
         {isSellLimitOrder ? sellMin : `${sellMin} - ${sellMax}`} {quoteSymbol}{' '}
         per {baseSymbol}
@@ -39,7 +39,7 @@ export const SimResultSummaryTable = ({
       <span data-testid="table-sell-order-budget">
         {baseBudget} {baseSymbol}
       </span>
-      <Arrow className="h-16 w-16 text-buy" />
+      <Arrow className="text-buy size-16" />
       <span data-testid="table-buy-order-rates">
         {isBuyLimitOrder ? buyMin : `${buyMin} - ${buyMax}`} {quoteSymbol} per{' '}
         {baseSymbol}
diff --git a/src/components/simulator/result/SimResultSummaryTokens.tsx b/src/components/simulator/result/SimResultSummaryTokens.tsx
index c575d1ffa..486768d8c 100644
--- a/src/components/simulator/result/SimResultSummaryTokens.tsx
+++ b/src/components/simulator/result/SimResultSummaryTokens.tsx
@@ -13,15 +13,15 @@ export const SimResultSummaryTokens = ({
   strategyType,
 }: Props) => {
   return (
-    <article className="flex flex-shrink-0 items-center gap-15">
+    <article className="gap-15 flex flex-shrink-0 items-center">
       <TokensOverlap tokens={[baseToken!, quoteToken!]} size={30} />
       <div className="flex flex-col">
-        <h2 className="flex gap-6 text-18">
+        <h2 className="text-18 flex gap-6">
           {baseToken.symbol}
-          <span className="self-align-center text-secondary !text-16">/</span>
+          <span className="self-align-center text-16 text-white/60">/</span>
           {quoteToken.symbol}
         </h2>
-        <h3 className="flex items-center gap-8 font-mono text-12 capitalize text-white/60">
+        <h3 className="text-12 flex items-center gap-8 font-mono capitalize text-white/60">
           {strategyType}
         </h3>
       </div>
diff --git a/src/components/simulator/result/d3Charts/D3ChartSimulatorBalance.tsx b/src/components/simulator/result/d3Charts/D3ChartSimulatorBalance.tsx
index e9a50fbfe..0ecab097c 100644
--- a/src/components/simulator/result/d3Charts/D3ChartSimulatorBalance.tsx
+++ b/src/components/simulator/result/d3Charts/D3ChartSimulatorBalance.tsx
@@ -188,7 +188,7 @@ const Bar = ({
         y={y - 10}
         fill="currentColor"
         style={{ textAnchor: 'middle' }}
-        className="font-mono text-14 text-white/60"
+        className="text-14 font-mono text-white/60"
       >
         {prettifyNumber(label)} {symbol}
       </text>
diff --git a/src/components/simulator/result/d3Charts/D3ChartSimulatorPrice.tsx b/src/components/simulator/result/d3Charts/D3ChartSimulatorPrice.tsx
index 90cf0defe..93f3fa0c8 100644
--- a/src/components/simulator/result/d3Charts/D3ChartSimulatorPrice.tsx
+++ b/src/components/simulator/result/d3Charts/D3ChartSimulatorPrice.tsx
@@ -38,8 +38,8 @@ export const D3ChartSimulatorPrice = ({ dms, data, bounds }: Props) => {
         formatter={(value) => prettifyNumber(value)}
       />
 
-      <D3SimPriceRange type={'bid'} {...rangeProps} />
-      <D3SimPriceRange type={'ask'} {...rangeProps} />
+      <D3SimPriceRange type="bid" {...rangeProps} />
+      <D3SimPriceRange type="ask" {...rangeProps} />
 
       <D3LinePath
         data={data}
diff --git a/src/components/simulator/result/d3Charts/D3ChartSimulatorSummary.tsx b/src/components/simulator/result/d3Charts/D3ChartSimulatorSummary.tsx
index df01ccc7a..c0cfb6ee2 100644
--- a/src/components/simulator/result/d3Charts/D3ChartSimulatorSummary.tsx
+++ b/src/components/simulator/result/d3Charts/D3ChartSimulatorSummary.tsx
@@ -72,12 +72,8 @@ export const D3ChartSimulatorSummary = ({ dms, data, bounds }: Props) => {
         dms={dms}
         formatter={(value) => prettifyNumber(value)}
       />
-      {!legend.bid.isDisabled && (
-        <D3SimPriceRange type={'bid'} {...rangeProps} />
-      )}
-      {!legend.ask.isDisabled && (
-        <D3SimPriceRange type={'ask'} {...rangeProps} />
-      )}
+      {!legend.bid.isDisabled && <D3SimPriceRange type="bid" {...rangeProps} />}
+      {!legend.ask.isDisabled && <D3SimPriceRange type="ask" {...rangeProps} />}
       {!legend.price.isDisabled && (
         <D3LinePath data={data} xAcc={xAcc} yAcc={yLeft.accessor('price')} />
       )}
diff --git a/src/components/simulator/result/d3Charts/D3SimPriceRange.tsx b/src/components/simulator/result/d3Charts/D3SimPriceRange.tsx
index f5b1bd3aa..923376258 100644
--- a/src/components/simulator/result/d3Charts/D3SimPriceRange.tsx
+++ b/src/components/simulator/result/d3Charts/D3SimPriceRange.tsx
@@ -35,7 +35,7 @@ export const D3SimPriceRange = ({
         y0Acc={yAcc}
         y1Acc={() => dashedLine}
         data={data}
-        fill={'grey'}
+        fill="grey"
         fillOpacity={0.25}
       />
       <D3AreaPath
diff --git a/src/components/strategies/FullOutcome.tsx b/src/components/strategies/FullOutcome.tsx
index 0837f69a6..c77b1d987 100644
--- a/src/components/strategies/FullOutcome.tsx
+++ b/src/components/strategies/FullOutcome.tsx
@@ -24,7 +24,7 @@ export const FullOutcome: FC<FullOutcomeProps> = (props) => {
       {hasBudgetUpdate && 'Based on updated budget, '}
       If the order is 100% filled, you will receive&nbsp;
       <b
-        className="break-words font-mono font-weight-600"
+        className="font-weight-600 break-words font-mono"
         data-testid="outcome-value"
       >
         {prettifyNumber(amount)}&nbsp;
@@ -32,7 +32,7 @@ export const FullOutcome: FC<FullOutcomeProps> = (props) => {
       </b>
       &nbsp;at an average price of&nbsp;
       <b
-        className="break-words font-mono font-weight-600"
+        className="font-weight-600 break-words font-mono"
         data-testid="outcome-quote"
       >
         {prettifyNumber(mean)}&nbsp;
@@ -43,10 +43,10 @@ export const FullOutcome: FC<FullOutcomeProps> = (props) => {
         href="https://faq.carbondefi.xyz/order-execution/100-fill-estimation"
         target="_blank"
         rel="noreferrer"
-        className="inline-flex items-center gap-4 font-weight-500 text-primary"
+        className="font-weight-500 text-primary inline-flex items-center gap-4"
       >
         <span>Learn More</span>
-        <IconLink className="inline h-12 w-12" />
+        <IconLink className="inline size-12" />
       </a>
     </p>
   );
diff --git a/src/components/strategies/StrategyPageTabs.tsx b/src/components/strategies/StrategyPageTabs.tsx
index 048da3a31..2e5987af9 100644
--- a/src/components/strategies/StrategyPageTabs.tsx
+++ b/src/components/strategies/StrategyPageTabs.tsx
@@ -19,7 +19,7 @@ export const StrategyPageTabs = ({ currentPathname, tabs }: Props) => {
   return (
     <nav
       aria-label="Strategy Panels"
-      className="flex w-full gap-2 rounded-full border-2 border-background-900 p-6 text-14 md:w-auto"
+      className="border-background-900 text-14 flex w-full gap-2 rounded-full border-2 p-6 md:w-auto"
     >
       {tabs.map(({ label, href, params, icon, badge }) => {
         const active = match({
@@ -46,7 +46,7 @@ export const StrategyPageTabs = ({ currentPathname, tabs }: Props) => {
             {icon}
             <span>{label}</span>
             {!!badge && (
-              <span className="grid h-18 w-18 place-items-center rounded-full bg-white/10 text-10">
+              <span className="size-18 text-10 grid place-items-center rounded-full bg-white/10">
                 {badge}
               </span>
             )}
diff --git a/src/components/strategies/common/AllocatedBudget.tsx b/src/components/strategies/common/AllocatedBudget.tsx
index d0bdb2c25..174d8d04b 100644
--- a/src/components/strategies/common/AllocatedBudget.tsx
+++ b/src/components/strategies/common/AllocatedBudget.tsx
@@ -13,7 +13,7 @@ interface DepositProps {
 export const DepositAllocatedBudget: FC<DepositProps> = (props) => {
   const { currentBudget, token, buy } = props;
   return (
-    <div className="flex items-center justify-between gap-16 rounded-8 border border-background-800 py-8 px-16 font-mono text-12 font-weight-500">
+    <div className="rounded-8 border-background-800 text-12 font-weight-500 flex items-center justify-between gap-16 border px-16 py-8 font-mono">
       <p className="flex items-center gap-6">
         Allocated Budget
         <Tooltip
@@ -46,7 +46,7 @@ export const WithdrawAllocatedBudget: FC<WithdrawProps> = (props) => {
     setBudget = order.setBudget,
   } = props;
   return (
-    <div className="flex items-center justify-between gap-7 rounded-8 border border-background-800 py-8 px-16 font-mono text-12 font-weight-500">
+    <div className="rounded-8 border-background-800 text-12 font-weight-500 flex items-center justify-between gap-7 border px-16 py-8 font-mono">
       <p className="flex flex-1 items-center gap-6">
         Allocated Budget
         <Tooltip
@@ -61,7 +61,7 @@ export const WithdrawAllocatedBudget: FC<WithdrawProps> = (props) => {
         onClick={() => setBudget(currentBudget)}
         className={
           disabled
-            ? 'pointer-events-none text-primary/40'
+            ? 'text-primary/40 pointer-events-none'
             : 'text-primary hover:text-white'
         }
       >
diff --git a/src/components/strategies/common/BudgetInput.tsx b/src/components/strategies/common/BudgetInput.tsx
index 9153b3ccf..251ae6a95 100644
--- a/src/components/strategies/common/BudgetInput.tsx
+++ b/src/components/strategies/common/BudgetInput.tsx
@@ -37,7 +37,7 @@ export const BudgetInput: FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-16">
-      <label className="flex text-14 font-weight-500">
+      <label className="text-14 font-weight-500 flex">
         <Tooltip element={titleTooltip}>
           <span className="text-white/80">{title}</span>
         </Tooltip>
@@ -60,9 +60,9 @@ export const BudgetInput: FC<Props> = (props) => {
           htmlFor={inputId}
           role="alert"
           aria-live="polite"
-          className="flex items-center gap-10 font-mono text-12 text-error"
+          className="text-12 text-error flex items-center gap-10 font-mono"
         >
-          <IconWarning className="h-12 w-12" />
+          <IconWarning className="size-12" />
           <span className="flex-1">{error}</span>
         </output>
       )}
diff --git a/src/components/strategies/create/BuySellBlock/BudgetSection.tsx b/src/components/strategies/create/BuySellBlock/BudgetSection.tsx
index baf81baaa..2d23c4235 100644
--- a/src/components/strategies/create/BuySellBlock/BudgetSection.tsx
+++ b/src/components/strategies/create/BuySellBlock/BudgetSection.tsx
@@ -46,8 +46,8 @@ export const BudgetSection: FC<Props> = ({
 
   return (
     <fieldset className="flex flex-col gap-8">
-      <legend className="mb-11 flex items-center gap-6 text-14 font-weight-500">
-        <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+      <legend className="text-14 font-weight-500 mb-11 flex items-center gap-6">
+        <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
           2
         </span>
         <Tooltip
@@ -75,7 +75,7 @@ export const BudgetSection: FC<Props> = ({
           </span>
         </Tooltip>
         {isBudgetOptional && (
-          <span className="ml-8 font-weight-500 text-white/60">Optional</span>
+          <span className="font-weight-500 ml-8 text-white/60">Optional</span>
         )}
       </legend>
       <TokenInputField
@@ -94,9 +94,9 @@ export const BudgetSection: FC<Props> = ({
           htmlFor={inputId}
           role="alert"
           aria-live="polite"
-          className="flex items-center gap-10 font-mono text-12 text-error"
+          className="text-12 text-error flex items-center gap-10 font-mono"
         >
-          <IconWarning className="h-12 w-12" />
+          <IconWarning className="size-12" />
           <span className="flex-1">Insufficient balance</span>
         </output>
       )}
diff --git a/src/components/strategies/create/BuySellBlock/Header.tsx b/src/components/strategies/create/BuySellBlock/Header.tsx
index 5b78f0b62..3486ddf2d 100644
--- a/src/components/strategies/create/BuySellBlock/Header.tsx
+++ b/src/components/strategies/create/BuySellBlock/Header.tsx
@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react';
 import { OrderCreate } from '../useOrder';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { Token } from 'libs/tokens';
+import { cn } from 'utils/helpers';
 
 interface Props {
   children: ReactNode;
@@ -26,15 +27,17 @@ export const BuySellHeader: FC<Props> = (props) => {
   return (
     <header className="flex items-center justify-between">
       {children}
-      <div className="flex items-center gap-10 text-14">
+      <div className="text-14 flex items-center gap-10">
         <div className="flex items-center rounded-[100px] bg-black p-2">
           <button
             type="button"
             tabIndex={!isRange ? -1 : 0}
             onClick={setLimit}
-            className={`rounded-40 font-weight-500 ${
-              !isRange ? 'bg-background-900' : 'text-secondary'
-            } px-10 py-4`}
+            className={cn(
+              'rounded-40 font-weight-500',
+              !isRange ? 'bg-background-900' : 'text-white/60',
+              'px-10 py-4'
+            )}
             data-testid="tab-limit"
           >
             Limit
@@ -43,9 +46,11 @@ export const BuySellHeader: FC<Props> = (props) => {
             type="button"
             tabIndex={isRange ? -1 : 0}
             onClick={setRange}
-            className={`rounded-40 font-weight-500 ${
-              isRange ? 'bg-background-900' : 'text-secondary'
-            } px-10 py-4`}
+            className={cn(
+              'rounded-40 font-weight-500',
+              isRange ? 'bg-background-900' : 'text-white/60',
+              'px-10 py-4'
+            )}
             data-testid="tab-range"
           >
             Range
@@ -53,6 +58,7 @@ export const BuySellHeader: FC<Props> = (props) => {
         </div>
         <Tooltip
           sendEventOnMount={{ buy }}
+          iconClassName="text-white/60"
           element={
             <>
               This section will define the order details in which you are
diff --git a/src/components/strategies/create/BuySellBlock/InputLimit.tsx b/src/components/strategies/create/BuySellBlock/InputLimit.tsx
index c9b22bd40..dba717b53 100644
--- a/src/components/strategies/create/BuySellBlock/InputLimit.tsx
+++ b/src/components/strategies/create/BuySellBlock/InputLimit.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, FC, FocusEvent, useEffect, useId } from 'react';
 import { carbonEvents } from 'services/events';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { Token } from 'libs/tokens';
-import { formatNumber, sanitizeNumber } from 'utils/helpers';
+import { cn, formatNumber, sanitizeNumber } from 'utils/helpers';
 import { decimalNumberValidationRegex } from 'utils/inputsValidations';
 import { MarketPriceIndication } from 'components/strategies/marketPriceIndication';
 import { MarketPricePercentage } from 'components/strategies/marketPriceIndication/useMarketIndication';
@@ -75,12 +75,11 @@ export const InputLimit: FC<InputLimitProps> = ({
   return (
     <>
       <div
-        className={`
-          flex cursor-text flex-col gap-5 rounded-16 border border-black bg-black p-16
-          focus-within:border-white/50
-          ${error ? '!border-error/50' : ''}
-          ${showWarning ? '!border-warning' : ''}
-        `}
+        className={cn(
+          'rounded-16 flex cursor-text flex-col gap-5 border border-black bg-black p-16 focus-within:border-white/50',
+          showWarning && 'border-warning focus-within:border-warning',
+          error && 'border-error/50 focus-within:border-error/50'
+        )}
         onClick={() => document.getElementById(id ?? inputId)?.focus()}
       >
         <div className="flex">
@@ -95,10 +94,10 @@ export const InputLimit: FC<InputLimitProps> = ({
             onBlur={handleBlur}
             aria-label="Enter Price"
             placeholder="Enter Price"
-            className={`
-              flex-1 text-ellipsis bg-transparent text-start text-18 font-weight-500 focus:outline-none
-              ${error ? 'text-error' : ''}
-            `}
+            className={cn(
+              'text-18 font-weight-500 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
+              error && 'text-error'
+            )}
             data-testid="input-price"
           />
           {marketPrice !== 0 && (
@@ -112,7 +111,7 @@ export const InputLimit: FC<InputLimitProps> = ({
           )}
         </div>
         <p className="flex flex-wrap items-center gap-8">
-          <span className="break-all font-mono text-12 text-white/60">
+          <span className="text-12 break-all font-mono text-white/60">
             {fiatAsString}
           </span>
           {marketPricePercentage && (
diff --git a/src/components/strategies/create/BuySellBlock/InputRange.tsx b/src/components/strategies/create/BuySellBlock/InputRange.tsx
index 18a89059d..7898ea9d7 100644
--- a/src/components/strategies/create/BuySellBlock/InputRange.tsx
+++ b/src/components/strategies/create/BuySellBlock/InputRange.tsx
@@ -4,7 +4,7 @@ import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { MarketPriceIndication } from 'components/strategies/marketPriceIndication';
 import { carbonEvents } from 'services/events';
-import { formatNumber, sanitizeNumber } from 'utils/helpers';
+import { cn, formatNumber, sanitizeNumber } from 'utils/helpers';
 import { decimalNumberValidationRegex } from 'utils/inputsValidations';
 import { MarketPricePercentage } from 'components/strategies/marketPriceIndication/useMarketIndication';
 import { WarningMessageWithIcon } from 'components/common/WarningMessageWithIcon';
@@ -94,15 +94,14 @@ export const InputRange: FC<InputRangeProps> = ({
     <>
       <div className="grid grid-cols-2 gap-6">
         <div
-          className={`
-            w-full cursor-text rounded-r-4 rounded-l-16 border border-black bg-black p-16
-            focus-within:border-white/50 
-            ${error ? '!border-error/50' : ''}
-            ${showWarning ? '!border-warning' : ''}
-          `}
+          className={cn(
+            'rounded-r-4 rounded-l-16 w-full cursor-text border border-black bg-black p-16 focus-within:border-white/50',
+            showWarning && 'border-warning focus-within:border-warning',
+            error && 'border-error/50 focus-within:border-error'
+          )}
           onClick={() => document.getElementById(inputMinId)?.focus()}
         >
-          <header className="mb-5 flex justify-between text-12 text-white/60">
+          <header className="text-12 mb-5 flex justify-between text-white/60">
             <Tooltip
               sendEventOnMount={{ buy }}
               element={`The lowest price to ${buy ? 'buy' : 'sell'} ${
@@ -128,17 +127,17 @@ export const InputRange: FC<InputRangeProps> = ({
             inputMode="decimal"
             value={min}
             placeholder="Enter Price"
-            className={`
-              mb-5 w-full text-ellipsis bg-transparent text-18 font-weight-500 focus:outline-none
-              ${error ? 'text-error' : ''}
-            `}
+            className={cn(
+              'text-18 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
+              error && 'text-error'
+            )}
             onChange={handleChangeMin}
             onFocus={(e) => e.target.select()}
             onBlur={handleBlurMin}
             data-testid="input-min"
           />
           <p className="flex flex-wrap items-center gap-4">
-            <span className="break-all font-mono text-12 text-white/60">
+            <span className="text-12 break-all font-mono text-white/60">
               {getFiatAsString(min)}
             </span>
             {marketPricePercentages && (
@@ -152,15 +151,14 @@ export const InputRange: FC<InputRangeProps> = ({
           </p>
         </div>
         <div
-          className={`
-            w-full cursor-text rounded-r-16 rounded-l-4 border border-black bg-black p-16
-            focus-within:border-white/50
-            ${error ? '!border-error/50' : ''}
-            ${showWarning ? '!border-warning' : ''}
-          `}
+          className={cn(
+            'rounded-r-16 rounded-l-4 w-full cursor-text border border-black bg-black p-16 focus-within:border-white/50',
+            showWarning && 'border-warning focus-within:border-warning',
+            error && 'border-error/50 focus-within:border-error'
+          )}
           onClick={() => document.getElementById(inputMaxId)?.focus()}
         >
-          <header className="mb-5 flex justify-between text-12 text-white/60">
+          <header className="text-12 mb-5 flex justify-between text-white/60">
             <Tooltip
               sendEventOnMount={{ buy }}
               element={`The highest price to ${buy ? 'buy' : 'sell'} ${
@@ -186,17 +184,17 @@ export const InputRange: FC<InputRangeProps> = ({
             inputMode="decimal"
             value={max}
             placeholder="Enter Price"
-            className={`
-              mb-5 w-full text-ellipsis bg-transparent text-18 font-weight-500 focus:outline-none
-              ${error ? 'text-error' : ''}
-            `}
+            className={cn(
+              'text-18 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
+              error && 'text-error'
+            )}
             onChange={handleChangeMax}
             onFocus={(e) => e.target.select()}
             onBlur={handleBlurMax}
             data-testid="input-max"
           />
           <div className="flex flex-wrap items-center gap-4">
-            <p className="break-all font-mono text-12 text-white/60">
+            <p className="text-12 break-all font-mono text-white/60">
               {getFiatAsString(max)}
             </p>
             {marketPricePercentages && (
diff --git a/src/components/strategies/create/BuySellBlock/LimitRangeSection.tsx b/src/components/strategies/create/BuySellBlock/LimitRangeSection.tsx
index 10b6c1dcd..dbf7fb2d3 100644
--- a/src/components/strategies/create/BuySellBlock/LimitRangeSection.tsx
+++ b/src/components/strategies/create/BuySellBlock/LimitRangeSection.tsx
@@ -48,7 +48,7 @@ export const LimitRangeSection: FC<Props> = ({
 
   return (
     <fieldset className="flex flex-col gap-8">
-      <legend className="mb-11 flex items-center gap-6 text-14 font-weight-500">
+      <legend className="text-14 font-weight-500 mb-11 flex items-center gap-6">
         {inputTitle}
       </legend>
       {isRange ? (
diff --git a/src/components/strategies/create/BuySellBlock/index.tsx b/src/components/strategies/create/BuySellBlock/index.tsx
index c4006effc..ba33018e7 100644
--- a/src/components/strategies/create/BuySellBlock/index.tsx
+++ b/src/components/strategies/create/BuySellBlock/index.tsx
@@ -46,7 +46,7 @@ export const BuySellBlock: FC<Props> = ({
 
   const inputTitle = (
     <>
-      <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+      <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
         1
       </span>
       <Tooltip
@@ -103,7 +103,7 @@ export const BuySellBlock: FC<Props> = ({
     <m.section
       variants={items}
       aria-labelledby={titleId}
-      className={`flex flex-col gap-20 rounded-10 border-l-2 bg-background-900 p-20 ${
+      className={`rounded-10 bg-background-900 flex flex-col gap-20 border-l-2 p-20 ${
         buy
           ? 'border-buy/50 focus-within:border-buy'
           : 'border-sell/50 focus-within:border-sell'
@@ -134,7 +134,7 @@ export const BuySellBlock: FC<Props> = ({
           <Tooltip sendEventOnMount={{ buy }} element={tooltipText}>
             <span>{buy ? 'Buy Low' : 'Sell High'}</span>
           </Tooltip>
-          <LogoImager alt="Token" src={base.logoURI} className="h-18 w-18" />
+          <LogoImager alt="Token" src={base.logoURI} className="size-18" />
           <span>{base.symbol}</span>
         </h3>
       </BuySellHeader>
diff --git a/src/components/strategies/create/CreateStrategyCTA.tsx b/src/components/strategies/create/CreateStrategyCTA.tsx
index 58073c3cb..2e2632815 100644
--- a/src/components/strategies/create/CreateStrategyCTA.tsx
+++ b/src/components/strategies/create/CreateStrategyCTA.tsx
@@ -34,16 +34,16 @@ export const CreateStrategyCTAMobile = () => {
   return (
     <Link
       to="/strategies/create"
-      className="fixed bottom-100 right-30 md:hidden"
+      className="bottom-100 right-30 fixed md:hidden"
       data-testid="create-strategy-mobile"
     >
       <Button
         aria-label="Create Strategy"
         variant="success"
-        className="flex h-56 w-56 items-center justify-center rounded-full !p-0"
+        className="flex size-56 items-center justify-center rounded-full p-0"
         onClick={() => carbonEvents.strategy.newStrategyCreateClick(undefined)}
       >
-        <IconPlus className={'h-14 w-14'} />
+        <IconPlus className="size-14" />
       </Button>
     </Link>
   );
diff --git a/src/components/strategies/create/CreateStrategyGraph.tsx b/src/components/strategies/create/CreateStrategyGraph.tsx
index b3549b66d..7e895c513 100644
--- a/src/components/strategies/create/CreateStrategyGraph.tsx
+++ b/src/components/strategies/create/CreateStrategyGraph.tsx
@@ -25,12 +25,12 @@ export const CreateStrategyGraph: FC<Props> = ({
       <m.div
         variants={items}
         key="createStrategyGraph"
-        className="flex h-[550px] flex-col rounded-10 bg-background-900 p-20 md:sticky md:top-80"
+        className="rounded-10 bg-background-900 flex h-[550px] flex-col p-20 md:sticky md:top-80"
       >
         <div className="flex items-center justify-between">
-          <h2 className="mb-20 font-weight-500">Price Chart</h2>
+          <h2 className="font-weight-500 mb-20">Price Chart</h2>
           <Button
-            className="mb-20 self-end bg-background-800 hover:border-background-600"
+            className="bg-background-800 hover:border-background-600 mb-20 self-end"
             variant="secondary"
             size="md"
             onClick={() => {
diff --git a/src/components/strategies/create/CreateStrategyHeader.tsx b/src/components/strategies/create/CreateStrategyHeader.tsx
index ea6caae6f..cd27baf78 100644
--- a/src/components/strategies/create/CreateStrategyHeader.tsx
+++ b/src/components/strategies/create/CreateStrategyHeader.tsx
@@ -38,20 +38,20 @@ export const CreateStrategyHeader = ({
     >
       <button
         onClick={() => history.back()}
-        className="grid h-40 w-40 place-items-center rounded-full bg-background-800"
+        className="bg-background-800 grid size-40 place-items-center rounded-full"
       >
-        <ForwardArrow className="h-18 w-18 rotate-180" />
+        <ForwardArrow className="size-18 rotate-180" />
       </button>
-      <h1 className="flex-1 text-24 font-weight-500">{title}</h1>
+      <h1 className="text-24 font-weight-500 flex-1">{title}</h1>
       {!showGraph && showOrders && (
         <button
           onClick={() => {
             carbonEvents.strategy.strategyChartOpen(undefined);
             setShowGraph(true);
           }}
-          className="grid h-40 w-40 place-items-center rounded-full bg-background-800"
+          className="bg-background-800 grid size-40 place-items-center rounded-full"
         >
-          <IconCandles className="h-18 w-18" />
+          <IconCandles className="size-18" />
         </button>
       )}
     </m.header>
diff --git a/src/components/strategies/create/CreateStrategyOrders.tsx b/src/components/strategies/create/CreateStrategyOrders.tsx
index f09a9100d..b9e3fcbd8 100644
--- a/src/components/strategies/create/CreateStrategyOrders.tsx
+++ b/src/components/strategies/create/CreateStrategyOrders.tsx
@@ -83,22 +83,24 @@ export const CreateStrategyOrders = ({
       <m.header
         variants={items}
         key="createStrategyBuyTokens"
-        className="flex flex-col gap-10 rounded-10 bg-background-900 p-20"
+        className="rounded-10 bg-background-900 flex flex-col gap-10 p-20"
       >
         <div className="flex gap-10">
           <TokensOverlap tokens={[base!, quote!]} size={32} />
           <div>
-            <h2 className="flex gap-6 text-14">
+            <h2 className="text-14 flex gap-6">
               <span>{base?.symbol}</span>
-              <span role="separator" className="text-secondary">
+              <span role="separator" className="text-white/60">
                 /
               </span>
               <span>{quote?.symbol}</span>
             </h2>
-            <div className="text-secondary capitalize">{strategyType}</div>
+            <div className="text-14 capitalize text-white/60">
+              {strategyType}
+            </div>
           </div>
         </div>
-        <p className="flex items-center text-12 font-weight-400 text-white/60">
+        <p className="text-12 font-weight-400 flex items-center text-white/60">
           <IconWarning className="ml-6 mr-10 w-14 flex-shrink-0" /> Rebasing and
           fee-on-transfer tokens are not supported
         </p>
@@ -153,7 +155,7 @@ export const CreateStrategyOrders = ({
       {warnings.formHasWarning && !isCTAdisabled && (
         <m.label
           variants={items}
-          className="flex items-center gap-8 rounded-10 bg-background-900 p-20 text-14 font-weight-500 text-white/60"
+          className="rounded-10 bg-background-900 text-14 font-weight-500 flex items-center gap-8 p-20 text-white/60"
         >
           <input
             type="checkbox"
diff --git a/src/components/strategies/create/CreateStrategyTokenSelection.tsx b/src/components/strategies/create/CreateStrategyTokenSelection.tsx
index 9197e5170..faeb9d0b7 100644
--- a/src/components/strategies/create/CreateStrategyTokenSelection.tsx
+++ b/src/components/strategies/create/CreateStrategyTokenSelection.tsx
@@ -42,6 +42,7 @@ export const CreateStrategyTokenSelection: FC<UseStrategyCreateReturn> = ({
       <header className="mb-15 flex items-center justify-between">
         <h2>Token Pair</h2>
         <Tooltip
+          iconClassName="text-white/60"
           sendEventOnMount={{ buy: undefined }}
           element={
             <div>
@@ -56,7 +57,7 @@ export const CreateStrategyTokenSelection: FC<UseStrategyCreateReturn> = ({
           }
         />
       </header>
-      <div className="flex flex-col -space-y-15">
+      <div className="-space-y-15 flex flex-col">
         <SelectTokenButton
           symbol={base?.symbol}
           imgUrl={base?.logoURI}
@@ -67,11 +68,11 @@ export const CreateStrategyTokenSelection: FC<UseStrategyCreateReturn> = ({
         {!!base && (
           <>
             <button
-              className="relative z-10 mx-auto grid h-40 w-40 place-items-center rounded-full border-[5px] border-background-900 bg-black"
+              className="border-background-900 relative z-10 mx-auto grid size-40 place-items-center rounded-full border-[5px] bg-black"
               onClick={swapTokens}
               disabled={!base || !quote}
             >
-              <IconArrow className="h-12 w-12" />
+              <IconArrow className="size-12" />
             </button>
             <SelectTokenButton
               symbol={quote?.symbol}
diff --git a/src/components/strategies/create/CreateStrategyTypeMenu.tsx b/src/components/strategies/create/CreateStrategyTypeMenu.tsx
index dfbad6908..28a027e93 100644
--- a/src/components/strategies/create/CreateStrategyTypeMenu.tsx
+++ b/src/components/strategies/create/CreateStrategyTypeMenu.tsx
@@ -83,7 +83,7 @@ export const CreateStrategyTypeMenu: FC<UseStrategyCreateReturn> = ({
     <>
       <m.div
         variants={itemsVariant}
-        className="flex flex-col gap-20 rounded-10 bg-background-900 p-20"
+        className="rounded-10 bg-background-900 flex flex-col gap-20 p-20"
         key="createStrategyTypeMenu"
       >
         <h2>Strategy Type</h2>
@@ -98,9 +98,9 @@ export const CreateStrategyTypeMenu: FC<UseStrategyCreateReturn> = ({
               {isRecommended && (
                 <span
                   aria-labelledby={'legend-' + id}
-                  className="absolute top-8 right-8 rounded bg-primary-dark p-4 text-primary"
+                  className="bg-primary-dark text-primary absolute right-8 top-8 rounded p-4"
                 >
-                  <IconStar aria-hidden className="h-10 w-10" />
+                  <IconStar aria-hidden className="size-10" />
                 </span>
               )}
               <button
@@ -110,7 +110,7 @@ export const CreateStrategyTypeMenu: FC<UseStrategyCreateReturn> = ({
                 aria-selected={selectedId === id}
                 onClick={() => selectSetting(to, search)}
                 className={cn(
-                  'flex h-full w-full flex-col items-center justify-start gap-8 rounded-10 bg-black px-8 py-16 text-14 outline-white/60',
+                  'rounded-10 text-14 flex size-full flex-col items-center justify-start gap-8 bg-black px-8 py-16 outline-white/60',
                   'md:px-12',
                   'focus-visible:outline focus-visible:outline-1',
                   selectedId === id ? 'outline outline-1 outline-white' : ''
@@ -141,7 +141,7 @@ export const CreateStrategyTypeMenu: FC<UseStrategyCreateReturn> = ({
             )}
           >
             <hgroup>
-              <h3 className="mb-8 text-14 font-weight-500">{label}</h3>
+              <h3 className="text-14 font-weight-500 mb-8">{label}</h3>
               <p className="text-12 text-white/80">{description}</p>
             </hgroup>
             <h4 className="text-12 font-weight-500">Benefits</h4>
@@ -154,13 +154,13 @@ export const CreateStrategyTypeMenu: FC<UseStrategyCreateReturn> = ({
               >
                 <summary
                   onClick={(e) => toggleAccordion(e, id)}
-                  className="mb-4 flex cursor-pointer items-center gap-8 text-12 text-white/80"
+                  className="text-12 mb-4 flex cursor-pointer items-center gap-8 text-white/80"
                 >
-                  <IconCheck className="h-14 w-14 text-primary" />
+                  <IconCheck className="text-primary size-14" />
                   {summary}
                   <IconChevron className={styles.chevron} />
                 </summary>
-                <p className="pl-22 text-10 text-white/60 md:text-12">
+                <p className="pl-22 text-10 md:text-12 text-white/60">
                   {details}
                 </p>
               </details>
@@ -168,10 +168,10 @@ export const CreateStrategyTypeMenu: FC<UseStrategyCreateReturn> = ({
             {isRecommended && (
               <p
                 id={'legend-' + id}
-                className="flex gap-8 text-12 text-white/40"
+                className="text-12 flex gap-8 text-white/40"
               >
-                <span className="rounded bg-primary-dark p-4 text-primary">
-                  <IconStar aria-hidden className="h-10 w-10" />
+                <span className="bg-primary-dark text-primary rounded p-4">
+                  <IconStar aria-hidden className="size-10" />
                 </span>
                 Carbon Signature Feature
               </p>
diff --git a/src/components/strategies/create/overlapping/CreateOverlappingStrategy.tsx b/src/components/strategies/create/overlapping/CreateOverlappingStrategy.tsx
index be11d586b..e4f36850f 100644
--- a/src/components/strategies/create/overlapping/CreateOverlappingStrategy.tsx
+++ b/src/components/strategies/create/overlapping/CreateOverlappingStrategy.tsx
@@ -202,10 +202,10 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
 
   return (
     <>
-      <article className="grid grid-flow-col grid-cols-[auto_auto] grid-rows-2 gap-8 rounded-10 bg-background-900 p-20">
-        <h4 className="flex items-center gap-8 text-14 font-weight-500">
+      <article className="rounded-10 bg-background-900 grid grid-flow-col grid-cols-[auto_auto] grid-rows-2 gap-8 p-20">
+        <h4 className="text-14 font-weight-500 flex items-center gap-8">
           Discover Overlapping Strategies
-          <span className="rounded-8 bg-primary-dark px-8 py-4 text-10 text-primary">
+          <span className="rounded-8 bg-primary-dark text-10 text-primary px-8 py-4">
             NEW
           </span>
         </h4>
@@ -215,19 +215,19 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
         <a
           href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy"
           target="_blank"
-          className="row-span-2 flex items-center gap-4 self-center justify-self-end text-12 font-weight-500 text-primary"
+          className="text-12 font-weight-500 text-primary row-span-2 flex items-center gap-4 self-center justify-self-end"
           rel="noreferrer"
         >
           Learn More
-          <IconLink className="h-12 w-12" />
+          <IconLink className="size-12" />
         </a>
       </article>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header className="flex items-center gap-8">
-          <h3 className="flex-1 text-18 font-weight-500">Price Range</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Price Range</h3>
           <Tooltip
             element="Drag and drop your strategy buy and sell prices."
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="text-white/60"
           />
         </header>
         <OverlappingStrategyGraph
@@ -240,12 +240,12 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           setMax={setMax}
         />
       </article>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header className="flex items-center gap-8">
-          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+          <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
             1
           </span>
-          <h3 className="flex-1 text-18 font-weight-500">
+          <h3 className="text-18 font-weight-500 flex-1">
             Set Price Range&nbsp;
             <span className="text-white/40">
               ({quote?.symbol} per 1 {base?.symbol})
@@ -253,7 +253,7 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           </h3>
           <Tooltip
             element="Indicate the strategy exact buy and sell prices."
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="text-white/60"
           />
         </header>
         {base && quote && (
@@ -268,15 +268,15 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           />
         )}
       </article>
-      <article className="flex flex-col gap-10 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-10 p-20">
         <header className="mb-10 flex items-center gap-8 ">
-          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+          <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
             2
           </span>
-          <h3 className="flex-1 text-18 font-weight-500">Indicate Spread</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Indicate Spread</h3>
           <Tooltip
             element="The difference between the highest bidding (Sell) price, and the lowest asking (Buy) price"
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="text-white/60"
           />
         </header>
         <OverlappingStrategySpread
@@ -288,15 +288,15 @@ export const CreateOverlappingStrategy: FC<OverlappingStrategyProps> = (
           setSpread={setSpread}
         />
       </article>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header className="flex items-center gap-8 ">
-          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
+          <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
             3
           </span>
-          <h3 className="flex-1 text-18 font-weight-500">Set Budgets</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Set Budgets</h3>
           <Tooltip
             element="Indicate the budget you would like to allocate to the strategy. Note that in order to maintain the overlapping behavior, the 2nd budget indication will be calculated using the prices, spread and budget values."
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="text-white/60"
           />
         </header>
         <CreateOverlappingStrategyBudget
diff --git a/src/components/strategies/create/overlapping/CreateOverlappingStrategyBudget.tsx b/src/components/strategies/create/overlapping/CreateOverlappingStrategyBudget.tsx
index f2dacd9ed..fc0991fe2 100644
--- a/src/components/strategies/create/overlapping/CreateOverlappingStrategyBudget.tsx
+++ b/src/components/strategies/create/overlapping/CreateOverlappingStrategyBudget.tsx
@@ -124,11 +124,11 @@ export const CreateOverlappingStrategyBudget: FC<Props> = (props) => {
           <a
             href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy#overlapping-budget-dynamics"
             target="_blank"
-            className="inline-flex items-center gap-4 text-12 font-weight-500 text-primary"
+            className="text-12 font-weight-500 text-primary inline-flex items-center gap-4"
             rel="noreferrer"
           >
             Learn More
-            <IconLink className="h-12 w-12" />
+            <IconLink className="size-12" />
           </a>
         </p>
       )}
@@ -145,11 +145,11 @@ const Explanation: FC<{ base?: Token; buy?: boolean }> = ({ base, buy }) => {
       <a
         href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy#overlapping-budget-dynamics"
         target="_blank"
-        className="inline-flex items-center gap-4 text-12 font-weight-500 text-primary"
+        className="text-12 font-weight-500 text-primary inline-flex items-center gap-4"
         rel="noreferrer"
       >
         Learn More
-        <IconLink className="h-12 w-12" />
+        <IconLink className="size-12" />
       </a>
     </p>
   );
diff --git a/src/components/strategies/edit/EditStrategyAllocatedBudget.tsx b/src/components/strategies/edit/EditStrategyAllocatedBudget.tsx
index 9983d4c7a..0f90269ce 100644
--- a/src/components/strategies/edit/EditStrategyAllocatedBudget.tsx
+++ b/src/components/strategies/edit/EditStrategyAllocatedBudget.tsx
@@ -62,7 +62,7 @@ export const EditStrategyAllocatedBudget: FC<Props> = ({
     <>
       <div
         role="table"
-        className="flex flex-col gap-10 rounded-8 border-2 border-white/10 p-15 text-left font-mono text-12 font-weight-500"
+        className="rounded-8 p-15 text-12 font-weight-500 flex flex-col gap-10 border-2 border-white/10 text-left font-mono"
       >
         <div role="row" className="flex items-center justify-between gap-16">
           <p role="columnheader" className="flex w-auto items-center gap-6">
@@ -86,7 +86,7 @@ export const EditStrategyAllocatedBudget: FC<Props> = ({
               <button
                 type="button"
                 onClick={() => showMaxCb()}
-                className="cursor-pointer font-weight-500 text-primary"
+                className="font-weight-500 text-primary cursor-pointer"
               >
                 MAX
               </button>
@@ -169,12 +169,10 @@ export const EditStrategyAllocatedBudget: FC<Props> = ({
         )}
       </div>
       {type === 'editPrices' && showDistribute && (
-        <div className="flex items-center gap-10 rounded-8 bg-white/5 p-12 text-left text-12 text-white/60">
+        <div className="rounded-8 text-12 flex items-center gap-10 bg-white/5 p-12 text-left text-white/60">
           <Tooltip
             iconClassName="h-13 text-white/60"
-            element={
-              'When updating the rates, the allocated budget will be distributed equally across the entire range'
-            }
+            element="When updating the rates, the allocated budget will be distributed equally across the entire range"
           />
           Strategy budget will be distributed across entire range
         </div>
diff --git a/src/components/strategies/edit/EditStrategyBudgetBuySellBlock.tsx b/src/components/strategies/edit/EditStrategyBudgetBuySellBlock.tsx
index ed1358282..4bdf148ad 100644
--- a/src/components/strategies/edit/EditStrategyBudgetBuySellBlock.tsx
+++ b/src/components/strategies/edit/EditStrategyBudgetBuySellBlock.tsx
@@ -57,7 +57,7 @@ export const EditStrategyBudgetBuySellBlock: FC<{
   return (
     <section
       aria-labelledby={titleId}
-      className={`flex flex-col gap-20 rounded-6 border-l-2 bg-background-900 p-20 text-left ${
+      className={`rounded-6 bg-background-900 flex flex-col gap-20 border-l-2 p-20 text-left ${
         buy
           ? 'border-buy/50 focus-within:border-buy'
           : 'border-sell/50 focus-within:border-sell'
@@ -65,7 +65,7 @@ export const EditStrategyBudgetBuySellBlock: FC<{
       data-testid={`${buy ? 'buy' : 'sell'}-section`}
     >
       <header className="flex items-center justify-between">
-        <h3 id={titleId} className="flex items-center gap-8 text-18">
+        <h3 id={titleId} className="text-18 flex items-center gap-8">
           <span>
             {`${type === 'withdraw' ? 'Withdraw' : 'Deposit'}`}{' '}
             {buy ? 'Buy' : 'Sell'} Budget
@@ -80,6 +80,7 @@ export const EditStrategyBudgetBuySellBlock: FC<{
           element={`Indicate the amount you wish to ${
             type === 'withdraw' ? 'withdraw' : 'deposit'
           } from the available "allocated budget"`}
+          iconClassName="text-white/60"
         />
       </header>
       <TokenInputField
@@ -102,9 +103,9 @@ export const EditStrategyBudgetBuySellBlock: FC<{
           htmlFor={inputId}
           role="alert"
           aria-live="polite"
-          className="flex items-center gap-10 font-mono text-12 text-error"
+          className="text-12 text-error flex items-center gap-10 font-mono"
         >
-          <IconWarning className="h-12 w-12" />
+          <IconWarning className="size-12" />
           <span className="flex-1">Insufficient balance</span>
         </output>
       )}
diff --git a/src/components/strategies/edit/EditStrategyHeader.tsx b/src/components/strategies/edit/EditStrategyHeader.tsx
index ad1da678e..fa60d3773 100644
--- a/src/components/strategies/edit/EditStrategyHeader.tsx
+++ b/src/components/strategies/edit/EditStrategyHeader.tsx
@@ -32,11 +32,11 @@ export const EditStrategyHeader = ({
     >
       <button
         onClick={() => history.back()}
-        className="grid h-40 w-40 place-items-center rounded-full bg-background-800"
+        className="bg-background-800 grid size-40 place-items-center rounded-full"
       >
-        <ForwardArrow className="h-18 w-18 rotate-180" />
+        <ForwardArrow className="size-18 rotate-180" />
       </button>
-      <h1 className="flex-1 text-24 font-weight-500">
+      <h1 className="text-24 font-weight-500 flex-1">
         {type && titleByType[type]}
       </h1>
       {!showGraph && (
@@ -45,9 +45,9 @@ export const EditStrategyHeader = ({
             carbonEvents.strategy.strategyChartOpen(undefined);
             setShowGraph(true);
           }}
-          className="grid h-40 w-40 place-items-center rounded-full bg-background-800"
+          className="bg-background-800 grid size-40 place-items-center rounded-full"
         >
-          <IconCandles className="h-18 w-18" />
+          <IconCandles className="size-18" />
         </button>
       )}
     </header>
diff --git a/src/components/strategies/edit/EditStrategyOverlapTokens.tsx b/src/components/strategies/edit/EditStrategyOverlapTokens.tsx
index 867759d2b..6c1800e16 100644
--- a/src/components/strategies/edit/EditStrategyOverlapTokens.tsx
+++ b/src/components/strategies/edit/EditStrategyOverlapTokens.tsx
@@ -9,17 +9,19 @@ export const EditStrategyOverlapTokens = ({
   strategy,
 }: EditStrategyOverlapTokensProps) => {
   return (
-    <header className="flex w-full items-center space-x-10 rounded-10 bg-background-900 p-20">
+    <header className="rounded-10 bg-background-900 flex w-full items-center space-x-10 p-20">
       <TokensOverlap tokens={[strategy.base, strategy.quote]} size={32} />
       <div>
-        <h2 className="flex gap-6 text-14">
+        <h2 className="text-14 flex gap-6">
           <span>{strategy.base.symbol}</span>
-          <span role="separator" className="text-secondary">
+          <span role="separator" className="text-white/60">
             /
           </span>
           <span>{strategy.quote.symbol}</span>
         </h2>
-        <div className="text-secondary flex">ID: {strategy.idDisplay}</div>
+        <div className="text-14 flex text-white/60">
+          ID: {strategy.idDisplay}
+        </div>
       </div>
     </header>
   );
diff --git a/src/components/strategies/edit/EditStrategyPricesBuySellBlock.tsx b/src/components/strategies/edit/EditStrategyPricesBuySellBlock.tsx
index 7beebd063..77ce55db9 100644
--- a/src/components/strategies/edit/EditStrategyPricesBuySellBlock.tsx
+++ b/src/components/strategies/edit/EditStrategyPricesBuySellBlock.tsx
@@ -67,7 +67,7 @@ export const EditStrategyPricesBuySellBlock: FC<
   return (
     <section
       aria-labelledby={titleId}
-      className={`flex w-full flex-col gap-20 rounded-6 border-l-2 bg-background-900 p-20 text-12 ${
+      className={`rounded-6 bg-background-900 text-12 flex w-full flex-col gap-20 border-l-2 p-20 ${
         buy
           ? 'border-buy/50 focus-within:border-buy'
           : 'border-sell/50 focus-within:border-sell'
@@ -75,7 +75,7 @@ export const EditStrategyPricesBuySellBlock: FC<
       data-testid={`${buy ? 'buy' : 'sell'}-section`}
     >
       <BuySellHeader {...headProps}>
-        <h3 id={titleId} className="flex items-center gap-6 text-18">
+        <h3 id={titleId} className="text-18 flex items-center gap-6">
           {buy ? 'Buy' : 'Sell'} {buy ? 'Low' : 'High'} {base.symbol}
         </h3>
       </BuySellHeader>
diff --git a/src/components/strategies/edit/EditStrategyPricesContent.tsx b/src/components/strategies/edit/EditStrategyPricesContent.tsx
index 79af4c7a0..9b3a1460a 100644
--- a/src/components/strategies/edit/EditStrategyPricesContent.tsx
+++ b/src/components/strategies/edit/EditStrategyPricesContent.tsx
@@ -138,7 +138,7 @@ export const EditStrategyPricesContent = ({
     <form
       onSubmit={(e) => handleOnActionClick(e)}
       onReset={() => history.back()}
-      className="flex w-full flex-col items-center gap-20 font-weight-500 md:w-[400px]"
+      className="font-weight-500 flex w-full flex-col items-center gap-20 md:w-[400px]"
       data-testid="edit-form"
     >
       <EditStrategyOverlapTokens strategy={strategy} />
@@ -175,7 +175,7 @@ export const EditStrategyPricesContent = ({
       )}
 
       {warnings.formHasWarning && !isInvalid && (
-        <label className="flex items-center gap-8 rounded-10 bg-background-900 p-20 text-14 font-weight-500 text-white/60">
+        <label className="rounded-10 bg-background-900 text-14 font-weight-500 flex items-center gap-8 p-20 text-white/60">
           <input
             type="checkbox"
             value={warnings.approvedWarnings.toString()}
diff --git a/src/components/strategies/edit/overlapping/BudgetWarning.tsx b/src/components/strategies/edit/overlapping/BudgetWarning.tsx
index 21f4774a5..afe97356b 100644
--- a/src/components/strategies/edit/overlapping/BudgetWarning.tsx
+++ b/src/components/strategies/edit/overlapping/BudgetWarning.tsx
@@ -54,13 +54,13 @@ export const BudgetWarning: FC<Props> = ({ base, quote, state, setState }) => {
     setState(`${current}->${current}`);
   };
   return (
-    <article className="flex w-full flex-col gap-16 rounded-10 border border-warning bg-background-900 p-20">
+    <article className="rounded-10 border-warning bg-background-900 flex w-full flex-col gap-16 border p-20">
       <header className="flex items-center gap-8 ">
-        <IconWarning className="h-14 w-14 text-warning" />
-        <h3 className="flex-1 text-18 font-weight-500">Edit Budget</h3>
+        <IconWarning className="text-warning size-14" />
+        <h3 className="text-18 font-weight-500 flex-1">Edit Budget</h3>
         <Tooltip
           element="Indicate the budget you would like to allocate to the strategy. Note that in order to maintain the overlapping behavior, the 2nd budget indication will be calculated using the prices, spread and budget values."
-          iconClassName="h-14 w-14 text-white/60"
+          iconClassName="size-14 text-white/60"
         />
       </header>
       <p className="text-12 font-weight-400 text-white/60">
@@ -84,7 +84,7 @@ export const BudgetWarning: FC<Props> = ({ base, quote, state, setState }) => {
                   {i + 1}
                 </text>
               </svg>
-              <p className="flex-1 text-12 font-weight-400 text-white/60">
+              <p className="text-12 font-weight-400 flex-1 text-white/60">
                 {text}
               </p>
             </li>
diff --git a/src/components/strategies/edit/overlapping/DepositOverlappingStrategy.tsx b/src/components/strategies/edit/overlapping/DepositOverlappingStrategy.tsx
index b58618d0b..b6baf0f03 100644
--- a/src/components/strategies/edit/overlapping/DepositOverlappingStrategy.tsx
+++ b/src/components/strategies/edit/overlapping/DepositOverlappingStrategy.tsx
@@ -143,9 +143,9 @@ export const DepositOverlappingStrategy: FC<Props> = (props) => {
 
   return (
     <>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header>
-          <h3 className="flex-1 text-18 font-weight-500">Price Range</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Price Range</h3>
         </header>
         <OverlappingStrategyGraph
           base={base}
@@ -158,12 +158,12 @@ export const DepositOverlappingStrategy: FC<Props> = (props) => {
           disabled
         />
       </article>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header className="flex items-center gap-8 ">
-          <h3 className="flex-1 text-18 font-weight-500">Deposit Budgets</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Deposit Budgets</h3>
           <Tooltip
             element='Indicate the amount you wish to deposit from the available "allocated budget"'
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="size-14 text-white/60"
           />
         </header>
         <BudgetInput
@@ -208,17 +208,17 @@ export const DepositOverlappingStrategy: FC<Props> = (props) => {
           />
         )}
         <footer className="flex items-center gap-8">
-          <IconAction className="h-16 w-16" />
+          <IconAction className="size-16" />
           <p className="text-12 text-white/60">
             Price range and liquidity spread remain unchanged.&nbsp;
             <a
               href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy#overlapping-budget-dynamics"
               target="_blank"
               rel="noreferrer"
-              className="inline-flex items-center gap-4 font-weight-500 text-primary"
+              className="font-weight-500 text-primary inline-flex items-center gap-4"
             >
               <span>Learn More</span>
-              <IconLink className="inline h-12 w-12" />
+              <IconLink className="inline size-12" />
             </a>
           </p>
         </footer>
diff --git a/src/components/strategies/edit/overlapping/EditOverlappingStrategyBudget.tsx b/src/components/strategies/edit/overlapping/EditOverlappingStrategyBudget.tsx
index 143c356f4..ebef0a084 100644
--- a/src/components/strategies/edit/overlapping/EditOverlappingStrategyBudget.tsx
+++ b/src/components/strategies/edit/overlapping/EditOverlappingStrategyBudget.tsx
@@ -153,9 +153,9 @@ export const EditOverlappingStrategyBudget: FC<Props> = (props) => {
     );
   }
   return (
-    <article className="flex w-full flex-col gap-20 rounded-10 bg-background-900 p-20">
+    <article className="rounded-10 bg-background-900 flex w-full flex-col gap-20 p-20">
       <header className="flex items-center gap-8 ">
-        <h3 className="flex-1 text-18 font-weight-500">Edit Budget</h3>
+        <h3 className="text-18 font-weight-500 flex-1">Edit Budget</h3>
         <Tooltip element="Indicate the budget you would like to allocate to the strategy. Note that in order to maintain the overlapping behavior, the 2nd budget indication will be calculated using the prices, spread and budget values." />
       </header>
       <BudgetInput
@@ -208,11 +208,11 @@ export const EditOverlappingStrategyBudget: FC<Props> = (props) => {
           <a
             href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy#overlapping-budget-dynamics"
             target="_blank"
-            className="inline-flex items-center gap-4 text-12 font-weight-500 text-primary"
+            className="text-12 font-weight-500 text-primary inline-flex items-center gap-4"
             rel="noreferrer"
           >
             Learn More
-            <IconLink className="h-12 w-12" />
+            <IconLink className="size-12" />
           </a>
         </p>
       )}
@@ -238,11 +238,11 @@ const Explanation: FC<{ base?: Token; buy?: boolean }> = ({ base, buy }) => {
       <a
         href="https://faq.carbondefi.xyz/what-is-an-overlapping-strategy#overlapping-budget-dynamics"
         target="_blank"
-        className="inline-flex items-center gap-4 text-12 font-weight-500 text-primary"
+        className="text-12 font-weight-500 text-primary inline-flex items-center gap-4"
         rel="noreferrer"
       >
         Learn More
-        <IconLink className="h-12 w-12" />
+        <IconLink className="size-12" />
       </a>
     </p>
   );
@@ -254,7 +254,7 @@ const BudgetMessage: FC<{ token: Token; change?: SafeDecimal }> = (props) => {
   if (change.gt(0)) {
     return (
       <div className="flex items-center gap-8">
-        <IconArrowDown className="h-16 w-16 rotate-180 text-primary" />
+        <IconArrowDown className="text-primary size-16 rotate-180" />
         <p className="text-12 font-weight-400 text-white/60">
           You will deposit&nbsp;
           <b className="text-primary">
@@ -267,7 +267,7 @@ const BudgetMessage: FC<{ token: Token; change?: SafeDecimal }> = (props) => {
   } else {
     return (
       <div className="flex items-center gap-8">
-        <IconArrowDown className="h-16 w-16 text-error" />
+        <IconArrowDown className="text-error size-16" />
         <p className="text-12 font-weight-400 text-white/60">
           You will withdraw&nbsp;
           <b className="text-error">
diff --git a/src/components/strategies/edit/overlapping/EditPriceOverlappingStrategy.tsx b/src/components/strategies/edit/overlapping/EditPriceOverlappingStrategy.tsx
index 41cead4f3..40f5218dc 100644
--- a/src/components/strategies/edit/overlapping/EditPriceOverlappingStrategy.tsx
+++ b/src/components/strategies/edit/overlapping/EditPriceOverlappingStrategy.tsx
@@ -166,9 +166,9 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
 
   return (
     <>
-      <article className="flex w-full flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex w-full flex-col gap-20 p-20">
         <header>
-          <h3 className="flex-1 text-18 font-weight-500">Price Range</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Price Range</h3>
         </header>
         <OverlappingStrategyGraph
           base={base}
@@ -182,9 +182,9 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
           setMax={setMax}
         />
       </article>
-      <article className="flex w-full flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex w-full flex-col gap-20 p-20">
         <header className="flex items-center gap-8">
-          <h3 className="flex-1 text-18 font-weight-500">
+          <h3 className="text-18 font-weight-500 flex-1">
             Edit Price Range&nbsp;
             <span className="text-white/40">
               ({quote?.symbol} per 1 {base?.symbol})
@@ -192,7 +192,7 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
           </h3>
           <Tooltip
             element="Indicate the strategy exact buy and sell prices."
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="size-14 text-white/60"
           />
         </header>
         {base && quote && (
@@ -207,12 +207,12 @@ export const EditPriceOverlappingStrategy: FC<Props> = (props) => {
           />
         )}
       </article>
-      <article className="flex w-full flex-col gap-10 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex w-full flex-col gap-10 p-20">
         <header className="mb-10 flex items-center gap-8 ">
-          <h3 className="flex-1 text-18 font-weight-500">Edit Spread</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Edit Spread</h3>
           <Tooltip
             element="The difference between the highest bidding (Sell) price, and the lowest asking (Buy) price"
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="size-14 text-white/60"
           />
         </header>
         <OverlappingStrategySpread
diff --git a/src/components/strategies/edit/overlapping/MarketWarning.tsx b/src/components/strategies/edit/overlapping/MarketWarning.tsx
index d408ab43a..7dbecf38f 100644
--- a/src/components/strategies/edit/overlapping/MarketWarning.tsx
+++ b/src/components/strategies/edit/overlapping/MarketWarning.tsx
@@ -15,8 +15,8 @@ export const MarketWarning: FC<Props> = (props) => {
     .abs();
   if (delta.lt(0.05)) return <></>;
   return (
-    <div className="flex items-center gap-8 text-warning">
-      <IconWarning className="h-16 w-16" />
+    <div className="text-warning flex items-center gap-8">
+      <IconWarning className="size-16" />
       <p className="text-12 font-weight-400">
         Please note that the deposit budget might create an arb opportunity.
       </p>
diff --git a/src/components/strategies/edit/overlapping/WithdrawOverlappingStrategy.tsx b/src/components/strategies/edit/overlapping/WithdrawOverlappingStrategy.tsx
index c9141f0d1..047e145e1 100644
--- a/src/components/strategies/edit/overlapping/WithdrawOverlappingStrategy.tsx
+++ b/src/components/strategies/edit/overlapping/WithdrawOverlappingStrategy.tsx
@@ -144,9 +144,9 @@ export const WithdrawOverlappingStrategy: FC<Props> = (props) => {
 
   return (
     <>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header>
-          <h3 className="flex-1 text-18 font-weight-500">Price Range</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Price Range</h3>
         </header>
         <OverlappingStrategyGraph
           base={base}
@@ -159,12 +159,12 @@ export const WithdrawOverlappingStrategy: FC<Props> = (props) => {
           disabled
         />
       </article>
-      <article className="flex flex-col gap-20 rounded-10 bg-background-900 p-20">
+      <article className="rounded-10 bg-background-900 flex flex-col gap-20 p-20">
         <header className="flex items-center gap-8 ">
-          <h3 className="flex-1 text-18 font-weight-500">Withdraw Budgets</h3>
+          <h3 className="text-18 font-weight-500 flex-1">Withdraw Budgets</h3>
           <Tooltip
             element='Indicate the amount you wish to withdraw to the available "wallet budget"'
-            iconClassName="h-14 w-14 text-white/60"
+            iconClassName="size-14 text-white/60"
           />
         </header>
 
@@ -217,15 +217,15 @@ export const WithdrawOverlappingStrategy: FC<Props> = (props) => {
         )}
         {!withdrawAll && (
           <footer className="flex items-center gap-8">
-            <IconAction className="h-16 w-16" />
+            <IconAction className="size-16" />
             <p className="text-12 text-white/60">
               Price range and liquidity spread remain unchanged.&nbsp;
               <NewTabLink
                 to={externalLinks.whatIsOverlapping}
-                className="inline-flex items-center gap-4 font-weight-500 text-primary"
+                className="font-weight-500 text-primary inline-flex items-center gap-4"
               >
                 <span>Learn More</span>
-                <IconLink className="inline h-12 w-12" />
+                <IconLink className="inline size-12" />
               </NewTabLink>
             </p>
           </footer>
diff --git a/src/components/strategies/edit/tooltip/TooltipTokenAmount.tsx b/src/components/strategies/edit/tooltip/TooltipTokenAmount.tsx
index 91d15dcac..749e7d76a 100644
--- a/src/components/strategies/edit/tooltip/TooltipTokenAmount.tsx
+++ b/src/components/strategies/edit/tooltip/TooltipTokenAmount.tsx
@@ -23,7 +23,7 @@ export const TooltipTokenAmount: FC<TooltipPriceProps> = (props) => {
     <Tooltip
       element={
         <>
-          <div className="align-center flex flex gap-6">
+          <div className="align-center flex gap-6">
             <TokenPrice price={fullAmount} />
             {token.symbol}
           </div>
@@ -31,10 +31,10 @@ export const TooltipTokenAmount: FC<TooltipPriceProps> = (props) => {
         </>
       }
     >
-      <div className={cn('align-center flex flex gap-7', className)}>
+      <div className={cn('align-center flex gap-7', className)}>
         {prettifyNumber(amount)}
         <LogoImager
-          className="h-16 w-16"
+          className="size-16"
           src={token.logoURI}
           alt={token.name ?? 'Token'}
         />
diff --git a/src/components/strategies/edit/tooltip/TooltipTokenRange.tsx b/src/components/strategies/edit/tooltip/TooltipTokenRange.tsx
index e2b09a1b2..9a5844ee3 100644
--- a/src/components/strategies/edit/tooltip/TooltipTokenRange.tsx
+++ b/src/components/strategies/edit/tooltip/TooltipTokenRange.tsx
@@ -45,10 +45,10 @@ export const TooltipTokenRange: FC<TooltipPriceProps> = ({
         </>
       }
     >
-      <div className={cn('align-center flex flex gap-7', className)}>
+      <div className={cn('align-center flex gap-7', className)}>
         {prettifyNumber(min)} - {prettifyNumber(max)} {token.symbol}
         <LogoImager
-          className="h-16 w-16"
+          className="size-16"
           src={token.logoURI}
           alt={token.name ?? 'Token'}
         />
diff --git a/src/components/strategies/marketPriceIndication/MarketPriceIndication.tsx b/src/components/strategies/marketPriceIndication/MarketPriceIndication.tsx
index d75b45ef5..7979d2dff 100644
--- a/src/components/strategies/marketPriceIndication/MarketPriceIndication.tsx
+++ b/src/components/strategies/marketPriceIndication/MarketPriceIndication.tsx
@@ -27,16 +27,16 @@ export const MarketPriceIndication: FC<MarketPriceIndicationProps> = ({
 
   return (
     <span
-      className={`flex items-center gap-5 rounded-6 bg-background-800 py-4 px-6 ${
+      className={`rounded-6 bg-background-800 flex items-center gap-5 px-6 py-4 ${
         marketPriceWarning ? 'text-warning' : 'text-white/60'
       }`}
       data-testid="market-price-indication"
     >
-      <span className="font-mono text-10">
+      <span className="text-10 font-mono">
         {percentage}% {isAbove ? 'above' : 'below'} {isRange ? '' : 'market'}
       </span>
       <Tooltip
-        iconClassName="h-10 w-10"
+        iconClassName="size-10"
         element="The percentage difference between the input price and the current market price of the token"
       />
     </span>
diff --git a/src/components/strategies/overlapping/OverlappingStrategyGraph.tsx b/src/components/strategies/overlapping/OverlappingStrategyGraph.tsx
index 48a941e34..6e828416b 100644
--- a/src/components/strategies/overlapping/OverlappingStrategyGraph.tsx
+++ b/src/components/strategies/overlapping/OverlappingStrategyGraph.tsx
@@ -517,9 +517,9 @@ export const OverlappingStrategyGraph: FC<Props> = (props) => {
 
   return (
     <figure className="relative">
-      <figcaption className="absolute inset-x-0 top-0 flex items-center justify-center gap-4 p-16 font-mono text-10 text-white/60">
+      <figcaption className="text-10 absolute inset-x-0 top-0 flex items-center justify-center gap-4 p-16 font-mono text-white/60">
         <span>Market price provided by CoinGecko</span>
-        <IconCoinGecko className="h-8 w-8" />
+        <IconCoinGecko className="size-8" />
         <span role="separator">·</span>
         <span>Spread {spread || 0}%</span>
       </figcaption>
diff --git a/src/components/strategies/overlapping/OverlappingStrategySpread.tsx b/src/components/strategies/overlapping/OverlappingStrategySpread.tsx
index ee4d26a92..04405f4d4 100644
--- a/src/components/strategies/overlapping/OverlappingStrategySpread.tsx
+++ b/src/components/strategies/overlapping/OverlappingStrategySpread.tsx
@@ -118,7 +118,7 @@ export const OverlappingStrategySpread: FC<Props> = (props) => {
             />
             <label
               htmlFor={'spread-' + option}
-              className="block cursor-pointer rounded-8 bg-black p-16 text-center text-white/40 hover:outline hover:outline-1"
+              className="rounded-8 block cursor-pointer bg-black p-16 text-center text-white/40 hover:outline hover:outline-1"
             >
               {option}%
             </label>
@@ -127,7 +127,7 @@ export const OverlappingStrategySpread: FC<Props> = (props) => {
         <div
           className={cn(
             styles.spreadCustom,
-            'flex min-w-0 flex-1 justify-center rounded-8 bg-black p-16 text-center',
+            'rounded-8 flex min-w-0 flex-1 justify-center bg-black p-16 text-center',
             'hover:outline hover:outline-1',
             'focus-within:outline focus-within:outline-2',
             spread && !inOptions && 'outline outline-1 outline-white/60',
@@ -156,27 +156,27 @@ export const OverlappingStrategySpread: FC<Props> = (props) => {
       {warning && spread && (
         <output
           htmlFor="spread-custom"
-          className="flex items-center gap-8 font-mono text-12 text-warning"
+          className="text-12 text-warning flex items-center gap-8 font-mono"
         >
-          <IconWarning className="h-12 w-12" />
+          <IconWarning className="size-12" />
           <span>{warning}</span>
         </output>
       )}
       {spread <= 0 && (
         <output
           htmlFor="spread-custom"
-          className="flex items-center gap-8 font-mono text-12 text-error"
+          className="text-12 text-error flex items-center gap-8 font-mono"
         >
-          <IconWarning className="h-12 w-12" />
+          <IconWarning className="size-12" />
           <span>The spread should be above 0%</span>
         </output>
       )}
       {spread > 100 && (
         <output
           htmlFor="spread-custom"
-          className="flex items-center gap-8 font-mono text-12 text-error"
+          className="text-12 text-error flex items-center gap-8 font-mono"
         >
-          <IconWarning className="h-12 w-12" />
+          <IconWarning className="size-12" />
           <span>The spread should be equal or below 100%</span>
         </output>
       )}
diff --git a/src/components/strategies/overview/StrategyContent.tsx b/src/components/strategies/overview/StrategyContent.tsx
index bb3ef93c2..794b79b22 100644
--- a/src/components/strategies/overview/StrategyContent.tsx
+++ b/src/components/strategies/overview/StrategyContent.tsx
@@ -41,7 +41,7 @@ export const _StrategyContent: FC<Props> = ({
   return (
     <ul
       data-testid="strategy-list"
-      className={cn('grid gap-20 lg:gap-10 xl:gap-25', styles.strategyList)}
+      className={cn('xl:gap-25 grid gap-20 lg:gap-10', styles.strategyList)}
     >
       {strategies.map((s) => (
         <StrategyBlock key={s.id} strategy={s} isExplorer={isExplorer} />
diff --git a/src/components/strategies/overview/StrategyCreateFirst.tsx b/src/components/strategies/overview/StrategyCreateFirst.tsx
index f9bbcdc61..b807b2987 100644
--- a/src/components/strategies/overview/StrategyCreateFirst.tsx
+++ b/src/components/strategies/overview/StrategyCreateFirst.tsx
@@ -5,7 +5,7 @@ export const StrategyCreateFirst = () => {
     <div className="h-full p-20" data-testid="first-strategy">
       <StrategyBlockCreate
         title="Create Your First Strategy"
-        className="h-[600px] text-center text-36"
+        className="text-36 h-[600px] text-center"
       />
     </div>
   );
diff --git a/src/components/strategies/overview/StrategyFilterSort.tsx b/src/components/strategies/overview/StrategyFilterSort.tsx
index fad8f181d..173f7705d 100644
--- a/src/components/strategies/overview/StrategyFilterSort.tsx
+++ b/src/components/strategies/overview/StrategyFilterSort.tsx
@@ -7,7 +7,7 @@ import { ReactComponent as IconFilter } from 'assets/icons/filter.svg';
 import { lsService } from 'services/localeStorage';
 import { useStrategyCtx } from 'hooks/useStrategies';
 
-// [START] Used for localstorage migration: Remove it after Nov 2023
+// [START] Used for localStorage migration: Remove it after Nov 2023
 export enum EnumStrategySort {
   Recent,
   Old,
@@ -97,23 +97,23 @@ export const StrategyFilterSort = () => {
       button={(attr) => (
         <button
           type="button"
-          className={`
-            grid h-40 min-w-[40px] place-items-center rounded-full border-2 border-background-800
+          className="
+            border-background-800 md:px-30 grid h-40 min-w-[40px] place-items-center rounded-full
+            border-2
             hover:bg-white/10
             active:bg-white/20
-            md:px-30
-          `}
+          "
           {...attr}
         >
-          <IconFilter className="h-18 w-18 md:hidden" />
-          <span className="hidden items-center gap-10 md:inline-flex">
+          <IconFilter className="size-18 md:hidden" />
+          <span className="hidden gap-10 md:inline-flex md:items-center">
             Filter & Sort <IconChevron className="w-14" />
           </span>
         </button>
       )}
     >
       <fieldset onChange={onSortChange}>
-        <legend className="text-secondary px-16 py-8">Sort By</legend>
+        <legend className="text-14 px-16 py-8 text-white/60">Sort By</legend>
         {sortItems.map((sortItem) => (
           <FilterSortItem
             name="sort"
@@ -126,7 +126,7 @@ export const StrategyFilterSort = () => {
       </fieldset>
 
       <fieldset onChange={onFilterChange}>
-        <legend className="text-secondary px-16 py-8">View</legend>
+        <legend className="text-14 px-16 py-8 text-white/60">View</legend>
         {filterItems.map((filterItem) => (
           <FilterSortItem
             name="filter"
@@ -159,11 +159,11 @@ const FilterSortItem: FC<{
       />
       <label
         htmlFor={id}
-        className={`
-          flex cursor-pointer items-center justify-between rounded-6 py-8 px-16
-          px-16 hover:bg-black/90
+        className="
+          rounded-6 flex cursor-pointer items-center justify-between px-16
+          py-8 hover:bg-black/90
           peer-focus-visible:outline peer-focus-visible:outline-1
-        `}
+        "
       >
         {title}
         {selectedItem === item && <IconCheck />}
diff --git a/src/components/strategies/overview/StrategyNotFound.tsx b/src/components/strategies/overview/StrategyNotFound.tsx
index 688e5b6ac..07d515397 100644
--- a/src/components/strategies/overview/StrategyNotFound.tsx
+++ b/src/components/strategies/overview/StrategyNotFound.tsx
@@ -3,8 +3,8 @@ import { ReactComponent as IconEllipse } from 'assets/icons/ellipse.svg';
 export const StrategyNotFound = () => {
   return (
     <div className="flex flex-grow items-center justify-center p-20">
-      <div className=" w-[209px] text-center font-weight-500">
-        <div className="mx-auto mb-32 w-80 rounded-full bg-background-900 p-16">
+      <div className=" font-weight-500 w-[209px] text-center">
+        <div className="bg-background-900 mx-auto mb-32 w-80 rounded-full p-16">
           <IconEllipse />
         </div>
         <div className="text-36">Strategy Not Found</div>
diff --git a/src/components/strategies/overview/StrategyPageTitleWidget.tsx b/src/components/strategies/overview/StrategyPageTitleWidget.tsx
index c7ed835d7..f63eb27b1 100644
--- a/src/components/strategies/overview/StrategyPageTitleWidget.tsx
+++ b/src/components/strategies/overview/StrategyPageTitleWidget.tsx
@@ -17,7 +17,7 @@ export const StrategyPageTitleWidget: FC<{
             <SearchInput
               value={search}
               setValue={setSearch}
-              className="rounded-full bg-background-900"
+              className="bg-background-900 rounded-full"
             />
           </div>
           <StrategyFilterSort />
diff --git a/src/components/strategies/overview/strategyBlock/StrategyBlock.tsx b/src/components/strategies/overview/strategyBlock/StrategyBlock.tsx
index f113ecac1..31d1fec0f 100644
--- a/src/components/strategies/overview/strategyBlock/StrategyBlock.tsx
+++ b/src/components/strategies/overview/strategyBlock/StrategyBlock.tsx
@@ -24,7 +24,7 @@ export const StrategyBlock: FC<Props> = ({
     <m.li
       variants={mItemVariant}
       className={cn(
-        'grid grid-cols-2 grid-rows-[auto_auto_auto] gap-16 rounded-10 bg-background-900 p-24',
+        'rounded-10 bg-background-900 grid grid-cols-2 grid-rows-[auto_auto_auto] gap-16 p-24',
         className
       )}
       data-testid={`${strategy.base.symbol}/${strategy.quote.symbol}`}
@@ -34,17 +34,17 @@ export const StrategyBlock: FC<Props> = ({
       <StrategyBlockBudget strategy={strategy} />
       <div
         className={cn(
-          'col-start-1 col-end-3 grid grid-cols-2 grid-rows-[auto_auto] rounded-8 border-2 border-background-800',
+          'rounded-8 border-background-800 col-start-1 col-end-3 grid grid-cols-2 grid-rows-[auto_auto] border-2',
           strategy.status === 'active' ? '' : 'opacity-50'
         )}
       >
         <StrategyBlockBuySell
           strategy={strategy}
           buy
-          className="border-r-2 border-background-800"
+          className="border-background-800 border-r-2"
         />
         <StrategyBlockBuySell strategy={strategy} />
-        <div className="col-start-1 col-end-3 border-t-2 border-background-800">
+        <div className="border-background-800 col-start-1 col-end-3 border-t-2">
           <StrategyGraph strategy={strategy} />
         </div>
       </div>
diff --git a/src/components/strategies/overview/strategyBlock/StrategyBlockBudget.tsx b/src/components/strategies/overview/strategyBlock/StrategyBlockBudget.tsx
index f9fbe6b50..b45fcaf09 100644
--- a/src/components/strategies/overview/strategyBlock/StrategyBlockBudget.tsx
+++ b/src/components/strategies/overview/strategyBlock/StrategyBlockBudget.tsx
@@ -21,14 +21,14 @@ export const StrategyBlockBudget: FC<Props> = ({ strategy }) => {
   return (
     <article
       className={cn(
-        'flex flex-col rounded-8 border-2 border-background-800 p-16',
+        'rounded-8 border-background-800 flex flex-col border-2 p-16',
         strategy.status === 'active' ? '' : 'opacity-50'
       )}
     >
       <Tooltip element={<TooltipContent />}>
-        <h4 className="text-secondary flex items-center gap-4 font-mono !text-12">
+        <h4 className="text-12 flex items-center gap-4 font-mono text-white/60">
           Total Budget
-          <IconTooltip className="h-10 w-10" />
+          <IconTooltip className="size-10" />
         </h4>
       </Tooltip>
       <p
diff --git a/src/components/strategies/overview/strategyBlock/StrategyBlockBuySell.tsx b/src/components/strategies/overview/strategyBlock/StrategyBlockBuySell.tsx
index cebda6759..e09040542 100644
--- a/src/components/strategies/overview/strategyBlock/StrategyBlockBuySell.tsx
+++ b/src/components/strategies/overview/strategyBlock/StrategyBlockBuySell.tsx
@@ -37,11 +37,11 @@ export const StrategyBlockBuySell: FC<{
     >
       {buy ? (
         <header className="flex items-center gap-4">
-          <h4 className="font-mono text-12 text-buy">Buy {token.symbol}</h4>
+          <h4 className="text-12 text-buy font-mono">Buy {token.symbol}</h4>
           {hasFiatValue && (
             <Tooltip
               element={buyTooltip}
-              iconClassName="h-10 w-10 text-white/60"
+              iconClassName="size-10 text-white/60"
             />
           )}
           {!hasFiatValue && (
@@ -55,20 +55,20 @@ export const StrategyBlockBuySell: FC<{
               }
             >
               <span>
-                <WarningIcon className="h-10 w-10 text-warning" />
+                <WarningIcon className="text-warning size-10" />
               </span>
             </Tooltip>
           )}
         </header>
       ) : (
         <header className="flex items-center gap-4">
-          <h4 className="font-mono text-12 text-sell">
+          <h4 className="text-12 text-sell font-mono">
             Sell {otherToken.symbol}
           </h4>
           {hasFiatValue && (
             <Tooltip
               element={sellTooltip}
-              iconClassName="h-10 w-10 text-white/60"
+              iconClassName="size-10 text-white/60"
             />
           )}
           {!hasFiatValue && (
@@ -82,7 +82,7 @@ export const StrategyBlockBuySell: FC<{
               }
             >
               <span>
-                <WarningIcon className="h-10 w-10 text-warning" />
+                <WarningIcon className="text-warning size-10" />
               </span>
             </Tooltip>
           )}
@@ -92,7 +92,7 @@ export const StrategyBlockBuySell: FC<{
         element={
           <span className="inline-flex items-center gap-4">
             <LogoImager
-              className="h-16 w-16"
+              className="size-16"
               src={otherToken.logoURI}
               alt="token"
             />
@@ -106,7 +106,7 @@ export const StrategyBlockBuySell: FC<{
       </Tooltip>
       <p
         data-testid={`${testIdPrefix}-budget-fiat`}
-        className="font-mono text-12 text-white/60"
+        className="text-12 font-mono text-white/60"
       >
         {hasFiatValue ? fiatBudgetValue : '...'}
       </p>
diff --git a/src/components/strategies/overview/strategyBlock/StrategyBlockCreate.tsx b/src/components/strategies/overview/strategyBlock/StrategyBlockCreate.tsx
index 8ea5c2703..ab6c5eed0 100644
--- a/src/components/strategies/overview/strategyBlock/StrategyBlockCreate.tsx
+++ b/src/components/strategies/overview/strategyBlock/StrategyBlockCreate.tsx
@@ -17,12 +17,12 @@ export const StrategyBlockCreate: FC<Props> = ({
       onClick={() => carbonEvents.strategy.newStrategyCreateClick(undefined)}
       to="/strategies/create"
       className={cn(
-        'bg-content flex flex-col items-center justify-center gap-24 rounded-10 py-50 text-24 font-weight-500 md:text-[32px]',
+        'bg-content rounded-10 py-50 text-24 font-weight-500 flex flex-col items-center justify-center gap-24 md:text-[32px]',
         className
       )}
     >
-      <div className="h-72 w-72 rounded-full bg-primary/20 md:h-80 md:w-80">
-        <IconPlus className="p-24 text-primary md:p-26" />
+      <div className="bg-primary/20 size-72 rounded-full md:size-80">
+        <IconPlus className="text-primary md:p-26 p-24" />
       </div>
       <span className="w-[185px] text-center leading-9 md:w-[210px]">
         {title}
diff --git a/src/components/strategies/overview/strategyBlock/StrategyBlockHeader.tsx b/src/components/strategies/overview/strategyBlock/StrategyBlockHeader.tsx
index 3262a7622..9745bca7f 100644
--- a/src/components/strategies/overview/strategyBlock/StrategyBlockHeader.tsx
+++ b/src/components/strategies/overview/strategyBlock/StrategyBlockHeader.tsx
@@ -28,9 +28,9 @@ export const StrategyBlockHeader: FC<Props> = ({ strategy, isExplorer }) => {
         tokens={[base, quote]}
       />
       <div className="flex flex-1 flex-col">
-        <h3 className="flex gap-6 text-18" data-testid="token-pair">
+        <h3 className="text-18 flex gap-6" data-testid="token-pair">
           <span>{base.symbol}</span>
-          <span className="self-align-center text-secondary !text-16">/</span>
+          <span className="self-align-center text-16 text-white/60">/</span>
           <span>{quote.symbol}</span>
         </h3>
         <StrategySubtitle {...strategy} />
@@ -40,9 +40,9 @@ export const StrategyBlockHeader: FC<Props> = ({ strategy, isExplorer }) => {
           role="menuitem"
           to="/strategy/$id"
           params={{ id: strategy.id }}
-          className="grid h-38 w-38 place-items-center rounded-6 border-2 border-background-800 hover:bg-white/10 active:bg-white/20"
+          className="size-38 rounded-6 border-background-800 grid place-items-center border-2 hover:bg-white/10 active:bg-white/20"
         >
-          <DashboardIcon className="h-16 w-16" />
+          <DashboardIcon className="size-16" />
         </Link>
         <StrategyBlockManage
           strategy={strategy}
@@ -63,7 +63,7 @@ export const StrategyTitle: FC<StrategyTitleProps> = ({ base, quote }) => {
   return (
     <>
       <span>{base.symbol}</span>
-      <span className="self-align-center text-secondary !text-16">/</span>
+      <span className="self-align-center text-16 text-white/60">/</span>
       <span>{quote.symbol}</span>
     </>
   );
@@ -77,7 +77,7 @@ interface StrategySubtitleProps {
 export const StrategySubtitle: FC<StrategySubtitleProps> = (props) => {
   const { id, status, isExplorer } = props;
   return (
-    <p className="flex items-center gap-8 text-12 text-white/60">
+    <p className="text-12 flex items-center gap-8 text-white/60">
       <span className="font-mono">ID: {getLowestBits(id)}</span>
       <svg width="4" height="4" role="separator">
         <circle cx="2" cy="2" r="2" fill="currentcolor" />
@@ -90,11 +90,11 @@ export const StrategySubtitle: FC<StrategySubtitleProps> = (props) => {
       {status !== 'active' && (
         <Tooltip element={getTooltipTextByStatus(isExplorer, status)}>
           <span
-            className="inline-flex items-center gap-4 text-error"
+            className="text-error inline-flex items-center gap-4"
             data-testid="status"
           >
             {statusText.inactive}
-            <TooltipIcon className="h-10 w-10 text-error" />
+            <TooltipIcon className="text-error size-10" />
           </span>
         </Tooltip>
       )}
diff --git a/src/components/strategies/overview/strategyBlock/StrategyBlockManage.tsx b/src/components/strategies/overview/strategyBlock/StrategyBlockManage.tsx
index f3a81cd2f..277149382 100644
--- a/src/components/strategies/overview/strategyBlock/StrategyBlockManage.tsx
+++ b/src/components/strategies/overview/strategyBlock/StrategyBlockManage.tsx
@@ -267,13 +267,13 @@ export const StrategyBlockManage: FC<Props> = (props) => {
         });
       }}
     >
-      <ul role="menu" data-testid={'manage-strategy-dropdown'}>
+      <ul role="menu" data-testid="manage-strategy-dropdown">
         {items.map((item) => {
           if (typeof item === 'number') {
             return (
               <hr
                 key={item}
-                className="border-1  my-10 border-background-700"
+                className="border-1  border-background-700 my-10"
               />
             );
           }
@@ -308,7 +308,7 @@ export const ManageButton = forwardRef<HTMLButtonElement, ManageButtonProps>(
     const style = cn(buttonStyles({ variant: 'white' }), 'gap-8');
     return (
       <button {...props} className={style} ref={ref}>
-        <IconGear className="h-24 w-24" />
+        <IconGear className="size-24" />
         Manage
       </button>
     );
@@ -324,12 +324,12 @@ export const ManageButtonIcon = forwardRef<
       {...props}
       ref={ref}
       className={`
-        grid h-38 w-38 place-items-center rounded-8 border-2 border-background-800
+        size-38 rounded-8 border-background-800 grid place-items-center border-2
         hover:bg-white/10
         active:bg-white/20
       `}
     >
-      <IconGear className="h-24 w-24" />
+      <IconGear className="size-24" />
     </button>
   );
 });
@@ -355,7 +355,7 @@ const ManageItem: FC<{
           setManage(false);
         }}
         disabled={disabled}
-        className={cn('w-full rounded-6 p-12 text-left', {
+        className={cn('rounded-6 w-full p-12 text-left', {
           'cursor-not-allowed': disabled,
           'opacity-60': disabled,
           'hover:bg-black': !disabled,
diff --git a/src/components/strategies/overview/strategyBlock/StrategyBlockRoi.tsx b/src/components/strategies/overview/strategyBlock/StrategyBlockRoi.tsx
index c63601353..141aebbfb 100644
--- a/src/components/strategies/overview/strategyBlock/StrategyBlockRoi.tsx
+++ b/src/components/strategies/overview/strategyBlock/StrategyBlockRoi.tsx
@@ -21,14 +21,14 @@ export const StrategyBlockRoi: FC<Props> = ({ strategy }) => {
   return (
     <article
       className={cn(
-        'flex flex-col rounded-8 border-2 border-background-800 p-16',
+        'rounded-8 border-background-800 flex flex-col border-2 p-16',
         strategy.status === 'active' ? '' : 'opacity-50'
       )}
     >
       <Tooltip element={<TooltipContent />}>
-        <h4 className="text-secondary flex items-center gap-4 font-mono !text-12">
+        <h4 className="text-12 flex items-center gap-4 font-mono text-white/60">
           ROI
-          <IconTooltip className="h-10 w-10" />
+          <IconTooltip className="size-10" />
         </h4>
       </Tooltip>
       <p className={`text-18 font-weight-500 ${color}`}>{roiFormatted.value}</p>
@@ -44,7 +44,7 @@ const TooltipContent: FC<{}> = () => (
     </span>
     <NewTabLink to={externalLinks.roiLearnMore} className="text-primary">
       <span className="align-middle">Learn how ROI is calculated.</span>
-      <IconLink className="mb-1 inline-block h-14 w-14 align-middle" />
+      <IconLink className="mb-1 inline-block size-14 align-middle" />
     </NewTabLink>
   </>
 );
diff --git a/src/components/strategies/overview/strategyBlock/StrategyGraph.tsx b/src/components/strategies/overview/strategyBlock/StrategyGraph.tsx
index 506b942b0..ff7c90252 100644
--- a/src/components/strategies/overview/strategyBlock/StrategyGraph.tsx
+++ b/src/components/strategies/overview/strategyBlock/StrategyGraph.tsx
@@ -568,17 +568,17 @@ const OrderTooltip: FC<OrderTooltipProps> = ({ strategy, buy }) => {
   const color = buy ? 'text-buy' : 'text-sell';
   return (
     <article
-      className="flex flex-col gap-16 text-14"
+      className="text-14 flex flex-col gap-16"
       data-testid="order-tooltip"
     >
       <h3 className={cn('text-16 font-weight-500', color)}>
         {buy ? 'Buy' : 'Sell'} {base.symbol}
       </h3>
       {limit && (
-        <table className="border-separate rounded-8 border border-white/40">
+        <table className="rounded-8 border-separate border border-white/40">
           <tbody>
             <tr>
-              <th className="p-8 text-start font-weight-400 text-white/60">
+              <th className="font-weight-400 p-8 text-start text-white/60">
                 Price
               </th>
               <td className="p-8 text-end" data-testid="price">
@@ -589,10 +589,10 @@ const OrderTooltip: FC<OrderTooltipProps> = ({ strategy, buy }) => {
         </table>
       )}
       {!limit && (
-        <table className="border-separate rounded-8 border border-white/40 font-mono">
+        <table className="rounded-8 border-separate border border-white/40 font-mono">
           <tbody>
             <tr>
-              <th className="p-8 pb-4 text-start font-weight-400 text-white/60">
+              <th className="font-weight-400 p-8 pb-4 text-start text-white/60">
                 Min Price
               </th>
               <td className="p-8 pb-4 text-end" data-testid="min-price">
@@ -600,7 +600,7 @@ const OrderTooltip: FC<OrderTooltipProps> = ({ strategy, buy }) => {
               </td>
             </tr>
             <tr>
-              <th className="p-8 pt-4 text-start font-weight-400 text-white/60">
+              <th className="font-weight-400 p-8 pt-4 text-start text-white/60">
                 Max Price
               </th>
               <td className="p-8 pt-4 text-end" data-testid="max-price">
@@ -622,10 +622,10 @@ const OrderTooltip: FC<OrderTooltipProps> = ({ strategy, buy }) => {
         href="https://faq.carbondefi.xyz/trading-strategies/order-dynamics"
         target="_blank"
         rel="noreferrer"
-        className="inline-flex items-center gap-4 font-weight-500 text-primary"
+        className="font-weight-500 text-primary inline-flex items-center gap-4"
       >
         <span>Learn more about marginal price</span>
-        <IconLink className="inline h-12 w-12" />
+        <IconLink className="inline size-12" />
       </a>
     </article>
   );
diff --git a/src/components/strategies/overview/strategyBlock/TokenPrice.tsx b/src/components/strategies/overview/strategyBlock/TokenPrice.tsx
index e9040f9a2..39e26e9a2 100644
--- a/src/components/strategies/overview/strategyBlock/TokenPrice.tsx
+++ b/src/components/strategies/overview/strategyBlock/TokenPrice.tsx
@@ -20,9 +20,7 @@ export const TokenPrice: FC<Props> = ({
       className={cn('flex items-center gap-4', className)}
       data-testid={testId}
     >
-      {iconSrc && (
-        <LogoImager className="h-16 w-16" src={iconSrc} alt="token" />
-      )}
+      {iconSrc && <LogoImager className="size-16" src={iconSrc} alt="token" />}
       {price}
     </div>
   );
diff --git a/src/components/strategies/portfolio/PortfolioMobileCard.tsx b/src/components/strategies/portfolio/PortfolioMobileCard.tsx
index d4302eea0..8908aa23b 100644
--- a/src/components/strategies/portfolio/PortfolioMobileCard.tsx
+++ b/src/components/strategies/portfolio/PortfolioMobileCard.tsx
@@ -63,7 +63,7 @@ export const CardSection: FC<{ title: string; value: string }> = ({
 }) => {
   return (
     <div>
-      <div className={cn('!text-12', 'text-white/60')}>{title}</div>
+      <div className="text-12 text-white/60">{title}</div>
       <div>{value}</div>
     </div>
   );
diff --git a/src/components/strategies/portfolio/PortfolioPieChart.tsx b/src/components/strategies/portfolio/PortfolioPieChart.tsx
index cf547b2b0..04e540ce5 100644
--- a/src/components/strategies/portfolio/PortfolioPieChart.tsx
+++ b/src/components/strategies/portfolio/PortfolioPieChart.tsx
@@ -17,16 +17,10 @@ export const PortfolioPieChart = ({
   hideChart,
 }: Props) => {
   return (
-    <div
-      className={
-        'relative aspect-square w-full flex-shrink-0 rounded-10 bg-background-900 md:h-[400px] md:w-[400px]'
-      }
-    >
-      <div
-        className={'absolute flex h-full w-full items-center justify-center'}
-      >
+    <div className="rounded-10 bg-background-900 relative aspect-square w-full flex-shrink-0 md:size-[400px]">
+      <div className="absolute flex size-full items-center justify-center">
         {isLoading ? (
-          <div className={'h-[80px]'}>
+          <div className="h-[80px]">
             <CarbonLogoLoading />
           </div>
         ) : (
diff --git a/src/components/strategies/portfolio/allTokens/PortfolioAllTokensDesktop.tsx b/src/components/strategies/portfolio/allTokens/PortfolioAllTokensDesktop.tsx
index 12657119b..115889a34 100644
--- a/src/components/strategies/portfolio/allTokens/PortfolioAllTokensDesktop.tsx
+++ b/src/components/strategies/portfolio/allTokens/PortfolioAllTokensDesktop.tsx
@@ -30,7 +30,7 @@ const CellToken = (info: CellContext<PortfolioData, Token>) => {
         className={cn('h-32', 'w-4', 'rounded-r-2')}
         style={{ backgroundColor: getColorByIndex(i) }}
       />
-      <LogoImager alt={'Token Logo'} src={logoURI} className={'h-32 w-32'} />
+      <LogoImager alt="Token Logo" src={logoURI} className="size-32" />
       <div>{symbol}</div>
     </div>
   );
diff --git a/src/components/strategies/portfolio/allTokens/PortfolioAllTokensMobile.tsx b/src/components/strategies/portfolio/allTokens/PortfolioAllTokensMobile.tsx
index acdcec14e..3418c8aea 100644
--- a/src/components/strategies/portfolio/allTokens/PortfolioAllTokensMobile.tsx
+++ b/src/components/strategies/portfolio/allTokens/PortfolioAllTokensMobile.tsx
@@ -45,24 +45,24 @@ export const PortfolioAllTokensMobile: FC<Props> = ({
               <div className={cn('flex', 'items-center', 'text-18')}>
                 <LogoImager
                   src={value.token.logoURI}
-                  alt={'Token Logo'}
+                  alt="Token Logo"
                   className={cn('w-36', 'h-36', 'mr-10')}
                 />
                 {value.token.symbol}
               </div>
 
               <CardSection
-                title={'Amount'}
+                title="Amount"
                 value={buildAmountString(value.amount, value.token)}
               />
 
               <CardSection
-                title={'Share'}
+                title="Share"
                 value={buildPercentageString(value.share)}
               />
 
               <CardSection
-                title={'Value'}
+                title="Value"
                 value={getFiatDisplayValue(value.value, selectedFiatCurrency)}
               />
             </PortfolioMobileCard>
diff --git a/src/components/strategies/portfolio/allTokens/usePortfolioAllTokensPieChart.ts b/src/components/strategies/portfolio/allTokens/usePortfolioAllTokensPieChart.ts
index c4d4941ca..ed83c4b06 100644
--- a/src/components/strategies/portfolio/allTokens/usePortfolioAllTokensPieChart.ts
+++ b/src/components/strategies/portfolio/allTokens/usePortfolioAllTokensPieChart.ts
@@ -44,7 +44,7 @@ export const usePortfolioAllTokensPieChart = (data: PortfolioData[]) => {
         useHTML: true,
         formatter: function () {
           return (
-            '<div class="p-10 text-14 text-white !font-weight-500 space-y-12">' +
+            '<div class="p-10 text-14 text-white font-weight-500 space-y-12">' +
             '<div class="flex items-center w-[230px] space-x-10">' +
             '<img alt="Token Logo" width="30" height="30" src="' +
             data[this.colorIndex].token.logoURI +
diff --git a/src/components/strategies/portfolio/token/PortfolioTokenHeader.tsx b/src/components/strategies/portfolio/token/PortfolioTokenHeader.tsx
index 8020b13d2..47c6a2c0b 100644
--- a/src/components/strategies/portfolio/token/PortfolioTokenHeader.tsx
+++ b/src/components/strategies/portfolio/token/PortfolioTokenHeader.tsx
@@ -24,7 +24,7 @@ export const PortfolioTokenHeader: FC<Props> = ({
         'w-full',
         'bg-background-800',
         'rounded-10',
-        'h-64 lg:h-95',
+        'lg:h-95 h-64',
         'px-20',
         'md:mb-20',
         'lg:-mb-15',
@@ -41,16 +41,12 @@ export const PortfolioTokenHeader: FC<Props> = ({
           'items-center',
           'bg-background-900',
           'rounded-full',
-          'h-32 w-32'
+          'size-32'
         )}
       >
-        <IconBack className={'h-10'} />
+        <IconBack className="h-10" />
       </Link>
-      <LogoImager
-        alt={'Token Logo'}
-        src={logoURI}
-        className={'mx-16 h-32 w-32'}
-      />
+      <LogoImager alt="Token Logo" src={logoURI} className="mx-16 size-32" />
       <span>{symbol ?? 'N/A'}</span>
     </div>
   );
diff --git a/src/components/strategies/portfolio/token/PortfolioTokenMobile.tsx b/src/components/strategies/portfolio/token/PortfolioTokenMobile.tsx
index d10251fe5..2b3afd2d7 100644
--- a/src/components/strategies/portfolio/token/PortfolioTokenMobile.tsx
+++ b/src/components/strategies/portfolio/token/PortfolioTokenMobile.tsx
@@ -32,30 +32,30 @@ export const PortfolioTokenMobile: FC<PortfolioTokenProps> = ({
             <PortfolioMobileCard
               key={i}
               index={i}
-              gridColsClassName={'grid-cols-3'}
+              gridColsClassName="grid-cols-3"
             >
               <CardSection
-                title={'ID'}
+                title="ID"
                 value={`ID ${value.strategy.idDisplay}`}
               />
 
               <CardSection
-                title={'Pair'}
+                title="Pair"
                 value={buildPairNameByStrategy(value.strategy)}
               />
 
               <CardSection
-                title={'Share'}
+                title="Share"
                 value={buildPercentageString(value.share)}
               />
 
               <CardSection
-                title={'Value'}
+                title="Value"
                 value={getFiatDisplayValue(value.value, selectedFiatCurrency)}
               />
 
               <CardSection
-                title={'Amount'}
+                title="Amount"
                 value={buildAmountString(value.amount, selectedToken)}
               />
             </PortfolioMobileCard>
diff --git a/src/components/strategies/portfolio/token/PortfolioTokenPieChartCenter.tsx b/src/components/strategies/portfolio/token/PortfolioTokenPieChartCenter.tsx
index d3f21f2e8..66b952dd6 100644
--- a/src/components/strategies/portfolio/token/PortfolioTokenPieChartCenter.tsx
+++ b/src/components/strategies/portfolio/token/PortfolioTokenPieChartCenter.tsx
@@ -3,7 +3,7 @@ import { PortfolioData } from 'components/strategies/portfolio/usePortfolioData'
 import { buildAmountString } from 'components/strategies/portfolio/utils';
 import { FC } from 'react';
 import { useStore } from 'store';
-import { cn, getFiatDisplayValue } from 'utils/helpers';
+import { getFiatDisplayValue } from 'utils/helpers';
 
 type Props = {
   data?: PortfolioData;
@@ -18,22 +18,22 @@ export const PortfolioTokenPieChartCenter: FC<Props> = ({ data }) => {
   if (!data) return null;
 
   return (
-    <div className={cn('flex', 'flex-col', 'items-center', 'space-y-6')}>
-      <div className={cn('flex', 'items-center', 'font-weight-500', 'text-18')}>
+    <div className="flex flex-col items-center space-y-6">
+      <div className="font-weight-500 text-18 flex items-center">
         <LogoImager
-          alt={'Token Logo'}
+          alt="Token Logo"
           src={data.token.logoURI}
-          className={'mr-10 h-24 w-24'}
+          className="mr-10 size-24"
         />
         {data.token.symbol}
       </div>
-      <div className={cn('text-20', 'font-weight-500')}>
+      <div className="text-20 font-weight-500">
         {getFiatDisplayValue(data.value, selectedFiatCurrency)}
       </div>
-      <div className={cn('!text-white/60', 'font-weight-500')}>
+      <div className="font-weight-500 text-white/60">
         {buildAmountString(data.amount, data.token)}
       </div>
-      <div className={cn('text-white/60', 'font-weight-500')}>
+      <div className="font-weight-500 text-white/60">
         {getStrategyText(data.strategies.length)}
       </div>
     </div>
diff --git a/src/components/strategies/portfolio/token/usePortfolioTokenPieChart.ts b/src/components/strategies/portfolio/token/usePortfolioTokenPieChart.ts
index fb30453bb..290687843 100644
--- a/src/components/strategies/portfolio/token/usePortfolioTokenPieChart.ts
+++ b/src/components/strategies/portfolio/token/usePortfolioTokenPieChart.ts
@@ -49,7 +49,7 @@ export const usePortfolioTokenPieChart = (
         useHTML: true,
         formatter: function () {
           return (
-            '<div class="p-10 text-14 text-white !font-weight-500 space-y-12 w-[230px]">' +
+            '<div class="p-10 text-14 text-white font-weight-500 space-y-12 w-[230px]">' +
             '<div class="flex justify-between">' +
             '<span class="text-white/60">ID</span>' +
             data[this.point.index].strategy.idDisplay +
diff --git a/src/components/trade/depthChartWidget/DepthChartWidget.tsx b/src/components/trade/depthChartWidget/DepthChartWidget.tsx
index a6c295057..af233470c 100644
--- a/src/components/trade/depthChartWidget/DepthChartWidget.tsx
+++ b/src/components/trade/depthChartWidget/DepthChartWidget.tsx
@@ -5,6 +5,7 @@ import { TradePageProps } from 'pages/trade';
 import { NoOrders } from 'components/common/noOrder';
 import { CarbonLogoLoading } from 'components/common/CarbonLogoLoading';
 import { TradingviewChart } from 'components/tradingviewChart';
+import { cn } from 'utils/helpers';
 
 export const DepthChartWidget = ({ base, quote }: TradePageProps) => {
   const { buyOrders, sellOrders, getOptions, isLoading } = useDepthChartWidget(
@@ -21,36 +22,40 @@ export const DepthChartWidget = ({ base, quote }: TradePageProps) => {
       <div className="mb-20 flex w-[244px] items-center rounded-[100px] bg-black p-2">
         <button
           onClick={() => setShowTVChart(false)}
-          className={`rounded-40 ${
-            !showTVChart ? 'bg-background-900' : 'text-secondary'
-          } w-[120px] px-10 py-4`}
+          className={cn(
+            'rounded-40',
+            !showTVChart ? 'bg-background-900' : 'text-14 text-white/60',
+            'w-[120px] px-10 py-4'
+          )}
         >
           Depth
         </button>
         <button
           onClick={() => setShowTVChart(true)}
-          className={`rounded-40 ${
-            showTVChart ? 'bg-background-900' : 'text-secondary'
-          } w-[120px] px-10 py-4`}
+          className={cn(
+            'rounded-40',
+            showTVChart ? 'bg-background-900' : 'text-14 text-white/60',
+            'w-[120px] px-10 py-4'
+          )}
         >
           Price
         </button>
       </div>
 
       {isLoading ? (
-        <div className="flex h-[450px] items-center justify-center rounded-10 bg-black">
-          <div className={'h-80'}>
+        <div className="rounded-10 flex h-[450px] items-center justify-center bg-black">
+          <div className="h-80">
             <CarbonLogoLoading />
           </div>
         </div>
       ) : isError ? (
-        <div className="flex items-center justify-center rounded-10 bg-black">
+        <div className="rounded-10 flex items-center justify-center bg-black">
           <NoOrders />
         </div>
       ) : !showTVChart ? (
         <HighchartsReact highcharts={Highcharts} options={options} />
       ) : (
-        <div className={'h-[450px] pb-20'}>
+        <div className="h-[450px] pb-20">
           <TradingviewChart base={base} quote={quote} />
         </div>
       )}
diff --git a/src/components/trade/orderWidget/OrderBookSide.tsx b/src/components/trade/orderWidget/OrderBookSide.tsx
index 9b0bd6101..3f39f1ef1 100644
--- a/src/components/trade/orderWidget/OrderBookSide.tsx
+++ b/src/components/trade/orderWidget/OrderBookSide.tsx
@@ -26,20 +26,20 @@ export const OrderBookSide: FC<OrderBookSideProps> = ({
     <AnimatePresence exitBeforeEnter={true}>
       {isLoading ? (
         <m.div
-          key={'loading'}
-          className={'flex h-[392px] w-full items-center justify-center'}
+          key="loading"
+          className="flex h-[392px] w-full items-center justify-center"
           initial={{ opacity: 0, scale: 0.5 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{ opacity: 0 }}
         >
-          <div className={'h-[80px]'}>
+          <div className="h-[80px]">
             <CarbonLogoLoading />
           </div>
         </m.div>
       ) : orders?.length > 0 ? (
         <m.div
-          key={'orders'}
-          className={'grid grid-cols-3 gap-x-10'}
+          key="orders"
+          className="grid grid-cols-3 gap-x-10"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -60,7 +60,7 @@ export const OrderBookSide: FC<OrderBookSideProps> = ({
         </m.div>
       ) : (
         <m.div
-          className="flex h-[392px] items-center justify-center rounded-10 bg-black text-center"
+          className="rounded-10 flex h-[392px] items-center justify-center bg-black text-center"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
diff --git a/src/components/trade/orderWidget/OrderBookWidget.tsx b/src/components/trade/orderWidget/OrderBookWidget.tsx
index a16cee660..fc518cf3a 100644
--- a/src/components/trade/orderWidget/OrderBookWidget.tsx
+++ b/src/components/trade/orderWidget/OrderBookWidget.tsx
@@ -23,7 +23,7 @@ export const OrderBookWidget = ({ base, quote }: TradePageProps) => {
           baseSymbol={base.symbol}
           quoteSymbol={quote.symbol}
         />
-        <div className="mt-2 rounded-b-10 rounded-t-4 bg-black px-20 py-8 text-14">
+        <div className="rounded-b-10 rounded-t-4 text-14 mt-2 bg-black px-20 py-8">
           <OrderBookSide
             isLoading={isLoading}
             orders={sell}
diff --git a/src/components/trade/orderWidget/OrderBookWidgetHeader.tsx b/src/components/trade/orderWidget/OrderBookWidgetHeader.tsx
index b8bc1065e..3c703a4c3 100644
--- a/src/components/trade/orderWidget/OrderBookWidgetHeader.tsx
+++ b/src/components/trade/orderWidget/OrderBookWidgetHeader.tsx
@@ -11,7 +11,7 @@ export const OrderBookWidgetHeader: FC<Props> = ({
   quoteSymbol,
 }) => {
   return (
-    <p className="text-secondary grid grid-cols-3 rounded-t-10 rounded-b-4 bg-black px-20 pt-15 pb-12">
+    <p className="text-14 rounded-t-10 rounded-b-4 pt-15 grid grid-cols-3 bg-black px-20 pb-12 text-white/60">
       <Tooltip element={`Price points denominated in ${quoteSymbol}`}>
         <span>Price ({quoteSymbol})</span>
       </Tooltip>
diff --git a/src/components/trade/orderWidget/OrderBookWidgetRate.tsx b/src/components/trade/orderWidget/OrderBookWidgetRate.tsx
index bb4b9a36f..77cab23df 100644
--- a/src/components/trade/orderWidget/OrderBookWidgetRate.tsx
+++ b/src/components/trade/orderWidget/OrderBookWidgetRate.tsx
@@ -19,15 +19,15 @@ export const OrderBookWidgetRate: FC<Props> = ({
 }) => {
   const { selectedFiatCurrency: currentCurrency } = useFiatCurrency();
   return (
-    <div className="-mx-10 my-10 flex items-center rounded-8 bg-background-900 px-10 py-10 text-16">
+    <div className="rounded-8 bg-background-900 text-16 -mx-10 my-10 flex items-center px-10 py-10">
       <Tooltip element="The mid-market price based on the last trade">
         <span className="flex items-center ">
           {prettifyNumber(rate, { decimals: 6 })}
           {!isLoading && (
             <div
               className={`${
-                buy ? 'rotate-180 bg-buy/25' : 'bg-sell/25'
-              } ml-8 flex h-20 w-20 items-center justify-center rounded-full`}
+                buy ? 'bg-buy/25 rotate-180' : 'bg-sell/25'
+              } ml-8 flex size-20 items-center justify-center rounded-full`}
             >
               <IconArrow className={`${buy ? 'text-buy' : 'text-sell'} w-10`} />
             </div>
diff --git a/src/components/trade/settings/TradeSettings.tsx b/src/components/trade/settings/TradeSettings.tsx
index 1f4484513..95128dbc0 100644
--- a/src/components/trade/settings/TradeSettings.tsx
+++ b/src/components/trade/settings/TradeSettings.tsx
@@ -56,7 +56,7 @@ export const TradeSettings = ({
   ];
 
   return (
-    <div className={'mt-30'}>
+    <div className="mt-30">
       {settingsData.map((item) => (
         <Fragment key={item.id}>
           <TradeSettingsRow
@@ -65,9 +65,7 @@ export const TradeSettings = ({
             base={base}
             quote={quote}
           />
-          <hr
-            className={'my-20 border-b-2 border-background-700 last:hidden'}
-          />
+          <hr className="border-background-700 my-20 border-b-2 last:hidden" />
         </Fragment>
       ))}
     </div>
diff --git a/src/components/trade/settings/TradeSettingsRow.tsx b/src/components/trade/settings/TradeSettingsRow.tsx
index b46a73983..4f3929d22 100644
--- a/src/components/trade/settings/TradeSettingsRow.tsx
+++ b/src/components/trade/settings/TradeSettingsRow.tsx
@@ -6,14 +6,14 @@ import {
   TradeSettingsData,
   warningMessageIfOutOfRange,
 } from './utils';
-import { sanitizeNumber } from 'utils/helpers';
+import { cn, sanitizeNumber } from 'utils/helpers';
 import { Button } from 'components/common/button';
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 
-const buttonClasses =
-  'rounded-8 !text-white/60 hover:text-primary hover:border-primary px-5';
-const buttonActiveClasses = '!border-primary';
-const buttonErrorClasses = '!border-error !text-error focus:text-error';
+const buttonClasses = 'rounded-8 text-white/60 hover:border-primary px-5';
+const buttonActiveClasses = 'border-primary';
+const buttonErrorClasses =
+  'border-error text-error hover:border-error focus:text-error';
 const inputClasses =
   'border-2 border-black bg-black text-center placeholder-white/25 focus:outline-none';
 
@@ -86,19 +86,20 @@ export const TradeSettingsRow: FC<{
 
   return (
     <div>
-      <div className={'text-white/60'}>{item.title}</div>
-      <div className={'mt-10 grid grid-cols-4 gap-10'}>
+      <div className="text-white/60">{item.title}</div>
+      <div className="mt-10 grid grid-cols-4 gap-10">
         {item.presets.map((value) => (
           <Button
             key={value}
-            variant={'black'}
+            variant="black"
             onClick={() => {
               setInternalValue('');
               item.setValue(value);
             }}
-            className={`${buttonClasses} ${
-              item.value === value ? buttonActiveClasses : ''
-            }`}
+            className={cn(
+              buttonClasses,
+              item.value === value && buttonActiveClasses
+            )}
           >
             {item.prepend}
             {value}
@@ -106,19 +107,20 @@ export const TradeSettingsRow: FC<{
           </Button>
         ))}
         <input
-          placeholder={'Custom'}
+          placeholder="Custom"
           value={internalValue}
           onBlur={handleOnBlur}
           onChange={handleOnInputChange}
-          className={`${buttonClasses} ${inputClasses} ${
-            isError ? buttonErrorClasses : ''
-          }${!item.presets.includes(item.value) ? buttonActiveClasses : ''}`}
+          className={cn(
+            buttonClasses,
+            inputClasses,
+            !item.presets.includes(item.value) && buttonActiveClasses,
+            isError && buttonErrorClasses
+          )}
         />
       </div>
       {warningMessage && (
-        <div
-          className={`mt-15 flex font-mono text-12 font-weight-500 text-warning`}
-        >
+        <div className="mt-15 text-12 font-weight-500 text-warning flex font-mono">
           <IconWarning className={`w-14 ${isError ? 'text-error' : ''}`} />
           <span className={`ml-5 ${isError ? 'text-error' : ''}`}>
             {warningMessage}
diff --git a/src/components/trade/tradeWidget/NotEnoughLiquidity.tsx b/src/components/trade/tradeWidget/NotEnoughLiquidity.tsx
index b75bba56e..e3d044c4a 100644
--- a/src/components/trade/tradeWidget/NotEnoughLiquidity.tsx
+++ b/src/components/trade/tradeWidget/NotEnoughLiquidity.tsx
@@ -20,19 +20,19 @@ export const NotEnoughLiquidity = ({
   return (
     <div className="t-grey mt-5 min-h-[228px] flex-1">
       <div
-        className={`flex h-full flex-col items-center
-          justify-center rounded-12 border border-error/100 px-[4rem] text-center text-14 font-weight-400`}
+        className={`rounded-12 border-error/100 text-14 font-weight-400
+          flex h-full flex-col items-center justify-center border px-[4rem] text-center`}
       >
-        <div className="mb-16 flex flex h-38 w-38 items-center justify-center rounded-full bg-error/10">
-          <IconWarning className="h-16 w-16 fill-error/100" />
+        <div className="size-38 bg-error/10 mb-16 flex items-center justify-center rounded-full">
+          <IconWarning className="fill-error/100 size-16" />
         </div>
-        <div className="mb-8 font-weight-500">No Liquidity Available</div>
+        <div className="font-weight-500 mb-8">No Liquidity Available</div>
         <div>No available orders at this moment.</div>
         <div>
           You can&nbsp;
           <span
             onClick={() => duplicate()}
-            className="cursor-pointer font-weight-500"
+            className="font-weight-500 cursor-pointer"
           >
             Create a Strategy.
           </span>
diff --git a/src/components/trade/tradeWidget/TradeWidgetBuySell.tsx b/src/components/trade/tradeWidget/TradeWidgetBuySell.tsx
index 16d7d4f72..20239787b 100644
--- a/src/components/trade/tradeWidget/TradeWidgetBuySell.tsx
+++ b/src/components/trade/tradeWidget/TradeWidgetBuySell.tsx
@@ -183,7 +183,7 @@ export const TradeWidgetBuySell = (props: TradeWidgetBuySellProps) => {
     <form
       {...formProps}
       onSubmit={handleTrade}
-      className="flex flex-col rounded-12 bg-background-900 p-20"
+      className="rounded-12 bg-background-900 flex flex-col p-20"
     >
       <h2 className="mb-20">
         {buy
@@ -192,7 +192,7 @@ export const TradeWidgetBuySell = (props: TradeWidgetBuySellProps) => {
       </h2>
       {hasEnoughLiquidity || liquidityQuery.isLoading ? (
         <>
-          <header className="flex justify-between text-14">
+          <header className="text-14 flex justify-between">
             <label htmlFor={`${id}-pay`} className="text-white/50">
               You pay
             </label>
@@ -207,7 +207,7 @@ export const TradeWidgetBuySell = (props: TradeWidgetBuySellProps) => {
           </header>
           <TokenInputField
             id={`${id}-pay`}
-            className="mb-20 mt-5 rounded-12 bg-black p-16"
+            className="rounded-12 mb-20 mt-5 bg-black p-16"
             token={source}
             isBalanceLoading={sourceBalanceQuery.isLoading}
             value={sourceInput}
@@ -220,14 +220,14 @@ export const TradeWidgetBuySell = (props: TradeWidgetBuySellProps) => {
             isError={!!errorMsgSource}
             disabled={!hasEnoughLiquidity}
           />
-          <header className="flex justify-between text-14">
+          <header className="text-14 flex justify-between">
             <label htmlFor={`${id}-receive`} className="text-white/50">
               You receive
             </label>
             {errorMsgTarget && (
               <button
                 type="button"
-                className="cursor-pointer font-weight-500 text-error"
+                className="font-weight-500 text-error cursor-pointer"
                 onClick={() => {
                   onInputChange(false);
                   setTargetInput(liquidityQuery.data || '0');
@@ -239,7 +239,7 @@ export const TradeWidgetBuySell = (props: TradeWidgetBuySellProps) => {
           </header>
           <TokenInputField
             id={`${id}-receive`}
-            className="mt-5 rounded-b-4 rounded-t-12 bg-black p-16"
+            className="rounded-b-4 rounded-t-12 mt-5 bg-black p-16"
             token={target}
             value={targetInput}
             setValue={(value) => setTargetInput(value)}
@@ -250,13 +250,13 @@ export const TradeWidgetBuySell = (props: TradeWidgetBuySellProps) => {
             slippage={slippage}
             disabled={!hasEnoughLiquidity}
           />
-          <footer className="mt-5 flex justify-between rounded-b-12 rounded-t-4 bg-black p-16 font-mono text-14 text-white/80">
+          <footer className="rounded-b-12 rounded-t-4 text-14 mt-5 flex justify-between bg-black p-16 font-mono text-white/80">
             <p>{getRate()}</p>
             {showRouting && (
               <button
                 type="button"
                 onClick={openTradeRouteModal}
-                className="flex hidden space-x-10 text-left hover:text-white md:flex"
+                className="flex space-x-10 text-left hover:text-white md:flex"
                 data-testid="routing"
               >
                 <IconRouting className="w-12" />
@@ -270,7 +270,7 @@ export const TradeWidgetBuySell = (props: TradeWidgetBuySellProps) => {
             )}
           </footer>
           {IS_TENDERLY_FORK && (
-            <div className="text-secondary mt-5 text-right">
+            <div className="text-14 mt-5 text-right text-white/60">
               DEBUG: {getLiquidity()}
             </div>
           )}
diff --git a/src/components/tradingviewChart/copyrights.tsx b/src/components/tradingviewChart/copyrights.tsx
index 41a272886..6f26e9253 100644
--- a/src/components/tradingviewChart/copyrights.tsx
+++ b/src/components/tradingviewChart/copyrights.tsx
@@ -8,7 +8,7 @@ export const Copyright: FC<CopyrightProps> = ({ symbol }) => {
   const href = `https://www.tradingview.com/symbols/${symbol}`;
 
   return (
-    <div className="text-center align-middle text-12 leading-10 text-[#9db2bd]">
+    <div className="text-12 text-center align-middle leading-10 text-[#9db2bd]">
       <a
         className="text-[#9db2bd] no-underline"
         href={href}
diff --git a/src/index.css b/src/index.css
index 5e74878d7..72a908231 100644
--- a/src/index.css
+++ b/src/index.css
@@ -14,7 +14,7 @@
   --mobile-menu-height: 80px;
 }
 
-input[type="checkbox"] {
+input[type='checkbox'] {
   width: 18px;
   height: 18px;
   accent-color: var(--primary);
@@ -24,9 +24,9 @@ input[type="checkbox"] {
   html,
   body,
   #root {
-    @apply text-white bg-black font-gt-america w-full min-h-screen;
+    @apply font-gt-america min-h-screen w-full bg-black text-white;
   }
-  
+
   /** Some Browsers set outline on :focus instead of :focus-visible for svg element */
   svg *:focus {
     outline: none;
@@ -47,11 +47,11 @@ input[type="checkbox"] {
   }
 
   h1 {
-    @apply my-3 text-36 font-weight-500;
+    @apply text-36 font-weight-500 my-3;
   }
 
   h2 {
-    @apply my-2 text-20 font-weight-500;
+    @apply text-20 font-weight-500 my-2;
   }
 
   h3 {
@@ -74,30 +74,26 @@ input[type="checkbox"] {
 @layer components {
   .main-menu {
     height: var(--main-menu-height);
-    @apply bg-black px-content flex w-full items-center justify-between font-weight-500 text-white/50;
+    @apply px-content font-weight-500 flex w-full items-center justify-between bg-black text-white/50;
   }
 
   .mobile-menu {
     height: var(--mobile-menu-height);
-    @apply bg-black z-40 fixed bottom-0 flex w-full flex-shrink-0 items-center justify-around border-t px-10 font-weight-500 text-white/50 border-background-800 md:hidden;
+    @apply font-weight-500 border-background-800 fixed bottom-0 z-40 flex w-full flex-shrink-0 items-center justify-around border-t bg-black px-10 text-white/50 md:hidden;
   }
 }
 
 @layer utilities {
   .bg-content {
-    @apply border border-background-800 bg-black;
+    @apply border-background-800 border bg-black;
   }
 
   .px-content {
-    @apply px-10 md:px-20 w-full;
-  }
-
-  .text-secondary {
-    @apply text-14 text-white/60;
+    @apply w-full px-10 md:px-20;
   }
 
   .loading-skeleton {
-    @apply animate-pulse rounded-10 bg-background-900;
+    @apply rounded-10 bg-background-900 animate-pulse;
   }
 }
 
@@ -143,7 +139,7 @@ input[type="checkbox"] {
 }
 
 .dot-pulse {
-  display:flex;
+  display: flex;
   position: relative;
   left: -9999px;
   width: 7px;
@@ -153,8 +149,9 @@ input[type="checkbox"] {
   animation: dot-pulse 1.5s infinite linear;
   animation-delay: 0.25s;
 }
-.dot-pulse::before, .dot-pulse::after {
-  content: "";
+.dot-pulse::before,
+.dot-pulse::after {
+  content: '';
   display: inline-block;
   position: absolute;
   top: 0;
@@ -180,7 +177,8 @@ input[type="checkbox"] {
   30% {
     box-shadow: 9984px 0 0 2px;
   }
-  60%, 100% {
+  60%,
+  100% {
     box-shadow: 9984px 0 0 -5px;
   }
 }
@@ -191,7 +189,8 @@ input[type="checkbox"] {
   30% {
     box-shadow: 9999px 0 0 2px;
   }
-  60%, 100% {
+  60%,
+  100% {
     box-shadow: 9999px 0 0 -5px;
   }
 }
@@ -202,11 +201,12 @@ input[type="checkbox"] {
   30% {
     box-shadow: 10014px 0 0 2px;
   }
-  60%, 100% {
+  60%,
+  100% {
     box-shadow: 10014px 0 0 -5px;
   }
 }
 
-input[type="search"]::-webkit-search-cancel-button {
+input[type='search']::-webkit-search-cancel-button {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/src/libs/d3/primitives/D3LinePath.tsx b/src/libs/d3/primitives/D3LinePath.tsx
index b438c943a..2bdf7e169 100644
--- a/src/libs/d3/primitives/D3LinePath.tsx
+++ b/src/libs/d3/primitives/D3LinePath.tsx
@@ -18,12 +18,6 @@ export const D3LinePath = <T,>({
   const d = lineGenerator(data) ?? undefined;
 
   return (
-    <path
-      fill={'none'}
-      stroke={'currentColor'}
-      strokeWidth={1}
-      {...props}
-      d={d}
-    />
+    <path fill="none" stroke="currentColor" strokeWidth={1} {...props} d={d} />
   );
 };
diff --git a/src/libs/d3/primitives/D3XAxis.tsx b/src/libs/d3/primitives/D3XAxis.tsx
index 3d79e2ad3..7ce9d66ca 100644
--- a/src/libs/d3/primitives/D3XAxis.tsx
+++ b/src/libs/d3/primitives/D3XAxis.tsx
@@ -13,7 +13,7 @@ export const D3XAxis = ({ ticks, dms }: Props) => {
       {/*<path*/}
       {/*  d={['M', 0, 6, 'v', -6, 'H', dms.boundedWidth, 'v', 6].join(' ')}*/}
       {/*  fill="none"*/}
-      {/*  className={'stroke-background-800'}*/}
+      {/*  className='stroke-background-800'*/}
       {/*/>*/}
       <line
         x1={-dms.marginLeft}
@@ -25,7 +25,7 @@ export const D3XAxis = ({ ticks, dms }: Props) => {
           <line
             y1={dms.boundedHeight * -1}
             y2="0"
-            className={'stroke-background-800'}
+            className="stroke-background-800"
           />
           <text
             key={value}
diff --git a/src/libs/d3/primitives/D3YAxisLeft.tsx b/src/libs/d3/primitives/D3YAxisLeft.tsx
index 8b2f24f41..860c02bf1 100644
--- a/src/libs/d3/primitives/D3YAxisLeft.tsx
+++ b/src/libs/d3/primitives/D3YAxisLeft.tsx
@@ -14,7 +14,7 @@ export const D3YAxisLeft = ({ ticks, dms, formatter }: D3AxisProps) => {
           <line
             x1={0}
             x2={dms.boundedWidth}
-            className={'stroke-background-800'}
+            className="stroke-background-800"
           />
           <text
             key={value}
@@ -25,7 +25,7 @@ export const D3YAxisLeft = ({ ticks, dms, formatter }: D3AxisProps) => {
             }}
             fill="currentColor"
             opacity={0.6}
-            className={'font-mono'}
+            className="font-mono"
           >
             {formatter ? formatter(value) : value}
           </text>
diff --git a/src/libs/d3/primitives/D3YAxisRight.tsx b/src/libs/d3/primitives/D3YAxisRight.tsx
index 2af8a84ba..22938fe14 100644
--- a/src/libs/d3/primitives/D3YAxisRight.tsx
+++ b/src/libs/d3/primitives/D3YAxisRight.tsx
@@ -19,7 +19,7 @@ export const D3YAxisRight = ({ ticks, dms, formatter }: D3AxisProps) => {
             }}
             fill="currentColor"
             opacity={0.6}
-            className={'font-mono'}
+            className="font-mono"
           >
             {formatter ? formatter(value) : value}
           </text>
diff --git a/src/libs/modals/Modal.tsx b/src/libs/modals/Modal.tsx
index 33b3928bd..188a4240b 100644
--- a/src/libs/modals/Modal.tsx
+++ b/src/libs/modals/Modal.tsx
@@ -51,10 +51,10 @@ export const Modal: FC<ModalProps> = ({
       >
         <div
           data-testid={testId}
-          className="relative flex w-full flex-col gap-20 overflow-hidden rounded-10 border-0 bg-background-900 p-20 outline-none focus:outline-none"
+          className="rounded-10 bg-background-900 relative flex w-full flex-col gap-20 overflow-hidden border-0 p-20 outline-none focus:outline-none"
         >
           {isLoading && (
-            <div className="statusBar absolute inset-x-0 top-0 h-6 bg-primary/25" />
+            <div className="statusBar bg-primary/25 absolute inset-x-0 top-0 h-6" />
           )}
           <header className="flex justify-between">
             {typeof title === 'string' ? (
diff --git a/src/libs/modals/ModalSheet.tsx b/src/libs/modals/ModalSheet.tsx
index 1db6fb387..942113fc8 100644
--- a/src/libs/modals/ModalSheet.tsx
+++ b/src/libs/modals/ModalSheet.tsx
@@ -21,7 +21,7 @@ export const ModalSheet: FC<ModalProps> = ({
   };
 
   return (
-    <Overlay onClick={() => onCloseHandler(id)} className={'items-end'}>
+    <Overlay onClick={() => onCloseHandler(id)} className="items-end">
       <m.div
         data-testid="modal-container"
         onClick={(e) => e.stopPropagation()}
@@ -31,9 +31,9 @@ export const ModalSheet: FC<ModalProps> = ({
         animate="visible"
         exit="exit"
       >
-        <div className="relative flex w-full flex-col gap-20 overflow-hidden rounded-t-10 border-0 bg-background-900 p-20 outline-none focus:outline-none">
+        <div className="rounded-t-10 bg-background-900 relative flex w-full flex-col gap-20 overflow-hidden border-0 p-20 outline-none focus:outline-none">
           {isLoading && (
-            <div className="statusBar absolute inset-x-0 top-0 h-6 bg-primary/25" />
+            <div className="statusBar bg-primary/25 absolute inset-x-0 top-0 h-6" />
           )}
           <header data-testid={testId} className="flex justify-between">
             {typeof title === 'string' ? <h2>{title}</h2> : title}
diff --git a/src/libs/modals/ModalSlideOver.tsx b/src/libs/modals/ModalSlideOver.tsx
index 233869107..104319452 100644
--- a/src/libs/modals/ModalSlideOver.tsx
+++ b/src/libs/modals/ModalSlideOver.tsx
@@ -27,7 +27,7 @@ export const ModalSlideOver: FC<ModalProps> = ({
   const sizeClass = getSize(size);
 
   return (
-    <Overlay onClick={() => closeModal(id)} className={`justify-end`}>
+    <Overlay onClick={() => closeModal(id)} className="justify-end">
       <m.div
         onClick={(e) => e.stopPropagation()}
         className={`relative w-full ${sizeClass}`}
@@ -36,7 +36,7 @@ export const ModalSlideOver: FC<ModalProps> = ({
         animate="visible"
         exit="exit"
       >
-        <div className="relative flex h-screen w-full flex-col border-0 bg-background-900 p-25 outline-none focus:outline-none">
+        <div className="bg-background-900 p-25 relative flex h-screen w-full flex-col border-0 outline-none focus:outline-none">
           <div
             className={`flex items-center ${
               title ? 'justify-between' : 'justify-end'
@@ -44,15 +44,15 @@ export const ModalSlideOver: FC<ModalProps> = ({
           >
             <>
               {typeof title === 'string' ? (
-                <h2 className={'m-0'}>{title}</h2>
+                <h2 className="m-0">{title}</h2>
               ) : (
                 title
               )}
             </>
             <div>
               {showCloseButton ? (
-                <button className={'p-4'} onClick={() => closeModal(id)}>
-                  <IconX className={'w-12'} />
+                <button className="p-4" onClick={() => closeModal(id)}>
+                  <IconX className="w-12" />
                 </button>
               ) : null}
             </div>
diff --git a/src/libs/modals/Overlay.tsx b/src/libs/modals/Overlay.tsx
index 01556b9dd..1d72e8085 100644
--- a/src/libs/modals/Overlay.tsx
+++ b/src/libs/modals/Overlay.tsx
@@ -1,5 +1,6 @@
 import { m, Variants } from 'libs/motion';
 import { FC, MouseEventHandler, ReactNode } from 'react';
+import { cn } from 'utils/helpers';
 
 type Props = {
   className?: string;
@@ -15,7 +16,10 @@ export const Overlay: FC<Props> = ({ children, onClick, className }) => {
       initial="hidden"
       animate="visible"
       exit="exit"
-      className={`fixed inset-0 z-40 flex overflow-hidden bg-black/70 outline-none backdrop-blur focus:outline-none ${className}`}
+      className={cn(
+        'fixed inset-0 z-40 flex overflow-hidden bg-black/70 outline-none backdrop-blur focus:outline-none',
+        className
+      )}
     >
       {children}
     </m.div>
diff --git a/src/libs/modals/modals/ModalBurgerMenu.tsx b/src/libs/modals/modals/ModalBurgerMenu.tsx
index 48c9378a8..9369e556b 100644
--- a/src/libs/modals/modals/ModalBurgerMenu.tsx
+++ b/src/libs/modals/modals/ModalBurgerMenu.tsx
@@ -28,7 +28,7 @@ export const ModalBurgerMenu: ModalFC<undefined> = ({ id }) => {
   }, [isOpen, closeModal, id]);
 
   return (
-    <ModalSlideOver id={id} size={'md'}>
+    <ModalSlideOver id={id} size="md">
       <div className="mt-10">
         {currentMenuItems?.map((item, index) => {
           return (
diff --git a/src/libs/modals/modals/ModalConfirm/ModalConfirm.tsx b/src/libs/modals/modals/ModalConfirm/ModalConfirm.tsx
index 281b8fe71..10233ed9e 100644
--- a/src/libs/modals/modals/ModalConfirm/ModalConfirm.tsx
+++ b/src/libs/modals/modals/ModalConfirm/ModalConfirm.tsx
@@ -51,7 +51,7 @@ export const ModalConfirm: ModalFC<ModalCreateConfirmData> = ({
       size="md"
       data-testid="approval-modal"
     >
-      <h3 className="text-secondary my-10">Approve Tokens</h3>
+      <h3 className="text-14 my-10 text-white/60">Approve Tokens</h3>
       <ul className="space-y-20">
         {approvalQuery.map(({ data, isLoading, error }, i) => (
           <li key={i}>
@@ -67,7 +67,7 @@ export const ModalConfirm: ModalFC<ModalCreateConfirmData> = ({
       </ul>
       <Button
         size="lg"
-        variant={'white'}
+        variant="white"
         fullWidth
         disabled={approvalRequired}
         onClick={async () => {
diff --git a/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmDelete.tsx b/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmDelete.tsx
index c5adcfacf..789ddc50d 100644
--- a/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmDelete.tsx
+++ b/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmDelete.tsx
@@ -56,12 +56,12 @@ export const ModalConfirmDelete: ModalFC<ModalConfirmDeleteData> = ({
     <ModalOrMobileSheet id={id} title="Delete Strategy">
       <IconTitleText
         variant="error"
-        icon={<IconTrash className="h-24 w-24" />}
+        icon={<IconTrash className="size-24" />}
         title="Are you sure you would like to delete your strategy?"
         text="Deleting your strategy will result in all strategy data being lost and impossible to restore. All funds will be withdrawn to your wallet."
       />
       {!isOverlapping && (
-        <article className="grid grid-cols-[1fr_auto] grid-rows-[auto_auto] gap-8 rounded bg-background-800 p-16">
+        <article className="bg-background-800 grid grid-cols-[1fr_auto] grid-rows-[auto_auto] gap-8 rounded p-16">
           <h3 className="text-14 font-weight-500">Did you know ?</h3>
           <Link
             onClick={editPrices}
diff --git a/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmPause.tsx b/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmPause.tsx
index 8e17632e4..c0d6a186a 100644
--- a/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmPause.tsx
+++ b/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmPause.tsx
@@ -39,7 +39,7 @@ export const ModalConfirmPause: ModalFC<ModalConfirmPauseData> = ({
   return (
     <ModalOrMobileSheet id={id} title="Pause Strategy">
       <IconTitleText
-        icon={<IconPause className="h-24 w-24" />}
+        icon={<IconPause className="size-24" />}
         title="Are you sure you would like to pause your strategy?"
         text="This will prevent your strategy from being traded against, however you will retain access to any associated funds."
       />
diff --git a/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmWithdraw.tsx b/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmWithdraw.tsx
index fc66ea725..74a21c012 100644
--- a/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmWithdraw.tsx
+++ b/src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmWithdraw.tsx
@@ -33,7 +33,7 @@ export const ModalConfirmWithdraw: ModalFC<ModalConfirmWithdrawData> = ({
   return (
     <ModalOrMobileSheet id={id} title="Withdraw Funds">
       <IconTitleText
-        icon={<IconWallet className="h-24 w-24" />}
+        icon={<IconWallet className="size-24" />}
         title="Are you sure you would like to withdraw your funds?"
       />
       <article className="grid grid-cols-[1fr_auto] grid-rows-[auto_auto] gap-8 rounded bg-white/10 p-16">
diff --git a/src/libs/modals/modals/ModalConfirmStrategy/utils.tsx b/src/libs/modals/modals/ModalConfirmStrategy/utils.tsx
index 7e2225123..cea990c98 100644
--- a/src/libs/modals/modals/ModalConfirmStrategy/utils.tsx
+++ b/src/libs/modals/modals/ModalConfirmStrategy/utils.tsx
@@ -20,7 +20,7 @@ export const getModalDataByType = (
     case 'pause':
       return {
         modalTitle: 'Pause Strategy',
-        icon: <IconPause className="h-16 w-16" />,
+        icon: <IconPause className="size-16" />,
         title: 'Are you sure you would like to pause your strategy?',
         content:
           'This will prevent your strategy from being traded against, however you will retain access to any associated funds.',
@@ -30,14 +30,14 @@ export const getModalDataByType = (
     case 'delete':
       return {
         modalTitle: 'Delete Strategy',
-        icon: <IconTrash className="h-24 w-24" />,
+        icon: <IconTrash className="size-24" />,
         title: 'Are you sure you would like to delete your strategy?',
         content:
           'All data on the strategy will be deleted. It will be impossible to restore them.',
         additionalContent: (
           <div className="mt-20 flex items-center">
-            <IconWallet className="mr-10 h-12 w-12" />
-            <div className="flex-1 text-14 font-weight-500 text-white/80">
+            <IconWallet className="mr-10 size-12" />
+            <div className="text-14 font-weight-500 flex-1 text-white/80">
               All funds will be withdrawn to your wallet
             </div>
           </div>
diff --git a/src/libs/modals/modals/ModalDuplicateStrategy/ModalDuplicateStrategy.tsx b/src/libs/modals/modals/ModalDuplicateStrategy/ModalDuplicateStrategy.tsx
index a16663c09..82a8ef98d 100644
--- a/src/libs/modals/modals/ModalDuplicateStrategy/ModalDuplicateStrategy.tsx
+++ b/src/libs/modals/modals/ModalDuplicateStrategy/ModalDuplicateStrategy.tsx
@@ -59,7 +59,9 @@ export const ModalDuplicateStrategy: ModalFC<ModalDuplicateStrategyData> = ({
 
   return (
     <ModalOrMobileSheet id={id} title="Duplicate Strategy">
-      <h2 className="text-secondary font-weight-400">Select your option.</h2>
+      <h2 className="text-14 font-weight-400 text-white/60">
+        Select your option.
+      </h2>
 
       {duplicateOptions.map(
         ({ icon: Icon, title, onClick, description, testId }) => (
@@ -67,8 +69,8 @@ export const ModalDuplicateStrategy: ModalFC<ModalDuplicateStrategyData> = ({
             key={title}
             className="grid grid-cols-[32px_1fr_auto] grid-rows-[auto_auto] gap-8 rounded bg-black/90 p-16"
           >
-            <div className="row-span-2 flex h-32 w-32 items-center justify-center self-center rounded-full bg-primary/25">
-              <Icon className="h-16 w-16 text-primary" />
+            <div className="bg-primary/25 row-span-2 flex size-32 items-center justify-center self-center rounded-full">
+              <Icon className="text-primary size-16" />
             </div>
             <h3 className="text-14 font-weight-500">{title}</h3>
             <Button
diff --git a/src/libs/modals/modals/ModalImportToken.tsx b/src/libs/modals/modals/ModalImportToken.tsx
index 14fc4d61b..7460a26dc 100644
--- a/src/libs/modals/modals/ModalImportToken.tsx
+++ b/src/libs/modals/modals/ModalImportToken.tsx
@@ -3,7 +3,7 @@ import { useGetTokenData } from 'libs/queries/chain/token';
 import { Button } from 'components/common/button';
 import { useTokens } from 'hooks/useTokens';
 import { useModal } from 'hooks/useModal';
-import { shortenString } from 'utils/helpers';
+import { cn, shortenString } from 'utils/helpers';
 import { IconTitleText } from 'components/common/iconTitleText/IconTitleText';
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { ReactComponent as IconLink } from 'assets/icons/link.svg';
@@ -34,12 +34,12 @@ export const ModalImportToken: ModalFC<ModalImportTokenData> = ({
   const blockClasses = 'my-20 h-80 rounded-8';
 
   return (
-    <ModalOrMobileSheet id={id} title={'Import Token'}>
-      <div className={'mt-40'}>
+    <ModalOrMobileSheet id={id} title="Import Token">
+      <div className="mt-40">
         <IconTitleText
-          variant={'warning'}
+          variant="warning"
           icon={<IconWarning />}
-          title={'Use at your own risk'}
+          title="Use at your own risk"
           text={
             "This token doesn't appear on the active token list. Anyone can create a token, including fake versions of existing tokens that claim to represent projects."
           }
@@ -47,46 +47,45 @@ export const ModalImportToken: ModalFC<ModalImportTokenData> = ({
       </div>
 
       {isLoading && (
-        <div className={`${blockClasses} animate-pulse bg-black`}></div>
+        <div className={cn(blockClasses, 'animate-pulse bg-black')}></div>
       )}
       {isError && (
         <div
-          className={`${blockClasses} flex items-center justify-center bg-error/30`}
+          className={cn(
+            blockClasses,
+            'bg-error/30 flex items-center justify-center'
+          )}
         >
           Error: No token found for this address
         </div>
       )}
       {data && (
-        <div className={`${blockClasses} bg-background-900 p-16`}>
-          <div className={'flex items-center justify-between'}>
-            <div className={'font-weight-500'}>{data.symbol}</div>
+        <div className={cn(blockClasses, 'bg-background-900 p-16')}>
+          <div className="flex items-center justify-between">
+            <div className="font-weight-500">{data.symbol}</div>
             <NewTabLink
               to={getExplorerLink('token', data.address)}
-              className={
-                'flex items-center text-14 font-weight-500 text-warning'
-              }
+              className="text-14 font-weight-500 text-warning flex items-center"
             >
-              <span className={'whitespace-nowrap'}>View on Explorer</span>
-              <IconLink className={'ml-4 inline-flex h-14'} />
+              <span className="whitespace-nowrap">View on Explorer</span>
+              <IconLink className="ml-4 inline-flex h-14" />
             </NewTabLink>
           </div>
-          <div className={'flex items-center justify-between'}>
-            <div className={'text-secondary text-14'}>{data.name}</div>
-            <div className={'font-mono text-14'}>
-              {shortenString(data.address)}
-            </div>
+          <div className="text-14 flex items-center justify-between">
+            <div className="text-white/60">{data.name}</div>
+            <div className=" font-mono">{shortenString(data.address)}</div>
           </div>
         </div>
       )}
       <Button
-        variant={'white'}
+        variant="white"
         fullWidth
         onClick={onClick}
         disabled={isLoading || isError}
       >
         Import Token
       </Button>
-      <Button variant={'black'} fullWidth onClick={() => closeModal(id)}>
+      <Button variant="black" fullWidth onClick={() => closeModal(id)}>
         Cancel
       </Button>
     </ModalOrMobileSheet>
diff --git a/src/libs/modals/modals/ModalNotifications.tsx b/src/libs/modals/modals/ModalNotifications.tsx
index 3a33b173c..92863c213 100644
--- a/src/libs/modals/modals/ModalNotifications.tsx
+++ b/src/libs/modals/modals/ModalNotifications.tsx
@@ -25,7 +25,7 @@ export const ModalNotifications: ModalFC<undefined> = ({ id }) => {
         {reversedNotifications.map((n) => (
           <li
             key={n.id}
-            className="overflow-hidden rounded-10 bg-black px-16 py-12"
+            className="rounded-10 overflow-hidden bg-black px-16 py-12"
           >
             <NotificationLine
               notification={n}
diff --git a/src/libs/modals/modals/ModalRestrictedCountry.tsx b/src/libs/modals/modals/ModalRestrictedCountry.tsx
index 631a10eec..1a347eaf9 100644
--- a/src/libs/modals/modals/ModalRestrictedCountry.tsx
+++ b/src/libs/modals/modals/ModalRestrictedCountry.tsx
@@ -24,7 +24,7 @@ export const ModalRestrictedCountry: ModalFC<undefined> = ({ id }) => {
           text="According to our Terms of Service, users in your location are not able to use this site."
         />
       </div>
-      <Button variant={'white'} fullWidth onClick={onClose} className={'mt-16'}>
+      <Button variant="white" fullWidth onClick={onClose} className="mt-16">
         I Understand
       </Button>
     </ModalOrMobileSheet>
diff --git a/src/libs/modals/modals/ModalSimulatorDisclaimer.tsx b/src/libs/modals/modals/ModalSimulatorDisclaimer.tsx
index d85dcfbc0..77c4e9c2d 100644
--- a/src/libs/modals/modals/ModalSimulatorDisclaimer.tsx
+++ b/src/libs/modals/modals/ModalSimulatorDisclaimer.tsx
@@ -15,12 +15,12 @@ export const ModalSimulatorDisclaimer: ModalFC<
   const { closeModal } = useModal();
 
   const paragraphClassName =
-    'text-secondary flex w-full items-center justify-center text-center';
+    'text-white/60 text-14 flex w-full items-center justify-center text-center';
 
   return (
     <ModalOrMobileSheet id={id} data-testid="sim-disclaimer-modal">
       <IconTitleText
-        icon={<IconBookmark className="h-24 w-24 text-white" />}
+        icon={<IconBookmark className="size-24 text-white" />}
         title="Simulator Disclaimer"
       />
       <p className={paragraphClassName}>
diff --git a/src/libs/modals/modals/ModalTokenList/ModalTokenListContent.tsx b/src/libs/modals/modals/ModalTokenList/ModalTokenListContent.tsx
index e9df57702..3367af758 100644
--- a/src/libs/modals/modals/ModalTokenList/ModalTokenListContent.tsx
+++ b/src/libs/modals/modals/ModalTokenList/ModalTokenListContent.tsx
@@ -104,7 +104,7 @@ export const ModalTokenListContent: FC<Props> = ({
             return (
               <li
                 key={token.address}
-                className="absolute inset-0 flex items-center justify-between rounded-12 hover:bg-black"
+                className="rounded-12 absolute inset-0 flex items-center justify-between hover:bg-black"
                 style={style}
               >
                 <button
@@ -115,7 +115,7 @@ export const ModalTokenListContent: FC<Props> = ({
                   <LogoImager
                     src={token.logoURI}
                     alt={`${token.symbol} Token`}
-                    className="h-32 w-32"
+                    className="size-32"
                   />
                   <div className="ml-15 grid justify-items-start">
                     <div className="flex">
@@ -127,7 +127,7 @@ export const ModalTokenListContent: FC<Props> = ({
                         />
                       )}
                     </div>
-                    <div className="text-secondary max-w-full truncate text-12">
+                    <div className="text-12 max-w-full truncate text-white/60">
                       {token.name ?? token.symbol}
                     </div>
                   </div>
diff --git a/src/libs/modals/modals/ModalTokenList/ModalTokenListError.tsx b/src/libs/modals/modals/ModalTokenList/ModalTokenListError.tsx
index 35c64a826..30e209a15 100644
--- a/src/libs/modals/modals/ModalTokenList/ModalTokenListError.tsx
+++ b/src/libs/modals/modals/ModalTokenList/ModalTokenListError.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 export const ModalTokenListError: FC = () => {
   return (
     <div className="flex-1">
-      <div className="flex h-60 w-full items-center justify-center rounded-10 bg-error/30">
+      <div className="rounded-10 bg-error/30 flex h-60 w-full items-center justify-center">
         Error: Unable to load token list
       </div>
     </div>
diff --git a/src/libs/modals/modals/ModalTokenList/ModalTokenListImport.tsx b/src/libs/modals/modals/ModalTokenList/ModalTokenListImport.tsx
index c2c4e8848..d2ab3acc2 100644
--- a/src/libs/modals/modals/ModalTokenList/ModalTokenListImport.tsx
+++ b/src/libs/modals/modals/ModalTokenList/ModalTokenListImport.tsx
@@ -26,15 +26,15 @@ export const ModalTokenListImport: FC<{ address: string }> = ({ address }) => {
   return (
     <>
       <div
-        className={'mt-40 flex w-full flex-col items-center'}
+        className="mt-40 flex w-full flex-col items-center"
         style={{ height: innerHeight - 218 }}
       >
         <IconTitleText
           icon={<IconSearch />}
-          title={'Token not found'}
+          title="Token not found"
           text={<Text />}
         />
-        <Button variant={'white'} onClick={onClick} className={'my-30'}>
+        <Button variant="white" onClick={onClick} className="my-30">
           Import Token
         </Button>
       </div>
diff --git a/src/libs/modals/modals/ModalTokenList/ModalTokenListLoading.tsx b/src/libs/modals/modals/ModalTokenList/ModalTokenListLoading.tsx
index dbc7b6e2f..79ff61c39 100644
--- a/src/libs/modals/modals/ModalTokenList/ModalTokenListLoading.tsx
+++ b/src/libs/modals/modals/ModalTokenList/ModalTokenListLoading.tsx
@@ -6,7 +6,7 @@ export const ModalTokenListLoading: FC = () => {
       <div className="mb-8 h-12 w-[180px] animate-pulse rounded-full bg-black"></div>
       <ul className="flex flex-col gap-8">
         {Array.from({ length: 10 }).map((_, i) => (
-          <li key={i} className="h-55 animate-pulse rounded-10 bg-black"></li>
+          <li key={i} className="h-55 rounded-10 animate-pulse bg-black"></li>
         ))}
       </ul>
     </div>
diff --git a/src/libs/modals/modals/ModalTokenList/ModalTokenListNotFound.tsx b/src/libs/modals/modals/ModalTokenList/ModalTokenListNotFound.tsx
index 05cfb04b4..7560ca213 100644
--- a/src/libs/modals/modals/ModalTokenList/ModalTokenListNotFound.tsx
+++ b/src/libs/modals/modals/ModalTokenList/ModalTokenListNotFound.tsx
@@ -12,7 +12,7 @@ export const ModalTokenListNotFound: FC = () => {
         Unfortunately we couldn't find the token you're looking for, try
         searching for it
       </span>
-      <span className={'font-weight-500 text-white'}> by address.</span>
+      <span className="font-weight-500 text-white"> by address.</span>
     </>
   );
 
@@ -22,7 +22,7 @@ export const ModalTokenListNotFound: FC = () => {
       style={{ height: innerHeight - 258 }}
     >
       <IconTitleText
-        title={'Token not found'}
+        title="Token not found"
         icon={<IconSearch />}
         text={<Text />}
       />
diff --git a/src/libs/modals/modals/ModalTradeRouting/ModalTradeRouting.tsx b/src/libs/modals/modals/ModalTradeRouting/ModalTradeRouting.tsx
index 3b827abe4..2b0554e92 100644
--- a/src/libs/modals/modals/ModalTradeRouting/ModalTradeRouting.tsx
+++ b/src/libs/modals/modals/ModalTradeRouting/ModalTradeRouting.tsx
@@ -114,7 +114,7 @@ export const ModalTradeRouting: ModalFC<ModalTradeRoutingData> = ({
           className="flex min-h-[130px] flex-col gap-8 overflow-auto"
         >
           <Tooltip element="This is the list of orders your trade will use when executed.">
-            <h3 id="routing-table" className="text-secondary">
+            <h3 id="routing-table" className="text-14 text-white/60">
               Routing Table
             </h3>
           </Tooltip>
@@ -135,14 +135,14 @@ export const ModalTradeRouting: ModalFC<ModalTradeRoutingData> = ({
                       aria-label="toggle all orders"
                     />
                   </th>
-                  <th className="sticky top-0 bg-black py-8 font-mono text-14 font-weight-500 text-white/60">
+                  <th className="text-14 font-weight-500 sticky top-0 bg-black py-8 font-mono text-white/60">
                     {source.symbol}
                   </th>
                   <th className="sticky top-0 bg-black">{/* Arrow */}</th>
-                  <th className="sticky top-0 bg-black py-8 font-mono text-14 font-weight-500 text-white/60">
+                  <th className="text-14 font-weight-500 sticky top-0 bg-black py-8 font-mono text-white/60">
                     {target.symbol}
                   </th>
-                  <th className="sticky top-0 bg-black py-8 font-mono text-14 font-weight-500 text-white/60">
+                  <th className="text-14 font-weight-500 sticky top-0 bg-black py-8 font-mono text-white/60">
                     Avg Price
                   </th>
                 </tr>
@@ -173,7 +173,7 @@ export const ModalTradeRouting: ModalFC<ModalTradeRoutingData> = ({
         >
           <header className="flex items-center justify-between">
             <Tooltip element="When managing the list of orders, your trade amounts will change to reflect these changes.">
-              <h3 id="confirm-table" className="text-secondary">
+              <h3 id="confirm-table" className="text-14 text-white/60">
                 Confirm Trade
               </h3>
             </Tooltip>
@@ -193,15 +193,15 @@ export const ModalTradeRouting: ModalFC<ModalTradeRoutingData> = ({
             isError={!!errorMsg}
             disabled
             data-testid="confirm-source"
-            className="-mb-16 rounded-12 bg-black"
+            className="rounded-12 -mb-16 bg-black"
           />
-          <IconArrow className="z-10 mx-auto h-24 w-24 rounded-full bg-background-900 p-5" />
+          <IconArrow className="bg-background-900 z-10 mx-auto size-24 rounded-full p-5" />
           <TokenInputField
             value={totalTargetAmount}
             token={data.target}
             disabled
             data-testid="confirm-target"
-            className="-mt-16 rounded-12 bg-black"
+            className="rounded-12 -mt-16 bg-black"
           />
         </div>
 
diff --git a/src/libs/modals/modals/ModalTradeRouting/ModalTradeRoutingRow.tsx b/src/libs/modals/modals/ModalTradeRouting/ModalTradeRoutingRow.tsx
index 0a187065a..2a3993abd 100644
--- a/src/libs/modals/modals/ModalTradeRouting/ModalTradeRoutingRow.tsx
+++ b/src/libs/modals/modals/ModalTradeRouting/ModalTradeRoutingRow.tsx
@@ -55,7 +55,7 @@ export const ModalTradeRoutingRow: FC<ModalTradeRoutingRowProps> = ({
 
   return (
     <tr>
-      <td className="border-t border-background-800 p-8">
+      <td className="border-background-800 border-t p-8">
         <Checkbox
           isChecked={isSelected}
           setIsChecked={onCheckboxClick}
@@ -64,7 +64,7 @@ export const ModalTradeRoutingRow: FC<ModalTradeRoutingRowProps> = ({
           tabIndex={-1}
         />
       </td>
-      <td className="border-t border-background-800 p-8">
+      <td className="border-background-800 border-t p-8">
         <ModalTradeRoutingRowCell
           amount={sourceAmount}
           fiatAmount={sourceAmountFiat}
@@ -72,13 +72,13 @@ export const ModalTradeRoutingRow: FC<ModalTradeRoutingRowProps> = ({
           selectedFiatCurrency={selectedFiatCurrency}
         />
       </td>
-      <td className="border-t border-background-800">
+      <td className="border-background-800 border-t">
         <ForwardArrow
           arrowType="full"
-          className="inline h-18 w-18 rounded-full bg-background-900 p-4 text-white/60"
+          className="size-18 bg-background-900 inline rounded-full p-4 text-white/60"
         />
       </td>
-      <td className="border-t border-background-800 p-8">
+      <td className="border-background-800 border-t p-8">
         <ModalTradeRoutingRowCell
           amount={targetAmount}
           fiatAmount={targetAmountFiat}
@@ -87,7 +87,7 @@ export const ModalTradeRoutingRow: FC<ModalTradeRoutingRowProps> = ({
         />
       </td>
 
-      <td className="border-t border-background-800 p-8">
+      <td className="border-background-800 border-t p-8">
         <ModalTradeRoutingRowCell
           amount={averageAmount}
           fiatAmount={averagePriceFiat}
diff --git a/src/libs/modals/modals/ModalTradeRouting/ModalTradeRoutingRowCell.tsx b/src/libs/modals/modals/ModalTradeRouting/ModalTradeRoutingRowCell.tsx
index b3c416b93..bec25160d 100644
--- a/src/libs/modals/modals/ModalTradeRouting/ModalTradeRoutingRowCell.tsx
+++ b/src/libs/modals/modals/ModalTradeRouting/ModalTradeRoutingRowCell.tsx
@@ -14,11 +14,11 @@ export const ModalTradeRoutingRowCell: FC<{
     <>
       <p className="inline-flex items-center gap-8">
         <LogoImager src={logoURI} alt="Token Logo" className="w-14" />
-        <span className="font-mono text-14 font-weight-500">
+        <span className="text-14 font-weight-500 font-mono">
           {prettifyNumber(amount)}
         </span>
       </p>
-      <p className="font-mono text-12 font-weight-500 text-white/60">
+      <p className="text-12 font-weight-500 font-mono text-white/60">
         {getFiatDisplayValue(fiatAmount, selectedFiatCurrency)}
       </p>
     </>
diff --git a/src/libs/modals/modals/ModalTradeSettings.tsx b/src/libs/modals/modals/ModalTradeSettings.tsx
index 926a636b9..8bc05c2d0 100644
--- a/src/libs/modals/modals/ModalTradeSettings.tsx
+++ b/src/libs/modals/modals/ModalTradeSettings.tsx
@@ -35,7 +35,7 @@ export const ModalTradeSettings: ModalFC<ModalTradeSettingsData> = ({
           <h2>Trade Settings</h2>
           {!isAllSettingsDefault && (
             <button
-              className="mr-20 font-mono text-16 font-weight-500 text-white"
+              className="text-16 font-weight-500 mr-20 font-mono text-white"
               onClick={handleReset}
             >
               Reset All
@@ -43,7 +43,7 @@ export const ModalTradeSettings: ModalFC<ModalTradeSettingsData> = ({
           )}
         </div>
       }
-      size={'md'}
+      size="md"
     >
       <TradeSettings
         isAllSettingsDefault={isAllSettingsDefault}
diff --git a/src/libs/modals/modals/ModalTradeTokenList/ModalTradeTokenListContent.tsx b/src/libs/modals/modals/ModalTradeTokenList/ModalTradeTokenListContent.tsx
index a4eb49b68..402b65586 100644
--- a/src/libs/modals/modals/ModalTradeTokenList/ModalTradeTokenListContent.tsx
+++ b/src/libs/modals/modals/ModalTradeTokenList/ModalTradeTokenListContent.tsx
@@ -105,7 +105,7 @@ export const ModalTradeTokenListContent: FC<Props> = ({
             return (
               <li
                 key={`${selectedList}-${pairKey}`}
-                className="absolute inset-0 flex items-center justify-between rounded-12 hover:bg-black"
+                className="rounded-12 absolute inset-0 flex items-center justify-between hover:bg-black"
                 style={style}
               >
                 <button
diff --git a/src/libs/modals/modals/WalletModal/ModalWalletContent.tsx b/src/libs/modals/modals/WalletModal/ModalWalletContent.tsx
index f6c024211..8df4bcd5f 100644
--- a/src/libs/modals/modals/WalletModal/ModalWalletContent.tsx
+++ b/src/libs/modals/modals/WalletModal/ModalWalletContent.tsx
@@ -36,7 +36,7 @@ export const ModalWalletContent: FC<Props> = ({ onClick, isLoading }) => {
 
   return (
     <div className="space-y-10">
-      <div className="mb-20 space-y-10 text-14 text-white/80">
+      <div className="text-14 mb-20 space-y-10 text-white/80">
         <p>
           By connecting my wallet, I agree to the{' '}
           <Link
diff --git a/src/libs/modals/modals/WalletModal/ModalWalletError.tsx b/src/libs/modals/modals/WalletModal/ModalWalletError.tsx
index b5ed3cbf6..1e5fc9658 100644
--- a/src/libs/modals/modals/WalletModal/ModalWalletError.tsx
+++ b/src/libs/modals/modals/WalletModal/ModalWalletError.tsx
@@ -12,7 +12,7 @@ export const ModalWalletError: FC<Props> = ({ logoUrl, error, name }) => {
     <>
       <Imager alt="Wallet Logo" src={logoUrl} className="w-60" />
       <span>{name} Error:</span>
-      <span className="rounded-10 bg-error/20 px-20 py-10 font-weight-500 text-error">
+      <span className="rounded-10 bg-error/20 font-weight-500 text-error px-20 py-10">
         {error}
       </span>
     </>
diff --git a/src/libs/modals/modals/common/CategoryWithCounter.tsx b/src/libs/modals/modals/common/CategoryWithCounter.tsx
index 75417fb8a..e4e0edb20 100644
--- a/src/libs/modals/modals/common/CategoryWithCounter.tsx
+++ b/src/libs/modals/modals/common/CategoryWithCounter.tsx
@@ -30,7 +30,7 @@ export const CategoryWithCounter: FC<CategoryWithCounterProps> = ({
         className={cn(
           'inline-flex flex-1 cursor-pointer items-center justify-center gap-6 capitalize',
           'hover:text-white',
-          isActive ? 'font-weight-500' : 'text-secondary'
+          isActive ? 'font-weight-500' : 'text-14 text-white/60'
         )}
         data-testid={`filter-category-${category}`}
       >
diff --git a/src/libs/notifications/NotificationsProvider.tsx b/src/libs/notifications/NotificationsProvider.tsx
index ec74bf802..ebc343e74 100644
--- a/src/libs/notifications/NotificationsProvider.tsx
+++ b/src/libs/notifications/NotificationsProvider.tsx
@@ -28,7 +28,7 @@ export const NotificationAlerts: FC = () => {
   }, [user, setNotifications]);
 
   return (
-    <ul className="fixed top-80 right-10 z-50" data-testid="notification-list">
+    <ul className="fixed right-10 top-80 z-50" data-testid="notification-list">
       <AnimatePresence mode="popLayout">
         {alerts.map((n) => (
           <NotificationItem notification={n} key={n.id} />
@@ -59,7 +59,7 @@ const NotificationItem: FC<{ notification: Notification }> = (props) => {
       initial="initial"
       animate="animate"
       exit="exit"
-      className="mb-20 block w-[350px] overflow-hidden rounded-10 border border-white/40 bg-background-900 px-16 py-12"
+      className="rounded-10 bg-background-900 mb-20 block w-[350px] overflow-hidden border border-white/40 px-16 py-12"
       data-testid={`notification-${notification.testid}`}
     >
       <NotificationLine
diff --git a/src/libs/notifications/TxNotification.tsx b/src/libs/notifications/TxNotification.tsx
index 9b8c564a6..0cc285cb5 100644
--- a/src/libs/notifications/TxNotification.tsx
+++ b/src/libs/notifications/TxNotification.tsx
@@ -13,19 +13,19 @@ const StatusIcon = (status: NotificationStatus) => {
     case 'pending':
       return (
         <div className="relative flex items-center justify-center">
-          <div className="h-38 w-38 animate-spin rounded-full border-t border-r border-white" />
+          <div className="size-38 animate-spin rounded-full border-r border-t border-white" />
         </div>
       );
     case 'success':
       return (
-        <div className="flex h-38 w-38 items-center justify-center rounded-full bg-primary/10">
-          <IconCheck className="w-11 text-primary" />
+        <div className="size-38 bg-primary/10 flex items-center justify-center rounded-full">
+          <IconCheck className="text-primary w-11" />
         </div>
       );
     case 'failed':
       return (
-        <div className="flex h-38 w-38 items-center justify-center rounded-full bg-error/10">
-          <IconTimes className="w-11 text-error" />
+        <div className="size-38 bg-error/10 flex items-center justify-center rounded-full">
+          <IconTimes className="text-error w-11" />
         </div>
       );
   }
@@ -64,7 +64,7 @@ export const TxNotification: FC<Props> = ({ notification, close }) => {
   return (
     <article aria-labelledby={titleId} className="flex gap-16">
       {StatusIcon(notification.status)}
-      <div className="flex flex-1 flex-col gap-8 overflow-hidden text-14">
+      <div className="text-14 flex flex-1 flex-col gap-8 overflow-hidden">
         <hgroup>
           <h3 id={titleId} className="text-16" data-testid="notif-title">
             {getTitleByStatus(notification)}
@@ -76,7 +76,7 @@ export const TxNotification: FC<Props> = ({ notification, close }) => {
         {notification.txHash && (
           <NewTabLink
             to={getExplorerLink('tx', notification.txHash)}
-            className="flex items-center font-weight-500"
+            className="font-weight-500 flex items-center"
           >
             View on Etherscan <IconLink className="ml-6 w-14" />
           </NewTabLink>
@@ -90,11 +90,11 @@ export const TxNotification: FC<Props> = ({ notification, close }) => {
           data-testid="notif-close"
           aria-label="Remove notification"
         >
-          <IconClose className="h-14 w-14 text-white/80" />
+          <IconClose className="size-14 text-white/80" />
         </button>
-        <div className="text-secondary whitespace-nowrap text-12 font-weight-500">
+        <p className="text-12 font-weight-500 whitespace-nowrap text-white/60">
           {unix(notification.timestamp).fromNow(true)}
-        </div>
+        </p>
       </div>
     </article>
   );
diff --git a/src/libs/table/TBody.tsx b/src/libs/table/TBody.tsx
index 663a66a36..2fbd6ccab 100644
--- a/src/libs/table/TBody.tsx
+++ b/src/libs/table/TBody.tsx
@@ -14,12 +14,12 @@ export const TBody = <D extends object>({
   isLoading,
 }: Props<D>) => {
   return (
-    <tbody className="border-b-2 border-background-800">
+    <tbody className="border-background-800 border-b-2">
       {isLoading ? (
         <tr>
           <td
             colSpan={table.getVisibleFlatColumns().length}
-            className="h-[320px] w-full items-center justify-center"
+            className="h-[320px] text-center"
           >
             <CarbonLogoLoading className="h-[80px]" />
           </td>
@@ -30,10 +30,10 @@ export const TBody = <D extends object>({
             key={row.id}
             className={cn(
               'h-64',
-              '!text-white/80',
+              'text-white/80',
               'text-16',
               'hover:bg-background-800',
-              'hover:!text-white',
+              'hover:text-white',
               onRowClick && 'cursor-pointer'
             )}
             onClick={() => {
diff --git a/src/libs/table/THead.tsx b/src/libs/table/THead.tsx
index 1a41d7322..28559c3b6 100644
--- a/src/libs/table/THead.tsx
+++ b/src/libs/table/THead.tsx
@@ -5,7 +5,7 @@ export const THead = <D extends object>({ table }: { table: Table<D> }) => {
   return (
     <thead className={cn('border-b-2', 'border-background-800')}>
       {table.getHeaderGroups().map((headerGroup) => (
-        <tr key={headerGroup.id} className={cn('h-64')}>
+        <tr key={headerGroup.id} className="h-64">
           {headerGroup.headers.map((header) => (
             <th
               key={header.id}
@@ -21,9 +21,9 @@ export const THead = <D extends object>({ table }: { table: Table<D> }) => {
                 <div
                   {...{
                     className: cn(
-                      '!font-mono',
                       'text-16',
                       'font-weight-500',
+                      'font-mono',
                       'text-white/60',
                       {
                         'cursor-pointer': header.column.getCanSort(),
diff --git a/src/libs/table/TPagination.tsx b/src/libs/table/TPagination.tsx
index 6543f91fc..fae5cb2ec 100644
--- a/src/libs/table/TPagination.tsx
+++ b/src/libs/table/TPagination.tsx
@@ -17,7 +17,7 @@ export const TPagination = <D extends object>({
         'items-center',
         'justify-between',
         'px-32',
-        '!text-14',
+        'text-14',
         'text-white/60'
       )}
     >
diff --git a/src/libs/twmerge/index.ts b/src/libs/twmerge/index.ts
new file mode 100644
index 000000000..37fe0f1de
--- /dev/null
+++ b/src/libs/twmerge/index.ts
@@ -0,0 +1,98 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+
+type AdditionalClassGroupIDs =
+  | 'fontWeights'
+  | 'textColors'
+  | 'bgColors'
+  | 'borderColors'
+  | 'outlineColors'
+  | 'animation';
+
+const colors = [
+  'white',
+  'transparent',
+  'primary',
+  'error',
+  'sell',
+  'buy',
+  'success',
+  'warning',
+  'black',
+  'background-50',
+  'background-100',
+  'background-200',
+  'background-300',
+  'background-400',
+  'background-500',
+  'background-600',
+  'background-700',
+  'background-800',
+  'background-900',
+];
+
+const createConfigValues = (start: number, end: number, step: number) =>
+  Array.from({ length: Math.ceil((end - start) / step) + 1 }, (_, i) =>
+    (start + i * step).toString()
+  );
+
+export const customTwMerge = extendTailwindMerge<AdditionalClassGroupIDs>({
+  override: {},
+  extend: {
+    theme: {},
+    classGroups: {
+      fontWeights: [
+        {
+          font: [
+            'weight-100',
+            'weight-200',
+            'weight-300',
+            'weight-400',
+            'weight-500',
+            'weight-600',
+            'weight-700',
+            'weight-800',
+            'weight-900',
+          ],
+        },
+      ],
+      textColors: [
+        {
+          text: colors,
+        },
+      ],
+      bgColors: [
+        {
+          bg: colors,
+        },
+      ],
+      borderColors: [
+        {
+          border: colors,
+        },
+      ],
+      outlineColors: [
+        {
+          outline: colors,
+        },
+      ],
+      animation: [
+        {
+          animate: ['none', 'spin', 'ping', 'pulse', 'bounce', 'slideUp'],
+        },
+      ],
+      rounded: [
+        {
+          rounded: ['full', 'DEFAULT', ...createConfigValues(0, 50, 2)],
+        },
+      ],
+    },
+    conflictingClassGroups: {
+      px: ['pr', 'pl'],
+      py: ['pt', 'pb'],
+      p: ['pt', 'pb', 'pr', 'pl'],
+      size: ['h', 'w'],
+    },
+
+    conflictingClassGroupModifiers: {},
+  },
+});
diff --git a/src/libs/twmerge/twmerge.test.ts b/src/libs/twmerge/twmerge.test.ts
new file mode 100644
index 000000000..224f74099
--- /dev/null
+++ b/src/libs/twmerge/twmerge.test.ts
@@ -0,0 +1,236 @@
+import { customTwMerge } from '.';
+import { describe, it, expect } from 'vitest';
+
+describe('Custom Tailwind Merge', () => {
+  describe('font size and color', () => {
+    it('should not merge color and size', () => {
+      expect(customTwMerge('text-14 text-primary')).toEqual(
+        customTwMerge('text-14 text-primary')
+      );
+    });
+    it('should not merge color and size', () => {
+      expect(customTwMerge('text-primary text-14')).toEqual(
+        customTwMerge('text-primary text-14')
+      );
+    });
+    it('should merge different colors', () => {
+      expect(customTwMerge('text-white text-primary')).toEqual(
+        customTwMerge('text-primary')
+      );
+    });
+    it('should merge different sizes', () => {
+      expect(customTwMerge('text-14 text-16')).toEqual(
+        customTwMerge('text-16')
+      );
+    });
+  });
+  describe('borderRadius', () => {
+    it('should merge different sizes', () => {
+      expect(customTwMerge('rounded-14 rounded-16')).toEqual(
+        customTwMerge('rounded-16')
+      );
+    });
+    it('should merge sizes with numbers and names', () => {
+      expect(customTwMerge('rounded-14 rounded-full')).toEqual(
+        customTwMerge('rounded-full')
+      );
+    });
+  });
+  describe('border', () => {
+    it('should merge different colors', () => {
+      expect(customTwMerge('border border-primary')).toEqual(
+        customTwMerge('border border-primary')
+      );
+    });
+    it('should merge different colors', () => {
+      expect(customTwMerge('border border-white border-primary')).toEqual(
+        customTwMerge('border border-primary')
+      );
+    });
+    it('should merge different colors', () => {
+      expect(
+        customTwMerge('border border-primary/60 border-background-800')
+      ).toEqual(customTwMerge('border border-background-800'));
+    });
+    it('should not merge colors and sizes', () => {
+      expect(customTwMerge('border border-5 border-background-800')).toEqual(
+        customTwMerge('border border-5 border-background-800')
+      );
+    });
+  });
+  describe('opacity', () => {
+    it('should merge different sizes', () => {
+      expect(customTwMerge('opacity-5 opacity-10')).toEqual(
+        customTwMerge('opacity-10')
+      );
+    });
+  });
+  describe('spacing', () => {
+    describe('space', () => {
+      it('should merge different sizes in space x', () => {
+        expect(customTwMerge('space-x-14 space-x-16')).toEqual(
+          customTwMerge('space-x-16')
+        );
+      });
+      it('should merge different sizes in space y', () => {
+        expect(customTwMerge('space-y-14 space-y-16')).toEqual(
+          customTwMerge('space-y-16')
+        );
+      });
+      it('should not merge different sizes in space x and y', () => {
+        expect(customTwMerge('space-x-14 space-y-16')).toEqual(
+          customTwMerge('space-x-14 space-y-16')
+        );
+      });
+    });
+    describe('margin', () => {
+      it('should merge different sizes with m', () => {
+        expect(customTwMerge('m-5 m-10')).toEqual(customTwMerge('m-10'));
+      });
+      it('should merge different sizes with mx', () => {
+        expect(customTwMerge('mx-5 mx-10')).toEqual(customTwMerge('mx-10'));
+      });
+      it('should merge different sizes with m before mx', () => {
+        expect(customTwMerge('m-5 mx-10')).toEqual(customTwMerge('m-5 mx-10'));
+      });
+      it('should merge different sizes with mx before m', () => {
+        expect(customTwMerge('mx-5 m-10')).toEqual(customTwMerge('m-10'));
+      });
+      it('should merge different sizes with mx before mr', () => {
+        expect(customTwMerge('mx-5 mr-10')).toEqual(
+          customTwMerge('mx-5 mr-10')
+        );
+      });
+      it('should merge different sizes with mr before mx', () => {
+        expect(customTwMerge('mr-10 mx-5')).toEqual(customTwMerge('mx-5'));
+      });
+      it('should merge different sizes with my', () => {
+        expect(customTwMerge('my-5 my-10')).toEqual(customTwMerge('my-10'));
+      });
+      it('should merge different sizes with m before my', () => {
+        expect(customTwMerge('m-5 my-10')).toEqual(customTwMerge('m-5 my-10'));
+      });
+      it('should merge different sizes with my before m', () => {
+        expect(customTwMerge('my-5 m-10')).toEqual(customTwMerge('m-10'));
+      });
+      it('should merge different sizes with my before mt', () => {
+        expect(customTwMerge('my-5 mt-10')).toEqual(
+          customTwMerge('my-5 mt-10')
+        );
+      });
+      it('should merge different sizes with pt before py', () => {
+        expect(customTwMerge('pt-10 py-5')).toEqual(customTwMerge('py-5'));
+      });
+      it('should merge different margin-auto', () => {
+        expect(customTwMerge('m-auto m-5')).toEqual(customTwMerge('m-5'));
+      });
+      it('should merge different margin-auto', () => {
+        expect(customTwMerge('m-5 m-auto')).toEqual(customTwMerge('m-auto'));
+      });
+      it('should merge different margin-auto', () => {
+        expect(customTwMerge('my-5 m-auto')).toEqual(customTwMerge('m-auto'));
+      });
+      it('should merge different margin-auto', () => {
+        expect(customTwMerge('m-auto my-5')).toEqual(
+          customTwMerge('m-auto my-5')
+        );
+      });
+    });
+    describe('padding', () => {
+      it('should merge different sizes with p', () => {
+        expect(customTwMerge('p-5 p-10')).toEqual(customTwMerge('p-10'));
+      });
+      it('should merge different sizes with px', () => {
+        expect(customTwMerge('px-5 px-10')).toEqual(customTwMerge('px-10'));
+      });
+      it('should merge different sizes with p before px', () => {
+        expect(customTwMerge('p-5 px-10')).toEqual(customTwMerge('p-5 px-10'));
+      });
+      it('should merge different sizes with px before p', () => {
+        expect(customTwMerge('px-5 p-10')).toEqual(customTwMerge('p-10'));
+      });
+      it('should merge different sizes with px before pr', () => {
+        expect(customTwMerge('px-5 pr-10')).toEqual(
+          customTwMerge('px-5 pr-10')
+        );
+      });
+      it('should merge different sizes with pr before px', () => {
+        expect(customTwMerge('pr-10 px-5')).toEqual(customTwMerge('px-5'));
+      });
+      it('should merge different sizes with py', () => {
+        expect(customTwMerge('py-5 py-10')).toEqual(customTwMerge('py-10'));
+      });
+      it('should merge different sizes with p before py', () => {
+        expect(customTwMerge('p-5 py-10')).toEqual(customTwMerge('p-5 py-10'));
+      });
+      it('should merge different sizes with py before p', () => {
+        expect(customTwMerge('py-5 p-10')).toEqual(customTwMerge('p-10'));
+      });
+      it('should merge different sizes with py before pt', () => {
+        expect(customTwMerge('py-5 pt-10')).toEqual(
+          customTwMerge('py-5 pt-10')
+        );
+      });
+      it('should merge different sizes with pt before py', () => {
+        expect(customTwMerge('pt-10 py-5')).toEqual(customTwMerge('py-5'));
+      });
+    });
+  });
+  describe('animate', () => {
+    it('should merge different default animations', () => {
+      expect(customTwMerge('animate-spin animate-none')).toEqual(
+        customTwMerge('animate-none')
+      );
+    });
+    it('should merge different non-default animations', () => {
+      expect(customTwMerge('animate-spin animate-slideUp')).toEqual(
+        customTwMerge('animate-slideUp')
+      );
+    });
+  });
+  describe('font weight', () => {
+    it('should merge different sizes', () => {
+      expect(customTwMerge('font-weight-300 font-weight-500')).toEqual(
+        customTwMerge('font-weight-500')
+      );
+    });
+    it('should not merge size with family', () => {
+      expect(
+        customTwMerge('font-weight-300 font-weight-500 font-mono')
+      ).toEqual(customTwMerge('font-weight-500 font-mono'));
+    });
+  });
+  describe('size and height/width', () => {
+    it('should merge different sizes', () => {
+      expect(customTwMerge('size-5 size-10')).toEqual(customTwMerge('size-10'));
+    });
+    it('should merge different sizes with size before h', () => {
+      expect(customTwMerge('size-5 h-10')).toEqual(
+        customTwMerge('size-5 h-10')
+      );
+    });
+    it('should merge different sizes with h before size', () => {
+      expect(customTwMerge('h-10 size-5')).toEqual(customTwMerge('size-5'));
+    });
+    it('should merge different sizes with size before w', () => {
+      expect(customTwMerge('size-5 w-10')).toEqual(
+        customTwMerge('size-5 w-10')
+      );
+    });
+    it('should merge different sizes with w before size', () => {
+      expect(customTwMerge('w-10 size-5')).toEqual(customTwMerge('size-5'));
+    });
+  });
+  describe('max width', () => {
+    it('should merge different sizes', () => {
+      expect(customTwMerge('max-w-0 max-w-xl')).toEqual(
+        customTwMerge('max-w-xl')
+      );
+    });
+    it('should merge different sizes', () => {
+      expect(customTwMerge('max-w-xl max-w-full')).toEqual(
+        customTwMerge('max-w-full')
+      );
+    });
+  });
+});
diff --git a/src/pages/debug/index.tsx b/src/pages/debug/index.tsx
index f09fc48a6..9603e6b99 100644
--- a/src/pages/debug/index.tsx
+++ b/src/pages/debug/index.tsx
@@ -13,7 +13,7 @@ import { DebugE2E } from 'components/debug/DebugE2E';
 
 export const DebugPage = () => {
   return (
-    <Page title={'Debug'}>
+    <Page title="Debug">
       <div className="grid grid-cols-1 gap-20 md:grid-cols-2">
         <DebugResetDefault />
         <DebugWeb3 />
diff --git a/src/pages/explorer/index.tsx b/src/pages/explorer/index.tsx
index b55fc22e2..e03091796 100644
--- a/src/pages/explorer/index.tsx
+++ b/src/pages/explorer/index.tsx
@@ -21,7 +21,7 @@ export const ExplorerPage = () => {
     <Page hideTitle>
       <StrategyProvider query={query}>
         <ExplorerEvents />
-        <div className="flex flex-grow flex-col space-y-30">
+        <div className="space-y-30 flex flex-grow flex-col">
           <ExplorerSearch />
           {slug && <ExplorerTabs />}
           <Outlet />
diff --git a/src/pages/explorer/type/portfolio/token/index.tsx b/src/pages/explorer/type/portfolio/token/index.tsx
index 7844e7cb6..7dcd6b1c6 100644
--- a/src/pages/explorer/type/portfolio/token/index.tsx
+++ b/src/pages/explorer/type/portfolio/token/index.tsx
@@ -13,7 +13,7 @@ export const ExplorerTypePortfolioTokenPage = () => {
       strategies={strategies}
       isLoading={isLoading}
       address={address}
-      backLinkHref={'/explore/$type/$slug/portfolio'}
+      backLinkHref="/explore/$type/$slug/portfolio"
       backLinkHrefParams={{ type, slug }}
     />
   );
diff --git a/src/pages/simulator/index.tsx b/src/pages/simulator/index.tsx
index a16193465..ec92bbfd9 100644
--- a/src/pages/simulator/index.tsx
+++ b/src/pages/simulator/index.tsx
@@ -21,7 +21,7 @@ export const SimulatorPage = () => {
 
   return (
     <>
-      <h1 className="mb-16 px-20 text-24 font-weight-500">Simulate Strategy</h1>
+      <h1 className="text-24 font-weight-500 mb-16 px-20">Simulate Strategy</h1>
       <div className="flex gap-20 px-20">
         <div className="flex w-[440px] flex-col gap-20">
           <SimInputTokenSelection
diff --git a/src/pages/simulator/result/index.tsx b/src/pages/simulator/result/index.tsx
index fb731ad39..689bfd436 100644
--- a/src/pages/simulator/result/index.tsx
+++ b/src/pages/simulator/result/index.tsx
@@ -50,10 +50,10 @@ export const SimulatorResultPage = () => {
             buyIsRange: ctx.search.buyIsRange,
             sellIsRange: ctx.search.sellIsRange,
           }}
-          className="mb-16 flex items-center text-24 font-weight-500"
+          className="text-24 font-weight-500 mb-16 flex items-center"
         >
-          <div className="mr-16 flex h-40 w-40 items-center justify-center rounded-full bg-background-800">
-            <IconChevronLeft className="h-16 w-16" />
+          <div className="bg-background-800 mr-16 flex size-40 items-center justify-center rounded-full">
+            <IconChevronLeft className="size-16" />
           </div>
           Simulate Strategy
         </Link>
@@ -70,10 +70,10 @@ export const SimulatorResultPage = () => {
             sellMax: ctx.search.sellMax,
             spread: ctx.search.spread,
           }}
-          className="mb-16 flex items-center text-24 font-weight-500"
+          className="text-24 font-weight-500 mb-16 flex items-center"
         >
-          <div className="mr-16 flex h-40 w-40 items-center justify-center rounded-full bg-background-800">
-            <IconChevronLeft className="h-16 w-16" />
+          <div className="bg-background-800 mr-16 flex size-40 items-center justify-center rounded-full">
+            <IconChevronLeft className="size-16" />
           </div>
           Simulate Strategy
         </Link>
diff --git a/src/pages/strategies/index.tsx b/src/pages/strategies/index.tsx
index c71344e67..442b96ad8 100644
--- a/src/pages/strategies/index.tsx
+++ b/src/pages/strategies/index.tsx
@@ -33,18 +33,18 @@ export const StrategiesPage = () => {
     {
       label: 'Overview',
       href: '/',
-      icon: <IconOverview className="h-18 w-18" />,
+      icon: <IconOverview className="size-18" />,
       badge: query.data?.length,
     },
     {
       label: 'Portfolio',
       href: '/strategies/portfolio',
-      icon: <IconPieChart className="h-18 w-18" />,
+      icon: <IconPieChart className="size-18" />,
     },
     {
       label: 'Activity',
       href: '/strategies/activity',
-      icon: <IconActivity className="h-18 w-18" />,
+      icon: <IconActivity className="size-18" />,
     },
   ];
 
diff --git a/src/pages/strategies/portfolio/token/index.tsx b/src/pages/strategies/portfolio/token/index.tsx
index c21ea26e7..e720aac1a 100644
--- a/src/pages/strategies/portfolio/token/index.tsx
+++ b/src/pages/strategies/portfolio/token/index.tsx
@@ -13,7 +13,7 @@ export const StrategiesPortfolioTokenPage = () => {
       strategies={strategies}
       isLoading={isLoading}
       address={address}
-      backLinkHref={'/strategies/portfolio'}
+      backLinkHref="/strategies/portfolio"
     />
   );
 };
diff --git a/src/pages/strategy/index.tsx b/src/pages/strategy/index.tsx
index 26499bac2..0ca62bd79 100644
--- a/src/pages/strategy/index.tsx
+++ b/src/pages/strategy/index.tsx
@@ -54,13 +54,13 @@ export const StrategyPage = () => {
       <header className="flex items-center gap-8">
         <button
           onClick={() => history.back()}
-          className="rounded-full bg-background-900 p-12 hover:bg-background-800"
+          className="bg-background-900 hover:bg-background-800 rounded-full p-12"
         >
-          <IconChevronLeft className="h-16 w-16" />
+          <IconChevronLeft className="size-16" />
         </button>
         <TokensOverlap tokens={[base, quote]} size={40} />
         <div className="flex-1 flex-col gap-8">
-          <h1 className="flex gap-8 text-18 font-weight-500">
+          <h1 className="text-18 font-weight-500 flex gap-8">
             <span>{base.symbol}</span>
             <span className="text-white/25">/</span>
             <span>{quote.symbol}</span>
@@ -74,28 +74,28 @@ export const StrategyPage = () => {
         />
       </header>
       <section className="flex flex-col gap-16 md:flex-row">
-        <article className="grid grid-cols-2 grid-rows-[auto_auto_auto] gap-16 rounded bg-background-900 p-24 md:w-[400px]">
-          <h2 className="col-span-2 text-18 font-weight-500">Strategy Info</h2>
+        <article className="bg-background-900 grid grid-cols-2 grid-rows-[auto_auto_auto] gap-16 rounded p-24 md:w-[400px]">
+          <h2 className="text-18 font-weight-500 col-span-2">Strategy Info</h2>
           <StrategyBlockRoi strategy={strategy} />
           <StrategyBlockBudget strategy={strategy} />
           <div
             className={cn(
-              'col-start-1 col-end-3 grid grid-cols-2 grid-rows-[auto_auto] rounded-8 border-2 border-background-800',
+              'rounded-8 border-background-800 col-start-1 col-end-3 grid grid-cols-2 grid-rows-[auto_auto] border-2',
               strategy.status === 'active' ? '' : 'opacity-50'
             )}
           >
             <StrategyBlockBuySell
               strategy={strategy}
               buy
-              className="border-r-2 border-background-800"
+              className="border-background-800 border-r-2"
             />
             <StrategyBlockBuySell strategy={strategy} />
-            <div className="col-start-1 col-end-3 border-t-2 border-background-800">
+            <div className="border-background-800 col-start-1 col-end-3 border-t-2">
               <StrategyGraph strategy={strategy} />
             </div>
           </div>
         </article>
-        <article className="hidden flex-1 flex-col gap-20 rounded bg-background-900 p-16 p-24 md:flex">
+        <article className="bg-background-900 hidden flex-1 flex-col gap-20 rounded p-16 p-24 md:flex">
           <h2 className="text-18 font-weight-500">Price graph</h2>
           <TradingviewChart base={base} quote={quote} />
         </article>
diff --git a/src/pages/terms/index.tsx b/src/pages/terms/index.tsx
index 03506e6f1..6fadfd54c 100644
--- a/src/pages/terms/index.tsx
+++ b/src/pages/terms/index.tsx
@@ -1053,7 +1053,7 @@ const content = [
 
 export const TermsPage = () => {
   return (
-    <Page title={'Terms of Use'}>
+    <Page title="Terms of Use">
       <>
         <span>Last updated: 18 April, 2023</span>
         <p>
@@ -1129,7 +1129,7 @@ export const TermsPage = () => {
 
         {content.map((item, index) => (
           <div key={index} className="legal pt-10">
-            <h2 className="font-semibold mb-10 text-[20px]">
+            <h2 className="mb-10 text-[20px] font-semibold">
               {item.id}. {item.subtitle}
             </h2>
             <div className="mb-20 text-[16px]">{item.html}</div>
diff --git a/src/pages/trade/index.tsx b/src/pages/trade/index.tsx
index 32787ef82..55fc8f9c9 100644
--- a/src/pages/trade/index.tsx
+++ b/src/pages/trade/index.tsx
@@ -50,7 +50,7 @@ export const TradePage = () => {
       ) : isTradePairError || !isValidPair ? (
         <p>{!noTokens && <>Not found</>}</p>
       ) : (
-        <div className="px-content mt-25 grid grid-cols-1 gap-20 pb-30 md:grid-cols-12 xl:px-50">
+        <div className="px-content mt-25 pb-30 xl:px-50 grid grid-cols-1 gap-20 md:grid-cols-12">
           <div className="order-3 md:order-1 md:col-span-4 md:row-span-2">
             <OrderBookWidget base={baseToken} quote={quoteToken} />
           </div>
diff --git a/src/utils/helpers/index.ts b/src/utils/helpers/index.ts
index e8b2f6287..2a26c4f4a 100644
--- a/src/utils/helpers/index.ts
+++ b/src/utils/helpers/index.ts
@@ -1,7 +1,7 @@
 import { TokenPair } from '@bancor/carbon-sdk';
 import { ClassValue, clsx } from 'clsx';
 import { Pathnames } from 'libs/routing';
-import { twMerge } from 'tailwind-merge';
+import { customTwMerge } from 'libs/twmerge';
 import Graphemer from 'graphemer';
 import { TradePair } from 'libs/modals/modals/ModalTradeTokenList';
 export * from './number';
@@ -94,7 +94,7 @@ export const getLowestBits = (decimal: string, bits: number = 128): string => {
 };
 
 export const cn = (...inputs: ClassValue[]) => {
-  return twMerge(clsx(inputs));
+  return customTwMerge(clsx(inputs));
 };
 
 export const sortObjectArray = <D extends object>(
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index a5440a1fd..000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,941 +0,0 @@
-const { formatRgb } = require('culori');
-
-function createTwConfigValues(start, end, step) {
-  const remBase = 16;
-  const obj = {};
-  for (let i = start; i <= end; i = i + step) {
-    obj[i] = `${i / remBase}rem`;
-  }
-  return obj;
-}
-
-const oklch = (l, c, h) => {
-  const result = formatRgb(`oklch(${l} ${c} ${h} / 0)`);
-  return result.replace(', 0)', ', <alpha-value>)');
-};
-const lighten = (l, amount) => Math.min(l + amount, 1);
-const darken = (l, amount) => Math.max(l - amount, 0);
-
-const lightDark = (l, c, h) => ({
-  light: oklch(lighten(l, 0.2), c, h),
-  DEFAULT: oklch(l, c, h),
-  dark: oklch(darken(l, 0.5), c, h),
-});
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  darkMode: 'class',
-  theme: {
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-    },
-    colors: ({ colors }) => {
-      // Background color variables
-      const hue = 0;
-      const chroma = 0; // Recommended 0.01, 0.02
-      return {
-        background: {
-          50: oklch(0.99, chroma, hue),
-          100: oklch(0.97, chroma, hue),
-          200: oklch(0.92, chroma, hue),
-          300: oklch(0.87, chroma, hue),
-          400: oklch(0.72, chroma, hue),
-          500: oklch(0.56, chroma, hue),
-          600: oklch(0.44, chroma, hue),
-          700: oklch(0.37, chroma, hue),
-          800: oklch(0.27, chroma, hue),
-          900: oklch(0.2, chroma, hue),
-        },
-        white: colors.white,
-        transparent: colors.transparent,
-        primary: lightDark(0.68, 0.153, 160), // #00B578
-        error: lightDark(0.65, 0.147, 15), // #D86371
-        sell: lightDark(0.65, 0.147, 15), // #D86371
-        buy: lightDark(0.68, 0.153, 160), // #00B578
-        success: lightDark(0.68, 0.153, 160), // #00B578
-        warning: lightDark(0.747, 0.18, 57.36), // #ff8a00
-        black: oklch(0.13, chroma, hue),
-        secondary: colors.gray,
-      };
-    },
-    columns: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      '3xs': '16rem',
-      '2xs': '18rem',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      '7xl': '80rem',
-    },
-    spacing: createTwConfigValues(0, 100, 1),
-    animation: {
-      none: 'none',
-      spin: 'spin 1s linear infinite',
-      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-      pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      bounce: 'bounce 1s infinite',
-      slideUp:
-        'fade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both, translateY 0.4s cubic-bezier(0.16, 1, 0.3, 1) both',
-    },
-    aspectRatio: {
-      auto: 'auto',
-      square: '1 / 1',
-      video: '16 / 9',
-    },
-    backdropBlur: ({ theme }) => theme('blur'),
-    backdropBrightness: ({ theme }) => theme('brightness'),
-    backdropContrast: ({ theme }) => theme('contrast'),
-    backdropGrayscale: ({ theme }) => theme('grayscale'),
-    backdropHueRotate: ({ theme }) => theme('hueRotate'),
-    backdropInvert: ({ theme }) => theme('invert'),
-    backdropOpacity: ({ theme }) => theme('opacity'),
-    backdropSaturate: ({ theme }) => theme('saturate'),
-    backdropSepia: ({ theme }) => theme('sepia'),
-    backgroundColor: ({ theme }) => theme('colors'),
-    backgroundImage: {
-      none: 'none',
-      'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
-      'gradient-to-tr':
-        'linear-gradient(to top right, var(--tw-gradient-stops))',
-      'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
-      'gradient-to-br':
-        'linear-gradient(to bottom right, var(--tw-gradient-stops))',
-      'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
-      'gradient-to-bl':
-        'linear-gradient(to bottom left, var(--tw-gradient-stops))',
-      'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
-      'gradient-to-tl':
-        'linear-gradient(to top left, var(--tw-gradient-stops))',
-    },
-    backgroundOpacity: ({ theme }) => theme('opacity'),
-    backgroundPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    backgroundSize: {
-      auto: 'auto',
-      cover: 'cover',
-      contain: 'contain',
-    },
-    blur: {
-      0: '0',
-      none: '0',
-      sm: '4px',
-      DEFAULT: '8px',
-      md: '12px',
-      lg: '16px',
-      xl: '24px',
-      '2xl': '40px',
-      '3xl': '64px',
-    },
-    brightness: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      90: '.9',
-      95: '.95',
-      100: '1',
-      105: '1.05',
-      110: '1.1',
-      125: '1.25',
-      150: '1.5',
-      200: '2',
-    },
-    borderColor: ({ theme }) => ({
-      ...theme('colors'),
-      DEFAULT: theme('colors.gray.200', 'currentColor'),
-    }),
-    borderOpacity: ({ theme }) => theme('opacity'),
-    borderRadius: {
-      ...createTwConfigValues(0, 50, 2),
-      DEFAULT: '16px',
-      full: '9999px',
-    },
-    borderSpacing: ({ theme }) => ({
-      ...theme('spacing'),
-    }),
-    borderWidth: {
-      DEFAULT: '1px',
-      0: '0px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    boxShadow: {
-      sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-      DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-      md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-      '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-      inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-      none: 'none',
-    },
-    boxShadowColor: ({ theme }) => theme('colors'),
-    caretColor: ({ theme }) => theme('colors'),
-    accentColor: ({ theme }) => ({
-      ...theme('colors'),
-      auto: 'auto',
-    }),
-    contrast: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      100: '1',
-      125: '1.25',
-      150: '1.5',
-      200: '2',
-    },
-    container: {},
-    content: {
-      none: 'none',
-    },
-    cursor: {
-      auto: 'auto',
-      default: 'default',
-      pointer: 'pointer',
-      wait: 'wait',
-      text: 'text',
-      move: 'move',
-      help: 'help',
-      'not-allowed': 'not-allowed',
-      none: 'none',
-      'context-menu': 'context-menu',
-      progress: 'progress',
-      cell: 'cell',
-      crosshair: 'crosshair',
-      'vertical-text': 'vertical-text',
-      alias: 'alias',
-      copy: 'copy',
-      'no-drop': 'no-drop',
-      grab: 'grab',
-      grabbing: 'grabbing',
-      'all-scroll': 'all-scroll',
-      'col-resize': 'col-resize',
-      'row-resize': 'row-resize',
-      'n-resize': 'n-resize',
-      'e-resize': 'e-resize',
-      's-resize': 's-resize',
-      'w-resize': 'w-resize',
-      'ne-resize': 'ne-resize',
-      'nw-resize': 'nw-resize',
-      'se-resize': 'se-resize',
-      'sw-resize': 'sw-resize',
-      'ew-resize': 'ew-resize',
-      'ns-resize': 'ns-resize',
-      'nesw-resize': 'nesw-resize',
-      'nwse-resize': 'nwse-resize',
-      'zoom-in': 'zoom-in',
-      'zoom-out': 'zoom-out',
-    },
-    divideColor: ({ theme }) => theme('borderColor'),
-    divideOpacity: ({ theme }) => theme('borderOpacity'),
-    divideWidth: ({ theme }) => theme('borderWidth'),
-    dropShadow: {
-      sm: '0 1px 1px rgb(0 0 0 / 0.05)',
-      DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
-      md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
-      lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
-      xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
-      '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
-      none: '0 0 #0000',
-    },
-    fill: ({ theme }) => theme('colors'),
-    grayscale: {
-      0: '0',
-      DEFAULT: '100%',
-    },
-    hueRotate: {
-      0: '0deg',
-      15: '15deg',
-      30: '30deg',
-      60: '60deg',
-      90: '90deg',
-      180: '180deg',
-    },
-    invert: {
-      0: '0',
-      DEFAULT: '100%',
-    },
-    flex: {
-      1: '1 1 0%',
-      auto: '1 1 auto',
-      initial: '0 1 auto',
-      none: 'none',
-    },
-    flexBasis: ({ theme }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      '1/12': '8.333333%',
-      '2/12': '16.666667%',
-      '3/12': '25%',
-      '4/12': '33.333333%',
-      '5/12': '41.666667%',
-      '6/12': '50%',
-      '7/12': '58.333333%',
-      '8/12': '66.666667%',
-      '9/12': '75%',
-      '10/12': '83.333333%',
-      '11/12': '91.666667%',
-      full: '100%',
-    }),
-    flexGrow: {
-      0: '0',
-      DEFAULT: '1',
-    },
-    flexShrink: {
-      0: '0',
-      DEFAULT: '1',
-    },
-    fontFamily: {
-      euclid: ['Euclid Circular A', 'sans-serif'],
-      'gt-america': ['GT America', 'sans-serif'],
-      sans: [
-        'ui-sans-serif',
-        'system-ui',
-        '-apple-system',
-        'BlinkMacSystemFont',
-        '"Segoe UI"',
-        'Roboto',
-        '"Helvetica Neue"',
-        'Arial',
-        '"Noto Sans"',
-        'sans-serif',
-        '"Apple Color Emoji"',
-        '"Segoe UI Emoji"',
-        '"Segoe UI Symbol"',
-        '"Noto Color Emoji"',
-      ],
-      serif: [
-        'ui-serif',
-        'Georgia',
-        'Cambria',
-        '"Times New Roman"',
-        'Times',
-        'serif',
-      ],
-      mono: [
-        'GT America Mono',
-        'ui-monospace',
-        'SFMono-Regular',
-        'Menlo',
-        'Monaco',
-        'Consolas',
-        '"Liberation Mono"',
-        '"Courier New"',
-        'monospace',
-      ],
-    },
-    fontSize: {
-      10: ['0.625rem', { lineHeight: '0.875rem' }],
-      12: ['0.75rem', { lineHeight: '1rem' }],
-      14: ['0.875rem', { lineHeight: '1.25rem' }],
-      16: ['1rem', { lineHeight: '1.5rem' }],
-      18: ['1.125rem', { lineHeight: '1.75rem' }],
-      20: ['1.25rem', { lineHeight: '1.75rem' }],
-      24: ['1.5rem', { lineHeight: '2rem' }],
-      30: ['1.875rem', { lineHeight: '2.25rem' }],
-      36: ['2.25rem', { lineHeight: '2.5rem' }],
-    },
-    fontWeight: {
-      'weight-100': '100',
-      'weight-200': '200',
-      'weight-300': '300',
-      'weight-400': '400',
-      'weight-500': '500',
-      'weight-600': '600',
-      'weight-700': '700',
-      'weight-800': '800',
-      'weight-900': '900',
-    },
-    gap: ({ theme }) => theme('spacing'),
-    gradientColorStops: ({ theme }) => theme('colors'),
-    gridAutoColumns: {
-      auto: 'auto',
-      min: 'min-content',
-      max: 'max-content',
-      fr: 'minmax(0, 1fr)',
-    },
-    gridAutoRows: {
-      auto: 'auto',
-      min: 'min-content',
-      max: 'max-content',
-      fr: 'minmax(0, 1fr)',
-    },
-    gridColumn: {
-      auto: 'auto',
-      'span-1': 'span 1 / span 1',
-      'span-2': 'span 2 / span 2',
-      'span-3': 'span 3 / span 3',
-      'span-4': 'span 4 / span 4',
-      'span-5': 'span 5 / span 5',
-      'span-6': 'span 6 / span 6',
-      'span-7': 'span 7 / span 7',
-      'span-8': 'span 8 / span 8',
-      'span-9': 'span 9 / span 9',
-      'span-10': 'span 10 / span 10',
-      'span-11': 'span 11 / span 11',
-      'span-12': 'span 12 / span 12',
-      'span-full': '1 / -1',
-    },
-    gridColumnEnd: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-    },
-    gridColumnStart: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-    },
-    gridRow: {
-      auto: 'auto',
-      'span-1': 'span 1 / span 1',
-      'span-2': 'span 2 / span 2',
-      'span-3': 'span 3 / span 3',
-      'span-4': 'span 4 / span 4',
-      'span-5': 'span 5 / span 5',
-      'span-6': 'span 6 / span 6',
-      'span-full': '1 / -1',
-    },
-    gridRowStart: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-    },
-    gridRowEnd: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-    },
-    gridTemplateColumns: {
-      none: 'none',
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-      7: 'repeat(7, minmax(0, 1fr))',
-      8: 'repeat(8, minmax(0, 1fr))',
-      9: 'repeat(9, minmax(0, 1fr))',
-      10: 'repeat(10, minmax(0, 1fr))',
-      11: 'repeat(11, minmax(0, 1fr))',
-      12: 'repeat(12, minmax(0, 1fr))',
-    },
-    gridTemplateRows: {
-      none: 'none',
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-    },
-    height: ({ theme }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      full: '100%',
-      screen: '100vh',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-    }),
-    inset: ({ theme }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      full: '100%',
-    }),
-    keyframes: {
-      spin: {
-        to: {
-          transform: 'rotate(360deg)',
-        },
-      },
-      ping: {
-        '75%, 100%': {
-          transform: 'scale(2)',
-          opacity: '0',
-        },
-      },
-      pulse: {
-        '50%': {
-          opacity: '.5',
-        },
-      },
-      bounce: {
-        '0%, 100%': {
-          transform: 'translateY(-25%)',
-          animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
-        },
-        '50%': {
-          transform: 'none',
-          animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
-        },
-      },
-      fade: {
-        from: {
-          opacity: 0,
-        },
-      },
-      translateY: {
-        from: {
-          transform: 'translateY(100%)',
-        },
-      },
-    },
-    letterSpacing: {
-      tighter: '-0.05em',
-      tight: '-0.025em',
-      normal: '0em',
-      wide: '0.025em',
-      wider: '0.05em',
-      widest: '0.1em',
-    },
-    lineHeight: {
-      none: '1',
-      tight: '1.25',
-      snug: '1.375',
-      normal: '1.5',
-      relaxed: '1.625',
-      loose: '2',
-      3: '.75rem',
-      4: '1rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      7: '1.75rem',
-      8: '2rem',
-      9: '2.25rem',
-      10: '2.5rem',
-    },
-    listStyleType: {
-      none: 'none',
-      disc: 'disc',
-      decimal: 'decimal',
-    },
-    margin: ({ theme }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-    }),
-    maxHeight: ({ theme }) => ({
-      ...theme('spacing'),
-      full: '100%',
-      screen: '100vh',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-    }),
-    maxWidth: ({ theme, breakpoints }) => ({
-      none: 'none',
-      0: '0rem',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      '7xl': '80rem',
-      full: '100%',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-      prose: '65ch',
-      ...breakpoints(theme('screens')),
-    }),
-    minHeight: {
-      0: '0px',
-      full: '100%',
-      screen: '100vh',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-    },
-    minWidth: {
-      0: '0px',
-      full: '100%',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-    },
-    objectPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    opacity: {
-      0: '0',
-      5: '0.05',
-      10: '0.1',
-      20: '0.2',
-      25: '0.25',
-      30: '0.3',
-      35: '0.35',
-      40: '0.4',
-      50: '0.5',
-      60: '0.6',
-      70: '0.7',
-      75: '0.75',
-      80: '0.8',
-      90: '0.9',
-      95: '0.95',
-      100: '1',
-    },
-    order: {
-      first: '-9999',
-      last: '9999',
-      none: '0',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-    },
-    padding: ({ theme }) => theme('spacing'),
-    placeholderColor: ({ theme }) => theme('colors'),
-    placeholderOpacity: ({ theme }) => theme('opacity'),
-    outlineColor: ({ theme }) => theme('colors'),
-    outlineOffset: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    outlineWidth: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    ringColor: ({ theme }) => ({
-      DEFAULT: theme(`colors.blue.500`, '#3b82f6'),
-      ...theme('colors'),
-    }),
-    ringOffsetColor: ({ theme }) => theme('colors'),
-    ringOffsetWidth: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    ringOpacity: ({ theme }) => ({
-      DEFAULT: '0.5',
-      ...theme('opacity'),
-    }),
-    ringWidth: {
-      DEFAULT: '3px',
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    rotate: {
-      0: '0deg',
-      1: '1deg',
-      2: '2deg',
-      3: '3deg',
-      6: '6deg',
-      12: '12deg',
-      45: '45deg',
-      90: '90deg',
-      180: '180deg',
-    },
-    saturate: {
-      0: '0',
-      50: '.5',
-      100: '1',
-      150: '1.5',
-      200: '2',
-    },
-    scale: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      90: '.9',
-      95: '.95',
-      100: '1',
-      105: '1.05',
-      110: '1.1',
-      125: '1.25',
-      150: '1.5',
-    },
-    scrollMargin: ({ theme }) => ({
-      ...theme('spacing'),
-    }),
-    scrollPadding: ({ theme }) => theme('spacing'),
-    sepia: {
-      0: '0',
-      DEFAULT: '100%',
-    },
-    skew: {
-      0: '0deg',
-      1: '1deg',
-      2: '2deg',
-      3: '3deg',
-      6: '6deg',
-      12: '12deg',
-    },
-    space: ({ theme }) => ({
-      ...theme('spacing'),
-    }),
-    stroke: ({ theme }) => theme('colors'),
-    strokeWidth: {
-      0: '0',
-      1: '1',
-      2: '2',
-    },
-    textColor: ({ theme }) => theme('colors'),
-    textDecorationColor: ({ theme }) => theme('colors'),
-    textDecorationThickness: {
-      auto: 'auto',
-      'from-font': 'from-font',
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    textUnderlineOffset: {
-      auto: 'auto',
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    textIndent: ({ theme }) => ({
-      ...theme('spacing'),
-    }),
-    textOpacity: ({ theme }) => theme('opacity'),
-    transformOrigin: {
-      center: 'center',
-      top: 'top',
-      'top-right': 'top right',
-      right: 'right',
-      'bottom-right': 'bottom right',
-      bottom: 'bottom',
-      'bottom-left': 'bottom left',
-      left: 'left',
-      'top-left': 'top left',
-    },
-    transitionDelay: {
-      75: '75ms',
-      100: '100ms',
-      150: '150ms',
-      200: '200ms',
-      300: '300ms',
-      500: '500ms',
-      700: '700ms',
-      1000: '1000ms',
-    },
-    transitionDuration: {
-      DEFAULT: '150ms',
-      75: '75ms',
-      100: '100ms',
-      150: '150ms',
-      200: '200ms',
-      300: '300ms',
-      500: '500ms',
-      700: '700ms',
-      1000: '1000ms',
-    },
-    transitionProperty: {
-      none: 'none',
-      all: 'all',
-      DEFAULT:
-        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors:
-        'color, background-color, border-color, text-decoration-color, fill, stroke',
-      opacity: 'opacity',
-      shadow: 'box-shadow',
-      transform: 'transform',
-    },
-    transitionTimingFunction: {
-      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
-      linear: 'linear',
-      in: 'cubic-bezier(0.4, 0, 1, 1)',
-      out: 'cubic-bezier(0, 0, 0.2, 1)',
-      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-    translate: ({ theme }) => ({
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      full: '100%',
-    }),
-    width: ({ theme }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      '1/12': '8.333333%',
-      '2/12': '16.666667%',
-      '3/12': '25%',
-      '4/12': '33.333333%',
-      '5/12': '41.666667%',
-      '6/12': '50%',
-      '7/12': '58.333333%',
-      '8/12': '66.666667%',
-      '9/12': '75%',
-      '10/12': '83.333333%',
-      '11/12': '91.666667%',
-      full: '100%',
-      screen: '100vw',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-    }),
-    willChange: {
-      auto: 'auto',
-      scroll: 'scroll-position',
-      contents: 'contents',
-      transform: 'transform',
-    },
-    zIndex: {
-      auto: 'auto',
-      0: '0',
-      10: '10',
-      20: '20',
-      30: '30',
-      40: '40',
-      50: '50',
-    },
-  },
-  plugins: [],
-};
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 000000000..cb1b5c6cb
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,205 @@
+import type { Config } from 'tailwindcss';
+import { formatRgb } from 'culori';
+
+function createTwConfigValues(start: number, end: number, step: number) {
+  const remBase = 16;
+  const obj = {};
+  for (let i = start; i <= end; i = i + step) {
+    obj[i] = `${i / remBase}rem`;
+  }
+  return obj;
+}
+
+const oklch = (l: number, c: number, h: number) => {
+  const result = formatRgb(`oklch(${l} ${c} ${h} / 0)`);
+  return result.replace(', 0)', ', <alpha-value>)');
+};
+const lighten = (l: number, amount: number) => Math.min(l + amount, 1);
+const darken = (l: number, amount: number) => Math.max(l - amount, 0);
+
+const lightDark = (l: number, c: number, h: number) => ({
+  light: oklch(lighten(l, 0.2), c, h),
+  DEFAULT: oklch(l, c, h),
+  dark: oklch(darken(l, 0.5), c, h),
+});
+
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
+    colors: ({ colors }) => {
+      // Background color variables
+      const hue = 0;
+      const chroma = 0; // Recommended 0.01, 0.02
+      return {
+        background: {
+          50: oklch(0.99, chroma, hue),
+          100: oklch(0.97, chroma, hue),
+          200: oklch(0.92, chroma, hue),
+          300: oklch(0.87, chroma, hue),
+          400: oklch(0.72, chroma, hue),
+          500: oklch(0.56, chroma, hue),
+          600: oklch(0.44, chroma, hue),
+          700: oklch(0.37, chroma, hue),
+          800: oklch(0.27, chroma, hue),
+          900: oklch(0.2, chroma, hue),
+        },
+        white: colors.white,
+        transparent: colors.transparent,
+        primary: lightDark(0.68, 0.153, 160), // #00B578
+        error: lightDark(0.65, 0.147, 15), // #D86371
+        sell: lightDark(0.65, 0.147, 15), // #D86371
+        buy: lightDark(0.68, 0.153, 160), // #00B578
+        success: lightDark(0.68, 0.153, 160), // #00B578
+        warning: lightDark(0.747, 0.18, 57.36), // #ff8a00
+        black: oklch(0.13, chroma, hue),
+      };
+    },
+    spacing: createTwConfigValues(0, 100, 1),
+    animation: {
+      none: 'none',
+      spin: 'spin 1s linear infinite',
+      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
+      pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      bounce: 'bounce 1s infinite',
+      slideUp:
+        'fade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both, translateY 0.4s cubic-bezier(0.16, 1, 0.3, 1) both',
+    },
+    borderColor: ({ theme }) => ({
+      ...theme('colors'),
+      DEFAULT: theme('colors.gray.200', 'currentColor'),
+    }),
+    borderRadius: {
+      ...createTwConfigValues(0, 50, 2),
+      DEFAULT: '16px',
+      full: '9999px',
+    },
+    fontFamily: {
+      euclid: ['Euclid Circular A', 'sans-serif'],
+      'gt-america': ['GT America', 'sans-serif'],
+      sans: [
+        'ui-sans-serif',
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        '"Noto Sans"',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      serif: [
+        'ui-serif',
+        'Georgia',
+        'Cambria',
+        '"Times New Roman"',
+        'Times',
+        'serif',
+      ],
+      mono: [
+        'GT America Mono',
+        'ui-monospace',
+        'SFMono-Regular',
+        'Menlo',
+        'Monaco',
+        'Consolas',
+        '"Liberation Mono"',
+        '"Courier New"',
+        'monospace',
+      ],
+    },
+    fontSize: {
+      10: ['0.625rem', { lineHeight: '0.875rem' }],
+      12: ['0.75rem', { lineHeight: '1rem' }],
+      14: ['0.875rem', { lineHeight: '1.25rem' }],
+      16: ['1rem', { lineHeight: '1.5rem' }],
+      18: ['1.125rem', { lineHeight: '1.75rem' }],
+      20: ['1.25rem', { lineHeight: '1.75rem' }],
+      24: ['1.5rem', { lineHeight: '2rem' }],
+      30: ['1.875rem', { lineHeight: '2.25rem' }],
+      36: ['2.25rem', { lineHeight: '2.5rem' }],
+    },
+    fontWeight: {
+      'weight-100': '100',
+      'weight-200': '200',
+      'weight-300': '300',
+      'weight-400': '400',
+      'weight-500': '500',
+      'weight-600': '600',
+      'weight-700': '700',
+      'weight-800': '800',
+      'weight-900': '900',
+    },
+    keyframes: {
+      spin: {
+        to: {
+          transform: 'rotate(360deg)',
+        },
+      },
+      ping: {
+        '75%, 100%': {
+          transform: 'scale(2)',
+          opacity: '0',
+        },
+      },
+      pulse: {
+        '50%': {
+          opacity: '.5',
+        },
+      },
+      bounce: {
+        '0%, 100%': {
+          transform: 'translateY(-25%)',
+          animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
+        },
+        '50%': {
+          transform: 'none',
+          animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
+        },
+      },
+      fade: {
+        from: {
+          opacity: '0',
+        },
+      },
+      translateY: {
+        from: {
+          transform: 'translateY(100%)',
+        },
+      },
+    },
+    maxWidth: ({ theme, breakpoints }) => ({
+      none: 'none',
+      0: '0rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+      prose: '65ch',
+      ...breakpoints(theme('screens')),
+    }),
+  },
+  plugins: [],
+} satisfies Config;
diff --git a/yarn.lock b/yarn.lock
index ca94f2b11..d0f99879e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17,6 +17,11 @@
   resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.9.0.tgz#223572538f6bea336750039bb43a4016dcc8182d"
   integrity sha512-iowxq3U30sghZotgl4s/oJRci6WPBfNO5YYgk2cIOMCHr3LeGPcsZjCEr+33Q4N+oV3OABDAtA+pyvWjbvBifQ==
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@^2.2.0":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
@@ -1242,6 +1247,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
+  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -2002,6 +2014,18 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
 "@jest/expect-utils@^29.6.2":
   version "29.6.2"
   resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.6.2.tgz#1b97f290d0185d264dd9fdec7567a14a38a90534"
@@ -2241,6 +2265,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
 "@playwright/test@^1.37.1":
   version "1.37.1"
   resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.37.1.tgz#e7f44ae0faf1be52d6360c6bbf689fd0057d9b6f"
@@ -3854,30 +3883,11 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-node@^1.8.2:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
-  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
-
 acorn-walk@^8.0.2, acorn-walk@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^7.0.0:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
 acorn@^8.1.0, acorn@^8.10.0, acorn@^8.8.1, acorn@^8.8.2, acorn@^8.9.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
@@ -3955,6 +3965,11 @@ ansi-styles@^6.0.0, ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -4590,7 +4605,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -4647,6 +4662,11 @@ commander@^2.20.3:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -4745,7 +4765,7 @@ cross-fetch@^3.1.4, cross-fetch@^3.1.5:
   dependencies:
     node-fetch "^2.6.12"
 
-cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -5151,11 +5171,6 @@ define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defined@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.1.tgz#c0b9db27bfaffd95d6f61399419b893df0f91ebf"
-  integrity sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==
-
 delaunator@5:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.0.tgz#60f052b28bd91c9b4566850ebf7756efe821d81b"
@@ -5196,15 +5211,6 @@ detect-browser@5.3.0:
   resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
   integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==
 
-detective@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
-  integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
-  dependencies:
-    acorn-node "^1.8.2"
-    defined "^1.0.0"
-    minimist "^1.2.6"
-
 didyoumean@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
@@ -5961,7 +5967,7 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
   integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
 
-fast-glob@^3.2.11, fast-glob@^3.2.9:
+fast-glob@^3.2.9:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
   integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
@@ -5972,6 +5978,17 @@ fast-glob@^3.2.11, fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
+fast-glob@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -6078,6 +6095,14 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+foreground-child@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.1.1.tgz#1d173e776d75d2772fed08efe4a0de1ea1b12d0d"
+  integrity sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
 form-data@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
@@ -6236,6 +6261,17 @@ glob@9.3.2:
     minipass "^4.2.4"
     path-scurry "^1.6.1"
 
+glob@^10.3.10:
+  version "10.3.10"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
+  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.5"
+    minimatch "^9.0.1"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+    path-scurry "^1.10.1"
+
 glob@^7.1.3, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -6732,6 +6768,15 @@ isomorphic-ws@^4.0.1:
   resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz#55fd4cd6c5e6491e76dc125938dd863f5cd4f2dc"
   integrity sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==
 
+jackspeak@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
 jake@^10.8.5:
   version "10.8.7"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.7.tgz#63a32821177940c33f356e0ba44ff9d34e1c7d8f"
@@ -6812,6 +6857,11 @@ jest-util@^29.6.2:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
+jiti@^1.21.0:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+
 js-sha3@0.8.0, js-sha3@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
@@ -6977,11 +7027,16 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@2.1.0, lilconfig@^2.0.5, lilconfig@^2.0.6:
+lilconfig@2.1.0, lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
 
+lilconfig@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.1.tgz#9d8a246fa753106cfc205fd2d77042faca56e5e3"
+  integrity sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -7164,7 +7219,7 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@4.0.5, micromatch@^4.0.4:
+micromatch@4.0.5, micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -7238,6 +7293,13 @@ minimatch@^7.4.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.1:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
@@ -7312,6 +7374,15 @@ multiformats@^9.4.2:
   resolved "https://registry.yarnpkg.com/multiformats/-/multiformats-9.9.0.tgz#c68354e7d21037a8f1f8833c8ccd68618e8f1d37"
   integrity sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
@@ -7383,7 +7454,7 @@ nwsapi@^2.2.4:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
   integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
 
-object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -7612,7 +7683,7 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-scurry@^1.6.1:
+path-scurry@^1.10.1, path-scurry@^1.6.1:
   version "1.10.1"
   resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.1.tgz#9ba6bf5aa8500fe9fd67df4f0d9483b2b0bfc698"
   integrity sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==
@@ -7706,6 +7777,11 @@ pino@7.11.0:
     sonic-boom "^2.2.1"
     thread-stream "^0.15.1"
 
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
 pkg-types@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-1.0.3.tgz#988b42ab19254c01614d13f4f65a2cfc7880f868"
@@ -7735,41 +7811,41 @@ popmotion@11.0.5:
     style-value-types "5.1.2"
     tslib "2.4.0"
 
-postcss-import@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
-  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
     postcss-value-parser "^4.0.0"
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.0:
+postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
-  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
   dependencies:
-    lilconfig "^2.0.5"
-    yaml "^1.10.2"
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
 
-postcss-nested@5.0.6:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
-  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
   dependencies:
-    postcss-selector-parser "^6.0.6"
+    postcss-selector-parser "^6.0.11"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6:
-  version "6.0.13"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
-  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
+postcss-selector-parser@^6.0.11:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
@@ -7779,7 +7855,16 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.14, postcss@^8.4.27, postcss@^8.4.31, postcss@^8.4.32:
+postcss@^8.4.23:
+  version "8.4.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
+  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.27, postcss@^8.4.31, postcss@^8.4.32:
   version "8.4.33"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
   integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
@@ -7936,11 +8021,6 @@ quick-format-unescaped@^4.0.3:
   resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
   integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
 
-quick-lru@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
-  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -8119,7 +8199,7 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.1, resolve@^1.22.3, resolve@^1.22.4:
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.3, resolve@^1.22.4:
   version "1.22.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
   integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
@@ -8128,6 +8208,15 @@ resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.1, resolve@^1.22
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.2:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
@@ -8362,6 +8451,11 @@ signal-exit@^3.0.2, signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -8482,7 +8576,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8491,7 +8585,7 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.0, string-width@^5.0.1:
+string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
   integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
@@ -8548,7 +8642,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -8599,6 +8693,19 @@ style-value-types@5.1.2:
     hey-listen "^1.0.8"
     tslib "2.4.0"
 
+sucrase@^3.32.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 superjson@^1.10.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.13.1.tgz#a0b6ab5d22876f6207fcb9d08b0cb2acad8ee5cd"
@@ -8660,38 +8767,40 @@ table-layout@^1.0.2:
     typical "^5.2.0"
     wordwrapjs "^4.0.0"
 
-tailwind-merge@^1.13.2:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
-  integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
+tailwind-merge@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.2.tgz#87341e7604f0e20499939e152cd2841f41f7a3df"
+  integrity sha512-tWANXsnmJzgw6mQ07nE3aCDkCK4QdT3ThPMCzawoYA2Pws7vSTCvz3Vrjg61jVUGfFZPJzxEP+NimbcW+EdaDw==
+  dependencies:
+    "@babel/runtime" "^7.24.0"
 
-tailwindcss@3.1.8:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
-  integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
+tailwindcss@3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.3.tgz#be48f5283df77dfced705451319a5dffb8621519"
+  integrity sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==
   dependencies:
+    "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
-    color-name "^1.1.4"
-    detective "^5.2.1"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.11"
+    fast-glob "^3.3.0"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    lilconfig "^2.0.6"
+    jiti "^1.21.0"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.4.14"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.10"
-    postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
 
 temp@^0.9.4:
   version "0.9.4"
@@ -8711,6 +8820,20 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 thread-stream@^0.15.1:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.15.2.tgz#fb95ad87d2f1e28f07116eb23d85aba3bc0425f4"
@@ -8804,6 +8927,11 @@ ts-essentials@^7.0.1:
   resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-7.0.3.tgz#686fd155a02133eedcc5362dc8b5056cde3e5a38"
   integrity sha512-8+gr5+lqO3G84KdiTSMRLtuyJ+nTBVRKuCrK4lidMPdVeEp0uqC875uE5NMcaA7YYMN7XsNiFQuMvasF8HT/xQ==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 tsconfck@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-2.1.2.tgz#f667035874fa41d908c1fe4d765345fcb1df6e35"
@@ -9306,19 +9434,19 @@ wordwrapjs@^4.0.0:
     reduce-flatten "^2.0.0"
     typical "^5.2.0"
 
-wrap-ansi@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
-  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
     ansi-styles "^4.0.0"
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
   dependencies:
     ansi-styles "^4.0.0"
     string-width "^4.1.0"
@@ -9368,7 +9496,7 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@^4.0.1, xtend@^4.0.2:
+xtend@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -9398,11 +9526,16 @@ yaml@2.3.1:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
   integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
 
-yaml@^1.10.0, yaml@^1.10.2:
+yaml@^1.10.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.3.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.1.tgz#2e57e0b5e995292c25c75d2658f0664765210eed"
+  integrity sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==
+
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"