diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 633019c836..dee3cb596c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -116,9 +116,9 @@
         "ts-jest": "29.2.5",
         "type-fest": "4.26.0",
         "typescript": "5.5.4",
-        "vite": "4.5.3",
+        "vite": "5.4.3",
         "vite-plugin-svgr": "4.2.0",
-        "vite-tsconfig-paths": "4.3.2"
+        "vite-tsconfig-paths": "5.0.1"
       },
       "engines": {
         "node": "20",
@@ -3027,6 +3027,230 @@
         }
       }
     },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
+      "integrity": "sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.2.tgz",
+      "integrity": "sha512-xGU5ZQmPlsjQS6tzTTGwMsnKUtu0WVbl0hYpTPauvbRAnmIvpInhJtgjj3mcuJpEiuUw4v1s4BimkdfDWlh7gA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.2.tgz",
+      "integrity": "sha512-99AhQ3/ZMxU7jw34Sq8brzXqWH/bMnf7ZVhvLk9QU2cOepbQSVTns6qoErJmSiAvU3InRqC2RRZ5ovh1KN0d0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.2.tgz",
+      "integrity": "sha512-ZbRaUvw2iN/y37x6dY50D8m2BnDbBjlnMPotDi/qITMJ4sIxNY33HArjikDyakhSv0+ybdUxhWxE6kTI4oX26w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.2.tgz",
+      "integrity": "sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.2.tgz",
+      "integrity": "sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.2.tgz",
+      "integrity": "sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.2.tgz",
+      "integrity": "sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.2.tgz",
+      "integrity": "sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.2.tgz",
+      "integrity": "sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.2.tgz",
+      "integrity": "sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.2.tgz",
+      "integrity": "sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.2.tgz",
+      "integrity": "sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.2.tgz",
+      "integrity": "sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.2.tgz",
+      "integrity": "sha512-5rA4vjlqgrpbFVVHX3qkrCo/fZTj1q0Xxpg+Z7yIo3J2AilW7t2+n6Q8Jrx+4MrYpAnjttTYF8rr7bP46BPzRw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.2.tgz",
+      "integrity": "sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rsuite/icon-font": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz",
@@ -14706,9 +14930,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.41",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
-      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "dev": true,
       "funding": [
         {
@@ -15841,19 +16065,38 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.29.4",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
-      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.2.tgz",
+      "integrity": "sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
       "engines": {
-        "node": ">=14.18.0",
+        "node": ">=18.0.0",
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.21.2",
+        "@rollup/rollup-android-arm64": "4.21.2",
+        "@rollup/rollup-darwin-arm64": "4.21.2",
+        "@rollup/rollup-darwin-x64": "4.21.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.21.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.21.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.21.2",
+        "@rollup/rollup-linux-arm64-musl": "4.21.2",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.21.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.21.2",
+        "@rollup/rollup-linux-x64-gnu": "4.21.2",
+        "@rollup/rollup-linux-x64-musl": "4.21.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.21.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.21.2",
+        "@rollup/rollup-win32-x64-msvc": "4.21.2",
         "fsevents": "~2.3.2"
       }
     },
@@ -18240,33 +18483,34 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
-      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
+      "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.18.10",
-        "postcss": "^8.4.27",
-        "rollup": "^3.27.1"
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": ">= 14",
+        "@types/node": "^18.0.0 || >=20.0.0",
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -18284,6 +18528,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
@@ -18311,9 +18558,9 @@
       }
     },
     "node_modules/vite-tsconfig-paths": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz",
-      "integrity": "sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-5.0.1.tgz",
+      "integrity": "sha512-yqwv+LstU7NwPeNqajZzLEBVpUFU6Dugtb2P84FXuvaoYA+/70l9MHE+GYfYAycVyPSDYZ7mjOFuYBRqlEpTig==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -18330,10 +18577,27 @@
         }
       }
     },
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/vite/node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
       "cpu": [
         "arm"
       ],
@@ -18348,9 +18612,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/android-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
-      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
       "cpu": [
         "arm64"
       ],
@@ -18365,9 +18629,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/android-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
-      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
       "cpu": [
         "x64"
       ],
@@ -18382,9 +18646,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
-      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
       "cpu": [
         "arm64"
       ],
@@ -18399,9 +18663,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
-      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
       "cpu": [
         "x64"
       ],
@@ -18416,9 +18680,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
-      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
       "cpu": [
         "arm64"
       ],
@@ -18433,9 +18697,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
-      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
       "cpu": [
         "x64"
       ],
@@ -18450,9 +18714,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
-      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
       "cpu": [
         "arm"
       ],
@@ -18467,9 +18731,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
-      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
       "cpu": [
         "arm64"
       ],
@@ -18484,9 +18748,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
-      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
       "cpu": [
         "ia32"
       ],
@@ -18501,9 +18765,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
       "cpu": [
         "loong64"
       ],
@@ -18518,9 +18782,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
-      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
       "cpu": [
         "mips64el"
       ],
@@ -18535,9 +18799,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
-      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
       "cpu": [
         "ppc64"
       ],
@@ -18552,9 +18816,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
-      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
       "cpu": [
         "riscv64"
       ],
@@ -18569,9 +18833,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-s390x": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
-      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
       "cpu": [
         "s390x"
       ],
@@ -18586,9 +18850,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/linux-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
-      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
       "cpu": [
         "x64"
       ],
@@ -18603,9 +18867,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
       "cpu": [
         "x64"
       ],
@@ -18620,9 +18884,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
       "cpu": [
         "x64"
       ],
@@ -18637,9 +18901,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/sunos-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
-      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
       "cpu": [
         "x64"
       ],
@@ -18654,9 +18918,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/win32-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
-      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
       "cpu": [
         "arm64"
       ],
@@ -18671,9 +18935,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/win32-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
-      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
       "cpu": [
         "ia32"
       ],
@@ -18688,9 +18952,9 @@
       }
     },
     "node_modules/vite/node_modules/@esbuild/win32-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
-      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "cpu": [
         "x64"
       ],
