diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1c20cd263f..56c8fe29df 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -54,7 +54,7 @@
         "rsuite": "5.54.0",
         "rsuite-table": "5.19.1",
         "simplify-geojson": "1.0.5",
-        "styled-components": "5.3.11",
+        "styled-components": "6.1.13",
         "timeago.js": "4.0.2",
         "use-debounce": "9.0.4",
         "uuid": "10.0.0",
@@ -129,6 +129,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -155,6 +156,7 @@
       "version": "7.25.4",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
       "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -164,6 +166,7 @@
       "version": "7.25.2",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
       "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -194,6 +197,7 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -214,22 +218,11 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
-      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.25.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
       "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.25.2",
@@ -246,6 +239,7 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -268,6 +262,7 @@
       "version": "7.25.2",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
       "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.24.7",
@@ -286,6 +281,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
       "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -295,6 +291,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
       "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.24.7",
@@ -326,6 +323,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
       "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -335,6 +333,7 @@
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.0.tgz",
       "integrity": "sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.25.0",
@@ -546,6 +545,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.7.tgz",
       "integrity": "sha512-6ddciUPe/mpMnOKv/U+RSd2vvVy+Yw/JfBB0ZHYjEZt9NLHmCUylNYlsbqCCS1Bffjlb0fCwC9Vqz+sBz6PsiQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.24.7"
@@ -967,14 +967,20 @@
       "license": "MIT"
     },
     "node_modules/@emotion/is-prop-valid": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.0.tgz",
-      "integrity": "sha512-SHetuSLvJDzuNbOdtPVbq6yMMMlLoW5Q94uDqJZqy50gcmAjxFkVqmzqSGEFq9gT2iMuIeKV1PXVWmvUhuZLlQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "license": "MIT",
       "dependencies": {
-        "@emotion/memoize": "^0.9.0"
+        "@emotion/memoize": "^0.8.1"
       }
     },
+    "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "license": "MIT"
+    },
     "node_modules/@emotion/memoize": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
@@ -1024,12 +1030,6 @@
       "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
       "license": "MIT"
     },
-    "node_modules/@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "license": "MIT"
-    },
     "node_modules/@emotion/unitless": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
@@ -4261,6 +4261,12 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+      "license": "MIT"
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -5567,22 +5573,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/babel-plugin-styled-components": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
-      "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-module-imports": "^7.22.5",
-        "@babel/plugin-syntax-jsx": "^7.22.5",
-        "lodash": "^4.17.21",
-        "picomatch": "^2.3.1"
-      },
-      "peerDependencies": {
-        "styled-components": ">= 2"
-      }
-    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.1.0.tgz",
@@ -6522,6 +6512,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/cookie": {
@@ -9315,6 +9306,7 @@
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -13013,6 +13005,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "yallist": "^3.0.2"
@@ -13767,7 +13760,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -14570,6 +14562,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -16500,7 +16493,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -16897,24 +16889,23 @@
       }
     },
     "node_modules/styled-components": {
-      "version": "5.3.11",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
-      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/traverse": "^7.4.5",
-        "@emotion/is-prop-valid": "^1.1.0",
-        "@emotion/stylis": "^0.8.4",
-        "@emotion/unitless": "^0.7.4",
-        "babel-plugin-styled-components": ">= 1.12.0",
-        "css-to-react-native": "^3.0.0",
-        "hoist-non-react-statics": "^3.0.0",
-        "shallowequal": "^1.1.0",
-        "supports-color": "^5.5.0"
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 16"
       },
       "funding": {
         "type": "opencollective",
@@ -16922,37 +16913,55 @@
       },
       "peerDependencies": {
         "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0",
-        "react-is": ">= 16.8.0"
+        "react-dom": ">= 16.8.0"
       }
     },
     "node_modules/styled-components/node_modules/@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
       "license": "MIT"
     },
