From a9137cb7fe5e5a31eafa31a12f765fb798330dac Mon Sep 17 00:00:00 2001
From: David Inga <david.inga@vizzuality.com>
Date: Wed, 3 Jan 2024 13:50:19 +0100
Subject: [PATCH] upgraded eslint and prettier

---
 client/.eslintrc.js                           |   8 +-
 client/.prettierrc.cjs                        |  10 ++
 client/.prettierrc.json                       |   8 -
 client/next.config.js                         |   3 -
 client/package.json                           |   9 +-
 client/src/components/accordion/component.tsx |   4 +-
 client/src/components/avatar/component.tsx    |   2 +-
 client/src/components/back-link/component.tsx |   4 +-
 client/src/components/badge/component.tsx     |   4 +-
 .../src/components/button-group/component.tsx |   2 +-
 client/src/components/button/component.tsx    |   4 +-
 client/src/components/callout/component.tsx   |   4 +-
 .../components/dialogs/delete/component.tsx   |  14 +-
 .../src/components/disclaimer/component.tsx   |   8 +-
 client/src/components/dropdown/component.tsx  |   2 +-
 .../components/file-dropzone/component.tsx    |   2 +-
 .../components/forms/checkbox/component.tsx   |   4 +-
 .../src/components/forms/input/component.tsx  |  10 +-
 .../src/components/forms/label/component.tsx  |   2 +-
 .../src/components/forms/radio/component.tsx  |   4 +-
 .../src/components/forms/range/component.tsx  |  10 +-
 .../forms/select/autocomplete/component.tsx   |  24 +--
 .../src/components/forms/select/component.tsx |  20 +--
 .../components/forms/textarea/component.tsx   |   6 +-
 client/src/components/icons/opacity.tsx       |   2 +-
 .../src/components/info-tooltip/component.tsx |   4 +-
 .../legend/item/comparisonModeToggle.tsx      |   2 +-
 .../src/components/legend/item/component.tsx  |  22 +--
 .../src/components/legend/item/dragHandle.tsx |   2 +-
 .../src/components/legend/item/info-modal.tsx |  12 +-
 .../components/legend/item/opacityControl.tsx |  10 +-
 .../legend/types/basic/component.tsx          |   4 +-
 .../legend/types/categorical/component.tsx    |   4 +-
 .../legend/types/choropleth/component.tsx     |   6 +-
 .../legend/types/comparative/component.tsx    |   6 +-
 .../legend/types/gradient/component.tsx       |   4 +-
 .../map/controls/basemap/component.tsx        |   8 +-
 .../map/controls/zoom/component.tsx           |   6 +-
 .../map/layers/mapbox/raster/hooks.tsx        |   3 +-
 client/src/components/map/popup/component.tsx |   2 +-
 client/src/components/modal/component.tsx     |  12 +-
 client/src/components/pill/component.tsx      |   2 +-
 client/src/components/search/component.tsx    |   8 +-
 .../components/string-avatar/component.tsx    |   2 +-
 client/src/components/table/cell.tsx          |  16 +-
 client/src/components/table/component.tsx     |  18 +-
 .../table/pagination/button/component.tsx     |   4 +-
 .../components/table/pagination/component.tsx |  12 +-
 client/src/components/table/row.tsx           |   6 +-
 client/src/components/tabs/component.tsx      |   4 +-
 client/src/components/toggle/component.tsx    |   8 +-
 client/src/components/tooltip/component.tsx   |   4 +-
 .../tree-select/checkbox/component.tsx        |   2 +-
 .../src/components/tree-select/component.tsx  |  28 ++--
 .../components/tree-select/search-input.tsx   |   4 +-
 .../components/tree-select/search-overlay.tsx |   8 +-
 client/src/components/widget/component.tsx    |   2 +-
 .../containers/admin/data-table/component.tsx |  14 +-
 .../admin/data-upload-error/component.tsx     |   4 +-
 .../admin/data-uploader/component.tsx         |   6 +-
 .../admin/edit-target-modal/component.tsx     |   8 +-
 .../containers/admin/no-data/component.tsx    |   4 +-
 .../comparison-chart/component.tsx            |   8 +-
 .../comparison-chart/legend/component.tsx     |  10 +-
 .../comparison-chart/tooltip/component.tsx    |  10 +-
 .../analysis-chart/impact-chart/component.tsx |   8 +-
 .../impact-chart/legend/component.tsx         |   8 +-
 .../impact-chart/tooltip/component.tsx        |   6 +-
 .../containers/analysis-sidebar/component.tsx |  24 +--
 .../categories/category-header/component.tsx  |   2 +-
 .../categories/category-layer/component.tsx   |   8 +-
 .../toggle-preview/component.tsx              |   4 +-
 .../analysis-contextual-layer/component.tsx   |  18 +-
 .../materials/component.tsx                   |  10 +-
 .../preview-map/component.tsx                 |   4 +-
 .../analysis-dynamic-metadata/component.tsx   |   8 +-
 .../analysis-filters/indicators/component.tsx |   2 +-
 .../more-filters/component.tsx                |  12 +-
 .../analysis-legend/component.tsx             |  15 +-
 .../contextual-legend-item/component.tsx      |   1 -
 .../material-legend-item/component.tsx        |   2 +-
 .../analysis-map/component.tsx                |  16 +-
 .../analysis-map/layers/contextual/hooks.tsx  |   6 +-
 .../analysis-map/layers/impact/hooks.ts       |   6 +-
 .../analysis-map/layers/material/hooks.ts     |   6 +-
 .../comparison-cell/component.tsx             |   8 +-
 .../analysis-table/component.tsx              |  20 +--
 .../analysis-table/types.d.ts                 |   4 +-
 .../containers/collapse-button/component.tsx  |   2 +-
 .../delete-user-modal/component.tsx           |   8 +-
 client/src/containers/edit-user/component.tsx |   2 +-
 client/src/containers/edit-user/user-form.tsx |   2 +-
 .../filters/years-range/component.tsx         |   8 +-
 .../interventions/form/component.tsx          |  46 +++---
 .../containers/mobile-header/component.tsx    |   4 +-
 .../src/containers/mode-control/component.tsx |   6 +-
 .../navigation/desktop/component.tsx          |  10 +-
 .../containers/navigation/error/component.tsx |   4 +-
 .../navigation/mobile/component.tsx           |   4 +-
 .../src/containers/page-loading/component.tsx |   6 +-
 .../containers/scenarios/card/component.tsx   |   8 +-
 .../scenarios/comparison/component.tsx        |   2 +-
 .../scenarios/filters/component.tsx           |   2 +-
 .../containers/scenarios/form/component.tsx   |   4 +-
 .../containers/scenarios/item/component.tsx   |  28 ++--
 .../scenarios/scenario-items/actions.tsx      |  11 +-
 .../scenarios/scenario-items/growth-rate.tsx  |   2 +-
 .../scenario-items/interventions.tsx          |   2 +-
 .../scenarios/scenario-items/make-public.tsx  |   4 +-
 .../containers/scenarios/table/component.tsx  |   2 +-
 .../targets/input-list/component.tsx          |  14 +-
 .../src/containers/targets/item/component.tsx |   4 +-
 .../src/containers/targets/list/component.tsx |   8 +-
 client/src/containers/toaster/component.tsx   |   2 +-
 .../update-password-form/component.tsx        |   4 +-
 .../update-profile-form/component.tsx         |   4 +-
 client/src/containers/uploader/component.tsx  |  10 +-
 .../containers/user-dropdown/component.tsx    |  16 +-
 client/src/containers/years/component.tsx     |   1 +
 client/src/hooks/admin-regions/index.ts       |   2 +-
 client/src/hooks/business-units/index.ts      |   4 +-
 client/src/hooks/sourcing-locations/index.ts  |   2 +-
 client/src/layouts/admin/component.tsx        |   6 +-
 client/src/layouts/analysis/component.tsx     |  14 +-
 client/src/layouts/application/component.tsx  |  12 +-
 .../layouts/application/icons/chart-bar.tsx   |   4 +-
 .../src/layouts/authentication/component.tsx  |   4 +-
 client/src/layouts/clean/component.tsx        |   4 +-
 client/src/pages/404.tsx                      |   6 +-
 client/src/pages/_error.tsx                   |   4 +-
 client/src/pages/analysis/chart.tsx           |   6 +-
 .../pages/auth/activate-account/[token].tsx   |   2 +-
 client/src/pages/auth/forgot-password.tsx     |  20 +--
 .../src/pages/auth/reset-password/[token].tsx |   2 +-
 client/src/pages/auth/signin.tsx              |   4 +-
 client/src/pages/auth/signup.tsx              |   4 +-
 client/src/pages/data/index.tsx               |   4 +-
 .../data/scenarios/[scenarioId]/edit.tsx      |  32 ++--
 .../interventions/[interventionId]/edit.tsx   |   4 +-
 .../[scenarioId]/interventions/new.tsx        |  10 +-
 client/src/pages/data/scenarios/index.tsx     |  26 +--
 client/src/pages/data/scenarios/new.tsx       |   2 +-
 client/src/pages/data/targets.tsx             |   8 +-
 client/src/pages/profile/index.tsx            |   4 +-
 client/src/pages/profile/users.tsx            |  18 +-
 client/src/store/index.ts                     |   4 +-
 client/src/store/utils.ts                     |   4 +-
 client/src/utils/csv-download.ts              |   1 -
 client/tsconfig.eslint.json                   |   4 +
 client/tsconfig.json                          |  26 ++-
 client/yarn.lock                              | 155 +++++++++++++-----
 151 files changed, 697 insertions(+), 602 deletions(-)
 create mode 100644 client/.prettierrc.cjs
 delete mode 100644 client/.prettierrc.json
 create mode 100644 client/tsconfig.eslint.json

diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index 36a5955f59..dad9749d5d 100644
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -3,10 +3,16 @@ module.exports = {
   extends: [
     'next/core-web-vitals',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',
+    'plugin:prettier/recommended',
   ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.eslint.json'],
+  },
+  plugins: ['@typescript-eslint', 'prettier'],
   settings: {
     'import/resolver': {
       typescript: true,
diff --git a/client/.prettierrc.cjs b/client/.prettierrc.cjs
new file mode 100644
index 0000000000..048e029bb2
--- /dev/null
+++ b/client/.prettierrc.cjs
@@ -0,0 +1,10 @@
+/** @type {import("prettier").Options} */
+module.exports = {
+  semi: true,
+  tabWidth: 2,
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all',
+  editorconfig: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+};
diff --git a/client/.prettierrc.json b/client/.prettierrc.json
deleted file mode 100644
index c73b4c1b4e..0000000000
--- a/client/.prettierrc.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "semi": true,
-  "tabWidth": 2,
-  "printWidth": 100,
-  "singleQuote": true,
-  "trailingComma": "all",
-  "editorconfig": true
-}
diff --git a/client/next.config.js b/client/next.config.js
index c0df00ee3d..2b183b914f 100644
--- a/client/next.config.js
+++ b/client/next.config.js
@@ -4,9 +4,6 @@ const nextConfig = {
   // ! the current approach we follow to handle layers on the map does not work with strict mode enabled,
   // ! do not enable it unless you know what you are doing or know the issue is fixed.
   reactStrictMode: false,
-  eslint: {
-    dirs: ['src'],
-  },
   output: 'standalone',
   redirects() {
     return [
diff --git a/client/package.json b/client/package.json
index 9a4553c86e..1931c277c1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -31,7 +31,7 @@
     "@headlessui/react": "v1.7.17",
     "@heroicons/react": "v1.0.6",
     "@hookform/resolvers": "2.8.8",
-    "@json2csv/plainjs": "^6.1.3",
+    "@json2csv/plainjs": "7.0.4",
     "@loaders.gl/core": "3.3.1",
     "@luma.gl/constants": "8.5.18",
     "@reduxjs/toolkit": "1.8.2",
@@ -88,14 +88,15 @@
     "cypress": "13.2.0",
     "eslint": "8.23.1",
     "eslint-config-next": "13.5.5",
-    "eslint-config-prettier": "8.6.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "^5.1.2",
     "istanbul-reports": "3.0.0",
     "nyc": "15.1.0",
     "nyc-report-lcov-absolute": "1.0.0",
-    "prettier": "2.8.3",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.10",
     "start-server-and-test": "1.14.0",
     "typescript": "5.2.2",
     "webpack": "5"
diff --git a/client/src/components/accordion/component.tsx b/client/src/components/accordion/component.tsx
index 42610023ca..64d9220b4f 100644
--- a/client/src/components/accordion/component.tsx
+++ b/client/src/components/accordion/component.tsx
@@ -45,12 +45,12 @@ const AccordionEntry = ({ header, children, expanded, onExpandedChange }: Accord
       })}
     >
       <div
-        className="flex flex-row gap-2 p-2 cursor-pointer place-items-start"
+        className="flex cursor-pointer flex-row place-items-start gap-2 p-2"
         onClick={toggleExpand}
       >
         <div className="h-fit">
           <ChevronRightIcon
-            className={classNames('w-5 h-5 text-gray-500 my-auto', {
+            className={classNames('my-auto h-5 w-5 text-gray-500', {
               'rotate-90': localIsExpanded,
             })}
           />
diff --git a/client/src/components/avatar/component.tsx b/client/src/components/avatar/component.tsx
index e15ffb0fcf..41ccb4b78b 100644
--- a/client/src/components/avatar/component.tsx
+++ b/client/src/components/avatar/component.tsx
@@ -6,7 +6,7 @@ import type { ImageProps } from 'next/image';
 export type AvatarProps = ImageProps;
 
 export const Avatar: React.FC<AvatarProps> = ({ className, ...props }: AvatarProps) => (
-  <div className={cx('relative h-10 w-10 rounded-full inline-block overflow-hidden', className)}>
+  <div className={cx('relative inline-block h-10 w-10 overflow-hidden rounded-full', className)}>
     <Image alt={props.alt || 'Profile avatar'} width={40} height={40} {...props} priority />
   </div>
 );
diff --git a/client/src/components/back-link/component.tsx b/client/src/components/back-link/component.tsx
index 93f19c3859..8849760582 100644
--- a/client/src/components/back-link/component.tsx
+++ b/client/src/components/back-link/component.tsx
@@ -11,11 +11,11 @@ const BackLink: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = forwardRef<
 >(({ children, className, href, ...props }, ref) => (
   <Link
     href={href}
-    className={classNames('flex text-navy-400 text-sm', className)}
+    className={classNames('flex text-sm text-navy-400', className)}
     ref={ref}
     {...props}
   >
-    <ArrowLeftIcon className="inline-block w-5 h-5 mr-4" />
+    <ArrowLeftIcon className="mr-4 inline-block h-5 w-5" />
     {children}
   </Link>
 ));
diff --git a/client/src/components/badge/component.tsx b/client/src/components/badge/component.tsx
index 25d181f0fe..52d057c8b3 100644
--- a/client/src/components/badge/component.tsx
+++ b/client/src/components/badge/component.tsx
@@ -26,7 +26,7 @@ const Badge: React.FC<BadgeProps> = ({
   return (
     <div
       className={classNames(
-        'flex items-center overflow-hidden shadow-sm px-2 py-px gap-x-0.5 max-w-fit min-w-fit',
+        'flex min-w-fit max-w-fit items-center gap-x-0.5 overflow-hidden px-2 py-px shadow-sm',
         className,
         THEME_CLASSNAMES[theme]?.wrapper,
         removable && 'pr-1',
@@ -38,7 +38,7 @@ const Badge: React.FC<BadgeProps> = ({
           type="button"
           className={classNames(
             THEME_CLASSNAMES[theme].closeIcon,
-            'flex-shrink-0 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none',
+            'inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full focus:outline-none',
           )}
           onClick={handleClick}
           aria-label="Remove"
diff --git a/client/src/components/button-group/component.tsx b/client/src/components/button-group/component.tsx
index 1d609fff91..696a2b13af 100644
--- a/client/src/components/button-group/component.tsx
+++ b/client/src/components/button-group/component.tsx
@@ -1,5 +1,5 @@
 const ButtonGroup: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className="relative flex bg-white border border-gray-200 rounded-md shadow-sm">
+  <div className="relative flex rounded-md border border-gray-200 bg-white shadow-sm">
     {children}
   </div>
 );
diff --git a/client/src/components/button/component.tsx b/client/src/components/button/component.tsx
index b7b1740396..32e7c2255f 100644
--- a/client/src/components/button/component.tsx
+++ b/client/src/components/button/component.tsx
@@ -135,8 +135,8 @@ const ButtonTemplate: React.FC<AnchorButtonProps> = ({ danger, icon, loading, si
     {loading && (
       <Loading
         className={classNames('mr-2', {
-          'w-3 h-3': size === 'xs',
-          'w-4 h-4': size !== 'xs',
+          'h-3 w-3': size === 'xs',
+          'h-4 w-4': size !== 'xs',
           'text-gray-900': variant === 'white' && !danger,
         })}
       />
diff --git a/client/src/components/callout/component.tsx b/client/src/components/callout/component.tsx
index 8477e2220b..27418682a4 100644
--- a/client/src/components/callout/component.tsx
+++ b/client/src/components/callout/component.tsx
@@ -22,9 +22,9 @@ const Callout = ({ type, children }: React.PropsWithChildren<CalloutProps>) => {
   const Icon = ICONS_BY_TYPE[type];
   return (
     <div
-      className={classNames('flex flex-row rounded-md p-2 text-sm gap-2', TYPE_CLASSNAMES[type])}
+      className={classNames('flex flex-row gap-2 rounded-md p-2 text-sm', TYPE_CLASSNAMES[type])}
     >
-      <Icon className="w-5 h-5 flex-shrink-0" />
+      <Icon className="h-5 w-5 flex-shrink-0" />
       <div>{children}</div>
     </div>
   );
diff --git a/client/src/components/dialogs/delete/component.tsx b/client/src/components/dialogs/delete/component.tsx
index 4460ab9f0f..55649d87b1 100644
--- a/client/src/components/dialogs/delete/component.tsx
+++ b/client/src/components/dialogs/delete/component.tsx
@@ -27,11 +27,11 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -41,12 +41,12 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                 <div className="sm:flex sm:items-start">
-                  <div className="flex items-center justify-center flex-shrink-0 mx-auto rounded-full w-14 h-14 bg-red-50 sm:mx-0">
-                    <ExclamationIcon className="w-6 h-6 text-red-400" aria-hidden="true" />
+                  <div className="mx-auto flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-red-50 sm:mx-0">
+                    <ExclamationIcon className="h-6 w-6 text-red-400" aria-hidden="true" />
                   </div>
-                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
                       {title}
                     </Dialog.Title>
@@ -56,7 +56,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
                   </div>
                   {children}
                 </div>
-                <div className="flex justify-center mt-4 space-x-4 sm:justify-end sm:mt-4">
+                <div className="mt-4 flex justify-center space-x-4 sm:mt-4 sm:justify-end">
                   <Button type="button" variant="white" onClick={onClose}>
                     Cancel
                   </Button>
diff --git a/client/src/components/disclaimer/component.tsx b/client/src/components/disclaimer/component.tsx
index ba4f1d3569..a5bbab6035 100644
--- a/client/src/components/disclaimer/component.tsx
+++ b/client/src/components/disclaimer/component.tsx
@@ -49,21 +49,21 @@ const Disclaimer: React.FC<DisclaimerProps> = ({
     >
       <div
         className={classNames(
-          'p-6 mt-6 text-sm text-left rounded-md bg-white border',
+          'mt-6 rounded-md border bg-white p-6 text-left text-sm',
           WRAPPER_CLASS[variant],
         )}
       >
-        <div className="flex space-x-6 items-center">
+        <div className="flex items-center space-x-6">
           <div className="flex-none">
             {icon || (
               <div
                 className={classNames(
-                  'flex items-center justify-center rounded-full w-[72px] h-[72px]',
+                  'flex h-[72px] w-[72px] items-center justify-center rounded-full',
                   ICON_BG_CLASS[variant],
                 )}
               >
                 <ExclamationIcon
-                  className={classNames('w-8 h-8 text-orange-500', ICON_CLASS[variant])}
+                  className={classNames('h-8 w-8 text-orange-500', ICON_CLASS[variant])}
                 />
               </div>
             )}
diff --git a/client/src/components/dropdown/component.tsx b/client/src/components/dropdown/component.tsx
index e82375a08d..5987d4950f 100644
--- a/client/src/components/dropdown/component.tsx
+++ b/client/src/components/dropdown/component.tsx
@@ -12,7 +12,7 @@ export const Button: React.FC<React.PropsWithChildren> = ({ children, ...props }
 
 export const Items: React.FC<React.PropsWithChildren> = ({ children, ...props }) => (
   <Menu.Items
-    className="absolute right-0 z-40 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+    className="absolute right-0 z-40 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     {...props}
   >
     {children}
diff --git a/client/src/components/file-dropzone/component.tsx b/client/src/components/file-dropzone/component.tsx
index 8f88e7b11e..01ce753b27 100644
--- a/client/src/components/file-dropzone/component.tsx
+++ b/client/src/components/file-dropzone/component.tsx
@@ -36,7 +36,7 @@ const FileDropZone: React.FC<FileDropZoneProps> = ({ isUploading, ...dropZoneOpt
       <input {...getInputProps()} />
 
       <div className="space-y-1">
-        <div className="flex justify-center w-full mb-4">
+        <div className="mb-4 flex w-full justify-center">
           {isUploading ? (
             <Lottie animationData={uploaderAnimation} loop autoplay />
           ) : (
diff --git a/client/src/components/forms/checkbox/component.tsx b/client/src/components/forms/checkbox/component.tsx
index bdcb262b34..b38055bfff 100644
--- a/client/src/components/forms/checkbox/component.tsx
+++ b/client/src/components/forms/checkbox/component.tsx
@@ -11,7 +11,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       <div className="flex items-center">
         <input
           className={classnames(
-            'border rounded text-sm focus:outline-none focus:ring-2 focus:ring-navy-400/20 focus:border-navy-400 px-0',
+            'rounded border px-0 text-sm focus:border-navy-400 focus:outline-none focus:ring-2 focus:ring-navy-400/20',
             props.disabled ? 'border-gray-200' : 'border-navy-400',
             !props.disabled && error ? 'border-red-400' : 'border-gray-200',
           )}
@@ -22,7 +22,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <label
           htmlFor={props.id}
           className={classnames(
-            'block ml-2 text-sm',
+            'ml-2 block text-sm',
             props.disabled ? 'text-gray-200' : 'text-gray-900',
           )}
         >
diff --git a/client/src/components/forms/input/component.tsx b/client/src/components/forms/input/component.tsx
index 3cef54cf64..cc1d04f6a0 100644
--- a/client/src/components/forms/input/component.tsx
+++ b/client/src/components/forms/input/component.tsx
@@ -11,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     <>
       <div className={classnames('relative rounded-md shadow-sm', className)}>
         {icon && (
-          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
             {cloneElement(icon, {
               className: classnames(
                 'w-4 h-4',
@@ -23,7 +23,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
         <input
           className={classnames(
-            'block w-full px-4 py-2.5 leading-5 rounded-md text-sm border placeholder:text-gray-500 focus:outline-none focus:ring-0',
+            'block w-full rounded-md border px-4 py-2.5 text-sm leading-5 placeholder:text-gray-500 focus:outline-none focus:ring-0',
             error ? 'border-red-400 focus:border-red-400' : 'border-gray-200 focus:border-navy-400',
             inputProps.disabled ? 'bg-gray-300/20 text-gray-300' : 'bg-white text-gray-900',
             {
@@ -39,7 +39,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         {unit && (
           <div
             className={classnames(
-              'absolute inset-y-0 flex items-center pr-3 pointer-events-none',
+              'pointer-events-none absolute inset-y-0 flex items-center pr-3',
               error ? 'right-6' : 'right-0',
             )}
           >
@@ -47,8 +47,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           </div>
         )}
         {error && (
-          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-            <ExclamationCircleIcon className="w-4 h-4 text-red-400" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <ExclamationCircleIcon className="h-4 w-4 text-red-400" />
           </div>
         )}
       </div>
diff --git a/client/src/components/forms/label/component.tsx b/client/src/components/forms/label/component.tsx
index a11f805be8..509b191057 100644
--- a/client/src/components/forms/label/component.tsx
+++ b/client/src/components/forms/label/component.tsx
@@ -6,7 +6,7 @@ type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
 
 const Label: React.FC<LabelProps> = ({ className, children, ...props }) => (
   <label
-    className={classnames('block text-sm font-medium text-gray-900 mb-1', className)}
+    className={classnames('mb-1 block text-sm font-medium text-gray-900', className)}
     {...props}
   >
     {children}
diff --git a/client/src/components/forms/radio/component.tsx b/client/src/components/forms/radio/component.tsx
index 42eddafc3e..71d4ec2a5e 100644
--- a/client/src/components/forms/radio/component.tsx
+++ b/client/src/components/forms/radio/component.tsx
@@ -11,7 +11,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
       <div className="flex items-center">
         <input
           className={classnames(
-            'border rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-navy-400/20 focus:border-navy-400 px-0',
+            'rounded-full border px-0 text-sm focus:border-navy-400 focus:outline-none focus:ring-2 focus:ring-navy-400/20',
             props.disabled ? 'border-gray-200' : 'border-navy-400',
             !props.disabled && error ? 'border-red-400' : 'border-gray-200',
           )}
@@ -22,7 +22,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
         <label
           htmlFor={props.id}
           className={classnames(
-            'block ml-2 text-sm',
+            'ml-2 block text-sm',
             props.disabled ? 'text-gray-300' : 'text-gray-900',
           )}
         >
diff --git a/client/src/components/forms/range/component.tsx b/client/src/components/forms/range/component.tsx
index 2efe76852b..f4b948fb2a 100644
--- a/client/src/components/forms/range/component.tsx
+++ b/client/src/components/forms/range/component.tsx
@@ -33,7 +33,7 @@ const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, step = 1, value, on
         renderTrack={({ props, children }) => (
           <div {...props} className="relative h-6 w-full">
             {children}
-            <div className="w-full h-0.5 flex flex-row top-1/2 relative -z-10">
+            <div className="relative top-1/2 -z-10 flex h-0.5 w-full flex-row">
               <div className="h-full bg-navy-400" style={{ width: `${fillPercentage}%` }} />
               <div className="h-full bg-gray-100" style={{ width: `${100 - fillPercentage}%` }} />
             </div>
@@ -43,7 +43,7 @@ const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, step = 1, value, on
           <div
             {...props}
             className={classNames(
-              'relative h-4 w-4 rounded-full border-navy-400 border-2 text-center',
+              'relative h-4 w-4 rounded-full border-2 border-navy-400 text-center',
               {
                 'bg-white': !isDragged,
                 'bg-navy-400': isDragged,
@@ -51,11 +51,11 @@ const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, step = 1, value, on
             )}
           >
             {isDragged && (
-              <div className="absolute top-2 -translate-y-full left-1/2 -translate-x-1/2">
-                <div className="min-w-fit text-white bg-black p-2 rounded-md text-xs whitespace-nowrap">
+              <div className="absolute left-1/2 top-2 -translate-x-1/2 -translate-y-full">
+                <div className="min-w-fit whitespace-nowrap rounded-md bg-black p-2 text-xs text-white">
                   {value} {unit}
                 </div>
-                <div className="bg-black w-4 h-4 relative left-1/2 -translate-x-1/2 bottom-3 rotate-45 rounded-sm" />
+                <div className="relative bottom-3 left-1/2 h-4 w-4 -translate-x-1/2 rotate-45 rounded-sm bg-black" />
               </div>
             )}
           </div>
diff --git a/client/src/components/forms/select/autocomplete/component.tsx b/client/src/components/forms/select/autocomplete/component.tsx
index c1cc4042a4..750cf11e1b 100644
--- a/client/src/components/forms/select/autocomplete/component.tsx
+++ b/client/src/components/forms/select/autocomplete/component.tsx
@@ -127,16 +127,16 @@ const AutoCompleteSelect = <T,>({
         {({ open }) => (
           <>
             {!!label && (
-              <Combobox.Label className="block text-sm font-medium text-gray-700">
+              <Combobox.Label className="text-gray-700 block text-sm font-medium">
                 {label}
               </Combobox.Label>
             )}
             <div className="relative w-full overflow-hidden">
               <Combobox.Input
                 className={classnames(
-                  'w-full inline-flex items-center py-2.5 pl-3 text-left leading-5',
-                  'border rounded-md shadow-sm cursor-default hover:cursor-pointer focus:border-navy-400 focus:outline-none focus:ring-0',
-                  'disabled:bg-gray-300/20 disabled:cursor-default text-sm truncate',
+                  'inline-flex w-full items-center py-2.5 pl-3 text-left leading-5',
+                  'cursor-default rounded-md border shadow-sm hover:cursor-pointer focus:border-navy-400 focus:outline-none focus:ring-0',
+                  'truncate text-sm disabled:cursor-default disabled:bg-gray-300/20',
                   clearable ? 'pr-14' : 'pr-10',
                   {
                     'bg-white placeholder:text-gray-500': theme === 'light',
@@ -153,7 +153,7 @@ const AutoCompleteSelect = <T,>({
                 displayValue={(option: Option<T>) => option?.label}
               />
               <Combobox.Button
-                className="absolute inset-0 flex items-center w-full pr-10"
+                className="absolute inset-0 flex w-full items-center pr-10"
                 as="div"
                 ref={refs.setReference}
               >
@@ -164,12 +164,12 @@ const AutoCompleteSelect = <T,>({
                       {!isEmptySelection && clearable && (
                         <button type="button" onClick={clearSelection}>
                           <XIcon
-                            className={classnames('w-4 h-4', theme === 'dark' && 'text-white')}
+                            className={classnames('h-4 w-4', theme === 'dark' && 'text-white')}
                           />
                         </button>
                       )}
                       <ChevronUpIcon
-                        className={classnames('w-4 h-4', {
+                        className={classnames('h-4 w-4', {
                           'text-gray-900': theme === 'light',
                           'text-white': theme === 'dark',
                           'text-gray-300': props.disabled,
@@ -183,12 +183,12 @@ const AutoCompleteSelect = <T,>({
                       {!isEmptySelection && clearable && (
                         <button type="button" onClick={clearSelection}>
                           <XIcon
-                            className={classnames('w-4 h-4', theme === 'dark' && 'text-white')}
+                            className={classnames('h-4 w-4', theme === 'dark' && 'text-white')}
                           />
                         </button>
                       )}
                       <ChevronDownIcon
-                        className={classnames('w-4 h-4', {
+                        className={classnames('h-4 w-4', {
                           'text-gray-900': theme === 'light',
                           'text-white': theme === 'dark',
                           'text-gray-300': props.disabled,
@@ -199,7 +199,7 @@ const AutoCompleteSelect = <T,>({
                   )}
                   {loading && (
                     <Loading
-                      className={classnames('w-4 h-4 text-navy-400', {
+                      className={classnames('h-4 w-4 text-navy-400', {
                         'text-navy-400': theme === 'light',
                         'text-white': theme === 'dark',
                       })}
@@ -220,7 +220,7 @@ const AutoCompleteSelect = <T,>({
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
                 afterLeave={handleAfterTransitionLeave}
-                className="z-50 overflow-auto text-base bg-white rounded-md shadow-sm max-h-60 ring-1 ring-gray-200 focus:outline-none"
+                className="z-50 max-h-60 overflow-auto rounded-md bg-white text-base shadow-sm ring-1 ring-gray-200 focus:outline-none"
                 style={{
                   position: strategy,
                   top: y ?? 0,
@@ -241,7 +241,7 @@ const AutoCompleteSelect = <T,>({
                       style={{ height: `${virtualItem.size}px` }}
                       className={({ active, disabled }) =>
                         classnames(
-                          'relative cursor-default text-sm select-none py-2 pl-3 pr-9 hover:cursor-pointer',
+                          'relative cursor-default select-none py-2 pl-3 pr-9 text-sm hover:cursor-pointer',
                           {
                             'bg-navy-50': active,
                             'pointer-events-none cursor-default': disabled,
diff --git a/client/src/components/forms/select/component.tsx b/client/src/components/forms/select/component.tsx
index e06a3f82f3..728832a9b3 100644
--- a/client/src/components/forms/select/component.tsx
+++ b/client/src/components/forms/select/component.tsx
@@ -132,13 +132,13 @@ const Select = <T,>({
         {({ open }) => (
           <>
             {!!label && (
-              <Listbox.Label className="block text-sm font-medium text-gray-700">
+              <Listbox.Label className="text-gray-700 block text-sm font-medium">
                 {label}
               </Listbox.Label>
             )}
             <Listbox.Button
               className={classnames(
-                'relative w-full min-h-[42px] inline-flex items-center text-left leading-5 border rounded-md shadow-sm cursor-default hover:cursor-pointer focus:outline-none focus:ring-0 disabled:bg-gray-300/20 disabled:cursor-default',
+                'relative inline-flex min-h-[42px] w-full cursor-default items-center rounded-md border text-left leading-5 shadow-sm hover:cursor-pointer focus:outline-none focus:ring-0 disabled:cursor-default disabled:bg-gray-300/20',
                 {
                   'bg-white focus:border-navy-400': theme === 'light',
                   'bg-navy-400 text-white placeholder:text-white focus:bg-navy-600':
@@ -154,11 +154,11 @@ const Select = <T,>({
               ref={refs.setReference}
             >
               {icon && <div className="mr-2">{cloneElement(icon)}</div>}
-              <span className="min-h-full block text-sm truncate">{labelSelect}</span>
-              <span className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
+              <span className="block min-h-full truncate text-sm">{labelSelect}</span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
                 {open && !loading && (
                   <ChevronUpIcon
-                    className={classnames('w-4 h-4', {
+                    className={classnames('h-4 w-4', {
                       'text-gray-300': props.disabled,
                       'text-gray-900': theme === 'light',
                       'text-white': theme === 'dark',
@@ -168,7 +168,7 @@ const Select = <T,>({
                 )}
                 {!open && !loading && (
                   <ChevronDownIcon
-                    className={classnames('w-4 h-4', {
+                    className={classnames('h-4 w-4', {
                       'text-gray-300': props.disabled,
                       'text-gray-900': theme === 'light',
                       'text-white': theme === 'dark',
@@ -178,7 +178,7 @@ const Select = <T,>({
                 )}
                 {loading && (
                   <Loading
-                    className={classnames('w-4 h-4 text-navy-400', {
+                    className={classnames('h-4 w-4 text-navy-400', {
                       'text-navy-400': theme === 'light',
                       'text-white': theme === 'dark',
                     })}
@@ -203,11 +203,11 @@ const Select = <T,>({
               }}
               ref={refs.setFloating}
             >
-              <div className="mt-2 overflow-y-auto text-base bg-white rounded-md shadow-sm max-h-60 ring-1 ring-gray-200 focus:outline-none max-w-sm">
+              <div className="mt-2 max-h-60 max-w-sm overflow-y-auto rounded-md bg-white text-base shadow-sm ring-1 ring-gray-200 focus:outline-none">
                 <Listbox.Options
                   ref={parentRef}
                   style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
-                  className="w-full relative"
+                  className="relative w-full"
                 >
                   {rowVirtualizer.getVirtualItems().map((virtualItem) => {
                     const option = options[virtualItem.index];
@@ -216,7 +216,7 @@ const Select = <T,>({
                         key={virtualItem.index}
                         className={({ active, disabled }) =>
                           classnames(
-                            'relative cursor-default text-sm select-none py-2 pl-3 pr-9 hover:cursor-pointer',
+                            'relative cursor-default select-none py-2 pl-3 pr-9 text-sm hover:cursor-pointer',
                             {
                               'bg-navy-50': active,
                               'pointer-events-none cursor-default': disabled,
diff --git a/client/src/components/forms/textarea/component.tsx b/client/src/components/forms/textarea/component.tsx
index 60b41423a7..d3a4f90e3b 100644
--- a/client/src/components/forms/textarea/component.tsx
+++ b/client/src/components/forms/textarea/component.tsx
@@ -12,7 +12,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div className={classnames('relative rounded-md shadow-sm', className)}>
         <textarea
           className={classnames(
-            'block border w-full rounded-md text-sm focus:outline-none focus:ring-0 focus:border-navy-400 px-4',
+            'block w-full rounded-md border px-4 text-sm focus:border-navy-400 focus:outline-none focus:ring-0',
             error ? 'border-red-400 pr-10' : 'border-gray-200',
             props.disabled ? 'text-gray-200' : 'text-gray-900',
           )}
@@ -20,8 +20,8 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...props}
         />
         {error && (
-          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-            <ExclamationCircleIcon className="w-4 h-4 text-red-400" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <ExclamationCircleIcon className="h-4 w-4 text-red-400" />
           </div>
         )}
       </div>
diff --git a/client/src/components/icons/opacity.tsx b/client/src/components/icons/opacity.tsx
index a99fc14e15..f2d00ff978 100644
--- a/client/src/components/icons/opacity.tsx
+++ b/client/src/components/icons/opacity.tsx
@@ -11,7 +11,7 @@ const OpacityIcon: React.FC = () => {
         d="M12.88 8.37c0 2.78-2.13 4.98-4.68 4.98a4.62 4.62 0 0 1-3.31-1.28 5.05 5.05 0 0 1-1.37-3.7c0-1.54.97-3.14 2.16-4.42.58-.62 1.18-1.14 1.69-1.49A5 5 0 0 1 8.2 2a5 5 0 0 1 .83.47c.5.35 1.11.87 1.7 1.5 1.18 1.27 2.15 2.87 2.15 4.41Z"
         stroke="#000"
         strokeWidth="1.3"
-        className="w-4 h-4 text-gray-900"
+        className="h-4 w-4 text-gray-900"
       />
     </svg>
   );
diff --git a/client/src/components/info-tooltip/component.tsx b/client/src/components/info-tooltip/component.tsx
index cc0da66ef9..cfbb6374dd 100644
--- a/client/src/components/info-tooltip/component.tsx
+++ b/client/src/components/info-tooltip/component.tsx
@@ -8,14 +8,14 @@ import type { InfoTooltipProps } from './types';
 export const InfoToolTip: React.FC<InfoTooltipProps> = ({ info, ...props }) => {
   const TooltipContent = useMemo(
     () => (
-      <div className="bg-gray-900 p-4 rounded-md w-52 text-xs text-white text-left">{info}</div>
+      <div className="w-52 rounded-md bg-gray-900 p-4 text-left text-xs text-white">{info}</div>
     ),
     [info],
   );
 
   return (
     <Tooltip arrow content={TooltipContent} className="w-54 text-center" theme="dark" {...props}>
-      <InformationCircleIcon className="w-4 h-4 text-gray-900" />
+      <InformationCircleIcon className="h-4 w-4 text-gray-900" />
     </Tooltip>
   );
 };
diff --git a/client/src/components/legend/item/comparisonModeToggle.tsx b/client/src/components/legend/item/comparisonModeToggle.tsx
index d520b30ad4..3d3cd81895 100644
--- a/client/src/components/legend/item/comparisonModeToggle.tsx
+++ b/client/src/components/legend/item/comparisonModeToggle.tsx
@@ -20,7 +20,7 @@ export const ComparisonToggle = () => {
   );
 
   return (
-    <div className="flex flex-row text-xs w-fit">
+    <div className="flex w-fit flex-row text-xs">
       <button
         className={classNames(
           COMMON_MODE_BUTTON_CLASSNAMES,
diff --git a/client/src/components/legend/item/component.tsx b/client/src/components/legend/item/component.tsx
index 577f4eb556..5b600b27fa 100644
--- a/client/src/components/legend/item/component.tsx
+++ b/client/src/components/legend/item/component.tsx
@@ -53,39 +53,39 @@ export const LegendItem = ({
 
   return (
     <div
-      className={classNames('flex flex-row gap-1 relative group py-3 pl-1 pr-2', {
+      className={classNames('group relative flex flex-row gap-1 py-3 pl-1 pr-2', {
         'bg-gray-50': !main,
       })}
     >
       <DragHandle className="invisible group-hover:visible" />
-      <div className="flex-grow min-w-0 space-y-2">
+      <div className="min-w-0 flex-grow space-y-2">
         {isLoading && (
-          <div className="flex justify-center w-full align-center">
+          <div className="align-center flex w-full justify-center">
             <Loading />
           </div>
         )}
         {name && (
           <div
-            className={classNames('flex items-start justify-between flex-grow', {
+            className={classNames('flex flex-grow items-start justify-between', {
               hidden: isLoading,
             })}
           >
-            <div className="flex-grow max-w-full min-w-0 text-sm text-left">{name}</div>
+            <div className="min-w-0 max-w-full flex-grow text-left text-sm">{name}</div>
             {showToolbar && (
               <div className="flex flex-row items-center">
-                <div className="flex items-center gap-x-1 mt-0.5">
+                <div className="mt-0.5 flex items-center gap-x-1">
                   <OpacityControl opacity={opacity} onChange={onChangeOpacity} />
                   {info && <InfoModal info={info} />}
                   <button type="button" onClick={handleToggleActive}>
                     {isActive ? (
-                      <EyeOffIcon className="w-4 h-4"></EyeOffIcon>
+                      <EyeOffIcon className="h-4 w-4"></EyeOffIcon>
                     ) : (
-                      <EyeIcon className="w-4 h-4"></EyeIcon>
+                      <EyeIcon className="h-4 w-4"></EyeIcon>
                     )}
                   </button>
                   {onHideLayer && (
                     <button type="button" onClick={onHideLayer}>
-                      <XIcon className="w-4 h-4" />
+                      <XIcon className="h-4 w-4" />
                     </button>
                   )}
                 </div>
@@ -97,9 +97,9 @@ export const LegendItem = ({
           <div className="space-y-2 overflow-hidden">
             {showComparisonModeToggle && isComparisonEnabled && <ComparisonToggle />}
             {children && (
-              <div className="flex flex-row justify-between w-full gap-2 text-gray-500">
+              <div className="flex w-full flex-row justify-between gap-2 text-gray-500">
                 <div className="flex-grow">{children}</div>
-                <div className="-mt-0.5 px text-2xs">{unit && `(${unit})`}</div>
+                <div className="px -mt-0.5 text-2xs">{unit && `(${unit})`}</div>
               </div>
             )}
           </div>
diff --git a/client/src/components/legend/item/dragHandle.tsx b/client/src/components/legend/item/dragHandle.tsx
index 192b2afaf2..5b724aaaa4 100644
--- a/client/src/components/legend/item/dragHandle.tsx
+++ b/client/src/components/legend/item/dragHandle.tsx
@@ -17,7 +17,7 @@ const DragHandle: React.FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...pr
     <div
       className={cx(
         className,
-        'p-0.5 pt-1 text-gray-400 h-fit',
+        'h-fit p-0.5 pt-1 text-gray-400',
         // 'flex flex-row w-[0.625rem] p-0.5 pt-1 h-[1.125rem]',
         // 'grid grid-cols-2 grid-rows-3 gap-x-0.5 gap-y-[0.1875rem] h-fit',
         {
diff --git a/client/src/components/legend/item/info-modal.tsx b/client/src/components/legend/item/info-modal.tsx
index 260e8af2b4..24e11e5ec0 100644
--- a/client/src/components/legend/item/info-modal.tsx
+++ b/client/src/components/legend/item/info-modal.tsx
@@ -13,27 +13,27 @@ const InfoModal = ({ info: { title, description, source } }: InfoModalProps) =>
   const [open, setOpen] = useState(false);
   return (
     <>
-      <button type="button" className="py-0 px-0" onClick={() => setOpen(true)}>
-        <InformationCircleIcon className="w-4 h-4" />
+      <button type="button" className="px-0 py-0" onClick={() => setOpen(true)}>
+        <InformationCircleIcon className="h-4 w-4" />
       </button>
       <Modal onDismiss={() => setOpen(false)} title={title || NO_DATA} open={open} size="narrow">
         <div>
-          <p className="text-gray-500 text-sm mb-4">{description}</p>
+          <p className="mb-4 text-sm text-gray-500">{description}</p>
           {!!source && (
-            <p className="font-semibold text-sm mb-2">
+            <p className="mb-2 text-sm font-semibold">
               Data layer source{Array.isArray(source) && source.length > 1 ? 's' : ''}:
             </p>
           )}
           {Array.isArray(source) ? (
             <ul className="space-y-2">
               {source.map((s) => (
-                <li key={s} className="text-gray-500 text-sm">
+                <li key={s} className="text-sm text-gray-500">
                   {s}
                 </li>
               ))}
             </ul>
           ) : (
-            <p className="text-gray-500 text-sm">{source}</p>
+            <p className="text-sm text-gray-500">{source}</p>
           )}
         </div>
       </Modal>
diff --git a/client/src/components/legend/item/opacityControl.tsx b/client/src/components/legend/item/opacityControl.tsx
index bf54bb9d9e..3d6b48f4e1 100644
--- a/client/src/components/legend/item/opacityControl.tsx
+++ b/client/src/components/legend/item/opacityControl.tsx
@@ -20,19 +20,19 @@ const OpacityControl: React.FC<OpacityControlProps> = ({ opacity, onChange }) =>
 
   const TooltipContent = useMemo(
     () => (
-      <div className="bg-white px-4 py-2 rounded-md w-52">
-        <div className="text-left text-gray-500 text-2xs">Opacity</div>
+      <div className="w-52 rounded-md bg-white px-4 py-2">
+        <div className="text-left text-2xs text-gray-500">Opacity</div>
         <RangeSlider
           unit="%"
           min={0}
           max={100}
           value={rangeValue}
-          className="rounded-md w-full"
+          className="w-full rounded-md"
           onChange={(value) => {
             setRangeValue(value);
           }}
         />
-        <div className="flex flex-row justify-between w-full text-gray-300 text-2xs">
+        <div className="flex w-full flex-row justify-between text-2xs text-gray-300">
           <div>0%</div>
           <div>100%</div>
         </div>
@@ -43,7 +43,7 @@ const OpacityControl: React.FC<OpacityControlProps> = ({ opacity, onChange }) =>
 
   return (
     <ToolTip arrow={false} content={TooltipContent} className="w-54 text-center">
-      <span className="w-4 h-4 text-gray-900">
+      <span className="h-4 w-4 text-gray-900">
         <OpacityIcon />
       </span>
     </ToolTip>
diff --git a/client/src/components/legend/types/basic/component.tsx b/client/src/components/legend/types/basic/component.tsx
index 070f120576..9e7befa1a9 100644
--- a/client/src/components/legend/types/basic/component.tsx
+++ b/client/src/components/legend/types/basic/component.tsx
@@ -7,11 +7,11 @@ export interface LegendTypeBasicProps {
 
 export const LegendTypeBasic: React.FC<LegendTypeBasicProps> = ({ className, items }) => (
   <div className={className}>
-    <ul className="flex flex-col w-full space-y-1">
+    <ul className="flex w-full flex-col space-y-1">
       {items.map(({ label, color }) => (
         <li key={label} className="flex space-x-2 text-xs">
           <div
-            className="flex-shrink-0 w-3 h-3 mt-0.5 rounded"
+            className="mt-0.5 h-3 w-3 flex-shrink-0 rounded"
             style={{
               backgroundColor: color,
             }}
diff --git a/client/src/components/legend/types/categorical/component.tsx b/client/src/components/legend/types/categorical/component.tsx
index 82233287b8..1440ee22a5 100644
--- a/client/src/components/legend/types/categorical/component.tsx
+++ b/client/src/components/legend/types/categorical/component.tsx
@@ -28,11 +28,11 @@ export const LegendTypeCategorical = ({
         ))}
       </ul>
 
-      <ul className="flex w-full mx-0 mt-1 mb-0">
+      <ul className="mx-0 mb-0 mt-1 flex w-full">
         {items.map(({ label }) => (
           <li
             key={label}
-            className="flex flex-wrap justify-center text-2xs leading-4 text-center"
+            className="flex flex-wrap justify-center text-center text-2xs leading-4"
             style={{
               width: `${100 / items.length}%`,
             }}
diff --git a/client/src/components/legend/types/choropleth/component.tsx b/client/src/components/legend/types/choropleth/component.tsx
index 3f8af5c844..568dd733fd 100644
--- a/client/src/components/legend/types/choropleth/component.tsx
+++ b/client/src/components/legend/types/choropleth/component.tsx
@@ -36,11 +36,11 @@ export const LegendTypeChoropleth: React.FC<LegendTypeChoroplethProps> = ({
       </div>
 
       <ul
-        className="flex m-0 mt-1 text-2xs"
+        className="m-0 mt-1 flex text-2xs"
         style={{ width: `${itemWidth * (items.length + 1)}%` }}
       >
         {(!!min || min === 0) && (
-          <li className="text-left group/item" style={{ width: `${itemWidth}%` }}>
+          <li className="group/item text-left" style={{ width: `${itemWidth}%` }}>
             <span className="truncate" title={min as string}>
               {min}
             </span>
@@ -49,7 +49,7 @@ export const LegendTypeChoropleth: React.FC<LegendTypeChoroplethProps> = ({
         {items.map(({ label, value }, i) => (
           <li
             key={`${value}-${i}`}
-            className={cx('text-center transform', {
+            className={cx('transform text-center', {
               '-translate-x-1/2': i < items.length - 1,
               '-translate-x-full text-right': i === items.length - 1,
             })}
diff --git a/client/src/components/legend/types/comparative/component.tsx b/client/src/components/legend/types/comparative/component.tsx
index 296fe91fe1..6f0ab42518 100644
--- a/client/src/components/legend/types/comparative/component.tsx
+++ b/client/src/components/legend/types/comparative/component.tsx
@@ -42,7 +42,7 @@ export const LegendTypeComparative: React.FC<LegendTypeComparativeProps> = ({
       </div>
 
       <ul
-        className="flex m-0 mt-1 text-2xs"
+        className="m-0 mt-1 flex text-2xs"
         style={{ width: `${itemWidth * legendItems.length}%` }}
       >
         {legendItems.map(({ label, value }, i) => (
@@ -50,8 +50,8 @@ export const LegendTypeComparative: React.FC<LegendTypeComparativeProps> = ({
             key={`${value}-${i}`}
             className={cx('transform', {
               'text-left': i < (legendItems.length - 1) / 2,
-              'text-center -translate-x-1/2': i === (legendItems.length - 1) / 2,
-              'text-right -translate-x-full': i > (legendItems.length - 1) / 2,
+              '-translate-x-1/2 text-center': i === (legendItems.length - 1) / 2,
+              '-translate-x-full text-right': i > (legendItems.length - 1) / 2,
             })}
             style={{ width: `${itemWidth}%` }}
           >
diff --git a/client/src/components/legend/types/gradient/component.tsx b/client/src/components/legend/types/gradient/component.tsx
index fa92896444..ffb729a1ee 100644
--- a/client/src/components/legend/types/gradient/component.tsx
+++ b/client/src/components/legend/types/gradient/component.tsx
@@ -17,13 +17,13 @@ export const LegendTypeGradient: React.FC<LegendTypeGradientProps> = ({
     })}
   >
     <div
-      className="flex w-full h-2"
+      className="flex h-2 w-full"
       style={{
         backgroundImage: `linear-gradient(to right, ${items.map((i) => i.color).join(',')})`,
       }}
     />
 
-    <ul className="flex justify-between w-full mt-1">
+    <ul className="mt-1 flex w-full justify-between">
       {items
         .filter(({ value }) => !!value)
         .map(({ label }) => (
diff --git a/client/src/components/map/controls/basemap/component.tsx b/client/src/components/map/controls/basemap/component.tsx
index 140137bd01..17f2a8e567 100644
--- a/client/src/components/map/controls/basemap/component.tsx
+++ b/client/src/components/map/controls/basemap/component.tsx
@@ -23,7 +23,7 @@ const BasemapControl = ({ value, onChange }: BasemapControlProps) => {
 
   const TooltipContent = useMemo(
     () => (
-      <div className="p-2 text-xs text-white bg-gray-900 rounded-lg">
+      <div className="rounded-lg bg-gray-900 p-2 text-xs text-white">
         Change to {basemapToToggleTo} basemap
       </div>
     ),
@@ -33,11 +33,11 @@ const BasemapControl = ({ value, onChange }: BasemapControlProps) => {
   return (
     <Tooltip hoverTrigger placement="left" theme="dark" content={TooltipContent}>
       <div
-        className="transition-colors duration-200 ease-in-out bg-white border border-white rounded-lg shadow-lg cursor-pointer aspect-square hover:bg-green-50 hover:border-navy-400"
+        className="aspect-square cursor-pointer rounded-lg border border-white bg-white shadow-lg transition-colors duration-200 ease-in-out hover:border-navy-400 hover:bg-green-50"
         onClick={handleClick}
       >
-        <div className="w-full h-full p-px pointer-events-none">
-          <div className="w-full h-full overflow-hidden rounded-md">
+        <div className="pointer-events-none h-full w-full p-px">
+          <div className="h-full w-full overflow-hidden rounded-md">
             <Image
               width={40}
               height={40}
diff --git a/client/src/components/map/controls/zoom/component.tsx b/client/src/components/map/controls/zoom/component.tsx
index 7a4936898e..0a7c15a271 100644
--- a/client/src/components/map/controls/zoom/component.tsx
+++ b/client/src/components/map/controls/zoom/component.tsx
@@ -42,7 +42,7 @@ export const ZoomControl: React.FC<ZoomControlProps> = ({ className, mapId = 'de
   return (
     <div
       className={cx(
-        'text-gray-900 ml-auto text-4xl flex flex-col justify-center select-none gap-[1.5px] rounded-lg border border-gray-200 overflow-hidden',
+        'ml-auto flex select-none flex-col justify-center gap-[1.5px] overflow-hidden rounded-lg border border-gray-200 text-4xl text-gray-900',
         className,
       )}
     >
@@ -55,7 +55,7 @@ export const ZoomControl: React.FC<ZoomControlProps> = ({ className, mapId = 'de
         disabled={zoom >= maxZoom || (!maxZoom && zoom > 21)}
         onClick={increaseZoom}
       >
-        <PlusIcon className="w-5 h-5" />
+        <PlusIcon className="h-5 w-5" />
       </button>
       <button
         className={COMMON_CLASSES}
@@ -66,7 +66,7 @@ export const ZoomControl: React.FC<ZoomControlProps> = ({ className, mapId = 'de
         disabled={zoom <= minZoom || (!minZoom && zoom < 1)}
         onClick={decreaseZoom}
       >
-        <MinusIcon className="w-5 h-5" />
+        <MinusIcon className="h-5 w-5" />
       </button>
     </div>
   );
diff --git a/client/src/components/map/layers/mapbox/raster/hooks.tsx b/client/src/components/map/layers/mapbox/raster/hooks.tsx
index c1964be90e..0b4f975316 100644
--- a/client/src/components/map/layers/mapbox/raster/hooks.tsx
+++ b/client/src/components/map/layers/mapbox/raster/hooks.tsx
@@ -1,9 +1,8 @@
 import { useMemo } from 'react';
-import { AnyLayer } from 'mapbox-gl';
 
 import { getTiler } from './utils';
 
-import type { AnySourceData } from 'mapbox-gl';
+import type { AnyLayer, AnySourceData } from 'mapbox-gl';
 import type { LayerSettings, LayerProps } from 'components/map/layers/types';
 
 export function useSource({
diff --git a/client/src/components/map/popup/component.tsx b/client/src/components/map/popup/component.tsx
index 960a21fa1a..bcd7a527d9 100644
--- a/client/src/components/map/popup/component.tsx
+++ b/client/src/components/map/popup/component.tsx
@@ -12,7 +12,7 @@ const PopUp = ({ children, position: { x, y, width, height } }: PopUpProps) => {
 
   return (
     <div
-      className={classNames('absolute z-10 pointer-events-none transform', {
+      className={classNames('pointer-events-none absolute z-10 transform', {
         '-translate-y-full': !withinYLimit,
         '-translate-x-full': !withinXLimit,
       })}
diff --git a/client/src/components/modal/component.tsx b/client/src/components/modal/component.tsx
index 161de064e0..6bec766dee 100644
--- a/client/src/components/modal/component.tsx
+++ b/client/src/components/modal/component.tsx
@@ -30,7 +30,7 @@ export const Modal: React.FC<ModalProps> = ({
 
   return (
     <Transition show={isOpen} as={Fragment}>
-      <Dialog onClose={handleClose} className="z-40 fixed inset-0">
+      <Dialog onClose={handleClose} className="fixed inset-0 z-40">
         {/* The backdrop, rendered as a fixed sibling to the panel container */}
         <Transition.Child
           as={Fragment}
@@ -64,14 +64,14 @@ export const Modal: React.FC<ModalProps> = ({
             >
               <div className="overflow-hidden rounded-md bg-white">
                 {dismissible && theme === 'default' && (
-                  <div className="relative flex items-center mb-4">
+                  <div className="relative mb-4 flex items-center">
                     <div className="text-lg font-medium">{title}</div>
                     <button
                       type="button"
                       onClick={handleClose}
-                      className="absolute flex items-center px-4 py-4 text-sm text-gray-300 rounded-md -right-4 -top-4 focus:text-black hover:text-black"
+                      className="absolute -right-4 -top-4 flex items-center rounded-md px-4 py-4 text-sm text-gray-300 hover:text-black focus:text-black"
                     >
-                      <XIcon className="w-6 h-6 text-gray-500" />
+                      <XIcon className="h-6 w-6 text-gray-500" />
                     </button>
                   </div>
                 )}
@@ -81,9 +81,9 @@ export const Modal: React.FC<ModalProps> = ({
               {theme === 'minimal' && dismissible && (
                 <div
                   onClick={handleClose}
-                  className="absolute z-30 cursor-pointer right-0 top-4 translate-x-1/2 p-6 bg-white rounded-full"
+                  className="absolute right-0 top-4 z-30 translate-x-1/2 cursor-pointer rounded-full bg-white p-6"
                 >
-                  <XIcon className="w-4 h-4" />
+                  <XIcon className="h-4 w-4" />
                 </div>
               )}
             </Dialog.Panel>
diff --git a/client/src/components/pill/component.tsx b/client/src/components/pill/component.tsx
index b9e09bb66e..28f3401f87 100644
--- a/client/src/components/pill/component.tsx
+++ b/client/src/components/pill/component.tsx
@@ -16,7 +16,7 @@ const Pill: React.FC<PillProps> = ({
 }: PropsWithChildren<PillProps>) => (
   <span
     {...props}
-    className={classNames('px-2 py-1 text-xs rounded', {
+    className={classNames('rounded px-2 py-1 text-xs', {
       [className]: !!className,
     })}
   >
diff --git a/client/src/components/search/component.tsx b/client/src/components/search/component.tsx
index 8d76d5f0c5..9b71762bc2 100644
--- a/client/src/components/search/component.tsx
+++ b/client/src/components/search/component.tsx
@@ -68,12 +68,12 @@ export const Search: React.FC<SearchProps> = ({
         'flex w-auto max-w-[160px]': size === 'sm',
       })}
     >
-      <div className="flex items-center justify-center w-full">
-        <SearchIcon className="w-6 h-6 text-gray-300" />
+      <div className="flex w-full items-center justify-center">
+        <SearchIcon className="h-6 w-6 text-gray-300" />
         <input
           {...omit(props, ['defaultValue', 'onChange'])}
           className={classnames(
-            'flex-1 p-4 pt-2.5 pb-3 leading-5 text-base placeholder:text-gray-400 focus:outline-none focus:ring-0 border-none truncate',
+            'flex-1 truncate border-none p-4 pb-3 pt-2.5 text-base leading-5 placeholder:text-gray-400 focus:outline-none focus:ring-0',
             props.disabled ? 'text-gray-300' : 'bg-white text-gray-900',
           )}
           type="search"
@@ -86,7 +86,7 @@ export const Search: React.FC<SearchProps> = ({
             type="button"
             onClick={handleReset}
           >
-            <XIcon className="w-4 h-4 text-gray-400" />
+            <XIcon className="h-4 w-4 text-gray-400" />
           </button>
         )}
       </div>
diff --git a/client/src/components/string-avatar/component.tsx b/client/src/components/string-avatar/component.tsx
index b9b9db5201..085883480a 100644
--- a/client/src/components/string-avatar/component.tsx
+++ b/client/src/components/string-avatar/component.tsx
@@ -15,7 +15,7 @@ export const StringAvatar: React.FC<stringAvatarProps> = ({
 }: stringAvatarProps) => (
   <div
     className={cx(
-      `flex rounded-lg text-lg items-center bg-navy-400 uppercase text-white justify-center font-semibold border-2 border-white`,
+      `flex items-center justify-center rounded-lg border-2 border-white bg-navy-400 text-lg font-semibold uppercase text-white`,
       className,
     )}
   >
diff --git a/client/src/components/table/cell.tsx b/client/src/components/table/cell.tsx
index 1e3b26262d..3ed99bab04 100644
--- a/client/src/components/table/cell.tsx
+++ b/client/src/components/table/cell.tsx
@@ -40,21 +40,21 @@ const CellWrapper = <T, C>({ children, context }: React.PropsWithChildren<CellPr
       onClick={isExpandible ? toggleExpand : undefined}
       className={classNames(
         getAlignmentClasses(align),
-        'relative flex items-center justify-start w-full min-h-20',
+        'min-h-20 relative flex w-full items-center justify-start',
         {
           'cursor-pointer': isExpandible,
           'ml-7 pr-7': canExpand && !isExpandible && isFirstColumn,
-          'pl-3 font-normal text-sm': isFirstColumn && depth === 0,
-          'pl-10 uppercase text-2xs font-semibold': isFirstColumn && depth === 1,
+          'pl-3 text-sm font-normal': isFirstColumn && depth === 0,
+          'pl-10 text-2xs font-semibold uppercase': isFirstColumn && depth === 1,
           'pl-[72px] text-xs font-normal': isFirstColumn && depth >= 2,
           'text-sm': !isFirstColumn,
         },
       )}
     >
-      <div className="w-full mx-auto my-auto">
+      <div className="mx-auto my-auto w-full">
         {isExpandible ? (
           <div className="flex items-center gap-3">
-            <div className="w-4 h-4">
+            <div className="h-4 w-4">
               <ChevronRightIcon
                 className={classNames(' text-gray-900', {
                   'rotate-90': isExpanded,
@@ -86,19 +86,19 @@ export const HeaderCell = <T, C>({
 
   return (
     <div
-      className={classNames('py-2 my-auto text-xs text-left text-gray-400 uppercase font-normal', {
+      className={classNames('my-auto py-2 text-left text-xs font-normal uppercase text-gray-400', {
         'pl-[25px]': isFirstColumn,
       })}
     >
       <div
-        className={classNames('flex flex-row gap-2 items-center', getAlignmentClasses(align), {
+        className={classNames('flex flex-row items-center gap-2', getAlignmentClasses(align), {
           'justify-center': align === 'center',
         })}
       >
         <div>{children}</div>
         {context.column.getCanSort() && (
           <div
-            className={classNames('w-5 h-5 cursor-pointer ', {
+            className={classNames('h-5 w-5 cursor-pointer ', {
               'text-gray-400 hover:text-gray-500': !isSorted,
               'text-gray-500': isSorted,
             })}
diff --git a/client/src/components/table/component.tsx b/client/src/components/table/component.tsx
index c4982c8df5..396f9365d0 100644
--- a/client/src/components/table/component.tsx
+++ b/client/src/components/table/component.tsx
@@ -145,21 +145,21 @@ const ComposedTable = <T,>({
   }, [rowModel, handleExpandedChange, table]);
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex h-full w-full flex-col">
       <div className="relative flex-1">
         {isLoading && (
-          <div className="absolute z-40 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
-            <Loading className="w-5 h-5 text-navy-400" />
+          <div className="absolute left-1/2 top-1/2 z-40 -translate-x-1/2 -translate-y-1/2">
+            <Loading className="h-5 w-5 text-navy-400" />
           </div>
         )}
         <div
-          className={classNames('absolute top-0 left-0 overflow-auto w-full h-full', {
-            'blur-sm pointer-events-none': isLoading,
+          className={classNames('absolute left-0 top-0 h-full w-full overflow-auto', {
+            'pointer-events-none blur-sm': isLoading,
           })}
         >
           <table
-            className={classNames('w-full max-h-full min-h-content table-fixed', {
-              'border-spacing-0 border-separate': true,
+            className={classNames('min-h-content max-h-full w-full table-fixed', {
+              'border-separate border-spacing-0': true,
               'mt-[24px]': !!firstProjectedYear,
             })}
           >
@@ -179,7 +179,7 @@ const ComposedTable = <T,>({
               {bodyRows.length === 0 && (
                 <tr>
                   <td colSpan={table.getAllColumns().length}>
-                    <p className="py-16 text-sm text-center">{noDataMessage}</p>
+                    <p className="py-16 text-center text-sm">{noDataMessage}</p>
                   </td>
                 </tr>
               )}
@@ -209,7 +209,7 @@ const ComposedTable = <T,>({
 
       {showPagination && (
         <div
-          className={classNames('grow-0 py-4 bg-gray-100 transition-all ease-in-out duration-100')}
+          className={classNames('grow-0 bg-gray-100 py-4 transition-all duration-100 ease-in-out')}
         >
           <Pagination
             className="justify-between"
diff --git a/client/src/components/table/pagination/button/component.tsx b/client/src/components/table/pagination/button/component.tsx
index 7eb0217bc8..f4f1eb8d8a 100644
--- a/client/src/components/table/pagination/button/component.tsx
+++ b/client/src/components/table/pagination/button/component.tsx
@@ -11,10 +11,10 @@ const Table: React.FC<ButtonProps> = ({
 }: ButtonProps) => (
   <div
     className={classNames(
-      'flex justify-center items-center text-sm min-w-[2.5rem] h-10',
+      'flex h-10 min-w-[2.5rem] items-center justify-center text-sm',
       className,
       {
-        'border-b border-green-700': active,
+        'border-green-700 border-b': active,
         'cursor-pointer': !disabled,
         'opacity-30': disabled,
       },
diff --git a/client/src/components/table/pagination/component.tsx b/client/src/components/table/pagination/component.tsx
index d07bbf1618..bbe2ed8c99 100644
--- a/client/src/components/table/pagination/component.tsx
+++ b/client/src/components/table/pagination/component.tsx
@@ -78,7 +78,7 @@ const Pagination: React.FC<PaginationProps> = ({
     <div
       className={classNames(
         className,
-        'flex flex-col md:flex-row gap-2 sm:gap-10 items-center justify-start',
+        'flex flex-col items-center justify-start gap-2 sm:gap-10 md:flex-row',
       )}
     >
       <div className="flex items-center space-x-2">
@@ -89,21 +89,21 @@ const Pagination: React.FC<PaginationProps> = ({
           onChange={handlePageSizeChange}
         />
       </div>
-      <div className="text-sm text-center text-gray-500">
+      <div className="text-center text-sm text-gray-500">
         {itemsRange.start}-{itemsRange.end} of {totalItems}
       </div>
       <div className="flex items-center">
         <Button disabled={currentPage <= 1} onClick={handleFirstPage}>
-          <ChevronDoubleLeftIcon className="w-4 h-4" />
+          <ChevronDoubleLeftIcon className="h-4 w-4" />
         </Button>
         <Button disabled={currentPage <= 1} onClick={handlePreviousPage}>
-          <ChevronLeftIcon className="w-5 h-5" />
+          <ChevronLeftIcon className="h-5 w-5" />
         </Button>
         <Button disabled={currentPage >= totalPages} onClick={handleNextPage}>
-          <ChevronRightIcon className="w-5 h-5" />
+          <ChevronRightIcon className="h-5 w-5" />
         </Button>
         <Button disabled={currentPage >= totalPages} onClick={handleLastPage}>
-          <ChevronDoubleRightIcon className="w-4 h-4" />
+          <ChevronDoubleRightIcon className="h-4 w-4" />
         </Button>
       </div>
     </div>
diff --git a/client/src/components/table/row.tsx b/client/src/components/table/row.tsx
index a410a2d078..5adce5e62f 100644
--- a/client/src/components/table/row.tsx
+++ b/client/src/components/table/row.tsx
@@ -33,7 +33,7 @@ const TableRow = <T,>({ row, theme, isLast, firstProjectedYear, ...props }: Tabl
                 'border-l-4': theme === 'default' && i === 0,
                 'border-l-navy-400 group-hover:border-l-navy-400':
                   theme === 'default' && row.getIsSelected() && i === 0,
-                'border-l-white -ml-1': theme === 'default' && !row.getIsSelected() && i === 0,
+                '-ml-1 border-l-white': theme === 'default' && !row.getIsSelected() && i === 0,
                 'bg-white group-hover:border-l-gray-100': theme === 'default',
                 'group-odd:bg-white group-even:bg-gray-50': theme === 'striped',
                 'sticky z-[1]': !!cell.column.columnDef.meta?.isSticky,
@@ -81,7 +81,7 @@ export const TableHeaderRow = <T,>({ headerGroup, firstProjectedYear }: TableHea
         const sticky = header.column.columnDef.meta?.isSticky;
         return (
           <th
-            className={classNames('sticky z-[2] top-0 bg-gray-50', {
+            className={classNames('sticky top-0 z-[2] bg-gray-50', {
               'left-0 z-[3] shadow-[4px_1px_10px_-2px_rgba(21,24,31,0.08)]': sticky === 'left',
               'right-0 z-[3] shadow-[-4px_1px_10px_-2px_rgba(21,24,31,0.08)]': sticky === 'right',
               'rounded-tr-lg': isLastColumn,
@@ -94,7 +94,7 @@ export const TableHeaderRow = <T,>({ headerGroup, firstProjectedYear }: TableHea
             {header.isPlaceholder ? null : (
               <HeaderCell context={header.getContext()}>
                 {firstProjectedYear?.toString() === header.id && (
-                  <div className="font-medium absolute leading-4 top-0 h-[24px] -translate-y-[24px] -translate-x-[58px] bg-gray-200 text-2xs py-1 px-4 rounded-t-lg text-gray-600 normal-case">
+                  <div className="absolute top-0 h-[24px] -translate-x-[58px] -translate-y-[24px] rounded-t-lg bg-gray-200 px-4 py-1 text-2xs font-medium normal-case leading-4 text-gray-600">
                     Projected years
                   </div>
                 )}
diff --git a/client/src/components/tabs/component.tsx b/client/src/components/tabs/component.tsx
index 5050d910ea..c545f6a46c 100644
--- a/client/src/components/tabs/component.tsx
+++ b/client/src/components/tabs/component.tsx
@@ -9,9 +9,9 @@ const Tabs: React.FC<TabsProps> = ({ activeTab, tabs, bottomBorder = true }: Tab
       <Link
         key={tab.name}
         href={tab.href}
-        className={classNames('py-3 -mb-px', {
+        className={classNames('-mb-px py-3', {
           'ml-10': index !== 0,
-          'text-green-700 border-b-2 border-green-700': activeTab && tab === activeTab,
+          'text-green-700 border-green-700 border-b-2': activeTab && tab === activeTab,
         })}
       >
         {tab.name}
diff --git a/client/src/components/toggle/component.tsx b/client/src/components/toggle/component.tsx
index 846789877a..780f866178 100644
--- a/client/src/components/toggle/component.tsx
+++ b/client/src/components/toggle/component.tsx
@@ -29,7 +29,7 @@ const Toggle: React.FC<ToggleProps> = ({ active, onChange, disabled = false }) =
     <Switch
       checked={active}
       onChange={handleChange}
-      className="relative inline-flex items-center justify-center flex-shrink-0 w-8 h-5 rounded-full cursor-pointer peer focus:outline-none disabled:cursor-default"
+      className="peer relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none disabled:cursor-default"
       onClick={handleClick}
       disabled={disabled}
       aria-disabled={disabled}
@@ -38,12 +38,12 @@ const Toggle: React.FC<ToggleProps> = ({ active, onChange, disabled = false }) =
       <span className="sr-only">Use setting</span>
       <span
         aria-hidden="true"
-        className="absolute w-full h-full rounded-md pointer-events-none bg-none"
+        className="pointer-events-none absolute h-full w-full rounded-md bg-none"
       />
       <span
         aria-hidden="true"
         className={classNames(
-          'pointer-events-none absolute h-3.5 w-7 mx-auto rounded-full transition-colors ease-in-out duration-200',
+          'pointer-events-none absolute mx-auto h-3.5 w-7 rounded-full transition-colors duration-200 ease-in-out',
           {
             'bg-gray-200/50': disabled,
             'bg-navy-400': active && !disabled,
@@ -55,7 +55,7 @@ const Toggle: React.FC<ToggleProps> = ({ active, onChange, disabled = false }) =
         aria-hidden="true"
         className={classNames(
           active ? 'translate-x-4' : 'translate-x-0',
-          'pointer-events-none absolute left-0 inline-block h-4 w-4 border border-gray-200 rounded-full bg-white shadow transform ring-0 transition-transform ease-in-out duration-200',
+          'pointer-events-none absolute left-0 inline-block h-4 w-4 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out',
         )}
       />
     </Switch>
diff --git a/client/src/components/tooltip/component.tsx b/client/src/components/tooltip/component.tsx
index e1a911e910..a0404f2592 100644
--- a/client/src/components/tooltip/component.tsx
+++ b/client/src/components/tooltip/component.tsx
@@ -116,10 +116,10 @@ export const ToolTip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
                 left: arrowX ?? '',
               }}
               className={classNames(
-                '-z-10 absolute',
+                'absolute -z-10',
                 { hidden: !arrow },
                 ARROW_POSITION_CLASSES[floatingPlacement],
-                'w-3 h-3 rotate-45',
+                'h-3 w-3 rotate-45',
                 THEME[theme],
               )}
             />
diff --git a/client/src/components/tree-select/checkbox/component.tsx b/client/src/components/tree-select/checkbox/component.tsx
index 16d641b117..244b948596 100644
--- a/client/src/components/tree-select/checkbox/component.tsx
+++ b/client/src/components/tree-select/checkbox/component.tsx
@@ -24,7 +24,7 @@ const CustomCheckbox = forwardRef<
     <input
       type="checkbox"
       className={classNames(
-        'flex-shrink-0 rounded w-4 h-4 focus:ring-2 active:ring-2 ring-offset-1 focus:outline-offset-0 ring-navy-200 m-0.5 focus:outline-none focus:ring-offset-0 disabled:ring-0 disabled:ring-offset-0',
+        'm-0.5 h-4 w-4 flex-shrink-0 rounded ring-navy-200 ring-offset-1 focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-0 active:ring-2 disabled:ring-0 disabled:ring-offset-0',
         checked || indeterminate ? 'bg-navy-4 border-none' : 'border border-gray-200',
         className,
       )}
diff --git a/client/src/components/tree-select/component.tsx b/client/src/components/tree-select/component.tsx
index 3ead6eab68..bce8ce91e6 100644
--- a/client/src/components/tree-select/component.tsx
+++ b/client/src/components/tree-select/component.tsx
@@ -391,19 +391,19 @@ const InnerTreeSelect = <IsMulti extends boolean>(
           [THEMES[theme].wrapper]: theme === 'default' && !disabled,
           [THEMES.disabled]: disabled,
           'ring-[1.5px] ring-navy-400': theme === 'default' && isOpen && !error,
-          'flex flex-row justify-between items-center gap-1': theme === 'default',
+          'flex flex-row items-center justify-between gap-1': theme === 'default',
           'ring-1 ring-red-400': theme === 'default' && error,
           'w-fit': theme === 'inline-primary',
         })}
       >
         <div
           className={classNames(
-            'gap-x-1 gap-y-0.5 overflow-hidden h-full flex flex-grow min-h-0',
+            'flex h-full min-h-0 flex-grow gap-x-1 gap-y-0.5 overflow-hidden',
             // apply flex-1 to all children to wrap content nicely
             '[&>*]:flex-1',
             {
               'flex flex-wrap': theme !== 'inline-primary',
-              'ring-navy-400 border-navy-400': isOpen,
+              'border-navy-400 ring-navy-400': isOpen,
               'border-red-400': theme === 'inline-primary' && error,
               [THEMES[theme].wrapper]: theme === 'inline-primary',
             },
@@ -413,7 +413,7 @@ const InnerTreeSelect = <IsMulti extends boolean>(
           {multiple ? (
             <>
               {(!currentOptions || !currentOptions.length) && !showSearch && (
-                <span className="inline-block text-gray-500 truncate">{placeholder}</span>
+                <span className="inline-block truncate text-gray-500">{placeholder}</span>
               )}
               {!!currentOptions?.length &&
                 currentOptions.slice(0, badgesToShow).map((option, index) => (
@@ -437,12 +437,12 @@ const InnerTreeSelect = <IsMulti extends boolean>(
             </>
           ) : (
             <div
-              className={classNames('inline-flex items-center min-w-0 my-auto min-h-[36px]', {
+              className={classNames('my-auto inline-flex min-h-[36px] min-w-0 items-center', {
                 'pl-2': selected,
               })}
             >
               {selected ? (
-                <span className="block w-full text-gray-900 truncate">{selected.label}</span>
+                <span className="block w-full truncate text-gray-900">{selected.label}</span>
               ) : (
                 // the placeholder is in the search input already
                 showSearch || <span className="text-gray-500">{placeholder}</span>
@@ -471,8 +471,8 @@ const InnerTreeSelect = <IsMulti extends boolean>(
                 </div>
               )}
               {selected && (
-                <button type="button" onClick={handleReset} className="px-2 py-0 shrink-0">
-                  <XIcon className="w-4 h-4 text-gray-400 hover:text-gray-900" />
+                <button type="button" onClick={handleReset} className="shrink-0 px-2 py-0">
+                  <XIcon className="h-4 w-4 text-gray-400 hover:text-gray-900" />
                 </button>
               )}
             </div>
@@ -503,7 +503,7 @@ const InnerTreeSelect = <IsMulti extends boolean>(
         </div>
         <div
           className={classNames(
-            'flex pointer-events-none h-fit shrink-0 px-2',
+            'pointer-events-none flex h-fit shrink-0 px-2',
             THEMES[theme].arrow,
             {
               'text-red-800': !!error,
@@ -513,7 +513,7 @@ const InnerTreeSelect = <IsMulti extends boolean>(
           {theme === 'inline-primary' ? (
             <div
               className={classNames(
-                'mt-0.5 border-t-primary border-t-4 border-x-4 border-x-transparent mx-auto w-0 h-0',
+                'border-t-primary mx-auto mt-0.5 h-0 w-0 border-x-4 border-t-4 border-x-transparent',
                 { 'border-t-red-400': error },
               )}
             />
@@ -546,14 +546,14 @@ const InnerTreeSelect = <IsMulti extends boolean>(
           <div
             ref={listContainerRef}
             className={classNames(
-              'bg-white max-h-80 overflow-y-auto',
-              fitContent ? 'max-w-full w-full' : 'max-w-xs',
+              'max-h-80 overflow-y-auto bg-white',
+              fitContent ? 'w-full max-w-full' : 'max-w-xs',
             )}
             id="list-container"
           >
             {loading ? (
               <div className="p-4">
-                <Loading className="w-5 mr-3 -ml-1 h5 text-navy-400" />
+                <Loading className="h5 -ml-1 mr-3 w-5 text-navy-400" />
               </div>
             ) : debouncedSearch ? (
               <SearchOverlay onChange={handleSearchSelection} options={filteredOptions} />
@@ -579,7 +579,7 @@ const InnerTreeSelect = <IsMulti extends boolean>(
                   ref={forwardedRef}
                 />
                 {(options.length === 0 || (searchTerm && filteredOptionsKeys?.length === 0)) && (
-                  <div className="p-2 mx-auto text-sm text-gray-600 opacity-60 w-fit">
+                  <div className="mx-auto w-fit p-2 text-sm text-gray-600 opacity-60">
                     No results
                   </div>
                 )}
diff --git a/client/src/components/tree-select/search-input.tsx b/client/src/components/tree-select/search-input.tsx
index bd47375484..784a09282e 100644
--- a/client/src/components/tree-select/search-input.tsx
+++ b/client/src/components/tree-select/search-input.tsx
@@ -27,7 +27,7 @@ const SearchInput = ({
         placeholder={placeholder}
         disabled={disabled}
         className={classNames(
-          'w-full p-0 py-2 pl-2 truncate bg-transparent border-none appearance-none focus:ring-0 h-[32px]',
+          'h-[32px] w-full appearance-none truncate border-none bg-transparent p-0 py-2 pl-2 focus:ring-0',
           {
             // 'pl-2': multiple,
             'text-sm': theme !== 'inline-primary',
@@ -40,7 +40,7 @@ const SearchInput = ({
       />
       {value && (
         <button type="button" onClick={resetSearch} className="flex-shrink-0">
-          <XIcon className="w-4 h-4 text-gray-400" />
+          <XIcon className="h-4 w-4 text-gray-400" />
         </button>
       )}
     </>
diff --git a/client/src/components/tree-select/search-overlay.tsx b/client/src/components/tree-select/search-overlay.tsx
index 83c0d688b4..52a068d3cc 100644
--- a/client/src/components/tree-select/search-overlay.tsx
+++ b/client/src/components/tree-select/search-overlay.tsx
@@ -32,10 +32,10 @@ const SearchOverlay = ({ options, onChange }: SearchOverlayProps) => {
           <button
             title={label}
             type="button"
-            className={classNames('text-sm p-2 w-full text-left', {
-              'font-bold cursor-pointer text-navy-400 hover:bg-navy-50': isSelected,
-              'text-gray-300 hover:bg-white cursor-default pointer-events-none': disabled,
-              'text-gray-900 cursor-pointer hover:bg-navy-50': !isSelected && !disabled,
+            className={classNames('w-full p-2 text-left text-sm', {
+              'cursor-pointer font-bold text-navy-400 hover:bg-navy-50': isSelected,
+              'pointer-events-none cursor-default text-gray-300 hover:bg-white': disabled,
+              'cursor-pointer text-gray-900 hover:bg-navy-50': !isSelected && !disabled,
             })}
             key={key}
             onClick={() => !disabled && getHandleChange(key as string)}
diff --git a/client/src/components/widget/component.tsx b/client/src/components/widget/component.tsx
index c2a337aad0..cd2db6ce34 100644
--- a/client/src/components/widget/component.tsx
+++ b/client/src/components/widget/component.tsx
@@ -16,7 +16,7 @@ const Widget: React.FC<React.PropsWithChildren<WidgetProps>> = ({
 }) => (
   <div className={cx('flex flex-col', className)} style={{ height }}>
     <h2 className="flex-shrink-0 text-base first-letter:uppercase">{`${title} (${unit})`}</h2>
-    <div className="relative flex-grow mt-2">{children}</div>
+    <div className="relative mt-2 flex-grow">{children}</div>
   </div>
 );
 
diff --git a/client/src/containers/admin/data-table/component.tsx b/client/src/containers/admin/data-table/component.tsx
index 9e691759fd..7e7109f86e 100644
--- a/client/src/containers/admin/data-table/component.tsx
+++ b/client/src/containers/admin/data-table/component.tsx
@@ -101,7 +101,7 @@ const AdminDataPage: React.FC<{ task: Task }> = ({ task }) => {
         isSticky: 'left',
         enableSorting: true,
         cell: ({ row }) => (
-          <div className="flex align-center my-[30px]">{row.original?.material as string}</div>
+          <div className="align-center my-[30px] flex">{row.original?.material as string}</div>
         ),
       },
       {
@@ -147,8 +147,8 @@ const AdminDataPage: React.FC<{ task: Task }> = ({ task }) => {
 
   return (
     <>
-      <div className="flex flex-col h-full space-y-6">
-        <div className="flex w-full gap-2 justify-end">
+      <div className="flex h-full flex-col space-y-6">
+        <div className="flex w-full justify-end gap-2">
           <DownloadMaterialsDataButton />
           <Button
             variant="primary"
@@ -158,9 +158,9 @@ const AdminDataPage: React.FC<{ task: Task }> = ({ task }) => {
             icon={
               <div
                 aria-hidden="true"
-                className="flex items-center justify-center w-5 h-5 bg-white rounded-full"
+                className="flex h-5 w-5 items-center justify-center rounded-full bg-white"
               >
-                <PlusIcon className="w-4 h-4 text-navy-400" />
+                <PlusIcon className="h-4 w-4 text-navy-400" />
               </div>
             }
           >
@@ -171,7 +171,7 @@ const AdminDataPage: React.FC<{ task: Task }> = ({ task }) => {
         {task?.user?.email === session?.user?.email && <DataUploadError task={task} />}
 
         {!isSourcingLocationsLoading && (
-          <div className="flex justify-end w-full">
+          <div className="flex w-full justify-end">
             <div className="text-sm text-gray-400">
               Last update at: {format(new Date(sourcingLocations.data[0].updatedAt), 'd MMM yyyy')}
             </div>
@@ -224,7 +224,7 @@ const AdminDataPage: React.FC<{ task: Task }> = ({ task }) => {
             </div>
           </div>
 
-          <div className="flex justify-between gap-3 mt-8">
+          <div className="mt-8 flex justify-between gap-3">
             <div>
               <Anchor
                 href="/files/data-template.xlsx"
diff --git a/client/src/containers/admin/data-upload-error/component.tsx b/client/src/containers/admin/data-upload-error/component.tsx
index f5d626afca..306d53057b 100644
--- a/client/src/containers/admin/data-upload-error/component.tsx
+++ b/client/src/containers/admin/data-upload-error/component.tsx
@@ -48,8 +48,8 @@ const DataUploadError: React.FC<DataUploadErrorProps> = ({ task }) => {
       }
       icon={task?.status === 'completed' && task?.errors.length === 0 && <UploadIcon />}
     >
-      <div className="flex w-full space-x-6 items-center">
-        <div className="space-y-1.5 flex-1">
+      <div className="flex w-full items-center space-x-6">
+        <div className="flex-1 space-y-1.5">
           {task?.status === 'processing' && (
             <>
               <h3>Upload in progress</h3>
diff --git a/client/src/containers/admin/data-uploader/component.tsx b/client/src/containers/admin/data-uploader/component.tsx
index b7100d5cfc..23a2a8acf3 100644
--- a/client/src/containers/admin/data-uploader/component.tsx
+++ b/client/src/containers/admin/data-uploader/component.tsx
@@ -11,9 +11,9 @@ const AdminDataPage: React.FC<{ task: Task }> = ({ task }) => {
   const [isUploading, setIsUploading] = useState(false);
 
   return (
-    <div className="flex items-center justify-center w-full h-full">
+    <div className="flex h-full w-full items-center justify-center">
       <div className="space-y-16">
-        <div className="space-y-4 text-lg text-center">
+        <div className="space-y-4 text-center text-lg">
           <p className="font-semibold">
             1. Download the Excel template and fill it with your data.
           </p>
@@ -27,7 +27,7 @@ const AdminDataPage: React.FC<{ task: Task }> = ({ task }) => {
             Download template
           </Anchor>
         </div>
-        <div className="space-y-4 text-lg text-center w-[640px]">
+        <div className="w-[640px] space-y-4 text-center text-lg">
           <p className="font-semibold">2. Upload the filled Excel file.</p>
           <DataUploader onUploadInProgress={setIsUploading} />
           {!isUploading && task?.status === 'failed' && <DataUploadError task={task} />}
diff --git a/client/src/containers/admin/edit-target-modal/component.tsx b/client/src/containers/admin/edit-target-modal/component.tsx
index f2f6a83c2f..6e1d44ef14 100644
--- a/client/src/containers/admin/edit-target-modal/component.tsx
+++ b/client/src/containers/admin/edit-target-modal/component.tsx
@@ -66,14 +66,14 @@ const AdminEditTargetModal: React.FC<EditTargetModalProps> = ({ title, open, onD
 
   return (
     <Modal title={title} open={open} onDismiss={onDismiss} dismissible>
-      <p className="mb-8 text-gray-500 text-md">
+      <p className="text-md mb-8 text-gray-500">
         Set up the baseline year and the targets for this indicator.
       </p>
       <legend className="flex font-medium leading-5">
         <span className="mr-2.5">Baseline Year</span>
         <InfoTooltip info />
       </legend>
-      <div className="grid grid-cols-2 pb-4 mt-5 gap-y-4 gap-x-6 sm:grid-cols-2">
+      <div className="mt-5 grid grid-cols-2 gap-x-6 gap-y-4 pb-4 sm:grid-cols-2">
         <div className="block font-medium text-gray-900">
           <Select<number>
             loading={isLoading}
@@ -85,7 +85,7 @@ const AdminEditTargetModal: React.FC<EditTargetModalProps> = ({ title, open, onD
           />
         </div>
         <div className="block font-medium text-gray-600">
-          <div className="px-6 py-2 text-center rounded-md bg-green-50">
+          <div className="rounded-md bg-green-50 px-6 py-2 text-center">
             <div className="text-base text-gray-900">2.37M tCO2e</div>
           </div>
         </div>
@@ -102,7 +102,7 @@ const AdminEditTargetModal: React.FC<EditTargetModalProps> = ({ title, open, onD
       {/* <Button variant="primary" icon={PlusCircleIcon} onClick={onDismiss}>
           Add a target
       </Button> */}
-      <div className="flex justify-end gap-3 mt-8">
+      <div className="mt-8 flex justify-end gap-3">
         <Button variant="secondary" onClick={onDismiss}>
           Cancel
         </Button>
diff --git a/client/src/containers/admin/no-data/component.tsx b/client/src/containers/admin/no-data/component.tsx
index a0eb284863..305334410f 100644
--- a/client/src/containers/admin/no-data/component.tsx
+++ b/client/src/containers/admin/no-data/component.tsx
@@ -1,7 +1,7 @@
 const AdminNoData: React.FC = () => (
-  <div className="absolute w-full p-4 text-center -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 md:max-w-xs">
+  <div className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 p-4 text-center md:max-w-xs">
     <p className="mb-3 text-sm font-medium">You haven&apos;t data yet</p>
-    <p className="mb-8 text-gray-500 text-md">Please create a new one.</p>
+    <p className="text-md mb-8 text-gray-500">Please create a new one.</p>
   </div>
 );
 
diff --git a/client/src/containers/analysis-chart/comparison-chart/component.tsx b/client/src/containers/analysis-chart/comparison-chart/component.tsx
index 1fcde83547..432c83c07d 100644
--- a/client/src/containers/analysis-chart/comparison-chart/component.tsx
+++ b/client/src/containers/analysis-chart/comparison-chart/component.tsx
@@ -155,17 +155,17 @@ const StackedAreaChart: React.FC<StackedAreaChartProps> = ({ indicator }) => {
   }, []);
 
   return (
-    <div className="p-6 bg-white rounded-md shadow-sm" data-testid="analysis-chart">
-      {isFetching && <Loading className="w-5 h-5 m-auto text-navy-400" />}
+    <div className="rounded-md bg-white p-6 shadow-sm" data-testid="analysis-chart">
+      {isFetching && <Loading className="m-auto h-5 w-5 text-navy-400" />}
       {!data && !isFetching && (
-        <div className="flex flex-col items-center justify-center h-[370px]">No data</div>
+        <div className="flex h-[370px] flex-col items-center justify-center">No data</div>
       )}
       {!isFetching && isFetched && data && (
         <div>
           <h2 className="flex-shrink-0 text-base">
             {chartData.name} ({chartData.unit})
           </h2>
-          <div className="relative flex-grow mt-3">
+          <div className="relative mt-3 flex-grow">
             <div className="h-[370px] text-xs">
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart
diff --git a/client/src/containers/analysis-chart/comparison-chart/legend/component.tsx b/client/src/containers/analysis-chart/comparison-chart/legend/component.tsx
index f496c36863..10e34d25d1 100644
--- a/client/src/containers/analysis-chart/comparison-chart/legend/component.tsx
+++ b/client/src/containers/analysis-chart/comparison-chart/legend/component.tsx
@@ -35,16 +35,16 @@ const LegendChart: React.FC<ExtendedLegendProps> = ({ payload, onClick = () => n
           .map((item, index) => (
             <li
               key={item.value}
-              className={classNames('flex items-center mr-2 space-x-1 cursor-pointer', {
+              className={classNames('mr-2 flex cursor-pointer items-center space-x-1', {
                 'opacity-50': item.payload.fillOpacity === 0.1,
               })}
               onClick={handleClick.bind(null, item, index)}
             >
               <div
-                className="w-[16px] h-[1px] border-b-2"
+                className="h-[1px] w-[16px] border-b-2"
                 style={{ borderColor: `${item.color}` }}
               />
-              <div className="overflow-hidden text-xs whitespace-nowrap text-ellipsis max-w-[150px]">
+              <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap text-xs">
                 {item.value === 'scenarioOneValue' && (
                   <span className="capitalize">
                     {scenario?.title || comparedScenario?.title || 'Scenario'}
@@ -61,8 +61,8 @@ const LegendChart: React.FC<ExtendedLegendProps> = ({ payload, onClick = () => n
           ))}
       </ul>
       <div className="flex items-center space-x-1">
-        <div className="w-[16px] h-[1px] border-b-2 border-dashed border-gray-900" />
-        <div className="text-xs whitespace-nowrap">Projected data</div>
+        <div className="h-[1px] w-[16px] border-b-2 border-dashed border-gray-900" />
+        <div className="whitespace-nowrap text-xs">Projected data</div>
       </div>
     </div>
   );
diff --git a/client/src/containers/analysis-chart/comparison-chart/tooltip/component.tsx b/client/src/containers/analysis-chart/comparison-chart/tooltip/component.tsx
index 6190337b89..a1a36121ee 100644
--- a/client/src/containers/analysis-chart/comparison-chart/tooltip/component.tsx
+++ b/client/src/containers/analysis-chart/comparison-chart/tooltip/component.tsx
@@ -27,12 +27,12 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload }) => {
   const percentageDifference = tooltipData[1]?.payload.percentageDifference;
 
   return (
-    <div className="p-4 text-gray-900 bg-white border border-gray-200 rounded-md">
+    <div className="rounded-md border border-gray-200 bg-white p-4 text-gray-900">
       <div className="flex items-center space-x-2">
         {(comparedValue || comparedValue === 0) && (
           <div className="flex items-center space-x-2">
             <div
-              className="w-[16px] h-[1px] border-b-2"
+              className="h-[1px] w-[16px] border-b-2"
               style={{ borderColor: tooltipData[1]?.stroke }}
             />
             <div>{NUMBER_FORMAT(comparedValue)}</div>
@@ -43,8 +43,8 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload }) => {
             className={classNames(
               'rounded-sm px-1 text-xs',
               absoluteDifference > 0
-                ? 'text-[#DC3C51] bg-[#DC3C51]/10'
-                : 'text-[#078A3C] bg-[#078A3C]/10',
+                ? 'bg-[#DC3C51]/10 text-[#DC3C51]'
+                : 'bg-[#078A3C]/10 text-[#078A3C]',
             )}
           >
             {absoluteDifference > 0 && '+'}
@@ -56,7 +56,7 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload }) => {
       </div>
       <div className="flex items-center space-x-2">
         <div
-          className="w-[16px] h-[1px] border-b-2"
+          className="h-[1px] w-[16px] border-b-2"
           style={{ borderColor: tooltipData[0].stroke }}
         />
         <div className="text-gray-400">{NUMBER_FORMAT(baseValue)}</div>
diff --git a/client/src/containers/analysis-chart/impact-chart/component.tsx b/client/src/containers/analysis-chart/impact-chart/component.tsx
index bff83c5c44..d6a3833131 100644
--- a/client/src/containers/analysis-chart/impact-chart/component.tsx
+++ b/client/src/containers/analysis-chart/impact-chart/component.tsx
@@ -244,17 +244,17 @@ const StackedAreaChart: React.FC<StackedAreaChartProps> = ({ indicator }) => {
   }, []);
 
   return (
-    <div className="p-6 bg-white rounded-md shadow-sm" data-testid="analysis-chart">
-      {isFetching && <Loading className="w-5 h-5 m-auto text-navy-400" />}
+    <div className="rounded-md bg-white p-6 shadow-sm" data-testid="analysis-chart">
+      {isFetching && <Loading className="m-auto h-5 w-5 text-navy-400" />}
       {!data && !isFetching && (
-        <div className="flex flex-col items-center justify-center h-[370px]">No data</div>
+        <div className="flex h-[370px] flex-col items-center justify-center">No data</div>
       )}
       {!isFetching && isFetched && data && (
         <div>
           <h2 className="flex-shrink-0 text-base">
             {chartData.name} ({chartData.unit})
           </h2>
-          <div className="relative flex-grow mt-3">
+          <div className="relative mt-3 flex-grow">
             <div className="h-[370px] text-xs">
               <ResponsiveContainer width="100%" height="100%">
                 <AreaChart
diff --git a/client/src/containers/analysis-chart/impact-chart/legend/component.tsx b/client/src/containers/analysis-chart/impact-chart/legend/component.tsx
index 956e828c12..736f66c6ee 100644
--- a/client/src/containers/analysis-chart/impact-chart/legend/component.tsx
+++ b/client/src/containers/analysis-chart/impact-chart/legend/component.tsx
@@ -33,7 +33,7 @@ const LegendChart: React.FC<ExtendedLegendProps> = ({
             <li
               key={item.value}
               className={classNames(
-                'flex items-center space-x-1 cursor-pointer border py-0.5 px-1 rounded hover:border-black',
+                'flex cursor-pointer items-center space-x-1 rounded border px-1 py-0.5 hover:border-black',
                 {
                   'opacity-50': legendKey && legendKey !== item.id,
                 },
@@ -41,7 +41,7 @@ const LegendChart: React.FC<ExtendedLegendProps> = ({
               onClick={handleClick.bind(null, item, index)}
             >
               <div
-                className="w-[6px] h-3 rounded shrink-0 grow-0 bg-gray-400"
+                className="h-3 w-[6px] shrink-0 grow-0 rounded bg-gray-400"
                 style={{
                   ...((!legendKey || legendKey === item.id) && {
                     backgroundColor: `${item.color}`,
@@ -49,7 +49,7 @@ const LegendChart: React.FC<ExtendedLegendProps> = ({
                 }}
               />
               <div
-                className="overflow-hidden text-xs whitespace-nowrap text-ellipsis max-w-[100px]"
+                className="max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap text-xs"
                 title={item.value}
               >
                 {item.value}
@@ -60,7 +60,7 @@ const LegendChart: React.FC<ExtendedLegendProps> = ({
       <div>
         <div className="flex items-center space-x-1">
           <ProjectedDataIcon />
-          <div className="text-xs whitespace-nowrap py-1">Projected data</div>
+          <div className="whitespace-nowrap py-1 text-xs">Projected data</div>
         </div>
       </div>
     </div>
diff --git a/client/src/containers/analysis-chart/impact-chart/tooltip/component.tsx b/client/src/containers/analysis-chart/impact-chart/tooltip/component.tsx
index 9002c95e26..c95331edcd 100644
--- a/client/src/containers/analysis-chart/impact-chart/tooltip/component.tsx
+++ b/client/src/containers/analysis-chart/impact-chart/tooltip/component.tsx
@@ -11,17 +11,17 @@ type CustomTooltipProps = {
 };
 
 const CustomTooltip: React.FC<CustomTooltipProps> = ({ payload }) => (
-  <div className="p-4 text-gray-900 bg-white border border-gray-200 rounded-md max-w-[200px]">
+  <div className="max-w-[200px] rounded-md border border-gray-200 bg-white p-4 text-gray-900">
     <ul className="space-y-2">
       {payload
         .filter(({ type }) => type !== 'none')
         .map((item) => (
           <li key={item.dataKey} className="flex justify-between space-x-2">
             <div
-              className="w-2 h-3 rounded shrink-0 grow-0"
+              className="h-3 w-2 shrink-0 grow-0 rounded"
               style={{ backgroundColor: item.color }}
             />
-            <div className="flex-1 text-left truncate">{item.name}</div>
+            <div className="flex-1 truncate text-left">{item.name}</div>
             <div className="text-gray-400">{NUMBER_FORMAT(item.value as number)}</div>
           </li>
         ))}
diff --git a/client/src/containers/analysis-sidebar/component.tsx b/client/src/containers/analysis-sidebar/component.tsx
index 46a3bcf623..bf16099c10 100644
--- a/client/src/containers/analysis-sidebar/component.tsx
+++ b/client/src/containers/analysis-sidebar/component.tsx
@@ -78,12 +78,12 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject<HTMLDivElement
   );
 
   return (
-    <div className="flex flex-col h-full text-gray-900 bg-white">
-      <div className="sticky top-0 z-20 pt-10 text-sm bg-white pointer-events-none after:bg-gradient-to-b after:from-white after:w-full after:h-3 after:content after:-bottom-3 after:left-0 after:absolute">
+    <div className="flex h-full flex-col bg-white text-gray-900">
+      <div className="after:content pointer-events-none sticky top-0 z-20 bg-white pt-10 text-sm after:absolute after:-bottom-3 after:left-0 after:h-3 after:w-full after:bg-gradient-to-b after:from-white">
         <h1 className="mb-6">Analyze data</h1>
       </div>
 
-      <div className="flex-1 mt-4 space-y-6">
+      <div className="mt-4 flex-1 space-y-6">
         <RadioGroup value={scenarioId} onChange={handleOnChange}>
           <RadioGroup.Label className="sr-only">Scenarios</RadioGroup.Label>
           <div className="space-y-6">
@@ -95,7 +95,7 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject<HTMLDivElement
               !!searchTerm ||
               searchTerm !== '') && (
               <div className="relative z-10 flex-1 overflow-hidden">
-                <ul className="relative grid grid-cols-1 gap-5 my-2 overflow-auto">
+                <ul className="relative my-2 grid grid-cols-1 gap-5 overflow-auto">
                   {scenariosList?.map((item) => (
                     <li key={item.id} className="last-of-type:mb-12">
                       <ScenarioItem scenario={item} isSelected={scenarioId === item.id} />
@@ -108,10 +108,10 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject<HTMLDivElement
         </RadioGroup>
 
         {!isLoading && error && (
-          <div className="p-4 my-4 rounded-md bg-red-50">
+          <div className="my-4 rounded-md bg-red-50 p-4">
             <div className="flex">
               <div className="flex-shrink-0">
-                <XCircleIcon className="w-5 h-5 text-red-400" aria-hidden="true" />
+                <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
               </div>
               <div className="ml-3">
                 <h3 className="text-sm font-medium text-red-800">
@@ -124,7 +124,7 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject<HTMLDivElement
 
         {isLoading && (
           <div className="flex justify-center p-6 ">
-            <Loading className="w-5 h-5 text-navy-400" />
+            <Loading className="h-5 w-5 text-navy-400" />
           </div>
         )}
 
@@ -150,9 +150,9 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject<HTMLDivElement
                 icon={
                   <div
                     aria-hidden="true"
-                    className="flex items-center justify-center w-6 h-6 bg-white rounded-full"
+                    className="flex h-6 w-6 items-center justify-center rounded-full bg-white"
                   >
-                    <PlusIcon className="w-4 h-4 text-navy-400" />
+                    <PlusIcon className="h-4 w-4 text-navy-400" />
                   </div>
                 }
               >
@@ -169,7 +169,7 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject<HTMLDivElement
       </div>
 
       {scenariosList?.length > 0 && (
-        <div className="sticky bottom-0 left-0 z-20 w-full pb-6 bg-white before:bg-gradient-to-t before:from-white before:w-full before:h-16 before:content before:-top-16 before:left-0 before:absolute">
+        <div className="before:content sticky bottom-0 left-0 z-20 w-full bg-white pb-6 before:absolute before:-top-16 before:left-0 before:h-16 before:w-full before:bg-gradient-to-t before:from-white">
           <Anchor
             href="/data/scenarios/new"
             className="w-full"
@@ -177,9 +177,9 @@ const ScenariosComponent: React.FC<{ scrollref?: MutableRefObject<HTMLDivElement
             icon={
               <div
                 aria-hidden="true"
-                className="flex items-center justify-center w-5 h-5 rounded-full bg-navy-400"
+                className="flex h-5 w-5 items-center justify-center rounded-full bg-navy-400"
               >
-                <PlusIcon className="w-4 h-4 text-white" />
+                <PlusIcon className="h-4 w-4 text-white" />
               </div>
             }
             data-testid="create-scenario"
diff --git a/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-header/component.tsx b/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-header/component.tsx
index bffb8fa0c0..7ca9978a80 100644
--- a/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-header/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-header/component.tsx
@@ -11,7 +11,7 @@ const CategoryHeader: React.FC<{
       <div className="text-sm font-semibold text-gray-500">{category}</div>
       <div
         className={classNames(
-          'w-4 h-4 my-auto text-xs font-semibold text-center text-white rounded-full',
+          'my-auto h-4 w-4 rounded-full text-center text-xs font-semibold text-white',
           visibleLayers === 0 ? 'bg-gray-200' : 'bg-navy-400',
         )}
       >
diff --git a/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx b/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx
index e97968d4cd..dbcb537f26 100644
--- a/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/component.tsx
@@ -32,11 +32,11 @@ const CategoryLayer = ({
 
   return (
     <div className="flex gap-2">
-      <div className="w-5 h-full" />
-      <div className="p-2 flex-1" data-testid={`layer-settings-item-${layer.metadata?.name}`}>
-        <div className="flex flex-row justify-between gap-5 place-items-center">
+      <div className="h-full w-5" />
+      <div className="flex-1 p-2" data-testid={`layer-settings-item-${layer.metadata?.name}`}>
+        <div className="flex flex-row place-items-center justify-between gap-5">
           <div className="flex-grow text-sm">{layer.metadata?.name}</div>
-          <div className="flex flex-row gap-2 place-items-center">
+          <div className="flex flex-row place-items-center gap-2">
             <InfoModal
               info={{
                 description: layer.metadata?.description,
diff --git a/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/toggle-preview/component.tsx b/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/toggle-preview/component.tsx
index 8f13767352..7e4009e928 100644
--- a/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/toggle-preview/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-contextual-layer/categories/category-layer/toggle-preview/component.tsx
@@ -31,9 +31,9 @@ const TogglePreview = ({
   return (
     <div className={className} onClick={disabled ? undefined : handleToggle}>
       {isPreviewActive ? (
-        <EyeIcon className="w-4 h-4 text-gray-900" />
+        <EyeIcon className="h-4 w-4 text-gray-900" />
       ) : (
-        <EyeOffIcon className="w-4 h-4 text-gray-900" />
+        <EyeOffIcon className="h-4 w-4 text-gray-900" />
       )}
     </div>
   );
diff --git a/client/src/containers/analysis-visualization/analysis-contextual-layer/component.tsx b/client/src/containers/analysis-visualization/analysis-contextual-layer/component.tsx
index 3334a17244..4a4c3348ae 100644
--- a/client/src/containers/analysis-visualization/analysis-contextual-layer/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-contextual-layer/component.tsx
@@ -141,8 +141,8 @@ const LegendSettings: React.FC<LegendSettingsProps> = ({ categories = [], onAppl
   );
 
   return (
-    <div className="flex flex-row h-[600px] items-stretch">
-      <div className="flex flex-col gap-5 p-6 w-[25rem]">
+    <div className="flex h-[600px] flex-row items-stretch">
+      <div className="flex w-[25rem] flex-col gap-5 p-6">
         <div className="w-full">
           <Search
             onChange={setSearchText}
@@ -152,10 +152,10 @@ const LegendSettings: React.FC<LegendSettingsProps> = ({ categories = [], onAppl
             disabled
           />
         </div>
-        <div className="text-sm text-right text-navy-400 underline-offset-[3px]">
+        <div className="text-right text-sm text-navy-400 underline-offset-[3px]">
           Selected layers ({localSelectedLayerNumber})
         </div>
-        <div className="max-h-full p-0.5 overflow-y-auto flex-grow">
+        <div className="max-h-full flex-grow overflow-y-auto p-0.5">
           <Accordion>
             <MaterialSettings
               previewStatus={previewStatus}
@@ -182,7 +182,7 @@ const LegendSettings: React.FC<LegendSettingsProps> = ({ categories = [], onAppl
             ))}
           </Accordion>
         </div>
-        <div className="flex flex-row gap-2 justify-between">
+        <div className="flex flex-row justify-between gap-2">
           <Button variant="white" onClick={onDismiss}>
             Cancel
           </Button>
@@ -198,19 +198,19 @@ const LegendSettings: React.FC<LegendSettingsProps> = ({ categories = [], onAppl
         </div>
       </div>
       <div className="relative aspect-square">
-        <div className="absolute h-full w-full top-0 left-0">
+        <div className="absolute left-0 top-0 h-full w-full">
           <PreviewMap
             selectedMaterialId={localMaterial}
             selectedLayerId={selectedLayerForPreview}
             onStatusChange={setPreviewStatus}
           />
-          <div className="absolute flex flex-row text-sm text-white bg-black rounded-md top-3 left-3 h-fit">
+          <div className="absolute left-3 top-3 flex h-fit flex-row rounded-md bg-black text-sm text-white">
             <div className="p-3 font-bold">Preview layers</div>
             {!selectedLayerForPreview && (
               <>
-                <div className="bg-white w-0.5 self-stretch" />
+                <div className="w-0.5 self-stretch bg-white" />
                 <div className="p-3">
-                  Click the eye icon <EyeIcon className="inline w-4 h-4" /> next to the layer name
+                  Click the eye icon <EyeIcon className="inline h-4 w-4" /> next to the layer name
                   preview
                 </div>
               </>
diff --git a/client/src/containers/analysis-visualization/analysis-contextual-layer/materials/component.tsx b/client/src/containers/analysis-visualization/analysis-contextual-layer/materials/component.tsx
index 686c1db58b..cb416fe870 100644
--- a/client/src/containers/analysis-visualization/analysis-contextual-layer/materials/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-contextual-layer/materials/component.tsx
@@ -68,7 +68,7 @@ const MaterialSettings = ({
       header={
         <div className="flex flex-row justify-between" data-testid="contextual-material-header">
           <div className="text-sm font-semibold text-gray-500">Food and agriculture</div>
-          <div className="flex flex-row gap-2 place-items-center">
+          <div className="flex flex-row place-items-center gap-2">
             <InfoModal
               info={{
                 description:
@@ -77,14 +77,14 @@ const MaterialSettings = ({
                 title: 'Materials layer',
               }}
             />
-            <div className="w-0.5 h-full bg-gray-200 rounded-full" />
+            <div className="h-full w-0.5 rounded-full bg-gray-200" />
             <ToolTip
               className="z-10"
               hoverTrigger
               enabled={!canPreview}
               theme="dark"
               content={
-                <div className="p-2 text-sm text-center text-white bg-black rounded-md w-36">
+                <div className="w-36 rounded-md bg-black p-2 text-center text-sm text-white">
                   A material must be selected in order to see the preview
                 </div>
               }
@@ -106,10 +106,10 @@ const MaterialSettings = ({
       }
     >
       <div
-        className="flex flex-row justify-between max-w-full gap-2 p-2 place-items-center"
+        className="flex max-w-full flex-row place-items-center justify-between gap-2 p-2"
         data-testid="contextual-material-content"
       >
-        <div className="w-5 h-full" />
+        <div className="h-full w-5" />
         <div className="flex-grow">
           <Materials current={current ?? null} onChange={handleMaterialChange} />
         </div>
diff --git a/client/src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx b/client/src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx
index 780abe0fd4..0356b81f7f 100644
--- a/client/src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-contextual-layer/preview-map/component.tsx
@@ -74,12 +74,12 @@ const PreviewMap = ({ selectedLayerId, selectedMaterialId, onStatusChange }: Pre
   const layers = useMemo(() => [{ id: PREVIEW_LAYER_ID, layer: PreviewLayer }], [PreviewLayer]);
 
   return (
-    <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
+    <div className="absolute left-0 top-0 h-full w-full overflow-hidden">
       {isFetching && <PageLoading />}
       <Map id="contextual-preview-map" mapStyle="terrain" viewState={INITIAL_PREVIEW_SETTINGS}>
         {() => <LayerManager layers={layers} />}
       </Map>
-      <div className="absolute z-10 w-10 space-y-2 bottom-2 right-2">
+      <div className="absolute bottom-2 right-2 z-10 w-10 space-y-2">
         <ZoomControl mapId="contextual-preview-map" />
       </div>
     </div>
diff --git a/client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx b/client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx
index 04e31de091..a726b1f198 100644
--- a/client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx
@@ -64,7 +64,7 @@ const AnalysisDynamicMetadata: FC<AnalysisDynamicMetadataTypes> = ({
     () =>
       !!isComparisonEnabled && (
         <span>
-          compared to <span className="font-bold whitespace-nowrap">{scenario2}</span>
+          compared to <span className="whitespace-nowrap font-bold">{scenario2}</span>
         </span>
       ),
     [isComparisonEnabled, scenario2],
@@ -188,14 +188,14 @@ const AnalysisDynamicMetadata: FC<AnalysisDynamicMetadataTypes> = ({
 
   return (
     <div
-      className={classNames('flex items-center justify-start text-xs gap-1 flex-wrap', className)}
+      className={classNames('flex flex-wrap items-center justify-start gap-1 text-xs', className)}
       data-testid="analysis-dynamic-metadata"
     >
-      <InformationCircleIcon className="w-4 h-4 text-gray-900 shrink-0" />
+      <InformationCircleIcon className="h-4 w-4 shrink-0 text-gray-900" />
       Viewing {isComparisonEnabled ? <ComparisonToggle /> : values}
       <span>
         <span className="whitespace-nowrap">Impact values for</span>
-        <span className="font-bold whitespace-nowrap"> {scenario1} </span>
+        <span className="whitespace-nowrap font-bold"> {scenario1} </span>
       </span>
       {comparisonTemplate}
       {indicatorsTemplate}
diff --git a/client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx b/client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx
index 15aa49fc68..1f1279c07a 100644
--- a/client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx
@@ -62,7 +62,7 @@ const IndicatorsFilter = () => {
   );
 
   return (
-    <div className="bg-white rounded-md">
+    <div className="rounded-md bg-white">
       <Select
         data-testid="indicators-filter"
         value={current}
diff --git a/client/src/containers/analysis-visualization/analysis-filters/more-filters/component.tsx b/client/src/containers/analysis-visualization/analysis-filters/more-filters/component.tsx
index aadecfc0ef..5f247141b1 100644
--- a/client/src/containers/analysis-visualization/analysis-filters/more-filters/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-filters/more-filters/component.tsx
@@ -344,16 +344,16 @@ const MoreFilters = () => {
       {({ open, close }) => (
         <>
           <Popover.Button
-            className="flex items-center space-x-2 px-2 py-2.5 border border-gray-200 rounded-md bg-white shadow-sm hover:cursor-pointer focus:border-navy-400 focus:outline-none focus:ring-0"
+            className="flex items-center space-x-2 rounded-md border border-gray-200 bg-white px-2 py-2.5 shadow-sm hover:cursor-pointer focus:border-navy-400 focus:outline-none focus:ring-0"
             type="button"
             {...getReferenceProps({
               ref: refs.setReference,
             })}
             data-testid="more-filters-button"
           >
-            <FilterIcon className="block w-5 h-5 mx-1 text-gray-900" aria-hidden="true" />
+            <FilterIcon className="mx-1 block h-5 w-5 text-gray-900" aria-hidden="true" />
             {counter > 0 && (
-              <span className="flex items-center justify-center w-5 h-5 text-xs font-semibold text-white rounded-full bg-navy-400">
+              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-navy-400 text-xs font-semibold text-white">
                 {counter}
               </span>
             )}
@@ -380,9 +380,9 @@ const MoreFilters = () => {
             >
               <Popover.Panel
                 static
-                className="p-4 mt-1 bg-white rounded-md shadow-md w-80 ring-1 ring-gray-200"
+                className="mt-1 w-80 rounded-md bg-white p-4 shadow-md ring-1 ring-gray-200"
               >
-                <div className="flex justify-between mb-4">
+                <div className="mb-4 flex justify-between">
                   <div>Filter by</div>
                   <button type="button" className="text-navy-400" onClick={handleClearFilters}>
                     Clear all
@@ -467,7 +467,7 @@ const MoreFilters = () => {
                   </div>
                 </div>
 
-                <div className="flex gap-2 mt-6">
+                <div className="mt-6 flex gap-2">
                   <Button
                     variant="secondary"
                     className="px-9"
diff --git a/client/src/containers/analysis-visualization/analysis-legend/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/component.tsx
index 12feb10237..dd82d02a85 100644
--- a/client/src/containers/analysis-visualization/analysis-legend/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-legend/component.tsx
@@ -19,7 +19,6 @@ import { setFilter } from 'store/features/analysis';
 import type { Layer, Material } from 'types';
 
 const sortByOrder: (layers: Record<string, Layer>) => Layer[] = (layers) => {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return Object.values(layers).sort((a, b) => a.order! - b.order!);
 };
 
@@ -136,16 +135,16 @@ export const Legend: React.FC = () => {
     <>
       <div className="relative">
         {showLegend && (
-          <div className="absolute bottom-0 z-10 flex flex-col flex-grow overflow-hidden bg-white border border-gray-200 rounded-lg shadow-sm right-12 w-[350px] md:max-h-[75vh]">
+          <div className="absolute bottom-0 right-12 z-10 flex w-[350px] flex-grow flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm md:max-h-[75vh]">
             <div className="overflow-y-auto">
               <div className="divide-y divide-gray-100">
-                <div className="flex items-center justify-between px-2 py-1 place-items-center">
+                <div className="flex place-items-center items-center justify-between px-2 py-1">
                   <div className="px-2 text-sm text-gray-900">Legend</div>
                   <button
                     disabled={!areContextualLayersLoaded}
                     type="button"
                     aria-expanded={showSettings}
-                    className="disabled:cursor-not-allowed disabled:text-gray-500 text-navy-400 py-1.5 px-1.5 flex flex-row gap-2 place-items-center"
+                    className="flex flex-row place-items-center gap-2 px-1.5 py-1.5 text-navy-400 disabled:cursor-not-allowed disabled:text-gray-500"
                     onClick={handleToggleShowLegendSettings}
                     data-testid="contextual-layer-modal-toggle"
                   >
@@ -153,7 +152,7 @@ export const Legend: React.FC = () => {
                       Contextual Layers
                     </span>
                     {visibleContextualLayers > 0 && (
-                      <div className="w-4 h-4 text-xs font-semibold text-center text-white rounded-full bg-navy-400">
+                      <div className="h-4 w-4 rounded-full bg-navy-400 text-center text-xs font-semibold text-white">
                         {visibleContextualLayers}
                       </div>
                     )}
@@ -209,12 +208,12 @@ const ToggleShowLegendButton = ({
       className={classNames(
         bgColorClassnames,
         textColorClassnames,
-        'transition-colors relative flex items-center justify-center w-10 h-10 rounded-lg p-1.5 ',
+        'relative flex h-10 w-10 items-center justify-center rounded-lg p-1.5 transition-colors ',
       )}
       onClick={toggleLegend}
     >
       <ChevronDoubleRightIcon
-        className={classNames('transition-transform w-full hidden group-hover:block', {
+        className={classNames('hidden w-full transition-transform group-hover:block', {
           'rotate-180': showLegend,
         })}
       />
@@ -225,7 +224,7 @@ const ToggleShowLegendButton = ({
         <div
           className={classNames(
             showLegend ? 'bg-inherit' : 'bg-navy-400',
-            'box-content absolute bottom-0 right-0 w-4 h-4 m-auto text-xs font-semibold text-center text-white border border-white rounded-full translate-x-1/3 translate-y-1/3',
+            'absolute bottom-0 right-0 m-auto box-content h-4 w-4 translate-x-1/3 translate-y-1/3 rounded-full border border-white text-center text-xs font-semibold text-white',
           )}
         >
           {activeLayerNumber}
diff --git a/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx
index b67cee20df..9f23accbb5 100644
--- a/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx
@@ -74,7 +74,6 @@ const ContextualLegendItem = ({ layer }: ContextualLegendItemProps) => {
       onToggle={onToggleLayer}
       id={layer.id}
       isLoading={areLayersLoading || isLoadingData}
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       name={layer.metadata!.legend.name}
       info={{
         description: layer.metadata?.description,
diff --git a/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
index 818a69f72d..1b281112b1 100644
--- a/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
@@ -127,7 +127,7 @@ const MaterialLayer = () => {
         />
       )}
       {isError && error.response?.status === 404 && (
-        <div className="text-sm text-red-500">No data found for this parameters</div>
+        <div className="text-red-500 text-sm">No data found for this parameters</div>
       )}
     </LegendItem>
   );
diff --git a/client/src/containers/analysis-visualization/analysis-map/component.tsx b/client/src/containers/analysis-visualization/analysis-map/component.tsx
index 4cd3397188..d00009056d 100644
--- a/client/src/containers/analysis-visualization/analysis-map/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-map/component.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { XCircleIcon } from '@heroicons/react/solid';
+import { useRouter } from 'next/router';
 
 import { scaleByLegendType } from 'hooks/h3-data/utils';
 import LayerManager from 'components/map/layer-manager';
@@ -23,7 +24,6 @@ import type { ViewState } from 'react-map-gl';
 import type { MapStyle } from 'components/map/types';
 import type { BasemapValue } from 'components/map/controls/basemap/types';
 import type { Layer, Legend as LegendType } from 'types';
-import { useRouter } from 'next/router';
 
 const getLegendScale = (legendInfo: LegendType) => {
   if (legendInfo?.type === 'range' || legendInfo?.type === 'category') {
@@ -49,6 +49,7 @@ const AnalysisMap = () => {
 
   const handleViewState = useCallback((viewState: ViewState) => {
     dispatch(setMapState(viewState));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const [tooltipData, setTooltipData] = useState(null);
@@ -116,13 +117,14 @@ const AnalysisMap = () => {
         }),
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <div className="absolute top-0 left-0 w-full h-full overflow-hidden" data-testid="analysis-map">
+    <div className="absolute left-0 top-0 h-full w-full overflow-hidden" data-testid="analysis-map">
       {isFetching && <PageLoading />}
       <Map
-        className="w-screen h-full"
+        className="h-full w-screen"
         mapStyle={mapStyle}
         viewState={mapState}
         onMapViewStateChange={handleViewState}
@@ -140,7 +142,7 @@ const AnalysisMap = () => {
                   y: tooltipData.y,
                 }}
               >
-                <div className="p-4 space-y-2 bg-white rounded-md shadow-md">
+                <div className="space-y-2 rounded-md bg-white p-4 shadow-md">
                   <div className="text-sm font-semibold text-gray-900">
                     {tooltipData.data.v}
                     {tooltipData.data.unit && ` ${tooltipData.data.unit}`}
@@ -153,16 +155,16 @@ const AnalysisMap = () => {
         )}
       </Map>
       {isError && (
-        <div className="p-4 rounded-md top-20 left-12 bg-red-50">
+        <div className="left-12 top-20 rounded-md bg-red-50 p-4">
           <div className="flex">
-            <XCircleIcon className="w-5 h-5 text-red-400" aria-hidden="true" />
+            <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
             <p className="mb-0 ml-3 text-sm text-red-400">
               No available data for the current filter selection. Please try another one.
             </p>
           </div>
         </div>
       )}
-      <div className="absolute z-10 w-10 space-y-2 bottom-10 right-6">
+      <div className="absolute bottom-10 right-6 z-10 w-10 space-y-2">
         <BasemapControl value={mapStyle} onChange={handleMapStyleChange} />
         <ZoomControl />
         <Legend />
diff --git a/client/src/containers/analysis-visualization/analysis-map/layers/contextual/hooks.tsx b/client/src/containers/analysis-visualization/analysis-map/layers/contextual/hooks.tsx
index 0c44566bcc..be46e0902f 100644
--- a/client/src/containers/analysis-visualization/analysis-map/layers/contextual/hooks.tsx
+++ b/client/src/containers/analysis-visualization/analysis-map/layers/contextual/hooks.tsx
@@ -1,13 +1,13 @@
 import { useMemo } from 'react';
-import { H3HexagonLayer, H3HexagonLayerProps } from '@deck.gl/geo-layers/typed';
+import { H3HexagonLayer } from '@deck.gl/geo-layers/typed';
 
 import { useAppSelector } from 'store/hooks';
 import { analysisMap } from 'store/features/analysis';
-import { MapboxLayerProps } from 'components/map/layers/types';
 import { useAllContextualLayersData } from 'hooks/h3-data/contextual';
 import DeckLayer from 'components/map/layers/deck';
 
-import type { LayerProps, LayerSettings } from 'components/map/layers/types';
+import type { MapboxLayerProps, LayerProps, LayerSettings } from 'components/map/layers/types';
+import type { H3HexagonLayerProps } from '@deck.gl/geo-layers/typed';
 import type { Layer } from 'types';
 
 export const ContextualDeckLayer = ({
diff --git a/client/src/containers/analysis-visualization/analysis-map/layers/impact/hooks.ts b/client/src/containers/analysis-visualization/analysis-map/layers/impact/hooks.ts
index 08782b2846..b3395460f6 100644
--- a/client/src/containers/analysis-visualization/analysis-map/layers/impact/hooks.ts
+++ b/client/src/containers/analysis-visualization/analysis-map/layers/impact/hooks.ts
@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
-import { H3HexagonLayer, H3HexagonLayerProps } from '@deck.gl/geo-layers/typed';
+import { H3HexagonLayer } from '@deck.gl/geo-layers/typed';
 
 import { useImpactLayer } from 'hooks/layers/impact';
 import { useAppSelector } from 'store/hooks';
 import { analysisMap } from 'store/features/analysis';
-import { MapboxLayerProps } from 'components/map/layers/types';
 
-import type { LayerProps, LayerSettings } from 'components/map/layers/types';
+import type { H3HexagonLayerProps } from '@deck.gl/geo-layers/typed';
+import type { MapboxLayerProps, LayerProps, LayerSettings } from 'components/map/layers/types';
 
 export function useLayer(props: LayerProps<LayerSettings>['settings']) {
   const { onHoverLayer } = props;
diff --git a/client/src/containers/analysis-visualization/analysis-map/layers/material/hooks.ts b/client/src/containers/analysis-visualization/analysis-map/layers/material/hooks.ts
index d35e241af5..f1e09b2cf9 100644
--- a/client/src/containers/analysis-visualization/analysis-map/layers/material/hooks.ts
+++ b/client/src/containers/analysis-visualization/analysis-map/layers/material/hooks.ts
@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
-import { H3HexagonLayer, H3HexagonLayerProps } from '@deck.gl/geo-layers/typed';
+import { H3HexagonLayer } from '@deck.gl/geo-layers/typed';
 
 import useH3MaterialData from 'hooks/h3-data/material';
 import { useAppSelector } from 'store/hooks';
 import { analysisMap } from 'store/features/analysis';
-import { MapboxLayerProps } from 'components/map/layers/types';
 
-import type { LayerProps, LayerSettings } from 'components/map/layers/types';
+import type { H3HexagonLayerProps } from '@deck.gl/geo-layers/typed';
+import type { MapboxLayerProps, LayerProps, LayerSettings } from 'components/map/layers/types';
 
 export function useLayer(props: LayerProps<LayerSettings>['settings']) {
   const { onHoverLayer } = props;
diff --git a/client/src/containers/analysis-visualization/analysis-table/comparison-cell/component.tsx b/client/src/containers/analysis-visualization/analysis-table/comparison-cell/component.tsx
index 762bf72dad..a754de768b 100644
--- a/client/src/containers/analysis-visualization/analysis-table/comparison-cell/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-table/comparison-cell/component.tsx
@@ -42,14 +42,14 @@ const ComparisonCell: React.FC<ComparisonCellProps> = ({
   return (
     <div className="mx-auto w-fit" data-testid="comparison-cell">
       <div className="flex flex-row gap-1">
-        <div className="my-auto text-sm text-gray-900 whitespace-nowrap">
+        <div className="my-auto whitespace-nowrap text-sm text-gray-900">
           {formatWithUnit(scenarioValue, unit)}
         </div>
         <div
           className={classNames(
-            'my-auto text-xs font-semibold text-gray-500 rounded-[4px] px-1 py-0.5',
+            'my-auto rounded-[4px] px-1 py-0.5 text-xs font-semibold text-gray-500',
             {
-              'bg-green-400/40 text-green-700':
+              'text-green-700 bg-green-400/40':
                 (comparisonMode === 'relative' && percentageDifference <= 0) ||
                 (comparisonMode === 'absolute' && absoluteDifference <= 0),
               'bg-red-400/20 text-red-800':
@@ -67,7 +67,7 @@ const ComparisonCell: React.FC<ComparisonCellProps> = ({
           )}
         </div>
       </div>
-      <div className="my-auto text-xs text-left text-gray-300 line-through whitespace-nowrap">
+      <div className="my-auto whitespace-nowrap text-left text-xs text-gray-300 line-through">
         {formatWithUnit(value, unit)}
       </div>
     </div>
diff --git a/client/src/containers/analysis-visualization/analysis-table/component.tsx b/client/src/containers/analysis-visualization/analysis-table/component.tsx
index 08679003be..9b5e7520d7 100644
--- a/client/src/containers/analysis-visualization/analysis-table/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-table/component.tsx
@@ -406,17 +406,17 @@ const AnalysisTable = () => {
           <div>
             {!!expanded?.name ? (
               <Button
-                className="pt-1 pb-1 pr-0 pl-0 border-0 bg-transparent"
+                className="border-0 bg-transparent pb-1 pl-0 pr-0 pt-1"
                 variant="transparent"
                 onClick={handleExitExpanded}
               >
-                <div className="flex text-gray-900 text-sm text-start font-semibold max-w-[200px] whitespace-normal">
-                  <ArrowLeftIcon className="mr-3.5 w-4 h-4" />
+                <div className="flex max-w-[200px] whitespace-normal text-start text-sm font-semibold text-gray-900">
+                  <ArrowLeftIcon className="mr-3.5 h-4 w-4" />
                   {expanded.name}
                 </div>
               </Button>
             ) : (
-              <span className="text-sm block text-gray-400 normal-case py-[0.70rem]">
+              <span className="block py-[0.70rem] text-sm normal-case text-gray-400">
                 Selected Indicators
               </span>
             )}
@@ -432,9 +432,9 @@ const AnalysisTable = () => {
             indicators.find((i) => i.id === original.indicatorId)?.name;
 
           return (
-            <div className="py-5 flex gap-4">
+            <div className="flex gap-4 py-5">
               {!expanded?.name && (
-                <InformationCircleIcon className="w-4 h-4 text-gray-900 shrink-0" />
+                <InformationCircleIcon className="h-4 w-4 shrink-0 text-gray-900" />
               )}
               <div>
                 {expanded?.name ? (
@@ -477,7 +477,7 @@ const AnalysisTable = () => {
         }) => {
           const chartData = values as ChartData[];
           return (
-            <div className="h-5 my-3 mx-auto w-[130px]">
+            <div className="mx-auto my-3 h-5 w-[130px]">
               <ChartCell data={chartData} />
             </div>
           );
@@ -524,9 +524,9 @@ const AnalysisTable = () => {
   );
 
   return (
-    <div className="flex flex-col flex-1">
+    <div className="flex flex-1 flex-col">
       <div className="flex justify-between px-6">
-        <div className="flex items-end justify-between w-full">
+        <div className="flex w-full items-end justify-between">
           <AnalysisDynamicMetadata />
           <div>
             <Button
@@ -552,7 +552,7 @@ const AnalysisTable = () => {
           </div>
         </div>
       </div>
-      <div className="relative flex-1 px-6 my-6" data-testid="analysis-table">
+      <div className="relative my-6 flex-1 px-6" data-testid="analysis-table">
         <Table {...tableProps} />
       </div>
     </div>
diff --git a/client/src/containers/analysis-visualization/analysis-table/types.d.ts b/client/src/containers/analysis-visualization/analysis-table/types.d.ts
index 03d4921a1b..5c3fcb06cb 100644
--- a/client/src/containers/analysis-visualization/analysis-table/types.d.ts
+++ b/client/src/containers/analysis-visualization/analysis-table/types.d.ts
@@ -45,8 +45,8 @@ export type ImpactRowType<
 export type ImpactTableValueItem<Comparison extends ComparisonMode> = Comparison extends false
   ? PlainValueItemProps
   : Comparison extends 'scenario'
-  ? ScenarioComparisonValueItemProps
-  : ComparisonValueItemProps;
+    ? ScenarioComparisonValueItemProps
+    : ComparisonValueItemProps;
 
 export interface ImpactTableData<Comparison extends ComparisonMode> {
   groupBy: string;
diff --git a/client/src/containers/collapse-button/component.tsx b/client/src/containers/collapse-button/component.tsx
index 18718c5eff..26958d1ad5 100644
--- a/client/src/containers/collapse-button/component.tsx
+++ b/client/src/containers/collapse-button/component.tsx
@@ -17,7 +17,7 @@ const CollapseButton: React.FC = () => {
   return (
     <button
       type="button"
-      className="flex items-center justify-center w-10 h-10 bg-white border border-gray-200 rounded-full cursor-pointer hover:shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-navy-400/20"
+      className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-navy-400/20 focus:ring-offset-1"
       onClick={handleClick}
     >
       {isSidebarCollapsed ? (
diff --git a/client/src/containers/delete-user-modal/component.tsx b/client/src/containers/delete-user-modal/component.tsx
index 19a89309fc..3d3a8fffd1 100644
--- a/client/src/containers/delete-user-modal/component.tsx
+++ b/client/src/containers/delete-user-modal/component.tsx
@@ -40,15 +40,15 @@ const DeleteUserModal = ({ id, userName }: DeleteUserProps) => {
         size="fit"
         dismissible={false}
       >
-        <div className="flex p-6 pb-8 gap-6">
-          <div className="w-14 shrink-0 h-14 flex justify-center items-center rounded-full bg-red-50">
+        <div className="flex gap-6 p-6 pb-8">
+          <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-red-50">
             <ExclamationIcon className="h-6 stroke-red-400" />
           </div>
           <div>
-            <h1 className="text-base leading-7 font-semibold text-gray-900 mb-1">
+            <h1 className="mb-1 text-base font-semibold leading-7 text-gray-900">
               Delete user &quot;{userName}&quot;
             </h1>
-            <p className="text-sm text-gray-500 mb-4">
+            <p className="mb-4 text-sm text-gray-500">
               All of this user data will be permanently removed from our servers forever. This
               action cannot be undone.
             </p>
diff --git a/client/src/containers/edit-user/component.tsx b/client/src/containers/edit-user/component.tsx
index c94f4143dd..ef96e8f545 100644
--- a/client/src/containers/edit-user/component.tsx
+++ b/client/src/containers/edit-user/component.tsx
@@ -35,7 +35,7 @@ const EditUser = ({ user }: EditUserProps) => {
       </Button>
       <Modal size="narrow" open={open} title={`Edit user ${userName}`} onDismiss={closeModal}>
         <UserForm user={user} onSubmit={closeModal}>
-          <div className="flex justify-between flex-1 mr-2.5 px-0.5">
+          <div className="mr-2.5 flex flex-1 justify-between px-0.5">
             <DeleteUser id={user.id} userName={userName} />
             <Button size="xs" variant="white" onClick={closeModal}>
               Cancel
diff --git a/client/src/containers/edit-user/user-form.tsx b/client/src/containers/edit-user/user-form.tsx
index 6f53c94cf8..5159773e11 100644
--- a/client/src/containers/edit-user/user-form.tsx
+++ b/client/src/containers/edit-user/user-form.tsx
@@ -86,7 +86,7 @@ const UserForm = ({ user, onSubmit, children }: UserFormProps) => {
 
   return (
     <form onSubmit={handleSubmit(createOrUpdateUser)}>
-      <div className="grid grid-cols-2 gap-6 my-6">
+      <div className="my-6 grid grid-cols-2 gap-6">
         <div>
           <label htmlFor="fname">First Name</label>
           <Input {...register('fname')} />
diff --git a/client/src/containers/filters/years-range/component.tsx b/client/src/containers/filters/years-range/component.tsx
index dad61a1581..b78bf204ee 100644
--- a/client/src/containers/filters/years-range/component.tsx
+++ b/client/src/containers/filters/years-range/component.tsx
@@ -86,7 +86,7 @@ export const YearsRangeFilter: React.FC<YearsRangeFilterProps> = ({
     <div>
       <button
         type="button"
-        className="relative w-full py-2.5 leading-5 text-sm pl-3 pr-10 text-left bg-white border border-gray-200 rounded-md shadow-sm cursor-pointer focus:outline-none focus:border-navy-400 focus:ring-0"
+        className="relative w-full cursor-pointer rounded-md border border-gray-200 bg-white py-2.5 pl-3 pr-10 text-left text-sm leading-5 shadow-sm focus:border-navy-400 focus:outline-none focus:ring-0"
         {...getReferenceProps({
           ref: refs.setReference,
         })}
@@ -98,9 +98,9 @@ export const YearsRangeFilter: React.FC<YearsRangeFilterProps> = ({
             {startYearOption?.label} - {endYearOption?.label}
           </span>
         </span>
-        <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronDownIcon
-            className={cx('w-5 h-5 text-gray-900', {
+            className={cx('h-5 w-5 text-gray-900', {
               'rotate-180': isOpen,
             })}
             aria-hidden="true"
@@ -128,7 +128,7 @@ export const YearsRangeFilter: React.FC<YearsRangeFilterProps> = ({
           })}
         >
           <div className="mt-1 w-60">
-            <div className="p-4 bg-white rounded-md shadow-md ring-1 ring-gray-200">
+            <div className="rounded-md bg-white p-4 shadow-md ring-1 ring-gray-200">
               <div className="grid grid-cols-1 gap-2">
                 <div>From</div>
                 <Select<number>
diff --git a/client/src/containers/interventions/form/component.tsx b/client/src/containers/interventions/form/component.tsx
index 72928bfc12..adf9b9c0b2 100644
--- a/client/src/containers/interventions/form/component.tsx
+++ b/client/src/containers/interventions/form/component.tsx
@@ -39,7 +39,6 @@ const DISABLED_LOCATION_TYPES = [LocationTypes.unknown, LocationTypes.countryOfD
 
 type InterventionFormProps = {
   intervention?: Intervention;
-  isCreation?: boolean;
   isSubmitting?: boolean;
   onSubmit?: (interventionFormData: InterventionFormData) => void;
 };
@@ -55,7 +54,6 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
   intervention,
   isSubmitting,
   onSubmit,
-  isCreation = false,
 }) => {
   const {
     query: { scenarioId },
@@ -325,8 +323,7 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
     // * resets "impacts per ton" coefficients whenever the intervention type changes
     if (!intervention) {
       Object.values(indicatorNameCodes).forEach((indicatorKey) => {
-        // @ts-expect-error not sure how to solve this dynamic typing
-        resetField(`coefficients.${indicatorKey}`, { defaultValue: 0 });
+        resetField(`coefficients.${indicatorKey}` as keyof SubSchema, { defaultValue: 0 });
       });
     }
 
@@ -441,7 +438,7 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
           analyze changes.
         </p>
       </div>
-      <div className="pl-10 space-y-4 border-l-2 border-gray-100">
+      <div className="space-y-4 border-l-2 border-gray-100 pl-10">
         <div>
           <label className={LABEL_CLASSNAMES}>
             Title <sup>*</sup>
@@ -625,7 +622,7 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
       <div className="flex flex-col justify-center pr-10">
         <h2>2. Type of intervention *</h2>
       </div>
-      <div className="pl-10 border-l-2 border-gray-100">
+      <div className="border-l-2 border-gray-100 pl-10">
         <Controller
           name="interventionType"
           control={control}
@@ -644,7 +641,7 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
                     value={value}
                     key={value}
                     className={({ active, checked }) =>
-                      classNames('border p-4 rounded-md', {
+                      classNames('rounded-md border p-4', {
                         'border-orange-100 bg-orange-50 text-gray-900': active || checked,
                         'border-gray-300 text-gray-500':
                           !(active || checked) && !errors.interventionType,
@@ -686,7 +683,7 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
           </div>
           {/* Those options depending on intervention type selected by the user */}
 
-          <div className="pl-10 space-y-10 border-l-2 border-gray-100">
+          <div className="space-y-10 border-l-2 border-gray-100 pl-10">
             {currentInterventionType === InterventionTypes.Material && (
               <div className="space-y-4">
                 <div className="flex items-center space-x-1">
@@ -736,14 +733,14 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
               <Disclosure as="div" className="space-y-4">
                 {({ open }) => (
                   <>
-                    <div className="flex items-center justify-between w-full">
+                    <div className="flex w-full items-center justify-between">
                       <div className="flex items-center space-x-1">
                         <h3>New location</h3>
                         <InfoToolTip info={InfoTooltip.supplierLocation} />
                       </div>
                       <Disclosure.Button
                         className={classNames(
-                          'border-navy-400 border w-6 h-6 rounded flex items-center justify-center',
+                          'flex h-6 w-6 items-center justify-center rounded border border-navy-400',
                           open ? 'bg-navy-400' : 'bg-transparent',
                           {
                             hidden:
@@ -753,9 +750,9 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
                         )}
                       >
                         {open ? (
-                          <MinusIcon className="w-5 h-5 text-white" />
+                          <MinusIcon className="h-5 w-5 text-white" />
                         ) : (
-                          <PlusIcon className="w-5 h-5 text-navy-400" />
+                          <PlusIcon className="h-5 w-5 text-navy-400" />
                         )}
                       </Disclosure.Button>
                     </div>
@@ -934,23 +931,23 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
 
                   return (
                     <>
-                      <div className="flex items-center justify-between w-full">
+                      <div className="flex w-full items-center justify-between">
                         <div className="flex items-center space-x-1">
                           <h3 className="inline-block">Supplier</h3>{' '}
-                          <span className="text-gray-500 text-regular">(optional)</span>
+                          <span className="text-regular text-gray-500">(optional)</span>
                           <InfoToolTip info={InfoTooltip.newSupplier} />
                         </div>
                         {areSupplierEdited || (
                           <Disclosure.Button
                             className={classNames(
-                              'border-navy-400 border w-6 h-6 rounded flex items-center justify-center',
+                              'flex h-6 w-6 items-center justify-center rounded border border-navy-400',
                               open ? 'bg-navy-400' : 'bg-transparent',
                             )}
                           >
                             {open ? (
-                              <MinusIcon className="w-5 h-5 text-white" />
+                              <MinusIcon className="h-5 w-5 text-white" />
                             ) : (
-                              <PlusIcon className="w-5 h-5 text-navy-400" />
+                              <PlusIcon className="h-5 w-5 text-navy-400" />
                             )}
                           </Disclosure.Button>
                         )}
@@ -1029,25 +1026,25 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
 
                 return (
                   <div data-testid="fieldset-impacts-per-ton">
-                    <div className="flex items-center justify-between w-full">
+                    <div className="flex w-full items-center justify-between">
                       <div className="flex items-center space-x-1">
                         <h3>Impacts per ton</h3>
                         {currentInterventionType !== InterventionTypes.Efficiency && (
-                          <span className="text-gray-500 text-regular">(optional)</span>
+                          <span className="text-regular text-gray-500">(optional)</span>
                         )}
                         <InfoToolTip info={InfoTooltip.supplierImpactsPerTon} />
                       </div>
                       <Disclosure.Button
                         className={classNames(
-                          'border-navy-400 border w-6 h-6 rounded flex items-center justify-center',
+                          'flex h-6 w-6 items-center justify-center rounded border border-navy-400',
                           open ? 'bg-navy-400' : 'bg-transparent',
                           currentInterventionType === InterventionTypes.Efficiency && 'hidden',
                         )}
                       >
                         {open ? (
-                          <MinusIcon className="w-5 h-5 text-white" />
+                          <MinusIcon className="h-5 w-5 text-white" />
                         ) : (
-                          <PlusIcon className="w-5 h-5 text-navy-400" />
+                          <PlusIcon className="h-5 w-5 text-navy-400" />
                         )}
                       </Disclosure.Button>
                     </div>
@@ -1065,8 +1062,7 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
                               {indicator.name}
                             </label>
                             <Input
-                              // @ts-expect-error not sure how to solve this dynamic typing
-                              {...register(`coefficients.${indicator.nameCode}`)}
+                              {...register(`coefficients.${indicator.nameCode}` as keyof SubSchema)}
                               type="number"
                               step={0.001}
                               min={0}
@@ -1089,7 +1085,7 @@ const InterventionForm: React.FC<InterventionFormProps> = ({
       )}
 
       <div className="col-span-2">
-        <div className="mb-6 text-sm text-right text-gray-500">
+        <div className="mb-6 text-right text-sm text-gray-500">
           Fields marked with (*) are mandatory.
         </div>
         <div className="flex justify-end space-x-6">
diff --git a/client/src/containers/mobile-header/component.tsx b/client/src/containers/mobile-header/component.tsx
index 4ba69c3fd6..4f94411e56 100644
--- a/client/src/containers/mobile-header/component.tsx
+++ b/client/src/containers/mobile-header/component.tsx
@@ -9,14 +9,14 @@ const HeaderMobile = () => {
 
   return (
     <div className="lg:hidden">
-      <div className="bg-green-700 py-2 px-4 flex items-center justify-between sm:px-6 lg:px-8">
+      <div className="bg-green-700 flex items-center justify-between px-4 py-2 sm:px-6 lg:px-8">
         <div>
           <LandgriffonLogo />
         </div>
         <div>
           <button
             type="button"
-            className="-mr-3 h-12 w-12 inline-flex items-center justify-center text-white hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+            className="-mr-3 inline-flex h-12 w-12 items-center justify-center text-white hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
             onClick={() => dispatch(setMenuMobileOpen(true))}
           >
             <span className="sr-only">Open sidebar</span>
diff --git a/client/src/containers/mode-control/component.tsx b/client/src/containers/mode-control/component.tsx
index 5f4b11ca5a..eecbddafea 100644
--- a/client/src/containers/mode-control/component.tsx
+++ b/client/src/containers/mode-control/component.tsx
@@ -20,9 +20,9 @@ const ModeControl: React.FC = () => {
           href={{ pathname: `/analysis/${mode}`, query }}
           data-testid={`mode-control-${mode}`}
         >
-          {mode === 'map' && <MapIcon className="w-6 h-6" aria-hidden="true" />}
-          {mode === 'table' && <TableIcon className="w-6 h-6" aria-hidden="true" />}
-          {mode === 'chart' && <ChartPieIcon className="w-6 h-6" aria-hidden="true" />}
+          {mode === 'map' && <MapIcon className="h-6 w-6" aria-hidden="true" />}
+          {mode === 'table' && <TableIcon className="h-6 w-6" aria-hidden="true" />}
+          {mode === 'chart' && <ChartPieIcon className="h-6 w-6" aria-hidden="true" />}
         </LinkGroupItem>
       ))}
     </ButtonGroup>
diff --git a/client/src/containers/navigation/desktop/component.tsx b/client/src/containers/navigation/desktop/component.tsx
index 15b3d24e4e..a8fdb11de2 100644
--- a/client/src/containers/navigation/desktop/component.tsx
+++ b/client/src/containers/navigation/desktop/component.tsx
@@ -13,7 +13,7 @@ const DesktopNavigation: React.FC<NavigationProps> = ({ items }: NavigationProps
   };
 
   return (
-    <nav aria-label="Sidebar" className="w-full px-4 space-y-4">
+    <nav aria-label="Sidebar" className="w-full space-y-4 px-4">
       {items.map((item) => {
         const isActive = isCurrentItem(item.href);
         return (
@@ -21,17 +21,17 @@ const DesktopNavigation: React.FC<NavigationProps> = ({ items }: NavigationProps
             key={item.name}
             href={item.disabled ? '' : item.href}
             className={classNames(
-              'text-white w-full h-[86px] rounded-md flex flex-col items-center justify-center text-xs font-medium transition-colors hover:bg-black/30 focus-visible:shadow-button-focused focus-visible:outline-none ',
+              'flex h-[86px] w-full flex-col items-center justify-center rounded-md text-xs font-medium text-white transition-colors hover:bg-black/30 focus-visible:shadow-button-focused focus-visible:outline-none ',
               {
                 'bg-black/30': isCurrentItem(item.href),
-                'opacity-50 cursor-not-allowed pointer-events-none': item.disabled,
+                'pointer-events-none cursor-not-allowed opacity-50': item.disabled,
               },
             )}
           >
             {isActive ? (
-              <item.icon.active strokeWidth={1.5} className="w-6 h-6" aria-hidden="true" />
+              <item.icon.active strokeWidth={1.5} className="h-6 w-6" aria-hidden="true" />
             ) : (
-              <item.icon.default strokeWidth={1.5} className="w-6 h-6" aria-hidden="true" />
+              <item.icon.default strokeWidth={1.5} className="h-6 w-6" aria-hidden="true" />
             )}
             <span className="mt-2">{item.name}</span>
           </a>
diff --git a/client/src/containers/navigation/error/component.tsx b/client/src/containers/navigation/error/component.tsx
index 42d4bca44b..cc686078d9 100644
--- a/client/src/containers/navigation/error/component.tsx
+++ b/client/src/containers/navigation/error/component.tsx
@@ -7,9 +7,9 @@ const NavigationError: React.FC<NavigationProps> = ({ items }: NavigationProps)
         <a
           key={item.name}
           href={item.href}
-          className="flex flex-col items-center w-full p-3 text-xs font-medium text-green-800 rounded-md hover:bg-green-800 hover:text-white"
+          className="flex w-full flex-col items-center rounded-md p-3 text-xs font-medium text-green-800 hover:bg-green-800 hover:text-white"
         >
-          <item.icon.default className="w-6 h-6" aria-hidden="true" />
+          <item.icon.default className="h-6 w-6" aria-hidden="true" />
           <span className="mt-2">{item.name}</span>
         </a>
       ))}
diff --git a/client/src/containers/navigation/mobile/component.tsx b/client/src/containers/navigation/mobile/component.tsx
index 1d22a76993..c5e3e119a3 100644
--- a/client/src/containers/navigation/mobile/component.tsx
+++ b/client/src/containers/navigation/mobile/component.tsx
@@ -2,12 +2,12 @@ import type { NavigationProps } from 'containers/navigation/types';
 
 const MobileNavigation = ({ items }: NavigationProps) => (
   <nav aria-label="Sidebar" className="mt-5">
-    <div className="px-2 space-y-1">
+    <div className="space-y-1 px-2">
       {items.map((item) => (
         <a
           key={item.name}
           href={item.href}
-          className="group p-2 rounded-md flex items-center text-base font-medium text-white hover:bg-green-600"
+          className="hover:bg-green-600 group flex items-center rounded-md p-2 text-base font-medium text-white"
         >
           <item.icon.default className="mr-4 h-6 w-6 text-white" aria-hidden="true" />
           {item.name}
diff --git a/client/src/containers/page-loading/component.tsx b/client/src/containers/page-loading/component.tsx
index b3038b59d1..b36f13406f 100644
--- a/client/src/containers/page-loading/component.tsx
+++ b/client/src/containers/page-loading/component.tsx
@@ -8,17 +8,17 @@ const PageLoading: React.FC<PageLoadingProps> = ({
   className,
   message = 'Loading data. This action may take a few seconds',
 }: PageLoadingProps) => (
-  <div className="absolute z-20 bg-black bg-opacity-40 backdrop-blur-sm top-0 bottom-0 right-0 left-0">
+  <div className="absolute bottom-0 left-0 right-0 top-0 z-20 bg-black bg-opacity-40 backdrop-blur-sm">
     <div
       className={classNames(
-        'absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 flex flex-col items-center text-white',
+        'absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center text-white',
         className,
         {
           'text-white': !className,
         },
       )}
     >
-      <Loading className="w-12 h-12 -ml-1 mr-3" />
+      <Loading className="-ml-1 mr-3 h-12 w-12" />
       <p className="mt-6 text-center">{message}</p>
     </div>
   </div>
diff --git a/client/src/containers/scenarios/card/component.tsx b/client/src/containers/scenarios/card/component.tsx
index 07bf39a722..5a86f288e5 100644
--- a/client/src/containers/scenarios/card/component.tsx
+++ b/client/src/containers/scenarios/card/component.tsx
@@ -20,15 +20,15 @@ const ScenarioCard: React.FC<ScenarioCardProps> = ({
       <div
         className={classNames('bg-white', {
           'w-full  xl:max-w-none': display === 'list',
-          'rounded-[10px] shadow-gray-200 shadow-sm border border-gray-200': display === 'grid',
+          'rounded-[10px] border border-gray-200 shadow-sm shadow-gray-200': display === 'grid',
         })}
         data-testid="scenario-card"
       >
         <div
           className={classNames('p-6', {
-            'grid auto grid-cols-[repeat(5,_minmax(fit-content(100px),_1fr))] gap-4':
+            'auto grid grid-cols-[repeat(5,_minmax(fit-content(100px),_1fr))] gap-4':
               display === 'list',
-            'flex flex-col space-y-6 h-full': display === 'grid',
+            'flex h-full flex-col space-y-6': display === 'grid',
           })}
         >
           <div className="flex flex-col">
@@ -39,7 +39,7 @@ const ScenarioCard: React.FC<ScenarioCardProps> = ({
             >
               Modified: {format(new Date(data.updatedAt), 'yyyy/MM/dd')}
             </div>
-            <h2 className="text-lg break-words" data-testid="scenario-title">
+            <h2 className="break-words text-lg" data-testid="scenario-title">
               {data.title}
             </h2>
             {data.description && display === 'grid' && (
diff --git a/client/src/containers/scenarios/comparison/component.tsx b/client/src/containers/scenarios/comparison/component.tsx
index d64d98d2d1..02e72a01fc 100644
--- a/client/src/containers/scenarios/comparison/component.tsx
+++ b/client/src/containers/scenarios/comparison/component.tsx
@@ -85,7 +85,7 @@ const ScenariosComparison: FC = () => {
 
   return (
     <>
-      <label className="block mb-1 text-sm text-gray-500">Compare with:</label>
+      <label className="mb-1 block text-sm text-gray-500">Compare with:</label>
       <AutoCompleteSelect
         value={selected}
         options={options}
diff --git a/client/src/containers/scenarios/filters/component.tsx b/client/src/containers/scenarios/filters/component.tsx
index d14856cbb7..8fa0de67b9 100644
--- a/client/src/containers/scenarios/filters/component.tsx
+++ b/client/src/containers/scenarios/filters/component.tsx
@@ -42,7 +42,7 @@ const ScenariosFilters: FC = () => {
         value={currentSort}
         options={SORT_OPTIONS}
         onChange={handleSort}
-        icon={<SortDescendingIcon className="w-4 h-4" />}
+        icon={<SortDescendingIcon className="h-4 w-4" />}
         disabled
       />
     </div>
diff --git a/client/src/containers/scenarios/form/component.tsx b/client/src/containers/scenarios/form/component.tsx
index d87cbc8ff2..7e09fe59e6 100644
--- a/client/src/containers/scenarios/form/component.tsx
+++ b/client/src/containers/scenarios/form/component.tsx
@@ -57,7 +57,7 @@ const ScenarioForm: React.FC<React.PropsWithChildren<ScenarioFormProps>> = ({
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="grid w-full grid-cols-1 gap-6 mt-6"
+      className="mt-6 grid w-full grid-cols-1 gap-6"
       data-testid={`scenario-form-validation-${isValid}`}
     >
       <div className="grid grid-cols-2 gap-4">
@@ -79,7 +79,7 @@ const ScenarioForm: React.FC<React.PropsWithChildren<ScenarioFormProps>> = ({
         </div>
         <div className="flex flex-col">
           <label>Access</label>
-          <div className="flex items-center h-full space-x-1">
+          <div className="flex h-full items-center space-x-1">
             <Controller
               name="isPublic"
               control={control}
diff --git a/client/src/containers/scenarios/item/component.tsx b/client/src/containers/scenarios/item/component.tsx
index 1138b5fe0a..07b460ac14 100644
--- a/client/src/containers/scenarios/item/component.tsx
+++ b/client/src/containers/scenarios/item/component.tsx
@@ -53,61 +53,61 @@ const ScenarioItem = ({ scenario, isSelected }: ScenariosItemProps) => {
     <div data-testid={`scenario-item-${scenario.id || 'null'}`}>
       <div
         className={classNames(
-          'rounded-lg shadow-sm border p-4 space-y-2',
+          'space-y-2 rounded-lg border p-4 shadow-sm',
           isSelected ? 'border-navy-400' : 'border-gray-200',
         )}
       >
         <RadioGroup.Option
           key={scenario.id}
           value={scenario.id}
-          className="flex w-full gap-2 items-top"
+          className="items-top flex w-full gap-2"
           data-testid="scenario-item-radio"
         >
           {({ checked }) => (
             <>
-              <div className="flex justify-center flex-shrink-0 items-top">
+              <div className="items-top flex flex-shrink-0 justify-center">
                 <span
                   className={classNames(
-                    checked ? 'bg-navy-400 border-transparent' : 'bg-white border-gray-300',
-                    'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
+                    checked ? 'border-transparent bg-navy-400' : 'border-gray-300 bg-white',
+                    'mt-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full border',
                   )}
                   aria-hidden="true"
                 >
-                  <span className="rounded-full bg-white w-1.5 h-1.5" />
+                  <span className="h-1.5 w-1.5 rounded-full bg-white" />
                 </span>
               </div>
-              <div className="flex-1 min-w-0 pr-4">
+              <div className="min-w-0 flex-1 pr-4">
                 <h2
                   className={classNames(
-                    'text-sm truncate font-normal',
+                    'truncate text-sm font-normal',
                     isSelected ? 'text-navy-400' : 'text-gray-900',
                   )}
                 >
                   {scenario.title}
                 </h2>
                 {scenario.id ? (
-                  <div className="flex items-center justify-between mt-2 space-x-1 text-xs font-medium text-gray-900">
+                  <div className="mt-2 flex items-center justify-between space-x-1 text-xs font-medium text-gray-900">
                     <div>Show</div>
                     <div className="flex space-x-1">
                       <div className="inline-flex">
-                        <Pill className="inline-flex bg-blue-200 rounded-tr-none rounded-br-none whitespace-nowrap">
+                        <Pill className="inline-flex whitespace-nowrap rounded-br-none rounded-tr-none bg-blue-200">
                           {/** TODO: this value is hardcoded. Update it when the API takes growth rates into account */}
                           1 growth rate
                         </Pill>
-                        <Pill className="inline-flex bg-orange-100 rounded-tl-none rounded-bl-none whitespace-nowrap">
+                        <Pill className="inline-flex whitespace-nowrap rounded-bl-none rounded-tl-none bg-orange-100">
                           {scenario.scenarioInterventions.length} interventions
                         </Pill>
                       </div>
                     </div>
                   </div>
                 ) : (
-                  <div className="flex items-center mt-2 text-sm text-gray-500">
-                    <DatabaseIcon className="w-4 h-4 mr-1" />
+                  <div className="mt-2 flex items-center text-sm text-gray-500">
+                    <DatabaseIcon className="mr-1 h-4 w-4" />
                     <span>Based on your uploaded data</span>
                   </div>
                 )}
                 {scenario.id && scenario.updatedAt && (
-                  <div className="flex items-center justify-between mt-4">
+                  <div className="mt-4 flex items-center justify-between">
                     <div className="text-xs text-gray-400" title={updatedAt?.toLocaleString()}>
                       Modified: {formattedUpdatedAgo}
                     </div>
diff --git a/client/src/containers/scenarios/scenario-items/actions.tsx b/client/src/containers/scenarios/scenario-items/actions.tsx
index 27d9cbfe86..1f1c344018 100644
--- a/client/src/containers/scenarios/scenario-items/actions.tsx
+++ b/client/src/containers/scenarios/scenario-items/actions.tsx
@@ -15,13 +15,14 @@ const ScenarioActions = ({
 }: ScenarioActionsProps) => {
   const handleDeleteClick = useCallback(() => {
     setDeleteVisibility();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
     <div
       className={classNames({
-        'flex space-between my-6': display === 'grid',
-        'flex flex-col gap-2 items-end w-fit mx-auto my-4': display === 'list',
+        'space-between my-6 flex': display === 'grid',
+        'mx-auto my-4 flex w-fit flex-col items-end gap-2': display === 'list',
       })}
     >
       <Button
@@ -30,12 +31,12 @@ const ScenarioActions = ({
         icon={<TrashIcon className="-mr-0.5" />}
         data-testid="scenario-delete-btn"
         disabled={!canDeleteScenario}
-        className="w-fit min-w- pr-3 pl-3"
+        className="min-w- w-fit pl-3 pr-3"
       >
         Delete
       </Button>
       <div
-        className={classNames('flex items-center flex-1 space-x-4', {
+        className={classNames('flex flex-1 items-center space-x-4', {
           'justify-between': display === 'list',
           'justify-end': display === 'grid',
         })}
@@ -55,7 +56,7 @@ const ScenarioActions = ({
           href={{ pathname: `/analysis/table`, query: { scenarioId } }}
           variant="primary"
           className={classNames({
-            'grow w-[90px]': display === 'list',
+            'w-[90px] grow': display === 'list',
           })}
         >
           Analyze
diff --git a/client/src/containers/scenarios/scenario-items/growth-rate.tsx b/client/src/containers/scenarios/scenario-items/growth-rate.tsx
index 41d9d8a79d..88c3a2dd91 100644
--- a/client/src/containers/scenarios/scenario-items/growth-rate.tsx
+++ b/client/src/containers/scenarios/scenario-items/growth-rate.tsx
@@ -11,7 +11,7 @@ const GrowthRate = ({ display }: GrowthRateProps) => {
       {display === 'grid' && <h3 className="text-xs">Growth rates</h3>}
       <div
         className={classNames({
-          'flex mt-2 space-x-4': display === 'grid',
+          'mt-2 flex space-x-4': display === 'grid',
         })}
       >
         <Pill className="bg-orange-50">Entire company +1.5%/yr</Pill>
diff --git a/client/src/containers/scenarios/scenario-items/interventions.tsx b/client/src/containers/scenarios/scenario-items/interventions.tsx
index 194fb9d41a..117a3a165e 100644
--- a/client/src/containers/scenarios/scenario-items/interventions.tsx
+++ b/client/src/containers/scenarios/scenario-items/interventions.tsx
@@ -39,7 +39,7 @@ const ScenarioIntervention = ({ scenarioId, display }: ScenarioInterventionProps
               <Popover.Button>
                 <Pill className="bg-blue-200">+{interventions.length - 2} more</Pill>
               </Popover.Button>
-              <Popover.Panel className="absolute flex flex-col p-4 space-y-2 bg-white border border-gray-100 rounded-md shadow-md">
+              <Popover.Panel className="absolute flex flex-col space-y-2 rounded-md border border-gray-100 bg-white p-4 shadow-md">
                 {interventions.slice(2, interventions.length).map((intervention) => (
                   <Pill key={intervention.id} className="bg-blue-200">
                     {intervention.title}
diff --git a/client/src/containers/scenarios/scenario-items/make-public.tsx b/client/src/containers/scenarios/scenario-items/make-public.tsx
index 59d10ecefa..f659ad0b6b 100644
--- a/client/src/containers/scenarios/scenario-items/make-public.tsx
+++ b/client/src/containers/scenarios/scenario-items/make-public.tsx
@@ -36,8 +36,8 @@ const MakePublic = ({ id, isPublic, display, canEditScenario }: MakePublicProps)
         className={classNames('flex items-center space-x-1', {
           'bg-navy-50': isPublic,
           'bg-gray-100': !isPublic,
-          'rounded-md justify-center p-6': display === 'list',
-          'p-6 -mx-6': display === 'grid',
+          'justify-center rounded-md p-6': display === 'list',
+          '-mx-6 p-6': display === 'grid',
         })}
       >
         <Toggle
diff --git a/client/src/containers/scenarios/table/component.tsx b/client/src/containers/scenarios/table/component.tsx
index 234ccc22dc..7afacca10d 100644
--- a/client/src/containers/scenarios/table/component.tsx
+++ b/client/src/containers/scenarios/table/component.tsx
@@ -15,7 +15,7 @@ export const ScenarioTable = ({ data, className, onDelete }: ScenarioTableProps)
   const { hasPermission } = usePermissions();
 
   return (
-    <div className={classNames('w-full h-full', className)}>
+    <div className={classNames('h-full w-full', className)}>
       <Table
         data={data}
         columns={[
diff --git a/client/src/containers/targets/input-list/component.tsx b/client/src/containers/targets/input-list/component.tsx
index 4470a27827..75c8684bb1 100644
--- a/client/src/containers/targets/input-list/component.tsx
+++ b/client/src/containers/targets/input-list/component.tsx
@@ -9,14 +9,14 @@ interface TargetListProps {
 }
 
 const TargetInputList: React.FC<TargetListProps> = ({ data }) => (
-  <div className="items-center justify-between p-4 overflow-y-scroll rounded-md shadow-sm bg-gray-50 max-h-56">
-    <div className="flex flex-row pb-2 text-sm font-semibold text-gray-500 uppercase">
-      <span className="basis-1/6 mr-2.5">Year</span>
-      <span className="basis-1/4 mr-2.5">Percentage</span>
-      <span className="basis-1/2 mr-2.5">Value</span>
+  <div className="max-h-56 items-center justify-between overflow-y-scroll rounded-md bg-gray-50 p-4 shadow-sm">
+    <div className="flex flex-row pb-2 text-sm font-semibold uppercase text-gray-500">
+      <span className="mr-2.5 basis-1/6">Year</span>
+      <span className="mr-2.5 basis-1/4">Percentage</span>
+      <span className="mr-2.5 basis-1/2">Value</span>
     </div>
     {data.map((target) => (
-      <div key={target.year} className="flex flex-row items-center pb-3 space-x-4 text-gray-900">
+      <div key={target.year} className="flex flex-row items-center space-x-4 pb-3 text-gray-900">
         <Input
           type="number"
           id="year"
@@ -48,7 +48,7 @@ const TargetInputList: React.FC<TargetListProps> = ({ data }) => (
           unit="tCO2e"
           // onInput={handleChange}
         />
-        <XCircleIcon className="w-5 h-5 mr-3 fill-gray-400" />
+        <XCircleIcon className="mr-3 h-5 w-5 fill-gray-400" />
       </div>
     ))}
   </div>
diff --git a/client/src/containers/targets/item/component.tsx b/client/src/containers/targets/item/component.tsx
index 8e9f4163bc..4cae75e6b9 100644
--- a/client/src/containers/targets/item/component.tsx
+++ b/client/src/containers/targets/item/component.tsx
@@ -12,11 +12,11 @@ const TargetItem: React.FC<Target> = ({ id, name, years, unit }) => {
   } = useModal();
 
   return (
-    <div className="grid items-center grid-cols-12 gap-4 p-4 text-sm bg-white shadow-sm">
+    <div className="grid grid-cols-12 items-center gap-4 bg-white p-4 text-sm shadow-sm">
       <div className="col-span-3">{name}</div>
       <div className="col-span-2">
         <div className="flex justify-center">
-          <div className="p-4 text-sm font-semibold text-center text-green-800 rounded-md bg-green-50">
+          <div className="rounded-md bg-green-50 p-4 text-center text-sm font-semibold text-green-800">
             2.37Mt
           </div>
         </div>
diff --git a/client/src/containers/targets/list/component.tsx b/client/src/containers/targets/list/component.tsx
index 5371c9ac1f..a8daf186e3 100644
--- a/client/src/containers/targets/list/component.tsx
+++ b/client/src/containers/targets/list/component.tsx
@@ -20,8 +20,8 @@ const TargetsList: React.FC<TargetsListProps> = ({ data }) => {
 
   return (
     <div className="space-y-1">
-      <div className="rounded-sm shadow-sm bg-gray-50">
-        <div className="grid items-center justify-between grid-cols-12 gap-4 text-xs font-semibold text-gray-500 uppercase">
+      <div className="rounded-sm bg-gray-50 shadow-sm">
+        <div className="grid grid-cols-12 items-center justify-between gap-4 text-xs font-semibold uppercase text-gray-500">
           <div className="col-span-3 p-4">Indicator</div>
           <div className="col-span-2 p-4 text-center">Baseline</div>
           <div className="col-span-7 p-4">
@@ -29,10 +29,10 @@ const TargetsList: React.FC<TargetsListProps> = ({ data }) => {
           </div>
         </div>
         {/* Years */}
-        <div className="grid grid-cols-12 gap-4 text-sm text-gray-400 uppercase border-t border-gray-100">
+        <div className="grid grid-cols-12 gap-4 border-t border-gray-100 text-sm uppercase text-gray-400">
           <div className="col-span-3 p-4" />
           <div className="col-span-2 p-4 text-center">2021</div>
-          <div className="grid grid-cols-4 col-span-7 gap-4 p-4">
+          <div className="col-span-7 grid grid-cols-4 gap-4 p-4">
             {years.map((year) => (
               <div key={`target-head-${year}`} className="text-center">
                 {year}
diff --git a/client/src/containers/toaster/component.tsx b/client/src/containers/toaster/component.tsx
index 9aa95a4cfe..109d292dcb 100644
--- a/client/src/containers/toaster/component.tsx
+++ b/client/src/containers/toaster/component.tsx
@@ -33,7 +33,7 @@ const ToastContainer: React.FC<ToasterProps> = (props) => (
       const { iconColor, backgroundColor, messagesColor } = ALERT_CLASSES[t.type];
       return (
         <div
-          className={classNames('rounded-md text-sm py-4 px-4 max-w-4xl relative', backgroundColor)}
+          className={classNames('relative max-w-4xl rounded-md px-4 py-4 text-sm', backgroundColor)}
         >
           <div className="flex items-center space-x-4">
             <div className="flex-none">
diff --git a/client/src/containers/update-password-form/component.tsx b/client/src/containers/update-password-form/component.tsx
index fcf82e653e..6c580bea38 100644
--- a/client/src/containers/update-password-form/component.tsx
+++ b/client/src/containers/update-password-form/component.tsx
@@ -60,7 +60,7 @@ const UserPasswordForm: React.FC = () => {
           <p className="text-sm text-gray-500">Update your password.</p>
         </div>
 
-        <div className="col-span-8 bg-white rounded-md shadow-lg">
+        <div className="col-span-8 rounded-md bg-white shadow-lg">
           <form onSubmit={handleSubmitPassword(handleEditPassword)}>
             <div className="grid grid-cols-2 gap-6 p-6 pb-8">
               <div className="col-span-2">
@@ -89,7 +89,7 @@ const UserPasswordForm: React.FC = () => {
                 />
               </div>
             </div>
-            <div className="flex justify-end h-16 py-3 pr-6 rounded-md bg-gray-50">
+            <div className="flex h-16 justify-end rounded-md bg-gray-50 py-3 pr-6">
               <Button
                 type="submit"
                 variant="primary"
diff --git a/client/src/containers/update-profile-form/component.tsx b/client/src/containers/update-profile-form/component.tsx
index ddc0d362a3..0a9fd874f5 100644
--- a/client/src/containers/update-profile-form/component.tsx
+++ b/client/src/containers/update-profile-form/component.tsx
@@ -53,7 +53,7 @@ const UserDataForm: React.FC = () => {
           </p>
         </div>
 
-        <div className="col-span-8 bg-white rounded-md shadow-lg">
+        <div className="col-span-8 rounded-md bg-white shadow-lg">
           {user.data && !user.isLoading && (
             <form onSubmit={handleSubmit(handleEditUserData)}>
               <div className="grid grid-cols-2 gap-6 p-6 pb-8">
@@ -92,7 +92,7 @@ const UserDataForm: React.FC = () => {
                   />
                 </div>
               </div>
-              <div className="flex justify-end h-16 py-3 pr-6 rounded-md bg-gray-50">
+              <div className="flex h-16 justify-end rounded-md bg-gray-50 py-3 pr-6">
                 <Button type="submit" variant="primary" loading={updateProfile.isLoading}>
                   Save
                 </Button>
diff --git a/client/src/containers/uploader/component.tsx b/client/src/containers/uploader/component.tsx
index 95b00cfc41..076ab5559c 100644
--- a/client/src/containers/uploader/component.tsx
+++ b/client/src/containers/uploader/component.tsx
@@ -97,9 +97,9 @@ const DataUploader: React.FC<DataUploaderProps> = ({ variant = 'default', onUplo
   }, [isWorking, onUploadInProgress]);
 
   return (
-    <div className="relative min-w-[640px] w-full">
+    <div className="relative w-full min-w-[640px]">
       <div
-        className={classNames('relative z-10 bg-white rounded-xl', {
+        className={classNames('relative z-10 rounded-xl bg-white', {
           'p-4 shadow-lg': variant === 'default',
         })}
       >
@@ -114,9 +114,9 @@ const DataUploader: React.FC<DataUploaderProps> = ({ variant = 'default', onUplo
 
       {isWorking && (
         <div className="w-full px-20">
-          <div className="px-10 py-4 bg-white rounded-b-xl">
-            <div className="w-full h-[4px] rounded bg-gradient-to-r from-[#5FCFF9] via-[#42A56A] to-[#F5CA7D]" />
-            <p className="mt-1 text-xs text-left text-gray-500">
+          <div className="rounded-b-xl bg-white px-10 py-4">
+            <div className="h-[4px] w-full rounded bg-gradient-to-r from-[#5FCFF9] via-[#42A56A] to-[#F5CA7D]" />
+            <p className="mt-1 text-left text-xs text-gray-500">
               {isUploading && 'Uploading file...'}
               {isWaiting && 'File uploaded successfully! Starting to process the data...'}
               {isProcessing && 'Processing file...'}
diff --git a/client/src/containers/user-dropdown/component.tsx b/client/src/containers/user-dropdown/component.tsx
index 6c657947b8..2b5b3f10e8 100644
--- a/client/src/containers/user-dropdown/component.tsx
+++ b/client/src/containers/user-dropdown/component.tsx
@@ -29,21 +29,21 @@ const UserDropdown: React.FC = () => {
   });
 
   return (
-    <Menu as="div" className="flex justify-center flex-col items-center w-full mb-5">
-      {(!user || status === 'loading') && <Loading className="w-5 h-5 text-white" />}
+    <Menu as="div" className="mb-5 flex w-full flex-col items-center justify-center">
+      {(!user || status === 'loading') && <Loading className="h-5 w-5 text-white" />}
       {user && status === 'success' && (
         <>
           <Menu.Button
-            className="focus-visible:shadow-button-focused focus-visible:outline-none rounded-lg shadow-menu hover:shadow-button-hovered"
+            className="rounded-lg shadow-menu hover:shadow-button-hovered focus-visible:shadow-button-focused focus-visible:outline-none"
             ref={refs.setReference}
           >
             <UserAvatar
               userFullName={userName}
               user={user}
-              className="bg-black/20 h-[50px] w-[50px] "
+              className="h-[50px] w-[50px] bg-black/20 "
             />
           </Menu.Button>
-          <span className="text-white text-xs mt-3">Account</span>
+          <span className="mt-3 text-xs text-white">Account</span>
         </>
       )}
       {!!user && (
@@ -55,10 +55,10 @@ const UserDropdown: React.FC = () => {
               top: y ?? '',
               left: x ?? '',
             }}
-            className="z-40 p-6 bg-white rounded-md shadow-lg focus:outline-none"
+            className="z-40 rounded-md bg-white p-6 shadow-lg focus:outline-none"
           >
-            <div className="flex mb-3 items-center">
-              <UserAvatar userFullName={userName} user={user} className="w-14 h-14" />
+            <div className="mb-3 flex items-center">
+              <UserAvatar userFullName={userName} user={user} className="h-14 w-14" />
 
               <div className="ml-4">
                 <span className="block text-lg leading-8 text-gray-900">{userName}</span>
diff --git a/client/src/containers/years/component.tsx b/client/src/containers/years/component.tsx
index eda856ca6e..6c5bf0fe31 100644
--- a/client/src/containers/years/component.tsx
+++ b/client/src/containers/years/component.tsx
@@ -49,6 +49,7 @@ const YearsFilter: React.FC = () => {
     if (initialStartYear) {
       dispatch(setFilter({ id: 'startYear', value: initialStartYear }));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Update filters when data changes
diff --git a/client/src/hooks/admin-regions/index.ts b/client/src/hooks/admin-regions/index.ts
index 2080cba366..2f0fbf24da 100644
--- a/client/src/hooks/admin-regions/index.ts
+++ b/client/src/hooks/admin-regions/index.ts
@@ -48,7 +48,7 @@ export const useAdminRegions = <T = OriginRegion[]>(
       ({
         ...query,
         data: (isError ? DEFAULT_QUERY_OPTIONS.placeholderData : data) as ResponseData,
-      } as ResponseData),
+      }) as ResponseData,
     [query, isError, data],
   );
 };
diff --git a/client/src/hooks/business-units/index.ts b/client/src/hooks/business-units/index.ts
index 3c4facdc10..04620f48d2 100644
--- a/client/src/hooks/business-units/index.ts
+++ b/client/src/hooks/business-units/index.ts
@@ -50,7 +50,7 @@ export function useBusinessUnits(): ResponseData {
       ({
         ...query,
         data: (isError ? DEFAULT_QUERY_OPTIONS.placeholderData : data) as ResponseData,
-      } as ResponseData),
+      }) as ResponseData,
     [query, isError, data],
   );
 }
@@ -78,7 +78,7 @@ export function useBusinessUnitsTrees(params: BusinessUnitsTreesParams): Respons
       ({
         ...query,
         data: (isError ? DEFAULT_QUERY_OPTIONS.placeholderData : data) as ResponseData,
-      } as ResponseData),
+      }) as ResponseData,
     [query, isError, data],
   );
 }
diff --git a/client/src/hooks/sourcing-locations/index.ts b/client/src/hooks/sourcing-locations/index.ts
index 2938ce4514..8cc8c20aad 100644
--- a/client/src/hooks/sourcing-locations/index.ts
+++ b/client/src/hooks/sourcing-locations/index.ts
@@ -96,7 +96,7 @@ export function useSourcingLocationsMaterials(
             ...data,
           })) || [],
         meta: (response as SourcingLocationsMaterialsAPIResponse).meta || {},
-      } as SourcingLocationsMaterialsDataResponse),
+      }) as SourcingLocationsMaterialsDataResponse,
     [query, response],
   );
 }
diff --git a/client/src/layouts/admin/component.tsx b/client/src/layouts/admin/component.tsx
index 7f765fd82a..838686598b 100644
--- a/client/src/layouts/admin/component.tsx
+++ b/client/src/layouts/admin/component.tsx
@@ -34,10 +34,10 @@ const AdminLayout: React.FC<AdminLayoutProps> = ({
     <ApplicationLayout>
       <section
         aria-labelledby="primary-heading"
-        className="flex flex-col w-full h-full overflow-auto"
+        className="flex h-full w-full flex-col overflow-auto"
       >
         <header className="sticky top-0 z-10 bg-navy-600">
-          <div className="px-12 bg-white  rounded-tl-3xl">
+          <div className="rounded-tl-3xl bg-white  px-12">
             <div
               className={classNames('flex items-stretch justify-between', {
                 'border-b border-gray-200': !!searchSection,
@@ -45,7 +45,7 @@ const AdminLayout: React.FC<AdminLayoutProps> = ({
             >
               <h1 className="mt-8 text-left">{title}</h1>
 
-              <nav className="flex mt-11 pb-0.5 space-x-10 text-sm" data-testid="admin-menu-list">
+              <nav className="mt-11 flex space-x-10 pb-0.5 text-sm" data-testid="admin-menu-list">
                 {Object.values(adminTabs).map((tab) => {
                   if (tab.disabled) {
                     return (
diff --git a/client/src/layouts/analysis/component.tsx b/client/src/layouts/analysis/component.tsx
index 555f46d535..4ae5ebf106 100644
--- a/client/src/layouts/analysis/component.tsx
+++ b/client/src/layouts/analysis/component.tsx
@@ -15,11 +15,11 @@ const AnalysisLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
   const { visualizationMode, isSidebarCollapsed } = useAppSelector(analysisUI);
 
   return (
-    <div className="flex w-full h-full">
+    <div className="flex h-full w-full">
       <TitleTemplate title="Analysis" />
 
-      <aside className="relative flex-shrink-0 h-full bg-white rounded-tl-3xl">
-        <div className="absolute right-0 z-40 transform translate-x-1/2 top-6">
+      <aside className="relative h-full flex-shrink-0 rounded-tl-3xl bg-white">
+        <div className="absolute right-0 top-6 z-40 translate-x-1/2 transform">
           <CollapseButton />
         </div>
         <Transition
@@ -31,21 +31,21 @@ const AnalysisLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
           leave="transform transition ease-in duration-100"
           leaveFrom="opacity-100"
           leaveTo="opacity-10"
-          className="h-full px-12 overflow-x-hidden overflow-y-auto w-[410px]"
+          className="h-full w-[410px] overflow-y-auto overflow-x-hidden px-12"
           ref={scrollRef}
         >
           <AnalysisSidebar scrollref={scrollRef} />
         </Transition>
       </aside>
 
-      <section className="relative flex flex-col flex-1 h-screen overflow-auto">
+      <section className="relative flex h-screen flex-1 flex-col overflow-auto">
         <div
           className={classNames(
             {
-              'absolute top-6 left-6 xl:left-12 right-6 z-10': visualizationMode === 'map',
+              'absolute left-6 right-6 top-6 z-10 xl:left-12': visualizationMode === 'map',
               'p-6': visualizationMode !== 'map',
             },
-            'flex flex-wrap gap-2 justify-between',
+            'flex flex-wrap justify-between gap-2',
           )}
         >
           <AnalysisFilters />
diff --git a/client/src/layouts/application/component.tsx b/client/src/layouts/application/component.tsx
index 5c95dc69b5..e7d70265af 100644
--- a/client/src/layouts/application/component.tsx
+++ b/client/src/layouts/application/component.tsx
@@ -32,19 +32,19 @@ const ApplicationLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
   ];
 
   return (
-    <div className="flex h-screen overflow-hidden min-h-[700px] min-w-screen-lg bg-navy-600">
-      <div className="flex flex-col shrink-0 grow-0 w-28">
-        <div className="flex justify-center py-12 shrink-0">
-          <LandgriffonLogo className="shadow-menu rounded-lg" />
+    <div className="min-w-screen-lg flex h-screen min-h-[700px] overflow-hidden bg-navy-600">
+      <div className="flex w-28 shrink-0 grow-0 flex-col">
+        <div className="flex shrink-0 justify-center py-12">
+          <LandgriffonLogo className="rounded-lg shadow-menu" />
         </div>
         <div className="grow">
           <Navigation items={navigationItems} />
         </div>
-        <div className="flex py-12 border-t shrink-0 border-t-black/30">
+        <div className="flex shrink-0 border-t border-t-black/30 py-12">
           <UserDropdown />
         </div>
       </div>
-      <div className="flex-1 w-full min-w-0 bg-gray-100 rounded-tl-3xl">{children}</div>
+      <div className="w-full min-w-0 flex-1 rounded-tl-3xl bg-gray-100">{children}</div>
       <ToastContainer position="bottom-center" />
     </div>
   );
diff --git a/client/src/layouts/application/icons/chart-bar.tsx b/client/src/layouts/application/icons/chart-bar.tsx
index 898594e218..82cff20be4 100644
--- a/client/src/layouts/application/icons/chart-bar.tsx
+++ b/client/src/layouts/application/icons/chart-bar.tsx
@@ -5,7 +5,7 @@ export const ChartBarIconOutline = () => (
     viewBox="0 0 24 24"
     strokeWidth={1.5}
     stroke="currentColor"
-    className="w-6 h-6"
+    className="h-6 w-6"
   >
     <path
       strokeLinecap="round"
@@ -20,7 +20,7 @@ export const ChartBarIconSolid = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
-    className="w-6 h-6"
+    className="h-6 w-6"
   >
     <path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z" />
   </svg>
diff --git a/client/src/layouts/authentication/component.tsx b/client/src/layouts/authentication/component.tsx
index 54261b62c0..eef21d8924 100644
--- a/client/src/layouts/authentication/component.tsx
+++ b/client/src/layouts/authentication/component.tsx
@@ -4,11 +4,11 @@ import React from 'react';
 import ToastContainer from 'containers/toaster';
 
 const AuthenticationLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className="flex flex-col min-h-screen py-12 bg-auth sm:px-6 lg:px-8">
+  <div className="flex min-h-screen flex-col bg-auth py-12 sm:px-6 lg:px-8">
     <div className="mx-auto">
       <Image src="/landgriffon-logo-white.svg" width={196} height={17} alt="Landgriffon logo" />
     </div>
-    <div className="flex flex-col justify-center flex-1 pt-12">{children}</div>
+    <div className="flex flex-1 flex-col justify-center pt-12">{children}</div>
     <ToastContainer position="bottom-center" />
   </div>
 );
diff --git a/client/src/layouts/clean/component.tsx b/client/src/layouts/clean/component.tsx
index 226ed8ba7c..155e23c6d2 100644
--- a/client/src/layouts/clean/component.tsx
+++ b/client/src/layouts/clean/component.tsx
@@ -4,9 +4,9 @@ const CleanLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
   <ApplicationLayout>
     <section
       aria-labelledby="primary-heading"
-      className="flex flex-col flex-1 h-screen min-w-0 bg-navy-400"
+      className="flex h-screen min-w-0 flex-1 flex-col bg-navy-400"
     >
-      <div className="relative h-full p-12 overflow-y-auto bg-white rounded-tl-3xl">{children}</div>
+      <div className="relative h-full overflow-y-auto rounded-tl-3xl bg-white p-12">{children}</div>
     </section>
   </ApplicationLayout>
 );
diff --git a/client/src/pages/404.tsx b/client/src/pages/404.tsx
index 2fde2b4389..f2a5e3cb72 100644
--- a/client/src/pages/404.tsx
+++ b/client/src/pages/404.tsx
@@ -23,7 +23,7 @@ const Page404: React.FC = () => {
   const handleGoBack = useCallback(() => Router.back(), []);
 
   return (
-    <div className="flex justify-center h-screen place-items-center">
+    <div className="flex h-screen place-items-center justify-center">
       <div className="flex-col space-y-44">
         <Logo />
 
@@ -37,9 +37,9 @@ const Page404: React.FC = () => {
           <button
             type="button"
             onClick={handleGoBack}
-            className="flex mt-10 text-green-700 cursor-pointer hover:underline"
+            className="text-green-700 mt-10 flex cursor-pointer hover:underline"
           >
-            <ArrowLeftIcon className="w-4 h-4 mt-1 mr-1" />
+            <ArrowLeftIcon className="mr-1 mt-1 h-4 w-4" />
             Go back
           </button>
         </div>
diff --git a/client/src/pages/_error.tsx b/client/src/pages/_error.tsx
index c1e92b2c1b..a04b0edfe0 100644
--- a/client/src/pages/_error.tsx
+++ b/client/src/pages/_error.tsx
@@ -18,8 +18,8 @@ const Page500: React.FC = () => {
   const handleReload = () => route.reload();
 
   return (
-    <div className="flex justify-center h-screen place-items-center">
-      <div className="flex-col max-w-md space-y-44">
+    <div className="flex h-screen place-items-center justify-center">
+      <div className="max-w-md flex-col space-y-44">
         <Logo />
 
         <div>
diff --git a/client/src/pages/analysis/chart.tsx b/client/src/pages/analysis/chart.tsx
index 03832258e9..5e42b38015 100644
--- a/client/src/pages/analysis/chart.tsx
+++ b/client/src/pages/analysis/chart.tsx
@@ -39,11 +39,11 @@ const ChartPage: NextPageWithLayout = () => {
   });
 
   return (
-    <div className="pl-6 pr-6 my-6 xl:pl-12">
+    <div className="my-6 pl-6 pr-6 xl:pl-12">
       <TitleTemplate title="Analysis chart" />
       {isLoading && (
-        <div className="flex items-center justify-center h-full">
-          <Loading className="w-5 h-5 m-auto text-navy-400" />
+        <div className="flex h-full items-center justify-center">
+          <Loading className="m-auto h-5 w-5 text-navy-400" />
         </div>
       )}
       {!isLoading && activeIndicators?.length > 0 && (
diff --git a/client/src/pages/auth/activate-account/[token].tsx b/client/src/pages/auth/activate-account/[token].tsx
index 00c0b57eb8..598dc4d93e 100644
--- a/client/src/pages/auth/activate-account/[token].tsx
+++ b/client/src/pages/auth/activate-account/[token].tsx
@@ -81,7 +81,7 @@ const ActivateAccount: NextPageWithLayout = () => {
         <title>Activate account - Landgriffon</title>
       </Head>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
+        <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
           <div className="mb-10 text-center">
             <h2 className="my-4 font-bold">Activate your account</h2>
           </div>
diff --git a/client/src/pages/auth/forgot-password.tsx b/client/src/pages/auth/forgot-password.tsx
index 2fbe8e9622..4a904b50f6 100644
--- a/client/src/pages/auth/forgot-password.tsx
+++ b/client/src/pages/auth/forgot-password.tsx
@@ -53,28 +53,28 @@ const SignIn: NextPageWithLayout = () => {
         <title>Forgot Password - Landgriffon</title>
       </Head>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 text-center min-h-[362px] flex justify-between flex-col py-8 bg-white shadow sm:rounded-lg sm:px-10">
+        <div className="flex min-h-[362px] flex-col justify-between bg-white px-4 py-8 text-center shadow sm:rounded-lg sm:px-10">
           {isSuccess ? (
             <>
-              <div className="text-start mb-20">
-                <div className="bg-blue-400 h-[34px] w-[62px]">
-                  <div className="w-0 h-0 border-t-blue-200 border-t-[26px] border-r-[31px] border-r-transparent border-l-[31px] border-l-transparent"></div>
+              <div className="mb-20 text-start">
+                <div className="h-[34px] w-[62px] bg-blue-400">
+                  <div className="h-0 w-0 border-l-[31px] border-r-[31px] border-t-[26px] border-l-transparent border-r-transparent border-t-blue-200"></div>
                 </div>
-                <h2 className="my-6 font-bold text-xl text-gray-900">Check your email</h2>
+                <h2 className="my-6 text-xl font-bold text-gray-900">Check your email</h2>
                 <p className="text-sm font-medium text-gray-600">
                   We&apos;ve sent a email to:
-                  <span className="text-gray-300 block">{email}</span>
+                  <span className="block text-gray-300">{email}</span>
                 </p>
               </div>
 
-              <div className="text-start mt-2">
+              <div className="mt-2 text-start">
                 <p className="text-sm font-medium text-gray-600">
                   Didn&apos;t recieve an email? Check your spam folder!
                 </p>
                 <Button
                   onClick={reset}
                   variant="transparent"
-                  className="font-medium text-navy-400 hover:text-navy-900 pl-0 pr-0"
+                  className="pl-0 pr-0 font-medium text-navy-400 hover:text-navy-900"
                   loading={isLoading}
                 >
                   Click to resend
@@ -85,14 +85,14 @@ const SignIn: NextPageWithLayout = () => {
             <>
               <div className="flex-1">
                 <h2 className="my-4 font-bold">Forgot Password?</h2>
-                <p className="text-sm font-sm text-gray-400">
+                <p className="font-sm text-sm text-gray-400">
                   Enter your email address and we&apos;ll send you a link to reset your password.
                 </p>
               </div>
 
               <form
                 noValidate
-                className="space-y-6 text-left mt-6"
+                className="mt-6 space-y-6 text-left"
                 id="signInForm"
                 onSubmit={handleSubmit(handleSend)}
               >
diff --git a/client/src/pages/auth/reset-password/[token].tsx b/client/src/pages/auth/reset-password/[token].tsx
index 2b3ba72633..3e56d066ef 100644
--- a/client/src/pages/auth/reset-password/[token].tsx
+++ b/client/src/pages/auth/reset-password/[token].tsx
@@ -81,7 +81,7 @@ const ResetPassword: NextPageWithLayout = () => {
         <title>Reset password - Landgriffon</title>
       </Head>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
+        <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
           <div className="mb-10 text-center">
             <h2 className="my-4 font-bold">Reset your password</h2>
           </div>
diff --git a/client/src/pages/auth/signin.tsx b/client/src/pages/auth/signin.tsx
index 72a9a5337f..ddcce85aad 100644
--- a/client/src/pages/auth/signin.tsx
+++ b/client/src/pages/auth/signin.tsx
@@ -73,7 +73,7 @@ const SignIn: NextPageWithLayout = () => {
         <title>Sign in - Landgriffon</title>
       </Head>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
+        <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
           <div className="mb-10 text-center">
             <h2 className="my-4 font-bold">Sign in to your account</h2>
             <p className="text-sm font-medium text-gray-500">
@@ -118,7 +118,7 @@ const SignIn: NextPageWithLayout = () => {
               <div className="text-sm">
                 <Link
                   href="/auth/forgot-password"
-                  className="font-medium text-navy-400 hover:text-navy-800"
+                  className="hover:text-navy-800 font-medium text-navy-400"
                 >
                   Forgot your password?
                 </Link>
diff --git a/client/src/pages/auth/signup.tsx b/client/src/pages/auth/signup.tsx
index 38559924ac..05ad2f4d9a 100644
--- a/client/src/pages/auth/signup.tsx
+++ b/client/src/pages/auth/signup.tsx
@@ -96,7 +96,7 @@ const SignUp: NextPageWithLayout = () => {
         <title>Sign up - Landgriffon</title>
       </Head>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="px-4 py-8 bg-white shadow sm:rounded-lg sm:px-10">
+        <div className="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
           <div className="mb-10 text-center">
             <h2 className="my-4 font-bold">Sign up</h2>
             <p className="text-sm font-medium text-gray-500">
@@ -167,7 +167,7 @@ const SignUp: NextPageWithLayout = () => {
           </form>
         </div>
         <div className="my-4">
-          <p className="text-sm text-center">
+          <p className="text-center text-sm">
             <span className="text-white/50">Do you already have an account? </span>
             <Link href="/auth/signin" className="text-white">
               Sign-in
diff --git a/client/src/pages/data/index.tsx b/client/src/pages/data/index.tsx
index 2f6f48bf57..c6e69d30c8 100644
--- a/client/src/pages/data/index.tsx
+++ b/client/src/pages/data/index.tsx
@@ -40,8 +40,8 @@ const AdminDataPage: React.FC = () => {
       </Head>
 
       {(!isFetched || isLoading) && (
-        <div className="flex items-center justify-center w-full h-full">
-          <Loading className="w-5 h-5 text-navy-400" />
+        <div className="flex h-full w-full items-center justify-center">
+          <Loading className="h-5 w-5 text-navy-400" />
         </div>
       )}
 
diff --git a/client/src/pages/data/scenarios/[scenarioId]/edit.tsx b/client/src/pages/data/scenarios/[scenarioId]/edit.tsx
index 04ae1a9e13..0b78a6a3fa 100644
--- a/client/src/pages/data/scenarios/[scenarioId]/edit.tsx
+++ b/client/src/pages/data/scenarios/[scenarioId]/edit.tsx
@@ -91,7 +91,7 @@ const UpdateScenarioPage: React.FC = () => {
       <Head>
         <title>Edit scenario | Landgriffon</title>
       </Head>
-      <BackLink href="/data/scenarios" className="flex mb-6 xl:sticky xl:top-0">
+      <BackLink href="/data/scenarios" className="mb-6 flex xl:sticky xl:top-0">
         Back to scenarios
       </BackLink>
       <div className="grid grid-cols-12 gap-6">
@@ -106,27 +106,27 @@ const UpdateScenarioPage: React.FC = () => {
             >
               {/* TO-DO: Promote to a specific component */}
               <div>
-                <div className="flex items-baseline mb-4 space-x-1">
+                <div className="mb-4 flex items-baseline space-x-1">
                   <h2>Growth rates</h2>
                   <InfoTooltip info="Growth rates set your expectations of how  purchases of raw materials will change into the future. Add a new rule to get started." />
                 </div>
                 <div className="grid grid-cols-8 gap-4">
                   <div className="col-span-4">
-                    <label className="block mb-2 text-sm">Business unit</label>
+                    <label className="mb-2 block text-sm">Business unit</label>
                     <Select value={null} disabled options={[]} onChange={null} />
                   </div>
                   <div className="col-span-2">
-                    <label className="block mb-2 text-sm">Growth rate (linear)</label>
+                    <label className="mb-2 block text-sm">Growth rate (linear)</label>
                     <Input name="growth-rate" placeholder="0 % per year" disabled />
                   </div>
-                  <div className="flex items-end col-span-2">
-                    <Button disabled variant="secondary" className="w-full h-[40px]">
+                  <div className="col-span-2 flex items-end">
+                    <Button disabled variant="secondary" className="h-[40px] w-full">
                       Add growth rate
                     </Button>
                   </div>
                 </div>
-                <div className="flex flex-wrap gap-2 p-2 mt-4 mb-2 border border-gray-300 rounded-md">
-                  <Badge className="text-sm bg-blue-200 border-blue-400">
+                <div className="mb-2 mt-4 flex flex-wrap gap-2 rounded-md border border-gray-300 p-2">
+                  <Badge className="border-blue-400 bg-blue-200 text-sm">
                     Entire company +1.5%/y
                   </Badge>
                 </div>
@@ -136,7 +136,7 @@ const UpdateScenarioPage: React.FC = () => {
               </div>
 
               <div>
-                <div className="flex items-center justify-between mb-4">
+                <div className="mb-4 flex items-center justify-between">
                   <div className="flex items-baseline space-x-1">
                     <h2 className="flex-1">Interventions</h2>
                     <InfoTooltip info="Each intervention is a specific change in sourcing. Create an intervention to get started." />
@@ -149,9 +149,9 @@ const UpdateScenarioPage: React.FC = () => {
                       icon={
                         <div
                           aria-hidden="true"
-                          className="flex items-center justify-center w-5 h-5 rounded-full bg-navy-400"
+                          className="flex h-5 w-5 items-center justify-center rounded-full bg-navy-400"
                         >
-                          <PlusIcon className="w-4 h-4 text-white" />
+                          <PlusIcon className="h-4 w-4 text-white" />
                         </div>
                       }
                     >
@@ -165,7 +165,7 @@ const UpdateScenarioPage: React.FC = () => {
                     {interventions.map((intervention) => (
                       <div
                         key={intervention.id}
-                        className={classnames('flex items-center p-4 space-x-4 rounded-md', {
+                        className={classnames('flex items-center space-x-4 rounded-md p-4', {
                           'bg-gray-100': intervention.status === LocationStatus.inactive,
                           'bg-orange-50': intervention.status === LocationStatus.active,
                         })}
@@ -182,7 +182,7 @@ const UpdateScenarioPage: React.FC = () => {
                         </div>
                         <Dropdown>
                           <Dropdown.Button>
-                            <DotsVerticalIcon className="w-4 h-4" />
+                            <DotsVerticalIcon className="h-4 w-4" />
                           </Dropdown.Button>
                           <Dropdown.Items>
                             <Dropdown.Item>
@@ -207,7 +207,7 @@ const UpdateScenarioPage: React.FC = () => {
                   </div>
                 )}
                 {!isInterventionsLoading && interventions.length === 0 && (
-                  <div className="px-10 py-16 space-y-6 text-center bg-gray-100 rounded-md">
+                  <div className="space-y-6 rounded-md bg-gray-100 px-10 py-16 text-center">
                     <p className="text-sm">
                       Each scenario should be formed by at least one intervention in your supply
                       chain.
@@ -219,9 +219,9 @@ const UpdateScenarioPage: React.FC = () => {
                       icon={
                         <div
                           aria-hidden="true"
-                          className="flex items-center justify-center w-5 h-5 rounded-full bg-navy-400"
+                          className="flex h-5 w-5 items-center justify-center rounded-full bg-navy-400"
                         >
-                          <PlusIcon className="w-4 h-4 text-white" />
+                          <PlusIcon className="h-4 w-4 text-white" />
                         </div>
                       }
                     >
diff --git a/client/src/pages/data/scenarios/[scenarioId]/interventions/[interventionId]/edit.tsx b/client/src/pages/data/scenarios/[scenarioId]/interventions/[interventionId]/edit.tsx
index 8fc2a08bb3..1b9d77a3c7 100644
--- a/client/src/pages/data/scenarios/[scenarioId]/interventions/[interventionId]/edit.tsx
+++ b/client/src/pages/data/scenarios/[scenarioId]/interventions/[interventionId]/edit.tsx
@@ -65,12 +65,12 @@ const EditInterventionPage: React.FC = () => {
       </Head>
       <BackLink
         href={`/data/scenarios/${query.scenarioId}/edit`}
-        className="flex mb-6 xl:sticky xl:top-0"
+        className="mb-6 flex xl:sticky xl:top-0"
       >
         Back to scenario
       </BackLink>
       <div className="grid grid-cols-12 gap-6">
-        <div className="col-span-10 col-start-2 xl:col-start-3 xl:col-span-8">
+        <div className="col-span-10 col-start-2 xl:col-span-8 xl:col-start-3">
           <h1 data-testid="page-title">Edit intervention</h1>
           {isLoading && <Loading />}
           {!isLoading && data && (
diff --git a/client/src/pages/data/scenarios/[scenarioId]/interventions/new.tsx b/client/src/pages/data/scenarios/[scenarioId]/interventions/new.tsx
index a0a286c463..1251c62b4b 100644
--- a/client/src/pages/data/scenarios/[scenarioId]/interventions/new.tsx
+++ b/client/src/pages/data/scenarios/[scenarioId]/interventions/new.tsx
@@ -46,18 +46,14 @@ const CreateInterventionPage: React.FC = () => {
       </Head>
       <BackLink
         href={`/data/scenarios/${query.scenarioId}/edit`}
-        className="flex mb-6 xl:sticky xl:top-0"
+        className="mb-6 flex xl:sticky xl:top-0"
       >
         Back to scenario
       </BackLink>
       <div className="grid grid-cols-12 gap-6">
-        <div className="col-span-10 col-start-2 xl:col-start-3 xl:col-span-8">
+        <div className="col-span-10 col-start-2 xl:col-span-8 xl:col-start-3">
           <h1 data-testid="page-title">New intervention</h1>
-          <InterventionForm
-            onSubmit={handleSubmit}
-            isCreation
-            isSubmitting={createIntervention.isLoading}
-          />
+          <InterventionForm onSubmit={handleSubmit} isSubmitting={createIntervention.isLoading} />
         </div>
       </div>
     </CleanLayout>
diff --git a/client/src/pages/data/scenarios/index.tsx b/client/src/pages/data/scenarios/index.tsx
index 2aa18b3b5a..dc01fe0c3b 100644
--- a/client/src/pages/data/scenarios/index.tsx
+++ b/client/src/pages/data/scenarios/index.tsx
@@ -131,15 +131,15 @@ const ScenariosAdminPage: React.FC = () => {
       </Head>
 
       {(!isFetched || isLoading) && (
-        <div className="flex items-center justify-center w-full h-full">
-          <Loading className="w-5 h-5 text-navy-400" />
+        <div className="flex h-full w-full items-center justify-center">
+          <Loading className="h-5 w-5 text-navy-400" />
         </div>
       )}
 
       {!thereAreScenarios && (
-        <div className="flex items-center justify-center w-full h-full">
-          <div className="text-center space-y-8">
-            <div className="m-auto w-[125px] h-[125px]">
+        <div className="flex h-full w-full items-center justify-center">
+          <div className="space-y-8 text-center">
+            <div className="m-auto h-[125px] w-[125px]">
               <Lottie animationData={newScenarioAnimation} loop autoplay />
             </div>
             <h3>Add your scenarios</h3>
@@ -150,9 +150,9 @@ const ScenariosAdminPage: React.FC = () => {
               icon={
                 <div
                   aria-hidden="true"
-                  className="flex items-center justify-center w-5 h-5 rounded-full bg-white"
+                  className="flex h-5 w-5 items-center justify-center rounded-full bg-white"
                 >
-                  <PlusIcon className="w-4 h-4 fill-navy-400" />
+                  <PlusIcon className="h-4 w-4 fill-navy-400" />
                 </div>
               }
             >
@@ -162,7 +162,7 @@ const ScenariosAdminPage: React.FC = () => {
         </div>
       )}
 
-      <div className="flex-1 flex  h-full flex-col">
+      <div className="flex h-full  flex-1 flex-col">
         {thereAreScenarios && (
           <div className="mb-6 space-x-4">
             <div className="w-full bg-white"></div>
@@ -172,7 +172,7 @@ const ScenariosAdminPage: React.FC = () => {
                   value={currentSort}
                   options={SORT_OPTIONS}
                   onChange={handleSort}
-                  icon={<SortDescendingIcon className="w-4 h-4" />}
+                  icon={<SortDescendingIcon className="h-4 w-4" />}
                   data-testid="sort-scenario"
                 />
                 <ButtonGroup>
@@ -183,8 +183,8 @@ const ScenariosAdminPage: React.FC = () => {
                       href={{ pathname: '/data/scenarios', query: { ...query, display } }}
                       data-testid={`scenario-display-${display}`}
                     >
-                      {display === 'grid' && <GridIcon className="w-3 h-3" aria-hidden="true" />}
-                      {display === 'list' && <ListIcon className="w-3 h-3" aria-hidden="true" />}
+                      {display === 'grid' && <GridIcon className="h-3 w-3" aria-hidden="true" />}
+                      {display === 'list' && <ListIcon className="h-3 w-3" aria-hidden="true" />}
                     </LinkGroupItem>
                   ))}
                 </ButtonGroup>
@@ -198,9 +198,9 @@ const ScenariosAdminPage: React.FC = () => {
                   icon={
                     <div
                       aria-hidden="true"
-                      className="flex items-center justify-center w-5 h-5 rounded-full bg-navy-400"
+                      className="flex h-5 w-5 items-center justify-center rounded-full bg-navy-400"
                     >
-                      <PlusIcon className="w-4 h-4 text-white" />
+                      <PlusIcon className="h-4 w-4 text-white" />
                     </div>
                   }
                 >
diff --git a/client/src/pages/data/scenarios/new.tsx b/client/src/pages/data/scenarios/new.tsx
index 42c73ee72c..a50b641ef9 100644
--- a/client/src/pages/data/scenarios/new.tsx
+++ b/client/src/pages/data/scenarios/new.tsx
@@ -38,7 +38,7 @@ const CreateScenarioPage: React.FC = () => {
       </Head>
       <BackLink
         href="/data/scenarios"
-        className="flex mb-6 xl:sticky xl:top-0"
+        className="mb-6 flex xl:sticky xl:top-0"
         data-testid="scenario-back-button"
       >
         Back to scenarios
diff --git a/client/src/pages/data/targets.tsx b/client/src/pages/data/targets.tsx
index 5e1991a557..4c1cea0927 100644
--- a/client/src/pages/data/targets.tsx
+++ b/client/src/pages/data/targets.tsx
@@ -49,7 +49,7 @@ const AdminTargetsPage: React.FC = () => {
 
       <div className="flex items-center justify-between">
         <div className="flex items-center py-2 text-xs text-black">
-          <InformationCircleIcon className="w-4 h-4 mr-1 text-black" aria-hidden="true" />
+          <InformationCircleIcon className="mr-1 h-4 w-4 text-black" aria-hidden="true" />
           Target value for each indicator by year
         </div>
         <div className="flex space-x-4">
@@ -65,9 +65,9 @@ const AdminTargetsPage: React.FC = () => {
             icon={
               <div
                 aria-hidden="true"
-                className="flex items-center justify-center w-5 h-5 rounded-full bg-navy-400"
+                className="flex h-5 w-5 items-center justify-center rounded-full bg-navy-400"
               >
-                <PlusIcon className="w-4 h-4 text-white" />
+                <PlusIcon className="h-4 w-4 text-white" />
               </div>
             }
             variant="secondary"
@@ -81,7 +81,7 @@ const AdminTargetsPage: React.FC = () => {
       {!isLoading && !hasData && <NoData />}
 
       {isLoading && (
-        <div className="absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
           <Loading />
         </div>
       )}
diff --git a/client/src/pages/profile/index.tsx b/client/src/pages/profile/index.tsx
index 0137f72994..4f02c2c6bc 100644
--- a/client/src/pages/profile/index.tsx
+++ b/client/src/pages/profile/index.tsx
@@ -12,10 +12,10 @@ const UserProfile: React.FC = () => (
 
     <section
       aria-labelledby="primary-heading"
-      className="flex flex-col flex-1 h-full min-w-0 p-6 overflow-y-auto"
+      className="flex h-full min-w-0 flex-1 flex-col overflow-y-auto p-6"
     >
       <h1 className="text-center md:text-left">Edit Profile</h1>
-      <section className="pt-4 pb-1 mt-4 md:py-1">
+      <section className="mt-4 pb-1 pt-4 md:py-1">
         <UpdateProfileForm />
         <UpdatePasswordForm />
       </section>
diff --git a/client/src/pages/profile/users.tsx b/client/src/pages/profile/users.tsx
index e14068ec5b..9eaccd5944 100644
--- a/client/src/pages/profile/users.tsx
+++ b/client/src/pages/profile/users.tsx
@@ -73,11 +73,11 @@ const AdminUsersPage: React.FC = () => {
           align: 'left',
           enableSorting: true,
           cell: ({ row }) => (
-            <div className="my-6 name flex items-center gap-x-4">
+            <div className="name my-6 flex items-center gap-x-4">
               <UserAvatar
                 userFullName={getUserFullName(row.original, { replaceByEmail: true })}
                 user={row.original}
-                className="w-10 h-10"
+                className="h-10 w-10"
               />
               {getUserFullName(row.original)}
             </div>
@@ -116,7 +116,7 @@ const AdminUsersPage: React.FC = () => {
           size: 100,
           align: 'right',
           cell: ({ row }) => (
-            <div className="pr-6 py-4">
+            <div className="py-4 pr-6">
               <EditUser user={row.original} />
             </div>
           ),
@@ -142,16 +142,16 @@ const AdminUsersPage: React.FC = () => {
       <Head>
         <title>Admin users | Landgriffon</title>
       </Head>
-      <div className="flex-1  h-full flex flex-col">
-        <div className="flex flex-0 justify-end mb-6">
+      <div className="flex  h-full flex-1 flex-col">
+        <div className="flex-0 mb-6 flex justify-end">
           <Button
             variant="primary"
             icon={
               <div
                 aria-hidden="true"
-                className="flex items-center justify-center w-5 h-5 bg-white rounded-full"
+                className="flex h-5 w-5 items-center justify-center rounded-full bg-white"
               >
-                <PlusIcon className="w-4 h-4 text-navy-400" />
+                <PlusIcon className="h-4 w-4 text-navy-400" />
               </div>
             }
             onClick={() => setOpenModal(true)}
@@ -161,7 +161,7 @@ const AdminUsersPage: React.FC = () => {
           </Button>
           <Modal size="narrow" open={openModal} title="Add user" onDismiss={closeModal}>
             <UserForm onSubmit={closeModal}>
-              <div className="w-full flex justify-end mr-2.5">
+              <div className="mr-2.5 flex w-full justify-end">
                 <Button size="base" variant="white" onClick={closeModal}>
                   Cancel
                 </Button>
@@ -169,7 +169,7 @@ const AdminUsersPage: React.FC = () => {
             </UserForm>
           </Modal>
         </div>
-        <div className="flex-1 h-full">
+        <div className="h-full flex-1">
           <Table {...tableProps} isLoading={isFetching || isFetchingUser} />
         </div>
       </div>
diff --git a/client/src/store/index.ts b/client/src/store/index.ts
index 3163629807..10eebd05ac 100644
--- a/client/src/store/index.ts
+++ b/client/src/store/index.ts
@@ -117,7 +117,9 @@ const querySyncMiddleware: Middleware = () => (next) => (action) => {
       const { id, value } = action.payload;
       if (FILTER_QUERY_PARAMS.includes(id)) {
         const { [id]: currentQueryValue, ...restQueryParams } = query;
-        const queryValue = isObject(value) ? (value as any).value : String(value);
+        const queryValue = isObject(value)
+          ? (value as Record<string, unknown>).value
+          : String(value);
         if (currentQueryValue !== value) {
           routerReplace({
             queryName: id,
diff --git a/client/src/store/utils.ts b/client/src/store/utils.ts
index 528606a05f..5014404395 100644
--- a/client/src/store/utils.ts
+++ b/client/src/store/utils.ts
@@ -31,8 +31,8 @@ export const routerReplace = async ({ queryName, queryValue, restQueries }) => {
               [queryName]: ['string', 'number'].includes(typeof queryValue)
                 ? queryValue
                 : checkValidJSON(JSON.stringify(queryValue))
-                ? JSON.stringify(queryValue)
-                : queryValue,
+                  ? JSON.stringify(queryValue)
+                  : queryValue,
             }
           : {}),
       },
diff --git a/client/src/utils/csv-download.ts b/client/src/utils/csv-download.ts
index 3638892e71..bacd1b8faa 100644
--- a/client/src/utils/csv-download.ts
+++ b/client/src/utils/csv-download.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-unresolved
 import { Parser } from '@json2csv/plainjs';
 
 const CSV_FILE_TYPE = 'text/csv;charset=utf-8;';
diff --git a/client/tsconfig.eslint.json b/client/tsconfig.eslint.json
new file mode 100644
index 0000000000..a4abfcf5dc
--- /dev/null
+++ b/client/tsconfig.eslint.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "./.eslintrc.js"]
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 34a9782e1a..8c5e764141 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": "./src",
-    "target": "es5",
+    "target": "ES2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -14,8 +14,26 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ],
+      "react": [ "./node_modules/@types/react" ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["*.d.ts", "src/**/*.ts", "src/**/*.tsx", "tailwind.config.js"],
-  "exclude": ["node_modules", ".storybook", "cypress"]
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.d.ts",
+    "e2e/**/*.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules", ".next", "cypress"]
 }
diff --git a/client/yarn.lock b/client/yarn.lock
index fc7a4dfbed..efe384bf9e 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -937,21 +937,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@json2csv/formatters@npm:^6.1.3":
-  version: 6.1.3
-  resolution: "@json2csv/formatters@npm:6.1.3"
-  checksum: cec4956364f45220f9d109de5c1b193e970bd83e53ce1b912879b878ef93c3e60f63aa31de226e30e3a4d2f344ac895421153a3e4b136d774283134dd117e550
+"@json2csv/formatters@npm:^7.0.4":
+  version: 7.0.4
+  resolution: "@json2csv/formatters@npm:7.0.4"
+  checksum: 3e92f3ad50fed826934d43e239ac34bbfc74f5a2a70ad5f92a9b8ede9528b6d24f00c988a4a6cb3501d8ed8387b804e832a352ffdb1411e97f3bd8b383ea098b
   languageName: node
   linkType: hard
 
-"@json2csv/plainjs@npm:^6.1.3":
-  version: 6.1.3
-  resolution: "@json2csv/plainjs@npm:6.1.3"
+"@json2csv/plainjs@npm:7.0.4":
+  version: 7.0.4
+  resolution: "@json2csv/plainjs@npm:7.0.4"
   dependencies:
-    "@json2csv/formatters": ^6.1.3
-    "@streamparser/json": ^0.0.12
-    lodash.get: ^4.4.2
-  checksum: 2d90b68958cf4390ec332f604b2e8ee87526125ddb4dafe965c0d68cd49d977ac360fade6ba9e4b993d529a4821ef066c5768e7433d3dc71fa996e86b69b7a66
+    "@json2csv/formatters": ^7.0.4
+    "@streamparser/json": ^0.0.17
+  checksum: 2e1f0d236ff9a04c201fb1b6560eb1d98f996403f1b749b284f8832531bdeaa2e80d2a25a42af3e7721407c4bebe70dee7e1d2548a0a3ade1d717811c9f98eef
   languageName: node
   linkType: hard
 
@@ -1505,6 +1504,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pkgr/core@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@pkgr/core@npm:0.1.0"
+  checksum: eeff0e0e517b1ed10eb4c1a8971413a8349bbfdab727dbe7d4085fd94eab95f0c3beb51b9245fef30562849d2a7a119e07ca48c343c8c4ec4e64ee289f50fe5e
+  languageName: node
+  linkType: hard
+
 "@pkgr/utils@npm:^2.3.1":
   version: 2.3.1
   resolution: "@pkgr/utils@npm:2.3.1"
@@ -1597,10 +1603,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@streamparser/json@npm:^0.0.12":
-  version: 0.0.12
-  resolution: "@streamparser/json@npm:0.0.12"
-  checksum: 976975f0169253c6397240434ca8bb87c09be09597b949a8d473be009a6aac6469d5e0df8c8bc47b5a0a9e679ebb48d415f4bcef3169cb1707e45e9296211197
+"@streamparser/json@npm:^0.0.17":
+  version: 0.0.17
+  resolution: "@streamparser/json@npm:0.0.17"
+  checksum: 5e1cb2113d3393b5858a2d32133ba9efed2ea732100f9967c50ec6104bc4d4948546d3263cbdb6b69185a49420dc216fb5f341b38eaad57293d6693357036c46
   languageName: node
   linkType: hard
 
@@ -4179,14 +4185,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-prettier@npm:8.6.0":
-  version: 8.6.0
-  resolution: "eslint-config-prettier@npm:8.6.0"
+"eslint-config-prettier@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "eslint-config-prettier@npm:9.1.0"
   peerDependencies:
     eslint: ">=7.0.0"
   bin:
     eslint-config-prettier: bin/cli.js
-  checksum: ff0d0dfc839a556355422293428637e8d35693de58dabf8638bf0b6529131a109d0b2ade77521aa6e54573bb842d7d9d322e465dd73dd61c7590fa3834c3fa81
+  checksum: 9229b768c879f500ee54ca05925f31b0c0bafff3d9f5521f98ff05127356de78c81deb9365c86a5ec4efa990cb72b74df8612ae15965b14136044c73e1f6a907
   languageName: node
   linkType: hard
 
@@ -4347,18 +4353,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-prettier@npm:4.2.1":
-  version: 4.2.1
-  resolution: "eslint-plugin-prettier@npm:4.2.1"
+"eslint-plugin-prettier@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "eslint-plugin-prettier@npm:5.1.2"
   dependencies:
     prettier-linter-helpers: ^1.0.0
+    synckit: ^0.8.6
   peerDependencies:
-    eslint: ">=7.28.0"
-    prettier: ">=2.0.0"
+    "@types/eslint": ">=8.0.0"
+    eslint: ">=8.0.0"
+    eslint-config-prettier: "*"
+    prettier: ">=3.0.0"
   peerDependenciesMeta:
+    "@types/eslint":
+      optional: true
     eslint-config-prettier:
       optional: true
-  checksum: b9e839d2334ad8ec7a5589c5cb0f219bded260839a857d7a486997f9870e95106aa59b8756ff3f37202085ebab658de382b0267cae44c3a7f0eb0bcc03a4f6d6
+  checksum: ee972ca16c1d05773abe370dcd43c71ffe729ad4eca86752e21be3d4afbc18f04184b4143e9d17869395d534eb8ad685b7589fcdc2706cb734fe17c3c3f4e6cd
   languageName: node
   linkType: hard
 
@@ -6465,7 +6476,7 @@ __metadata:
     "@headlessui/react": v1.7.17
     "@heroicons/react": v1.0.6
     "@hookform/resolvers": 2.8.8
-    "@json2csv/plainjs": ^6.1.3
+    "@json2csv/plainjs": 7.0.4
     "@loaders.gl/core": 3.3.1
     "@luma.gl/constants": 8.5.18
     "@reduxjs/toolkit": 1.8.2
@@ -6495,10 +6506,10 @@ __metadata:
     date-fns: 2.22.1
     eslint: 8.23.1
     eslint-config-next: 13.5.5
-    eslint-config-prettier: 8.6.0
+    eslint-config-prettier: ^9.1.0
     eslint-import-resolver-typescript: 3.6.1
     eslint-plugin-import: ^2.26.0
-    eslint-plugin-prettier: 4.2.1
+    eslint-plugin-prettier: ^5.1.2
     fuse.js: 6.4.6
     istanbul-reports: 3.0.0
     jsona: 1.9.2
@@ -6511,7 +6522,8 @@ __metadata:
     nyc-report-lcov-absolute: 1.0.0
     pino: 8.1.0
     postcss: 8.4.31
-    prettier: 2.8.3
+    prettier: ^3.1.1
+    prettier-plugin-tailwindcss: ^0.5.10
     query-string: 8.1.0
     rc-tree: 5.7.0
     react: 18.2.0
@@ -6655,13 +6667,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.get@npm:^4.4.2":
-  version: 4.4.2
-  resolution: "lodash.get@npm:4.4.2"
-  checksum: e403047ddb03181c9d0e92df9556570e2b67e0f0a930fcbbbd779370972368f5568e914f913e93f3b08f6d492abc71e14d4e9b7a18916c31fa04bd2306efe545
-  languageName: node
-  linkType: hard
-
 "lodash.isplainobject@npm:^4.0.6":
   version: 4.0.6
   resolution: "lodash.isplainobject@npm:4.0.6"
@@ -7952,12 +7957,63 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:2.8.3":
-  version: 2.8.3
-  resolution: "prettier@npm:2.8.3"
+"prettier-plugin-tailwindcss@npm:^0.5.10":
+  version: 0.5.10
+  resolution: "prettier-plugin-tailwindcss@npm:0.5.10"
+  peerDependencies:
+    "@ianvs/prettier-plugin-sort-imports": "*"
+    "@prettier/plugin-pug": "*"
+    "@shopify/prettier-plugin-liquid": "*"
+    "@trivago/prettier-plugin-sort-imports": "*"
+    prettier: ^3.0
+    prettier-plugin-astro: "*"
+    prettier-plugin-css-order: "*"
+    prettier-plugin-import-sort: "*"
+    prettier-plugin-jsdoc: "*"
+    prettier-plugin-marko: "*"
+    prettier-plugin-organize-attributes: "*"
+    prettier-plugin-organize-imports: "*"
+    prettier-plugin-style-order: "*"
+    prettier-plugin-svelte: "*"
+  peerDependenciesMeta:
+    "@ianvs/prettier-plugin-sort-imports":
+      optional: true
+    "@prettier/plugin-pug":
+      optional: true
+    "@shopify/prettier-plugin-liquid":
+      optional: true
+    "@trivago/prettier-plugin-sort-imports":
+      optional: true
+    prettier-plugin-astro:
+      optional: true
+    prettier-plugin-css-order:
+      optional: true
+    prettier-plugin-import-sort:
+      optional: true
+    prettier-plugin-jsdoc:
+      optional: true
+    prettier-plugin-marko:
+      optional: true
+    prettier-plugin-organize-attributes:
+      optional: true
+    prettier-plugin-organize-imports:
+      optional: true
+    prettier-plugin-style-order:
+      optional: true
+    prettier-plugin-svelte:
+      optional: true
+    prettier-plugin-twig-melody:
+      optional: true
+  checksum: 49c534f8cc585b71ae5da1b6cfef26bbb42be3bffd28267876e06e8b99a708e35a0dc4da44b001d0e17174561fe67d541c29b9dde86343d3b7a1696243e82437
+  languageName: node
+  linkType: hard
+
+"prettier@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "prettier@npm:3.1.1"
   bin:
-    prettier: bin-prettier.js
-  checksum: 92f2ceb522d454370e02082aa74ad27388672f7cee8975028b59517c069fe643bdc73e322675c8faf2ff173d7a626d1a6389f26b474000308e793aa25fff46e5
+    prettier: bin/prettier.cjs
+  checksum: e386855e3a1af86a748e16953f168be555ce66d6233f4ba54eb6449b88eb0c6b2ca79441b11eae6d28a7f9a5c96440ce50864b9d5f6356d331d39d6bb66c648e
   languageName: node
   linkType: hard
 
@@ -9555,6 +9611,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synckit@npm:^0.8.6":
+  version: 0.8.8
+  resolution: "synckit@npm:0.8.8"
+  dependencies:
+    "@pkgr/core": ^0.1.0
+    tslib: ^2.6.2
+  checksum: 9ed5d33abb785f5f24e2531efd53b2782ca77abf7912f734d170134552b99001915531be5a50297aa45c5701b5c9041e8762e6cd7a38e41e2461c1e7fccdedf8
+  languageName: node
+  linkType: hard
+
 "tabbable@npm:^6.0.1":
   version: 6.0.1
   resolution: "tabbable@npm:6.0.1"
@@ -9896,6 +9962,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.6.2":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
+  languageName: node
+  linkType: hard
+
 "tunnel-agent@npm:^0.6.0":
   version: 0.6.0
   resolution: "tunnel-agent@npm:0.6.0"