@@ -18705,9 +18969,9 @@
       }
     },
     "node_modules/vite/node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -18718,28 +18982,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
       }
     },
     "node_modules/w3c-xmlserializer": {
diff --git a/frontend/package.json b/frontend/package.json
index df55f60bea..9f07b694b9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "build": "vite build && npm run bundle-sw",
-    "clean": "rm -Rf ./node-modules/.vite ./node-modules/build",
+    "clean": "rm -Rf ./node-modules/.vite ./build",
     "dev": "import-meta-env-prepare -x ./.env.local.defaults && vite --port 3000",
     "dev-cypress": "FRONTEND_OIDC_ENABLED=false import-meta-env-prepare -u -x ./.env.local.defaults && vite --port 3000",
     "dev-monitorenv": "FRONTEND_MONITORENV_URL=//localhost:9880 import-meta-env-prepare -u -x ./.env.local.defaults && vite --port 3000",
@@ -142,9 +142,9 @@
     "ts-jest": "29.2.5",
     "type-fest": "4.26.0",
     "typescript": "5.5.4",
-    "vite": "4.5.3",
+    "vite": "5.4.3",
     "vite-plugin-svgr": "4.2.0",
-    "vite-tsconfig-paths": "4.3.2"
+    "vite-tsconfig-paths": "5.0.1"
   },
   "overrides": {
     "socket.io": ">=2.5.0",
diff --git a/frontend/src/domain/entities/estimatedPosition.js b/frontend/src/domain/entities/estimatedPosition.js
index a3efe82443..354ccf018b 100644
--- a/frontend/src/domain/entities/estimatedPosition.js
+++ b/frontend/src/domain/entities/estimatedPosition.js
@@ -4,11 +4,11 @@ import Point from 'ol/geom/Point'
 import { transform } from 'ol/proj'
 
 import { LayerProperties } from './layers/constants'
+import { MonitorFishLayer } from './layers/types'
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from './map/constants'
 import { Vessel } from './vessel/vessel'
 import { COLORS } from '../../constants/constants'
 import { theme } from '../../ui/theme'
-import { MonitorFishLayer } from './layers/types'
 
 class EstimatedPosition {
   static colorProperty = 'color'
diff --git a/frontend/src/features/Account/components/Account.tsx b/frontend/src/features/Account/components/Account.tsx
index 743df02766..4b825870bb 100644
--- a/frontend/src/features/Account/components/Account.tsx
+++ b/frontend/src/features/Account/components/Account.tsx
@@ -24,7 +24,7 @@ export function Account() {
 
   return (
     <Wrapper>
-      <MissionMenuBox data-cy="map-account-box" isOpen={rightMapBoxOpened === MapBox.ACCOUNT}>
+      <MissionMenuBox $isOpen={rightMapBoxOpened === MapBox.ACCOUNT} data-cy="map-account-box">
         <StyledContainer>
           <MapMenuDialog.Header>
             <MapMenuDialog.Title>Déconnexion</MapMenuDialog.Title>
diff --git a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx
index c6adc91749..1f01bc076a 100644
--- a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx
+++ b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx
@@ -16,9 +16,9 @@ type AdministrativeZoneType = {
 export function AdministrativeZone({ isFirst, isGrouped, isShown, showOrHideZone, zone }: AdministrativeZoneType) {
   return (
     <Row
+      $isFirst={isFirst}
+      $isGrouped={isGrouped}
       data-cy="administrative-layer-toggle"
-      isFirst={isFirst}
-      isGrouped={isGrouped}
       onClick={() => showOrHideZone(isShown)}
     >
       <LayerName title={zone.name}>{zone.name}</LayerName>
@@ -41,12 +41,12 @@ const LayerName = styled.span`
 `
 
 const Row = styled.span<{
-  isFirst: boolean | undefined
-  isGrouped: boolean | undefined
+  $isFirst: boolean | undefined
+  $isGrouped: boolean | undefined
 }>`
-  margin-top: ${p => (p.isFirst ? 5 : 0)}px;
+  margin-top: ${p => (p.$isFirst ? 5 : 0)}px;
   padding: 4px 0 4px 20px;
-  padding-left: ${p => (p.isGrouped ? '38px' : '20px')};
+  padding-left: ${p => (p.$isGrouped ? '38px' : '20px')};
   line-height: 20px;
   display: block;
   user-select: none;
diff --git a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx
index 467bf85d71..dbf37caaf7 100644
--- a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx
+++ b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx
@@ -21,13 +21,13 @@ export function AdministrativeZonesGroup({ group, showOrHideZone, zones }: Admin
 
   return (
     <Row>
-      <Zone isOpen={isOpen}>
+      <Zone $isOpen={isOpen}>
         <Text onClick={() => setIsOpen(!isOpen)} title={group.name}>
           {group.name}
         </Text>
         <Chevron $isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
       </Zone>
-      <List isOpen={isOpen} length={zones.length} title={group.name.replace(/\s/g, '-')}>
+      <List $isOpen={isOpen} $length={zones.length} title={group.name.replace(/\s/g, '-')}>
         {zones.map((zone, index) => (
           <AdministrativeZone
             key={zone.code}
@@ -68,7 +68,7 @@ const Text = styled.span`
 `
 
 const Zone = styled.span<{
-  isOpen: boolean
+  $isOpen: boolean
 }>`
   width: 100%;
   width: -moz-available;
@@ -77,7 +77,7 @@ const Zone = styled.span<{
   display: flex;
   user-select: none;
   padding-bottom: 2px;
-  ${p => (!p.isOpen ? null : `border-bottom: 1px solid ${COLORS.lightGray};`)}
+  ${p => (!p.$isOpen ? null : `border-bottom: 1px solid ${COLORS.lightGray};`)}
 
   &:hover {
     background: ${THEME.color.blueGray25};
@@ -85,10 +85,10 @@ const Zone = styled.span<{
 `
 
 const List = styled.div<{
-  isOpen: boolean
-  length: number
+  $isOpen: boolean
+  $length: number
 }>`
-  height: ${p => (p.isOpen && p.length ? p.length * 37 + 10 : 0)}px;
+  height: ${p => (p.$isOpen && p.$length ? p.$length * 37 + 10 : 0)}px;
   overflow: hidden;
   transition: 0.2s all;
 `
diff --git a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/index.tsx b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/index.tsx
index d3fd4dcdd5..0cb4038ab5 100644
--- a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/index.tsx
+++ b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/index.tsx
@@ -96,10 +96,10 @@ export function AdministrativeZones({ hideLayersListWhenSearching = false, names
 
   return (
     <>
-      <SectionTitle data-cy="administrative-zones-open" isOpened={isOpened} onClick={onSectionTitleClicked}>
+      <SectionTitle $isOpened={isOpened} data-cy="administrative-zones-open" onClick={onSectionTitleClicked}>
         Zones administratives <ChevronIcon $isOpen={isOpened} />
       </SectionTitle>
-      <List isOpened={isOpened} zonesLength={zonesLength}>
+      <List $isOpened={isOpened} $zonesLength={zonesLength}>
         {zones.zones.map(zone => (
           <Row key={zone.code}>
             <AdministrativeZone
@@ -124,7 +124,7 @@ export function AdministrativeZones({ hideLayersListWhenSearching = false, names
 }
 
 const SectionTitle = styled.div<{
-  isOpened: boolean
+  $isOpened: boolean
 }>`
   height: 30px;
   padding-left: 20px;
@@ -138,8 +138,8 @@ const SectionTitle = styled.div<{
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  border-bottom-left-radius: ${p => (p.isOpened ? '0' : '2px')};
-  border-bottom-right-radius: ${p => (p.isOpened ? '0' : '2px')};
+  border-bottom-left-radius: ${p => (p.$isOpened ? '0' : '2px')};
+  border-bottom-right-radius: ${p => (p.$isOpened ? '0' : '2px')};
 
   .Element-IconBox {
     float: right;
@@ -148,14 +148,14 @@ const SectionTitle = styled.div<{
 `
 
 const List = styled.ul<{
-  isOpened: boolean
-  zonesLength: number
+  $isOpened: boolean
+  $zonesLength: number
 }>`
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   max-height: 48vh;
-  height: ${p => (p.isOpened && p.zonesLength ? 36 * p.zonesLength : 0)}px;
+  height: ${p => (p.$isOpened && p.$zonesLength ? 36 * p.$zonesLength : 0)}px;
   background: ${COLORS.white};
   transition: 0.5s all;
   border-bottom-left-radius: 2px;
diff --git a/frontend/src/features/BaseMap/components/BaseMaps/index.tsx b/frontend/src/features/BaseMap/components/BaseMaps/index.tsx
index 5189ef8ba0..5d85494203 100644
--- a/frontend/src/features/BaseMap/components/BaseMaps/index.tsx
+++ b/frontend/src/features/BaseMap/components/BaseMaps/index.tsx
@@ -52,11 +52,11 @@ export function BaseMaps({ namespace }) {
 
   return (
     <>
-      <Title isShowed={isBaseLayersShowed} onClick={openOrCloseBaseLayers}>
+      <Title $isShowed={isBaseLayersShowed} onClick={openOrCloseBaseLayers}>
         Fonds de carte <ChevronIcon $isOpen={isBaseLayersShowed} />
       </Title>
       <RadioGroup onChange={showLayer} value={selectedBaseLayer}>
-        <List isShowed={isBaseLayersShowed} layersLength={baseLayers.length}>
+        <List $isShowed={isBaseLayersShowed} $layersLength={baseLayers.length}>
           {baseLayers.map(layer => (
             <BaseMap key={layer} layer={layer} onChange={showLayer} selectedBaseLayer={selectedBaseLayer} />
           ))}
@@ -67,7 +67,7 @@ export function BaseMaps({ namespace }) {
 }
 
 const Title = styled.div<{
-  isShowed: boolean
+  $isShowed: boolean
 }>`
   height: 30px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
@@ -81,8 +81,8 @@ const Title = styled.div<{
   user-select: none;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  border-bottom-left-radius: ${p => (p.isShowed ? '0' : '2px')};
-  border-bottom-right-radius: ${p => (p.isShowed ? '0' : '2px')};
+  border-bottom-left-radius: ${p => (p.$isShowed ? '0' : '2px')};
+  border-bottom-right-radius: ${p => (p.$isShowed ? '0' : '2px')};
 
   .Element-IconBox {
     float: right;
@@ -91,13 +91,13 @@ const Title = styled.div<{
 `
 
 const List = styled.ul<{
-  isShowed: boolean
-  layersLength: number
+  $isShowed: boolean
+  $layersLength: number
 }>`
   margin: 0;
   border-radius: 0;
   padding: 0;
-  height: ${p => (p.isShowed && p.layersLength ? 37 * p.layersLength : 0)}px;
+  height: ${p => (p.$isShowed && p.$layersLength ? 37 * p.$layersLength : 0)}px;
   overflow-y: hidden;
   overflow-x: hidden;
   background: ${p => p.theme.color.white};
diff --git a/frontend/src/features/CustomZone/components/CustomZones/index.tsx b/frontend/src/features/CustomZone/components/CustomZones/index.tsx
index 6e93f30df9..462c646dae 100644
--- a/frontend/src/features/CustomZone/components/CustomZones/index.tsx
+++ b/frontend/src/features/CustomZone/components/CustomZones/index.tsx
@@ -79,10 +79,10 @@ export function CustomZones({ hideLayersListWhenSearching = false, namespace }:
 
   return (
     <>
-      <Title data-cy="custom-zones-toggle" isOpened={isOpened} onClick={onSectionTitleClicked}>
+      <Title $isOpened={isOpened} data-cy="custom-zones-toggle" onClick={onSectionTitleClicked}>
         Mes zones importées <ChevronIcon $isOpen={isOpened} />
       </Title>
-      <List isOpened={isOpened} zonesLength={zonesLength}>
+      <List $isOpened={isOpened} $zonesLength={zonesLength}>
         {zoneList.map(zone => (
           <CustomZone
             key={zone.uuid}
@@ -111,7 +111,7 @@ const HowTo = styled.li`
 `
 
 const Title = styled.div<{
-  isOpened: boolean
+  $isOpened: boolean
 }>`
   height: 30px;
   padding-left: 20px;
@@ -125,8 +125,8 @@ const Title = styled.div<{
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  border-bottom-left-radius: ${p => (p.isOpened ? '0' : '2px')};
-  border-bottom-right-radius: ${p => (p.isOpened ? '0' : '2px')};
+  border-bottom-left-radius: ${p => (p.$isOpened ? '0' : '2px')};
+  border-bottom-right-radius: ${p => (p.$isOpened ? '0' : '2px')};
 
   .Element-IconBox {
     float: right;
@@ -135,14 +135,14 @@ const Title = styled.div<{
 `
 
 const List = styled.ul<{
-  isOpened: boolean
-  zonesLength: number
+  $isOpened: boolean
+  $zonesLength: number
 }>`
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   max-height: 48vh;
-  height: ${p => (p.isOpened ? 36 * p.zonesLength + 110 : 0)}px;
+  height: ${p => (p.$isOpened ? 36 * p.$zonesLength + 110 : 0)}px;
   background: ${COLORS.white};
   transition: 0.5s all;
   border-bottom-left-radius: 2px;
diff --git a/frontend/src/features/Healthcheck/components/HealthcheckHeadband.tsx b/frontend/src/features/Healthcheck/components/HealthcheckHeadband.tsx
index b52ee4676e..2257220ced 100644
--- a/frontend/src/features/Healthcheck/components/HealthcheckHeadband.tsx
+++ b/frontend/src/features/Healthcheck/components/HealthcheckHeadband.tsx
@@ -49,7 +49,7 @@ export function HealthcheckHeadband() {
     <>
       {!!healthcheckTextWarning.length && !previewFilteredVesselsMode && (
         <HealthcheckWarnings
-          hasMultipleWarnings={healthcheckTextWarning.length > 1}
+          $hasMultipleWarnings={healthcheckTextWarning.length > 1}
           onClick={() => setAreAllWarningsOpened(!areAllWarningsOpened)}
         >
           <WarningIcon />
@@ -65,9 +65,9 @@ export function HealthcheckHeadband() {
           <MultipleWarningsHeadband
             // eslint-disable-next-line react/no-array-index-key
             key={`${index}-${warning}`}
-            isLast={healthcheckTextWarning.length === index + 1}
-            isOpen={areAllWarningsOpened}
-            topOffset={index + 1}
+            $isLast={healthcheckTextWarning.length === index + 1}
+            $isOpen={areAllWarningsOpened}
+            $topOffset={index + 1}
           >
             {warning}
           </MultipleWarningsHeadband>
@@ -91,7 +91,7 @@ const WarningIcon = styled(WarningSVG)`
 `
 
 const HealthcheckWarnings = styled.div<{
-  hasMultipleWarnings: boolean
+  $hasMultipleWarnings: boolean
 }>`
   font: normal normal bold 16px/22px Marianne;
   background: ${p => p.theme.color.goldenPoppy} 0% 0% no-repeat padding-box;
@@ -101,26 +101,26 @@ const HealthcheckWarnings = styled.div<{
   padding: 13px;
   border-bottom: 2px solid #e3be05;
   color: ${p => p.theme.color.gunMetal};
-  cursor: ${p => (p.hasMultipleWarnings ? 'pointer' : 'unset')};
+  cursor: ${p => (p.$hasMultipleWarnings ? 'pointer' : 'unset')};
 `
 
 const MultipleWarningsHeadband = styled.div<{
-  isLast: boolean
-  isOpen: boolean
-  topOffset: number
+  $isLast: boolean
+  $isOpen: boolean
+  $topOffset: number
 }>`
   position: absolute;
-  top: ${p => (p.isOpen ? p.topOffset * 50 : 0)}px;
+  top: ${p => (p.$isOpen ? p.$topOffset * 50 : 0)}px;
   background: ${p => p.theme.color.goldenPoppy25} 0% 0% no-repeat padding-box;
   width: 100vw;
-  height: ${p => (p.isOpen ? 22 : 0)}px;
+  height: ${p => (p.$isOpen ? 22 : 0)}px;
   text-align: center;
-  padding: ${p => (p.isOpen ? '13px 0 13px 0' : '0 0 0 0')};
+  padding: ${p => (p.$isOpen ? '13px 0 13px 0' : '0 0 0 0')};
   border-bottom: 2px solid #e3be05;
   color: ${p => p.theme.color.gunMetal};
   z-index: 9999;
   font: normal normal bold 16px/22px Marianne;
   transition: all 0.5s;
-  opacity: ${p => (p.isOpen ? 1 : 0)};
-  ${p => p.isLast && `box-shadow: 0px 2px ${p.isOpen ? 4 : 0}px #707785bf;`}
+  opacity: ${p => (p.$isOpen ? 1 : 0)};
+  ${p => p.$isLast && `box-shadow: 0px 2px ${p.$isOpen ? 4 : 0}px #707785bf;`}
 `
diff --git a/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx b/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx
index f1a1dcd1a0..a6c153d979 100644
--- a/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx
+++ b/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx
@@ -127,7 +127,7 @@ export function EditInterestPoint({ close, isOpen }: EditInterestPointProps) {
   }
 
   return (
-    <Wrapper data-cy="save-interest-point" isOpen={isOpen}>
+    <Wrapper $isOpen={isOpen} data-cy="save-interest-point">
       <Header>Créer un point d&apos;intérêt</Header>
       <Body>
         <p>Coordonnées</p>
diff --git a/frontend/src/features/LayersSidebar/components/index.tsx b/frontend/src/features/LayersSidebar/components/index.tsx
index 15064811e2..323a1c326f 100644
--- a/frontend/src/features/LayersSidebar/components/index.tsx
+++ b/frontend/src/features/LayersSidebar/components/index.tsx
@@ -50,20 +50,20 @@ export function LayersSidebar() {
             />
           </SidebarLayersButton>
           <Sidebar
+            $isOpen={leftMapBoxOpened === MapBox.REGULATIONS}
+            $isVisible={leftMapBoxOpened === MapBox.REGULATIONS || regulatoryZoneMetadataPanelIsOpen}
             data-cy="layers-sidebar-box"
-            isOpen={leftMapBoxOpened === MapBox.REGULATIONS}
-            isVisible={leftMapBoxOpened === MapBox.REGULATIONS || regulatoryZoneMetadataPanelIsOpen}
           >
             <RegulationSearch namespace={namespace} />
-            <Layers hasHealthcheckTextWarning={!!healthcheckTextWarning.length}>
+            <Layers $hasHealthcheckTextWarning={!!healthcheckTextWarning.length}>
               <RegulatoryZones namespace={namespace} />
               <CustomZones namespace={namespace} />
               <AdministrativeZones namespace={namespace} />
               <BaseMaps namespace={namespace} />
             </Layers>
             <RegulatoryZoneMetadataShifter
-              isLeftMapBoxOpened={!!leftMapBoxOpened}
-              isOpen={regulatoryZoneMetadataPanelIsOpen}
+              $isLeftMapBoxOpened={!!leftMapBoxOpened}
+              $isOpen={regulatoryZoneMetadataPanelIsOpen}
             >
               <RegulatoryZoneMetadata />
             </RegulatoryZoneMetadataShifter>
@@ -75,31 +75,31 @@ export function LayersSidebar() {
 }
 
 const RegulatoryZoneMetadataShifter = styled.div<{
-  isLeftMapBoxOpened: boolean
-  isOpen: boolean
+  $isLeftMapBoxOpened: boolean
+  $isOpen: boolean
 }>`
   position: absolute;
   margin-left: ${p => {
-    if (!p.isOpen) {
+    if (!p.$isOpen) {
       return -455
     }
 
-    return p.isLeftMapBoxOpened ? 355 : 371
+    return p.$isLeftMapBoxOpened ? 355 : 371
   }}px;
   margin-top: 45px;
   top: 0px;
-  opacity: ${p => (p.isOpen ? 1 : 0)};
+  opacity: ${p => (p.$isOpen ? 1 : 0)};
   background: linear-gradient(${THEME.color.gainsboro} 70%, rgb(0, 0, 0, 0));
   z-index: -1;
   transition: all 0.5s;
 `
 
 const Sidebar = styled(MapComponent)<{
-  isOpen: boolean
-  isVisible: boolean
+  $isOpen: boolean
+  $isVisible: boolean
 }>`
-  margin-left: ${p => (p.isOpen ? 0 : '-418px')};
-  opacity: ${p => (p.isVisible ? 1 : 0)};
+  margin-left: ${p => (p.$isOpen ? 0 : '-418px')};
+  opacity: ${p => (p.$isVisible ? 1 : 0)};
   top: 10px;
   left: 57px;
   z-index: 999;
@@ -110,11 +110,11 @@ const Sidebar = styled(MapComponent)<{
 `
 
 const Layers = styled.div<{
-  hasHealthcheckTextWarning: boolean
+  $hasHealthcheckTextWarning: boolean
 }>`
   margin-top: 5px;
   width: 350px;
-  max-height: calc(100vh - ${p => (p.hasHealthcheckTextWarning ? '210px' : '160px')});
+  max-height: calc(100vh - ${p => (p.$hasHealthcheckTextWarning ? '210px' : '160px')});
 `
 
 const SidebarLayersButton = styled(MapButton)`
diff --git a/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/DEPMessage.tsx b/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/DEPMessage.tsx
index 19813b94a5..d84c7af4fe 100644
--- a/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/DEPMessage.tsx
+++ b/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/DEPMessage.tsx
@@ -44,7 +44,7 @@ export function DEPMessage({ message }: DEPMessageProps) {
             {message.gearOnboard?.length ? (
               message.gearOnboard.map((gear, index) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <Gear key={index} isFirst={index === 0}>
+                <Gear key={index} $isFirst={index === 0}>
                   <SubKey>Engin à bord {index + 1}</SubKey>{' '}
                   <SubValue>{getCodeWithNameOrDash(gear.gear, gear.gearName)}</SubValue>
                   <HorizontalAlign>
@@ -102,11 +102,11 @@ const HorizontalItem = styled.div`
 `
 
 const Gear = styled.div<{
-  isFirst: boolean
+  $isFirst: boolean
 }>`
   width: -moz-available;
   width: -webkit-fill-available;
-  margin-top: ${p => (p.isFirst ? 0 : 5)}px;
+  margin-top: ${p => (p.$isFirst ? 0 : 5)}px;
   line-height: 21px;
 `
 
diff --git a/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx b/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx
index 487b8ab21d..531670f8d9 100644
--- a/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx
+++ b/frontend/src/features/Logbook/components/VesselLogbook/LogbookMessages/messages/LogbookMessage.tsx
@@ -73,14 +73,14 @@ export function LogbookMessage({
   )
 
   return (
-    <Wrapper id={logbookMessage.operationNumber} isFirst={isFirst}>
+    <Wrapper $isFirst={isFirst} id={logbookMessage.operationNumber}>
       <Header>
         {!isManuallyCreated && <LogbookMessageTypeText>{getLogbookMessageType(logbookMessage)}</LogbookMessageTypeText>}
         <LogbookMessageHeaderText
-          data-cy="vessel-fishing-message"
-          isShortcut={
+          $isShortcut={
             logbookMessage.isCorrectedByNewerMessage || logbookMessage.isDeleted || !!logbookMessage.referencedReportId
           }
+          data-cy="vessel-fishing-message"
           title={logbookHeaderTitle}
         >
           {logbookHeaderTitle}
@@ -287,9 +287,9 @@ const Body = styled.div`
 `
 
 const Wrapper = styled.div<{
-  isFirst: boolean
+  $isFirst: boolean
 }>`
-  margin-top: ${p => (p.isFirst ? '5' : '10')}px;
+  margin-top: ${p => (p.$isFirst ? '5' : '10')}px;
   font-size: 13px;
   background: ${p => p.theme.color.white};
   text-align: left;
@@ -304,14 +304,14 @@ const Header = styled.div`
 `
 
 const LogbookMessageHeaderText = styled.span<{
-  isShortcut: boolean
+  $isShortcut: boolean
 }>`
   color: ${p => p.theme.color.white};
   flex-grow: 1;
   font-size: 13px;
   font-weight: 500;
   margin: 5px 5px 5px 5px;
-  /* max-width: ${p => (p.isShortcut ? '185px' : '330px')}; */
+  /* max-width: ${p => (p.$isShortcut ? '185px' : '330px')}; */
   overflow: hidden !important;
   padding: 3px 4px 2px 0;
   text-overflow: ellipsis;
diff --git a/frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/index.tsx b/frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/index.tsx
index 9a04706058..f1c0b43cec 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/index.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/index.tsx
@@ -30,16 +30,16 @@ export function FavoriteVessels() {
   return (
     <Wrapper ref={wrapperRef}>
       <FavoriteVesselsNumber
+        $isOpen={leftMapBoxOpened === MapBox.FAVORITE_VESSELS}
         data-cy="favorite-vessels-number"
         isHidden={previewFilteredVesselsMode}
-        isOpen={leftMapBoxOpened === MapBox.FAVORITE_VESSELS}
       >
         {favorites?.length || 0}
       </FavoriteVesselsNumber>
       <FavoriteVesselsIcon
+        $isOpen={leftMapBoxOpened === MapBox.FAVORITE_VESSELS}
         data-cy="favorite-vessels"
         isHidden={!!previewFilteredVesselsMode}
-        isOpen={leftMapBoxOpened === MapBox.FAVORITE_VESSELS}
         onClick={() =>
           dispatch(
             setLeftMapBoxOpened(leftMapBoxOpened === MapBox.FAVORITE_VESSELS ? undefined : MapBox.FAVORITE_VESSELS)
@@ -50,11 +50,11 @@ export function FavoriteVessels() {
         <FavoritesIcon />
       </FavoriteVesselsIcon>
       <FavoriteVesselsBox
+        $isOpen={leftMapBoxOpened === MapBox.FAVORITE_VESSELS}
         data-cy="favorite-vessels-box"
         isHidden={previewFilteredVesselsMode}
-        isOpen={leftMapBoxOpened === MapBox.FAVORITE_VESSELS}
       >
-        <Header isFirst>Mes navires suivis</Header>
+        <Header $isFirst>Mes navires suivis</Header>
         {favorites?.length ? (
           <List>
             {favorites.map((favoriteVessel, index) => {
@@ -96,7 +96,7 @@ export function FavoriteVessels() {
 }
 
 const FavoriteVesselsNumber = styled(MapComponent)<{
-  isOpen: boolean
+  $isOpen: boolean
 }>`
   display: inline-block;
   position: absolute;
@@ -105,9 +105,9 @@ const FavoriteVesselsNumber = styled(MapComponent)<{
   top: 64px;
   line-height: 14px;
   left: 40px;
-  background-color: ${p => (p.isOpen ? p.theme.color.charcoal : p.theme.color.gainsboro)};
+  background-color: ${p => (p.$isOpen ? p.theme.color.charcoal : p.theme.color.gainsboro)};
   transition: all 0.5s;
-  color: ${p => (p.isOpen ? p.theme.color.white : p.theme.color.gunMetal)};
+  color: ${p => (p.$isOpen ? p.theme.color.white : p.theme.color.gunMetal)};
   z-index: 100;
   padding: 0 4px;
   text-align: center;
@@ -138,24 +138,24 @@ const NoVesselInFavorites = styled.div`
 `
 
 const Header = styled.div<{
-  isFirst: boolean
+  $isFirst: boolean
 }>`
   background: ${COLORS.charcoal};
   color: ${COLORS.gainsboro};
   padding: 9px 0 7px 15px;
   font-size: 16px;
   text-align: left;
-  border-top-left-radius: ${p => (p.isFirst ? '2px' : '0')};
-  border-top-right-radius: ${p => (p.isFirst ? '2px' : '0')};
+  border-top-left-radius: ${p => (p.$isFirst ? '2px' : '0')};
+  border-top-right-radius: ${p => (p.$isFirst ? '2px' : '0')};
 `
 
 const FavoriteVesselsBox = styled(MapComponent)<{
-  isOpen: boolean
+  $isOpen: boolean
 }>`
   width: 305px;
   background: ${p => p.theme.color.white};
-  margin-left: ${p => (p.isOpen ? '45px' : '-420px')};
-  opacity: ${p => (p.isOpen ? '1' : '0')};
+  margin-left: ${p => (p.$isOpen ? '45px' : '-420px')};
+  opacity: ${p => (p.$isOpen ? '1' : '0')};
   top: 73px;
   left: 10px;
   border-radius: 2px;
@@ -165,7 +165,7 @@ const FavoriteVesselsBox = styled(MapComponent)<{
 `
 
 const FavoriteVesselsIcon = styled(MapButton)<{
-  isOpen: boolean
+  $isOpen: boolean
 }>`
   position: absolute;
   display: inline-block;
@@ -175,12 +175,12 @@ const FavoriteVesselsIcon = styled(MapButton)<{
   width: 40px;
   border-radius: 2px;
   left: 10px;
-  background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
+  background: ${p => (p.$isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
   transition: all 0.3s;
 
   &:hover,
   &:focus {
-    background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
+    background: ${p => (p.$isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
   }
 `
 
diff --git a/frontend/src/features/MainWindow/components/MapButtons/MapButton.tsx b/frontend/src/features/MainWindow/components/MapButtons/MapButton.tsx
index a68543f911..2c5ba8c777 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/MapButton.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/MapButton.tsx
@@ -18,7 +18,7 @@ export function MapButton({ children, isHidden, ...props }: MapButtonType) {
      */
     /* eslint-disable react/jsx-props-no-spreading */
     // @ts-ignore
-    <Wrapper hasHealthcheckTextWarning={!!healthcheckTextWarning.length} isHidden={isHidden} {...props}>
+    <Wrapper $hasHealthcheckTextWarning={!!healthcheckTextWarning.length} $isHidden={isHidden} {...props}>
       {children}
     </Wrapper>
     /* eslint-enable react/jsx-props-no-spreading */
@@ -26,9 +26,9 @@ export function MapButton({ children, isHidden, ...props }: MapButtonType) {
 }
 
 const Wrapper = styled.button<{
-  hasHealthcheckTextWarning?: boolean | undefined
-  isHidden?: boolean | undefined
+  $hasHealthcheckTextWarning?: boolean | undefined
+  $isHidden?: boolean | undefined
 }>`
-  margin-top: ${p => (p.hasHealthcheckTextWarning ? 50 : 0)}px;
-  visibility: ${p => (p.isHidden ? 'hidden' : 'visible')};
+  margin-top: ${p => (p.$hasHealthcheckTextWarning ? 50 : 0)}px;
+  visibility: ${p => (p.$isHidden ? 'hidden' : 'visible')};
 `
diff --git a/frontend/src/features/MainWindow/components/MapButtons/Missions/index.tsx b/frontend/src/features/MainWindow/components/MapButtons/Missions/index.tsx
index 07f49dffc8..a558740a0d 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/Missions/index.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/Missions/index.tsx
@@ -48,7 +48,7 @@ export function MissionsMenu() {
 
   return (
     <Wrapper>
-      <MissionMenuBox data-cy="missions-menu-box" isLeftBox isOpen={leftMapBoxOpened === MapBox.MISSIONS}>
+      <MissionMenuBox $isLeftBox $isOpen={leftMapBoxOpened === MapBox.MISSIONS} data-cy="missions-menu-box">
         <MissionsMenuWrapper>
           <MissionsMenuHeader>
             <ToggleMissionMenuButton Icon={Icon.Close} onClick={toggleMissionsMenu} size={Size.NORMAL} />
diff --git a/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/Filters.tsx b/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/Filters.tsx
index 8d4d9105cc..31eb8a0b3c 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/Filters.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/Filters.tsx
@@ -56,7 +56,7 @@ export function Filters() {
   )
 
   return (
-    <VesselFilterBox isOpen={isOpen}>
+    <VesselFilterBox $isOpen={isOpen}>
       <Header $isFirst>Mes filtres</Header>
       {filters.length > 0 ? (
         <FiltersSelectedList>
diff --git a/frontend/src/features/MainWindow/components/MapButtons/VesselLabels/EditVesselLabels.tsx b/frontend/src/features/MainWindow/components/MapButtons/VesselLabels/EditVesselLabels.tsx
index 36954d9c34..960dd02676 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/VesselLabels/EditVesselLabels.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/VesselLabels/EditVesselLabels.tsx
@@ -29,9 +29,9 @@ export function EditVesselLabels() {
   const isOpen = useMemo(() => rightMapBoxOpened === MapBox.VESSEL_LABELS, [rightMapBoxOpened])
 
   return (
-    <Wrapper isOpen={isOpen}>
+    <Wrapper $isOpen={isOpen}>
       <Header>Affichage des étiquettes {isSuperUser ? 'et notes des navires' : ''}</Header>
-      <Content hasMargin>
+      <Content $hasMargin>
         <MultiRadio
           label="Choisir le libellé des étiquettes des navires"
           name="vesselLabelRadio"
diff --git a/frontend/src/features/MainWindow/components/MapButtons/VesselVisibility/EditVesselVisibility.tsx b/frontend/src/features/MainWindow/components/MapButtons/VesselVisibility/EditVesselVisibility.tsx
index b7065cac3d..6c7cc3241f 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/VesselVisibility/EditVesselVisibility.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/VesselVisibility/EditVesselVisibility.tsx
@@ -43,8 +43,8 @@ export function EditVesselVisibility() {
   }
 
   return (
-    <Wrapper isOpen={isOpen}>
-      <Header isFirst>Gérer l&apos;affichage des dernières positions</Header>
+    <Wrapper $isOpen={isOpen}>
+      <Header $isFirst>Gérer l&apos;affichage des dernières positions</Header>
       <Content>
         <LastPositionInfo>
           <VesselHidden /> navires masqués <VesselAlmostHidden /> navires estompés <VesselShowed /> navires normaux
@@ -58,8 +58,8 @@ export function EditVesselVisibility() {
           navires.
         </LastPositionLegend>
       </Content>
-      <Header isFirst={false}>Paramétrer la longueur par défaut des pistes</Header>
-      <Content hasMargin>
+      <Header $isFirst={false}>Paramétrer la longueur par défaut des pistes</Header>
+      <Content $hasMargin>
         <TrackDepthSelection
           defaultValue={defaultVesselTrackDepth}
           label="Afficher depuis"
@@ -141,8 +141,8 @@ const LastPositionInfo = styled.div`
 `
 
 const Wrapper = styled(MapToolBox)<{
-  isHidden?: boolean
-  isOpen: boolean
+  $isHidden?: boolean
+  $isOpen: boolean
 }>`
   top: 172px;
   width: 406px;
diff --git a/frontend/src/features/MainWindow/components/MapButtons/shared/MapToolBox.tsx b/frontend/src/features/MainWindow/components/MapButtons/shared/MapToolBox.tsx
index 6950ce57a2..945f3d08fb 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/shared/MapToolBox.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/shared/MapToolBox.tsx
@@ -4,21 +4,21 @@ import styled from 'styled-components'
 import { MapComponent } from '../../../../commonStyles/MapComponent'
 
 export const MapToolBox = styled(MapComponent)<{
-  isHidden?: boolean
-  isLeftBox?: boolean
-  isOpen: boolean
+  $isHidden?: boolean
+  $isLeftBox?: boolean
+  $isOpen: boolean
 }>`
   background: ${COLORS.white};
   ${p => {
-    if (p.isLeftBox) {
-      return `margin-left: ${p.isOpen ? '45px' : '-420px'};`
+    if (p.$isLeftBox) {
+      return `margin-left: ${p.$isOpen ? '45px' : '-420px'};`
     }
 
-    return `margin-right: ${p.isOpen ? '45px' : '-420px'};`
+    return `margin-right: ${p.$isOpen ? '45px' : '-420px'};`
   }}
-  opacity: ${p => (p.isOpen ? '1' : '0')};
+  opacity: ${p => (p.$isOpen ? '1' : '0')};
   ${p => {
-    if (p.isLeftBox) {
+    if (p.$isLeftBox) {
       return 'left: 10px;'
     }
 
diff --git a/frontend/src/features/MainWindow/components/MapButtons/shared/styles.ts b/frontend/src/features/MainWindow/components/MapButtons/shared/styles.ts
index e7c710d1e5..f83b8fd33b 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/shared/styles.ts
+++ b/frontend/src/features/MainWindow/components/MapButtons/shared/styles.ts
@@ -2,17 +2,17 @@ import { THEME } from '@mtes-mct/monitor-ui'
 import styled from 'styled-components'
 
 export const Content = styled.div<{
-  hasMargin?: boolean
+  $hasMargin?: boolean
 }>`
-  margin: ${p => (p.hasMargin ? 16 : 0)}px;
+  margin: ${p => (p.$hasMargin ? 16 : 0)}px;
 `
 
 export const Header = styled.div<{
-  isFirst?: boolean
+  $isFirst?: boolean
 }>`
   background: ${THEME.color.charcoal};
-  border-top-left-radius: ${p => (p.isFirst ? '2px' : '0')};
-  border-top-right-radius: ${p => (p.isFirst ? '2px' : '0')};
+  border-top-left-radius: ${p => (p.$isFirst ? '2px' : '0')};
+  border-top-right-radius: ${p => (p.$isFirst ? '2px' : '0')};
   color: ${THEME.color.gainsboro};
   font-size: 16px;
   padding: 9px 0 7px 15px;
diff --git a/frontend/src/features/Measurement/components/MeasurementMapButton/CustomCircleRange.tsx b/frontend/src/features/Measurement/components/MeasurementMapButton/CustomCircleRange.tsx
index 6fb4158df6..f122132c06 100644
--- a/frontend/src/features/Measurement/components/MeasurementMapButton/CustomCircleRange.tsx
+++ b/frontend/src/features/Measurement/components/MeasurementMapButton/CustomCircleRange.tsx
@@ -103,7 +103,7 @@ export function CustomCircleRange() {
   }, [dispatch])
 
   return (
-    <Wrapper isOpen={measurementTypeToAdd === MeasurementType.CIRCLE_RANGE}>
+    <Wrapper $isOpen={measurementTypeToAdd === MeasurementType.CIRCLE_RANGE}>
       <Header>Définir une valeur</Header>
       <Body>
         <p>Coordonnées</p>
diff --git a/frontend/src/features/Measurement/components/MeasurementMapButton/index.tsx b/frontend/src/features/Measurement/components/MeasurementMapButton/index.tsx
index bcb936c0b7..52ca8a2a9c 100644
--- a/frontend/src/features/Measurement/components/MeasurementMapButton/index.tsx
+++ b/frontend/src/features/Measurement/components/MeasurementMapButton/index.tsx
@@ -76,7 +76,7 @@ export function MeasurementMapButton() {
       >
         {measurementIcon}
       </MeasurementButton>
-      <MeasurementOptions isOpen={isOpen}>
+      <MeasurementOptions $isOpen={isOpen}>
         <MeasurementItem
           className=".map-menu"
           data-cy="measurement-multiline"
@@ -140,13 +140,13 @@ const Wrapper = styled.div`
 `
 
 const MeasurementOptions = styled(MapComponent)<{
-  isHidden?: boolean
-  isOpen: boolean
+  $isHidden?: boolean
+  $isOpen: boolean
 }>`
   border-radius: 2px;
   display: inline-block;
-  margin-right: ${p => (p.isOpen ? '0px' : '-200px')};
-  opacity: ${p => (p.isOpen ? '1' : '0')};
+  margin-right: ${p => (p.$isOpen ? '0px' : '-200px')};
+  opacity: ${p => (p.$isOpen ? '1' : '0')};
   position: absolute;
   right: 10px;
   top: 316px;
diff --git a/frontend/src/features/Mission/components/MissionOverlay/index.tsx b/frontend/src/features/Mission/components/MissionOverlay/index.tsx
index 80b0bcb8c5..ae9c284eba 100644
--- a/frontend/src/features/Mission/components/MissionOverlay/index.tsx
+++ b/frontend/src/features/Mission/components/MissionOverlay/index.tsx
@@ -118,7 +118,7 @@ export function MissionOverlay({ feature, isSelected = false }) {
   }, [feature, isSelected, selectedMission, setMissionProperties, overlayRef, overlayObjectRef, getNextOverlayPosition])
 
   return (
-    <Wrapper ref={overlayCallback} overlayTopLeftMargin={overlayTopLeftMargin}>
+    <Wrapper ref={overlayCallback} $overlayTopLeftMargin={overlayTopLeftMargin}>
       {missionProperties && (
         <MissionDetails isSelected={isSelected} mission={missionProperties} overlayPosition={overlayPosition} />
       )}
@@ -127,11 +127,11 @@ export function MissionOverlay({ feature, isSelected = false }) {
 }
 
 const Wrapper = styled.div<{
-  overlayTopLeftMargin: [number, number]
+  $overlayTopLeftMargin: [number, number]
 }>`
   position: absolute;
-  top: ${p => p.overlayTopLeftMargin[0]}px;
-  left: ${p => p.overlayTopLeftMargin[1]}px;
+  top: ${p => p.$overlayTopLeftMargin[0]}px;
+  left: ${p => p.$overlayTopLeftMargin[1]}px;
   border-radius: 2px;
   z-index: 1000;
   cursor: grabbing;
diff --git a/frontend/src/features/Mission/components/MissionUnitLabelOverlay/MissionUnitLabel.tsx b/frontend/src/features/Mission/components/MissionUnitLabelOverlay/MissionUnitLabel.tsx
index 51b5a84947..f067ad7aa8 100644
--- a/frontend/src/features/Mission/components/MissionUnitLabelOverlay/MissionUnitLabel.tsx
+++ b/frontend/src/features/Mission/components/MissionUnitLabelOverlay/MissionUnitLabel.tsx
@@ -13,8 +13,8 @@ export function MissionUnitLabel({ color, isDoneAndIncomplete, showed, text }: M
   }
 
   return (
-    <Wrapper color={color}>
-      <ZoneText data-cy="mission-label-text" isWhiteBackground={color === THEME.color.white}>
+    <Wrapper $color={color}>
+      <ZoneText $isWhiteBackground={color === THEME.color.white} data-cy="mission-label-text">
         {text.toUpperCase()}
       </ZoneText>
       {isDoneAndIncomplete && <IncompleteMission title="Mission à compléter" />}
@@ -23,7 +23,7 @@ export function MissionUnitLabel({ color, isDoneAndIncomplete, showed, text }: M
 }
 
 const Wrapper = styled.div<{
-  color: string
+  $color: string
 }>`
   border: 1px solid ${p => p.theme.color.lightGray};
   box-shadow: 0px 2px 3px #70778580;
@@ -32,17 +32,17 @@ const Wrapper = styled.div<{
   height: 20px;
   display: flex;
   border-radius: 1px;
-  background-color: ${p => p.color};
+  background-color: ${p => p.$color};
 `
 
 const ZoneText = styled.span<{
-  isWhiteBackground: boolean
+  $isWhiteBackground: boolean
 }>`
   margin: 0px 6px 3px 6px;
   font-size: 11px;
   font-weight: 500;
   user-select: none;
-  color: ${p => (p.isWhiteBackground ? p.theme.color.slateGray : p.theme.color.white)};
+  color: ${p => (p.$isWhiteBackground ? p.theme.color.slateGray : p.theme.color.white)};
   line-height: 17px;
   max-width: 250px;
   text-overflow: ellipsis;
diff --git a/frontend/src/features/Regulation/components/RegulationSearch/SearchInput.tsx b/frontend/src/features/Regulation/components/RegulationSearch/SearchInput.tsx
index b6832afb8d..5f241778c1 100644
--- a/frontend/src/features/Regulation/components/RegulationSearch/SearchInput.tsx
+++ b/frontend/src/features/Regulation/components/RegulationSearch/SearchInput.tsx
@@ -117,7 +117,7 @@ export function SearchInput() {
           title="Ouvrir la recherche avancée"
         />
       </Search>
-      <AdvancedSearchBox advancedSearchIsOpen={advancedSearchIsOpen}>
+      <AdvancedSearchBox $advancedSearchIsOpen={advancedSearchIsOpen}>
         <SearchByGeometry>
           Définir une zone sur la carte <br />
           {selectedOrSelectingZoneIsSquare ? (
@@ -195,13 +195,13 @@ const PolygonFilterSelected = styled(PolygonFilterSelectedSVG)`
 `
 
 const AdvancedSearchBox = styled.div<{
-  advancedSearchIsOpen: boolean
+  $advancedSearchIsOpen: boolean
 }>`
   background-color: white;
-  border-bottom: ${p => (p.advancedSearchIsOpen ? 1 : 0)}px ${p => p.theme.color.lightGray} solid;
-  height: ${p => (p.advancedSearchIsOpen ? 50 : 0)}px;
+  border-bottom: ${p => (p.$advancedSearchIsOpen ? 1 : 0)}px ${p => p.theme.color.lightGray} solid;
+  height: ${p => (p.$advancedSearchIsOpen ? 50 : 0)}px;
   overflow: hidden;
-  padding: ${p => (p.advancedSearchIsOpen ? 10 : 0)}px 15px;
+  padding: ${p => (p.$advancedSearchIsOpen ? 10 : 0)}px 15px;
   text-align: left;
   transition: 0.5s all;
   width: 320px;
diff --git a/frontend/src/features/Vessel/components/VesselLoader.tsx b/frontend/src/features/Vessel/components/VesselLoader.tsx
index 1d1cf8fc28..df19db20ce 100644
--- a/frontend/src/features/Vessel/components/VesselLoader.tsx
+++ b/frontend/src/features/Vessel/components/VesselLoader.tsx
@@ -61,7 +61,7 @@ export function VesselLoader() {
           <Text data-cy="first-loader">Chargement...</Text>
         </FirstLoadWrapper>
       )}
-      <UpdateWrapper isVesselSidebarOpen={vesselSidebarIsOpen}>
+      <UpdateWrapper $isVesselSidebarOpen={vesselSidebarIsOpen}>
         {(isFetching || loadingPositions) && isAppLoaded && (
           <>
             <FulfillingBouncingCircleSpinner className="update-vessels" color={COLORS.white} size={30} />
@@ -97,11 +97,11 @@ const BigVessel = styled(VesselSVG)`
 `
 
 const UpdateWrapper = styled(MapComponent)<{
-  isVesselSidebarOpen: boolean
+  $isVesselSidebarOpen: boolean
 }>`
   position: absolute;
   top: 30px;
-  right: ${p => (p.isVesselSidebarOpen ? '510px' : '370px')};
+  right: ${p => (p.$isVesselSidebarOpen ? '510px' : '370px')};
   width: 30px;
   transform: translate(-50%, -50%);
 `
diff --git a/frontend/src/features/VesselSidebar/Controls/ControlsSummary.tsx b/frontend/src/features/VesselSidebar/Controls/ControlsSummary.tsx
index 29644261e6..222167736b 100644
--- a/frontend/src/features/VesselSidebar/Controls/ControlsSummary.tsx
+++ b/frontend/src/features/VesselSidebar/Controls/ControlsSummary.tsx
@@ -33,19 +33,19 @@ export function ControlsSummary({ controlsFromDate, lastControls, summary }: Con
           numberOfControlsWithSomeSpeciesSeized={numberOfControlsWithSomeSpeciesSeized}
           numberOfDiversions={numberOfDiversions}
         />
-        <Columns isFirst>
+        <Columns $isFirst>
           <IconColumn>
             <Sea />
           </IconColumn>
           <LastControl field={lastControls.SEA} />
         </Columns>
-        <Columns isFirst={false}>
+        <Columns $isFirst={false}>
           <IconColumn>
             <Icon.Anchor color={theme.color.slateGray} />
           </IconColumn>
           <LastControl field={lastControls.LAND} />
         </Columns>
-        <Columns isFirst={false}>
+        <Columns $isFirst={false}>
           <IconColumn>
             <Caution />
           </IconColumn>
@@ -63,10 +63,10 @@ const Body = styled.div`
 `
 
 const Columns = styled.div<{
-  isFirst: boolean
+  $isFirst: boolean
 }>`
   display: flex;
-  margin-top: ${p => (p.isFirst ? 6 : 12)}px;
+  margin-top: ${p => (p.$isFirst ? 6 : 12)}px;
 `
 
 const IconColumn = styled.div`
diff --git a/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx b/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx
index 2e3791f55d..86382c3025 100644
--- a/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx
+++ b/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx
@@ -45,9 +45,9 @@ export function VesselSidebarHeader() {
   return (
     <>
       <VesselNameOrInput
+        $isRightMenuShrinked={isRightMenuShrinked}
         data-cy="vessel-name"
         isHidden={previewFilteredVesselsMode}
-        isRightMenuShrinked={isRightMenuShrinked}
       >
         {isVesselNameShown && (
           <VesselName focusOnVesselSearchInput={() => dispatch(setIsFocusedOnVesselSearch(true))} />
@@ -68,9 +68,9 @@ export function VesselSidebarHeader() {
         )}
       </VesselNameOrInput>
       <SearchButton
+        $isOpen={!!selectedVessel}
+        $isShrinked={isRightMenuShrinked}
         isHidden={!!previewFilteredVesselsMode}
-        isOpen={!!selectedVessel}
-        isShrinked={isRightMenuShrinked}
         onClick={() => dispatch(setIsFocusedOnVesselSearch(true))}
         onMouseEnter={() => dispatch(expandRightMenu())}
         title="Rechercher un navire"
@@ -82,12 +82,12 @@ export function VesselSidebarHeader() {
 }
 
 const VesselNameOrInput = styled(MapComponent)<{
-  isRightMenuShrinked: boolean
+  $isRightMenuShrinked: boolean
 }>`
   position: absolute;
   display: inline-block;
   top: 10px;
-  right: ${p => (p.isRightMenuShrinked ? 10 : 55)}px;
+  right: ${p => (p.$isRightMenuShrinked ? 10 : 55)}px;
   z-index: 1000;
   color: ${p => p.theme.color.gainsboro};
   text-decoration: none;
@@ -107,8 +107,8 @@ const VesselNameOrInput = styled(MapComponent)<{
 `
 
 const SearchButton = styled(MapButton)<{
-  isOpen: boolean
-  isShrinked: boolean
+  $isOpen: boolean
+  $isShrinked: boolean
 }>`
   width: 40px;
   height: 40px;
@@ -118,15 +118,15 @@ const SearchButton = styled(MapButton)<{
   cursor: pointer;
   border-radius: 2px;
   position: absolute;
-  width: ${p => (p.isShrinked ? 5 : 40)}px;
-  border-radius: ${p => (p.isShrinked ? 1 : 2)}px;
-  right: ${p => (p.isShrinked ? 0 : 10)}px;
-  background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
+  width: ${p => (p.$isShrinked ? 5 : 40)}px;
+  border-radius: ${p => (p.$isShrinked ? 1 : 2)}px;
+  right: ${p => (p.$isShrinked ? 0 : 10)}px;
+  background: ${p => (p.$isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
   transition: all 0.3s;
 
   &:hover,
   &:focus {
-    background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
+    background: ${p => (p.$isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
   }
 `
 
diff --git a/frontend/src/features/commonStyles/MapComponent.tsx b/frontend/src/features/commonStyles/MapComponent.tsx
index 97fab34272..705be1433f 100644
--- a/frontend/src/features/commonStyles/MapComponent.tsx
+++ b/frontend/src/features/commonStyles/MapComponent.tsx
@@ -14,9 +14,9 @@ export function MapComponent({ children, className, isHidden, ...props }: MapCom
 
   return (
     <Wrapper
+      $hasHealthcheckTextWarning={!!healthcheckTextWarning.length}
+      $isHidden={isHidden}
       className={className}
-      hasHealthcheckTextWarning={!!healthcheckTextWarning.length}
-      isHidden={isHidden}
       /* eslint-disable-next-line react/jsx-props-no-spreading */
       {...props}
     >
@@ -26,9 +26,9 @@ export function MapComponent({ children, className, isHidden, ...props }: MapCom
 }
 
 const Wrapper = styled.div<{
-  hasHealthcheckTextWarning?: boolean | undefined
-  isHidden?: boolean | undefined
+  $hasHealthcheckTextWarning?: boolean | undefined
+  $isHidden?: boolean | undefined
 }>`
-  margin-top: ${p => (p.hasHealthcheckTextWarning ? 50 : 0)}px;
-  visibility: ${p => (p.isHidden ? 'hidden' : 'visible')};
+  margin-top: ${p => (p.$hasHealthcheckTextWarning ? 50 : 0)}px;
+  visibility: ${p => (p.$isHidden ? 'hidden' : 'visible')};
 `
diff --git a/frontend/src/features/map/BaseMap.tsx b/frontend/src/features/map/BaseMap.tsx
index 5abe1b33dc..e4d1075ed2 100644
--- a/frontend/src/features/map/BaseMap.tsx
+++ b/frontend/src/features/map/BaseMap.tsx
@@ -17,7 +17,7 @@ import type { VectorLayerWithName } from '../../domain/types/layer'
 import type { Coordinates } from '@mtes-mct/monitor-ui'
 import type { FeatureLike } from 'ol/Feature'
 import type { AnimationOptions } from 'ol/View'
-import type { HTMLProps, PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 
 let lastEventForPointerMove
 let timeoutForPointerMove
@@ -226,8 +226,8 @@ export function BaseMap({
       <MapContainer
         // @ts-ignore
         ref={mapElement}
-        hasHealthcheckTextWarning={!!healthcheckTextWarning.length}
-        isPreviewFilteredVesselsMode={!!previewFilteredVesselsMode}
+        $hasHealthcheckTextWarning={!!healthcheckTextWarning.length}
+        $isPreviewFilteredVesselsMode={!!previewFilteredVesselsMode}
       />
       {showCoordinates && <MapCoordinatesBox coordinates={cursorCoordinates} />}
       {showAttributions && <MapAttributionsBox />}
@@ -241,13 +241,11 @@ const MapWrapper = styled.div`
   flex: 1;
 `
 
-const MapContainer = styled.div<
-  {
-    hasHealthcheckTextWarning: boolean
-    isPreviewFilteredVesselsMode: boolean
-  } & HTMLProps<HTMLDivElement>
->`
-  height: ${p => (p.hasHealthcheckTextWarning || p.isPreviewFilteredVesselsMode ? 'calc(100vh - 50px)' : '100vh')};
+const MapContainer = styled.div<{
+  $hasHealthcheckTextWarning: boolean
+  $isPreviewFilteredVesselsMode: boolean
+}>`
+  height: ${p => (p.$hasHealthcheckTextWarning || p.$isPreviewFilteredVesselsMode ? 'calc(100vh - 50px)' : '100vh')};
   width: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
diff --git a/frontend/src/features/map/overlays/ControlOverlay/index.tsx b/frontend/src/features/map/overlays/ControlOverlay/index.tsx
index 7dc9175783..cb2fdc497c 100644
--- a/frontend/src/features/map/overlays/ControlOverlay/index.tsx
+++ b/frontend/src/features/map/overlays/ControlOverlay/index.tsx
@@ -117,7 +117,7 @@ export function ControlOverlay({ feature, isSelected = false }) {
   }, [feature, isSelected, selectedControl, setControlProperties, overlayRef, overlayObjectRef, getNextOverlayPosition])
 
   return (
-    <Wrapper ref={overlayCallback} overlayTopLeftMargin={overlayTopLeftMargin}>
+    <Wrapper ref={overlayCallback} $overlayTopLeftMargin={overlayTopLeftMargin}>
       {controlProperties && (
         <ControlDetails control={controlProperties} isSelected={isSelected} overlayPosition={overlayPosition} />
       )}
@@ -126,11 +126,11 @@ export function ControlOverlay({ feature, isSelected = false }) {
 }
 
 const Wrapper = styled.div<{
-  overlayTopLeftMargin: [number, number]
+  $overlayTopLeftMargin: [number, number]
 }>`
   position: absolute;
-  top: ${p => p.overlayTopLeftMargin[0]}px;
-  left: ${p => p.overlayTopLeftMargin[1]}px;
+  top: ${p => p.$overlayTopLeftMargin[0]}px;
+  left: ${p => p.$overlayTopLeftMargin[1]}px;
   border-radius: 2px;
   z-index: 1000;
   cursor: grabbing;
diff --git a/frontend/src/features/map/overlays/VesselCardOverlay/index.tsx b/frontend/src/features/map/overlays/VesselCardOverlay/index.tsx
index b8ed0fd5ed..2ed7aee76a 100644
--- a/frontend/src/features/map/overlays/VesselCardOverlay/index.tsx
+++ b/frontend/src/features/map/overlays/VesselCardOverlay/index.tsx
@@ -103,7 +103,7 @@ export function VesselCardOverlay({ feature }) {
   }, [feature, setVesselFeatureToShowOnCard, overlayRef, overlayObjectRef, isSuperUser, getNextOverlayPosition])
 
   return (
-    <VesselCardOverlayComponent ref={overlayCallback} overlayTopLeftMargin={overlayTopLeftMargin}>
+    <VesselCardOverlayComponent ref={overlayCallback} $overlayTopLeftMargin={overlayTopLeftMargin}>
       {vesselFeatureToShowOnCard && (
         <VesselCard
           feature={vesselFeatureToShowOnCard}
@@ -116,11 +116,11 @@ export function VesselCardOverlay({ feature }) {
 }
 
 const VesselCardOverlayComponent = styled.div<{
-  overlayTopLeftMargin: [number, number]
+  $overlayTopLeftMargin: [number, number]
 }>`
   position: absolute;
-  top: ${p => p.overlayTopLeftMargin[0]}px;
-  left: ${p => p.overlayTopLeftMargin[1]}px;
+  top: ${p => p.$overlayTopLeftMargin[0]}px;
+  left: ${p => p.$overlayTopLeftMargin[1]}px;
   width: 387px;
   text-align: left;
   background-color: ${COLORS.gainsboro};