-    "node_modules/styled-components/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/styled-components/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "has-flag": "^3.0.0"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "license": "MIT"
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "license": "0BSD"
+    },
     "node_modules/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -19284,6 +19293,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/yaml": {
diff --git a/frontend/package.json b/frontend/package.json
index b28af5ba69..3074b7bf29 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -80,7 +80,7 @@
     "rsuite": "5.54.0",
     "rsuite-table": "5.19.1",
     "simplify-geojson": "1.0.5",
-    "styled-components": "5.3.11",
+    "styled-components": "6.1.13",
     "timeago.js": "4.0.2",
     "use-debounce": "9.0.4",
     "uuid": "10.0.0",
diff --git a/frontend/src/components/ConfirmationModal.tsx b/frontend/src/components/ConfirmationModal.tsx
index 3cf1429794..157d9a8adf 100644
--- a/frontend/src/components/ConfirmationModal.tsx
+++ b/frontend/src/components/ConfirmationModal.tsx
@@ -64,7 +64,7 @@ const StyledDialog = styled(Dialog)`
       > .Element-Button {
         width: 175px;
 
-        :not(:first-child) {
+        &:not(:first-child) {
           margin-left: 8px;
         }
       }
diff --git a/frontend/src/components/Dialog.tsx b/frontend/src/components/Dialog.tsx
index 6f192601b0..0a88628873 100644
--- a/frontend/src/components/Dialog.tsx
+++ b/frontend/src/components/Dialog.tsx
@@ -58,7 +58,7 @@ const StyledDialog = styled(MuiDialog)<{
       > .Element-Button {
         width: 136px;
 
-        :not(:first-child) {
+        &:not(:first-child) {
           margin-left: 8px;
         }
       }
diff --git a/frontend/src/features/ActivityReport/components/ExportActivityReportsDialog/index.tsx b/frontend/src/features/ActivityReport/components/ExportActivityReportsDialog/index.tsx
index 67f4664c7c..d1873291a4 100644
--- a/frontend/src/features/ActivityReport/components/ExportActivityReportsDialog/index.tsx
+++ b/frontend/src/features/ActivityReport/components/ExportActivityReportsDialog/index.tsx
@@ -154,7 +154,7 @@ const StyledDialogBody = styled(Dialog.Body)`
     > .Field-DatePicker {
       margin-left: 12px;
 
-      :first-child {
+      &:first-child {
         margin-right: 12px;
       }
     }
diff --git a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx
index b4c9f2d177..c6adc91749 100644
--- a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx
+++ b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZone.tsx
@@ -55,7 +55,7 @@ const Row = styled.span<{
   width: -webkit-fill-available;
   width: stretch;
 
-  :hover {
+  &:hover {
     background: ${THEME.color.blueGray25};
   }
 `
diff --git a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx
index 9ea06d5baf..467bf85d71 100644
--- a/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx
+++ b/frontend/src/features/AdministrativeZone/components/AdministrativeZones/AdministrativeZonesGroup.tsx
@@ -79,7 +79,7 @@ const Zone = styled.span<{
   padding-bottom: 2px;
   ${p => (!p.isOpen ? null : `border-bottom: 1px solid ${COLORS.lightGray};`)}
 
-  :hover {
+  &:hover {
     background: ${THEME.color.blueGray25};
   }
 `
diff --git a/frontend/src/features/BackOffice/edit_regulation/gear_regulation/RegulatedGears.jsx b/frontend/src/features/BackOffice/edit_regulation/gear_regulation/RegulatedGears.jsx
index cc58e26d40..e8c4e72877 100644
--- a/frontend/src/features/BackOffice/edit_regulation/gear_regulation/RegulatedGears.jsx
+++ b/frontend/src/features/BackOffice/edit_regulation/gear_regulation/RegulatedGears.jsx
@@ -330,7 +330,7 @@ const DerogationRadio = styled(RadioGroup)`
   ${customRadioGroup}
   padding: 10px !important;
   border: 1.5px solid ${props => props.$isYellow ? props.theme.color.goldenPoppy : props.theme.color.lightGray}!important;
-  :focus {
+  &:focus {
     border: 1.5px solid ${props => props.$isYellow ? props.theme.color.goldenPoppy : props.theme.color.lightGray}!important;
   }
 `
diff --git a/frontend/src/features/BaseMap/components/BaseMaps/BaseMap.tsx b/frontend/src/features/BaseMap/components/BaseMaps/BaseMap.tsx
index 9b212a9e51..4c4a22604b 100644
--- a/frontend/src/features/BaseMap/components/BaseMaps/BaseMap.tsx
+++ b/frontend/src/features/BaseMap/components/BaseMaps/BaseMap.tsx
@@ -40,7 +40,7 @@ const Row = styled.li`
   user-select: none;
   display: flex;
 
-  :hover {
+  &:hover {
     background: ${p => p.theme.color.blueGray25};
   }
 `
diff --git a/frontend/src/features/CustomZone/components/CustomZones/CustomZone.tsx b/frontend/src/features/CustomZone/components/CustomZones/CustomZone.tsx
index 1c1f4b905d..b269805c5d 100644
--- a/frontend/src/features/CustomZone/components/CustomZones/CustomZone.tsx
+++ b/frontend/src/features/CustomZone/components/CustomZones/CustomZone.tsx
@@ -124,7 +124,7 @@ const Wrapper = styled.li`
   width: -webkit-fill-available;
   width: stretch;
 
-  :hover {
+  &:hover {
     background: ${THEME.color.blueGray['25']};
   }
 `
diff --git a/frontend/src/features/Draw/components/MapInteraction.tsx b/frontend/src/features/Draw/components/MapInteraction.tsx
index 4e95440dd9..4972483be3 100644
--- a/frontend/src/features/Draw/components/MapInteraction.tsx
+++ b/frontend/src/features/Draw/components/MapInteraction.tsx
@@ -76,7 +76,7 @@ const Title = styled.h1`
 
 const ButtonGroup = styled.div`
   display: inline-block;
-  & > :not(:last-child) {
+  & > *:not(:last-child) {
     margin-right: 16px;
   }
 `
diff --git a/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx b/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx
index 24f381e651..f1a1dcd1a0 100644
--- a/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx
+++ b/frontend/src/features/InterestPoint/components/InterestPointMapButton/EditInterestPoint.tsx
@@ -195,7 +195,7 @@ const CancelButton = styled.button`
   padding: 5px 12px;
   width: 130px;
 
-  :disabled {
+  &:disabled {
     border: 1px solid ${THEME.color.lightGray};
     color: ${THEME.color.slateGray};
   }
@@ -209,8 +209,8 @@ const OkButton = styled.button`
   padding: 5px 12px;
   width: 130px;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${THEME.color.charcoal};
   }
 `
diff --git a/frontend/src/features/Logbook/components/VesselLogbook/CustomDatesShowedInfo.tsx b/frontend/src/features/Logbook/components/VesselLogbook/CustomDatesShowedInfo.tsx
index a77d4ace85..cdca95d603 100644
--- a/frontend/src/features/Logbook/components/VesselLogbook/CustomDatesShowedInfo.tsx
+++ b/frontend/src/features/Logbook/components/VesselLogbook/CustomDatesShowedInfo.tsx
@@ -49,7 +49,7 @@ const ShowLastPositions = styled.a`
   color: ${p => p.theme.color.gainsboro};
   text-decoration: underline;
 
-  :hover {
+  &:hover {
     color: ${p => p.theme.color.gainsboro};
   }
 `
diff --git a/frontend/src/features/MainWindow/components/MapButtons/AlertsMapButton.tsx b/frontend/src/features/MainWindow/components/MapButtons/AlertsMapButton.tsx
index 9227452acb..998850eed3 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/AlertsMapButton.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/AlertsMapButton.tsx
@@ -54,8 +54,8 @@ const AlertsButton = styled(MapButton)<{
   height: 40px;
   width: 40px;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)};
   }
 `
diff --git a/frontend/src/features/MainWindow/components/MapButtons/BeaconMalfunctionsMapButton.tsx b/frontend/src/features/MainWindow/components/MapButtons/BeaconMalfunctionsMapButton.tsx
index f1024860fa..c1a48d7611 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/BeaconMalfunctionsMapButton.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/BeaconMalfunctionsMapButton.tsx
@@ -54,8 +54,8 @@ const BeaconMalfunctionsButton = styled(MapButton)<{
   height: 40px;
   width: 40px;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)};
   }
 `
diff --git a/frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/index.tsx b/frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/index.tsx
index 7299eef72f..9a04706058 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/index.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/FavoriteVessels/index.tsx
@@ -178,8 +178,8 @@ const FavoriteVesselsIcon = styled(MapButton)<{
   background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
   transition: all 0.3s;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
   }
 `
diff --git a/frontend/src/features/MainWindow/components/MapButtons/Missions/index.tsx b/frontend/src/features/MainWindow/components/MapButtons/Missions/index.tsx
index d8df173695..07f49dffc8 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/Missions/index.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/Missions/index.tsx
@@ -134,10 +134,10 @@ const Section = styled.div`
 const ToggleMissionsButton = styled(IconButton)`
   background: ${COLORS.white};
 
-  :hover {
+  &:hover {
     background: ${COLORS.white};
   }
-  :focus {
+  &:focus {
     background: ${COLORS.white};
   }
 `
diff --git a/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/SaveVesselFiltersModal.tsx b/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/SaveVesselFiltersModal.tsx
index d1b0f78cd5..07dd16d12c 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/SaveVesselFiltersModal.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/VesselFilters/SaveVesselFiltersModal.tsx
@@ -139,7 +139,7 @@ const SaveButton = styled.button`
   color: ${COLORS.gainsboro};
   float: right;
 
-  :hover {
+  &:hover {
     background: ${COLORS.charcoal};
   }
 `
@@ -153,7 +153,7 @@ const CancelButton = styled.button`
   margin: -28px 0px 20px 10px;
   float: right;
 
-  :disabled {
+  &:disabled {
     border: 1px solid ${COLORS.lightGray};
     color: ${COLORS.lightGray};
   }
diff --git a/frontend/src/features/MainWindow/components/MapButtons/shared/MapToolButton.tsx b/frontend/src/features/MainWindow/components/MapButtons/shared/MapToolButton.tsx
index 92c8a828eb..1386be1fd8 100644
--- a/frontend/src/features/MainWindow/components/MapButtons/shared/MapToolButton.tsx
+++ b/frontend/src/features/MainWindow/components/MapButtons/shared/MapToolButton.tsx
@@ -64,8 +64,8 @@ const StyledMapToolButton = styled(MapButton)<{
   background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)};
   transition: all 0.3s;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => (p.$isActive ? p.theme.color.blueGray : p.theme.color.charcoal)};
   }
 `
diff --git a/frontend/src/features/Measurement/components/MeasurementMapButton/CustomCircleRange.tsx b/frontend/src/features/Measurement/components/MeasurementMapButton/CustomCircleRange.tsx
index 2e557ea10a..6fb4158df6 100644
--- a/frontend/src/features/Measurement/components/MeasurementMapButton/CustomCircleRange.tsx
+++ b/frontend/src/features/Measurement/components/MeasurementMapButton/CustomCircleRange.tsx
@@ -145,7 +145,7 @@ const CancelButton = styled.button`
   padding: 5px 12px;
   width: 130px;
 
-  :disabled {
+  &:disabled {
     border: 1px solid ${p => p.theme.color.lightGray};
     color: ${p => p.theme.color.lightGray};
   }
@@ -159,8 +159,8 @@ const OkButton = styled.button`
   padding: 5px 12px;
   width: 130px;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => p.theme.color.charcoal};
   }
 `
diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/InfractionForm.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/InfractionForm.tsx
index 869c68c1da..c44f533623 100644
--- a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/InfractionForm.tsx
+++ b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/InfractionForm.tsx
@@ -99,7 +99,7 @@ const StyledForm = styled(Form)`
   > .Element-Fieldset {
     margin-top: 16px;
 
-    :first-child {
+    &:first-child {
       margin-top: 0px;
     }
   }
diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/index.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/index.tsx
index 88fb444060..97d22b4031 100644
--- a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/index.tsx
+++ b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/FormikMultiInfractionPicker/index.tsx
@@ -230,7 +230,7 @@ const Row = styled.div`
   > legend {
     margin: 12px 0 8px;
 
-    :first-child {
+    &:first-child {
       margin: 0px 0 8px;
     }
   }
diff --git a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselField.tsx b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselField.tsx
index 4e0130bf66..3a94854bba 100644
--- a/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselField.tsx
+++ b/frontend/src/features/Mission/components/MissionForm/ActionForm/shared/VesselField.tsx
@@ -188,7 +188,7 @@ const VesselIdentityBar = styled.div`
   > span {
     font-weight: normal;
 
-    :not(:first-child) {
+    &:not(:first-child) {
       margin-left: 16px;
     }
   }
diff --git a/frontend/src/features/Mission/components/MissionForm/index.tsx b/frontend/src/features/Mission/components/MissionForm/index.tsx
index dd2604910c..dd560b42f0 100644
--- a/frontend/src/features/Mission/components/MissionForm/index.tsx
+++ b/frontend/src/features/Mission/components/MissionForm/index.tsx
@@ -633,7 +633,7 @@ export const Footer = styled.div`
   padding: 16px;
 `
 const DeleteButton = styled(Button)`
-  :not([disabled]) {
+  &:not([disabled]) {
     svg {
       color: ${p => p.theme.color.maximumRed};
     }
diff --git a/frontend/src/features/Mission/components/MissionList/index.tsx b/frontend/src/features/Mission/components/MissionList/index.tsx
index 139532e885..12c56d6710 100644
--- a/frontend/src/features/Mission/components/MissionList/index.tsx
+++ b/frontend/src/features/Mission/components/MissionList/index.tsx
@@ -294,7 +294,7 @@ const TableBodyRow = styled.div.attrs(() => ({
   background-color: white;
   display: flex;
 
-  :hover {
+  &:hover {
     background-color: ${p => p.theme.color.gainsboro};
   }
 `
diff --git a/frontend/src/features/Regulation/components/RegulationSearch/ResultTopic.tsx b/frontend/src/features/Regulation/components/RegulationSearch/ResultTopic.tsx
index 5b0d964d62..faab44cf5b 100644
--- a/frontend/src/features/Regulation/components/RegulationSearch/ResultTopic.tsx
+++ b/frontend/src/features/Regulation/components/RegulationSearch/ResultTopic.tsx
@@ -74,7 +74,7 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({
       return 0
     }
 
-    return regulatoryTopics[regulatoryLayerTopic]?.length || 0
+    return regulatoryTopics[regulatoryLayerTopic]?.length ?? 0
   }, [regulatoryLayerLawType, regulatoryLayerTopic, regulatoryLayerLawTypes])
 
   const areAllZonesAlreadySelected =
@@ -160,7 +160,7 @@ const LayerTopic = styled.div`
   color: ${p => p.theme.color.gunMetal};
   border-bottom: 1px solid ${p => p.theme.color.lightGray};
 
-  :hover {
+  &:hover {
     background: ${p => p.theme.color.blueGray25};
   }
 `
diff --git a/frontend/src/features/Regulation/components/RegulationSearch/ResultZone.tsx b/frontend/src/features/Regulation/components/RegulationSearch/ResultZone.tsx
index 9fb124a597..b6a5226915 100644
--- a/frontend/src/features/Regulation/components/RegulationSearch/ResultZone.tsx
+++ b/frontend/src/features/Regulation/components/RegulationSearch/ResultZone.tsx
@@ -126,7 +126,7 @@ const Zone = styled.span<{
   padding: 6px 0 6px 20px;
   user-select: none;
 
-  :hover {
+  &:hover {
     background: ${p => p.theme.color.blueGray25};
   }
 
diff --git a/frontend/src/features/Regulation/components/RegulatoryZoneMetadata/regulatoryReferences/RegulatoryReferencesDisplayed.tsx b/frontend/src/features/Regulation/components/RegulatoryZoneMetadata/regulatoryReferences/RegulatoryReferencesDisplayed.tsx
index c25480bea1..3a56c56473 100644
--- a/frontend/src/features/Regulation/components/RegulatoryZoneMetadata/regulatoryReferences/RegulatoryReferencesDisplayed.tsx
+++ b/frontend/src/features/Regulation/components/RegulatoryZoneMetadata/regulatoryReferences/RegulatoryReferencesDisplayed.tsx
@@ -7,7 +7,7 @@ import { SectionTitle, Section, List, Label } from '../RegulatoryMetadata.style'
 export function RegulatoryReferencesDisplayed() {
   const regulatory = useMainAppSelector(state => state.regulatory)
 
-  const { regulatoryReferences } = regulatory.regulatoryZoneMetadata || {}
+  const { regulatoryReferences } = regulatory.regulatoryZoneMetadata ?? {}
 
   return (
     <>
@@ -49,10 +49,10 @@ const Reference = styled.li`
 
 export const Link = styled.a`
   // LVHA-order
-  :link,
-  :visited,
-  :hover,
-  :active {
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
     color: ${p => p.theme.color.blueGray};
     font-size: 13px;
     cursor: pointer;
diff --git a/frontend/src/features/Regulation/components/RegulatoryZones/RegulatoryTopic.tsx b/frontend/src/features/Regulation/components/RegulatoryZones/RegulatoryTopic.tsx
index 5cf76bd2ac..1b42c6d400 100644
--- a/frontend/src/features/Regulation/components/RegulatoryZones/RegulatoryTopic.tsx
+++ b/frontend/src/features/Regulation/components/RegulatoryZones/RegulatoryTopic.tsx
@@ -265,7 +265,7 @@ const Topic = styled.span<{
   user-select: none;
   padding-right: 10px;
 
-  :hover {
+  &:hover {
     background: ${p => p.theme.color.blueGray25};
   }
 `
diff --git a/frontend/src/features/Regulation/components/RegulatoryZones/RegulatoryZone.tsx b/frontend/src/features/Regulation/components/RegulatoryZones/RegulatoryZone.tsx
index 75425d65b4..318216a927 100644
--- a/frontend/src/features/Regulation/components/RegulatoryZones/RegulatoryZone.tsx
+++ b/frontend/src/features/Regulation/components/RegulatoryZones/RegulatoryZone.tsx
@@ -192,7 +192,7 @@ const Zone = styled.span<{
   padding: 6px 10px 6px 16px;
   user-select: none;
 
-  :hover {
+  &:hover {
     background: ${p => p.theme.color.blueGray25};
   }
 `
diff --git a/frontend/src/features/SideWindow/Alert/SilencedAlerts/fields/VesselField.tsx b/frontend/src/features/SideWindow/Alert/SilencedAlerts/fields/VesselField.tsx
index c5ea11231e..6c612a29bf 100644
--- a/frontend/src/features/SideWindow/Alert/SilencedAlerts/fields/VesselField.tsx
+++ b/frontend/src/features/SideWindow/Alert/SilencedAlerts/fields/VesselField.tsx
@@ -150,7 +150,7 @@ const VesselIdentityBar = styled.div`
   > span {
     font-weight: normal;
 
-    :not(:first-child) {
+    &:not(:first-child) {
       margin-left: 16px;
     }
   }
diff --git a/frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUp.tsx b/frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUp.tsx
index d418ed1204..a6acb22e78 100644
--- a/frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUp.tsx
+++ b/frontend/src/features/SideWindow/BeaconMalfunctionBoard/BeaconMalfunctionDetailsFollowUp.tsx
@@ -146,7 +146,7 @@ export function BeaconMalfunctionDetailsFollowUp({ beaconMalfunctionWithDetails,
     } else if (textareaRef.current) {
       textareaRef.current.style.height = '50px'
     }
-    setTextareaHeight(parseInt(textareaRef.current?.style?.height.replace('px', '') || '', 10))
+    setTextareaHeight(parseInt(textareaRef.current?.style?.height.replace('px', '') ?? '', 10))
   }, [comment])
 
   const saveComment = () => {
diff --git a/frontend/src/features/SideWindow/Menu/index.tsx b/frontend/src/features/SideWindow/Menu/index.tsx
index fb93e0b677..352461a712 100644
--- a/frontend/src/features/SideWindow/Menu/index.tsx
+++ b/frontend/src/features/SideWindow/Menu/index.tsx
@@ -84,18 +84,18 @@ const MenuButton = styled(IconButton)<{
   color: ${p => (p.selected ? p.theme.color.white : p.theme.color.gainsboro)};
   padding: 22px;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => (p.selected ? p.theme.color.blueGray : 'rgba(255, 255, 255, 0.125)')};
     border: 0;
     border-bottom: solid 1px ${p => p.theme.color.slateGray};
     color: ${p => p.theme.color.white};
   }
 
-  :first-child {
+  &:first-child {
     border-top: solid 1px ${p => p.theme.color.slateGray};
 
-    :hover {
+    &:hover {
       border-top: solid 1px ${p => p.theme.color.slateGray};
     }
   }
diff --git a/frontend/src/features/VesselList/DownloadVesselListModal.tsx b/frontend/src/features/VesselList/DownloadVesselListModal.tsx
index 400e81d409..b988a2f5fd 100644
--- a/frontend/src/features/VesselList/DownloadVesselListModal.tsx
+++ b/frontend/src/features/VesselList/DownloadVesselListModal.tsx
@@ -132,8 +132,8 @@ export function DownloadVesselListModal({ filteredVessels, isOpen, setIsOpen })
         <StyledCheckboxGroup
           inline
           name="checkboxList"
-          onChange={handleChange}
-          value={checkboxState.valuesChecked || []}
+          onChange={handleChange as any}
+          value={checkboxState.valuesChecked}
         >
           <div>
             <Checkbox value={CSVOptions.riskFactor.code}>Note de risque</Checkbox>
@@ -234,7 +234,7 @@ const DownloadButton = styled.button`
   font-size: 13px;
   color: ${COLORS.gainsboro};
 
-  :hover {
+  &:hover {
     background: ${COLORS.charcoal};
   }
 `
diff --git a/frontend/src/features/VesselSearch/VesselSearchResultItem.tsx b/frontend/src/features/VesselSearch/VesselSearchResultItem.tsx
index 5163a022a9..4712928796 100644
--- a/frontend/src/features/VesselSearch/VesselSearchResultItem.tsx
+++ b/frontend/src/features/VesselSearch/VesselSearchResultItem.tsx
@@ -95,7 +95,7 @@ const ListItem = styled.li`
   cursor: pointer;
   border-bottom: ${THEME.color.lightGray} 1px solid;
 
-  :hover {
+  &:hover {
     background: ${THEME.color.gainsboro};
   }
 `
diff --git a/frontend/src/features/VesselSearch/index.tsx b/frontend/src/features/VesselSearch/index.tsx
index 8f132f1233..96a235bc38 100644
--- a/frontend/src/features/VesselSearch/index.tsx
+++ b/frontend/src/features/VesselSearch/index.tsx
@@ -264,12 +264,12 @@ const Input = styled.input<{
   background-position-x: 16px;
   padding-left: ${p => (p.$flagState ? 45 : 16)}px;
 
-  :disabled {
+  &:disabled {
     background-color: var(--rs-input-disabled-bg);
   }
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     border: none;
   }
 `
diff --git a/frontend/src/features/VesselSidebar/Tabs.tsx b/frontend/src/features/VesselSidebar/Tabs.tsx
index 2f0babfeeb..97806ca386 100644
--- a/frontend/src/features/VesselSidebar/Tabs.tsx
+++ b/frontend/src/features/VesselSidebar/Tabs.tsx
@@ -122,14 +122,14 @@ const Tab = styled.button<{
   ${props => (!props.isLast ? `border-right: 1px solid ${COLORS.lightGray};` : null)}
   background: ${props => (props.isActive ? props.theme.color.blueGray : props.theme.color.charcoal)};
   color: ${props => (props.isActive ? props.theme.color.white : props.theme.color.lightGray)};
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     color: ${p => p.theme.color.white};
     background: ${p => p.theme.color.blueYonder};
     ${props => (!props.isLast ? `border-right: 1px solid ${COLORS.lightGray};` : null)}
   }
 
-  :active {
+  &:active {
     color: ${p => p.theme.color.white};
     background: ${p => p.theme.color.blueGray};
     ${props => (!props.isLast ? `border-right: 1px solid ${COLORS.lightGray};` : null)}
diff --git a/frontend/src/features/VesselSidebar/VesselSidebarHeader/VesselName.tsx b/frontend/src/features/VesselSidebar/VesselSidebarHeader/VesselName.tsx
index 9baee91266..112d00fb8c 100644
--- a/frontend/src/features/VesselSidebar/VesselSidebarHeader/VesselName.tsx
+++ b/frontend/src/features/VesselSidebar/VesselSidebarHeader/VesselName.tsx
@@ -66,7 +66,7 @@ export function VesselName({ focusOnVesselSearchInput }) {
         data-cy="sidebar-add-vessel-to-favorites"
         onClick={addOrRemoveToFavorites}
       />
-      <Name title={selectedVesselIdentity?.vesselName || undefined}>{getVesselName(selectedVesselIdentity)}</Name>
+      <Name title={selectedVesselIdentity?.vesselName ?? undefined}>{getVesselName(selectedVesselIdentity)}</Name>
       <CloseIcon data-cy="vessel-search-selected-vessel-close-title" onClick={close} />
     </Wrapper>
   )
@@ -100,8 +100,8 @@ const Wrapper = styled.div<{
   cursor: text;
   transition: width 0.7s ease forwards;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     border-bottom: 1px ${p => p.theme.color.lightGray} solid;
   }
 `
diff --git a/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx b/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx
index ece0a279c5..2e3791f55d 100644
--- a/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx
+++ b/frontend/src/features/VesselSidebar/VesselSidebarHeader/index.tsx
@@ -100,8 +100,8 @@ const VesselNameOrInput = styled(MapComponent)<{
   margin-right: auto;
   transition: all 0.3s;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background-color: none;
   }
 `
@@ -124,8 +124,8 @@ const SearchButton = styled(MapButton)<{
   background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
   transition: all 0.3s;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => (p.isOpen ? p.theme.color.blueGray : p.theme.color.charcoal)};
   }
 `
diff --git a/frontend/src/features/VesselSidebar/actions/TrackRequest/ExportTrack.tsx b/frontend/src/features/VesselSidebar/actions/TrackRequest/ExportTrack.tsx
index eaacf8bf62..20b7c3468b 100644
--- a/frontend/src/features/VesselSidebar/actions/TrackRequest/ExportTrack.tsx
+++ b/frontend/src/features/VesselSidebar/actions/TrackRequest/ExportTrack.tsx
@@ -127,8 +127,8 @@ const ExportTrackButton = styled(PrimaryButton)<{
   padding: 4px 8px 8px 4px;
   text-align: left;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     background: ${p => p.theme.color.charcoal};
   }
 `
diff --git a/frontend/src/features/commonComponents/StyledModalHeader.tsx b/frontend/src/features/commonComponents/StyledModalHeader.tsx
index 17616e4d99..31f940c2f3 100644
--- a/frontend/src/features/commonComponents/StyledModalHeader.tsx
+++ b/frontend/src/features/commonComponents/StyledModalHeader.tsx
@@ -20,7 +20,7 @@ export const StyledModalHeader = styled(Modal.Header)`
     margin: unset;
     padding: unset;
 
-    :hover {
+    &:hover {
       right: 13px;
     }
   }
diff --git a/frontend/src/features/commonStyles/Buttons.style.jsx b/frontend/src/features/commonStyles/Buttons.style.jsx
index b99ded15a5..7a519bf2d9 100644
--- a/frontend/src/features/commonStyles/Buttons.style.jsx
+++ b/frontend/src/features/commonStyles/Buttons.style.jsx
@@ -5,10 +5,10 @@ export const basePrimaryButton = css`
   background: ${COLORS.charcoal};
   color: ${COLORS.gainsboro};
   ${props => props.width ? `width: ${props.width};` : ''}
-  :hover, :focus {
+  &:hover, &:focus {
     background: ${COLORS.charcoal};
   }
-  :disabled {
+  &:disabled {
     border: 1px solid ${COLORS.lightGray};
     background: ${COLORS.lightGray};
     color: ${COLORS.white};
@@ -19,7 +19,7 @@ const baseSecondaryButton = css`
   border: 1px solid ${COLORS.charcoal};
   color: ${COLORS.gunMetal};
   ${props => props.width ? `width: ${props.width};` : ''}
-  :disabled {
+  &:disabled {
     border: 1px solid ${COLORS.lightGray};
     color: ${COLORS.slateGray};
   }
diff --git a/frontend/src/features/map/controls/MapAttributionsBox.tsx b/frontend/src/features/map/controls/MapAttributionsBox.tsx
index 94a53f258e..e2d7db54e6 100644
--- a/frontend/src/features/map/controls/MapAttributionsBox.tsx
+++ b/frontend/src/features/map/controls/MapAttributionsBox.tsx
@@ -34,7 +34,7 @@ const Button = styled.button`
   width: 25px !important;
   height: 25px !important;
 
-  :hover {
+  &:hover {
     background: none;
   }
 `
diff --git a/frontend/src/features/map/overlays/MapMenuOverlay.jsx b/frontend/src/features/map/overlays/MapMenuOverlay.jsx
index 3d925ecae2..70d63cae40 100644
--- a/frontend/src/features/map/overlays/MapMenuOverlay.jsx
+++ b/frontend/src/features/map/overlays/MapMenuOverlay.jsx
@@ -239,7 +239,7 @@ const Menu = styled.span`
   width: 100%;
   border-top: ${props => (props.withTopLine ? 1 : 0)}px solid ${COLORS.lightGray};
 
-  :hover {
+  &:hover {
     background: ${COLORS.gainsboro};
   }
 `
diff --git a/frontend/src/ui/card-table/FilterTableInput.tsx b/frontend/src/ui/card-table/FilterTableInput.tsx
index 5c05bf7093..808d48881b 100644
--- a/frontend/src/ui/card-table/FilterTableInput.tsx
+++ b/frontend/src/ui/card-table/FilterTableInput.tsx
@@ -19,8 +19,8 @@ export const FilterTableInput = styled.input<{
   background-position: bottom 3px right 5px;
   background-repeat: no-repeat;
 
-  :hover,
-  :focus {
+  &:hover,
+  &:focus {
     border-bottom: 1px ${COLORS.lightGray} solid;
   }
 `