diff --git a/.eslintrc.js b/.eslintrc.js
index 9d68cf3abd23e188c8e6ce7686ef59070cd408d9..e4f98e3f85ee456e7f9ef51c9f4b6b5befbc403c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,10 +11,10 @@ module.exports = {
     {
       extends: [
         'plugin:jsdoc/recommended',
+        // Functional rule configurations, for best best practices and code correctness
         'plugin:@typescript-eslint/recommended',
-        'plugin:@typescript-eslint/eslint-recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
-        // This enables a lot of type checking
-        // 'plugin:@typescript-eslint/recommended-requiring-type-checking', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+        // Stylistic rule configurations, for consistent and predictable syntax usage
+        'plugin:@typescript-eslint/stylistic-type-checked',
       ],
       files: ['**/*.{ts,tsx}'],
       parserOptions: {
@@ -31,6 +31,12 @@ module.exports = {
         '@typescript-eslint/no-var-requires': 'off',
         '@typescript-eslint/no-unnecessary-type-assertion': 'error',
 
+        // causes a build error and has a lot of effects on components
+        '@typescript-eslint/prefer-nullish-coalescing': 'off',
+
+        // better readability by naming keys
+        '@typescript-eslint/consistent-indexed-object-style': 'off',
+
         // JSDOC extends overrides: disable some of extends rules
         // JSdoc is not always needed
         'jsdoc/require-jsdoc': 0,
@@ -45,6 +51,10 @@ module.exports = {
 
         // a11y label fix, nesting is enough
         'jsx-a11y/label-has-associated-control': 0,
+
+        // Note: you must disable the base rule as it can report incorrect errors
+        'require-await': 'off',
+        '@typescript-eslint/require-await': 'error',
       },
     },
     {
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index f1c5d0d86033ebce080e2a382f14f3af7b25472a..74e272157b154466ca441a6fd4a7b1f5555a551c 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,5 +1,5 @@
 default:
-  image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/node:16.19.1-alpine
+  image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/node:20-alpine
   services:
     - name: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/docker:20.10.9-dind
       alias: docker
@@ -46,6 +46,7 @@ build_stack:
 
 sonarqube-mr:
   stage: quality
+  needs: []
   only:
     - merge_requests
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/sonarsource/sonar-scanner-cli:4
@@ -71,6 +72,7 @@ sonarqube-mr:
 
 sonarqube:
   stage: quality
+  needs: []
   only:
     - dev
   image: ${CI_DEPENDENCY_PROXY_DIRECT_GROUP_IMAGE_PREFIX}/sonarsource/sonar-scanner-cli:4
@@ -96,6 +98,7 @@ sonarqube:
 
 test:
   stage: test
+  needs: []
   before_script:
     - apk add git
   script:
@@ -114,6 +117,7 @@ test:
 
 build-dev:
   stage: build
+  needs: []
   before_script:
     - apk add git
     - apk add bash
@@ -131,6 +135,7 @@ build-dev:
 
 build-prod:
   stage: build
+  needs: []
   before_script:
     - apk add git
     - apk add bash
@@ -151,11 +156,11 @@ deploy-dev:
     - apk add bash
   script:
     - yarn
-    - git config --global user.name build-pipeline
-    - git config --global user.email "$GIT_USER"
-    - git config --global user.password "$GIT_PWD"
-    - git config user.email "$GIT_USER"
-    - git remote set-url origin https://"$GIT_USER":"$GIT_PWD"@forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo.git
+    - git config --global user.name build-token
+    - git config --global user.email build-token
+    - git config --global user.password "$BUILD_TOKEN"
+    - git config user.email build-token
+    - git remote set-url origin https://build-token:"$BUILD_TOKEN"@forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo.git
     - git config --global credential.helper store
     - yarn deploy-dev
   only:
@@ -173,11 +178,11 @@ deploy-test:
   script:
     - yarn
     - ls build
-    - git config --global user.name build-pipeline
-    - git config --global user.email "$GIT_USER"
-    - git config --global user.password "$GIT_PWD"
-    - git config user.email "$GIT_USER"
-    - git remote set-url origin https://"$GIT_USER":"$GIT_PWD"@forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo.git
+    - git config --global user.name build-token
+    - git config --global user.email build-token
+    - git config --global user.password "$BUILD_TOKEN"
+    - git config user.email build-token
+    - git remote set-url origin https://build-token:"$BUILD_TOKEN"@forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo.git
     - git config --global credential.helper store
     - yarn deploy-test
   only:
diff --git a/.gitlab/merge_request_templates/[QA] Ecolyo.md b/.gitlab/merge_request_templates/[QA] Ecolyo.md
index 823451ecf3b71a6b4c972cd4cec38940a3f53b5a..7ed6971bfe60d29ae6168c2150a81df3df1bb8eb 100644
--- a/.gitlab/merge_request_templates/[QA] Ecolyo.md	
+++ b/.gitlab/merge_request_templates/[QA] Ecolyo.md	
@@ -4,63 +4,75 @@
 
 # Cahier de recette pour la version _x.x.x_
 
-## Tests de non régression sur la [Nouvelle instance](https://ecolyo.ecolyo-x-x.cozy.self-data.alpha.grandlyon.com/#/)
+## Tests de non régression sur la [Nouvelle instance](https://ecolyoXX-ecolyo.cozy.self-data.alpha.grandlyon.com/#/)
 
-1. **Onboarding**
-   - [ ] Le chargement de l'application fonctionne correctement
-   - [ ] La modal "Vous êtes à mis chemin" est présentée
-   - [ ] Les CGU sont demandées
+### 1. Onboarding
 
-2. **Comportement sans connecteur connecté**
-   - [ ] La page conso pousse à la connexion
-   - [ ] La page analyse pousse à la connexion
+- [ ] Le chargement de l'application fonctionne correctement
+- [ ] La modal "Vous êtes à mis chemin" est présentée
+- [ ] Les CGU sont demandées
 
-3. **Lancement des connecteurs**
-   - [ ] SGE
-   - [ ] EPGL
-   - [ ] GRDF
+### 2. **Comportement sans connecteur connecté**
 
-4. **Page Défis**
-   - [ ] L'utilisateur peut lancer le 1er défi
+- [ ] La page conso pousse à la connexion
+- [ ] La page analyse pousse à la connexion
 
-5. **Conso**
+### 3. **Lancement des connecteurs**
 
-**Premier lancement**
-   - [ ] La profondeur de données va jusqu'à 1 an dans la conso pour les pas de temps journalier
-   - [ ] La profondeur de données à la 1/2h (elec) va jusqu'à 1 semaine 
+- [ ] SGE
+- [ ] EPGL
+- [ ] GRDF
 
-**Le lendemain**
-   - [ ] La profondeur de données va jusqu'à 3 ans pour l'élec et le gaz
-   - [ ] La profondeur de données va jusqu'à novembre 2022 pour l'eau (à cause du passage en régie)
-   - [ ] La profondeur de données à la 1/2h (elec) va jusqu'à 1 mois
+### 4. **Page Défis**
 
-6. **Analyse** 
-   - [ ] La profondeur de données va jusqu'à 3 mois antérieur
-   - [ ] Les modules de l'analyse sont tous fonctionnels (à l'exception du special elec qui devra être déclenché par un service)
-   - [ ] Le module de comparaison des températures s'affiche dans la comparaison annuelle et mensuelle
+- [ ] L'utilisateur peut lancer le 1er défi
 
-7. **Page Astuces**
-   - [ ] Chargement de la base des astuces dans "Toutes"
-   - [ ] Lancement du module du choix des astuces Ok
-   - [ ] Le profil raccourci est proposé si le profil complet n'est pas renseigné
+### 5. **Conso**
 
-8. **Page Options**
-   - [ ] L'utilisateur est inscrit par défaut à la newsletter
-   - [ ] L'utilisateur n'est pas exclu des statistiques d'usage MATOMO
-   - [ ] L'accès au SAU est fonctionnel
-   - [ ] Les mentions légales et les CGU sont accessibles
-   - [ ] La page d'accessibilité est accessible
-   - [ ] L'export de données fonctionne quand un connecteur est connecté
+#### Premier lancement
 
+- [ ] La profondeur de données va jusqu'à 1 an dans la conso pour les pas de temps journalier
+- [ ] La profondeur de données à la 1/2h (elec) va jusqu'à 1 semaine
 
-9. **Icône raccourci**
-   - [ ] L'utilisateur peut ajouter l'application en raccourci (pwa android)
-   - [ ] L'utilisateur peut ajouter l'application en raccourci (pwa iPhone)
+#### Le lendemain
 
-10. **Autres**
-   - [ ] Les informations de navigation remontent dans le matomo recette
-      > 💡 Aller consulter des écogestes en particulier, repérer leurs id et vérifier sur matomo dans "Comportement / Pages"
+- [ ] La profondeur de données va jusqu'à 3 ans pour l'élec et le gaz
+- [ ] La profondeur de données va jusqu'à novembre 2022 pour l'eau (à cause du passage en régie)
+- [ ] La profondeur de données à la 1/2h (elec) va jusqu'à 1 mois
 
+#### Prix
+
+- [ ] modifier le prix d'un des fluides (électricité ou gaz) dans le backoffice de recette, relancer les connecteurs pour mettre à jour les prix (= correspond à la quantité multipliée par le prix modifié). Attention à ne modifier des prix que sur la dernière année.
+
+### 6. **Analyse**
+
+- [ ] La profondeur de données va jusqu'à 3 mois antérieur
+- [ ] Les modules de l'analyse sont tous fonctionnels (à l'exception du special elec qui devra être déclenché par un service)
+- [ ] Le module de comparaison des températures s'affiche dans la comparaison annuelle et mensuelle
+
+### 7. **Page Astuces**
+
+- [ ] Chargement de la base des astuces dans "Toutes"
+- [ ] Lancement du module du choix des astuces Ok
+- [ ] Le profil raccourci est proposé si le profil complet n'est pas renseigné
+
+### 8. **Page Options**
+
+- [ ] L'utilisateur n'est pas inscrit par défaut à la newsletter
+- [ ] L'utilisateur n'est pas exclu des statistiques d'usage MATOMO
+- [ ] L'accès au SAU est fonctionnel
+- [ ] Les mentions légales et les CGU sont accessibles
+- [ ] La page d'accessibilité est accessible
+- [ ] L'export de données fonctionne quand un connecteur est connecté
+
+### 9. **Icône raccourci**
+
+- [ ] L'utilisateur peut ajouter l'application en raccourci (pwa android)
+- [ ] L'utilisateur peut ajouter l'application en raccourci (pwa iPhone)
+
+### 10. **Autres**
+
+- [ ] Les informations de navigation remontent dans le matomo recette > 💡 Aller consulter des écogestes en particulier, repérer leurs id et vérifier sur matomo dans "Comportement / Pages"
 
 ## Tests des nouvelles fonctionnalités
 
@@ -68,9 +80,9 @@
 
 - [ ] ...
 
-## Migrations [Instance historique](https://ecolyo.ecolyodemo.cozy.self-data.alpha.grandlyon.com)
+## Migrations [Instance historique](https://ecolyodemo-ecolyo.cozy.self-data.alpha.grandlyon.com)
 
-_Si une migration était nécessaire, vérifier quand c'est possible qu'elle a bien eu lieu_
+📝 _Si une migration était nécessaire, vérifier quand c'est possible qu'elle a bien eu lieu_
 
 - [ ] ...
 
diff --git a/.node-version b/.node-version
new file mode 100644
index 0000000000000000000000000000000000000000..2edeafb09db0093bae6ff060e2dcd2166f5c9387
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+20
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 05e6af9250fc4b9fd60692e0446e043566a187b8..7f58d87e15f258f564f44481ab3c81266743b713 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -54,6 +54,7 @@
     "barchart",
     "camelcase",
     "cicid",
+    "coeff",
     "CONSO",
     "cozybar",
     "cozycloud",
@@ -88,6 +89,7 @@
     "energical",
     "Epgl",
     "esnext",
+    "Explo",
     "firstname",
     "fluidchart",
     "fluidchartslide",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f0e8b35159a5bf4f79e079474c983f1699f2006..65e494bd2f6b67b184750eeec6121e9179b43534 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,76 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.1.0](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/compare/v2.8.0...v3.1.0) (2024-09-30)
+
+
+### âš  BREAKING CHANGES
+
+* **grdf:** update error messages
+
+### Features
+
+* **a11y:** Add a focus style to components ([bbfa418](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/bbfa418c5ff74cbb7d80013a2bb722b821574f39))
+* **a11y:** Add a quick access link ([ab54126](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/ab54126414c37233b3299b62e1d147be5944c344))
+* **a11y:** Optimize keyboard navigation between pages ([6dae9c4](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/6dae9c439302ff10a688b81fc9acec73b5409d83))
+* **a11y:** Unlocked challenges focusable with keyboard ([6a787ef](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/6a787efa3919f94a8443f6c37306232e37a91fe5))
+* **accessibility:** allow bars to handle keyboard focus ([7bd3d68](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/7bd3d6854d7efcccc4f7c0ed5cb02e13449612b5))
+* add dynamic page titles ([506da0c](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/506da0ce1b6bc1746896afa8ff8279779279396c))
+* **analysis:** add monthly average temperature comparison ([c64756f](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c64756f1774957567c93cafa91da99034611d5a7))
+* **analysis:** change text order in modal ([c976b9b](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c976b9b4ed546cece976bbb8758b42045a9aa4cc))
+* **analysis:** Make monthly summary button clickable ([4f966f6](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/4f966f60f54bf3cc0a9b68db35dcdfbb44941650))
+* **challenge:** change challenge description ([c82653c](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c82653c15145d8c9eca24199c01d09b19f560949))
+* **ecogesture/profile:** add "garden" equipment ([87e6ff1](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/87e6ff137131fb3d0461f4c315b5c9fed90cf425))
+* **ecogestures:** rework ecogesture order and add score ([f9d847e](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/f9d847e0291db0791ce8179bc28903b8aeb458c0))
+* **ecogestures:** unify ecogesture init modal components ([2a6928a](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/2a6928ab9e1797eb2e4e16180f1d24c0a76b026d))
+* fluidsPrices no longer apply prices ([7887b85](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/7887b8540a559dc3fc975cc4113ffde335087aba))
+* GRDF consent email ([819af22](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/819af22356342b33c0e8dfbcc843caaa5ffc4f3a))
+* **grdf:** update error messages ([dfecbc3](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/dfecbc306aaac9dd8faca7e16be062aaa250c795))
+* **grdf:** update login method ([c0709f7](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c0709f7031caab19d41b49b50a3147b496f43666))
+* improve app load time ([2235acc](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/2235acc72f33caa67a67650cdb9a7a4512fda50f))
+* init prices in scripts ([543eb79](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/543eb79b904b02839f9765253d3982cb087ab2e0))
+* newsletter is now opt-in ([2e78ec2](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/2e78ec262cefa4fe8382d09a335eff5205e05d2a))
+* **newsletter:** incite user to connect his compteur when no data ([bfecbae](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/bfecbaebc0a0da518aab3bcc4f9d00e6c7bb7d2d))
+* node 20 ([391d686](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/391d686728b9b62c9282fd6e8f5c23f5b0ab4121))
+* spread services execution ([a10b40b](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/a10b40bb7eb4d970a5f49b3ce5f4f8107e9fd964))
+* **titles:** change header titles to match page titles ([dd6ea8d](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/dd6ea8d907e8067f621d8201e40508212ede1dd7))
+* **UI:** Use MaterialUI components for input fields ([71e3907](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/71e39078187079fef9b8fb680731cd9ede079dcc))
+* **water:** solidarity pricing ([7e85111](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/7e851115d4fd3972a8f9823331d60ff6d688e0f6))
+
+
+### Bug Fixes
+
+* **a11y:** Adapt to small screens 320x256 ([ec2a8b8](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/ec2a8b859dcdc70e11289cb1acca19ffe33d6c48))
+* **a11y:** Add label and description to buttons ([dc57452](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/dc5745235be19e598c6436b36595035e01399f1f))
+* **a11y:** Added aria roles to lists ([93d3b59](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/93d3b59c53f3c367655ca70ecfdcc3b8aaa7d11d))
+* **a11y:** Added autoComplete types to TextFields ([9373300](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/9373300764049087800413ba4627f667eb202116))
+* **a11y:** Adds the required property to inputs ([c86b478](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c86b478369588c10d3b8aceae017a1e87f695033))
+* **a11y:** allow navigation on help link ([211c477](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/211c477a8abe499adc7b4410ad5d193b6711a1f7))
+* **a11y:** Checkboxes must be accessible ([6f72e8e](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/6f72e8e5b6f42e33bfcb899d656fc43a2600213f))
+* **accessibility:** alt mentions for images ([7aab7ee](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/7aab7ee75e0ec92fc76b09a9b6bff36cdafb76ab))
+* **accessibility:** remove graph shift when navigating with keyboard ([ec41d38](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/ec41d38086797d3b7475d51c802f24a94f0d1f7c))
+* **accessibility:** SAU Link ([79d628a](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/79d628a8cc0f755cb146d9b971904f758b60e36b))
+* add wait consent modal ([017eeeb](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/017eeeb18ec5e5c3a745667ffe0fdca4c70bbeae))
+* **alt:** correct alt for logo des financeurs ([7d53753](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/7d537539aac484ade9e1e12c3f8f06dc375bf0da))
+* **analysis:** adjust temperature loader ([ee0a721](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/ee0a72165c1c77351f126cbf6355f1b2de82b1ee))
+* **analysis:** apple prices for forecast ([3ec3dca](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/3ec3dca37d92d38a79a4abe52df37364a5ff435c))
+* **analysis:** update order of "plus d'infos" modal ([c76d94b](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c76d94beb1becb502f72b8ecf2f8c9f246da7967))
+* **challenges:** last card height ([3d725f1](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/3d725f136303617666b5d98250e98d87b3756483))
+* **deps:** update dependency cozy-device-helper ([e76a275](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/e76a275a790b41e0c32dc6a0fd6a89189ee88ea3))
+* **deps:** update dependency cozy-flags ([f2dba38](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/f2dba387ea4c4e4458705a8c77b4355deb34257c))
+* **deps:** update dependency cozy-intent ([7416184](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/741618415b2f03f2836215290a4a2844f2084789))
+* **deps:** update dependency cozy-keys-lib & cozy-ui ([4824e44](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/4824e4437fc7e08f19c334b45617c2cc49497c76))
+* **deps:** update dependency cozy-realtime ([4d84114](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/4d84114887d71d5565d4e67f95d6fc6f8465b15a))
+* **deps:** update dependency cozy-scripts ([a71ed93](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/a71ed93b96cbb1b73a96ae1578631bf62573283f))
+* **deps:** update dependency cozy-ui to v86 ([6073651](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/60736513aafd1d29e4f49242701e9e13d1323675))
+* **dju:** use dju sum instead of average ([966a404](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/966a4040edfd708f5e9f9ad120e9f2ccb77482fe))
+* **electricity:** remove loader delay ([de28d30](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/de28d30382e5e20bbbb27ba09c670f869d844570))
+* **equipments:** rename "Garden" to "Extérieur" ([df55664](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/df5566437798e09ea815a206a60dcc892a1d029b))
+* **quiz:** resolve black screen bug when customQuestion is not loaded ([9ae1a47](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/9ae1a47a76bbfdd6a0d7227b1a9b0bf32c339502))
+* render "0" on analysis view ([f311a7f](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/f311a7f87ca9b1459fefb00fada394525f32a01e))
+* transparent loader background ([19f27d8](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/19f27d84b85a0f7e98c76b4b80c226c0162f9596))
+* **UI:** center ecogesture content ([c48af14](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/commit/c48af14054390a87b03be99202837cdc1db1c753))
+
 ## [3.0.0](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/compare/v2.8.0...v3.0.0) (2024-05-29)
 
 
diff --git a/README.md b/README.md
index b25b56912533e54d1338a32e278e0107c0112791..8815278c5a9504a6982dca5867cd261d3a24b3ef 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,13 @@
 
 Ecolyo is a mobile-first app allowing citizens to visualise easily their energy consumption (electricity, gas, water ...). The app allows data visualisation but give also some tips on how to reduce energy consumption.
 
+## Ecolyo au-delà de la Métropole de Lyon
+
+<https://doc-self-data.apps.grandlyon.com/docs/ecolyo/share/>
+
 ## How does it works ?
 
-Ecolyo uses "konnectors" for fetching data. More on :
+Ecolyo uses "konnectors" for fetching data. More information on our [konnector documentation](https://doc-self-data.apps.grandlyon.com/docs/konnectors/introduction/). Repositories for our konnectors :
 
 - [enedis konnector](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/enedis-sge-konnector)
 - [grdf konnector](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/grdf-konnector)
@@ -14,21 +18,11 @@ Ecolyo uses "konnectors" for fetching data. More on :
 
 ## Development
 
-For a more complete look at our project, check our [Self Data Docs](https://doc-self-data.apps.grandlyon.com/)
+For a more complete look at our project and our installation guide, check our **[Self Data Docs](https://doc-self-data.apps.grandlyon.com/)**
 
 _:pushpin: Note:_ we recommend to use [Yarn] instead of NPM for package management.
 
-Developing the Cozy Ecolyo app requires you to be familiar with [cozy's documentation](https://docs.cozy.io/en/).
-
-You can then clone the app repository and install dependencies:
-
-```sh
-git clone https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo.git
-cd ecolyo
-yarn
-```
-
-Cozy's apps use a standard set of _npm scripts_ to run common tasks, like watch, lint, test, build…
+Developing the Cozy Ecolyo app requires you to be familiar with [cozy's documentation](https://docs.cozy.io/en/). Cozy's apps use a standard set of _scripts_ to run common tasks, like watch, lint, test, build…
 
 ### Run it inside a default Cozy using Docker
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 8c1efdd2da0f04e18b7627d5f0066e2f06df11f1..bf9faec8eeae8987ecd1070e1001e5e43067d24f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,6 @@
 services:
   stack:
-    image: registry.forge.grandlyon.com/web-et-numerique/factory/llle_project/cozy-stack:1.6.26
+    image: registry.forge.grandlyon.com/web-et-numerique/factory/llle_project/cozy-stack:1.5.8
     container_name: cozy-stack
     depends_on:
       - cozy-db
diff --git a/jest.config.js b/jest.config.js
index f8fbe1db986d3b9223e1a84dfb17e6d80d5c14db..1364b9ca85f51f665ce9d3fe8f634bcff95928e3 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -9,6 +9,8 @@ const config = {
     '\\.(png|gif|jpe?g|svg|hbs)$': '<rootDir>/tests/__mocks__/fileMock.js',
     // identity-obj-proxy module is installed by cozy-scripts
     '\\.(css|styl|sass|scss)$': 'identity-obj-proxy',
+    d3: '<rootDir>/node_modules/d3/dist/d3.min.js',
+    '^d3-(.*)$': '<rootDir>/node_modules/d3-$1/dist/d3-$1.min.js',
   },
   transformIgnorePatterns: [
     'node_modules/(?!(cozy-ui|cozy-harvest-lib|cozy-client))',
diff --git a/manifest.webapp b/manifest.webapp
index e7c27f575ada5bc6d2a2e428ca9122afe9ac1abf..21f338221fb4923eb74e5c5e4e6762a5401a4bd7 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -3,7 +3,7 @@
   "slug": "ecolyo",
   "icon": "public/icon.svg",
   "categories": ["energy"],
-  "version": "3.0.0",
+  "version": "3.1.0",
   "licence": "AGPL-3.0",
   "editor": "Métropole de Lyon",
   "default_locale": "fr",
@@ -177,12 +177,12 @@
     "enedisHalfHourMonthlyAnalysis": {
       "type": "node",
       "file": "services/enedisHalfHourMonthlyAnalysis/ecolyo.js",
-      "trigger": "@cron 0 0 8 3 * *"
+      "trigger": "@monthly on the 3 between 10am and 12pm"
     },
     "monthlyReportNotification": {
       "type": "node",
       "file": "services/monthlyReportNotification/ecolyo.js",
-      "trigger": "@cron 0 0 10 3 * *"
+      "trigger": "@monthly on the 3 between 12pm and 2pm"
     },
     "consumptionAlert": {
       "type": "node",
diff --git a/package.json b/package.json
index c79571eea90539606c69b782f663f62429383ad0..12c2000e84239e4a6b6c7a94d50027625b3f9194 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "ecolyo",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "engines": {
-    "node": "16"
+    "node": "20"
   },
   "scripts": {
     "build": "yarn run build:css && yarn run build:browser",
@@ -44,42 +44,38 @@
     "@cozy/minilog": "^1.0.0",
     "@material-ui/core": "~4.12.0",
     "@material-ui/styles": "^4.11.3",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@sentry/react": "^7.21.1",
-    "@sentry/tracing": "^7.21.1",
-    "@simbathesailor/use-what-changed": "^2.0.0",
-    "classnames": "^2.3.2",
-    "cozy-bar": "8.15.0",
-    "cozy-client": "40.6.0",
-    "cozy-device-helper": ">=2.1.0",
-    "cozy-flags": ">2.8.6",
+    "@reduxjs/toolkit": "^2.2.7",
+    "@sentry/react": "^8.26.0",
+    "classnames": "^2.5.1",
+    "cozy-bar": "10.0.0",
+    "cozy-client": "48.21.0",
+    "cozy-device-helper": "3.1.0",
+    "cozy-flags": "4.0.0",
     "cozy-harvest-lib": "9.26.14",
-    "cozy-intent": "^2.13.0",
-    "cozy-keys-lib": ">=4.1.9",
+    "cozy-intent": "^2.22.0",
+    "cozy-keys-lib": ">=6.0.0",
     "cozy-logger": ">1.7.0",
-    "cozy-realtime": "4.2.8",
-    "cozy-scripts": "8.1",
-    "cozy-ui": "^86.0.0",
-    "d3": "^6.0.0",
-    "detect-browser": "^5.1.1",
+    "cozy-realtime": "5.0.1",
+    "cozy-scripts": "8.3",
+    "cozy-ui": "^111.9.0",
+    "d3": "^7.9.0",
     "file-saver": "^2.0.5",
     "global": "^4.4.0",
-    "handlebars": "^4.7.7",
-    "handlebars-loader": "^1.7.1",
+    "handlebars": "^4.7.8",
+    "handlebars-loader": "^1.7.3",
     "history": "^5.3.0",
     "lodash": "^4.17.15",
-    "mjml-browser": "^4.10.2",
+    "mjml-browser": "^4.15.3",
     "null-loader": "^4.0.1",
     "object-hash": "^3.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-inspector": "^5.1",
-    "react-redux": "^8.1.2",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.6.1",
     "react-swipeable-views": "0.14.0",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.4.2",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
@@ -88,7 +84,7 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.3.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/d3": "^6.0.0",
+    "@types/d3": "^7.4.3",
     "@types/file-saver": "^2.0.5",
     "@types/history": "^5.0.0",
     "@types/jest": "^29.4.0",
@@ -99,9 +95,9 @@
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.11",
     "@types/react-lottie": "^1.2.3",
-    "@types/redux-mock-store": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
+    "@types/redux-mock-store": "^1.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "axios": "^1.3.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-cozy-app": "2.1.0",
diff --git a/scripts/createDayDataFiles.js b/scripts/createDayDataFiles.js
index 1302b0384c784baaba9e3df4b934989f1e2c5f3b..94a78e4a64ac98c7f069dfa9b5dbd298d2bd73fc 100644
--- a/scripts/createDayDataFiles.js
+++ b/scripts/createDayDataFiles.js
@@ -5,6 +5,7 @@
 const fs = require('fs')
 const { DateTime } = require('luxon')
 const config = require('./config')
+const fluidConfig = require('../src/constants/config.json').fluidConfig
 
 function getRandomNumber(min, max) {
   // Generate a random float between min and max
@@ -32,13 +33,14 @@ const generateHalfAnHourData = (startingDate, endingDate, min, max) => {
       day: parsingDate.day,
       hour: parsingDate.hour,
       minute: parsingDate.minute,
+      price: load * fluidConfig[0].coefficient,
     })
     parsingDate = parsingDate.plus({ minute: 30 })
   }
   return halfAnHourDumpArray
 }
 
-const generateData = (startingDate, endingDate, min, max) => {
+const generateData = (startingDate, endingDate, min, max, fluidType) => {
   let parsingDate = DateTime.local(
     startingDate.year,
     startingDate.month,
@@ -54,6 +56,7 @@ const generateData = (startingDate, endingDate, min, max) => {
       day: parsingDate.day,
       hour: 0,
       minute: 0,
+      price: load * fluidConfig[fluidType].coefficient,
     })
     parsingDate = parsingDate.plus({ days: 1 })
   }
@@ -94,9 +97,11 @@ function aggregateLoadData(data, period) {
         day: entryCopy.day,
         hour: entryCopy.hour,
         minute: entryCopy.minute,
+        price: entryCopy.price,
       }
     } else {
       aggregatedData[key].load += entryCopy.load
+      aggregatedData[key].price += entryCopy.price
     }
   })
   return Object.values(aggregatedData)
@@ -125,17 +130,18 @@ const elecGeneratedDayData = generateData(
   startingDate,
   halfHourStartingDate.minus({ days: 1 }),
   4,
-  8
+  8,
+  0
 )
 const elecDayData = [...elecAggregatedDayData, ...elecGeneratedDayData]
 const elecMonthData = aggregateLoadData(elecDayData, 'month')
 const elecYearData = aggregateLoadData(elecMonthData, 'year')
 
-const gasDayData = generateData(startingDate, endingDate, 16, 68)
+const gasDayData = generateData(startingDate, endingDate, 16, 68, 2)
 const gasMonthData = aggregateLoadData(gasDayData, 'month')
 const gasYearData = aggregateLoadData(gasMonthData, 'year')
 
-const waterDayData = generateData(startingDate, endingDate, 200, 300)
+const waterDayData = generateData(startingDate, endingDate, 200, 300, 1)
 const waterMonthData = aggregateLoadData(waterDayData, 'month')
 const waterYearData = aggregateLoadData(waterMonthData, 'year')
 
diff --git a/src/assets/icons/email/multifluidNoConsumption.png b/src/assets/icons/email/multifluidNoConsumption.png
new file mode 100644
index 0000000000000000000000000000000000000000..198a532c5c340555f63f29be6479eeb7752eede4
Binary files /dev/null and b/src/assets/icons/email/multifluidNoConsumption.png differ
diff --git a/src/components/Action/ActionBegin/ActionBegin.spec.tsx b/src/components/Action/ActionBegin/ActionBegin.spec.tsx
index 99bab9320fa6c3606ad87e4aa26ae48d12fb5808..1b9a39cd673a8469b693c38b939c7dc41aaaac36 100644
--- a/src/components/Action/ActionBegin/ActionBegin.spec.tsx
+++ b/src/components/Action/ActionBegin/ActionBegin.spec.tsx
@@ -36,6 +36,7 @@ describe('ActionBegin component', () => {
           action={defaultEcogestureData[1]}
           setShowList={jest.fn()}
           userChallenge={userChallengeData[1]}
+          setFocus={jest.fn()}
         />
       </Provider>
     )
@@ -58,6 +59,7 @@ describe('ActionBegin component', () => {
           action={mockedEcogesturesData[1]}
           setShowList={jest.fn()}
           userChallenge={userChallengeData[1]}
+          setFocus={jest.fn()}
         />
       </Provider>
     )
@@ -76,6 +78,7 @@ describe('ActionBegin component', () => {
           action={defaultEcogestureData[1]}
           setShowList={jest.fn()}
           userChallenge={userChallengeData[1]}
+          setFocus={jest.fn()}
         />
       </Provider>
     )
diff --git a/src/components/Action/ActionBegin/ActionBegin.tsx b/src/components/Action/ActionBegin/ActionBegin.tsx
index 880b904f839394e15b920153a6111dceab912ad9..e99da54cbc2576c39c568ded52efce2c841d7576 100644
--- a/src/components/Action/ActionBegin/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin/ActionBegin.tsx
@@ -4,7 +4,7 @@ import ActionModal from 'components/Action/ActionModal/ActionModal'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { Ecogesture, UserChallenge } from 'models'
 import React, { useEffect, useState } from 'react'
 import ActionService from 'services/action.service'
@@ -16,12 +16,14 @@ interface ActionBeginProps {
   action?: Ecogesture
   setShowList: React.Dispatch<React.SetStateAction<boolean>>
   userChallenge: UserChallenge
+  setFocus: () => void
 }
 
 const ActionBegin = ({
   action,
   setShowList,
   userChallenge,
+  setFocus,
 }: ActionBeginProps) => {
   const { t } = useI18n()
   const client = useClient()
@@ -107,6 +109,7 @@ const ActionBegin = ({
             action={currentAction}
             handleCloseClick={() => setOpenLaunchModal(false)}
             userChallenge={userChallenge}
+            setFocus={setFocus}
           />
         </div>
       )}
diff --git a/src/components/Action/ActionBegin/actionBegin.scss b/src/components/Action/ActionBegin/actionBegin.scss
index 36f0ca97ff68e2ce8b7532a227d8643b709b8abc..f43c66285b2b55829bbd8d225d7f53b54274567b 100644
--- a/src/components/Action/ActionBegin/actionBegin.scss
+++ b/src/components/Action/ActionBegin/actionBegin.scss
@@ -25,7 +25,6 @@
   background: $grey-linear-gradient-background;
   height: auto;
   gap: 1.5rem;
-  max-height: 63svh;
   text-align: center;
   position: relative;
   padding: 5rem 1rem 1rem 1rem;
diff --git a/src/components/Action/ActionCard/ActionCard.spec.tsx b/src/components/Action/ActionCard/ActionCard.spec.tsx
index 44a22ec8a316dfd5f773800f83fed2f55f3d8fb8..ff72792f0fd47ce97480d55aa72e01fc4533066e 100644
--- a/src/components/Action/ActionCard/ActionCard.spec.tsx
+++ b/src/components/Action/ActionCard/ActionCard.spec.tsx
@@ -3,13 +3,17 @@ import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import {
+  createMockEcolyoStore,
+  mockChallengeState,
+} from 'tests/__mocks__/store'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 import ActionCard from './ActionCard'
 
 describe('ActionCard component', () => {
   const store = createMockEcolyoStore({
     challenge: {
+      ...mockChallengeState,
       currentChallenge: userChallengeData[1],
     },
   })
@@ -20,6 +24,7 @@ describe('ActionCard component', () => {
           setShowList={jest.fn()}
           setSelectedAction={jest.fn()}
           action={defaultEcogestureData[1]}
+          setFocus={jest.fn()}
         />
       </Provider>
     )
@@ -33,6 +38,7 @@ describe('ActionCard component', () => {
           setShowList={jest.fn()}
           setSelectedAction={jest.fn()}
           action={defaultEcogestureData[1]}
+          setFocus={jest.fn()}
         />
       </Provider>
     )
diff --git a/src/components/Action/ActionCard/ActionCard.tsx b/src/components/Action/ActionCard/ActionCard.tsx
index 75c04ea0859f46faea90b98aef4471bc12c22e2c..a4aea07a27a27b2f67ce6b0d06e316cc081ef6fc 100644
--- a/src/components/Action/ActionCard/ActionCard.tsx
+++ b/src/components/Action/ActionCard/ActionCard.tsx
@@ -11,12 +11,14 @@ interface ActionCardProps {
   action: Ecogesture
   setSelectedAction: React.Dispatch<React.SetStateAction<Ecogesture | null>>
   setShowList: React.Dispatch<React.SetStateAction<boolean>>
+  setFocus: () => void
 }
 
 const ActionCard = ({
   action,
   setSelectedAction,
   setShowList,
+  setFocus,
 }: ActionCardProps) => {
   const [actionIcon, setActionIcon] = useState<string>('')
   const [openEcogestureModal, setOpenEcogestureModal] = useState<boolean>(false)
@@ -25,7 +27,8 @@ const ActionCard = ({
     setSelectedAction(action)
     setShowList(false)
     setOpenEcogestureModal(false)
-  }, [setSelectedAction, setShowList, action])
+    setFocus()
+  }, [setSelectedAction, action, setShowList, setFocus])
 
   useEffect(() => {
     async function handleEcogestureIcon() {
diff --git a/src/components/Action/ActionChoose/ActionChoose.scss b/src/components/Action/ActionChoose/ActionChoose.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a7ab9a15adc0714e1882ca294a9d9250563d6844
--- /dev/null
+++ b/src/components/Action/ActionChoose/ActionChoose.scss
@@ -0,0 +1,5 @@
+.action-content-view {
+  width: 100%;
+  margin: auto;
+  outline: none;
+}
diff --git a/src/components/Action/ActionChoose/ActionChoose.spec.tsx b/src/components/Action/ActionChoose/ActionChoose.spec.tsx
index a2c2d2e7044d32f9d9e851322570d572a008055c..4f556e86b365cccc6c3c1a0ec7349f66527c4972 100644
--- a/src/components/Action/ActionChoose/ActionChoose.spec.tsx
+++ b/src/components/Action/ActionChoose/ActionChoose.spec.tsx
@@ -42,7 +42,10 @@ describe('ActionChoose component', () => {
     ])
     const { container } = render(
       <Provider store={store}>
-        <ActionChoose userChallenge={userChallengeData[1]} />
+        <ActionChoose
+          userChallenge={userChallengeData[1]}
+          setFocus={jest.fn()}
+        />
       </Provider>
     )
     await waitFor(() => null, { container })
@@ -64,7 +67,10 @@ describe('ActionChoose component', () => {
 
     const { container } = render(
       <Provider store={store}>
-        <ActionChoose userChallenge={userChallengeData[1]} />
+        <ActionChoose
+          userChallenge={userChallengeData[1]}
+          setFocus={jest.fn()}
+        />
       </Provider>
     )
     await waitFor(() => null, { container })
diff --git a/src/components/Action/ActionChoose/ActionChoose.tsx b/src/components/Action/ActionChoose/ActionChoose.tsx
index b1e7d3ad7da0a3e597a1281a0b25a2121b73d474..d6fb6cb23363f73fbc8dd2040e87aa6b293803b2 100644
--- a/src/components/Action/ActionChoose/ActionChoose.tsx
+++ b/src/components/Action/ActionChoose/ActionChoose.tsx
@@ -2,26 +2,35 @@ import { Ecogesture, UserChallenge } from 'models'
 import React, { useState } from 'react'
 import ActionBegin from '../ActionBegin/ActionBegin'
 import ActionList from '../ActionList/ActionList'
+import './ActionChoose.scss'
 
-const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => {
+const ActionChoose = ({
+  userChallenge,
+  setFocus,
+}: {
+  userChallenge: UserChallenge
+  setFocus: () => void
+}) => {
   const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null)
   const [showList, setShowList] = useState<boolean>(false)
 
   return (
-    <>
+    <div className="action-content-view">
       {!showList ? (
         <ActionBegin
           action={selectedAction ?? undefined}
           setShowList={setShowList}
           userChallenge={userChallenge}
+          setFocus={setFocus}
         />
       ) : (
         <ActionList
           setSelectedAction={setSelectedAction}
           setShowList={setShowList}
+          setFocus={setFocus}
         />
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/Action/ActionChoose/__snapshots__/ActionChoose.spec.tsx.snap b/src/components/Action/ActionChoose/__snapshots__/ActionChoose.spec.tsx.snap
index 972120fc6cbd97a5941b146281b3b840ce9628ab..8d568d329feda6361e1e509315a0d4ea85071cc4 100644
--- a/src/components/Action/ActionChoose/__snapshots__/ActionChoose.spec.tsx.snap
+++ b/src/components/Action/ActionChoose/__snapshots__/ActionChoose.spec.tsx.snap
@@ -3,120 +3,124 @@
 exports[`ActionChoose component should render correctly 1`] = `
 <div>
   <div
-    class="action-begin"
+    class="action-content-view"
   >
     <div
-      class="action-container"
+      class="action-begin"
     >
       <div
-        class="action-begin-container"
+        class="action-container"
       >
         <div
-          class="icon-container"
+          class="action-begin-container"
         >
-          <svg
-            aria-hidden="true"
-            class="action-icon styles__icon___23x3R"
-            height="100"
-            width="100"
+          <div
+            class="icon-container"
           >
-            <use
-              xlink:href="#test-file-stub"
-            />
-          </svg>
-        </div>
-        <div
-          class="stars"
-        >
-          <svg
-            aria-hidden="true"
-            class="star styles__icon___23x3R"
-            height="25"
-            width="25"
-          >
-            <use
-              xlink:href="#test-file-stub"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="star styles__icon___23x3R"
-            height="25"
-            width="25"
-          >
-            <use
-              xlink:href="#test-file-stub"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="star styles__icon___23x3R"
-            height="25"
-            width="25"
+            <svg
+              aria-hidden="true"
+              class="action-icon styles__icon___23x3R"
+              height="100"
+              width="100"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </div>
+          <div
+            class="stars"
           >
-            <use
-              xlink:href="#test-file-stub"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="star styles__icon___23x3R"
-            height="25"
-            width="25"
+            <svg
+              aria-hidden="true"
+              class="star styles__icon___23x3R"
+              height="25"
+              width="25"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <svg
+              aria-hidden="true"
+              class="star styles__icon___23x3R"
+              height="25"
+              width="25"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <svg
+              aria-hidden="true"
+              class="star styles__icon___23x3R"
+              height="25"
+              width="25"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <svg
+              aria-hidden="true"
+              class="star styles__icon___23x3R"
+              height="25"
+              width="25"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+            <svg
+              aria-hidden="true"
+              class="star styles__icon___23x3R"
+              height="25"
+              width="25"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </div>
+          <h1
+            class="text-20-bold"
           >
-            <use
-              xlink:href="#test-file-stub"
-            />
-          </svg>
-          <svg
-            aria-hidden="true"
-            class="star styles__icon___23x3R"
-            height="25"
-            width="25"
+            Bonhomme de neige
+          </h1>
+          <div
+            class="action-duration text-18"
           >
-            <use
-              xlink:href="#test-file-stub"
-            />
-          </svg>
-        </div>
-        <h1
-          class="text-20-bold"
-        >
-          Bonhomme de neige
-        </h1>
-        <div
-          class="action-duration text-18"
-        >
-          action.duration
-        </div>
-        <div
-          class="action-text text-18-bold"
-        />
-        <div
-          class="action-buttons"
-        >
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-            tabindex="0"
-            type="button"
+            action.duration
+          </div>
+          <div
+            class="action-text text-18-bold"
+          />
+          <div
+            class="action-buttons"
           >
-            <span
-              class="MuiButton-label"
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
             >
-              action.apply
-            </span>
-          </button>
-          <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label"
+              <span
+                class="MuiButton-label"
+              >
+                action.apply
+              </span>
+            </button>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+              tabindex="0"
+              type="button"
             >
-              action.other
-            </span>
-          </button>
+              <span
+                class="MuiButton-label"
+              >
+                action.other
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/Action/ActionDone/ActionDone.spec.tsx b/src/components/Action/ActionDone/ActionDone.spec.tsx
index 038a6dd206fee247504430ae81e435a579e305b0..f377200ae1ac9975b1c0611ae2401f70bda628eb 100644
--- a/src/components/Action/ActionDone/ActionDone.spec.tsx
+++ b/src/components/Action/ActionDone/ActionDone.spec.tsx
@@ -16,7 +16,7 @@ jest.mock('services/challenge.service', () => {
 
 describe('ActionDone component', () => {
   const store = createMockEcolyoStore()
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <ActionDone currentChallenge={userChallengeData[1]} />
diff --git a/src/components/Action/ActionDone/ActionDone.tsx b/src/components/Action/ActionDone/ActionDone.tsx
index 40c5a4b4897192c73f977faa62537933d5707e79..218c2dec90673f51948c373ae05ffe1d66cb49aa 100644
--- a/src/components/Action/ActionDone/ActionDone.tsx
+++ b/src/components/Action/ActionDone/ActionDone.tsx
@@ -2,7 +2,7 @@ import { Button } from '@material-ui/core'
 import starFilled from 'assets/icons/visu/challenge/starFilled.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeUpdateFlag } from 'enums'
 import { UserChallenge } from 'models'
 import React, { useCallback } from 'react'
diff --git a/src/components/Action/ActionList/ActionList.spec.tsx b/src/components/Action/ActionList/ActionList.spec.tsx
index d18557624a55ff37a41dd51094a74d6b838c5c8e..3fd43aeb1af9a3083bb8b5139d3ad6aa6043418a 100644
--- a/src/components/Action/ActionList/ActionList.spec.tsx
+++ b/src/components/Action/ActionList/ActionList.spec.tsx
@@ -5,6 +5,7 @@ import { defaultEcogestureData } from 'tests/__mocks__/actionData.mock'
 import {
   createMockEcolyoStore,
   mockChallengeState,
+  mockGlobalState,
   mockProfileState,
 } from 'tests/__mocks__/store'
 import ActionList from './ActionList'
@@ -22,12 +23,16 @@ describe('ActionList component', () => {
     mockGetDefaultActions.mockResolvedValueOnce(defaultEcogestureData)
     const store = createMockEcolyoStore({
       challenge: { ...mockChallengeState },
-      global: { fluidTypes: [0, 1, 2] },
+      global: { ...mockGlobalState, fluidTypes: [0, 1, 2] },
       profile: mockProfileState,
     })
     const { container } = render(
       <Provider store={store}>
-        <ActionList setSelectedAction={jest.fn()} setShowList={jest.fn()} />
+        <ActionList
+          setSelectedAction={jest.fn()}
+          setShowList={jest.fn()}
+          setFocus={jest.fn()}
+        />
       </Provider>
     )
     await waitFor(() => null, { container })
diff --git a/src/components/Action/ActionList/ActionList.tsx b/src/components/Action/ActionList/ActionList.tsx
index 4de937d4c78d4e6741f67eccfde57092f139ff63..13317e4ca09d3918f642ec160fe8f8566df4b91b 100644
--- a/src/components/Action/ActionList/ActionList.tsx
+++ b/src/components/Action/ActionList/ActionList.tsx
@@ -9,9 +9,14 @@ import './actionList.scss'
 interface ActionListProps {
   setSelectedAction: React.Dispatch<React.SetStateAction<Ecogesture | null>>
   setShowList: React.Dispatch<React.SetStateAction<boolean>>
+  setFocus: () => void
 }
 
-const ActionList = ({ setSelectedAction, setShowList }: ActionListProps) => {
+const ActionList = ({
+  setSelectedAction,
+  setShowList,
+  setFocus,
+}: ActionListProps) => {
   const client = useClient()
   const {
     global: { fluidTypes },
@@ -29,11 +34,9 @@ const ActionList = ({ setSelectedAction, setShowList }: ActionListProps) => {
       } else {
         actionList = await actionService.getDefaultActions()
       }
-      if (subscribed) {
-        setActions(actionList)
-      }
+      setActions(actionList)
     }
-    getActions()
+    subscribed && getActions()
     return () => {
       subscribed = false
     }
@@ -49,6 +52,7 @@ const ActionList = ({ setSelectedAction, setShowList }: ActionListProps) => {
               action={action}
               setSelectedAction={setSelectedAction}
               setShowList={setShowList}
+              setFocus={setFocus}
             />
           ))}
         </div>
diff --git a/src/components/Action/ActionList/__snapshots__/ActionList.spec.tsx.snap b/src/components/Action/ActionList/__snapshots__/ActionList.spec.tsx.snap
index e1772af32ac582ed39669e5e3220281fed659749..3d7043616ac3dc6220045b31bd66a2b9b5fa74f5 100644
--- a/src/components/Action/ActionList/__snapshots__/ActionList.spec.tsx.snap
+++ b/src/components/Action/ActionList/__snapshots__/ActionList.spec.tsx.snap
@@ -13,16 +13,6 @@ exports[`ActionList component should match snapshot and render correctly 3 butto
       <span
         class="MuiButton-label"
       >
-        <svg
-          aria-hidden="true"
-          class="action-icon styles__icon___23x3R"
-          height="100"
-          width="100"
-        >
-          <use
-            xlink:href="#"
-          />
-        </svg>
         <div
           class="action-title text-18-bold"
         >
@@ -38,16 +28,6 @@ exports[`ActionList component should match snapshot and render correctly 3 butto
       <span
         class="MuiButton-label"
       >
-        <svg
-          aria-hidden="true"
-          class="action-icon styles__icon___23x3R"
-          height="100"
-          width="100"
-        >
-          <use
-            xlink:href="#"
-          />
-        </svg>
         <div
           class="action-title text-18-bold"
         >
@@ -63,16 +43,6 @@ exports[`ActionList component should match snapshot and render correctly 3 butto
       <span
         class="MuiButton-label"
       >
-        <svg
-          aria-hidden="true"
-          class="action-icon styles__icon___23x3R"
-          height="100"
-          width="100"
-        >
-          <use
-            xlink:href="#"
-          />
-        </svg>
         <div
           class="action-title text-18-bold"
         >
diff --git a/src/components/Action/ActionModal/ActionModal.spec.tsx b/src/components/Action/ActionModal/ActionModal.spec.tsx
index 138d005c3e36aa4cecbea8a50376afe0ac90490b..37e94eda6c1e803758c3574930f5a831d1fb9a30 100644
--- a/src/components/Action/ActionModal/ActionModal.spec.tsx
+++ b/src/components/Action/ActionModal/ActionModal.spec.tsx
@@ -17,7 +17,7 @@ jest.mock('services/challenge.service', () => {
 
 describe('ActionModal component', () => {
   const store = createMockEcolyoStore()
-  it('should render correctly', async () => {
+  it('should render correctly', () => {
     const { baseElement } = render(
       <Provider store={store}>
         <ActionModal
@@ -25,6 +25,7 @@ describe('ActionModal component', () => {
           handleCloseClick={jest.fn()}
           action={defaultEcogestureData[1]}
           userChallenge={userChallengeData[1]}
+          setFocus={jest.fn()}
         />
       </Provider>
     )
@@ -44,6 +45,7 @@ describe('ActionModal component', () => {
           handleCloseClick={jest.fn()}
           action={defaultEcogestureData[1]}
           userChallenge={userChallengeData[1]}
+          setFocus={jest.fn()}
         />
       </Provider>
     )
diff --git a/src/components/Action/ActionModal/ActionModal.tsx b/src/components/Action/ActionModal/ActionModal.tsx
index 8cd832e88df0deb8dbaf0598c1f83e2fbe282f69..ac703d65cb3577afc5757d66cfc3530098e178a5 100644
--- a/src/components/Action/ActionModal/ActionModal.tsx
+++ b/src/components/Action/ActionModal/ActionModal.tsx
@@ -1,9 +1,9 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import chronoMini from 'assets/icons/visu/action/chrono-mini.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeUpdateFlag } from 'enums'
 import { Ecogesture, UserChallenge } from 'models'
 import React, { useCallback } from 'react'
@@ -17,6 +17,7 @@ interface ActionModalProps {
   action: Ecogesture
   handleCloseClick: () => void
   userChallenge: UserChallenge
+  setFocus: () => void
 }
 
 const ActionModal = ({
@@ -24,6 +25,7 @@ const ActionModal = ({
   action,
   handleCloseClick,
   userChallenge,
+  setFocus,
 }: ActionModalProps) => {
   const client = useClient()
   const { t } = useI18n()
@@ -38,7 +40,8 @@ const ActionModal = ({
       action
     )
     dispatch(updateUserChallengeList(updatedChallenge))
-  }, [action, client, dispatch, userChallenge])
+    setFocus()
+  }, [action, client, dispatch, setFocus, userChallenge])
 
   return (
     <Dialog
@@ -54,7 +57,7 @@ const ActionModal = ({
         {t('action_modal.accessibility.window_title')}
       </div>
       <div className="action-modal">
-        <Icon icon={chronoMini} size={75} />
+        <StyledIcon icon={chronoMini} size={75} />
         <div className="action-title text-16-normal">
           {t('action.duration', {
             smartCount: action.actionDuration,
diff --git a/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap b/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
index 2825edc3a9a03ccf4537cc5e822eafeab09ec7d3..fb6e52597e2479213b713a43fa9883b8e8f7719c 100644
--- a/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
+++ b/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
@@ -41,6 +41,7 @@ exports[`ActionModal component should render correctly 1`] = `
           class="action-modal"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="75"
             width="75"
diff --git a/src/components/Action/ActionOnGoing/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
index d6e36fe48ae9a4b8bf74a0f70a781d28018d2842..1fcff5c0dae00c18538f6c79fb2fc2ae2c9d3186 100644
--- a/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
@@ -2,8 +2,7 @@ import { Button } from '@material-ui/core'
 import ClockIcon from 'assets/icons/visu/action/duration-clock.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import EcogestureModal from 'components/Ecogesture/EcogestureModal/EcogestureModal'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { DateTime } from 'luxon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserAction } from 'models'
 import React, { useCallback, useState } from 'react'
 import './actionOnGoing.scss'
@@ -51,9 +50,9 @@ const ActionOnGoing = ({ userAction }: { userAction: UserAction }) => {
 
   const getResultDate = useCallback(() => {
     if (userAction.startDate && userAction.ecogesture) {
-      const startDate: DateTime = userAction.startDate
-      const durationInHours: number = userAction.ecogesture.actionDuration * 24
-      const resultDate: string = startDate
+      const startDate = userAction.startDate
+      const durationInHours = userAction.ecogesture.actionDuration * 24
+      const resultDate = startDate
         .plus({ hours: durationInHours })
         .setLocale('fr')
         .toFormat('cccc dd LLLL')
diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx
index 22933cb1b1df0c435f1afc00b8aaf0e5d3458bfe..a6d116988944097f46dbc9fcf1b80896b0fdc12e 100644
--- a/src/components/Action/ActionView.spec.tsx
+++ b/src/components/Action/ActionView.spec.tsx
@@ -3,7 +3,10 @@ import ActionView from 'components/Action/ActionView'
 import { UserActionState } from 'enums'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import {
+  createMockEcolyoStore,
+  mockChallengeState,
+} from 'tests/__mocks__/store'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
@@ -23,9 +26,10 @@ jest.mock(
 )
 
 describe('ActionView component', () => {
-  it('should render match snapshot with "Unstarted" state', async () => {
+  it('should render match snapshot with "Unstarted" state', () => {
     const store = createMockEcolyoStore({
       challenge: {
+        ...mockChallengeState,
         currentChallenge: {
           ...userChallengeData[1],
           action: {
@@ -42,9 +46,10 @@ describe('ActionView component', () => {
     )
     expect(container).toMatchSnapshot()
   })
-  it('should render match snapshot with "onGoing" state', async () => {
+  it('should render match snapshot with "onGoing" state', () => {
     const store = createMockEcolyoStore({
       challenge: {
+        ...mockChallengeState,
         currentChallenge: {
           ...userChallengeData[1],
           action: {
@@ -61,9 +66,10 @@ describe('ActionView component', () => {
     )
     expect(container).toMatchSnapshot()
   })
-  it('should render match snapshot with "Notification" state', async () => {
+  it('should render match snapshot with "Notification" state', () => {
     const store = createMockEcolyoStore({
       challenge: {
+        ...mockChallengeState,
         currentChallenge: {
           ...userChallengeData[1],
           action: {
@@ -80,9 +86,10 @@ describe('ActionView component', () => {
     )
     expect(container).toMatchSnapshot()
   })
-  it('should render match snapshot with default case', async () => {
+  it('should render match snapshot with default case', () => {
     const store = createMockEcolyoStore({
       challenge: {
+        ...mockChallengeState,
         currentChallenge: {
           ...userChallengeData[1],
           action: {
diff --git a/src/components/Action/ActionView.tsx b/src/components/Action/ActionView.tsx
index 7b5fbab5d6852111c2d6781d1045870ecc459227..cec6bf7390596269e671603b50f7e191e8514eb3 100644
--- a/src/components/Action/ActionView.tsx
+++ b/src/components/Action/ActionView.tsx
@@ -3,25 +3,37 @@ import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
 import { UserActionState } from 'enums'
 import { UserChallenge } from 'models'
-import React from 'react'
+import React, { useRef } from 'react'
 import { useAppSelector } from 'store/hooks'
 import ActionChoose from './ActionChoose/ActionChoose'
 import ActionDone from './ActionDone/ActionDone'
 import ActionOnGoing from './ActionOnGoing/ActionOnGoing'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/challenges/action
+ */
 const ActionView = () => {
   const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
 
+  const mainContentRef = useRef<HTMLDivElement>(null)
+  const focusMainContent = () => {
+    setTimeout(() => mainContentRef.current?.focus(), 0)
+  }
+
   const renderAction = (challenge: UserChallenge) => {
     switch (challenge.action.state) {
       case UserActionState.UNSTARTED:
-        return <ActionChoose userChallenge={challenge} />
+        return (
+          <ActionChoose userChallenge={challenge} setFocus={focusMainContent} />
+        )
       case UserActionState.ONGOING:
         return <ActionOnGoing userAction={challenge.action} />
       case UserActionState.NOTIFICATION:
         return <ActionDone currentChallenge={challenge} />
       default:
-        return <ActionChoose userChallenge={challenge} />
+        return (
+          <ActionChoose userChallenge={challenge} setFocus={focusMainContent} />
+        )
     }
   }
 
@@ -29,7 +41,15 @@ const ActionView = () => {
     <>
       <CozyBar titleKey="common.title_action" displayBackArrow={true} />
       <Header desktopTitleKey="common.title_action" displayBackArrow={true} />
-      <Content>{currentChallenge && renderAction(currentChallenge)}</Content>
+      <Content>
+        <div
+          ref={mainContentRef}
+          style={{ outline: 'none', margin: 'auto' }}
+          tabIndex={-1}
+        >
+          {currentChallenge && renderAction(currentChallenge)}
+        </div>
+      </Content>
     </>
   )
 }
diff --git a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
index cd7ed71bda2e62a0f90c8c17df8c29aee1794b1d..d36bcbeeb7ea41baf27eb56d256fb6ecdc54c90c 100644
--- a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
@@ -11,9 +11,14 @@ exports[`ActionView component should render match snapshot with "Notification" s
     displaybackarrow="true"
   />
   <mock-content>
-    <mock-action-done
-      currentchallenge="[object Object]"
-    />
+    <div
+      style="outline: none; margin: auto;"
+      tabindex="-1"
+    >
+      <mock-action-done
+        currentchallenge="[object Object]"
+      />
+    </div>
   </mock-content>
 </div>
 `;
@@ -29,9 +34,14 @@ exports[`ActionView component should render match snapshot with "Unstarted" stat
     displaybackarrow="true"
   />
   <mock-content>
-    <mock-action-choose
-      userchallenge="[object Object]"
-    />
+    <div
+      style="outline: none; margin: auto;"
+      tabindex="-1"
+    >
+      <mock-action-choose
+        userchallenge="[object Object]"
+      />
+    </div>
   </mock-content>
 </div>
 `;
@@ -47,9 +57,14 @@ exports[`ActionView component should render match snapshot with "onGoing" state
     displaybackarrow="true"
   />
   <mock-content>
-    <mock-action-ongoing
-      useraction="[object Object]"
-    />
+    <div
+      style="outline: none; margin: auto;"
+      tabindex="-1"
+    >
+      <mock-action-ongoing
+        useraction="[object Object]"
+      />
+    </div>
   </mock-content>
 </div>
 `;
@@ -65,9 +80,14 @@ exports[`ActionView component should render match snapshot with default case 1`]
     displaybackarrow="true"
   />
   <mock-content>
-    <mock-action-choose
-      userchallenge="[object Object]"
-    />
+    <div
+      style="outline: none; margin: auto;"
+      tabindex="-1"
+    >
+      <mock-action-choose
+        userchallenge="[object Object]"
+      />
+    </div>
   </mock-content>
 </div>
 `;
diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
index 6be3d34fd982adc52708f5ae0ee4bb254aecb820..e59782947415c2ee73769306f896030c337d7cc4 100644
--- a/src/components/Analysis/AnalysisView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -9,6 +9,7 @@ import {
   createMockEcolyoStore,
   mockAnalysisState,
   mockChartState,
+  mockGlobalState,
   mockProfileState,
 } from 'tests/__mocks__/store'
 
@@ -52,7 +53,7 @@ describe('AnalysisView component', () => {
     const store = createMockEcolyoStore({
       analysis: mockAnalysisState,
       chart: mockChartState,
-      global: { analysisNotification: true },
+      global: { ...mockGlobalState, analysisNotification: true },
       profile: { ...mockProfileState, haveSeenLastAnalysis: true },
     })
     mockAppDispatch.mockReturnValue(jest.fn())
diff --git a/src/components/Analysis/AnalysisView.tsx b/src/components/Analysis/AnalysisView.tsx
index 85e543aca28f0ce4ed04e8fab04ce12505fd3326..34230d6ca8220b8c498fbabfc902936058c1d28c 100644
--- a/src/components/Analysis/AnalysisView.tsx
+++ b/src/components/Analysis/AnalysisView.tsx
@@ -17,6 +17,9 @@ import { updateProfile } from 'store/profile/profile.slice'
 import { isLastDateReached } from 'utils/date'
 import './analysisView.scss'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/analysis
+ */
 const AnalysisView = () => {
   const client = useClient()
   const {
diff --git a/src/components/Analysis/Comparison/Comparison.spec.tsx b/src/components/Analysis/Comparison/Comparison.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..da099dfcb1f40306c8d74b9599a1157a8317477f
--- /dev/null
+++ b/src/components/Analysis/Comparison/Comparison.spec.tsx
@@ -0,0 +1,124 @@
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FluidType } from 'enums'
+import { PerformanceIndicator } from 'models'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { setPeriod } from 'store/analysis/analysis.slice'
+import {
+  createMockEcolyoStore,
+  mockAnalysisState,
+  mockGlobalState,
+} from 'tests/__mocks__/store'
+import Comparison from './Comparison'
+
+jest.mock(
+  'components/Analysis/Comparison/TemperatureComparison.tsx',
+  () => 'mock-temperature-comparison'
+)
+
+jest.mock('services/consumption.service', () => {
+  return jest.fn().mockImplementation(() => ({
+    fetchAvgTemperature: jest.fn().mockResolvedValue(25.3),
+    getPerformanceIndicators: jest.fn().mockResolvedValue([]),
+  }))
+})
+
+const mockFluidsWithData = [
+  FluidType.ELECTRICITY,
+  FluidType.WATER,
+  FluidType.GAS,
+]
+
+const mockPerformanceIndicators: PerformanceIndicator[] = [
+  {
+    compareValue: 203.49,
+    percentageVariation: 0.12261044768784712,
+    value: 178.54,
+  },
+  {
+    compareValue: 7926.82,
+    percentageVariation: 0.020542916327102145,
+    value: 7763.98,
+  },
+  {
+    compareValue: 1316.46,
+    percentageVariation: -0.0009191316105312541,
+    value: 1317.67,
+  },
+]
+
+describe('Comparison component', () => {
+  it('renders loading state', async () => {
+    render(
+      <Provider store={createMockEcolyoStore()}>
+        <Comparison fluidsWithData={[]} monthPerformanceIndicators={[]} />
+      </Provider>
+    )
+
+    await waitFor(() => {
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    })
+  })
+
+  it('switches between monthly and yearly periods', async () => {
+    const store = createMockEcolyoStore({
+      analysis: { ...mockAnalysisState, period: 'month' },
+      global: {
+        ...mockGlobalState,
+        fluidTypes: mockFluidsWithData,
+      },
+    })
+
+    const mockDispatch = jest.fn()
+    jest.spyOn(store, 'dispatch').mockImplementation(mockDispatch)
+
+    render(
+      <Provider store={store}>
+        <Comparison
+          fluidsWithData={mockFluidsWithData}
+          monthPerformanceIndicators={mockPerformanceIndicators}
+        />
+      </Provider>
+    )
+
+    const yearlyButton = await screen.findByRole('tab', {
+      name: `analysis.compare.year_tab`,
+    })
+    const monthlyButton = await screen.findByRole('tab', {
+      name: `analysis.compare.month_tab`,
+    })
+
+    await act(async () => {
+      await userEvent.click(yearlyButton)
+      expect(mockDispatch).toHaveBeenCalledWith(setPeriod('year'))
+    })
+
+    await act(async () => {
+      await userEvent.click(monthlyButton)
+      expect(mockDispatch).toHaveBeenCalledWith(setPeriod('month'))
+    })
+  })
+
+  it('renders performance indicators', async () => {
+    const store = createMockEcolyoStore({
+      analysis: { ...mockAnalysisState },
+      global: {
+        ...mockGlobalState,
+        fluidTypes: mockFluidsWithData,
+      },
+    })
+
+    render(
+      <Provider store={store}>
+        <Comparison
+          fluidsWithData={mockFluidsWithData}
+          monthPerformanceIndicators={mockPerformanceIndicators}
+        />
+      </Provider>
+    )
+
+    const indicators = await screen.findAllByRole('listitem')
+    expect(indicators.length).toBe(mockFluidsWithData.length)
+  })
+})
diff --git a/src/components/Analysis/Comparison/Comparison.tsx b/src/components/Analysis/Comparison/Comparison.tsx
index 927e1094cc8bbcc529ba7d64f38a38e36b8bae5c..b16f5c94ea0c3c21406a2f3f5416310d180e3e2a 100644
--- a/src/components/Analysis/Comparison/Comparison.tsx
+++ b/src/components/Analysis/Comparison/Comparison.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@material-ui/core'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, TimeStep } from 'enums'
 import { PerformanceIndicator } from 'models'
 import React, { useEffect, useMemo, useState } from 'react'
@@ -57,32 +57,30 @@ const Comparison = ({
     fluidsWithData.length * 84 +
     (fluidsWithData.length - 1) * 10 +
     NAVIGATION_HEIGHT
-
   useEffect(() => {
     let subscribed = true
     async function populateData() {
-      if (subscribed) {
-        const fetchedYearIndicators =
-          await consumptionService.getPerformanceIndicators(
-            periods.monthPeriod,
-            TimeStep.MONTH,
-            fluidsWithData,
-            periods.previousYearPeriod
+      const fetchedYearIndicators =
+        await consumptionService.getPerformanceIndicators(
+          periods.monthPeriod,
+          TimeStep.MONTH,
+          fluidsWithData,
+          periods.previousYearPeriod
+        )
+      if (fetchedYearIndicators) {
+        setYearPerformanceIndicators(fetchedYearIndicators)
+        if (
+          fetchedYearIndicators.some(
+            indicator => indicator.value !== 0 || indicator.compareValue !== 0
           )
-        if (fetchedYearIndicators) {
-          setYearPerformanceIndicators(fetchedYearIndicators)
-          if (
-            fetchedYearIndicators.some(
-              indicator => indicator.value !== 0 || indicator.compareValue !== 0
-            )
-          ) {
-            dispatch(setPeriod('year'))
-          }
+        ) {
+          dispatch(setPeriod('year'))
         }
-        setIsLoading(false)
       }
+      setIsLoading(false)
     }
-    populateData()
+
+    subscribed && populateData()
     return () => {
       subscribed = false
     }
@@ -100,14 +98,16 @@ const Comparison = ({
   return (
     <div className="comparison">
       {!isLoading && (
-        <div className="tabs">
+        <div role="tablist" className="tabs">
           <Button
+            role="tab"
             className={period === 'year' ? 'active' : ''}
             onClick={() => dispatch(setPeriod('year'))}
           >
             {t(`analysis.compare.year_tab`)}
           </Button>
           <Button
+            role="tab"
             className={period === 'month' ? 'active' : ''}
             onClick={() => dispatch(setPeriod('month'))}
           >
@@ -116,7 +116,8 @@ const Comparison = ({
         </div>
       )}
 
-      <div className="performanceIndicators">
+      <div role="list" className="performanceIndicators">
+        <TemperatureComparison />
         {isLoading && (
           <div
             style={{
@@ -128,7 +129,6 @@ const Comparison = ({
             <Loader />
           </div>
         )}
-        {!isLoading && <TemperatureComparison />}
         {/* Placeholder when no data is found */}
         {!isLoading &&
           fluidsWithData.length === 0 &&
diff --git a/src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx b/src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32487e9d45ea6dad7f55f3a589e9c9df973449b4
--- /dev/null
+++ b/src/components/Analysis/Comparison/FluidPerformanceIndicator.spec.tsx
@@ -0,0 +1,138 @@
+import { AnyAction } from '@reduxjs/toolkit'
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FluidType } from 'enums'
+import { DateTime } from 'luxon'
+import { PerformanceIndicator } from 'models'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { createMockEcolyoStore, mockAnalysisState } from 'tests/__mocks__/store'
+import FluidPerformanceIndicator from './FluidPerformanceIndicator'
+
+const monthlyStore = createMockEcolyoStore()
+const yearlyStore = createMockEcolyoStore({
+  analysis: { ...mockAnalysisState, period: 'year' },
+})
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedNavigate,
+}))
+
+const elecPerformanceIndicator: PerformanceIndicator = {
+  value: 100,
+  compareValue: 90,
+  percentageVariation: 0.1,
+}
+
+const waterPerformanceIndicator: PerformanceIndicator = {
+  value: 140,
+  compareValue: 150,
+  percentageVariation: -0.1,
+}
+
+const comparisonDate = DateTime.local(2024, 4, 15)
+
+describe('FluidPerformanceIndicator component', () => {
+  it('should render elec indicators correctly and navigate on click', async () => {
+    const dispatchSpy = jest.spyOn(monthlyStore, 'dispatch')
+    const setShowCompareMock = jest.fn()
+    dispatchSpy.mockImplementation((action: AnyAction) => {
+      if (action.type === 'chart/setShowCompare') {
+        setShowCompareMock(action.payload)
+      }
+      return action
+    })
+
+    const { container } = render(
+      <Provider store={monthlyStore}>
+        <FluidPerformanceIndicator
+          performanceIndicator={elecPerformanceIndicator}
+          fluidType={FluidType.ELECTRICITY}
+          comparisonDate={comparisonDate}
+        />
+      </Provider>
+    )
+
+    expect(screen.getByTestId('fluid-type-ELECTRICITY')).toHaveTextContent(
+      'ELECTRICITY'
+    )
+    expect(screen.getByTestId('fluid-value-ELECTRICITY')).toHaveTextContent(
+      '100'
+    )
+    expect(
+      screen.getByTestId('fluid-comparison-ELECTRICITY')
+    ).toHaveTextContent('+10,00 % / avril 2024')
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole('listitem'))
+    })
+
+    expect(mockedNavigate).toHaveBeenCalledWith('/consumption/electricity')
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: 'chart/setShowCompare',
+      payload: false,
+    })
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render water indicators correctly and dispatch setShowCompare year on click', async () => {
+    const dispatchSpy = jest.spyOn(yearlyStore, 'dispatch')
+    const setShowCompareMock = jest.fn()
+    dispatchSpy.mockImplementation((action: AnyAction) => {
+      if (action.type === 'chart/setShowCompare') {
+        setShowCompareMock(action.payload)
+      }
+      return action
+    })
+
+    render(
+      <Provider store={yearlyStore}>
+        <FluidPerformanceIndicator
+          performanceIndicator={waterPerformanceIndicator}
+          fluidType={FluidType.WATER}
+          comparisonDate={comparisonDate}
+        />
+      </Provider>
+    )
+
+    expect(screen.getByTestId('fluid-type-WATER')).toHaveTextContent('WATER')
+    expect(screen.getByTestId('fluid-value-WATER')).toHaveTextContent('140')
+    expect(screen.getByTestId('fluid-comparison-WATER')).toHaveTextContent(
+      '-10,00 % / avril 2024'
+    )
+
+    await act(async () => {
+      await userEvent.click(screen.getByRole('listitem'))
+    })
+
+    expect(mockedNavigate).toHaveBeenCalledWith('/consumption/water')
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: 'chart/setShowCompare',
+      payload: true,
+    })
+  })
+
+  it('should render "no data" message when value is not available', () => {
+    const performanceIndicator: PerformanceIndicator = {
+      value: null,
+      compareValue: null,
+      percentageVariation: null,
+    }
+    const { container } = render(
+      <Provider store={monthlyStore}>
+        <FluidPerformanceIndicator
+          performanceIndicator={performanceIndicator}
+          fluidType={FluidType.WATER}
+          comparisonDate={comparisonDate}
+        />
+      </Provider>
+    )
+
+    expect(container).toMatchSnapshot()
+    expect(
+      screen.getByText('performance_indicator.fpi.no_data')
+    ).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
index 1c193147dcb6a8ffa8fd59981205e30b4e9357e6..22817c415083cea430f3a1b3ed1241df5915a5d2 100644
--- a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
+++ b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
@@ -1,5 +1,6 @@
+import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import { PerformanceIndicator } from 'models'
@@ -55,9 +56,16 @@ const FluidPerformanceIndicator = ({
   }
 
   return (
-    <button className="fpi" onClick={() => handleFluidClick(fluidType)}>
+    <StyledCard
+      role="listitem"
+      className="fpi"
+      onClick={() => handleFluidClick(fluidType)}
+    >
       <StyledIcon icon={iconType} size={50} />
-      <div className="fpi-content">
+      <div
+        data-testid={`fluid-type-${FluidType[fluidType]}`}
+        className="fpi-content"
+      >
         {!displayedValue && (
           <div className="fpi-content-no-data">
             <span>{t('performance_indicator.fpi.no_data')}</span>
@@ -65,7 +73,10 @@ const FluidPerformanceIndicator = ({
         )}
         {displayedValue && (
           <>
-            <div className="fpi-value">
+            <div
+              data-testid={`fluid-value-${FluidType[fluidType]}`}
+              className="fpi-value"
+            >
               <span className="fpi-load">{displayedValue}</span>
               <span className="fpi-unit">
                 {t(`FLUID.${FluidType[fluidType]}.UNIT`)}
@@ -77,7 +88,10 @@ const FluidPerformanceIndicator = ({
               </span>
             )}
             {performanceIndicator?.percentageVariation !== null && (
-              <div className="fpi-comparison">
+              <div
+                data-testid={`fluid-comparison-${FluidType[fluidType]}`}
+                className="fpi-comparison"
+              >
                 <span
                   className={`percent ${positive ? 'positive' : 'negative'}`}
                 >
@@ -91,7 +105,7 @@ const FluidPerformanceIndicator = ({
           </>
         )}
       </div>
-    </button>
+    </StyledCard>
   )
 }
 
diff --git a/src/components/Analysis/Comparison/TemperatureComparison.spec.tsx b/src/components/Analysis/Comparison/TemperatureComparison.spec.tsx
index 8d3383f30fbf92a4b590a9677db2eb2d621d8408..4be5c05413861145c8ed46d2b6a3d9cdeba5d0a6 100644
--- a/src/components/Analysis/Comparison/TemperatureComparison.spec.tsx
+++ b/src/components/Analysis/Comparison/TemperatureComparison.spec.tsx
@@ -22,9 +22,21 @@ describe('TemperatureComparison component', () => {
   afterEach(() => {
     jest.clearAllMocks()
   })
-  it('should be rendered correctly with hot result', async () => {
-    mockFetchAvgTemperature.mockResolvedValueOnce(1)
-    mockFetchAvgTemperature.mockResolvedValueOnce(2)
+
+  it('should render a loader', async () => {
+    render(
+      <Provider store={store}>
+        <TemperatureComparison />
+      </Provider>
+    )
+    await waitFor(() => {
+      expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    })
+  })
+
+  it('should be rendered correctly with no data', async () => {
+    mockFetchAvgTemperature.mockResolvedValueOnce(null)
+    mockFetchAvgTemperature.mockResolvedValueOnce(0)
     const { container } = render(
       <Provider store={store}>
         <TemperatureComparison />
@@ -33,9 +45,9 @@ describe('TemperatureComparison component', () => {
     await waitFor(() => null, { container })
     expect(container).toMatchSnapshot()
   })
-  it('should be rendered correctly with cold result', async () => {
-    mockFetchAvgTemperature.mockResolvedValueOnce(2)
+  it('should be rendered correctly with hot result', async () => {
     mockFetchAvgTemperature.mockResolvedValueOnce(1)
+    mockFetchAvgTemperature.mockResolvedValueOnce(2)
     const { container } = render(
       <Provider store={store}>
         <TemperatureComparison />
@@ -43,10 +55,13 @@ describe('TemperatureComparison component', () => {
     )
     await waitFor(() => null, { container })
     expect(container).toMatchSnapshot()
+    expect(
+      await screen.findByText('analysis.temperature_comparison.unit')
+    ).toBeInTheDocument()
   })
-  it('should be rendered correctly with no data', async () => {
-    mockFetchAvgTemperature.mockResolvedValueOnce(null)
-    mockFetchAvgTemperature.mockResolvedValueOnce(0)
+  it('should be rendered correctly with cold result', async () => {
+    mockFetchAvgTemperature.mockResolvedValueOnce(2)
+    mockFetchAvgTemperature.mockResolvedValueOnce(1)
     const { container } = render(
       <Provider store={store}>
         <TemperatureComparison />
diff --git a/src/components/Analysis/Comparison/TemperatureComparison.tsx b/src/components/Analysis/Comparison/TemperatureComparison.tsx
index 393df4a980a3608affd5c0d06b2510daf6ea8221..8d1a82caacfd2f31ace94604b804186bd96ef76a 100644
--- a/src/components/Analysis/Comparison/TemperatureComparison.tsx
+++ b/src/components/Analysis/Comparison/TemperatureComparison.tsx
@@ -1,7 +1,8 @@
 import ExclamationMarkIcon from 'assets/icons/ico/exclamationMark.svg'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useEffect, useMemo, useState } from 'react'
 import ConsumptionService from 'services/consumption.service'
 import { useAppSelector } from 'store/hooks'
@@ -15,14 +16,16 @@ const TemperatureComparison = () => {
     state => state.ecolyo.analysis
   )
 
-  const [temperatureDifference, setTemperatureDifference] = useState<string>()
-  const [positive, setPositive] = useState<boolean>(true)
-  const [openTemperatureComparisonModal, setOpenTemperatureComparisonModal] =
-    useState<boolean>(false)
+  const [temperatureDifference, setTemperatureDifference] = useState<string>('')
+  const [openDetailsModal, setOpenDetailsModal] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(true)
+  const positive = Number(temperatureDifference) >= 0
+
   const consumptionService = useMemo(
     () => new ConsumptionService(client),
     [client]
   )
+
   const comparisonDates = useMemo(() => {
     const endMonth = analysisMonth.minus({ month: 1 }).startOf('month')
     return {
@@ -35,23 +38,22 @@ const TemperatureComparison = () => {
 
   useEffect(() => {
     async function handleTemperatureComparison() {
-      const startMonthTemperature =
-        await consumptionService.fetchAvgTemperature(
+      const [startTemperature, endTemperature] = await Promise.all([
+        consumptionService.fetchAvgTemperature(
           comparisonDates.startMonth.year,
           comparisonDates.startMonth.month
-        )
+        ),
+        consumptionService.fetchAvgTemperature(
+          comparisonDates.endMonth.year,
+          comparisonDates.endMonth.month
+        ),
+      ])
 
-      const endMonthTemperature = await consumptionService.fetchAvgTemperature(
-        comparisonDates.endMonth.year,
-        comparisonDates.endMonth.month
-      )
-
-      if (startMonthTemperature !== null && endMonthTemperature !== null) {
-        const temperatureDifference =
-          endMonthTemperature - startMonthTemperature
+      if (startTemperature !== null && endTemperature !== null) {
+        const temperatureDifference = endTemperature - startTemperature
         setTemperatureDifference(temperatureDifference.toFixed(1))
-        setPositive(temperatureDifference >= 0)
       }
+      setIsLoading(false)
     }
     handleTemperatureComparison()
   }, [
@@ -62,49 +64,57 @@ const TemperatureComparison = () => {
     comparisonDates.startMonth.year,
   ])
 
-  return (
-    <>
-      {temperatureDifference && (
-        <div className={`temperatureComparison ${positive ? 'hot' : 'cold'}`}>
-          <div className="tc-content">
-            <div>
-              <span className="text-28-bold">
-                {positive ? '+' : ''}
-                {temperatureDifference}&nbsp;
-              </span>
-              <span className="text-18">
-                {t('analysis.temperature_comparison.unit')}
-              </span>
-            </div>
-            <div>
-              <span className="tc-text text-12">
-                {t('analysis.temperature_comparison.comparison')}
-              </span>
-              <span className="tc-period text-12-bold">
-                &nbsp;
-                {comparisonDates.startMonth.toLocaleString({
-                  month: 'long',
-                  year: 'numeric',
-                })}
-              </span>
-            </div>
-          </div>
+  if (isLoading) {
+    return (
+      <div className="temperatureComparison loading">
+        <Loader />
+      </div>
+    )
+  }
 
-          <StyledIconButton
-            icon={ExclamationMarkIcon}
-            sized={16}
-            onClick={() => setOpenTemperatureComparisonModal(true)}
-            aria-label={t('analysis.temperature_comparison.info_button')}
-            className="info-icon"
-          />
+  if (!temperatureDifference) return null
 
-          <TemperatureComparisonModal
-            open={openTemperatureComparisonModal}
-            handleCloseClick={() => setOpenTemperatureComparisonModal(false)}
-          />
+  return (
+    <div className={`temperatureComparison ${positive ? 'hot' : 'cold'}`}>
+      <div className="tc-content">
+        <div>
+          <span className="text-28-bold">
+            {positive ? '+' : ''}
+            {temperatureDifference}&nbsp;
+          </span>
+          <span className="text-18">
+            {t('analysis.temperature_comparison.unit')}
+          </span>
+        </div>
+        <div>
+          <span className="text-12">
+            {t('analysis.temperature_comparison.comparison')}
+          </span>
+          <span className="text-12-bold">
+            &nbsp;
+            {comparisonDates.startMonth.toLocaleString({
+              month: 'long',
+              year: 'numeric',
+            })}
+          </span>
         </div>
-      )}
-    </>
+      </div>
+
+      <div className="buttonContainer">
+        <StyledIconButton
+          icon={ExclamationMarkIcon}
+          sized={16}
+          onClick={() => setOpenDetailsModal(true)}
+          aria-label={t('analysis.temperature_comparison.info_button')}
+          className="info-icon"
+        />
+      </div>
+
+      <TemperatureComparisonModal
+        open={openDetailsModal}
+        handleCloseClick={() => setOpenDetailsModal(false)}
+      />
+    </div>
   )
 }
 
diff --git a/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx b/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
index b165c9936433fcd09c2a469195455cd29b56b0cb..8971c0b4b3b456519a6fc8bf346c8ace3d990728 100644
--- a/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
+++ b/src/components/Analysis/Comparison/TemperatureComparisonModal/TemperatureComparisonModal.tsx
@@ -1,8 +1,7 @@
-import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useAppSelector } from 'store/hooks'
 import './temperatureComparisonModal.scss'
@@ -30,13 +29,13 @@ const TemperatureComparisonModal = ({
       }}
     >
       <div className="modal-start-root">
-        <IconButton
+        <StyledIconButton
+          icon={CloseIcon}
+          sized={18}
+          onClick={handleCloseClick}
           aria-label={t('analysis.temperature_comparison.modal.close')}
           className="modal-paper-close-button"
-          onClick={handleCloseClick}
-        >
-          <Icon icon={CloseIcon} size={18} />
-        </IconButton>
+        />
         <div className="content">
           <div className="text-20-bold subtitle">
             {t('analysis.temperature_comparison.modal.title')}
diff --git a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
index 19f0c60c854b994a7206326d40398cf10636f3bd..ae38608769b3585d68ab1cbec8cc1f5769fcbafb 100644
--- a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
@@ -45,6 +45,7 @@ exports[`TemperatureComparisonModal component should be rendered correctly 1`] =
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="18"
                 width="18"
diff --git a/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap b/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..cd33f838a0aa60ee4ba4f9e03d8b45f8fd023f28
--- /dev/null
+++ b/src/components/Analysis/Comparison/__snapshots__/FluidPerformanceIndicator.spec.tsx.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FluidPerformanceIndicator component should render "no data" message when value is not available 1`] = `
+<div>
+  <button
+    class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-5 fpi"
+    role="listitem"
+    tabindex="0"
+    type="button"
+  >
+    <div
+      class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-6"
+    >
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="50"
+        width="50"
+      >
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
+      <div
+        class="fpi-content"
+        data-testid="fluid-type-WATER"
+      >
+        <div
+          class="fpi-content-no-data"
+        >
+          <span>
+            performance_indicator.fpi.no_data
+          </span>
+        </div>
+      </div>
+    </div>
+    <span
+      class="MuiCardActionArea-focusHighlight"
+    />
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
+
+exports[`FluidPerformanceIndicator component should render elec indicators correctly and navigate on click 1`] = `
+<div>
+  <button
+    class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 fpi"
+    role="listitem"
+    tabindex="0"
+    type="button"
+  >
+    <div
+      class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+    >
+      <svg
+        aria-hidden="true"
+        class="styles__icon___23x3R"
+        height="50"
+        width="50"
+      >
+        <use
+          xlink:href="#test-file-stub"
+        />
+      </svg>
+      <div
+        class="fpi-content"
+        data-testid="fluid-type-ELECTRICITY"
+      >
+        <div
+          class="fpi-value"
+          data-testid="fluid-value-ELECTRICITY"
+        >
+          <span
+            class="fpi-load"
+          >
+            100,00
+          </span>
+          <span
+            class="fpi-unit"
+          >
+            FLUID.ELECTRICITY.UNIT
+          </span>
+        </div>
+        <div
+          class="fpi-comparison"
+          data-testid="fluid-comparison-ELECTRICITY"
+        >
+          <span
+            class="percent positive"
+          >
+            +10,00 %
+          </span>
+          <span
+            class="fpi-comparison-date"
+          >
+             / avril 2024
+          </span>
+        </div>
+      </div>
+    </div>
+    <span
+      class="MuiCardActionArea-focusHighlight"
+    />
+    <span
+      class="MuiTouchRipple-root"
+    />
+  </button>
+</div>
+`;
diff --git a/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap b/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
index eac3ee09c526dd84802cca03337293575eb5d0df..c2588b10f69b1481b6cbdf17f431ba9ca71ec57c 100644
--- a/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
@@ -23,39 +23,43 @@ exports[`TemperatureComparison component should be rendered correctly with cold
       </div>
       <div>
         <span
-          class="tc-text text-12"
+          class="text-12"
         >
           analysis.temperature_comparison.comparison
         </span>
         <span
-          class="tc-period text-12-bold"
+          class="text-12-bold"
         >
            
           novembre 2022
         </span>
       </div>
     </div>
-    <button
-      aria-label="analysis.temperature_comparison.info_button"
-      class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 info-icon"
-      tabindex="0"
-      type="button"
+    <div
+      class="buttonContainer"
     >
-      <span
-        class="MuiIconButton-label"
+      <button
+        aria-label="analysis.temperature_comparison.info_button"
+        class="MuiButtonBase-root MuiIconButton-root info-icon"
+        tabindex="0"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="styles__icon___23x3R"
-          height="16"
-          width="16"
+        <span
+          class="MuiIconButton-label"
         >
-          <use
-            xlink:href="#test-file-stub"
-          />
-        </svg>
-      </span>
-    </button>
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="16"
+            width="16"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </div>
 </div>
 `;
@@ -84,39 +88,43 @@ exports[`TemperatureComparison component should be rendered correctly with hot r
       </div>
       <div>
         <span
-          class="tc-text text-12"
+          class="text-12"
         >
           analysis.temperature_comparison.comparison
         </span>
         <span
-          class="tc-period text-12-bold"
+          class="text-12-bold"
         >
            
           novembre 2022
         </span>
       </div>
     </div>
-    <button
-      aria-label="analysis.temperature_comparison.info_button"
-      class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 info-icon"
-      tabindex="0"
-      type="button"
+    <div
+      class="buttonContainer"
     >
-      <span
-        class="MuiIconButton-label"
+      <button
+        aria-label="analysis.temperature_comparison.info_button"
+        class="MuiButtonBase-root MuiIconButton-root info-icon"
+        tabindex="0"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="styles__icon___23x3R"
-          height="16"
-          width="16"
+        <span
+          class="MuiIconButton-label"
         >
-          <use
-            xlink:href="#test-file-stub"
-          />
-        </svg>
-      </span>
-    </button>
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="16"
+            width="16"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss b/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
index bd93542a3ce2d389c0d16db289dfe974815548a7..c896338527caab8408b9342b185757b113ebe61a 100644
--- a/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
+++ b/src/components/Analysis/Comparison/fluidPerformanceIndicator.scss
@@ -26,36 +26,18 @@
 }
 
 //FluidPerformanceIndicator
-.fpi {
-  display: flex;
-  flex-direction: row;
+button.fpi {
   border: 1px solid $grey-dark;
-  border-radius: 4px;
-  padding: 16px 22px;
-  gap: 1rem;
-  align-items: center;
   box-shadow: 0px 4px 16px 0px $black-shadow;
   transition: background-color 0.3s;
-  background: linear-gradient(180deg, #323339 0%, #25262b 100%);
-  cursor: pointer;
-
-  &:hover {
-    background: linear-gradient(
-      180deg,
-      rgba(70, 71, 77, 0.7) 0%,
-      rgba(57, 58, 63, 0.7) 100%
-    );
-  }
 
   .fpi-content {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    text-align: left;
     .fpi-value {
       display: flex;
       flex-direction: row;
-      gap: 4px;
       align-items: flex-end;
       .fpi-load {
         font-size: 1.75rem;
diff --git a/src/components/Analysis/Comparison/temperatureComparison.scss b/src/components/Analysis/Comparison/temperatureComparison.scss
index ce4fc3e5e665d169435eb4df2ffa3975962b3429..62e23c5de94e8335608a4d54ad8bd5d587b637f6 100644
--- a/src/components/Analysis/Comparison/temperatureComparison.scss
+++ b/src/components/Analysis/Comparison/temperatureComparison.scss
@@ -3,13 +3,21 @@
 
 .temperatureComparison {
   display: flex;
+  align-items: center;
   border: 1px solid $grey-dark;
   border-radius: 4px;
-  padding: 4px 4px 8px 22px;
+  padding: 8px 4px 8px 20px;
   box-shadow: 0px 4px 16px 0px $black-shadow;
   background: linear-gradient(180deg, #323339 0%, #25262b 100%);
   background-position: bottom right;
   background-repeat: no-repeat;
+  height: 60px;
+  transition: all 0.3s ease-in-out;
+
+  &.loading {
+    justify-content: center;
+  }
+
   &.hot {
     background-image: url('../../../assets/png/temperatures/hot.svg'),
       linear-gradient(259deg, rgba(6, 29, 62, 0) 25.28%, #77aee0 121.36%),
@@ -30,21 +38,20 @@
 
   .tc-content {
     text-align: left;
-    padding-top: 4px;
     flex-grow: 1;
     color: $white;
-    .tc-text {
-      font-weight: 200;
-    }
-    .tc-period {
-      font-weight: 900;
-    }
   }
 
-  .info-icon {
-    padding: 0;
-    stroke: $white;
+  .buttonContainer {
+    display: flex;
     align-items: flex-start;
     height: 100%;
+    .info-icon {
+      align-items: flex-start;
+      padding: 0;
+      position: relative;
+      top: -4px;
+      stroke: $white;
+    }
   }
 }
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
index dabce7334c669a599f8df2b25cd9cc87fd2546b9..289590c65d54ea47acd02f3c8eefbb34b46d65c6 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx
@@ -3,7 +3,11 @@ import { DateTime } from 'luxon'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { dataLoadArray } from 'tests/__mocks__/chartData.mock'
-import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import {
+  createMockEcolyoStore,
+  mockChartState,
+  mockGlobalState,
+} from 'tests/__mocks__/store'
 import ElecHalfHourChart from './ElecHalfHourChart'
 
 jest.mock('services/dateChart.service', () => {
@@ -15,6 +19,7 @@ jest.mock('services/dateChart.service', () => {
 describe('ElecHalfHourChart component', () => {
   const store = createMockEcolyoStore({
     chart: {
+      ...mockChartState,
       selectedDate: DateTime.fromISO('2021-07-01T00:00:00.000Z', {
         zone: 'utc',
       }),
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.tsx
index 51fb203428079b883f30e49696061b6077779e78..fab3716510634d8527e9df64c9eb9cc202fc7040 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.tsx
@@ -30,11 +30,7 @@ const ElecHalfHourChart = ({ dataLoad, isWeekend }: ElecHalfHourChartProps) => {
   }
 
   const xScale: ScaleBand<string> = scaleBand()
-    .domain(
-      dataLoad.map((d: Dataload) =>
-        d.date.toLocaleString(DateTime.DATETIME_SHORT)
-      )
-    )
+    .domain(dataLoad.map(d => d.date.toLocaleString(DateTime.DATETIME_SHORT)))
     .range([0, getContentWidth()])
     .padding(0.1)
 
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index a7ee2e698aca2fb1a4d95601ccd9bd5da5993c85..47213f9d65e93bba53fca4971eecd1c1d6fc363d 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -1,14 +1,14 @@
 import { Button } from '@material-ui/core'
-import IconButton from '@material-ui/core/IconButton'
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import MaxPowerIcon from 'assets/icons/ico/maxPower.svg'
 import MinIcon from 'assets/icons/ico/minimum.svg'
 import OffPeakHourIcon from 'assets/icons/ico/offPeakHour.svg'
 import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, TimeStep } from 'enums'
 import {
   AggregatedEnedisMonthlyDataloads,
@@ -86,7 +86,6 @@ const ElecHalfHourMonthlyAnalysis = ({
         FluidType.ELECTRICITY,
         TimeStep.HALF_AN_HOUR
       )
-      if (!subscribed) return
       if (isHalfHourLoadActivated) {
         setIsHalfHourActivated(true)
         const aggregatedDate = analysisMonth.minus({ month: 1 })
@@ -107,7 +106,7 @@ const ElecHalfHourMonthlyAnalysis = ({
 
       setIsLoading(false)
     }
-    fetchEnedisAnalysisData()
+    subscribed && fetchEnedisAnalysisData()
 
     return () => {
       subscribed = false
@@ -122,11 +121,11 @@ const ElecHalfHourMonthlyAnalysis = ({
         FluidType.ELECTRICITY,
         analysisMonth.minus({ month: 1 })
       )
-      if (subscribed && price) {
+      if (price) {
         setElecPrice(price)
       }
     }
-    getAllLastPrices()
+    subscribed && getAllLastPrices()
 
     return () => {
       subscribed = false
@@ -136,14 +135,12 @@ const ElecHalfHourMonthlyAnalysis = ({
   useEffect(() => {
     let subscribed = true
     async function getOffPeakHours() {
-      if (subscribed) {
-        const offPeakHours = await emas.getOffPeakHours()
-        if (offPeakHours) {
-          setOffPeakHours(offPeakHours)
-        }
+      const offPeakHours = await emas.getOffPeakHours()
+      if (offPeakHours) {
+        setOffPeakHours(offPeakHours)
       }
     }
-    getOffPeakHours()
+    subscribed && getOffPeakHours()
 
     return () => {
       subscribed = false
@@ -152,7 +149,7 @@ const ElecHalfHourMonthlyAnalysis = ({
 
   return (
     <div className="special-elec-container">
-      <Icon
+      <StyledIcon
         className="elec-icon"
         icon={getNavPicto(FluidType.ELECTRICITY, true, true)}
         size={42}
@@ -166,13 +163,13 @@ const ElecHalfHourMonthlyAnalysis = ({
       {isHalfHourActivated && (
         <>
           <div className="navigator">
-            <IconButton
-              aria-label={t('consumption.accessibility.button_previous_value')}
+            <StyledIconButton
+              icon={LeftArrowIcon}
+              sized={24}
               onClick={() => setIsWeekend(prev => !prev)}
+              aria-label={t('consumption.accessibility.button_previous_value')}
               className="arrow-prev"
-            >
-              <Icon icon={LeftArrowIcon} size={24} />
-            </IconButton>
+            />
             <div className="average text-18-normal">
               <div className="text-1">{t('special_elec.average')}</div>
               <div className="text-2 text-18-bold">
@@ -184,93 +181,113 @@ const ElecHalfHourMonthlyAnalysis = ({
                 </span>
               </div>
             </div>
-            <IconButton
-              aria-label={t('consumption.accessibility.button_next_value')}
+            <StyledIconButton
+              icon={RightArrowIcon}
+              sized={24}
               onClick={() => setIsWeekend(prev => !prev)}
+              aria-label={t('consumption.accessibility.button_next_value')}
               className="arrow-next"
-            >
-              <Icon icon={RightArrowIcon} size={24} />
-            </IconButton>
+            />
           </div>
           {isLoading && <Loader color="elec" />}
           {!isLoading && (
             <>
               {getPowerChart()}
               {enedisAnalysisValues && isDataFullyComplete(monthDataloads) && (
-                <div className="min-max">
-                  <div className="container">
-                    <Icon icon={MaxPowerIcon} size={40} className="minIcon" />
-                    <div className="text">
-                      <div className="min text-18-normal">
-                        {t('special_elec.maxPower')}
-                      </div>
-                    </div>
-                    <div className="value kvAval">
-                      {enedisAnalysisValues.maxPower !== 0 &&
-                      enedisAnalysisValues.maxPower !== null ? (
-                        <div className="text-18-bold">
-                          {enedisAnalysisValues.maxPower.toFixed(1)}
-                          <span className="text-18-normal"> kVA</span>
-                        </div>
-                      ) : (
-                        <span>----</span>
-                      )}
-                    </div>
-                  </div>
-                  {enedisAnalysisValues?.offPeakHoursRatio != null && (
+                <>
+                  <div className="elec-infos">
                     <div className="container">
-                      <Icon
-                        icon={OffPeakHourIcon}
+                      <StyledIcon
+                        icon={MaxPowerIcon}
                         size={40}
                         className="minIcon"
                       />
-                      <div className="text">
-                        <div className="min text-18-normal">
-                          {t('special_elec.offPeakHour')}
-                        </div>
-                      </div>
-                      <div className="value kvAval">
-                        <div className="text-18-bold">
-                          {Math.round(
-                            enedisAnalysisValues.offPeakHoursRatio * 100
+                      <div className="text text-18-normal">
+                        <div className="row">
+                          {t('special_elec.maxPower')}
+                          {enedisAnalysisValues.maxPower !== 0 &&
+                          enedisAnalysisValues.maxPower !== null ? (
+                            <div className="value">
+                              <div className="text-18-bold">
+                                {enedisAnalysisValues.maxPower.toFixed(1)}
+                              </div>
+                              <span> kVA</span>
+                            </div>
+                          ) : (
+                            <span>----</span>
                           )}
-                          <span className="text-18-normal"> %</span>
                         </div>
                       </div>
                     </div>
-                  )}
-                  <div className="container consomin">
-                    <Icon icon={MinIcon} size={40} className="minIcon" />
-                    <div className="text text-18-normal">
-                      <div>{t('special_elec.min')}</div>
-                      <div>{t('special_elec.percentage')}</div>
-                      <div>{t('special_elec.price')}</div>
-                    </div>
-                    <div className="value">
-                      {enedisAnalysisValues.minimumLoad !== 0 &&
-                      enedisAnalysisValues.minimumLoad !== null ? (
-                        <>
-                          <div className="text-18-bold">
-                            {enedisAnalysisValues.minimumLoad.toFixed(1)}
-                            <span className="text-18-normal"> kWh</span>
-                          </div>
-                          <div className="text-18-bold">
-                            {facturePercentage?.toFixed(0) || '---'}
-                            <span className="text-18-normal"> %</span>
+                    {enedisAnalysisValues?.offPeakHoursRatio != null && (
+                      <div className="container">
+                        <StyledIcon
+                          icon={OffPeakHourIcon}
+                          size={40}
+                          className="minIcon"
+                        />
+                        <div className="text text-18-normal">
+                          <div className="row">
+                            {t('special_elec.offPeakHour')}
+                            <div className="value">
+                              <span className="text-18-bold">
+                                {Math.round(
+                                  enedisAnalysisValues.offPeakHoursRatio * 100
+                                )}
+                              </span>
+                              <span> %</span>
+                            </div>
                           </div>
-                          <div className="text-18-bold">
-                            {elecPrice?.price
-                              ? (
-                                  enedisAnalysisValues.minimumLoad *
-                                  elecPrice.price
-                                ).toFixed(1)
-                              : '---'}
-                            <span className="text-18-normal"> €</span>
-                          </div>
-                        </>
-                      ) : (
-                        <span>----</span>
-                      )}
+                        </div>
+                      </div>
+                    )}
+                    <div className="container">
+                      <StyledIcon
+                        icon={MinIcon}
+                        size={40}
+                        className="minIcon"
+                      />
+                      <div className="text text-18-normal">
+                        {enedisAnalysisValues.minimumLoad !== 0 &&
+                        enedisAnalysisValues.minimumLoad !== null ? (
+                          <>
+                            <div className="row">
+                              <div>{t('special_elec.min')}</div>
+                              <div className="value">
+                                <span className="text-18-bold">
+                                  {enedisAnalysisValues.minimumLoad.toFixed(1)}
+                                </span>
+                                <span> kWh</span>
+                              </div>
+                            </div>
+                            <div className="row">
+                              <div>{t('special_elec.percentage')}</div>
+                              <div className="value">
+                                <span className="text-18-bold">
+                                  {facturePercentage?.toFixed(0) || '---'}
+                                </span>
+                                <span> %</span>
+                              </div>
+                            </div>
+                            <div className="row">
+                              <div>{t('special_elec.price')}</div>
+                              <div className="value">
+                                <span className="text-18-bold">
+                                  {elecPrice?.price
+                                    ? (
+                                        enedisAnalysisValues.minimumLoad *
+                                        elecPrice.price
+                                      ).toFixed(1)
+                                    : '---'}
+                                </span>
+                                <span> €</span>
+                              </div>
+                            </div>
+                          </>
+                        ) : (
+                          <span>----</span>
+                        )}
+                      </div>
                     </div>
                   </div>
 
@@ -280,7 +297,7 @@ const ElecHalfHourMonthlyAnalysis = ({
                   >
                     {t('special_elec.showModal')}
                   </Button>
-                </div>
+                </>
               )}
             </>
           )}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
index f755d44ae425545eb0761e878cf378e08c022956..c1494be795c50f202adb6f455c84916c093d9b35 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecInfoModal.tsx
@@ -1,8 +1,7 @@
-import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import {
   OffPeakHours,
@@ -41,13 +40,12 @@ const ElecInfoModal = ({
       <div id="accessibility-title">
         {t('elec_info_modal.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('elec_info_modal.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="elecInfoModal">
         <div className="title text-18-bold">
           {t('elec_info_modal.maxPowerTitle')}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 1f0c220c490f82d9382dd7825eb5f08f85f72bc1..493674eb37c8d7324a028f9cf1d990187cc1adf1 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -112,7 +112,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
               </lineargradient>
             </defs>
             <path
-              class="bar-ELECTRICITY weekend bounce-3 delay--0"
+              class="bar-ELECTRICITY weekend bounce-1 delay--0"
               d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -124,11 +124,16 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
             />
           </g>
           <g
+            class="barValue"
+            tabindex="-1"
             transform="translate(21.219512195121922, 0)"
           >
+            <title>
+              consumption.accessibility.bar
+            </title>
             <defs>
               <lineargradient
-                class="bar-ELECTRICITY weekend bounce-3 delay--0"
+                class="bar-ELECTRICITY weekend bounce-1 delay--0"
                 id="gradient"
                 x1="0"
                 x2="0"
@@ -146,7 +151,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
               </lineargradient>
             </defs>
             <path
-              class="bar-ELECTRICITY weekend bounce-3 delay--0"
+              class="bar-ELECTRICITY weekend bounce-1 delay--0"
               d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -195,7 +200,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
               </lineargradient>
             </defs>
             <path
-              class="bar-ELECTRICITY weekend bounce-3 delay--1"
+              class="bar-ELECTRICITY weekend bounce-1 delay--1"
               d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -207,11 +212,16 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
             />
           </g>
           <g
+            class="barValue"
+            tabindex="-1"
             transform="translate(233.41463414634146, 0)"
           >
+            <title>
+              consumption.accessibility.bar
+            </title>
             <defs>
               <lineargradient
-                class="bar-ELECTRICITY weekend bounce-3 delay--1"
+                class="bar-ELECTRICITY weekend bounce-1 delay--1"
                 id="gradient"
                 x1="0"
                 x2="0"
@@ -229,7 +239,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
               </lineargradient>
             </defs>
             <path
-              class="bar-ELECTRICITY weekend bounce-3 delay--1"
+              class="bar-ELECTRICITY weekend bounce-1 delay--1"
               d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -278,7 +288,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
               </lineargradient>
             </defs>
             <path
-              class="bar-ELECTRICITY weekend bounce-3 delay--2"
+              class="bar-ELECTRICITY weekend bounce-1 delay--2"
               d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -290,11 +300,16 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
             />
           </g>
           <g
+            class="barValue"
+            tabindex="-1"
             transform="translate(445.609756097561, 0)"
           >
+            <title>
+              consumption.accessibility.bar
+            </title>
             <defs>
               <lineargradient
-                class="bar-ELECTRICITY weekend bounce-3 delay--2"
+                class="bar-ELECTRICITY weekend bounce-1 delay--2"
                 id="gradient"
                 x1="0"
                 x2="0"
@@ -312,7 +327,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
               </lineargradient>
             </defs>
             <path
-              class="bar-ELECTRICITY weekend bounce-3 delay--2"
+              class="bar-ELECTRICITY weekend bounce-1 delay--2"
               d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -361,7 +376,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
               </lineargradient>
             </defs>
             <path
-              class="bar-ELECTRICITY weekend bounce-3 delay--3"
+              class="bar-ELECTRICITY weekend bounce-1 delay--3"
               d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -373,11 +388,16 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
             />
           </g>
           <g
+            class="barValue"
+            tabindex="-1"
             transform="translate(657.8048780487804, 0)"
           >
+            <title>
+              consumption.accessibility.bar
+            </title>
             <defs>
               <lineargradient
-                class="bar-ELECTRICITY weekend bounce-3 delay--3"
+                class="bar-ELECTRICITY weekend bounce-1 delay--3"
                 id="gradient"
                 x1="0"
                 x2="0"
@@ -395,7 +415,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
               </lineargradient>
             </defs>
             <path
-              class="bar-ELECTRICITY weekend bounce-3 delay--3"
+              class="bar-ELECTRICITY weekend bounce-1 delay--3"
               d="
       M0,4
       a4,4 0 0 1 4,-4
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 6e75e12edacb1b00e73a65b3de0d3f7be8b0684e..fdd25bb41103a0e031ea62934c9f3501a7623401 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
     class="special-elec-container"
   >
     <svg
+      aria-hidden="true"
       class="elec-icon styles__icon___23x3R"
       height="42"
       width="42"
@@ -34,6 +35,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
     class="special-elec-container"
   >
     <svg
+      aria-hidden="true"
       class="elec-icon styles__icon___23x3R"
       height="42"
       width="42"
@@ -60,6 +62,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
           class="MuiIconButton-label"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="24"
             width="24"
@@ -100,6 +103,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
           class="MuiIconButton-label"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="24"
             width="24"
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
index 940eea0eba67e229302d406768073180e0ad6356..8de384b77ddb9029ac0b808979db62710bbf9887 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`ElecInfoModal component should be rendered correctly with off-peak hour
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -150,6 +151,7 @@ exports[`ElecInfoModal component should be rendered correctly without off-peak h
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
index 3e0e4b36eeb61c61c7bc4a09ffe3ff483f5410c4..a325dcfbc3ac7c0e6f8ca3d5b769140546602c52 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
@@ -2,6 +2,9 @@
 
 .special-elec-container {
   color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 
   .elec-icon {
     margin: auto;
@@ -9,7 +12,6 @@
   }
   .title {
     text-align: center;
-    margin-top: 1rem;
     color: $grey-bright;
   }
   .navigator {
@@ -18,7 +20,6 @@
     align-items: center;
     width: 100%;
     text-align: center;
-    margin: 1rem 0;
     .text-1 {
       color: $grey-bright;
     }
@@ -35,44 +36,39 @@
   .activation-text {
     margin: 1rem 0 0.7rem 0;
   }
-  .oauthform-button-content {
-    display: flex;
-    padding: 0.5rem;
-  }
-  .oauthform-button-text {
-    text-align: left;
-    margin-left: 1rem;
-  }
-  .container {
-    margin-bottom: 1rem;
-    padding: 1rem;
-    border: 1px solid $grey-bright;
-    border-radius: 10px;
+
+  .elec-infos {
     display: flex;
+    flex-direction: column;
+    gap: 8px;
 
-    .min {
-      max-width: 150px;
-    }
-    .text {
+    .container {
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-    .value {
-      margin-left: auto;
-      display: flex;
-      flex-direction: column;
-      align-items: self-end;
-      min-width: 80px;
-      justify-content: space-between;
-    }
-    .kvAval {
-      margin: auto 0 auto auto;
+      padding: 1rem;
+      border: 1px solid $soft-grey;
+      border-radius: 10px;
+
+      .min {
+        max-width: 150px;
+      }
+      .text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 100%;
+      }
+      .row {
+        display: flex;
+        justify-content: space-between;
+        margin: auto 0;
+      }
+      .value {
+        display: flex;
+        gap: 4px;
+        margin: auto 0;
+      }
     }
   }
-  .consomin {
-    min-height: 100px;
-  }
   .no_data {
     text-align: center;
     color: white;
@@ -82,7 +78,3 @@
     margin: auto;
   }
 }
-.graph-elec-half-hour {
-  height: 12rem;
-  margin-top: 2rem;
-}
diff --git a/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.tsx b/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.tsx
index 10fb96acb4314971829e4319a738e615c61bdd53..15e0f95c6f43163a2a18001d1c7eb492214d554e 100644
--- a/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.tsx
+++ b/src/components/Analysis/IncompleteDataWarning/IncompleteDataWarning.tsx
@@ -1,6 +1,6 @@
 import warningDark from 'assets/icons/ico/warning-dark.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
 import { formatListWithAnd } from 'utils/utils'
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
index 46656f1f9406b307455512e596f4ddeddb8941a5..b0339c6d3ee7d56a81dde2cd5cb1ce2e0c3b8a02 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
@@ -1,15 +1,14 @@
-import IconButton from '@material-ui/core/IconButton'
 import GraphIcon from 'assets/icons/ico/graph-icon.svg'
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
 import BarChart from 'components/Charts/BarChart'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import DataloadSection from 'components/ConsumptionVisualizer/DataloadSection'
 import { useChartResize } from 'components/Hooks/useChartResize'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { DataloadSectionType, FluidType, TimeStep } from 'enums'
 import { Datachart, Dataload, TimePeriod } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
@@ -62,11 +61,11 @@ const MaxConsumptionCard = ({
         endDate: analysisMonth.minus({ month: 1 }).endOf('month'),
       }
       const consumptionService = new ConsumptionDataManager(client)
-      const monthlyData = await consumptionService.getGraphData(
+      const monthlyData = await consumptionService.getGraphData({
         timePeriod,
-        TimeStep.DAY,
-        [currentFluid]
-      )
+        timeStep: TimeStep.DAY,
+        fluidTypes: [currentFluid],
+      })
 
       if (monthlyData && monthlyData?.actualData.length > 0) {
         setChartData(monthlyData)
@@ -80,9 +79,8 @@ const MaxConsumptionCard = ({
       }
       setIsLoading(false)
     }
-    if (subscribed) {
-      getMaxLoadData()
-    }
+    subscribed && getMaxLoadData()
+
     return () => {
       subscribed = false
     }
@@ -102,25 +100,25 @@ const MaxConsumptionCard = ({
   }
 
   const buttonPrev = () => (
-    <IconButton
-      aria-label={t('consumption.accessibility.button_previous_value')}
+    <StyledIconButton
+      icon={LeftArrowIcon}
+      sized={24}
       onClick={() => handleFluidChange(-1)}
-      className="arrow-prev"
       disabled={fluidsWithData.length <= 1}
-    >
-      <Icon icon={LeftArrowIcon} size={24} />
-    </IconButton>
+      aria-label={t('consumption.accessibility.button_previous_value')}
+      className="arrow-prev"
+    />
   )
 
   const buttonNext = () => (
-    <IconButton
-      aria-label={t('consumption.accessibility.button_next_value')}
+    <StyledIconButton
+      icon={RightArrowIcon}
+      sized={24}
       onClick={() => handleFluidChange(1)}
-      className="arrow-next"
       disabled={fluidsWithData.length <= 1}
-    >
-      <Icon icon={RightArrowIcon} size={24} />
-    </IconButton>
+      aria-label={t('consumption.accessibility.button_next_value')}
+      className="arrow-next"
+    />
   )
 
   return (
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 91030a58f917c22d05e9efbdecb62d6fb6013d9d..4839bb3492eca9e99483242c111061088c5a73d4 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -33,6 +33,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
           class="MuiIconButton-label"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="24"
             width="24"
@@ -61,6 +62,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
           class="MuiIconButton-label"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="24"
             width="24"
@@ -121,7 +123,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
               transform="translate(54.6875, -40)"
             >
               <rect
-                class="background-false"
+                class="background-true"
                 fill="#E0E0E0"
                 height="220"
                 width="218.75"
@@ -152,7 +154,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
                 </lineargradient>
               </defs>
               <path
-                class="bar-ELECTRICITY disabled bounce-3 delay--0"
+                class="bar-ELECTRICITY selected disabled bounce-1 delay--0"
                 d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -164,11 +166,16 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
               />
             </g>
             <g
+              class="barValue"
+              tabindex="-1"
               transform="translate(54.6875, 168.73935065329292)"
             >
+              <title>
+                consumption.accessibility.bar
+              </title>
               <defs>
                 <lineargradient
-                  class="bar-ELECTRICITY disabled bounce-3 delay--0"
+                  class="bar-ELECTRICITY selected disabled bounce-1 delay--0"
                   id="gradient"
                   x1="0"
                   x2="0"
@@ -186,7 +193,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
                 </lineargradient>
               </defs>
               <path
-                class="bar-ELECTRICITY disabled bounce-3 delay--0"
+                class="bar-ELECTRICITY selected disabled bounce-1 delay--0"
                 d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -235,7 +242,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
                 </lineargradient>
               </defs>
               <path
-                class="bar-ELECTRICITY disabled bounce-3 delay--1"
+                class="bar-ELECTRICITY disabled bounce-1 delay--1"
                 d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -247,11 +254,16 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
               />
             </g>
             <g
+              class="barValue"
+              tabindex="-1"
               transform="translate(328.125, 168.73935065329292)"
             >
+              <title>
+                consumption.accessibility.bar
+              </title>
               <defs>
                 <lineargradient
-                  class="bar-ELECTRICITY disabled bounce-3 delay--1"
+                  class="bar-ELECTRICITY disabled bounce-1 delay--1"
                   id="gradient"
                   x1="0"
                   x2="0"
@@ -269,7 +281,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
                 </lineargradient>
               </defs>
               <path
-                class="bar-ELECTRICITY disabled bounce-3 delay--1"
+                class="bar-ELECTRICITY disabled bounce-1 delay--1"
                 d="
       M0,4
       a4,4 0 0 1 4,-4
@@ -318,7 +330,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
                 </lineargradient>
               </defs>
               <path
-                class="bar-ELECTRICITY bar-UPCOMING disabled bounce-3 delay--2"
+                class="bar-ELECTRICITY bar-UPCOMING disabled bounce-1 delay--2"
                 d="
       M0,4
       a4,4 0 0 1 4,-4
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 0b36bc41ba1b3cbc27a146527b9a4308497401ff..dbe071720132403ca6d0197190bfca46c84b42b0 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -7,14 +7,16 @@ import React, { useEffect, useMemo, useState } from 'react'
 import ConsumptionService from 'services/consumption.service'
 import PerformanceIndicatorService from 'services/performanceIndicator.service'
 import { useAppSelector } from 'store/hooks'
+import { allFluids } from 'utils/utils'
 import Comparison from './Comparison/Comparison'
 import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis'
 import IncompleteDataWarning from './IncompleteDataWarning/IncompleteDataWarning'
 import MaxConsumptionCard from './MaxConsumptionCard/MaxConsumptionCard'
+import './monthlyanalysis.scss'
+import NewsletterReminder from './NewsletterReminder/NewsletterReminder'
 import NoAnalysisModal from './NoKonnector/NoAnalysisModal'
 import ProfileComparator from './ProfileComparator/ProfileComparator'
 import TotalAnalysisChart from './TotalAnalysisChart/TotalAnalysisChart'
-import './monthlyanalysis.scss'
 
 interface MonthlyAnalysisProps {
   saveLastScrollPosition: () => void
@@ -27,8 +29,9 @@ const MonthlyAnalysis = ({
 }: MonthlyAnalysisProps) => {
   const client = useClient()
   const {
-    analysis: { analysisMonth },
+    analysis: { analysisMonth, haveSeenNewsletterReminder },
     global: { fluidStatus },
+    profile: { sendAnalysisNotification, isAnalysisReminderEnabled },
   } = useAppSelector(state => state.ecolyo)
 
   const consumptionService = useMemo(
@@ -60,6 +63,11 @@ const MonthlyAnalysis = ({
       percentageVariation: 0,
     })
 
+  const displayNewsletterReminder =
+    !sendAnalysisNotification &&
+    isAnalysisReminderEnabled &&
+    !haveSeenNewsletterReminder
+
   useEffect(() => {
     let subscribed = true
 
@@ -74,17 +82,16 @@ const MonthlyAnalysis = ({
         startDate: analysisMonth.minus({ month: 2 }).startOf('month'),
         endDate: analysisMonth.minus({ month: 2 }).endOf('month'),
       }
-      const resultFluids =
-        await consumptionService.getFluidsWithDataForTimePeriod(
-          [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
+      const [resultFluids, fetchedIncompleteDataFluids] = await Promise.all([
+        consumptionService.getFluidsWithDataForTimePeriod(
+          allFluids,
           timePeriod
-        )
-
-      const fetchedIncompleteDataFluids =
-        await consumptionService.getFluidsWithIncompleteData(
-          [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS],
+        ),
+        consumptionService.getFluidsWithIncompleteData(
+          allFluids,
           timePeriod.startDate
-        )
+        ),
+      ])
       setIncompleteDataFluids(fetchedIncompleteDataFluids)
 
       const fetchedPerformanceIndicators =
@@ -111,9 +118,7 @@ const MonthlyAnalysis = ({
       setLoadingAnalysis(false)
     }
 
-    if (subscribed) {
-      populateData()
-    }
+    subscribed && populateData()
 
     return () => {
       saveLastScrollPosition()
@@ -146,6 +151,12 @@ const MonthlyAnalysis = ({
       {!isLoadingAnalysis && (
         <Fade in={!isLoadingAnalysis}>
           <div className="analysis-root">
+            {displayNewsletterReminder && (
+              <div className="analysis-content">
+                <NewsletterReminder />
+              </div>
+            )}
+
             {incompleteDataFluids.length !== 0 && (
               <div className="analysis-content">
                 <IncompleteDataWarning
diff --git a/src/components/Analysis/NewsletterReminder/NewsletterReminder.spec.tsx b/src/components/Analysis/NewsletterReminder/NewsletterReminder.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..57bf702651418751945ae4f7a4ced613267a3280
--- /dev/null
+++ b/src/components/Analysis/NewsletterReminder/NewsletterReminder.spec.tsx
@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import NewsletterReminder from './NewsletterReminder'
+
+describe('NewsletterReminder', () => {
+  const store = createMockEcolyoStore()
+
+  it('renders component correctly and have correct snapshot', async () => {
+    const { container } = render(
+      <Provider store={store}>
+        <NewsletterReminder />
+      </Provider>
+    )
+    expect(container).toMatchSnapshot()
+  })
+})
diff --git a/src/components/Analysis/NewsletterReminder/NewsletterReminder.tsx b/src/components/Analysis/NewsletterReminder/NewsletterReminder.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..92d0c30dfc7bf9ba83150225198809bf0e28fa64
--- /dev/null
+++ b/src/components/Analysis/NewsletterReminder/NewsletterReminder.tsx
@@ -0,0 +1,58 @@
+import { Button } from '@material-ui/core'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import React from 'react'
+import { setHaveSeenNewsletterReminder } from 'store/analysis/analysis.slice'
+import { useAppDispatch } from 'store/hooks'
+import { updateProfile } from 'store/profile/profile.slice'
+import './newsletterReminder.scss'
+
+const NewsletterReminder = () => {
+  const { t } = useI18n()
+  const dispatch = useAppDispatch()
+
+  return (
+    <div className="newsletter-reminder">
+      <StyledIconButton
+        icon={CloseIcon}
+        sized={18}
+        onClick={() => dispatch(setHaveSeenNewsletterReminder(true))}
+        aria-label={t('analysis.newsletter_reminder.close')}
+        className="close-button"
+      />
+      <div className="text-container">
+        <h2 className="title text-20-bold">
+          {t('analysis.newsletter_reminder.title')}
+        </h2>
+        <p className="text-18-normal">
+          {t('analysis.newsletter_reminder.text')}
+        </p>
+      </div>
+      <div className="buttons">
+        <Button
+          className="btnPrimary"
+          onClick={() =>
+            dispatch(updateProfile({ sendAnalysisNotification: true }))
+          }
+        >
+          {t('analysis.newsletter_reminder.button')}
+        </Button>
+        <Button
+          classes={{
+            root: 'btnText',
+            label: 'text-16-normal stop-show',
+          }}
+          size="small"
+          onClick={() =>
+            dispatch(updateProfile({ isAnalysisReminderEnabled: false }))
+          }
+        >
+          {t('analysis.newsletter_reminder.stop_showing')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default NewsletterReminder
diff --git a/src/components/Analysis/NewsletterReminder/__snapshots__/NewsletterReminder.spec.tsx.snap b/src/components/Analysis/NewsletterReminder/__snapshots__/NewsletterReminder.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..bd881fec4b75b973494922ee89b9aba0b1815b8d
--- /dev/null
+++ b/src/components/Analysis/NewsletterReminder/__snapshots__/NewsletterReminder.spec.tsx.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewsletterReminder renders component correctly and have correct snapshot 1`] = `
+<div>
+  <div
+    class="newsletter-reminder"
+  >
+    <button
+      aria-label="analysis.newsletter_reminder.close"
+      class="MuiButtonBase-root MuiIconButton-root close-button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <svg
+          aria-hidden="true"
+          class="styles__icon___23x3R"
+          height="18"
+          width="18"
+        >
+          <use
+            xlink:href="#test-file-stub"
+          />
+        </svg>
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+    <div
+      class="text-container"
+    >
+      <h2
+        class="title text-20-bold"
+      >
+        analysis.newsletter_reminder.title
+      </h2>
+      <p
+        class="text-18-normal"
+      >
+        analysis.newsletter_reminder.text
+      </p>
+    </div>
+    <div
+      class="buttons"
+    >
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label"
+        >
+          analysis.newsletter_reminder.button
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        class="MuiButtonBase-root MuiButton-root btnText MuiButton-text MuiButton-textSizeSmall MuiButton-sizeSmall"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label text-16-normal stop-show"
+        >
+          analysis.newsletter_reminder.stop_showing
+        </span>
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Analysis/NewsletterReminder/newsletterReminder.scss b/src/components/Analysis/NewsletterReminder/newsletterReminder.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e2366137e672b43c8c7f07b628cb076791f25f83
--- /dev/null
+++ b/src/components/Analysis/NewsletterReminder/newsletterReminder.scss
@@ -0,0 +1,46 @@
+@import 'src/styles/base/color';
+
+.newsletter-reminder {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  background: $grey-linear-gradient-background;
+  border: 1px solid $gold-shadow;
+  border-radius: 4px;
+  padding: 24px 16px 12px 16px;
+  gap: 16px;
+
+  .close-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 5px 5px;
+  }
+
+  .text-container {
+    h2 {
+      color: $gold-shadow;
+      margin: 0;
+      padding-inline: 1.5rem;
+    }
+    p {
+      color: $white;
+      margin: 0;
+    }
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    button.btnPrimary {
+      max-width: 134px;
+    }
+    .stop-show {
+      color: $soft-grey;
+    }
+  }
+}
diff --git a/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx b/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
index c543f56bd904e0c4eae38680945db8f50aa2518b..b68ddbb2e0789a322558fd16b5abb91c421dcdf2 100644
--- a/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
+++ b/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
@@ -1,6 +1,6 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import './noAnalysisModal.scss'
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
index 90db508772bd64a1f1e1870f654e59e980027e9d..3ff398827566cb7b9534ee5d64ee515fe7107730 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
@@ -11,8 +11,7 @@ import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.s
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import { MonthlyForecast, PerformanceIndicator } from 'models'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -107,16 +106,15 @@ const ProfileComparator = ({
           analysisDate.year,
           analysisDate.month
         )
-        if (subscribed) {
-          setForecast(monthlyForecast)
-          if (monthlyForecast) {
-            getTotalValueWithConnectedFluids(monthlyForecast)
-          }
-          setIsLoading(false)
+
+        setForecast(monthlyForecast)
+        if (monthlyForecast) {
+          getTotalValueWithConnectedFluids(monthlyForecast)
         }
+        setIsLoading(false)
       }
     }
-    loadAverageConsumption()
+    subscribed && loadAverageConsumption()
     return () => {
       subscribed = false
     }
@@ -134,7 +132,6 @@ const ProfileComparator = ({
         {t('analysis.approximative_description')}
       </div>
       <Button
-        aria-label={t('analysis.accessibility.button_go_to_profil')}
         onClick={() => navigate('/profileType')}
         classes={{
           root: 'btnPrimary',
@@ -145,16 +142,11 @@ const ProfileComparator = ({
       >
         {t('analysis.accessibility.button_go_to_profil')}
       </Button>
-      <Icon
-        icon={PlaceHolderIcon}
-        width="100%"
-        height="60%"
-        alt="pas de profil remplis"
-      />
+      <StyledIcon icon={PlaceHolderIcon} width="100%" height="60%" />
     </div>
   )
 
-  const Consumption = (
+  const comparison = (
     <div className="analysis-graph">
       {isLoading ? (
         <div className="loader-container">
@@ -164,7 +156,6 @@ const ProfileComparator = ({
         <>
           <div className="consumption-title text-20-bold">
             <div className="user-title">{t('analysis.user_consumption')}</div>
-            <div />
             <div className="average-title">{t(`analysis.comparison`)}</div>
           </div>
           <ProfileComparatorRow
@@ -217,7 +208,7 @@ const ProfileComparator = ({
                 'profile_type.accessibility.button_toggle_average_home'
               )}
               expandIcon={
-                <Icon icon={chevronDown} size={16} className="accordion-icon" />
+                <StyledIcon icon={chevronDown} className="accordion-icon" />
               }
               classes={{
                 root: 'expansion-panel-summary',
@@ -262,10 +253,8 @@ const ProfileComparator = ({
         )}
       </div>
 
-      <div className="analysis-graph">
-        {!profile.isProfileTypeCompleted && profileNotCompleted}
-        {profile.isProfileTypeCompleted && Consumption}
-      </div>
+      {!profile.isProfileTypeCompleted && profileNotCompleted}
+      {profile.isProfileTypeCompleted && comparison}
     </>
   )
 }
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
index 62845a52f0cebe1be5cba0856bd46af2285133bc..18ccf5ee69556c50ba5e8ce37743a21a8f3eef66 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.spec.tsx
@@ -11,7 +11,7 @@ describe('AnalysisConsumptionRow component', () => {
   const performanceValue = 25
 
   describe('Multifluid row', () => {
-    it('should be rendered correctly for Multifluid and at least fluid connected', async () => {
+    it('should be rendered correctly for Multifluid and at least fluid connected', () => {
       const { container } = render(
         <ProfileComparatorRow
           fluidType={FluidType.MULTIFLUID}
@@ -34,7 +34,7 @@ describe('AnalysisConsumptionRow component', () => {
       ).toBeFalsy()
     })
 
-    it('should be rendered correctly for Multifluid and at none fluid connected', async () => {
+    it('should be rendered correctly for Multifluid and at none fluid connected', () => {
       const mockConnected = false
       const { container } = render(
         <ProfileComparatorRow
@@ -62,7 +62,7 @@ describe('AnalysisConsumptionRow component', () => {
   })
 
   describe('Single fluid row', () => {
-    it('should be rendered correctly for singleFluid connected for average', async () => {
+    it('should be rendered correctly for singleFluid connected for average', () => {
       const { container } = render(
         <ProfileComparatorRow
           fluidType={FluidType.ELECTRICITY}
@@ -90,7 +90,7 @@ describe('AnalysisConsumptionRow component', () => {
       ).toBeFalsy()
     })
 
-    it('should be rendered correctly for singleFluid not connected', async () => {
+    it('should be rendered correctly for singleFluid not connected', () => {
       const mockConnected = false
       const { container } = render(
         <ProfileComparatorRow
@@ -119,8 +119,8 @@ describe('AnalysisConsumptionRow component', () => {
       ).toBeTruthy()
     })
 
-    it('should be rendered correctly for singleFluid with none performance value', async () => {
-      const mockPerformanceValue: number | null = null
+    it('should be rendered correctly for singleFluid with none performance value', () => {
+      const mockPerformanceValue = null
       const { container } = render(
         <ProfileComparatorRow
           fluidType={FluidType.ELECTRICITY}
@@ -146,7 +146,7 @@ describe('AnalysisConsumptionRow component', () => {
       ).toBeFalsy()
     })
 
-    it('should be rendered correctly with unit', async () => {
+    it('should be rendered correctly with unit', () => {
       const mockForecast: MonthlyForecast = {
         ...mockMonthlyForecastJanuaryTestProfile1,
         fluidForecast: [
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
index 5d9fcb185d1862c01d949ba40d0ef8cf7ac7f7df..a4bc59be3d99603dcdf6a8bc1f19ee45a74d1164 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
@@ -1,7 +1,7 @@
 import EuroIcon from 'assets/icons/ico/euro-icon.svg'
 import classNames from 'classnames'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import { MonthlyForecast } from 'models'
 import React from 'react'
@@ -30,7 +30,7 @@ const ProfileComparatorRow = ({
   noData,
 }: ProfileComparatorRowProps) => {
   const { t } = useI18n()
-  const converterService: ConverterService = new ConverterService()
+  const converterService = new ConverterService()
   const maxPriceConsumption = Math.max(
     userPriceConsumption,
     homePriceConsumption
@@ -41,65 +41,58 @@ const ProfileComparatorRow = ({
   const FLUIDNAME = getFluidName(fluidType).toUpperCase()
 
   const fluidLoad =
-    forecast && !isMulti ? forecast.fluidForecast[fluidType].load : 0
+    !isMulti && forecast ? forecast.fluidForecast[fluidType].load : 0
 
   const formatFluidConsumptionForConso = () => {
     if (isMulti) {
       return `${formatNumberValues(userPriceConsumption).toString()} €`
-    } else {
-      if (performanceValue) {
-        // keeps unit in kWh for electricity and gas
-        if (isElecOrGas) {
-          return `${Math.round(performanceValue)} ${t(
-            `FLUID.${FLUIDNAME}.UNIT`
-          )}`
-        }
-        return performanceValue >= 1000 || fluidLoad >= 1000
-          ? formatNumberValues(performanceValue / 1000).toString() +
-              ' ' +
-              t(`FLUID.${FLUIDNAME}.MEGAUNIT`)
-          : Math.round(performanceValue) + ' ' + t(`FLUID.${FLUIDNAME}.UNIT`)
-      } else {
-        return '-'
+    }
+    if (performanceValue) {
+      // keeps unit in kWh for electricity and gas
+      if (isElecOrGas) {
+        return `${Math.round(performanceValue)} ${t(`FLUID.${FLUIDNAME}.UNIT`)}`
       }
+      return performanceValue >= 1000 || fluidLoad >= 1000
+        ? formatNumberValues(performanceValue / 1000).toString() +
+            ' ' +
+            t(`FLUID.${FLUIDNAME}.MEGAUNIT`)
+        : Math.round(performanceValue) + ' ' + t(`FLUID.${FLUIDNAME}.UNIT`)
     }
+    return '-'
   }
 
   const formatFluidConsumptionForForecast = () => {
     if (isMulti) {
       return `${formatNumberValues(homePriceConsumption).toString()} €`
-    } else {
-      // keeps unit in kWh for electricity and gas
-      if (isElecOrGas) {
-        return `${Math.round(fluidLoad)} ${t('FLUID.' + FLUIDNAME + '.UNIT')}`
-      }
-      return (performanceValue && performanceValue >= 1000) || fluidLoad >= 1000
-        ? formatNumberValues(fluidLoad / 1000).toString() +
-            ' ' +
-            t(`FLUID.${FLUIDNAME}.MEGAUNIT`)
-        : Math.round(fluidLoad) + ' ' + t(`FLUID.${FLUIDNAME}.UNIT`)
     }
+    // keeps unit in kWh for electricity and gas
+    if (isElecOrGas) {
+      return `${Math.round(fluidLoad)} ${t(`FLUID.${FLUIDNAME}.UNIT`)}`
+    }
+    return (performanceValue && performanceValue >= 1000) || fluidLoad >= 1000
+      ? formatNumberValues(fluidLoad / 1000).toString() +
+          ' ' +
+          t(`FLUID.${FLUIDNAME}.MEGAUNIT`)
+      : Math.round(fluidLoad) + ' ' + t(`FLUID.${FLUIDNAME}.UNIT`)
   }
 
   const getWidthForConso = () => {
     if (isMulti) {
       return `${(userPriceConsumption / maxPriceConsumption) * 100}%`
-    } else {
-      return `${
-        (converterService.LoadToEuro(performanceValue || 0, fluidType) /
-          maxPriceConsumption) *
-        100
-      }%`
     }
+    return `${
+      (converterService.LoadToEuro(performanceValue || 0, fluidType) /
+        maxPriceConsumption) *
+      100
+    }%`
   }
 
   const getWidthForForecast = () => {
     if (isMulti) {
       return `${(homePriceConsumption / maxPriceConsumption) * 100}%`
-    } else {
-      const fluidValue = forecast ? forecast.fluidForecast[fluidType].value : 0
-      return `${(fluidValue / maxPriceConsumption) * 100}%`
     }
+    const fluidValue = forecast ? forecast.fluidForecast[fluidType].value : 0
+    return `${(fluidValue / maxPriceConsumption) * 100}%`
   }
 
   const comparaisonText = connected
@@ -107,7 +100,12 @@ const ProfileComparatorRow = ({
     : t(`analysis.no_data`)
 
   return (
-    <div className={`analysisRow consumption-${FLUIDNAME.toLowerCase()}`}>
+    <div
+      aria-label={t(
+        `analysis.accessibility.comparison_${FLUIDNAME.toLowerCase()}`
+      )}
+      className={`analysisRow consumption-${FLUIDNAME.toLowerCase()}`}
+    >
       <div className="user-graph">
         <div
           className={classNames('price text-15-bold', {
diff --git a/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
index 0ec6fdfe3f1938edb876719ba7253d5b03b1752c..40897d20f9d65accdadbbc1b929458ef5a404575 100644
--- a/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
+++ b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
@@ -24,43 +24,38 @@ exports[`AnalysisConsumption component should be rendered correctly with profile
     </div>
   </div>
   <div
-    class="analysis-graph"
+    class="no-profile"
   >
     <div
-      class="no-profile"
+      class="text-16-normal"
     >
-      <div
-        class="text-16-normal"
-      >
-        analysis.approximative_description
-      </div>
-      <button
-        aria-label="analysis.accessibility.button_go_to_profil"
-        class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
-        data-testid="goToProfile"
-        tabindex="0"
-        type="button"
-      >
-        <span
-          class="MuiButton-label text-18-bold"
-        >
-          analysis.accessibility.button_go_to_profil
-        </span>
-        <span
-          class="MuiTouchRipple-root"
-        />
-      </button>
-      <svg
-        alt="pas de profil remplis"
-        class="styles__icon___23x3R"
-        height="60%"
-        width="100%"
-      >
-        <use
-          xlink:href="#test-file-stub"
-        />
-      </svg>
+      analysis.approximative_description
     </div>
+    <button
+      class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
+      data-testid="goToProfile"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="MuiButton-label text-18-bold"
+      >
+        analysis.accessibility.button_go_to_profil
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+    <svg
+      aria-hidden="true"
+      class="styles__icon___23x3R"
+      height="60%"
+      width="100%"
+    >
+      <use
+        xlink:href="#test-file-stub"
+      />
+    </svg>
   </div>
 </div>
 `;
@@ -117,116 +112,112 @@ exports[`AnalysisConsumption component should be rendered correctly with profile
     class="analysis-graph"
   >
     <div
-      class="analysis-graph"
+      class="consumption-title text-20-bold"
     >
       <div
-        class="consumption-title text-20-bold"
+        class="user-title"
       >
-        <div
-          class="user-title"
-        >
-          analysis.user_consumption
-        </div>
-        <div />
-        <div
-          class="average-title"
-        >
-          analysis.comparison
-        </div>
+        analysis.user_consumption
       </div>
-      <mock-profilecomparatorrow
-        connected="true"
-        fluidtype="3"
-        homepriceconsumption="0"
-        nodata="false"
-        userpriceconsumption="156.161853"
-      />
-      <mock-profilecomparatorrow
-        connected="true"
-        fluidtype="0"
-        homepriceconsumption="0"
-        nodata="false"
-        performancevalue="178.54"
-        userpriceconsumption="156.161853"
-      />
-      <mock-profilecomparatorrow
-        connected="true"
-        fluidtype="1"
-        homepriceconsumption="0"
-        nodata="false"
-        performancevalue="7763.98"
-        userpriceconsumption="156.161853"
-      />
-      <mock-profilecomparatorrow
-        connected="true"
-        fluidtype="2"
-        homepriceconsumption="0"
-        nodata="false"
-        performancevalue="1317.67"
-        userpriceconsumption="156.161853"
-      />
       <div
-        class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+        class="average-title"
+      >
+        analysis.comparison
+      </div>
+    </div>
+    <mock-profilecomparatorrow
+      connected="true"
+      fluidtype="3"
+      homepriceconsumption="0"
+      nodata="false"
+      userpriceconsumption="156.161853"
+    />
+    <mock-profilecomparatorrow
+      connected="true"
+      fluidtype="0"
+      homepriceconsumption="0"
+      nodata="false"
+      performancevalue="178.54"
+      userpriceconsumption="156.161853"
+    />
+    <mock-profilecomparatorrow
+      connected="true"
+      fluidtype="1"
+      homepriceconsumption="0"
+      nodata="false"
+      performancevalue="7763.98"
+      userpriceconsumption="156.161853"
+    />
+    <mock-profilecomparatorrow
+      connected="true"
+      fluidtype="2"
+      homepriceconsumption="0"
+      nodata="false"
+      performancevalue="1317.67"
+      userpriceconsumption="156.161853"
+    />
+    <div
+      class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+    >
+      <div
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-label="profile_type.accessibility.button_toggle_average_home"
+        class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+        role="button"
+        tabindex="0"
       >
         <div
-          aria-disabled="false"
-          aria-expanded="false"
-          aria-label="profile_type.accessibility.button_toggle_average_home"
-          class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
-          role="button"
-          tabindex="0"
+          class="MuiAccordionSummary-content expansion-panel-content"
         >
           <div
-            class="MuiAccordionSummary-content expansion-panel-content"
+            class="accordion-title accordion-title"
           >
-            <div
-              class="accordion-title accordion-title"
-            >
-              analysis.average_home
-            </div>
+            analysis.average_home
           </div>
-          <div
-            aria-disabled="false"
-            aria-hidden="true"
-            class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+        </div>
+        <div
+          aria-disabled="false"
+          aria-hidden="true"
+          class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+        >
+          <span
+            class="MuiIconButton-label"
           >
-            <span
-              class="MuiIconButton-label"
+            <svg
+              aria-hidden="true"
+              class="accordion-icon styles__icon___23x3R"
+              height="16"
+              width="16"
             >
-              <svg
-                class="accordion-icon styles__icon___23x3R"
-                height="16"
-                width="16"
-              >
-                <use
-                  xlink:href="#test-file-stub"
-                />
-              </svg>
-            </span>
-          </div>
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
         </div>
+      </div>
+      <div
+        class="MuiCollapse-root MuiCollapse-hidden"
+        style="min-height: 0px;"
+      >
         <div
-          class="MuiCollapse-root MuiCollapse-hidden"
-          style="min-height: 0px;"
+          class="MuiCollapse-wrapper"
         >
           <div
-            class="MuiCollapse-wrapper"
+            class="MuiCollapse-wrapperInner"
           >
             <div
-              class="MuiCollapse-wrapperInner"
+              role="region"
             >
               <div
-                role="region"
+                class="MuiAccordionDetails-root expansion-panel-details"
               >
-                <div
-                  class="MuiAccordionDetails-root expansion-panel-details"
+                <span
+                  class="accordion-desc text-16-normal"
                 >
-                  <span
-                    class="accordion-desc text-16-normal"
-                  >
-                    analysis.average_home_description
-                  </span>
-                </div>
+                  analysis.average_home_description
+                </span>
               </div>
             </div>
           </div>
diff --git a/src/components/Analysis/ProfileComparator/profileComparator.scss b/src/components/Analysis/ProfileComparator/profileComparator.scss
index 6ca14b923405df814f974b0c4906662aa26cf16a..266ca39cea142d2df12dacd3c4dca7b43c1cdee4 100644
--- a/src/components/Analysis/ProfileComparator/profileComparator.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparator.scss
@@ -2,10 +2,12 @@
 @import 'src/styles/base/breakpoint';
 
 .analysis-graph {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   .consumption-title {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 1rem;
     .user-title,
     .average-title {
       flex-basis: 45%;
@@ -26,7 +28,7 @@
     margin: 1rem 0;
   }
   div.expansion-panel-root {
-    border: solid 2px $blue-grey;
+    border: solid 1px $blue-grey;
     color: $blue-grey;
     margin-block: 0 !important;
     box-shadow: 0px 4px 16px 0px $black-shadow;
diff --git a/src/components/Analysis/ProfileComparator/profileComparatorRow.scss b/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
index 898ca8eb40d1a8541e16051a0fa3d7e9f948ba02..d04be053554f81d6b07993d16aaea26d22346408 100644
--- a/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
@@ -3,7 +3,6 @@
 
 .analysisRow {
   display: flex;
-  margin-bottom: 1rem;
   .user-graph {
     .container-graph {
       justify-content: flex-end;
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
index fd512fb31d2d47fd0ec432c8c6a64700f2b7b3d8..96246cd52cda2c750dca475dfabd2e01eabcc126 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
@@ -1,9 +1,9 @@
 import { Button } from '@material-ui/core'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import EstimatedConsumptionModal from 'components/ConsumptionVisualizer/EstimatedConsumptionModal'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, TimeStep } from 'enums'
 import { DataloadValueDetail, TimePeriod } from 'models'
 import React, { useEffect, useState } from 'react'
@@ -41,23 +41,19 @@ const TotalAnalysisChart = ({
         endDate: analysisMonth.minus({ month: 1 }).endOf('month'),
       }
       const consumptionService = new ConsumptionDataManager(client)
-      const monthTotalData = await consumptionService.getGraphData(
+      const monthTotalData = await consumptionService.getGraphData({
         timePeriod,
-        TimeStep.MONTH,
-        fluidsWithData,
-        undefined,
-        undefined,
-        true
-      )
+        timeStep: TimeStep.MONTH,
+        fluidTypes: fluidsWithData,
+        isHome: true,
+      })
       if (monthTotalData?.actualData) {
         setDataLoadValueDetailArray(monthTotalData.actualData[0].valueDetail)
         setTotalLoadValue(monthTotalData.actualData[0].value)
       }
       setIsLoading(false)
     }
-    if (subscribed) {
-      getTotalData()
-    }
+    subscribed && getTotalData()
     return () => {
       subscribed = false
     }
@@ -123,15 +119,19 @@ const TotalAnalysisChart = ({
               handleCloseClick={() => setOpenEstimationModal(false)}
             />
             {dataLoadValueDetailArray && fluidsWithData.length > 1 && (
-              <div className="total-card-container">
+              <div
+                role="list"
+                aria-label={t('analysis_pie.details')}
+                className="total-card-container"
+              >
                 {dataLoadValueDetailArray.map((dataload, index) => (
-                  <div key={index} className="total-card">
+                  <div key={index} role="listitem" className="total-card">
                     <div className="text-18-bold fluidconso">
                       {dataload.value !== -1
                         ? `${formatNumberValues(dataload.value)} €`
                         : '--- €'}
                     </div>
-                    <Icon
+                    <StyledIcon
                       className="euro-fluid-icon"
                       icon={getNavPicto(index, true, true)}
                       size={38}
diff --git a/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap b/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
index a64f3b602ba4bb7cafaa83dbb124dbb29b1f0064..20053725acc98d82f7181dce3b0ea893d2abe407 100644
--- a/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
+++ b/src/components/Analysis/TotalAnalysisChart/__snapshots__/PieChart.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`PieChart component should be rendered correctly 1`] = `
         >
           <path
             class="arc"
-            d="M1.8369701987210297e-14,-300A300,300,0,0,1,259.8076211353316,-150A300,300,0,0,0,1.8369701987210297e-14,-300Z"
+            d="M0,-300A300,300,0,0,1,259.808,-150A300,300,0,0,0,0,-300Z"
             fill="#D87B39"
           />
         </g>
@@ -51,7 +51,7 @@ exports[`PieChart component should be rendered correctly 1`] = `
         >
           <path
             class="arc"
-            d="M259.8076211353316,-150A300,300,0,0,1,1.8369701987210297e-14,300A300,300,0,0,0,259.8076211353316,-150Z"
+            d="M259.808,-150A300,300,0,0,1,0,300A300,300,0,0,0,259.808,-150Z"
             fill="#3A98EC"
           />
         </g>
@@ -61,7 +61,7 @@ exports[`PieChart component should be rendered correctly 1`] = `
         >
           <path
             class="arc"
-            d="M1.8369701987210297e-14,300A300,300,0,1,1,-5.510910596163089e-14,-300A300,300,0,1,0,1.8369701987210297e-14,300Z"
+            d="M0,300A300,300,0,1,1,0,-300A300,300,0,1,0,0,300Z"
             fill="#45D1B8"
           />
         </g>
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 7c4621ff74e7b5f7124b5b84ab84d7c001e6f744..21b8c485d12854d1abdc07d48a2ea7aa782aaec2 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,4 +1,3 @@
-import { ThemeProvider } from '@material-ui/core'
 import Navbar from 'components/Navbar/Navbar'
 import AppRoutes from 'components/Routes/Routes'
 import SplashRoot from 'components/Splash/SplashRoot'
@@ -10,13 +9,15 @@ import React, { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useAppSelector } from 'store/hooks'
 import MatomoTracker from 'utils/matomoTracker'
-import { theme } from './theme'
+import usePageTitle from './Hooks/usePageTitle'
+import SkipLink from './SkipLink/SkipLink'
 
 interface AppProps {
   tracker: undefined | MatomoTracker
 }
 
 export const App = ({ tracker }: AppProps) => {
+  usePageTitle()
   const location = useLocation()
   const {
     global: { termsStatus },
@@ -38,8 +39,9 @@ export const App = ({ tracker }: AppProps) => {
   }, [webviewIntent])
 
   return (
-    <Layout>
-      <ThemeProvider theme={theme}>
+    <>
+      <SkipLink />
+      <Layout>
         <SplashRoot>
           {termsStatus.accepted && (
             <>
@@ -47,13 +49,13 @@ export const App = ({ tracker }: AppProps) => {
               <Navbar />
             </>
           )}
-          <main className="app-content">
+          <main id="app-content" className="app-content" tabIndex={-1}>
             <AppRoutes termsStatus={termsStatus} />
           </main>
         </SplashRoot>
         {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null}
-      </ThemeProvider>
-    </Layout>
+      </Layout>
+    </>
   )
 }
 
diff --git a/src/components/Challenge/ChallengeCard/ChallengeCard.tsx b/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
index 52248f325d94af0b9ab758de41b3a59d4c7426da..70d193f59831201cc7d75240731a9bc15e23223e 100644
--- a/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
+++ b/src/components/Challenge/ChallengeCard/ChallengeCard.tsx
@@ -1,3 +1,4 @@
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeState } from 'enums'
 import { UserChallenge } from 'models'
 import React from 'react'
@@ -25,6 +26,8 @@ const ChallengeCard = ({
   cardHeight,
   moveToSlide,
 }: ChallengeCardProps) => {
+  const { t } = useI18n()
+
   const renderCard = (userChallenge: UserChallenge | undefined) => {
     switch (userChallenge?.state) {
       case UserChallengeState.LOCKED:
@@ -42,18 +45,21 @@ const ChallengeCard = ({
   }
 
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div
+    <button
+      aria-label={t('challenge.card.goto')}
       onClick={() => moveToSlide(index)}
       className={indexSlider === index ? 'slide active' : 'slide inactive'}
       style={{
         minWidth: `${cardWidth}px`,
         maxWidth: `${cardWidth}px`,
         minHeight: `${cardHeight}px`,
+        border: 'none',
+        background: 'none',
+        padding: 0,
       }}
     >
       {renderCard(userChallenge)}
-    </div>
+    </button>
   )
 }
 
diff --git a/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap b/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
index f0c8b96afed6824c2a8027eb3f14d2aaae024c8c..2500a582f326dd82eda13780f8013d711a194b2a 100644
--- a/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
@@ -2,9 +2,10 @@
 
 exports[`ChallengeCard component should be rendered correctly 1`] = `
 <div>
-  <div
+  <button
+    aria-label="challenge.card.goto"
     class="slide active"
-    style="min-width: 200px; max-width: 200px; min-height: 400px;"
+    style="min-width: 200px; max-width: 200px; min-height: 400px; background: none; padding: 0px;"
   >
     <div
       class="cardContent cardDone"
@@ -40,7 +41,8 @@ RUISSEAU
         <span
           class="text-18"
         >
-          challenge.card_done.depense 
+          challenge.card_done.depense
+           
           <span
             class="text-18-bold"
           >
@@ -55,7 +57,6 @@ RUISSEAU
         class="buttons"
       >
         <button
-          aria-label="challenge.card_done.final_defi_view"
           class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
           tabindex="0"
           type="button"
@@ -70,7 +71,6 @@ RUISSEAU
           />
         </button>
         <button
-          aria-label="challenge.card_done.reset_defi"
           class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimaryNegative"
           tabindex="0"
           type="button"
@@ -86,6 +86,6 @@ RUISSEAU
         </button>
       </div>
     </div>
-  </div>
+  </button>
 </div>
 `;
diff --git a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
index d62b47d36700bfebc8cddf816d03ef991ab9ba93..f174bacde00861ab29e4f91befb7e4079148f24f 100644
--- a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
+++ b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
@@ -24,7 +24,7 @@ describe('ChallengeCardDone component', () => {
       challenge: { currentChallenge: null },
     },
   })
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={storeNoCurrentChallenge}>
         <ChallengeCardDone userChallenge={userChallengeData[0]} />
@@ -53,7 +53,7 @@ describe('ChallengeCardDone component', () => {
       })
       expect(mockUpdateUserChallenge).toHaveBeenCalledTimes(1)
     })
-    it('should not reset challenge if another challenge is on going', async () => {
+    it('should not reset challenge if another challenge is on going', () => {
       mockAppDispatch.mockImplementationOnce(() => mockDispatch)
       const store = mockStore({
         ecolyo: {
@@ -65,27 +65,33 @@ describe('ChallengeCardDone component', () => {
           <ChallengeCardDone userChallenge={userChallengeData[0]} />
         </Provider>
       )
-      const resetBtn = screen.getByLabelText('challenge.card_done.reset_defi')
+      const resetBtn = screen.getByRole('button', {
+        name: 'challenge.card_done.reset_defi',
+      })
       expect(resetBtn).toHaveProperty('disabled')
       expect(mockDispatch).toHaveBeenCalledTimes(0)
       expect(mockUpdateUserChallenge).toHaveBeenCalledTimes(0)
     })
-    it('should be primary button is challenge is lost', async () => {
+    it('should be primary button is challenge is lost', () => {
       render(
         <Provider store={storeNoCurrentChallenge}>
           <ChallengeCardDone userChallenge={userChallengeData[1]} />
         </Provider>
       )
-      const resetBtn = screen.getByLabelText('challenge.card_done.reset_defi')
+      const resetBtn = screen.getByRole('button', {
+        name: 'challenge.card_done.reset_defi',
+      })
       expect(resetBtn).toHaveClass('btnPrimaryNegative')
     })
-    it('should be secondary button is challenge is won', async () => {
+    it('should be secondary button is challenge is won', () => {
       render(
         <Provider store={storeNoCurrentChallenge}>
           <ChallengeCardDone userChallenge={userChallengeData[0]} />
         </Provider>
       )
-      const resetBtn = screen.getByLabelText('challenge.card_done.reset_defi')
+      const resetBtn = screen.getByRole('button', {
+        name: 'challenge.card_done.reset_defi',
+      })
       expect(resetBtn).toHaveClass('btnSecondary')
     })
   })
diff --git a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
index ec66ecbaaa8c37c70d9a38835794d5d0c6f96097..6110f52d758899b5ef695230a7eb7f90580466ca 100644
--- a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
@@ -3,7 +3,7 @@ import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
 import classNames from 'classnames'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeSuccess, UserChallengeUpdateFlag } from 'enums'
 import { UserChallenge } from 'models'
 import React, { useEffect, useState } from 'react'
@@ -28,34 +28,11 @@ const ChallengeCardDone = ({
   const client = useClient()
   const dispatch = useAppDispatch()
   const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
-  const [winIcon, setWinIcon] = useState<string>(defaultIcon)
-  const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
+  const [resultIcon, setResultIcon] = useState<string>(defaultIcon)
 
-  const getUserSaving = (_userChallenge: UserChallenge) => {
-    let label
-    if (_userChallenge.success === UserChallengeSuccess.WIN)
-      label = t('challenge.card_done.saving')
-    else label = t('challenge.card_done.depense')
+  const isSuccess = userChallenge.success === UserChallengeSuccess.WIN
 
-    return label + ' '
-  }
-
-  const getResultLabel = (_userChallenge: UserChallenge) => {
-    switch (_userChallenge.success) {
-      case UserChallengeSuccess.WIN:
-        return t('challenge.card_done.win')
-      case UserChallengeSuccess.LOST:
-      default:
-        return t('challenge.card_done.lost')
-    }
-  }
-
-  const getIcon = (_userChallenge: UserChallenge) => {
-    if (_userChallenge.success == UserChallengeSuccess.WIN) return winIcon
-    else return lossIcon
-  }
-
-  const goDuel = async () => {
+  const goDuel = () => {
     navigate('/challenges/duel?id=' + userChallenge.id)
   }
 
@@ -70,13 +47,14 @@ const ChallengeCardDone = ({
 
   useEffect(() => {
     async function handleEcogestureIcon() {
-      const icon = await importIconById(userChallenge.id + '-1', 'duelResult')
-      setWinIcon(icon || defaultIcon)
-      const icon2 = await importIconById(userChallenge.id + '-0', 'duelResult')
-      setLossIcon(icon2 || defaultIcon)
+      const icon = await importIconById(
+        userChallenge.id + '-' + Number(isSuccess),
+        'duelResult'
+      )
+      setResultIcon(icon || defaultIcon)
     }
     handleEcogestureIcon()
-  }, [userChallenge])
+  }, [isSuccess, userChallenge])
 
   return (
     <div className="cardContent cardDone">
@@ -84,11 +62,7 @@ const ChallengeCardDone = ({
         {getChallengeTitleWithLineReturn(userChallenge.id)}
       </div>
       <div className="iconResult">
-        <StyledIcon
-          className="imgResult"
-          icon={getIcon(userChallenge)}
-          size={180}
-        />
+        <StyledIcon className="imgResult" icon={resultIcon} size={180} />
       </div>
       <div className="statsResult">
         <div
@@ -97,10 +71,14 @@ const ChallengeCardDone = ({
             lost: userChallenge.success === UserChallengeSuccess.LOST,
           })}
         >
-          {getResultLabel(userChallenge)}
+          {isSuccess
+            ? t('challenge.card_done.win')
+            : t('challenge.card_done.lost')}
         </div>
         <span className="text-18">
-          {getUserSaving(userChallenge)}
+          {isSuccess
+            ? t('challenge.card_done.saving')
+            : t('challenge.card_done.depense')}{' '}
           <span className="text-18-bold">
             {formatNumberValues(
               Math.abs(
@@ -115,15 +93,10 @@ const ChallengeCardDone = ({
         </span>
       </div>
       <div className="buttons">
-        <Button
-          aria-label={t('challenge.card_done.final_defi_view')}
-          onClick={goDuel}
-          className="btnSecondary"
-        >
+        <Button onClick={goDuel} className="btnSecondary">
           {t('challenge.card_done.final_defi_view')}
         </Button>
         <Button
-          aria-label={t('challenge.card_done.reset_defi')}
           onClick={handleChallengeReset}
           className={
             userChallenge.success === UserChallengeSuccess.WIN
diff --git a/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap b/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
index 7df066b7f28a181089a3075beb5f502a88dba5ae..38b735fe151d96e983ddcf984fd689b512dc5f00 100644
--- a/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
@@ -36,7 +36,8 @@ VEILLE
       <span
         class="text-18"
       >
-        challenge.card_done.saving 
+        challenge.card_done.saving
+         
         <span
           class="text-18-bold"
         >
@@ -51,7 +52,6 @@ VEILLE
       class="buttons"
     >
       <button
-        aria-label="challenge.card_done.final_defi_view"
         class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
         tabindex="0"
         type="button"
@@ -66,7 +66,6 @@ VEILLE
         />
       </button>
       <button
-        aria-label="challenge.card_done.reset_defi"
         class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
         tabindex="0"
         type="button"
diff --git a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
index f4825300a48bdda50d2ff32104a254aaca806a28..989c92034e5d09f8569b48831ba6376fb7f8d0c2 100644
--- a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
@@ -7,7 +7,7 @@ import ChallengeCardLast from './ChallengeCardLast'
 declare let __SAU_IDEA_DIRECT_LINK__: string
 
 describe('ChallengeCardLast component', () => {
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(<ChallengeCardLast />)
     expect(container).toMatchSnapshot()
   })
diff --git a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
index 2fef4046dc7682b742ff8e871321843be3dc119a..d9e55d98ef64ae5e4fcae1a2cc3e94bc914ca588 100644
--- a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
+++ b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
@@ -2,7 +2,7 @@ import { Button } from '@material-ui/core'
 import ecolyoIcon from 'assets/icons/ico/ecolyo.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './challengeCardLast.scss'
 
@@ -23,11 +23,7 @@ const ChallengeCardLast = () => {
       <StyledIcon icon={ecolyoIcon} size={62} />
       <div className="text-22-bold">{t('challenge.card_last.title')}</div>
       <div className="text-18-normal">{t('challenge.card_last.message1')}</div>
-      <Button
-        aria-label={t('challenge.card_last.button')}
-        onClick={handleClickFeedbacks}
-        className="btnSecondary"
-      >
+      <Button onClick={handleClickFeedbacks} className="btnSecondary">
         {t('challenge.card_last.button')}
       </Button>
     </div>
diff --git a/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap b/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
index 7d36624206fb1815aa9f10d018895ebf36b1e652..7100f0f0f9ac4dd3124a6c7a62edf28447039580 100644
--- a/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
@@ -26,7 +26,6 @@ exports[`ChallengeCardLast component should be rendered correctly 1`] = `
       challenge.card_last.message1
     </div>
     <button
-      aria-label="challenge.card_last.button"
       class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
       tabindex="0"
       type="button"
diff --git a/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss b/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
index b4cdf2d1b932027afd3d32d79af767911ecb5f3b..9ca4dec3af5403e01836936d31fc80e0016ae748 100644
--- a/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
+++ b/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
@@ -13,6 +13,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  flex: 1;
 
   svg {
     max-height: 150px;
diff --git a/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.tsx b/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.tsx
index 9d8a5d5ca9960e4d87f2c182b1d509527283a359..d48b419d7a41d475644634e1502b28d248c9e43d 100644
--- a/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.tsx
+++ b/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.tsx
@@ -1,6 +1,6 @@
 import challengeLockedIcon from 'assets/icons/visu/challenge/challengeLocked.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallenge } from 'models'
 import React from 'react'
 import { getChallengeTitleWithLineReturn } from 'utils/utils'
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index b6e1ba070fef77130c61540cb384265af4137e16..aea83c8f9988c6f7207b6c50fb7ef7089efea679 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -10,7 +10,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import {
   UserActionState,
   UserChallengeUpdateFlag,
@@ -101,14 +101,12 @@ const ChallengeCardOnGoing = ({
 
   useEffect(() => {
     let subscribed = true
-    async function importIcon() {
+    function importIcon() {
       importIconById(userChallenge.id, 'challenge').then(icon => {
-        if (subscribed) {
-          icon ? setChallengeIcon(icon) : setChallengeIcon(defaultChallengeIcon)
-        }
+        icon ? setChallengeIcon(icon) : setChallengeIcon(defaultChallengeIcon)
       })
     }
-    importIcon()
+    subscribed && importIcon()
     return () => {
       subscribed = false
     }
@@ -116,14 +114,12 @@ const ChallengeCardOnGoing = ({
 
   useEffect(() => {
     let subscribed = true
-    async function setChallengeResult() {
-      const isChallengeDone = await challengeService.isChallengeDone(
+    function setChallengeResult() {
+      const isChallengeDone = challengeService.isChallengeDone(
         userChallenge,
         currentDataload
       )
-      if (subscribed) {
-        setIsDone(isChallengeDone.isDone)
-      }
+      setIsDone(isChallengeDone.isDone)
     }
     const unlockDuel = async () => {
       if (
@@ -147,7 +143,7 @@ const ChallengeCardOnGoing = ({
       }
     }
     unlockDuel()
-    setChallengeResult()
+    subscribed && setChallengeResult()
     return () => {
       subscribed = false
     }
@@ -272,7 +268,9 @@ const ChallengeCardOnGoing = ({
         <>
           <div className="finalDuel result">
             <span>{t('challenge.card.ongoing.result')}</span>
-            <span>{t('challenge.card.ongoing.duelDone')}</span>
+            <span className="lowercase">
+              {t('challenge.card.ongoing.duelDone')}
+            </span>
           </div>
           <div className="notifChallenge">1</div>
         </>,
diff --git a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
index 64325543a8cf93f098d8ab8ffce8333bd790e6b1..9d1f4da02c5f1a1f1d11b38e51964bd18b7c5958 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
+++ b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
@@ -157,6 +157,9 @@
           font-size: 1rem;
         }
       }
+      .lowercase {
+        text-transform: lowercase;
+      }
     }
   }
 }
diff --git a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
index 89209571b601b886564d81ed83d6821e989b787f..99ed04a63287af471dcb82c5f20411a1bc1a5025 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
@@ -48,8 +48,10 @@ describe('ChallengeCardUnlocked component', () => {
   })
 
   it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', async () => {
+    mockStartUserChallenge.mockResolvedValue(userChallengeData[0])
     const store = createMockEcolyoStore({
       global: {
+        ...mockGlobalState,
         fluidTypes: [FluidType.ELECTRICITY],
         fluidStatus: [
           { ...mockGlobalState.fluidStatus[0], status: FluidState.DONE },
@@ -71,7 +73,8 @@ describe('ChallengeCardUnlocked component', () => {
     expect(mockStartUserChallenge).toHaveBeenCalledWith(userChallengeData[0])
   })
 
-  it('should not be able to launch challenge if another one is active', async () => {
+  it('should not be able to launch challenge if another one is active', () => {
+    mockStartUserChallenge.mockResolvedValue(userChallengeData[0])
     const store = createMockEcolyoStore({
       global: mockGlobalState,
       challenge: {
diff --git a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
index 2bbafcead7034e59401ebe6952fa7cf23b691fc9..3e999c0200e9356a189c1cc524c65b0e01605eef 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
@@ -2,7 +2,7 @@ import Button from '@material-ui/core/Button'
 import defaultIcon from 'assets/icons/visu/challenge/challengeLocked.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidState } from 'enums'
 import { UserChallenge } from 'models'
 import React, { useCallback, useEffect, useState } from 'react'
diff --git a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
index f59ef96d038a97a10d24ec3b4ef4e908f16b6649..65341088e684924a07ef3416fe7e82c69954291d 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
@@ -1,6 +1,6 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './challengeNoFluidModal.scss'
 
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index 6affdfee88aa882dd7fa7bd22f07be87ee98b64e..03173a4c4cb6e072464d6616badab83f6c143edc 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -6,13 +6,16 @@ import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import Content from 'components/Content/Content'
 import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeState } from 'enums'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useAppSelector } from 'store/hooks'
 import ChallengeCard from './ChallengeCard/ChallengeCard'
 import './challengeView.scss'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/challenges/
+ */
 const ChallengeView = () => {
   const { t } = useI18n()
   const { userChallengeList } = useAppSelector(state => state.ecolyo.challenge)
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index 0f0c1a5cb86a6d1aa750d9fccde498df95890c96..9461e866e7ddacb59a97bba6053b0b596d5a3ceb 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -65,7 +65,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
     >
       <button
         aria-label="challenge.accessibility.button_slider_previous"
-        class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+        class="MuiButtonBase-root MuiIconButton-root"
         tabindex="0"
         type="button"
       >
@@ -89,7 +89,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
       </button>
       <button
         aria-label="challenge.accessibility.button_slider_next"
-        class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+        class="MuiButtonBase-root MuiIconButton-root"
         tabindex="0"
         type="button"
       >
diff --git a/src/components/Charts/AxisBottom.spec.tsx b/src/components/Charts/AxisBottom.spec.tsx
index a0b36f53cda2b3104720409d0d954777e4b906a7..7ccd6e039d95108766cb838d488997d9bbd4df41 100644
--- a/src/components/Charts/AxisBottom.spec.tsx
+++ b/src/components/Charts/AxisBottom.spec.tsx
@@ -5,7 +5,7 @@ import { DateTime } from 'luxon'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { graphData } from 'tests/__mocks__/chartData.mock'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
 import AxisBottom from './AxisBottom'
 
 const mockXScale: ScaleBand<string> = scaleBand()
@@ -24,6 +24,7 @@ const mockProps = {
 describe('AxisBottom component test', () => {
   const store = createMockEcolyoStore({
     chart: {
+      ...mockChartState,
       selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
         zone: 'utc',
       }),
diff --git a/src/components/Charts/AxisBottom.tsx b/src/components/Charts/AxisBottom.tsx
index 35dbdfe9e9d85202d7346a2c91b96f9ca9adce55..988ea723d00bbf98750b5bbcaff3a3c89eb44bd4 100644
--- a/src/components/Charts/AxisBottom.tsx
+++ b/src/components/Charts/AxisBottom.tsx
@@ -156,7 +156,7 @@ const AxisBottom = ({
   const { selectedDate } = useAppSelector(state => state.ecolyo.chart)
   const dashArray = `${height / 30} ${height / 30}`
   const dateChartService = new DateChartService()
-  const displayAllDays: boolean = isDuel && data.length <= 15
+  const displayAllDays = isDuel && data.length <= 15
   return (
     <g
       className="axis x"
diff --git a/src/components/Charts/AxisRight.spec.tsx b/src/components/Charts/AxisRight.spec.tsx
index cd7f3c94e6bfacf9578dda87ce1b12a38471c629..37c235a5a25a505962c7c09c05bebe3c3081888d 100644
--- a/src/components/Charts/AxisRight.spec.tsx
+++ b/src/components/Charts/AxisRight.spec.tsx
@@ -4,19 +4,17 @@ import { FluidType } from 'enums'
 import React from 'react'
 import AxisRight from './AxisRight'
 
-const mockProps = {
-  yScale: scaleLinear(),
-  fluidType: FluidType.ELECTRICITY,
-  width: 40,
-  marginRight: 5,
-  marginTop: 5,
-}
-
 describe('AxisRight component test', () => {
   it('should render correctly AxisRight', () => {
     const { container } = render(
       <svg>
-        <AxisRight {...mockProps} />
+        <AxisRight
+          fluidType={FluidType.ELECTRICITY}
+          width={40}
+          marginRight={5}
+          marginTop={5}
+          yScale={scaleLinear()}
+        />
       </svg>
     )
     expect(container).toMatchSnapshot()
diff --git a/src/components/Charts/AxisRight.tsx b/src/components/Charts/AxisRight.tsx
index 7780c52ac0beb1e062554e7160423c5306a35883..72a1a424c79587d39b11d11f676b7070de4e9daf 100644
--- a/src/components/Charts/AxisRight.tsx
+++ b/src/components/Charts/AxisRight.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { NumberValue } from 'd3'
 import { axisRight } from 'd3-axis'
 import { ScaleLinear } from 'd3-scale'
diff --git a/src/components/Charts/Bar.spec.tsx b/src/components/Charts/Bar.spec.tsx
index 73cf573db8ade5ee375ebe7be2e2fac8db7d7549..92699761a995d28a1bb2f8df72239b084d4a11a0 100644
--- a/src/components/Charts/Bar.spec.tsx
+++ b/src/components/Charts/Bar.spec.tsx
@@ -7,7 +7,11 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import * as chartActions from 'store/chart/chart.slice'
 import { graphData } from 'tests/__mocks__/chartData.mock'
-import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import {
+  createMockEcolyoStore,
+  mockChartState,
+  mockGlobalState,
+} from 'tests/__mocks__/store'
 import { mockXScale } from 'tests/__mocks__/xScale.mock'
 import Bar from './Bar'
 
@@ -30,6 +34,7 @@ const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate')
 describe('Bar component test', () => {
   const store = createMockEcolyoStore({
     chart: {
+      ...mockChartState,
       selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
         zone: 'utc',
       }),
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index 0b6ccdb99804c32a1349444c92be2729f083d9c7..0df625082cc811184fe7c964128f70ee56ab9fe2 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -1,5 +1,5 @@
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ScaleBand, ScaleLinear } from 'd3-scale'
-import { detect } from 'detect-browser'
 import { FluidType, TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import { Dataload } from 'models'
@@ -10,7 +10,8 @@ import {
   setSelectedDate,
 } from 'store/chart/chart.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { getFluidName } from 'utils/utils'
+import { formatDate } from 'utils/date'
+import { getFluidName, getFluidUnit } from 'utils/utils'
 
 interface BarProps {
   index: number
@@ -28,6 +29,7 @@ interface BarProps {
   weekdays?: 'week' | 'weekend'
   clickable?: boolean
   average?: number
+  focusable?: boolean
 }
 
 const Bar = ({
@@ -46,7 +48,9 @@ const Bar = ({
   weekdays,
   clickable = true,
   average,
+  focusable,
 }: BarProps) => {
+  const { t } = useI18n()
   const dispatch = useAppDispatch()
   const {
     chart: { selectedDate, currentTimeStep },
@@ -55,7 +59,6 @@ const Bar = ({
   const [clicked, setClicked] = useState(false)
   const [animationEnded, setAnimationEnded] = useState(false)
   const [compareAnimationEnded, setCompareAnimationEnded] = useState(false)
-  const browser = detect()
 
   const isMulti = fluidType === FluidType.MULTIFLUID
   const FLUIDNAME = getFluidName(fluidType).toUpperCase()
@@ -130,8 +133,6 @@ const Bar = ({
 
   const getBarClass = () => {
     const upcoming = dataload.value === -1 ? 'bar-UPCOMING' : ''
-    const edgeBrowser = browser && browser.name !== 'edge'
-    const bounce = edgeBrowser ? '1' : '3'
 
     const baseStyles = [
       `bar-${FLUIDNAME}`,
@@ -149,7 +150,7 @@ const Bar = ({
     if (animationEnded) {
       return baseStyles
     }
-    return `${baseStyles} bounce-${bounce} delay--${index}`
+    return `${baseStyles} bounce-1 delay--${index}`
   }
 
   const getCompareBarClass = () => {
@@ -296,7 +297,24 @@ const Bar = ({
         dataload.value &&
         dataload.value >= 0 && (
           // default colored bar
-          <g transform={`translate(${xScaleValue}, ${yScaleValue})`}>
+          <g
+            className="barValue"
+            transform={`translate(${xScaleValue}, ${yScaleValue})`}
+            tabIndex={focusable ? 0 : -1}
+            onKeyDown={event => {
+              if (event.key === ' ') {
+                event.preventDefault() // prevent from scrolling page
+                handleClick()
+              }
+            }}
+          >
+            <title>
+              {t('consumption.accessibility.bar', {
+                date: formatDate(currentTimeStep, dataload.date),
+                value: Math.round(dataload.value * 100) / 100,
+                unit: getFluidUnit(fluidType),
+              })}
+            </title>
             <defs>
               <linearGradient
                 id="gradient"
diff --git a/src/components/Charts/BarChart.spec.tsx b/src/components/Charts/BarChart.spec.tsx
index 49177db68e7e4c4cd4283af85d475a5a67ea96f3..d5dfacfc0918f4d9907b85ffc57234b222afa2e1 100644
--- a/src/components/Charts/BarChart.spec.tsx
+++ b/src/components/Charts/BarChart.spec.tsx
@@ -4,12 +4,17 @@ import { DateTime } from 'luxon'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { graphData } from 'tests/__mocks__/chartData.mock'
-import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
+import {
+  createMockEcolyoStore,
+  mockChartState,
+  mockGlobalState,
+} from 'tests/__mocks__/store'
 import BarChart from './BarChart'
 
 describe('BarChart component', () => {
   const store = createMockEcolyoStore({
     chart: {
+      ...mockChartState,
       selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
         zone: 'utc',
       }),
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index 658f78036c58b91f7e8477d8ad4f2fd46c11642b..b6a861e7914f47558640768d7e84444ae62b5583 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -21,6 +21,7 @@ interface BarChartProps {
   marginBottom?: number
   isSwitching: boolean
   clickable?: boolean
+  focusable?: boolean
 }
 
 const BarChart = ({
@@ -36,6 +37,7 @@ const BarChart = ({
   marginBottom = 50,
   isSwitching,
   clickable = true,
+  focusable,
 }: BarChartProps) => {
   const getContentWidth = () => {
     return width - marginLeft - marginRight
@@ -115,6 +117,7 @@ const BarChart = ({
             }
             clickable={clickable}
             average={averageConsumption}
+            focusable={focusable}
           />
         ))}
       </g>
diff --git a/src/components/Charts/UpcomingBar.tsx b/src/components/Charts/UpcomingBar.tsx
index 7022e3766230b8739f343894cd018bcc4413ff04..bb56d86da5b39108578124080ebf4f82735de998 100644
--- a/src/components/Charts/UpcomingBar.tsx
+++ b/src/components/Charts/UpcomingBar.tsx
@@ -1,5 +1,4 @@
 import { ScaleBand, ScaleLinear } from 'd3-scale'
-import { detect } from 'detect-browser'
 import { DateTime } from 'luxon'
 import { Dataload } from 'models'
 import React, { useState } from 'react'
@@ -22,16 +21,11 @@ const UpcomingBar = ({
   average,
 }: BarProps) => {
   const [animationEnded, setAnimationEnded] = useState(false)
-  const browser = detect()
   const onAnimationEnd = () => {
     setAnimationEnded(true)
   }
 
-  let animationClass = ''
-  if (!animationEnded) {
-    animationClass = browser?.name !== 'edge' ? 'bounce-1' : 'bounce-3'
-    animationClass += ` delay--${index % 13}`
-  }
+  const animationClass = !animationEnded ? `bounce-1 delay--${index % 13}` : ''
   const barClass = `bar-UPCOMING ${animationClass}`
 
   const topRoundedRectDashedLine = (
diff --git a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
index 4b70e2896a14a9e91562af3834b1a8ffaae5d9cd..db2b14af89cd9dbb457f1f64f0120757bd17252b 100644
--- a/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/Bar.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`Bar component test should correctly render Bar with isDuel 1`] = `
           </lineargradient>
         </defs>
         <path
-          class="bar-MULTIFLUID bounce-3 delay--4"
+          class="bar-MULTIFLUID bounce-1 delay--4"
           d="
       M0,-12.295074999999997
       a-12.295074999999997,-12.295074999999997 0 0 1 -12.295074999999997,12.295074999999997
@@ -52,11 +52,16 @@ exports[`Bar component test should correctly render Bar with isDuel 1`] = `
         />
       </g>
       <g
+        class="barValue"
+        tabindex="-1"
         transform="translate(0.625, 69.18029999999999)"
       >
+        <title>
+          consumption.accessibility.bar
+        </title>
         <defs>
           <lineargradient
-            class="bar-MULTIFLUID bounce-3 delay--4"
+            class="bar-MULTIFLUID bounce-1 delay--4"
             id="gradient"
             x1="0"
             x2="0"
@@ -142,8 +147,13 @@ exports[`Bar component test should correctly render Bar with isSwitching 1`] = `
         />
       </g>
       <g
+        class="barValue"
+        tabindex="-1"
         transform="translate(0.625, 69.18029999999999)"
       >
+        <title>
+          consumption.accessibility.bar
+        </title>
         <defs>
           <lineargradient
             class="bar-MULTIFLUID selected bounce-2 delay"
@@ -232,8 +242,13 @@ exports[`Bar component test should correctly render Bar with showCompare 1`] = `
         />
       </g>
       <g
+        class="barValue"
+        tabindex="-1"
         transform="translate(0.625, 69.18029999999999)"
       >
+        <title>
+          consumption.accessibility.bar
+        </title>
         <defs>
           <lineargradient
             class="bar-MULTIFLUID selected bounce-2 delay"
@@ -356,8 +371,13 @@ exports[`Bar component test should correctly render Electricity Bar 1`] = `
         />
       </g>
       <g
+        class="barValue"
+        tabindex="-1"
         transform="translate(0.625, 69.18029999999999)"
       >
+        <title>
+          consumption.accessibility.bar
+        </title>
         <defs>
           <lineargradient
             class="bar-ELECTRICITY selected bounce-2 delay"
@@ -446,8 +466,13 @@ exports[`Bar component test should correctly render Gas Bar 1`] = `
         />
       </g>
       <g
+        class="barValue"
+        tabindex="-1"
         transform="translate(0.625, 69.18029999999999)"
       >
+        <title>
+          consumption.accessibility.bar
+        </title>
         <defs>
           <lineargradient
             class="bar-GAS selected bounce-2 delay"
@@ -536,8 +561,13 @@ exports[`Bar component test should correctly render Multifluid Bar 1`] = `
         />
       </g>
       <g
+        class="barValue"
+        tabindex="-1"
         transform="translate(0.625, 69.18029999999999)"
       >
+        <title>
+          consumption.accessibility.bar
+        </title>
         <defs>
           <lineargradient
             class="bar-MULTIFLUID selected bounce-2 delay"
@@ -626,8 +656,13 @@ exports[`Bar component test should correctly render Water Bar 1`] = `
         />
       </g>
       <g
+        class="barValue"
+        tabindex="-1"
         transform="translate(0.625, 69.18029999999999)"
       >
+        <title>
+          consumption.accessibility.bar
+        </title>
         <defs>
           <lineargradient
             class="bar-WATER selected bounce-2 delay"
diff --git a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
index 9df650b27b60a6bfb1e770e9d86a1a0f94c6e7a2..5c2161cba010b248f63b710b899262b15c81726b 100644
--- a/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
+++ b/src/components/Charts/__snapshots__/BarChart.spec.tsx.snap
@@ -139,8 +139,13 @@ exports[`BarChart component should render correctly 1`] = `
           />
         </g>
         <g
+          class="barValue"
+          tabindex="-1"
           transform="translate(33.43750000000003, 309.3554761977037)"
         >
+          <title>
+            consumption.accessibility.bar
+          </title>
           <defs>
             <lineargradient
               class="bar-ELECTRICITY selected bounce-2 delay"
@@ -222,8 +227,13 @@ exports[`BarChart component should render correctly 1`] = `
           />
         </g>
         <g
+          class="barValue"
+          tabindex="-1"
           transform="translate(200.62500000000003, 309.3554761977037)"
         >
+          <title>
+            consumption.accessibility.bar
+          </title>
           <defs>
             <lineargradient
               class="bar-ELECTRICITY selected bounce-2 delay"
diff --git a/src/components/CommonKit/FormNavigation/FormNavigation.tsx b/src/components/CommonKit/FormNavigation/FormNavigation.tsx
index cd13d77ef248aa7df3649c9b6f22ab9497fcb9ef..b778edbf8b4fd0cb0b1b29d62c94a4648a65341c 100644
--- a/src/components/CommonKit/FormNavigation/FormNavigation.tsx
+++ b/src/components/CommonKit/FormNavigation/FormNavigation.tsx
@@ -1,5 +1,5 @@
 import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useCallback } from 'react'
 import './formNavigation.scss'
 
diff --git a/src/components/CommonKit/Icon/StyledIcon.tsx b/src/components/CommonKit/Icon/StyledIcon.tsx
index d555270c0ca2f6ee2283e07f741a8788927edcad..83bee7b2afde194855598c5421ec02ac1a2fbd42 100644
--- a/src/components/CommonKit/Icon/StyledIcon.tsx
+++ b/src/components/CommonKit/Icon/StyledIcon.tsx
@@ -8,6 +8,8 @@ interface StyledIconProps {
   size?: number
   role?: string
   title?: string
+  width?: number
+  height?: number
 }
 
 const StyledIcon = ({
diff --git a/src/components/CommonKit/IconButton/StyledIconButton.tsx b/src/components/CommonKit/IconButton/StyledIconButton.tsx
index b71760b5d51353f9fa129037822d0efb0fca476d..d67dd55fb724c4617828fa4e9270e7f64a831545 100644
--- a/src/components/CommonKit/IconButton/StyledIconButton.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconButton.tsx
@@ -1,14 +1,7 @@
 import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
 import StyledIconProps from 'components/CommonKit/Icon/StyledIcon'
 import React from 'react'
 
-const IconButtonBase = withStyles({
-  root: {
-    outline: 'none !important',
-  },
-})(IconButton) as React.FC<IconButtonProps>
-
 interface StyledIconButtonProps extends IconButtonProps {
   icon: string
   sized?: number
@@ -20,9 +13,9 @@ const StyledIconButton = ({
   ...props
 }: StyledIconButtonProps) => {
   return (
-    <IconButtonBase {...props}>
+    <IconButton {...props}>
       <StyledIconProps icon={icon} size={sized} />
-    </IconButtonBase>
+    </IconButton>
   )
 }
 
diff --git a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
index 1b037586548e7a7a42b743ff6f58d07f5747cf2e..3a6db811c26f836e6ad8649a65335a74e3f095a6 100644
--- a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
+++ b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`StyledIconButton component test should render correctly StyledIconButton 1`] = `
 <div>
   <button
-    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+    class="MuiButtonBase-root MuiIconButton-root"
     tabindex="0"
     type="button"
   >
diff --git a/src/components/CommonKit/Switch/StyledSwitch.tsx b/src/components/CommonKit/Switch/StyledSwitch.tsx
index bd890d435fe1ef6051610d1ef4280a411016843b..2e7b46a6ddaed99dbdc45766c688c290423e211d 100644
--- a/src/components/CommonKit/Switch/StyledSwitch.tsx
+++ b/src/components/CommonKit/Switch/StyledSwitch.tsx
@@ -20,6 +20,10 @@ const SwitchBase = withStyles({
         backgroundColor: 'var(--multiColor)',
       },
     },
+    '&.Mui-focusVisible': {
+      outline: '2px solid #1976d2',
+      outlineOffset: '2px',
+    },
   },
   checked: {},
   track: {
diff --git a/src/components/Connection/EPGLConnect/EpglBill.tsx b/src/components/Connection/EPGLConnect/EpglBill.tsx
index 56ed120f6f123c7e56ab72e7d900266605486fad..8179dda880dead3ca510dcd808a75a55cd7178d4 100644
--- a/src/components/Connection/EPGLConnect/EpglBill.tsx
+++ b/src/components/Connection/EPGLConnect/EpglBill.tsx
@@ -1,7 +1,7 @@
 import Button from '@material-ui/core/Button'
 import WaterBillIcon from 'assets/icons/visu/onboarding/water_bill.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
 import { setShowOfflineData } from 'store/chart/chart.slice'
diff --git a/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx b/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
index 3638cc07d8486793bf1d00b9054ed67a6b7ba377..2c86cb80f9b0c9c6f24cc7a83faf3bc70d5a4f0c 100644
--- a/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/EPGLConnect/EpglConnectModal/EpglConnectModal.tsx
@@ -1,7 +1,7 @@
-import { Button, Dialog, IconButton } from '@material-ui/core'
+import { Button, Dialog } from '@material-ui/core'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React, { useState } from 'react'
 import { useAppSelector } from 'store/hooks'
@@ -104,13 +104,12 @@ const EpglConnectModal = ({
         paper: 'modal-paper',
       }}
     >
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseModal}
         aria-label={t('auth.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseModal}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="partners-connection-step-content">
         {steps[currentStep].content}
       </div>
diff --git a/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglCreateAccount.tsx b/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglCreateAccount.tsx
index 83bd2c6eaece03529ea5c74087093e5515440df9..79e9850a01edfb84b4de7aac7b3896c67a7323bd 100644
--- a/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglCreateAccount.tsx
+++ b/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglCreateAccount.tsx
@@ -1,6 +1,6 @@
 import EglIcon from 'assets/icons/visu/onboarding/egl.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './stepDetail.scss'
 
diff --git a/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglDoYouHaveAccount.tsx b/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglDoYouHaveAccount.tsx
index 58c6c40de06d7880c0f56204b2971df405c1cc6e..434d82a2db5c20e7adb61c554dd161ea8e98e2fa 100644
--- a/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglDoYouHaveAccount.tsx
+++ b/src/components/Connection/EPGLConnect/EpglConnectModal/Steps/EpglDoYouHaveAccount.tsx
@@ -1,6 +1,6 @@
 import BrowserEgl from 'assets/icons/visu/onboarding/browser_egl.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './stepDetail.scss'
 
diff --git a/src/components/Connection/EPGLConnect/EpglForm.tsx b/src/components/Connection/EPGLConnect/EpglForm.tsx
index 14ba3dd2c8b8fb66ccac624b268666b7f2acacc4..55df38c5158d9ce9739153d1016da494fead8b3f 100644
--- a/src/components/Connection/EPGLConnect/EpglForm.tsx
+++ b/src/components/Connection/EPGLConnect/EpglForm.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import { AccountEGLData } from 'models'
 import React, { useEffect, useState } from 'react'
@@ -84,7 +84,7 @@ const EpglForm = ({ hasCreatedAccount }: { hasCreatedAccount: boolean }) => {
   }, [account, lastEpglLogin, t])
 
   return (
-    <div className="connection-form">
+    <>
       {hasCreatedAccount && (
         <h2 className="connection-form-title eglgrandlyon text-20-bold">
           {t('auth.eglgrandlyon.with_account.title')}
@@ -100,28 +100,33 @@ const EpglForm = ({ hasCreatedAccount }: { hasCreatedAccount: boolean }) => {
           type="number"
           className={classNames('inputText', { error: error !== '' })}
           label={t(`auth.eglgrandlyon.connect_form.login`)}
-          name="login"
           onChange={e => changeLogin(e.target.value)}
           value={login}
           inputMode="numeric"
           error={Boolean(error)}
+          required
         />
 
         <TextField
           variant="outlined"
           id={'idFieldPassword' + fluidName}
-          name="password"
           type={showPassword ? 'text' : 'password'}
           className={classNames('inputText', { error: error !== '' })}
           label={t(`auth.eglgrandlyon.connect_form.password`)}
           onChange={e => changePassword(e.target.value)}
           value={password}
           error={Boolean(error)}
+          required
         />
         <span>
           <StyledIconButton
             icon={TrailingIcon}
-            aria-label={t('auth.accessibility.button_reveal_password')}
+            aria-label={
+              showPassword
+                ? t('auth.accessibility.button_hide_password')
+                : t('auth.accessibility.button_reveal_password')
+            }
+            aria-checked={showPassword}
             className="iconShowPassword"
             sized={22}
             onClick={() => setShowPassword(prev => !prev)}
@@ -150,7 +155,7 @@ const EpglForm = ({ hasCreatedAccount }: { hasCreatedAccount: boolean }) => {
           </Button>
         </div>
       </form>
-    </div>
+    </>
   )
 }
 
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
index a5edf19121aeb28e37bb93818c5d2b77a684d0a2..ced72db8dd3a83d8f0eaac2b3dead084f6b10684 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import * as storeHooks from 'store/hooks'
 import { fluidStatusConnectedData } from 'tests/__mocks__/fluidStatusData.mock'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
 import ExpiredConsentModal from './ExpiredConsentModal'
 
 const mockedNavigate = jest.fn()
@@ -53,7 +53,7 @@ describe('ExpiredConsentModal component', () => {
   })
   it('should launch the update consent process for Enedis', async () => {
     const store = createMockEcolyoStore({
-      global: { fluidStatus: fluidStatusConnectedData },
+      global: { ...mockGlobalState, fluidStatus: fluidStatusConnectedData },
     })
     render(
       <Provider store={store}>
@@ -68,7 +68,7 @@ describe('ExpiredConsentModal component', () => {
     await act(async () => {
       await userEvent.click(screen.getByText('consent_outdated.yes'))
     })
-    expect(mockAppDispatch).toHaveBeenCalledTimes(1)
+    expect(mockAppDispatch).toHaveBeenCalledTimes(2)
     expect(mockedNavigate).toHaveBeenCalledTimes(1)
   })
   it('should click on close modal', async () => {
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
index 577a4932ce4f5f05cf82611e0f7622d8e6992f49..8959ba88e9b18f3140b4072bc5456eb694895012 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
@@ -1,10 +1,11 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
 import GrdfIcon from 'assets/icons/ico/consent-outdated-grdf.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import { AccountSgeData } from 'models'
 import React, { useCallback } from 'react'
@@ -74,18 +75,17 @@ const ExpiredConsentModal = ({
       }}
     >
       <div id="accessibility-title">
-        {t('consumption_visualizer.modal.window_title')}
+        {t('consent_outdated.accessibility.window_title')}
       </div>
-      <IconButton
-        aria-label={t('consumption_visualizer.modal.close')}
-        className="modal-paper-close-button"
+      <StyledIconButton
+        icon={CloseIcon}
         onClick={toggleModal}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+        aria-label={t('consent_outdated.accessibility.button_close')}
+        className="modal-paper-close-button"
+      />
       <div className="expired-consent-modal">
         <div className="icon-main">
-          <Icon
+          <StyledIcon
             icon={fluidType === FluidType.ELECTRICITY ? EnedisIcon : GrdfIcon}
             size={135}
           />
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index bc66bb1e283bd4a9e6c9812c6648c9ebed507686..83702bba20fe80bfae05ce21739775e02cce36fc 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -35,10 +35,10 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
         <div
           id="accessibility-title"
         >
-          consumption_visualizer.modal.window_title
+          consent_outdated.accessibility.window_title
         </div>
         <button
-          aria-label="consumption_visualizer.modal.close"
+          aria-label="consent_outdated.accessibility.button_close"
           class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
           tabindex="0"
           type="button"
@@ -47,6 +47,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -67,6 +68,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
             class="icon-main"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="135"
               width="135"
diff --git a/src/components/Connection/GRDFConnect/GrdfConnectView.tsx b/src/components/Connection/GRDFConnect/GrdfConnectView.tsx
index 8923b875d3b8e77182357bb2436d6e260e856fc5..9661de4e119ec9755beda38b9197897849c2b1c8 100644
--- a/src/components/Connection/GRDFConnect/GrdfConnectView.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfConnectView.tsx
@@ -7,7 +7,7 @@ import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
 import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
 import { FluidType } from 'enums'
 import { AccountGRDFData } from 'models'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAppSelector } from 'store/hooks'
 import '../connection.scss'
@@ -18,7 +18,9 @@ export enum GrdfStep {
   Identity,
   Consent,
 }
-
+/**
+ * http://ecolyo.cozy.tools:8080/#/connect/gas
+ */
 export const GrdfConnectView = () => {
   const navigate = useNavigate()
   const { instanceSettings } = useUserInstanceSettings()
@@ -40,6 +42,11 @@ export const GrdfConnectView = () => {
     pceConfirm: false,
   })
 
+  const mainContentRef = useRef<HTMLDivElement>(null)
+  const focusMainContent = () => {
+    setTimeout(() => mainContentRef.current?.focus(), 0)
+  }
+
   const [connect, update] = useKonnectorAuth(FluidType.GAS, {
     grdfAuthData: formData,
   })
@@ -96,10 +103,12 @@ export const GrdfConnectView = () => {
     if (currentStep === GrdfStep.Consent) {
       setLaunchConnection(true)
     }
+    focusMainContent()
   }, [currentStep, isNextValid])
 
   const handlePrev = () => {
     setCurrentStep(prev => prev - 1)
+    focusMainContent()
   }
 
   const renderStep = (step: GrdfStep) => {
@@ -123,7 +132,7 @@ export const GrdfConnectView = () => {
         displayBackArrow={true}
       />
       <Content>
-        <div className="connectView">
+        <div ref={mainContentRef} className="connectView" tabIndex={-1}>
           <div className="stepContainer">
             <FormProgress
               currentStep={currentStep}
diff --git a/src/components/Connection/GRDFConnect/GrdfInit.tsx b/src/components/Connection/GRDFConnect/GrdfInit.tsx
index 8793804daa0e702b5ac657d04543489b5ae398f3..fa0f2ddbee7547b3a6612a6918200959152fed19 100644
--- a/src/components/Connection/GRDFConnect/GrdfInit.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfInit.tsx
@@ -1,7 +1,7 @@
 import Button from '@material-ui/core/Button'
 import GasBillIcon from 'assets/icons/visu/onboarding/gas_bill.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
diff --git a/src/components/Connection/GRDFConnect/GrdfModalHint.tsx b/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
index c015a99bd03ed0331699bd7cd8a0b081d72b72c8..c2bb744a97e47fe962f984f6cc1757b6cbb45ece 100644
--- a/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfModalHint.tsx
@@ -1,10 +1,10 @@
-import { IconButton } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import GasBill from 'assets/icons/visu/onboarding/gas_bill.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 
 const GrdfModalHint = ({
@@ -30,20 +30,19 @@ const GrdfModalHint = ({
       <div id="accessibility-title">
         {t('challenge_no_fluid_modal.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="hintModal">
         <h1 className="text-20-bold">
           {t('auth.grdfgrandlyon.pceModal.title')}
         </h1>
         <div className="content">
           <div className="bill grdf">
-            <Icon icon={GasBill} alt="Facture" className="bill" size={180} />
+            <StyledIcon icon={GasBill} className="bill" size={180} />
           </div>
           <p
             className="grdfText"
diff --git a/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx b/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx
index 2f829315f6d3ca9835fc606257dbe435f2275408..fd12330c01ad87beaed3e3b1bc43fd42a21cd073 100644
--- a/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfWaitConsent.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@material-ui/core'
 import GRDFMail from 'assets/icons/visu/onboarding/grdf-mail.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import { AccountGRDFData, FluidConnection } from 'models'
 import React from 'react'
@@ -17,7 +17,7 @@ export const GrdfWaitConsent = () => {
   const authData = currentFluidStatus.connection.account
     ?.auth as AccountGRDFData
 
-  const updateKonnector = async () => {
+  const updateKonnector = () => {
     const updatedConnection: FluidConnection = {
       ...currentFluidStatus.connection,
       shouldLaunchKonnector: true,
diff --git a/src/components/Connection/GRDFConnect/StepConsent.tsx b/src/components/Connection/GRDFConnect/StepConsent.tsx
index ac9c00dea6cea9d96aca4382038ab404dd4cab01..d5c8dc9bd031dc32dc504e8ffb9bef3b5afec84c 100644
--- a/src/components/Connection/GRDFConnect/StepConsent.tsx
+++ b/src/components/Connection/GRDFConnect/StepConsent.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 
 const StepConsent = ({
@@ -28,16 +28,16 @@ const StepConsent = ({
         <li>{t('auth.grdfgrandlyon.consentLi1')}</li>
         <li>{t('auth.grdfgrandlyon.consentLi2')}</li>
       </ul>
-      <label className="inline">
+      <label htmlFor="dataConsentGrdf" className="inline">
         <input
-          id="dataConsent"
+          id="dataConsentGrdf"
           type="checkbox"
-          name="Data-consent-validation"
           className="inputCheckbox"
           checked={formConsent.dataConsent}
           onChange={e =>
             setFormConsent(prev => ({ ...prev, dataConsent: e.target.checked }))
           }
+          required
         />
         <span
           dangerouslySetInnerHTML={{
@@ -45,16 +45,16 @@ const StepConsent = ({
           }}
         />
       </label>
-      <label className="inline">
+      <label htmlFor="pceConfirm" className="inline">
         <input
-          id="pdlConfirm"
+          id="pceConfirm"
           type="checkbox"
-          name="Data-consent-validation"
           className="inputCheckbox"
           checked={formConsent.pceConfirm}
           onChange={e =>
             setFormConsent(prev => ({ ...prev, pceConfirm: e.target.checked }))
           }
+          required
         />
         <span>{t('auth.grdfgrandlyon.consentCheck2')}</span>
       </label>
diff --git a/src/components/Connection/GRDFConnect/StepIdentity.tsx b/src/components/Connection/GRDFConnect/StepIdentity.tsx
index ff7db3b2755c3aa716809a0c8577faa300e78dcf..fec92d81eb840d7ad64ef1d2d1f3c652d26f9bac 100644
--- a/src/components/Connection/GRDFConnect/StepIdentity.tsx
+++ b/src/components/Connection/GRDFConnect/StepIdentity.tsx
@@ -1,6 +1,6 @@
 import { TextField } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { AccountGRDFData } from 'models'
 import React, { useState } from 'react'
 import GrdfModalHint from './GrdfModalHint'
@@ -23,7 +23,6 @@ export const StepIdentity = ({
         variant="outlined"
         type="text"
         id="firstName"
-        name="firstName"
         value={formData.firstname}
         onChange={e =>
           setFormData(prev => ({ ...prev, firstname: e.target.value }))
@@ -36,7 +35,6 @@ export const StepIdentity = ({
         variant="outlined"
         type="text"
         id="lastName"
-        name="lastName"
         required
         value={formData.lastname}
         onChange={e =>
@@ -49,7 +47,6 @@ export const StepIdentity = ({
         variant="outlined"
         type="email"
         id="email"
-        name="email"
         required
         value={formData.email}
         onChange={e =>
@@ -62,7 +59,6 @@ export const StepIdentity = ({
         variant="outlined"
         type="number"
         id="zipCode"
-        name="zipCode"
         required
         value={formData.postalCode}
         onChange={e =>
@@ -76,7 +72,6 @@ export const StepIdentity = ({
         label={t('auth.grdfgrandlyon.pceLabel')}
         variant="outlined"
         id="pce"
-        name="pce"
         type="number"
         inputMode="numeric"
         required
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
index 8cb9c8bb0363de72c8d0abfff8243b9301abce37..3941573aaa347b5f3b67dcd605e9d9b883bdeccd 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
@@ -33,7 +33,7 @@ describe('SgeConnectView component', () => {
     expect(container).toMatchSnapshot()
   })
 
-  it('should be on stepIdentity by default with button disabled', async () => {
+  it('should be on stepIdentity by default with button disabled', () => {
     render(
       <Provider store={store}>
         <BrowserRouter>
@@ -56,7 +56,7 @@ describe('SgeConnectView component', () => {
   })
 
   describe('should test methods from useKonnectorAuth hook', () => {
-    it('should launch account and trigger creation process', async () => {
+    it('should launch account and trigger creation process', () => {
       const store = createMockEcolyoStore({
         global: {
           ...mockGlobalState,
@@ -74,7 +74,7 @@ describe('SgeConnectView component', () => {
       )
       expect(mockConnect).toHaveBeenCalled()
     })
-    it('should launch existing account update process', async () => {
+    it('should launch existing account update process', () => {
       const store = createMockEcolyoStore({
         global: {
           ...mockGlobalState,
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 2b8a84e087e34da4a116f7981ef9e70ee1360518..8f0a00d20742337821624c9af82a24cdbb72fe19 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -6,7 +6,7 @@ import Header from 'components/Header/Header'
 import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
 import { FluidType, SgeStep } from 'enums'
 import { SgeStore } from 'models'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import {
   setShouldRefreshConsent,
@@ -28,6 +28,9 @@ export type SGEKeysForm =
   | 'dataConsent'
   | 'pdlConfirm'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/connect/electricity
+ */
 const SgeConnectView = () => {
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
@@ -41,6 +44,11 @@ const SgeConnectView = () => {
   const currentFluidStatus = fluidStatus[FluidType.ELECTRICITY]
   const account = currentFluidStatus.connection.account
 
+  const mainContentRef = useRef<HTMLDivElement>(null)
+  const focusMainContent = () => {
+    setTimeout(() => mainContentRef.current?.focus(), 0)
+  }
+
   const [connect, update] = useKonnectorAuth(FluidType.ELECTRICITY, {
     sgeAuthData: sgeConnect,
   })
@@ -109,6 +117,7 @@ const SgeConnectView = () => {
       setCurrentSgeState(updatedState)
       dispatch(updateSgeStore(updatedState))
     }
+    focusMainContent()
   }, [currentStep, isLoading, dispatch, currentSgeState])
 
   const handlePrev = useCallback(() => {
@@ -116,6 +125,7 @@ const SgeConnectView = () => {
       setCurrentStep(prev => prev - 1)
     }
     dispatch(updateSgeStore(currentSgeState))
+    focusMainContent()
   }, [currentSgeState, currentStep, dispatch])
 
   const onChange = useCallback(
@@ -157,7 +167,7 @@ const SgeConnectView = () => {
         displayBackArrow={true}
       />
       <Content>
-        <div className="connectView">
+        <div ref={mainContentRef} className="connectView" tabIndex={-1}>
           <div className="stepContainer">
             <FormProgress
               currentStep={currentStep}
diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx
index 3576986a69311b85e2506e8217fe25cb48e222ea..120be7228191edc43468b894156528225d6a7e3d 100644
--- a/src/components/Connection/SGEConnect/SgeInit.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@material-ui/core'
 import ElectricityBillIcon from 'assets/icons/visu/onboarding/electricity_bill.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.tsx b/src/components/Connection/SGEConnect/SgeModalHint.tsx
index 5b68e0d94d2b0298ed34a3e4ecb23348568b8daa..ba8bc3721502722a6af4fda34d679a2cb020874b 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.tsx
@@ -1,11 +1,11 @@
-import { IconButton } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import Bill from 'assets/icons/ico/bill.svg'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import Prm from 'assets/icons/ico/prm.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 
 interface SgeModalHintProps {
@@ -30,13 +30,12 @@ const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
       <div id="accessibility-title">
         {t('auth.enedissgegrandlyon.pdlModal.title_accessibility')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('auth.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="hintModal">
         <h1 className="text-20-bold">
           {t('auth.enedissgegrandlyon.pdlModal.title')}
@@ -45,15 +44,16 @@ const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
           <p>{t('auth.enedissgegrandlyon.pdlModal.txt1')}</p>
           <p>{t('auth.enedissgegrandlyon.pdlModal.txt2')}</p>
           <div className="bill">
-            <Icon icon={Bill} alt="" size={52} />
+            <StyledIcon icon={Bill} size={52} />
             <p className="text-16-bold">
               {t('auth.enedissgegrandlyon.pdlModal.txt3')}
             </p>
           </div>
           <p>{t('auth.enedissgegrandlyon.pdlModal.txt4')}</p>
-          <Icon
+          <StyledIcon
             icon={Prm}
-            alt={t('auth.enedissgegrandlyon.pdlModal.prm_accessibility')}
+            ariaHidden={false}
+            aria-label={t('auth.enedissgegrandlyon.pdlModal.prm_accessibility')}
             className="prm"
           />
           <Button
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index dfbcc2d51dd3dfc20d9cea6d97fedfbd9efba956..2ecaed6a2329978ca7637022e4061b52d240b3de 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -1,5 +1,5 @@
 import { TextField } from '@material-ui/core'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { SgeStore } from 'models'
 import React from 'react'
 import { SGEKeysForm } from './SgeConnectView'
@@ -21,7 +21,6 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
         variant="outlined"
         type="text"
         id="address"
-        name="address"
         value={sgeState.address}
         onChange={e => onChange('address', e.target.value)}
         required
@@ -31,7 +30,6 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
         variant="outlined"
         type="number"
         id="zipCode"
-        name="zipCode"
         value={sgeState.zipCode ?? undefined}
         onChange={e => onChange('zipCode', e.target.value, 5)}
         required
@@ -41,8 +39,7 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
         variant="outlined"
         type="text"
         id="city"
-        name="city"
-        value={sgeState.city}
+        value={sgeState.city || ''}
         onChange={e => onChange('city', e.target.value)}
         required
       />
diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx
index 33988363d12cafb532a43b721be00e1a02027e4a..25ebb86766ade222562054695f903476050c1248 100644
--- a/src/components/Connection/SGEConnect/StepConsent.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { SgeStore } from 'models'
 import React from 'react'
 import { SGEKeysForm } from './SgeConnectView'
@@ -24,14 +24,14 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
         <li>{t('auth.enedissgegrandlyon.consentLi3')}</li>
         <li>{t('auth.enedissgegrandlyon.consentLi4')}</li>
       </ul>
-      <label className="inline">
+      <label htmlFor="dataConsentSge" className="inline">
         <input
-          id="dataConsent"
+          id="dataConsentSge"
           type="checkbox"
-          name="Data-consent-validation"
           className="inputCheckbox"
           onChange={e => onChange('dataConsent', e.target.checked)}
           checked={sgeState.dataConsent}
+          required
         />
         <span
           dangerouslySetInnerHTML={{
@@ -39,14 +39,14 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
           }}
         />
       </label>
-      <label className="inline">
+      <label htmlFor="pdlConfirm" className="inline">
         <input
           id="pdlConfirm"
           type="checkbox"
-          name="Data-consent-validation"
           className="inputCheckbox"
           onChange={e => onChange('pdlConfirm', e.target.checked)}
           checked={sgeState.pdlConfirm}
+          required
         />
         <span
           dangerouslySetInnerHTML={{
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index 6a79150325643d1b99fa30281eab1545aa26a632..e9ef1c8ecaa6d880c75d9018b22d292e9c8ce4a6 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -1,6 +1,6 @@
 import { Button, TextField } from '@material-ui/core'
 import SgeModalHint from 'components/Connection/SGEConnect/SgeModalHint'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { SgeStore } from 'models'
 import React, { useState } from 'react'
 import { SGEKeysForm } from './SgeConnectView'
@@ -31,29 +31,28 @@ const StepIdentityAndPdl = ({
         variant="outlined"
         type="text"
         id="firstName"
-        name="firstName"
         value={sgeState.firstName}
         onChange={e => onChange('firstName', e.target.value)}
         required
+        autoComplete="given-name"
       />
       <TextField
         label={t('auth.enedissgegrandlyon.lastName')}
         variant="outlined"
         type="text"
         id="lastName"
-        name="lastName"
         value={sgeState.lastName}
         onChange={e => onChange('lastName', e.target.value)}
         required
+        autoComplete="family-name"
       />
       <h2 className="text-22-bold">{t('auth.enedissgegrandlyon.pdlTitle')}</h2>
       <TextField
         label={t('auth.enedissgegrandlyon.pdlLabel')}
         variant="outlined"
         id="pdl"
-        name="pdl"
         type="number"
-        value={sgeState.pdl ? sgeState.pdl : undefined}
+        value={sgeState.pdl || ''}
         onChange={e => onChange('pdl', e.target.value, 14)}
         inputMode="numeric"
         required
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index cdc58037adb76fba73cd409447e624c664bda733..8da493fcfe8326d458b5eb7102d8ce1b1c1187a2 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -17,31 +17,8 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
           class="header-content-top"
         >
           <div
-            class="header-text-desktop text-14-normal-uppercase"
+            class="header-text-selection text-14-normal-uppercase"
           >
-            <button
-              aria-label="header.accessibility.button_back"
-              class="MuiButtonBase-root MuiIconButton-root header-back-button"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiIconButton-label"
-              >
-                <svg
-                  class="styles__icon___23x3R"
-                  height="16"
-                  width="16"
-                >
-                  <use
-                    xlink:href="#test-file-stub"
-                  />
-                </svg>
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </button>
             <span>
               common.title_sge_connect
             </span>
@@ -56,6 +33,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="40"
                 width="40"
@@ -79,6 +57,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
   <mock-content>
     <div
       class="connectView"
+      tabindex="-1"
     >
       <div
         class="stepContainer"
@@ -138,9 +117,9 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
             >
               <input
                 aria-invalid="false"
+                autocomplete="given-name"
                 class="MuiInputBase-input MuiOutlinedInput-input"
                 id="firstName"
-                name="firstName"
                 required=""
                 type="text"
                 value=""
@@ -183,9 +162,9 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
             >
               <input
                 aria-invalid="false"
+                autocomplete="family-name"
                 class="MuiInputBase-input MuiOutlinedInput-input"
                 id="lastName"
-                name="lastName"
                 required=""
                 type="text"
                 value=""
@@ -236,7 +215,6 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
                 aria-invalid="false"
                 class="MuiInputBase-input MuiOutlinedInput-input"
                 id="pdl"
-                name="pdl"
                 required=""
                 type="number"
                 value=""
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
index b9ab5c3f9dc4a7569fdc89d10fdbddcf246c804b..45adc444c765eeb371a0d11a51c3f8dbcf0be75d 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -81,7 +82,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
               class="bill"
             >
               <svg
-                alt=""
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="52"
                 width="52"
@@ -100,7 +101,8 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
               auth.enedissgegrandlyon.pdlModal.txt4
             </p>
             <svg
-              alt="auth.enedissgegrandlyon.pdlModal.prm_accessibility"
+              aria-hidden="false"
+              aria-label="auth.enedissgegrandlyon.pdlModal.prm_accessibility"
               class="prm styles__icon___23x3R"
               height="16"
               width="16"
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
index 9333648f773064e1c9f2b800faca207d7e80aa25..1e960609d47e012e634b5b704ae56d88290a8c40 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
@@ -35,7 +35,6 @@ exports[`StepAddress component should be rendered correctly 1`] = `
           aria-invalid="false"
           class="MuiInputBase-input MuiOutlinedInput-input"
           id="address"
-          name="address"
           required=""
           type="text"
           value=""
@@ -80,7 +79,6 @@ exports[`StepAddress component should be rendered correctly 1`] = `
           aria-invalid="false"
           class="MuiInputBase-input MuiOutlinedInput-input"
           id="zipCode"
-          name="zipCode"
           required=""
           type="number"
           value=""
@@ -125,7 +123,6 @@ exports[`StepAddress component should be rendered correctly 1`] = `
           aria-invalid="false"
           class="MuiInputBase-input MuiOutlinedInput-input"
           id="city"
-          name="city"
           required=""
           type="text"
           value=""
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
index 12291fade1d0270bf8dd71711888143f63131886..15ee2a27708c1fc5068d9e81c4be12098ab43427 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
@@ -33,11 +33,12 @@ exports[`StepConsent component should be rendered correctly 1`] = `
     </ul>
     <label
       class="inline"
+      for="dataConsentSge"
     >
       <input
         class="inputCheckbox"
-        id="dataConsent"
-        name="Data-consent-validation"
+        id="dataConsentSge"
+        required=""
         type="checkbox"
       />
       <span>
@@ -46,11 +47,12 @@ exports[`StepConsent component should be rendered correctly 1`] = `
     </label>
     <label
       class="inline"
+      for="pdlConfirm"
     >
       <input
         class="inputCheckbox"
         id="pdlConfirm"
-        name="Data-consent-validation"
+        required=""
         type="checkbox"
       />
       <span>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
index 2eaf41d731643a98e6a4fa75ba5903fcaad55e04..05a6887264e695714b1d1cffd1aa20f204bbc26f 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
@@ -33,9 +33,9 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
       >
         <input
           aria-invalid="false"
+          autocomplete="given-name"
           class="MuiInputBase-input MuiOutlinedInput-input"
           id="firstName"
-          name="firstName"
           required=""
           type="text"
           value=""
@@ -78,9 +78,9 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
       >
         <input
           aria-invalid="false"
+          autocomplete="family-name"
           class="MuiInputBase-input MuiOutlinedInput-input"
           id="lastName"
-          name="lastName"
           required=""
           type="text"
           value=""
@@ -131,7 +131,6 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
           aria-invalid="false"
           class="MuiInputBase-input MuiOutlinedInput-input"
           id="pdl"
-          name="pdl"
           required=""
           type="number"
           value=""
diff --git a/src/components/Connection/connection.scss b/src/components/Connection/connection.scss
index bde9ff1d3bb802b579c84895e838e9a8f4bc15fd..45672fe10ed8d854adca9737cb44792e6e5e7da6 100644
--- a/src/components/Connection/connection.scss
+++ b/src/components/Connection/connection.scss
@@ -33,43 +33,45 @@
     margin: 0 auto 0.5rem auto;
     color: $white;
   }
+}
+
+// EGL
 
-  .connection-form-button {
+.connection-form-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  button {
+    height: 2.5rem;
+    max-width: 22.5rem;
+    margin: 0;
+  }
+}
+.connection-form-connect-button {
+  button {
+    height: auto;
+  }
+  &.grdf {
+    margin-top: 2rem;
+  }
+  .connection-form-connect-button-content {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    gap: 0.5rem;
-    button {
-      height: 2.5rem;
-      max-width: 22.5rem;
-      margin: 0;
-    }
-  }
-  .connection-form-connect-button {
-    button {
-      height: auto;
+    width: 100%;
+    @media #{$large-phone} {
+      justify-content: left;
     }
-    &.grdf {
-      margin-top: 2rem;
+    .connection-form-connect-button-content-icon {
+      margin: 0 0.5rem 0 0;
     }
-    .connection-form-connect-button-content {
+    .connection-form-connect-button-text {
       display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      @media #{$large-phone} {
-        justify-content: left;
-      }
-      .connection-form-connect-button-content-icon {
-        margin: 0 0.5rem 0 0;
-      }
-      .connection-form-connect-button-text {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        text-align: left;
-        max-width: 19.5rem;
-      }
+      flex-direction: column;
+      align-items: flex-start;
+      text-align: left;
+      max-width: 19.5rem;
     }
   }
 }
@@ -90,6 +92,7 @@
       display: flex;
       flex-direction: column;
       gap: 1rem;
+      color: $grey-bright;
 
       h2 {
         color: $grey-bright;
@@ -119,7 +122,6 @@
       .MuiInputBase-root {
         max-width: 300px;
       }
-      
 
       /* Chrome, Safari, Edge, Opera */
       input::-webkit-outer-spin-button,
@@ -197,4 +199,3 @@
     }
   }
 }
-
diff --git a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
index 78b2dc508218534047f0cde124a05df356038db7..3ffa25603c8e63bbbe5fdc34d66d4fb0d5050a56 100644
--- a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
+++ b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.spec.tsx
@@ -8,7 +8,7 @@ import ConsumptionDetails from './ConsumptionDetails'
 describe('ConsumptionDetails component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <ConsumptionDetails fluidType={FluidType.ELECTRICITY} />
diff --git a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
index d74c3bf9c519405750a6acce40e17bb5a896a874..32b9c1021605b43b032f5638bae0e529fea80d13 100644
--- a/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
+++ b/src/components/Consumption/ConsumptionDetails/ConsumptionDetails.tsx
@@ -1,5 +1,5 @@
 import TotalConsumption from 'components/TotalConsumption/TotalConsumption'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, TimeStep } from 'enums'
 import React from 'react'
 import { useAppSelector } from 'store/hooks'
diff --git a/src/components/Consumption/ConsumptionView.spec.tsx b/src/components/Consumption/ConsumptionView.spec.tsx
index 96f96183d9ec8a16a75e399a85cdcbc450744fc4..df06f2717b0bf44e39fe5f28ffb5fcb91dcfc621 100644
--- a/src/components/Consumption/ConsumptionView.spec.tsx
+++ b/src/components/Consumption/ConsumptionView.spec.tsx
@@ -12,6 +12,7 @@ import { mockTestProfile1 } from 'tests/__mocks__/profileType.mock'
 import {
   createMockEcolyoStore,
   mockChartState,
+  mockGlobalState,
   mockInitialEcolyoState,
   mockModalState,
 } from 'tests/__mocks__/store'
@@ -62,6 +63,7 @@ describe('ConsumptionView component', () => {
         showOfflineData: true,
       },
       global: {
+        ...mockGlobalState,
         fluidStatus: mockFluidStatus,
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
@@ -72,6 +74,7 @@ describe('ConsumptionView component', () => {
         <ConsumptionView fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
+    await waitFor(() => null, { container })
     expect(container.getElementsByTagName('mock-cozybar')[0]).toBeTruthy()
     expect(container.getElementsByTagName('mock-header')[0]).toBeTruthy()
     expect(container.getElementsByTagName('mock-dateNavigator')[0]).toBeTruthy()
@@ -82,31 +85,34 @@ describe('ConsumptionView component', () => {
     ).toBeTruthy()
   })
 
-  it('should set CurrentTimeStep to WEEK when fluid != ELECTRICITY and timeStep = HALF_AN_HOUR', () => {
+  it('should set CurrentTimeStep to WEEK when fluid != ELECTRICITY and timeStep = HALF_AN_HOUR', async () => {
     const store = createMockEcolyoStore({
       chart: {
         ...mockChartState,
         currentTimeStep: TimeStep.HALF_AN_HOUR,
       },
       global: {
+        ...mockGlobalState,
         fluidStatus: mockInitialEcolyoState.global.fluidStatus,
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
       modal: mockModalState,
     })
-    render(
+    const { container } = render(
       <Provider store={store}>
         <ConsumptionView fluidType={FluidType.GAS} />
       </Provider>
     )
+    await waitFor(() => null, { container })
     expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1)
     expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK)
   })
 
-  it('should render konnector list when no fluid is connected', () => {
+  it('should render konnector list when no fluid is connected', async () => {
     const store = createMockEcolyoStore({
       chart: mockChartStateShowOffline,
       global: {
+        ...mockGlobalState,
         fluidStatus: [],
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
@@ -117,6 +123,7 @@ describe('ConsumptionView component', () => {
         <ConsumptionView fluidType={FluidType.MULTIFLUID} />
       </Provider>
     )
+    await waitFor(() => null, { container })
     expect(
       container.getElementsByTagName('mock-consumptionDetails')[0]
     ).toBeTruthy()
@@ -126,6 +133,7 @@ describe('ConsumptionView component', () => {
     const store = createMockEcolyoStore({
       chart: mockChartStateShowOffline,
       global: {
+        ...mockGlobalState,
         fluidStatus: mockFluidStatus,
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
@@ -149,6 +157,7 @@ describe('ConsumptionView component', () => {
     const store = createMockEcolyoStore({
       chart: mockChartStateShowOffline,
       global: {
+        ...mockGlobalState,
         fluidStatus: mockFluidStatus,
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
@@ -175,6 +184,7 @@ describe('ConsumptionView component', () => {
       const store = createMockEcolyoStore({
         chart: mockChartStateShowOffline,
         global: {
+          ...mockGlobalState,
           fluidStatus: updatedStatus,
           releaseNotes: mockInitialEcolyoState.global.releaseNotes,
         },
@@ -203,6 +213,7 @@ describe('ConsumptionView component', () => {
       const store = createMockEcolyoStore({
         chart: mockChartStateShowOffline,
         global: {
+          ...mockGlobalState,
           fluidStatus: updatedStatus,
           releaseNotes: mockInitialEcolyoState.global.releaseNotes,
         },
@@ -225,46 +236,51 @@ describe('ConsumptionView component', () => {
       ).toBeInTheDocument()
     })
   })
-  it('should show expired modal when a GRDF consent is expired', () => {
+  it('should show expired modal when a GRDF consent is expired', async () => {
     const updatedStatus = mockInitialEcolyoState.global.fluidStatus
     updatedStatus[0] = mockExpiredGas
     const store = createMockEcolyoStore({
       chart: mockChartStateShowOffline,
       global: {
+        ...mockGlobalState,
         fluidStatus: updatedStatus,
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
       modal: mockModalState,
     })
-    render(
+    const { container } = render(
       <Provider store={store}>
         <ConsumptionView fluidType={FluidType.GAS} />
       </Provider>
     )
+    await waitFor(() => null, { container })
     expect(screen.getByText('consent_outdated.title.2')).toBeInTheDocument()
   })
-  it('should show expired modal when a Enedis consent is expired', () => {
+  it('should show expired modal when a Enedis consent is expired', async () => {
     const updatedStatus = mockInitialEcolyoState.global.fluidStatus
     updatedStatus[0] = mockExpiredElec
     const store = createMockEcolyoStore({
       chart: mockChartStateShowOffline,
       global: {
+        ...mockGlobalState,
         fluidStatus: updatedStatus,
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
       modal: mockModalState,
     })
-    render(
+    const { container } = render(
       <Provider store={store}>
         <ConsumptionView fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
+    await waitFor(() => null, { container })
     expect(screen.getByText('consent_outdated.title.0')).toBeInTheDocument()
   })
   it('should render customPopup Modal', async () => {
     const store = createMockEcolyoStore({
       chart: mockChartStateShowOffline,
       global: {
+        ...mockGlobalState,
         fluidStatus: mockFluidStatus,
         releaseNotes: mockInitialEcolyoState.global.releaseNotes,
       },
@@ -274,17 +290,19 @@ describe('ConsumptionView component', () => {
       },
     })
     mockUpdateProfile.mockResolvedValue(mockTestProfile1)
-    render(
+    const { container } = render(
       <Provider store={store}>
         <ConsumptionView fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
+    await waitFor(() => null, { container })
     expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
   it('should render releaseNotesModal if releaseNotes.show is true', async () => {
     const store = createMockEcolyoStore({
       chart: mockChartStateShowOffline,
       global: {
+        ...mockGlobalState,
         fluidStatus: mockFluidStatus,
         releaseNotes: {
           show: true,
@@ -294,11 +312,12 @@ describe('ConsumptionView component', () => {
       modal: mockModalState,
     })
     mockUpdateProfile.mockResolvedValue(mockTestProfile1)
-    render(
+    const { container } = render(
       <Provider store={store}>
         <ConsumptionView fluidType={FluidType.ELECTRICITY} />
       </Provider>
     )
+    await waitFor(() => null, { container })
     expect(screen.getByRole('dialog')).toBeInTheDocument()
   })
 })
diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx
index 5b13626490267657c865d676f9627973c77d2a73..816cbc96c77087d3e89da88dff19a73746d916e7 100644
--- a/src/components/Consumption/ConsumptionView.tsx
+++ b/src/components/Consumption/ConsumptionView.tsx
@@ -13,7 +13,6 @@ import { useClient } from 'cozy-client'
 import { FluidState, FluidType, TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 import DateChartService from 'services/dateChart.service'
 import ProfileService from 'services/profile.service'
 import {
@@ -22,20 +21,26 @@ import {
   setSelectedDate,
   setShowOfflineData,
 } from 'store/chart/chart.slice'
-import { showReleaseNotes } from 'store/global/global.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
 import { openPartnersModal, setCustomPopup } from 'store/modal/modal.slice'
 import { isLastDateReached } from 'utils/date'
 import {
+  getFluidName,
   getKonnectorUpdateError,
+  getPartnerKey,
   getTodayDate,
   isKonnectorActive,
 } from 'utils/utils'
 import ConsumptionDetails from './ConsumptionDetails/ConsumptionDetails'
 import FluidButtons from './FluidButtons/FluidButtons'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/consumption
+ * http://ecolyo.cozy.tools:8080/#/consumption/electricity
+ * http://ecolyo.cozy.tools:8080/#/consumption/water
+ * http://ecolyo.cozy.tools:8080/#/consumption/gas
+ */
 const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
-  const navigate = useNavigate()
   const client = useClient()
   const dispatch = useAppDispatch()
   const {
@@ -54,9 +59,6 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
     currentFluidStatus.status === FluidState.CHALLENGE_ASKED
 
   const [openExpiredConsentModal, setOpenExpiredConsentModal] = useState(true)
-  const [openReleaseNoteModal, setOpenReleaseNoteModal] = useState<boolean>(
-    releaseNotes.show
-  )
   const [consentExpiredFluids, setConsentExpiredFluids] = useState<FluidType[]>(
     []
   )
@@ -74,33 +76,11 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
       ? `${currentFluidStatus.lastDataDate.toLocaleString() + fluidType}`
       : ''
 
-  const getPartnerKey = (fluidType: FluidType): 'enedis' | 'egl' | 'grdf' => {
-    switch (fluidType) {
-      case FluidType.ELECTRICITY:
-        return 'enedis'
-      case FluidType.WATER:
-        return 'egl'
-      case FluidType.GAS:
-        return 'grdf'
-      default:
-        throw new Error('unknown fluidtype')
-    }
+  const getTitleKey = (fluidType: FluidType): string => {
+    if (fluidType === FluidType.MULTIFLUID) return 'common.title_consumption'
+    return `common.title_consumption_${getFluidName(fluidType)}`
   }
 
-  const handleCloseReleaseNoteModal = useCallback(() => {
-    setOpenReleaseNoteModal(false)
-    dispatch(
-      showReleaseNotes({
-        show: false,
-        notes: releaseNotes.notes,
-        redirectLink: releaseNotes.redirectLink,
-      })
-    )
-    if (releaseNotes.redirectLink) {
-      navigate(releaseNotes.redirectLink)
-    }
-  }, [dispatch, navigate, releaseNotes.notes, releaseNotes.redirectLink])
-
   const handleClosePartnerIssueModal = useCallback(async () => {
     const profileValues = await profileService.getProfile()
     if (profileValues) {
@@ -168,7 +148,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
       }
     }
 
-    if (subscribed) setConsentExpiredFluids(expiredConsents)
+    subscribed && setConsentExpiredFluids(expiredConsents)
     return () => {
       subscribed = false
     }
@@ -210,8 +190,8 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
 
   return (
     <>
-      <CozyBar titleKey="common.title_consumption" />
-      <Header desktopTitleKey="common.title_consumption">
+      <CozyBar titleKey={getTitleKey(fluidType)} />
+      <Header desktopTitleKey={getTitleKey(fluidType)}>
         <DateNavigator
           disableNext={isLastDateReached(selectedDate, currentTimeStep)}
           disablePrev={disablePrev}
@@ -236,12 +216,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
       </Content>
 
       {/* MODALS */}
-      {openReleaseNoteModal && (
-        <ReleaseNotesModal
-          open={openReleaseNoteModal}
-          handleCloseClick={handleCloseReleaseNoteModal}
-        />
-      )}
+      {releaseNotes.show && <ReleaseNotesModal open={releaseNotes.show} />}
       {/* Partner issue modals for individual fluids */}
       {fluidStatus
         .filter(fluid => fluid.maintenance)
diff --git a/src/components/Consumption/FluidButtons/FluidButton.spec.tsx b/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
index 09d06751951cf026faba5835fd1c3c13ad34b78f..d78072dfc3ce56f080b1b1c5edba2cd9cf1c3714 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.spec.tsx
@@ -9,7 +9,7 @@ import FluidButton from './FluidButton'
 describe('FluidButton component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <FluidButton fluidType={FluidType.ELECTRICITY} isActive={false} />
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index cd08a99446f0f896133baeb5191830565b1f7c07..f6aa3af5b01b22aba90ac4d28f55f3ca37c471ec 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -3,7 +3,7 @@ import ErrorNotif from 'assets/icons/ico/notif_error.svg'
 import PartnerIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
 import classNames from 'classnames'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidState, FluidType } from 'enums'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -42,7 +42,7 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
 
   const iconType = getNavPicto(fluidType, isActive, isConnected())
 
-  const goToFluid = useCallback(async () => {
+  const goToFluid = useCallback(() => {
     navigate(isMulti ? '/consumption' : `/consumption/${fluidName}`)
   }, [navigate, isMulti, fluidName])
 
@@ -56,7 +56,11 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
   }, [fluidStatus, fluidType, isConnected, isErrored, isMulti])
 
   return (
-    <IconButton className="fluid-title fluid-button" onClick={goToFluid}>
+    <IconButton
+      role="tab"
+      className="fluid-title fluid-button"
+      onClick={goToFluid}
+    >
       <StyledIcon
         className="fluid-icon"
         icon={iconType}
diff --git a/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx b/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
index 111456ecb5c280068e07928dbedfe1e66b91a0bc..3a59ea931847bb7002ce5011b90495a0efd06de2 100644
--- a/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButtons.spec.tsx
@@ -8,7 +8,7 @@ import FluidButtons from './FluidButtons'
 describe('FluidButtons component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <FluidButtons activeFluid={FluidType.ELECTRICITY} />
diff --git a/src/components/Consumption/FluidButtons/FluidButtons.tsx b/src/components/Consumption/FluidButtons/FluidButtons.tsx
index 09ec44d26b5e6364eb28d3d8ab7de5ae5aa38d18..fb305e20b5c16bb9967b5f5f5eb547f4ac700696 100644
--- a/src/components/Consumption/FluidButtons/FluidButtons.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButtons.tsx
@@ -1,9 +1,12 @@
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
 import FluidButton from './FluidButton'
 import './fluidButtons.scss'
 
 const FluidButtons = ({ activeFluid }: { activeFluid: FluidType }) => {
+  const { t } = useI18n()
+
   const orderedFluids = [
     FluidType.MULTIFLUID,
     FluidType.ELECTRICITY,
@@ -12,7 +15,11 @@ const FluidButtons = ({ activeFluid }: { activeFluid: FluidType }) => {
   ]
 
   return (
-    <div className="fluid-buttons">
+    <div
+      role="tablist"
+      aria-label={t('consumption.accessibility.fluid_menu')}
+      className="fluid-buttons"
+    >
       <div className="content">
         {orderedFluids.map(fluid => (
           <FluidButton
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
index 8c24c5c5e4a9ee60a15420631cef7af09d6dfdd7..e4ba36dde0be8b2b2e7604548c42f6d7f1359c81 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButton.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`FluidButton component should be rendered correctly 1`] = `
 <div>
   <button
     class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+    role="tab"
     tabindex="0"
     type="button"
   >
diff --git a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
index 271a057e4ab171d41a738c46816f606037038603..0a7e3429f9c88c29f61fd0f25fd686b7e63bc566 100644
--- a/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
+++ b/src/components/Consumption/FluidButtons/__snapshots__/FluidButtons.spec.tsx.snap
@@ -3,13 +3,16 @@
 exports[`FluidButtons component should be rendered correctly 1`] = `
 <div>
   <div
+    aria-label="consumption.accessibility.fluid_menu"
     class="fluid-buttons"
+    role="tablist"
   >
     <div
       class="content"
     >
       <button
         class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+        role="tab"
         tabindex="0"
         type="button"
       >
@@ -38,6 +41,7 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
       </button>
       <button
         class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+        role="tab"
         tabindex="0"
         type="button"
       >
@@ -66,6 +70,7 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
       </button>
       <button
         class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+        role="tab"
         tabindex="0"
         type="button"
       >
@@ -94,6 +99,7 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
       </button>
       <button
         class="MuiButtonBase-root MuiIconButton-root fluid-title fluid-button"
+        role="tab"
         tabindex="0"
         type="button"
       >
diff --git a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
index ab0e5d35ef66101aebf52175ca76c3c1f1b2779c..fcdbc54ad617e3e44dd79df554a8cbcd10236b9f 100644
--- a/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/ConsumptionVisualizer.tsx
@@ -1,20 +1,25 @@
 import DataloadConsumptionVisualizer from 'components/ConsumptionVisualizer/DataloadConsumptionVisualizer'
 import { FluidType } from 'enums'
 import { DateTime } from 'luxon'
-import { Dataload } from 'models'
 import React from 'react'
 import { useAppSelector } from 'store/hooks'
 import InfoDataConsumptionVisualizer from './InfoDataConsumptionVisualizer'
 import './consumptionVisualizer.scss'
 
-const ConsumptionVisualizer = ({ fluidType }: { fluidType: FluidType }) => {
+const ConsumptionVisualizer = ({
+  fluidType,
+  focusable,
+}: {
+  fluidType: FluidType
+  focusable?: boolean
+}) => {
   const {
     chart: { currentDatachart, currentDatachartIndex },
     global: { fluidStatus, fluidTypes },
   } = useAppSelector(state => state.ecolyo)
 
-  const dataload: Dataload = currentDatachart.actualData[currentDatachartIndex]
-  const compareDataload: Dataload | null = currentDatachart.comparisonData
+  const dataload = currentDatachart.actualData[currentDatachartIndex]
+  const compareDataload = currentDatachart.comparisonData
     ? currentDatachart.comparisonData[currentDatachartIndex]
     : null
 
@@ -23,7 +28,7 @@ const ConsumptionVisualizer = ({ fluidType }: { fluidType: FluidType }) => {
     const lastDays: DateTime[] = []
     if (fluidType === FluidType.MULTIFLUID) {
       for (const _fluidType of fluidTypes) {
-        const date: DateTime | null = fluidStatus[_fluidType].lastDataDate
+        const date = fluidStatus[_fluidType].lastDataDate
         if (date) {
           lastDays.push(date)
         }
@@ -38,7 +43,7 @@ const ConsumptionVisualizer = ({ fluidType }: { fluidType: FluidType }) => {
     }
     return lastDay
   }
-  const lastDataDate: DateTime | null = getLastDataDate()
+  const lastDataDate = getLastDataDate()
 
   return (
     <div className="consumptionvisualizer-root">
@@ -46,12 +51,14 @@ const ConsumptionVisualizer = ({ fluidType }: { fluidType: FluidType }) => {
         fluidType={fluidType}
         dataload={dataload}
         compareDataload={compareDataload}
+        focusable={focusable}
       />
       <div className="consumptionvisualizer-info">
         <InfoDataConsumptionVisualizer
           dataload={dataload}
           fluidType={fluidType}
           lastDataDate={lastDataDate}
+          focusable={focusable}
         />
       </div>
     </div>
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index e0afcdfbd52fa876d4cb2a597f6d8055a1021657..72f8920ca8e556d755e766cfc62b8b47869cc575 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -44,7 +44,7 @@ const dataLoadWithValueDetail: Dataload = {
 describe('Dataload consumption visualizer component', () => {
   const store = createMockEcolyoStore()
 
-  it('should render with single fluid', async () => {
+  it('should render with single fluid', () => {
     const { container } = render(
       <Provider store={store}>
         <DataloadConsumptionVisualizer
@@ -120,7 +120,7 @@ describe('Dataload consumption visualizer component', () => {
     expect(links.length).toBe(3)
   })
 
-  it('should render with no value to compare available', async () => {
+  it('should render with no value to compare available', () => {
     const store = createMockEcolyoStore({
       chart: { ...mockChartState, showCompare: true },
     })
@@ -138,7 +138,7 @@ describe('Dataload consumption visualizer component', () => {
       .item(0)
     expect(element).toBeInTheDocument()
   })
-  it('should render with water comparison data', async () => {
+  it('should render with water comparison data', () => {
     const store = createMockEcolyoStore({
       chart: { ...mockChartState, showCompare: true },
     })
@@ -154,7 +154,7 @@ describe('Dataload consumption visualizer component', () => {
     const element = container.getElementsByClassName('water-compare').item(0)
     expect(element).toBeInTheDocument()
   })
-  it('should render multifluid with no compare and display estimation modal', async () => {
+  it('should render multifluid with no compare and display estimation modal', () => {
     const { container } = render(
       <Provider store={store}>
         <DataloadConsumptionVisualizer
@@ -169,7 +169,7 @@ describe('Dataload consumption visualizer component', () => {
       .item(0)
     expect(element).toBeInTheDocument()
   })
-  it('should render multifluid with euro conversions', async () => {
+  it('should render multifluid with euro conversions', () => {
     jest.mock('services/converter.service', () => {
       return jest.fn(() => ({
         LoadToEuro: jest.fn(),
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 6e38fa737e66acd5e9baa6ccac631f1b373ffe12..70162cd080db976256c3429a9c58c9412c073245 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -12,11 +12,13 @@ interface DataloadConsumptionVisualizerProps {
   fluidType: FluidType
   dataload: Dataload
   compareDataload: Dataload | null
+  focusable?: boolean
 }
 const DataloadConsumptionVisualizer = ({
   fluidType,
   dataload,
   compareDataload,
+  focusable,
 }: DataloadConsumptionVisualizerProps) => {
   const { showCompare } = useAppSelector(state => state.ecolyo.chart)
   const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
@@ -35,7 +37,11 @@ const DataloadConsumptionVisualizer = ({
   ) {
     return (
       <div className="dataloadvisualizer-root">
-        <DataloadNoValue dataload={dataload} fluidType={fluidType} />
+        <DataloadNoValue
+          dataload={dataload}
+          fluidType={fluidType}
+          focusable={focusable}
+        />
       </div>
     )
   }
@@ -50,12 +56,14 @@ const DataloadConsumptionVisualizer = ({
               fluidType={fluidType}
               dataloadSectionType={DataloadSectionType.LEFT}
               toggleEstimationModal={toggleEstimationModal}
+              focusable={focusable}
             />
             <DataloadSection
               dataload={dataload}
               fluidType={fluidType}
               dataloadSectionType={DataloadSectionType.RIGHT}
               toggleEstimationModal={toggleEstimationModal}
+              focusable={focusable}
             />
           </>
         ) : (
@@ -64,6 +72,7 @@ const DataloadConsumptionVisualizer = ({
             fluidType={fluidType}
             dataloadSectionType={DataloadSectionType.NO_COMPARE}
             toggleEstimationModal={toggleEstimationModal}
+            focusable={focusable}
           />
         )}
       </div>
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index 7598813152c06aaa5ab6fc6d841cc15c10b2af0f..7bcb4b4e0500dca79596e5d6bfca7396258859dd 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@material-ui/core'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { DataloadState, FluidType } from 'enums'
 import { Dataload } from 'models'
 import React, { useCallback } from 'react'
@@ -11,9 +11,14 @@ import './consumptionVisualizer.scss'
 interface DataloadNoValueProps {
   dataload: Dataload
   fluidType: FluidType
+  focusable?: boolean
 }
 
-const DataloadNoValue = ({ dataload, fluidType }: DataloadNoValueProps) => {
+const DataloadNoValue = ({
+  dataload,
+  fluidType,
+  focusable,
+}: DataloadNoValueProps) => {
   const { t } = useI18n()
   const dispatch = useAppDispatch()
   const fluidName = getFluidName(fluidType)
@@ -63,6 +68,7 @@ const DataloadNoValue = ({ dataload, fluidType }: DataloadNoValueProps) => {
       <Button
         onClick={handleToggleKonnectorCard}
         classes={{ root: 'btnText', label: 'text-22-normal' }}
+        tabIndex={focusable ? 0 : -1}
       >
         {t('consumption_visualizer.missing_data')}
       </Button>
diff --git a/src/components/ConsumptionVisualizer/DataloadSection.tsx b/src/components/ConsumptionVisualizer/DataloadSection.tsx
index 84a6185eefcd99189f94671696fb370539330759..f15b5ad208a90d2608363e17f28ef7a04d19d94b 100644
--- a/src/components/ConsumptionVisualizer/DataloadSection.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSection.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { DataloadSectionType, FluidType } from 'enums'
 import { Dataload } from 'models'
 import React from 'react'
@@ -13,12 +13,14 @@ interface DataloadSectionProps {
   fluidType: FluidType
   dataloadSectionType: DataloadSectionType
   toggleEstimationModal: () => void
+  focusable?: boolean
 }
 const DataloadSection = ({
   dataload,
   fluidType,
   dataloadSectionType,
   toggleEstimationModal,
+  focusable,
 }: DataloadSectionProps) => {
   const { t } = useI18n()
   const isLeft = dataloadSectionType === DataloadSectionType.LEFT
@@ -59,12 +61,14 @@ const DataloadSection = ({
           fluidType={fluidType}
           dataloadSectionType={dataloadSectionType}
           toggleEstimationModal={toggleEstimationModal}
+          focusable={focusable}
         />
       </div>
       <DataloadSectionDetail
         dataload={dataload}
         fluidType={fluidType}
         dataloadSectionType={dataloadSectionType}
+        focusable={focusable}
       />
     </div>
   )
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
index b16a11c999c779d482b909339e28b9ca433f5b92..2b87396502c960a8a47c8dab90410bd0a2b07911 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { DataloadSectionType, DataloadState, FluidType } from 'enums'
 import { Dataload } from 'models'
 import React from 'react'
@@ -13,12 +13,14 @@ interface DataloadSectionDetailProps {
   dataload: Dataload
   fluidType: FluidType
   dataloadSectionType: DataloadSectionType
+  focusable?: boolean
 }
 
 const DataloadSectionDetail = ({
   dataload,
   fluidType,
   dataloadSectionType,
+  focusable,
 }: DataloadSectionDetailProps) => {
   const { t } = useI18n()
   const converterService = new ConverterService()
@@ -53,7 +55,7 @@ const DataloadSectionDetail = ({
 
   if (isMulti && isCompare && dataload.valueDetail) {
     return (
-      <div className="dataloadvisualizer-euro text-16-normal">
+      <div role="group" className="dataloadvisualizer-euro text-16-normal">
         {dataload.valueDetail.map((value, index) => {
           const isValid = value.state === DataloadState.VALID
           const isUpcoming = value.state === DataloadState.UPCOMING
@@ -64,8 +66,14 @@ const DataloadSectionDetail = ({
           return (
             <NavLink
               key={FluidType[index]}
+              aria-label={t(
+                `consumption_visualizer.cost_per_fluid.${FluidType[
+                  index
+                ].toLowerCase()}`
+              )}
               to={`/consumption/${FluidType[index].toLowerCase()}`}
               className="dataloadvisualizer-euro-link"
+              tabIndex={focusable ? 0 : -1}
             >
               <div
                 className={classNames('dataloadvisualizer-euro-fluid', {
@@ -74,7 +82,7 @@ const DataloadSectionDetail = ({
                   error: isMissing,
                 })}
               >
-                <Icon
+                <StyledIcon
                   className="dataloadvisualizer-euro-fluid-icon"
                   icon={getNavPicto(index, true, true)}
                   size={22}
@@ -99,11 +107,12 @@ const DataloadSectionDetail = ({
       <NavLink
         to={`/consumption/${getFluidName(fluidType)}`}
         className="dataloadvisualizer-euro-link"
+        tabIndex={focusable ? 0 : -1}
       >
         <div
           className={`dataloadvisualizer-euro-fluid ${getFluidName(fluidType)}`}
         >
-          <Icon
+          <StyledIcon
             className="dataloadvisualizer-euro-fluid-icon"
             icon={getNavPicto(fluidType, true, true)}
             size={22}
diff --git a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
index 77e227da2ad89bcde169a42729c620e712c8955a..7cdd9669b3ab4403feb7450489a8196995077192 100644
--- a/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadSectionValue.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@material-ui/core'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { DataloadSectionType, FluidType } from 'enums'
 import { Dataload } from 'models'
 import React from 'react'
@@ -10,6 +10,7 @@ interface DataloadSectionValueProps {
   fluidType: FluidType
   dataloadSectionType: DataloadSectionType
   toggleEstimationModal: () => void
+  focusable?: boolean
 }
 
 const DataloadSectionValue = ({
@@ -17,6 +18,7 @@ const DataloadSectionValue = ({
   fluidType,
   dataloadSectionType,
   toggleEstimationModal,
+  focusable,
 }: DataloadSectionValueProps) => {
   const { t } = useI18n()
   const FLUIDNAME = getFluidName(fluidType).toUpperCase()
@@ -36,6 +38,7 @@ const DataloadSectionValue = ({
             }}
             size="small"
             onClick={toggleEstimationModal}
+            tabIndex={focusable ? 0 : -1}
           >
             {t('consumption_visualizer.estimated')}
           </Button>
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
index a362aa740509e42e6792918e7353cada49f2e520..f3eb6da60b24e005fbff339b7cc2eedac4c7edac 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
@@ -10,7 +10,7 @@ jest.mock('services/fluidsPrices.service', () => {
 })
 
 describe('EstimatedConsumptionModal component', () => {
-  it('should render correctly', async () => {
+  it('should render correctly', () => {
     const { baseElement } = render(
       <EstimatedConsumptionModal open={true} handleCloseClick={jest.fn()} />
     )
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
index a2dfa28b7ca4cf69670b7d9a251cce79fb29e23d..da00e0488fe303448c8c1dfa18ab5f030b16b63f 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.tsx
@@ -1,9 +1,8 @@
-import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import { DateTime } from 'luxon'
 import { FluidPrice } from 'models'
@@ -30,11 +29,11 @@ const EstimatedConsumptionModal = ({
     const fluidsPricesService = new FluidPricesService(client)
     async function getAllLastPrices() {
       const prices = await fluidsPricesService.getAllLastPrices()
-      if (subscribed && prices) {
+      if (prices) {
         setPrices(prices)
       }
     }
-    getAllLastPrices()
+    subscribed && getAllLastPrices()
     return () => {
       subscribed = false
     }
@@ -53,13 +52,12 @@ const EstimatedConsumptionModal = ({
       <div id="accessibility-title">
         {t('consumption_visualizer.modal.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('consumption_visualizer.modal.close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="estimation-modal">
         <div className="text-20-normal modal-title">
           {t('consumption_visualizer.modal.title')}
diff --git a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
index c3a9b1a081b4970ac190095e3b995594a8d4ab08..4b7854661d29b38742a9b9d6b1058a370c7e729c 100644
--- a/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/InfoDataConsumptionVisualizer.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@material-ui/core'
 import { useMoveToLatestDate } from 'components/Hooks/useMoveToDate'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { DataloadState, FluidType } from 'enums'
 import { DateTime } from 'luxon'
 import { Dataload } from 'models'
@@ -12,12 +12,14 @@ interface InfoDataConsumptionVisualizerProps {
   dataload: Dataload
   fluidType: FluidType
   lastDataDate: DateTime | null
+  focusable?: boolean
 }
 
 const InfoDataConsumptionVisualizer = ({
   dataload,
   fluidType,
   lastDataDate,
+  focusable,
 }: InfoDataConsumptionVisualizerProps) => {
   const { t } = useI18n()
   const [openNoDataModal, setOpenNoDataModal] = useState<boolean>(false)
@@ -41,7 +43,11 @@ const InfoDataConsumptionVisualizer = ({
         ? 'last_valid_data_multi'
         : 'last_available_data'
     return (
-      <Button className="btnText" onClick={moveToLatestDate}>
+      <Button
+        className="btnText"
+        onClick={moveToLatestDate}
+        tabIndex={focusable ? 0 : -1}
+      >
         {t(`consumption_visualizer.${key}`, {
           date: lastDate,
         })}
@@ -56,7 +62,11 @@ const InfoDataConsumptionVisualizer = ({
   ) {
     return (
       <>
-        <Button className="btnText" onClick={() => setOpenNoDataModal(true)}>
+        <Button
+          className="btnText"
+          onClick={() => setOpenNoDataModal(true)}
+          tabIndex={focusable ? 0 : -1}
+        >
           <span className="text-16-normal underlined-error">
             {t('consumption_visualizer.why_no_data')}
           </span>
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
index c9ff69e6525aa1d2e4a0dbf18c4f52017af31b9c..87dbacbb311b85ccedc09f0a03b1c62364506cf7 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import NoDataModal from './NoDataModal'
 
 describe('NoDataModal component', () => {
-  it('should render correctly', async () => {
+  it('should render correctly', () => {
     const { baseElement } = render(
       <NoDataModal open={true} handleCloseClick={jest.fn()} />
     )
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
index 8462aa25dbfde8220f91859007fa9c8b8dc50d33..dca4186e26dc393d3fc11b470f43d65802b8e635 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -1,9 +1,10 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import QuestionIcon from 'assets/icons/ico/questionMark.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './noDataModal.scss'
 
@@ -28,16 +29,15 @@ const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
       <div id="accessibility-title">
         {t('consumption_visualizer.modal.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('consumption_visualizer.modal.close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="nodata-modal">
         <div className="question-mark">
-          <Icon icon={QuestionIcon} size={36} />
+          <StyledIcon icon={QuestionIcon} size={36} />
         </div>
 
         <div className="text-20-normal title">
@@ -52,11 +52,7 @@ const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
           <li>{t('consumption_visualizer.dataModal.item3')}</li>
           <li>{t('consumption_visualizer.dataModal.item4')}</li>
         </ul>
-        <Button
-          aria-label={t('ecogesture_info_modal.button_close')}
-          onClick={handleCloseClick}
-          className="btnPrimary"
-        >
+        <Button onClick={handleCloseClick} className="btnPrimary">
           {t('ecogesture_info_modal.button_close')}
         </Button>
       </div>
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index c864e8304fa7049b021cf603cdf0f491e8f1e608..6f79fffa991e5ea667f6ee2a4e58f20c728a0f76 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`EstimatedConsumptionModal component should render correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
index 41ed4044abb04d88c77a57f53f4c00475bdedc57..f17d502b28fb9a5be3e5eec2ef160d0b8c992c7d 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/InfoDataConsumptionVisualizer.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`InfoDataConsumptionVisualizer component should render correctly when da
 <div>
   <button
     class="MuiButtonBase-root MuiButton-root MuiButton-text btnText"
-    tabindex="0"
+    tabindex="-1"
     type="button"
   >
     <span
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index 971b2e6f4b797334794ace1f0a9db07b5491ff43..c3145b9318cb1ab0698ee473c6f1627a8f0f414a 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`NoDataModal component should render correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -67,6 +68,7 @@ exports[`NoDataModal component should render correctly 1`] = `
             class="question-mark"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="36"
               width="36"
@@ -101,7 +103,6 @@ exports[`NoDataModal component should render correctly 1`] = `
             </li>
           </ul>
           <button
-            aria-label="ecogesture_info_modal.button_close"
             class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
             tabindex="0"
             type="button"
diff --git a/src/components/Content/Content.spec.tsx b/src/components/Content/Content.spec.tsx
index 33f8405641d3a810e3aeba704fb74c7eee72e220..a68cc4d18356ad90b46bc4cf745d22a483f84731 100644
--- a/src/components/Content/Content.spec.tsx
+++ b/src/components/Content/Content.spec.tsx
@@ -5,6 +5,7 @@ import {
   createMockEcolyoStore,
   mockChallengeState,
   mockGlobalState,
+  mockModalState,
 } from 'tests/__mocks__/store'
 import Content from './Content'
 
@@ -26,7 +27,7 @@ describe('Content component', () => {
     const store = createMockEcolyoStore({
       global: mockGlobalState,
       challenge: mockChallengeState,
-      modal: { isFeedbacksOpen: true },
+      modal: { ...mockModalState, isFeedbacksOpen: true },
     })
     const { container } = render(
       <Provider store={store}>
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index f30e26160617fbeb18479fcec8327522b93e548a..287f8f48619b85dbcd03a17e39139abe9de3f517 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -1,6 +1,6 @@
 import FeedbackModal from 'components/Feedback/FeedbackModal'
 import { ScreenType } from 'enums'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { changeScreenType } from 'store/global/global.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
 import './content.scss'
@@ -10,6 +10,7 @@ const Content = ({ children }: { children: React.ReactNode }) => {
   const { screenType, headerHeight } = useAppSelector(
     state => state.ecolyo.global
   )
+  const currentScreenType = useRef(screenType)
 
   const cozyBarHeight = 48
   const cozyNavHeight = 56
@@ -21,16 +22,24 @@ const Content = ({ children }: { children: React.ReactNode }) => {
 
   useEffect(() => {
     function handleResize() {
+      let newScreenType: ScreenType
       if (innerWidth <= 768) {
-        dispatch(changeScreenType(ScreenType.MOBILE))
+        newScreenType = ScreenType.MOBILE
       } else if (innerWidth <= 1024) {
-        dispatch(changeScreenType(ScreenType.TABLET))
+        newScreenType = ScreenType.TABLET
       } else {
-        dispatch(changeScreenType(ScreenType.DESKTOP))
+        newScreenType = ScreenType.DESKTOP
+      }
+
+      if (currentScreenType.current !== newScreenType) {
+        currentScreenType.current = newScreenType
+        dispatch(changeScreenType(newScreenType))
       }
     }
+
     handleResize()
     window.addEventListener('resize', handleResize)
+
     return () => {
       window.removeEventListener('resize', handleResize)
     }
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index 189e1d290e39dc2775682d56692158f51c020caf..47bd999706ef7d692c3f7ae69971e7c9fad537eb 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -1,11 +1,10 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import DefaultIcon from 'assets/icons/visu/ecogesture/bullhorn.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { DateTime } from 'luxon'
 import { CustomPopup } from 'models'
 import React, { useEffect, useState } from 'react'
@@ -48,13 +47,12 @@ const CustomPopupModal = ({
       }}
     >
       <div id="accessibility-title">{customPopup.title}</div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="customPopupModal">
         <StyledIcon icon={icon} size={100} role="img" ariaHidden={false} />
 
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index eaf9112489058b5343173335bd0e8254e9578380..8acb6fa60c9f0515e2a047484a4f323125a61f8a 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx
index 9d19aca3820b73cde756941e61b9b8c4535196ce..29f83296380f5c16c5c913ba90c6e36beba16723 100644
--- a/src/components/DateNavigator/DateNavigator.spec.tsx
+++ b/src/components/DateNavigator/DateNavigator.spec.tsx
@@ -5,11 +5,6 @@ import { DateTime } from 'luxon'
 import React from 'react'
 import DateNavigator from './DateNavigator'
 
-jest.mock(
-  'components/DateNavigator/DateNavigatorFormat',
-  () => 'mock-date-navigator-format'
-)
-
 const mockedDate = DateTime.local(2021, 7, 1)
   .setZone('utc', {
     keepLocalTime: true,
@@ -17,7 +12,7 @@ const mockedDate = DateTime.local(2021, 7, 1)
   .startOf('day')
 
 describe('DateNavigator component', () => {
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <DateNavigator
         disableNext={false}
@@ -58,7 +53,7 @@ describe('DateNavigator component', () => {
     expect(mockHandleNextDate).toHaveBeenCalledTimes(1)
   })
 
-  it('should not be able to click nav buttons', async () => {
+  it('should not be able to click nav buttons', () => {
     render(
       <DateNavigator
         disableNext={true}
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index b23c9ae51343a0ac6a33044c08da0fb791ecab24..6a4f2ce5c79d924859ff9be674443d24820ff8c9 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -1,13 +1,12 @@
-import IconButton from '@material-ui/core/IconButton'
 import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
 import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
 import classNames from 'classnames'
-import DateNavigatorFormat from 'components/DateNavigator/DateNavigatorFormat'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import React from 'react'
+import { formatDate } from 'utils/date'
 import './datenavigator.scss'
 
 interface DateNavigatorProps {
@@ -30,34 +29,58 @@ const DateNavigator = ({
   timeStep,
 }: DateNavigatorProps) => {
   const { t } = useI18n()
+  const formattedDate = formatDate(timeStep, navigatorDate)
 
   return (
-    <div className="date-navigator">
-      <IconButton
-        disabled={disablePrev}
+    <div
+      role="group"
+      aria-label={t('consumption.accessibility.navigation_group')}
+      className="date-navigator"
+    >
+      <StyledIconButton
+        icon={LeftArrowIcon}
         onClick={handlePrevDate}
+        disabled={disablePrev}
+        aria-label={t('consumption.accessibility.button_previous_value')}
         className={classNames('date-navigator-button', {
           ['disable']: disablePrev,
         })}
-        aria-label={t('consumption.accessibility.button_previous_value')}
-      >
-        <Icon icon={LeftArrowIcon} size={16} />
-      </IconButton>
-      <DateNavigatorFormat
-        timeStep={timeStep}
-        date={navigatorDate}
-        inline={inlineDateDisplay}
       />
-      <IconButton
-        disabled={disableNext}
+
+      <div className="date-navigator-format">
+        {inlineDateDisplay ? (
+          <>
+            {formattedDate[0] && formattedDate[1] && (
+              <div className="date-navigator-format-date text-16-bold">
+                {formattedDate[0]} {formattedDate[1]}
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            {formattedDate[0] && (
+              <div className="date-navigator-format-date text-16-bold timeRange">
+                {formattedDate[0]}
+              </div>
+            )}
+            {formattedDate[1] && (
+              <div className="date-navigator-format-date text-15-normal">
+                {formattedDate[1]}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      <StyledIconButton
+        icon={RightArrowIcon}
         onClick={handleNextDate}
+        disabled={disableNext}
+        aria-label={t('consumption.accessibility.button_next_value')}
         className={classNames('date-navigator-button', {
           ['disable']: disableNext,
         })}
-        aria-label={t('consumption.accessibility.button_next_value')}
-      >
-        <Icon icon={RightArrowIcon} size={16} />
-      </IconButton>
+      />
     </div>
   )
 }
diff --git a/src/components/DateNavigator/DateNavigatorFormat.tsx b/src/components/DateNavigator/DateNavigatorFormat.tsx
deleted file mode 100644
index d5c835b35eb04908ab9051f8f92d3ece610abba7..0000000000000000000000000000000000000000
--- a/src/components/DateNavigator/DateNavigatorFormat.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { TimeStep } from 'enums'
-import { DateTime } from 'luxon'
-import React from 'react'
-import './datenavigatorformat.scss'
-
-interface DateNavigatorFormatProps {
-  timeStep: TimeStep
-  date: DateTime
-  inline: boolean
-}
-
-const DateNavigatorFormat = ({
-  timeStep,
-  date,
-  inline,
-}: DateNavigatorFormatProps) => {
-  const formatDate = (_timeStep: TimeStep) => {
-    switch (_timeStep) {
-      case TimeStep.YEAR:
-        return [
-          date.toLocaleString({
-            year: 'numeric',
-          }),
-          '',
-        ]
-      case TimeStep.MONTH:
-        return [
-          date.toLocaleString({
-            month: 'long',
-          }),
-          date.toLocaleString({
-            year: 'numeric',
-          }),
-        ]
-      case TimeStep.DAY:
-      case TimeStep.WEEK:
-        return [
-          date.toLocaleString({
-            weekday: 'long',
-            day: '2-digit',
-          }),
-          date.toLocaleString({
-            month: 'long',
-          }),
-        ]
-      case TimeStep.HALF_AN_HOUR:
-        /**
-         * Format date to range:
-         * 9:00 - 9:30
-         * Day 0X Month
-         */
-        return [
-          `${date.toLocaleString({
-            hour: 'numeric',
-            minute: 'numeric',
-          })} -
-         ${date.plus({ minutes: 30 }).toLocaleString({
-           hour: 'numeric',
-           minute: 'numeric',
-         })}`,
-          date.toLocaleString({
-            weekday: 'long',
-            day: '2-digit',
-            month: 'long',
-          }),
-        ]
-      default:
-        return [date.toLocaleString(DateTime.DATETIME_SHORT), '']
-    }
-  }
-  const formatedDate = formatDate(timeStep)
-
-  return (
-    <div className="date-navigator-format">
-      {inline ? (
-        <>
-          {formatedDate[0] && formatedDate[1] && (
-            <div className="date-navigator-format-date text-16-bold">
-              {formatedDate[0]} {formatedDate[1]}
-            </div>
-          )}
-        </>
-      ) : (
-        <>
-          {formatedDate[0] && (
-            <div className="date-navigator-format-date text-16-bold timeRange">
-              {formatedDate[0]}
-            </div>
-          )}
-          {formatedDate[1] && (
-            <div className="date-navigator-format-date text-15-normal">
-              {formatedDate[1]}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  )
-}
-
-export default DateNavigatorFormat
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index aef335f2e5a5c2279374f2c02a5e1c608975850e..f56eb23830f9226fefadb567ea4dbd0e6e8c52ab 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -3,7 +3,9 @@
 exports[`DateNavigator component should be rendered correctly 1`] = `
 <div>
   <div
+    aria-label="consumption.accessibility.navigation_group"
     class="date-navigator"
+    role="group"
   >
     <button
       aria-label="consumption.accessibility.button_previous_value"
@@ -15,6 +17,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
         class="MuiIconButton-label"
       >
         <svg
+          aria-hidden="true"
           class="styles__icon___23x3R"
           height="16"
           width="16"
@@ -28,11 +31,20 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
         class="MuiTouchRipple-root"
       />
     </button>
-    <mock-date-navigator-format
-      date="1625097600000"
-      inline="false"
-      timestep="40"
-    />
+    <div
+      class="date-navigator-format"
+    >
+      <div
+        class="date-navigator-format-date text-16-bold timeRange"
+      >
+        July
+      </div>
+      <div
+        class="date-navigator-format-date text-15-normal"
+      >
+        2021
+      </div>
+    </div>
     <button
       aria-label="consumption.accessibility.button_next_value"
       class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
@@ -43,6 +55,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
         class="MuiIconButton-label"
       >
         <svg
+          aria-hidden="true"
           class="styles__icon___23x3R"
           height="16"
           width="16"
diff --git a/src/components/DateNavigator/datenavigator.scss b/src/components/DateNavigator/datenavigator.scss
index 34451ece836569368a1c60fb1f3485cc438b4b62..4d8b9d5201a5173c4aecb137cd2bcade681e4420 100644
--- a/src/components/DateNavigator/datenavigator.scss
+++ b/src/components/DateNavigator/datenavigator.scss
@@ -14,4 +14,25 @@
       opacity: 0.3;
     }
   }
+
+  .date-navigator-format {
+    display: flex;
+    flex-direction: column;
+    min-width: 7.81rem;
+    text-align: center;
+    @media all and(max-width: $width-small-phone) {
+      min-width: 10.32rem;
+    }
+    align-items: center;
+    align-self: center;
+    .date-navigator-format-date {
+      color: $grey-bright;
+      &::first-letter {
+        text-transform: uppercase;
+      }
+      &.timeRange {
+        white-space: normal;
+      }
+    }
+  }
 }
diff --git a/src/components/DateNavigator/datenavigatorformat.scss b/src/components/DateNavigator/datenavigatorformat.scss
deleted file mode 100644
index b8dddbc5cb60e5be15a7f51609328d6eabe156f3..0000000000000000000000000000000000000000
--- a/src/components/DateNavigator/datenavigatorformat.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.date-navigator-format {
-  display: flex;
-  flex-direction: column;
-  min-width: 7.81rem;
-  text-align: center;
-  @media all and(max-width: $width-small-phone) {
-    min-width: 10.32rem;
-  }
-  align-items: center;
-  align-self: center;
-  .date-navigator-format-date {
-    color: $grey-bright;
-    &::first-letter {
-      text-transform: uppercase;
-    }
-    &.timeRange {
-      white-space: normal;
-    }
-  }
-}
diff --git a/src/components/Duel/DuelChart/DuelBar.tsx b/src/components/Duel/DuelChart/DuelBar.tsx
index d90ebddcefa7d14d1763717c7768601a6f7bb6e9..0adb9717ae2201a8508d037fba6bfd2a6ddc2bff 100644
--- a/src/components/Duel/DuelChart/DuelBar.tsx
+++ b/src/components/Duel/DuelChart/DuelBar.tsx
@@ -35,9 +35,7 @@ const DuelBar = ({
   marginBottom = 50,
 }: BarChartProps) => {
   const { currentDataload } = useAppSelector(state => state.ecolyo.challenge)
-  const dataload: Dataload[] = finishedDataLoad
-    ? finishedDataLoad
-    : currentDataload
+  const dataload = finishedDataLoad ? finishedDataLoad : currentDataload
   const getContentWidth = () => {
     return width - marginLeft - marginRight
   }
@@ -47,15 +45,11 @@ const DuelBar = ({
   }
 
   const getMaxLoad = () => {
-    return dataload ? Math.max(...dataload.map((d: Dataload) => d.value)) : 0
+    return dataload ? Math.max(...dataload.map(d => d.value)) : 0
   }
 
   const xScale: ScaleBand<string> = scaleBand()
-    .domain(
-      dataload.map((d: Dataload) =>
-        d.date.toLocaleString(DateTime.DATETIME_SHORT)
-      )
-    )
+    .domain(dataload.map(d => d.date.toLocaleString(DateTime.DATETIME_SHORT)))
     .range([0, getContentWidth()])
     .padding(0.2)
 
diff --git a/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
index dd86dc0108170aad9557cd376125248668685ba5..4d76611574562487ec05dff5b2d9e1ad527a05f3 100644
--- a/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
@@ -1,8 +1,8 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useEffect, useState } from 'react'
 import { importIconById } from 'utils/utils'
 import './duelEmptyValueModal.scss'
@@ -42,7 +42,7 @@ const DuelEmptyValueModal = ({
         {t('duel_empty_value_modal.accessibility.window_title')}
       </div>
       <div className="modal-empty-value-root">
-        <Icon className="imgResult" icon={emptyIcon} size={208} />
+        <StyledIcon className="imgResult" icon={emptyIcon} size={208} />
         <div className="text-28-normal-uppercase modal-empty-value-title">
           {t('duel_empty_value_modal.title')}
         </div>
diff --git a/src/components/Duel/DuelError/DuelError.tsx b/src/components/Duel/DuelError/DuelError.tsx
index 0580715cbf343fc7a447a99586c0fd0f9116e380..b05418475ef61178c143828796f10e7f3395684e 100644
--- a/src/components/Duel/DuelError/DuelError.tsx
+++ b/src/components/Duel/DuelError/DuelError.tsx
@@ -1,5 +1,5 @@
 import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import './duelError.scss'
diff --git a/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx b/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
index caadee189cd8e0b9668787c3b9b32c6a82407cc5..781ef84c653535a11162acf724ba689268c81caf 100644
--- a/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
+++ b/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
@@ -21,11 +21,10 @@ jest.mock('components/Duel/DuelChart/DuelChart', () => 'mock-duelchart')
 
 describe('DuelOngoing component', () => {
   const store = createMockEcolyoStore()
-  it('should be rendered correctly', async () => {
-    mockIsChallengeDone.mockResolvedValue({
+  it('should be rendered correctly', () => {
+    mockIsChallengeDone.mockReturnValue({
       isDone: false,
       isWin: false,
-      isEmpty: false,
     })
     const { container } = render(
       <Provider store={store}>
@@ -44,7 +43,7 @@ describe('DuelOngoing component', () => {
       state: UserChallengeState.DUEL,
       startDate: DateTime.local().setZone('utc', { keepLocalTime: true }),
     }
-    mockIsChallengeDone.mockResolvedValue({
+    mockIsChallengeDone.mockReturnValue({
       isDone: true,
       isWin: true,
     })
diff --git a/src/components/Duel/DuelOngoing/DuelOngoing.tsx b/src/components/Duel/DuelOngoing/DuelOngoing.tsx
index 8dc0b7cbb6e73d47f36bf00b3188dfe581ed3761..fae8b15bfb96cb2b2d9cc2b0765fb519c058bfee 100644
--- a/src/components/Duel/DuelOngoing/DuelOngoing.tsx
+++ b/src/components/Duel/DuelOngoing/DuelOngoing.tsx
@@ -4,7 +4,7 @@ import CaptionIncomingIcon from 'assets/icons/visu/duel/captionIncoming.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useChartResize } from 'components/Hooks/useChartResize'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import {
   UserChallengeSuccess,
   UserChallengeUpdateFlag,
@@ -39,14 +39,18 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
   const { currentDataload, userChallengeList } = useAppSelector(
     state => state.ecolyo.challenge
   )
-  const [resultModal, setResultModal] = useState<boolean>(false)
-  const [winChallenge, setWinChallenge] = useState<boolean>(false)
+
   const [showLastDuelModal, setShowLastDuelModal] = useState<boolean>(false)
   const [finishedDataLoad, setFinishedDataLoad] = useState<Dataload[]>()
   const chartContainer = useRef<HTMLDivElement>(null)
   const { height, width } = useChartResize(chartContainer, false)
   const challengeService = useMemo(() => new ChallengeService(client), [client])
 
+  const { isDone, isWin } = challengeService.isChallengeDone(
+    userChallenge,
+    currentDataload
+  )
+
   const duel = userChallenge.duel
 
   const isLastDuel =
@@ -60,7 +64,7 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
   const setResult = useCallback(async () => {
     const updatedChallenge = await challengeService.updateUserChallenge(
       userChallenge,
-      winChallenge
+      isWin
         ? UserChallengeUpdateFlag.DUEL_WIN
         : UserChallengeUpdateFlag.DUEL_LOSS
     )
@@ -73,32 +77,7 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
     } else {
       navigate('/challenges')
     }
-  }, [
-    challengeService,
-    userChallenge,
-    winChallenge,
-    dispatch,
-    isLastDuel,
-    navigate,
-  ])
-
-  useEffect(() => {
-    let subscribed = true
-    async function setChallengeResult() {
-      const { isDone, isWin } = await challengeService.isChallengeDone(
-        userChallenge,
-        currentDataload
-      )
-      if (subscribed) {
-        setResultModal(isDone)
-        setWinChallenge(isWin)
-      }
-    }
-    setChallengeResult()
-    return () => {
-      subscribed = false
-    }
-  }, [challengeService, client, currentDataload, userChallenge])
+  }, [challengeService, userChallenge, isWin, dispatch, isLastDuel, navigate])
 
   useEffect(() => {
     let subscribed = true
@@ -106,12 +85,10 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
       if (isFinished) {
         const dataloads =
           await challengeService.getUserChallengeDataload(userChallenge)
-        if (subscribed) {
-          setFinishedDataLoad(dataloads)
-        }
+        setFinishedDataLoad(dataloads)
       }
     }
-    populateData()
+    subscribed && populateData()
     return () => {
       subscribed = false
     }
@@ -178,9 +155,9 @@ const DuelOngoing = ({ userChallenge, isFinished }: DuelOngoingProps) => {
         </div>
       </div>
       <DuelResultModal
-        open={resultModal}
+        open={isDone}
         userChallenge={userChallenge}
-        win={winChallenge}
+        win={isWin}
         handleCloseClick={setResult}
       />
       <LastDuelModal
diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
index 199878a12050aecaccad580936213290144de33a..c73a61c4cc3e5caaa0a790da0dc238a7118ecbd9 100644
--- a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
+++ b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
@@ -15,7 +15,7 @@ describe('DuelResultModal component', () => {
     )
     expect(baseElement).toMatchSnapshot()
   })
-  it('should render a loss modal', async () => {
+  it('should render a loss modal', () => {
     render(
       <DuelResultModal
         open={true}
diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.tsx
index 7b23acb614d1cc6da4d9a060c55dc6fa2c60380b..aee02473b3fa722ce8c1a93040ece54a3ba9a2b4 100644
--- a/src/components/Duel/DuelResultModal/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal/DuelResultModal.tsx
@@ -2,8 +2,8 @@ import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import challengeWon from 'assets/icons/visu/duelResult/challengeWon.svg'
 import defaultIcon from 'assets/icons/visu/duelResult/default.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallenge } from 'models'
 import React, { useEffect, useState } from 'react'
 import { formatNumberValues, importIconById } from 'utils/utils'
@@ -23,8 +23,7 @@ const DuelResultModal = ({
   handleCloseClick,
 }: DuelResultModalProps) => {
   const { t } = useI18n()
-  const [winIcon, setWinIcon] = useState<string>(defaultIcon)
-  const [lossIcon, setLossIcon] = useState<string>(defaultIcon)
+  const [resultIcon, setResultIcon] = useState<string>(defaultIcon)
   const result = formatNumberValues(
     Math.abs(userChallenge.duel.threshold - userChallenge.duel.userConsumption)
   )
@@ -33,13 +32,14 @@ const DuelResultModal = ({
 
   useEffect(() => {
     async function handleEcogestureIcon() {
-      const icon = await importIconById(userChallenge.id + '-1', 'duelResult')
-      setWinIcon(icon || defaultIcon)
-      const icon2 = await importIconById(userChallenge.id + '-0', 'duelResult')
-      setLossIcon(icon2 || defaultIcon)
+      const icon = await importIconById(
+        userChallenge.id + '-' + Number(win),
+        'duelResult'
+      )
+      setResultIcon(icon || defaultIcon)
     }
     handleEcogestureIcon()
-  }, [userChallenge])
+  }, [userChallenge, win])
 
   return (
     <Dialog
@@ -57,13 +57,13 @@ const DuelResultModal = ({
       <div className="duel-result-modal-root">
         <div className="imgResultContainer">
           {win && (
-            <Icon className="challengeWon" icon={challengeWon} size={300} />
+            <StyledIcon
+              className="challengeWon"
+              icon={challengeWon}
+              size={300}
+            />
           )}
-          <Icon
-            className="imgResult"
-            icon={win ? winIcon : lossIcon}
-            size={180}
-          />
+          <StyledIcon className="imgResult" icon={resultIcon} size={180} />
         </div>
         <div className="text-28-normal-uppercase title">
           {t(`duel_result_modal.${statusKey}.title`)}
diff --git a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
index aa23ded2d78cd0d202f78d5202ed92f1a4540c17..a310546601d98a120f2865f4685bde452348b1fc 100644
--- a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
+++ b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
@@ -44,6 +44,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
             class="imgResultContainer"
           >
             <svg
+              aria-hidden="true"
               class="challengeWon styles__icon___23x3R"
               height="300"
               width="300"
@@ -53,6 +54,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
               />
             </svg>
             <svg
+              aria-hidden="true"
               class="imgResult styles__icon___23x3R"
               height="180"
               width="180"
diff --git a/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx b/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
index 60e1521ee5c96dc6b2864c1579b9e3d74da7aa67..ac8509e849ed3878b23ce96f47f6d703ca926ec0 100644
--- a/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
+++ b/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
@@ -9,11 +9,10 @@ import { formatNumberValues } from 'utils/utils'
 import DuelUnlocked from './DuelUnlocked'
 
 const mockUserChallengeUpdateFlag = jest.fn()
-const mockGetUserChallengeDataload = jest.fn()
 jest.mock('services/challenge.service', () => {
   return jest.fn(() => ({
     updateUserChallenge: mockUserChallengeUpdateFlag,
-    getUserChallengeDataload: mockGetUserChallengeDataload,
+    getUserChallengeDataload: jest.fn(),
   }))
 })
 
@@ -42,6 +41,7 @@ describe('DuelUnlocked component', () => {
   })
 
   it('should update userChallenge when launching duel with configured fluid', async () => {
+    mockUserChallengeUpdateFlag.mockResolvedValueOnce(userChallengeData[0])
     const store = createMockEcolyoStore({
       global: {
         ...mockGlobalState,
diff --git a/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
index ad7693384a06ee8fcac0ac25b9e09d76896b5689..c06090bbb02bd9a96dcb8d9e953fba447051249a 100644
--- a/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
@@ -3,7 +3,7 @@ import defaultDuelIcon from 'assets/icons/visu/challenge/CHALLENGE0001.svg'
 import defaultIcon from 'assets/icons/visu/duel/default.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeUpdateFlag } from 'enums'
 import { UserChallenge } from 'models'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -31,6 +31,7 @@ const DuelUnlocked = ({ userChallenge }: { userChallenge: UserChallenge }) => {
       userChallenge,
       UserChallengeUpdateFlag.DUEL_START
     )
+
     const dataloads =
       await challengeService.getUserChallengeDataload(updatedChallenge)
     dispatch(
diff --git a/src/components/Duel/DuelView.tsx b/src/components/Duel/DuelView.tsx
index b4004e0732b552ae5393eaa7b1ab0d8b32630ec3..99b938ed031ba52ce926ba61c32b5be4a97dcb36 100644
--- a/src/components/Duel/DuelView.tsx
+++ b/src/components/Duel/DuelView.tsx
@@ -11,6 +11,9 @@ import DuelError from './DuelError/DuelError'
 import DuelOngoing from './DuelOngoing/DuelOngoing'
 import DuelUnlocked from './DuelUnlocked/DuelUnlocked'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/challenges/duel
+ */
 const DuelView = () => {
   const navigate = useNavigate()
   const { userChallengeList } = useAppSelector(state => state.ecolyo.challenge)
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index 94080d04db0112ac94524c000602b89c7c440d93..f242546792eb2c27d80b64111897dc0196dbf588 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -41,6 +41,7 @@ exports[`lastDuelModal component should render correctly 1`] = `
           class="duel-last-modal-root"
         >
           <button
+            aria-label="last_duel_modal.close"
             class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
             tabindex="0"
             type="button"
@@ -49,6 +50,7 @@ exports[`lastDuelModal component should render correctly 1`] = `
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="16"
                 width="16"
diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
index 2e13dfff83fa585f7aed4b97b0c1bc3cac8b84fd..256e15644fa4283c38f1419f86d14dd45922650e 100644
--- a/src/components/Duel/LastDuelModal/lastDuelModal.tsx
+++ b/src/components/Duel/LastDuelModal/lastDuelModal.tsx
@@ -1,10 +1,9 @@
-import { IconButton } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import star from 'assets/icons/visu/duel/star.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './lastDuelModal.scss'
 
@@ -28,12 +27,12 @@ const LastDuelModal = ({ open, handleCloseClick }: LastDuelModalProps) => {
     >
       <div id="accessibility-title">{t('last_duel_modal.title')}</div>
       <div className="duel-last-modal-root">
-        <IconButton
-          className="modal-paper-close-button"
+        <StyledIconButton
+          icon={CloseIcon}
           onClick={handleCloseClick}
-        >
-          <Icon size={16} icon={CloseIcon} />
-        </IconButton>
+          aria-label={t('last_duel_modal.close')}
+          className="modal-paper-close-button"
+        />
         <StyledIcon className="icon" icon={star} size={48} />
         <h1 className="text-28-bold">{t('last_duel_modal.title')}</h1>
         <div>
diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
index 2ae4fb300120eff93e1a2ed31a8c902fe3146868..b2dfc8f5bfc99d28c72406aa2acce2c92447c18f 100644
--- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.tsx
@@ -24,6 +24,7 @@ const EcogestureCard = ({ ecogesture }: { ecogesture: Ecogesture }) => {
 
   return (
     <StyledEcogestureCard
+      role="listitem"
       onClick={() => navigate(`/ecogesture/${ecogesture.id}`)}
       className="ecogesture-list-item"
     >
diff --git a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
index 3096c7c182a2bb6559e467571b1def474a743d07..3ab49975997b8803b086ad42e0cb921f4536d9a9 100644
--- a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`EcogestureCard component should be rendered correctly 1`] = `
 <div>
   <button
     class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item"
+    role="listitem"
     tabindex="0"
     type="button"
   >
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
index bb80e51c277159a6a86b66b005e075cc0867f08a..20f5c94c90cbe9613cafdb70e5e70a8c4db99aff 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
@@ -32,7 +32,9 @@ describe('EcogestureEmptyList component', () => {
       />
     )
     await act(async () => {
-      await userEvent.click(screen.getByLabelText('ecogesture.emptyList.btn1'))
+      await userEvent.click(
+        screen.getByRole('button', { name: 'ecogesture.emptyList.btn1' })
+      )
     })
     expect(mockChangeTab).toHaveBeenCalledTimes(1)
   })
@@ -46,7 +48,9 @@ describe('EcogestureEmptyList component', () => {
       />
     )
     await act(async () => {
-      await userEvent.click(screen.getByLabelText('ecogesture.emptyList.btn2'))
+      await userEvent.click(
+        screen.getByRole('button', { name: 'ecogesture.emptyList.btn2' })
+      )
     })
     expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-form')
   })
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
index 67fded06ba6c642247edc1f04b8a7696258674c3..2898c3515c4909046845d6fcf14e8b86766a970d 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
@@ -2,7 +2,7 @@ import Button from '@material-ui/core/Button'
 import doingIcon from 'assets/icons/ico/doing-enabled.svg'
 import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import './ecogestureEmptyList.scss'
@@ -38,27 +38,18 @@ const EcogestureEmptyList = ({
           {t(`ecogesture.emptyList.${objOrDoing}2${isDone}`)}
         </div>
         <div className="buttons">
-          <Button
-            aria-label={t('ecogesture.emptyList.btn1')}
-            onClick={() => setTab(2)}
-            className="btnSecondary"
-          >
+          <Button onClick={() => setTab(2)} className="btnSecondary">
             {t('ecogesture.emptyList.btn1')}
           </Button>
 
           {isSelectionDone && (
-            <Button
-              aria-label={t('ecogesture.reset')}
-              onClick={openResetEcogestureModal}
-              className="btnSecondary"
-            >
+            <Button onClick={openResetEcogestureModal} className="btnSecondary">
               {t('ecogesture.reset')}
             </Button>
           )}
 
           {!isSelectionDone && (
             <Button
-              aria-label={t('ecogesture.emptyList.btn2')}
               onClick={() => {
                 navigate('/ecogesture-form')
               }}
diff --git a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
index 3fcc1897fd30e95764ae4a513e3220b41e039d85..e3f1bf13dff495bdea274da2fa76b1bd01728d3c 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
@@ -32,7 +32,6 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
         class="buttons"
       >
         <button
-          aria-label="ecogesture.emptyList.btn1"
           class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
           tabindex="0"
           type="button"
@@ -47,7 +46,6 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture.emptyList.btn2"
           class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
           tabindex="0"
           type="button"
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
index bd3c32ab029aa398f52dfd14ca47ef66466d871e..8c97e6e22465d3046251099ac39e70f912b76a35 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx
@@ -1,14 +1,16 @@
 import { act, render, screen } from '@testing-library/react'
-import { userEvent } from '@testing-library/user-event'
+import userEvent from '@testing-library/user-event'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { Provider } from 'react-redux'
-import * as storeHooks from 'store/hooks'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import '../../../locales/fr.json'
 import EcogestureInitModal from './EcogestureInitModal'
 
-const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
-
 const mockedNavigate = jest.fn()
+const mockOnClose = jest.fn()
+const mockOnAccept = jest.fn()
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useNavigate: () => mockedNavigate,
@@ -16,39 +18,75 @@ jest.mock('react-router-dom', () => ({
 
 describe('EcogestureInitModal component', () => {
   const store = createMockEcolyoStore()
+  const { t } = useI18n()
 
   beforeEach(() => {
     jest.clearAllMocks()
   })
-  it('should be rendered correctly', () => {
+
+  it('should not render the modal when open is false', () => {
+    const { queryByRole } = render(
+      <Provider store={store}>
+        <EcogestureInitModal
+          open={false}
+          onClose={mockOnClose}
+          onAccept={mockOnAccept}
+        />
+      </Provider>
+    )
+    expect(queryByRole('dialog')).toBeNull()
+  })
+
+  it('should render correctly when open is true', () => {
     const { baseElement } = render(
       <Provider store={store}>
-        <EcogestureInitModal />
+        <EcogestureInitModal
+          open={true}
+          onClose={mockOnClose}
+          onAccept={mockOnAccept}
+        />
       </Provider>
     )
     expect(baseElement).toMatchSnapshot()
   })
-  it('should close modal', async () => {
+
+  it('should call onAccept and navigate to /ecogesture-form?modal=false when the accept button is clicked', async () => {
     render(
       <Provider store={store}>
-        <EcogestureInitModal />
+        <EcogestureInitModal
+          open={true}
+          onClose={mockOnClose}
+          onAccept={() => {
+            mockOnAccept()
+            mockedNavigate('/ecogesture-form?modal=false')
+          }}
+        />
       </Provider>
     )
     await act(async () => {
-      await userEvent.click(screen.getByText('ecogesture.initModal.btn1'))
+      await userEvent.click(screen.getByText(t('ecogesture.initModal.btn2')))
     })
-    expect(mockAppDispatch).toHaveBeenCalledTimes(1)
+    expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-form?modal=false')
+    expect(mockOnAccept).toHaveBeenCalled()
   })
-  it('should close modal and launch form', async () => {
+
+  it('should call onClose and navigate to /ecogestures when the close button is clicked', async () => {
     render(
       <Provider store={store}>
-        <EcogestureInitModal />
+        <EcogestureInitModal
+          open={true}
+          onClose={() => {
+            mockOnClose()
+            mockedNavigate('/ecogestures')
+          }}
+          onAccept={mockOnAccept}
+        />
       </Provider>
     )
     await act(async () => {
-      await userEvent.click(screen.getByText('ecogesture.initModal.btn2'))
+      await userEvent.click(screen.getByText(t('ecogesture.initModal.btn1')))
     })
-    expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-form?modal=false')
-    expect(mockAppDispatch).toHaveBeenCalledTimes(1)
+    expect(mockedNavigate).toHaveBeenCalledWith('/ecogestures')
+    expect(mockOnClose).toHaveBeenCalled()
   })
 })
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
index c62517b095dbc4323fcf56e47ac52ca1acdbf5cf..49f747c44ea25a2a2372df805ef0e6edce4cde37 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
@@ -1,36 +1,28 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useAppDispatch, useAppSelector } from 'store/hooks'
-import { updateProfile } from 'store/profile/profile.slice'
 import './ecogestureInitModal.scss'
 
-const EcogestureInitModal = () => {
-  const { t } = useI18n()
-  const navigate = useNavigate()
-  const dispatch = useAppDispatch()
-  const { haveSeenEcogestureModal } = useAppSelector(
-    state => state.ecolyo.profile
-  )
-  const openEcogestureInitModal = !haveSeenEcogestureModal
-
-  const handleLaunchForm = () => {
-    dispatch(updateProfile({ haveSeenEcogestureModal: true }))
-    navigate('/ecogesture-form?modal=false')
-  }
+interface EcogestureInitModalProps {
+  open: boolean
+  onClose: () => void
+  onAccept: () => void
+}
 
-  const handleCloseEcogestureInitModal = () => {
-    dispatch(updateProfile({ haveSeenEcogestureModal: true }))
-  }
+const EcogestureInitModal = ({
+  open,
+  onClose,
+  onAccept,
+}: EcogestureInitModalProps) => {
+  const { t } = useI18n()
 
   return (
     <Dialog
-      open={openEcogestureInitModal}
-      onClose={handleCloseEcogestureInitModal}
+      open={open}
+      onClose={onClose}
       aria-labelledby="accessibility-title"
       classes={{
         root: 'modal-root',
@@ -40,13 +32,12 @@ const EcogestureInitModal = () => {
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={onClose}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseEcogestureInitModal}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="eg-init-modal">
         <div className="title text-20-bold">
           {t('ecogesture.initModal.title')}
@@ -54,18 +45,10 @@ const EcogestureInitModal = () => {
         <div className="text-16-normal">{t('ecogesture.initModal.text1')}</div>
         <div className="text-16-normal">{t('ecogesture.initModal.text2')}</div>
         <div className="buttons-container">
-          <Button
-            aria-label={t('ecogesture.initModal.btn2')}
-            onClick={handleLaunchForm}
-            className="btnPrimary"
-          >
+          <Button onClick={onAccept} className="btnPrimary">
             {t('ecogesture.initModal.btn2')}
           </Button>
-          <Button
-            aria-label={t('ecogesture.initModal.btn1')}
-            onClick={handleCloseEcogestureInitModal}
-            className="btnSecondary"
-          >
+          <Button onClick={onClose} className="btnSecondary">
             {t('ecogesture.initModal.btn1')}
           </Button>
         </div>
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index e0eb858751c570042ded61b7df0222b2ce2fcb68..a9f9d04742decea5edcf5f6d091218e2d87f20ff 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EcogestureInitModal component should be rendered correctly 1`] = `
+exports[`EcogestureInitModal component should render correctly when open is true 1`] = `
 <body
   style="padding-right: 0px; overflow: hidden;"
 >
@@ -47,6 +47,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -82,7 +83,6 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
             class="buttons-container"
           >
             <button
-              aria-label="ecogesture.initModal.btn2"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
               tabindex="0"
               type="button"
@@ -97,7 +97,6 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
               />
             </button>
             <button
-              aria-label="ecogesture.initModal.btn1"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
               tabindex="0"
               type="button"
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
index d512de1a43de39e438432c03f18509d0537eca23..1e7f223c9b4436f8eb7dd1b6c1a7e9979d048c19 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
@@ -29,7 +29,7 @@ describe('EcogesturesList component', () => {
   beforeAll(() => {
     mockAppDispatch.mockClear()
   })
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <BrowserRouter>
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
index f46cc200bf12ef74854a11159f96e73e8fe3f608..07c98e91824e3f984eded45cf1a8d73b6a765218 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
@@ -4,7 +4,7 @@ import CheckIcon from 'assets/icons/ico/check.svg'
 import SortIcon from 'assets/icons/ico/sort.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import EcogestureCard from 'components/Ecogesture/EcogestureCard/EcogestureCard'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { Usage } from 'enums'
 import { Ecogesture } from 'models'
 import React, { useState } from 'react'
@@ -153,7 +153,7 @@ const EcogestureList = ({
         {displaySelection && continueSelection()}
       </div>
 
-      <div className="ecogesture-content">
+      <div role="list" className="ecogesture-content">
         {renderEcogestureContent()}
         {!displaySelection && openResetEcogestureModal && (
           <Button onClick={openResetEcogestureModal} className="btnSecondary">
diff --git a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
index 3a8441cc4fa2d6a2870de568ed168facf4296c51..46e1c2cfb82a05bd3f88feb60eda3cca79fc1388 100644
--- a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
@@ -42,6 +42,7 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
     </div>
     <div
       class="ecogesture-content"
+      role="list"
     >
       <mock-ecogesturecard
         ecogesture="[object Object]"
diff --git a/src/components/Ecogesture/EcogestureList/ecogestureList.scss b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
index 0380ee61055442ed5baa898e1b1dad1e1bb217a8..ae851825811769e6c56536ee22d40ead6887b718 100644
--- a/src/components/Ecogesture/EcogestureList/ecogestureList.scss
+++ b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
@@ -121,6 +121,10 @@ div.filter-menu {
   &.item-active {
     font-weight: 700;
   }
+  &:focus-visible {
+    outline: 2px solid $blue-accessibility;
+    outline-offset: 2px;
+  }
 }
 .filter-menu-icon {
   margin-left: auto;
diff --git a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
index ab7b5595c206e7bb4616f34ab170f7847df91e7c..1fbc1ff79d9b5a2caded8256875cd022f4492294 100644
--- a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
@@ -1,13 +1,12 @@
 import { Collapse } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import useExploration from 'components/Hooks/useExploration'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { Ecogesture } from 'models'
 import React, { useEffect, useState } from 'react'
 import { useAppSelector } from 'store/hooks'
@@ -66,13 +65,12 @@ const EcogestureModal = ({
           ? t('ecogesture_modal.accessibility.window_title_action')
           : t('ecogesture_modal.accessibility.window_title_ecogesture')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('ecogesture_modal.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="em-header text-14-normal-uppercase">
         {isAction
           ? t('ecogesture_modal.title_action')
diff --git a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
index 2ca68993812bf704ba4c9caa6ca2024f649beb1b..7ae9d83388a642af0afa226befd9d44c17467d89 100644
--- a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
+++ b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx
@@ -14,7 +14,7 @@ jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
 jest.mock('components/Content/Content', () => 'mock-content')
 
 describe('EcogestureNotFound component', () => {
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <EcogestureNotFound text="test" returnPage="ecogestures" />
     )
diff --git a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
index c4bf6436168bc290dd586869332eacff4c980af0..21b5aab6c5e80b04456b4d1decfd82c241e7dde2 100644
--- a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
+++ b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
@@ -4,7 +4,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import Content from 'components/Content/Content'
 import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import './ecogestureNotFound.scss'
@@ -29,7 +29,6 @@ const EcogestureNotFound = ({
 
           <div className="text-18-bold head">{text}</div>
           <Button
-            aria-label={t('error_page.back')}
             onClick={() => navigate(`/${returnPage}`)}
             className="btnPrimary"
           >
diff --git a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
index c6390dcbde7545e575c73c7134cb4eac3b4bc6a4..bc2f4b297e7baf3862807c12a31ec31424b98761 100644
--- a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
@@ -28,7 +28,6 @@ exports[`EcogestureNotFound component should be rendered correctly 1`] = `
         test
       </div>
       <button
-        aria-label="error_page.back"
         class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
         tabindex="0"
         type="button"
diff --git a/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.spec.tsx b/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.spec.tsx
index f7140298cd585f51a9e7d82a45099c20d4287217..c19a04ed6a29efe0a5df3c71adfaf7212de62498 100644
--- a/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.spec.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import EcogestureResetModal from './EcogestureResetModal'
 
 describe('EcogestureResetModal component', () => {
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { baseElement } = render(
       <EcogestureResetModal
         open={true}
diff --git a/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx b/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
index afcbde8ffd0460edb97114e56e42aaf89a9d32e2..e579947e91aff6898c6f79ad8705dee790759e33 100644
--- a/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
+++ b/src/components/Ecogesture/EcogestureResetModal/EcogestureResetModal.tsx
@@ -1,9 +1,10 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import warningIcon from 'assets/icons/ico/warn-orange.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './ecogestureResetModal.scss'
 
@@ -32,15 +33,14 @@ const EcogestureResetModal = ({
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={closeEcogestureResetModal}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={closeEcogestureResetModal}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="eg-reset-modal">
-        <Icon icon={warningIcon} size={63} />
+        <StyledIcon icon={warningIcon} size={63} />
         <div className="title text-20-bold">
           {t('ecogesture.resetModal.title_part1')}
           <span className="warn-title">
@@ -62,18 +62,10 @@ const EcogestureResetModal = ({
           {t('ecogesture.resetModal.text2')}
         </div>
         <div className="buttons-container">
-          <Button
-            aria-label={t('ecogesture.resetModal.btn1')}
-            onClick={closeEcogestureResetModal}
-            className="btnSecondary"
-          >
+          <Button onClick={closeEcogestureResetModal} className="btnSecondary">
             {t('ecogesture.resetModal.btn1')}
           </Button>
-          <Button
-            aria-label={t('ecogesture.resetModal.btn2')}
-            onClick={handleConfirmReset}
-            className="btnPrimary"
-          >
+          <Button onClick={handleConfirmReset} className="btnPrimary">
             {t('ecogesture.resetModal.btn2')}
           </Button>
         </div>
diff --git a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
index caa340983c1c203a1cc98b04429ea1c045f13798..c8e3570d53e98a167adff9aed4a22ddd120af42e 100644
--- a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -64,6 +65,7 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
           class="eg-reset-modal"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="63"
             width="63"
@@ -108,7 +110,6 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
             class="buttons-container"
           >
             <button
-              aria-label="ecogesture.resetModal.btn1"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
               tabindex="0"
               type="button"
@@ -123,7 +124,6 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
               />
             </button>
             <button
-              aria-label="ecogesture.resetModal.btn2"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
               tabindex="0"
               type="button"
diff --git a/src/components/Ecogesture/EcogestureTabsView.tsx b/src/components/Ecogesture/EcogestureTabsView.tsx
index d5327b447e067ca95eb3d8eaa1c46a2d0932d912..69e2658d60b8600a2f92c48a51b1b7bf290987b3 100644
--- a/src/components/Ecogesture/EcogestureTabsView.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.tsx
@@ -5,7 +5,7 @@ import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { EcogestureTab } from 'enums'
 import { Ecogesture } from 'models'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
@@ -37,6 +37,11 @@ const TabPanel = ({ children, tab, value }: TabPanelProps) => {
   )
 }
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/ecogestures
+ * http://ecolyo.cozy.tools:8080/#/ecogestures?tab=1
+ * http://ecolyo.cozy.tools:8080/#/ecogestures?tab=2
+ */
 const EcogestureTabsView = () => {
   const { t } = useI18n()
   const client = useClient()
@@ -46,7 +51,6 @@ const EcogestureTabsView = () => {
   const { profile, profileEcogesture, profileType } = useAppSelector(
     state => state.ecolyo
   )
-
   const [tabValue, setTabValue] = useState<EcogestureTab>(
     tab ? parseInt(tab) : EcogestureTab.OBJECTIVE
   )
@@ -147,6 +151,13 @@ const EcogestureTabsView = () => {
     ecogestureService,
   ])
 
+  const handleCloseInitModal = (redirect: boolean) => {
+    dispatch(updateProfile({ haveSeenEcogestureModal: true }))
+    if (redirect) {
+      navigate('/ecogesture-form?modal=false')
+    }
+  }
+
   return (
     <>
       <CozyBar titleKey="common.title_ecogestures" />
@@ -265,8 +276,11 @@ const EcogestureTabsView = () => {
             </TabPanel>
           </>
         )}
-        <EcogestureInitModal />
-
+        <EcogestureInitModal
+          open={!profile.haveSeenEcogestureModal}
+          onClose={() => handleCloseInitModal(false)}
+          onAccept={() => handleCloseInitModal(true)}
+        />
         {openEcResetModal && (
           <EcogestureResetModal
             open={openEcResetModal}
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index 13a60e4be98f167cb1f61d86aaa102607d61a519..9112bc8774e01b5f470f713a5b1e179064aea65c 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -14,8 +14,7 @@ import Header from 'components/Header/Header'
 import useExploration from 'components/Hooks/useExploration'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { Ecogesture } from 'models'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
@@ -26,6 +25,9 @@ import { importIconById } from 'utils/utils'
 import EfficiencyRating from './EfficiencyRating/EfficiencyRating'
 import './singleEcogestureView.scss'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/ecogesture/ECOGESTURE0001
+ */
 const SingleEcogestureView = () => {
   const { t } = useI18n()
   const client = useClient()
@@ -72,25 +74,23 @@ const SingleEcogestureView = () => {
       const data = await ecogestureService.getEcogesturesByIds([
         ecogestureID || '',
       ])
-      if (subscribed) {
-        if (data?.[0]) {
-          setEcogesture(data[0])
-          // Prevent case this key doesn't exist in doctype
-          const icon = await importIconById(data[0].id, 'ecogesture')
-          if (subscribed) {
-            setEcogestureIcon(icon || defaultIcon)
-            if (currentChallenge?.exploration.ecogesture_id === data[0]._id) {
-              setValidExploration(currentChallenge.exploration.id)
-            }
-          }
-        } else {
-          logApp.error(`Could not find ecogesture ${ecogestureID}`)
-          Sentry.captureException(new Error('Could not find ecogesture'))
+
+      if (data?.[0]) {
+        setEcogesture(data[0])
+        // Prevent case this key doesn't exist in doctype
+        const icon = await importIconById(data[0].id, 'ecogesture')
+
+        setEcogestureIcon(icon || defaultIcon)
+        if (currentChallenge?.exploration.ecogesture_id === data[0]._id) {
+          setValidExploration(currentChallenge.exploration.id)
         }
-        setIsLoading(false)
+      } else {
+        logApp.error(`Could not find ecogesture ${ecogestureID}`)
+        Sentry.captureException(new Error('Could not find ecogesture'))
       }
+      setIsLoading(false)
     }
-    getSingleEcogesture()
+    subscribed && getSingleEcogesture()
 
     return () => {
       subscribed = false
@@ -111,94 +111,99 @@ const SingleEcogestureView = () => {
         displayBackArrow={true}
       />
       <Content>
-        {isLoading && (
-          <div className="loaderContainer">
-            <Loader />
-          </div>
-        )}
-        {!isLoading && !ecogesture && (
-          <ErrorPage
-            text={t('error_page.no_ecogesture')}
-            returnPage="ecogestures"
-          />
-        )}
-        {!isLoading && ecogesture && (
-          <div className="single-ecogesture">
-            <div className="icon-container">
-              {ecogestureIcon && (
-                <StyledIcon
-                  className="icon-big"
-                  icon={ecogestureIcon}
-                  size={220}
-                />
-              )}
+        <div className="content-wrapper">
+          {isLoading && (
+            <div className="loaderContainer">
+              <Loader />
             </div>
-            <div className="details">
-              <div className="text-22-bold title">{ecogesture.shortName}</div>
-              <div className="efficiency">
-                <span className="text-14-normal">
-                  {t('ecogesture_modal.efficiency')}
-                </span>
-                <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
+          )}
+          {!isLoading && !ecogesture && (
+            <ErrorPage
+              text={t('error_page.no_ecogesture')}
+              returnPage="ecogestures"
+            />
+          )}
+          {!isLoading && ecogesture && (
+            <div className="single-ecogesture">
+              <div className="icon-container">
+                {ecogestureIcon && (
+                  <StyledIcon
+                    className="icon-big"
+                    icon={ecogestureIcon}
+                    size={220}
+                  />
+                )}
               </div>
-            </div>
-            <div className="styled-container">
-              <div className="long-name text-18-bold">
-                {ecogesture.longName}
+              <div className="details">
+                <div className="text-22-bold title">{ecogesture.shortName}</div>
+                <div className="efficiency">
+                  <span className="text-14-normal">
+                    {t('ecogesture_modal.efficiency')}
+                  </span>
+                  <EfficiencyRating
+                    result={Math.round(ecogesture.efficiency)}
+                  />
+                </div>
               </div>
-              <Button
-                classes={{
-                  root: 'btnText showMore',
-                  label: 'text-15-normal',
-                }}
-                onClick={() => setShowDetails(prev => !prev)}
-              >
-                {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
-              </Button>
-
-              <Collapse in={showDetails}>
-                <div className="longDescription text-16-normal-150">
-                  {ecogesture.longDescription}
+              <div className="styled-container">
+                <div className="long-name text-18-bold">
+                  {ecogesture.longName}
                 </div>
-              </Collapse>
-            </div>
+                <Button
+                  classes={{
+                    root: 'btnText showMore',
+                    label: 'text-15-normal',
+                  }}
+                  onClick={() => setShowDetails(prev => !prev)}
+                >
+                  {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
+                </Button>
 
-            <div className="buttons-selection">
-              <IconButton
-                aria-label={t('ecogesture.objective')}
-                onClick={toggleObjective}
-                classes={{
-                  root: `btnSecondary objective-btn ${isObjective && 'active'}`,
-                  label: 'text-15-normal',
-                }}
-              >
-                <Icon
-                  className="status-icon"
-                  icon={
-                    isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
-                  }
-                  size={40}
-                />
-                <span>{t('ecogesture.objective')}</span>
-              </IconButton>
-              <IconButton
-                aria-label={t('ecogesture.doing')}
-                onClick={toggleDoing}
-                classes={{
-                  root: `btnSecondary doing-btn ${isDoing && 'active'}`,
-                  label: 'text-15-normal',
-                }}
-              >
-                <Icon
-                  className="status-icon"
-                  icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
-                  size={40}
-                />
-                <span>{t('ecogesture.doing')}</span>
-              </IconButton>
+                <Collapse in={showDetails} timeout={300}>
+                  <div className="longDescription text-16-normal-150">
+                    {ecogesture.longDescription}
+                  </div>
+                </Collapse>
+              </div>
+              <div className="buttons-selection">
+                <IconButton
+                  aria-label={t('ecogesture.objective')}
+                  onClick={toggleObjective}
+                  classes={{
+                    root: `btnSecondary objective-btn ${
+                      isObjective && 'active'
+                    }`,
+                    label: 'text-15-normal',
+                  }}
+                >
+                  <StyledIcon
+                    className="status-icon"
+                    icon={
+                      isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
+                    }
+                    size={40}
+                  />
+                  <span>{t('ecogesture.objective')}</span>
+                </IconButton>
+                <IconButton
+                  aria-label={t('ecogesture.doing')}
+                  onClick={toggleDoing}
+                  classes={{
+                    root: `btnSecondary doing-btn ${isDoing && 'active'}`,
+                    label: 'text-15-normal',
+                  }}
+                >
+                  <StyledIcon
+                    className="status-icon"
+                    icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
+                    size={40}
+                  />
+                  <span>{t('ecogesture.doing')}</span>
+                </IconButton>
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </Content>
     </>
   )
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index 7ccd151382e3967c0377207e3fe1b6bf5c066cc7..e1aeb701831ac33e157476bf3a59781392e6d98b 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -126,7 +126,6 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
             class="buttons"
           >
             <button
-              aria-label="ecogesture.emptyList.btn1"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
               tabindex="0"
               type="button"
@@ -138,7 +137,6 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
               </span>
             </button>
             <button
-              aria-label="ecogesture.emptyList.btn2"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
               tabindex="0"
               type="button"
@@ -189,7 +187,6 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
             class="buttons"
           >
             <button
-              aria-label="ecogesture.emptyList.btn1"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
               tabindex="0"
               type="button"
@@ -201,7 +198,6 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
               </span>
             </button>
             <button
-              aria-label="ecogesture.emptyList.btn2"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
               tabindex="0"
               type="button"
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index e035305baaeb0458c5215c6fdfcca0a0defea995..059d02251fb883ddcbd96e53b40abcf77001a063 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -12,130 +12,136 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
   />
   <mock-content>
     <div
-      class="single-ecogesture"
+      class="content-wrapper"
     >
       <div
-        class="icon-container"
-      >
-        <svg
-          aria-hidden="true"
-          class="icon-big styles__icon___23x3R"
-          height="220"
-          width="220"
-        >
-          <use
-            xlink:href="#test-file-stub"
-          />
-        </svg>
-      </div>
-      <div
-        class="details"
+        class="single-ecogesture"
       >
         <div
-          class="text-22-bold title"
+          class="icon-container"
         >
-          Bonhomme de neige
+          <svg
+            aria-hidden="true"
+            class="icon-big styles__icon___23x3R"
+            height="220"
+            width="220"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
         </div>
         <div
-          class="efficiency"
+          class="details"
         >
-          <span
-            class="text-14-normal"
+          <div
+            class="text-22-bold title"
+          >
+            Bonhomme de neige
+          </div>
+          <div
+            class="efficiency"
           >
-            ecogesture_modal.efficiency
-          </span>
-          <mock-efficiencyrating
-            result="4"
-          />
+            <span
+              class="text-14-normal"
+            >
+              ecogesture_modal.efficiency
+            </span>
+            <mock-efficiencyrating
+              result="4"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        class="styled-container"
-      >
         <div
-          class="long-name text-18-bold"
-        >
-          Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
-        </div>
-        <button
-          class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
-          tabindex="0"
-          type="button"
+          class="styled-container"
         >
-          <span
-            class="MuiButton-label text-15-normal"
+          <div
+            class="long-name text-18-bold"
           >
-            ecogesture_modal.show_more
-          </span>
-        </button>
-        <div
-          class="MuiCollapse-root MuiCollapse-hidden"
-          style="min-height: 0px;"
-        >
+            Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
+          </div>
+          <button
+            class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label text-15-normal"
+            >
+              ecogesture_modal.show_more
+            </span>
+          </button>
           <div
-            class="MuiCollapse-wrapper"
+            class="MuiCollapse-root MuiCollapse-hidden"
+            style="min-height: 0px;"
           >
             <div
-              class="MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapper"
             >
               <div
-                class="longDescription text-16-normal-150"
+                class="MuiCollapse-wrapperInner"
               >
-                On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+                <div
+                  class="longDescription text-16-normal-150"
+                >
+                  On se demande parfois si cela vaut le coup de "couper le chauffage" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="buttons-selection"
-      >
-        <button
-          aria-label="ecogesture.objective"
-          class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false"
-          tabindex="0"
-          type="button"
+        <div
+          class="buttons-selection"
         >
-          <span
-            class="MuiIconButton-label text-15-normal"
+          <button
+            aria-label="ecogesture.objective"
+            class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false"
+            tabindex="0"
+            type="button"
           >
-            <svg
-              class="status-icon styles__icon___23x3R"
-              height="40"
-              width="40"
+            <span
+              class="MuiIconButton-label text-15-normal"
             >
-              <use
-                xlink:href="#test-file-stub"
-              />
-            </svg>
-            <span>
-              ecogesture.objective
+              <svg
+                aria-hidden="true"
+                class="status-icon styles__icon___23x3R"
+                height="40"
+                width="40"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+              <span>
+                ecogesture.objective
+              </span>
             </span>
-          </span>
-        </button>
-        <button
-          aria-label="ecogesture.doing"
-          class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label text-15-normal"
+          </button>
+          <button
+            aria-label="ecogesture.doing"
+            class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false"
+            tabindex="0"
+            type="button"
           >
-            <svg
-              class="status-icon styles__icon___23x3R"
-              height="40"
-              width="40"
+            <span
+              class="MuiIconButton-label text-15-normal"
             >
-              <use
-                xlink:href="#test-file-stub"
-              />
-            </svg>
-            <span>
-              ecogesture.doing
+              <svg
+                aria-hidden="true"
+                class="status-icon styles__icon___23x3R"
+                height="40"
+                width="40"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+              <span>
+                ecogesture.doing
+              </span>
             </span>
-          </span>
-        </button>
+          </button>
+        </div>
       </div>
     </div>
   </mock-content>
diff --git a/src/components/Ecogesture/singleEcogestureView.scss b/src/components/Ecogesture/singleEcogestureView.scss
index 6eb19b4f1d16fda689603dc88d9304aed75d10ce..3f8904c15209e0b1c490c757e85e28ed4c637dae 100644
--- a/src/components/Ecogesture/singleEcogestureView.scss
+++ b/src/components/Ecogesture/singleEcogestureView.scss
@@ -1,110 +1,117 @@
 @import 'src/styles/base/color';
 
-.single-ecogesture {
-  color: $grey-bright;
+.content-wrapper {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1rem 1.2rem;
-  .icon-container {
-    margin: auto;
-    max-width: 180px;
-    width: 100%;
+  flex-direction: column;
+  height: 100%;
+  .single-ecogesture {
+    color: $grey-bright;
     display: flex;
-    .icon-big {
-      margin: auto;
-    }
-  }
-  .details {
     flex-direction: column;
-    display: flex;
     align-items: center;
-    gap: 0.5rem;
-    .title {
-      color: $soft-grey;
+    justify-content: center;
+    padding: 1rem 1.2rem;
+    .icon-container {
+      margin: auto;
+      max-width: 180px;
+      width: 100%;
+      display: flex;
+      .icon-big {
+        margin: auto;
+      }
     }
-    .efficiency {
+    .details {
+      flex-direction: column;
       display: flex;
+      align-items: center;
       gap: 0.5rem;
-    }
-  }
-  .styled-container {
-    line-height: 150%;
-    padding: 1rem;
-    margin: 1.5rem 0 1rem;
-    max-width: 500px;
-    display: flex;
-    flex-direction: column;
-    .long-name {
-      text-align: center;
-      color: white;
-    }
-
-    .showMore {
-      margin: auto;
-      text-align: center;
-      text-decoration: underline;
-      margin-top: 1.5rem;
-      span {
-        text-transform: none;
+      .title {
+        color: $soft-grey;
       }
-    }
-    .longDescription {
-      margin: 1em 0.5rem;
-      text-align: left;
-    }
-  }
-  .buttons-selection {
-    width: 100%;
-    display: flex;
-    gap: 0.5rem;
-    justify-content: center;
-    button {
-      &.btnSecondary {
-        height: 45px;
-        max-width: 160px;
-        width: 100%;
-        border-radius: 4px;
+      .efficiency {
+        display: flex;
+        gap: 0.5rem;
       }
     }
-    .objective-btn {
-      span {
-        color: $grey-bright;
+    .styled-container {
+      line-height: 150%;
+      padding: 1rem;
+      margin: 1.5rem 0 1rem;
+      max-width: 500px;
+      display: flex;
+      flex-direction: column;
+      .long-name {
+        text-align: center;
+        color: white;
       }
-      &.active {
-        background: radial-gradient(
-            105.25% 64.58% at 49.68% 70.83%,
-            rgba(12, 44, 91, 0.5) 0%,
-            rgba(255, 255, 255, 0) 100%
-          ),
-          #4470b3;
-        border-color: transparent;
+
+      .showMore {
+        margin: auto;
+        text-align: center;
+        text-decoration: underline;
+        margin-top: 1.5rem;
         span {
-          color: white;
+          text-transform: none;
         }
       }
+      .longDescription {
+        margin: 1em 0.5rem;
+        text-align: left;
+      }
     }
-    .doing-btn {
-      span {
-        color: $grey-bright;
+    .buttons-selection {
+      width: 100%;
+      display: flex;
+      gap: 0.5rem;
+      justify-content: center;
+      button {
+        &.btnSecondary {
+          height: 45px;
+          max-width: 160px;
+          width: 100%;
+          border-radius: 4px;
+        }
       }
-      &.active {
-        background: radial-gradient(
-            105.25% 64.58% at 49.68% 70.83%,
-            rgba(41, 87, 33, 0.5) 0%,
-            rgba(255, 255, 255, 0) 100%
-          ),
-          #21a90b;
-        border-color: transparent;
+      .objective-btn {
         span {
-          color: white;
+          color: $grey-bright;
+        }
+        &.active {
+          background: radial-gradient(
+              105.25% 64.58% at 49.68% 70.83%,
+              rgba(12, 44, 91, 0.5) 0%,
+              rgba(255, 255, 255, 0) 100%
+            ),
+            #4470b3;
+          border-color: transparent;
+          span {
+            color: white;
+          }
         }
       }
-    }
-    .MuiIconButton-label {
-      justify-content: flex-start;
-      color: white;
+      .doing-btn {
+        span {
+          color: $grey-bright;
+        }
+        &.active {
+          background: radial-gradient(
+              105.25% 64.58% at 49.68% 70.83%,
+              rgba(41, 87, 33, 0.5) 0%,
+              rgba(255, 255, 255, 0) 100%
+            ),
+            #21a90b;
+          border-color: transparent;
+          span {
+            color: white;
+          }
+        }
+      }
+      .MuiIconButton-label {
+        justify-content: flex-start;
+        color: white;
+      }
     }
   }
 }
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
index 2ad4b9d739e95b24815f3f3201351459419d3683..5c3111db45fee5fe8e898f9f7b8d4847276226f1 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
@@ -10,7 +10,7 @@ jest.mock('../EquipmentIcon/EquipmentIcon', () => 'mock-equipment-icon')
 
 describe('EcogestureFormEquipment component', () => {
   const store = createMockEcolyoStore()
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <EcogestureFormEquipment
@@ -34,14 +34,13 @@ describe('EcogestureFormEquipment component', () => {
       </Provider>
     )
     await waitFor(() => null, { container })
-    const equipments = screen.getAllByRole('button', {
-      name: 'ecogesture_profile.equipments.accessible_label',
-    })
+    const equipments = screen.getAllByRole('listitem')
+    console.log(equipments.length)
     expect(equipments[0]).not.toBeDisabled()
     expect(equipments.length).toBe(Object.keys(EquipmentType).length)
   })
 
-  it('should click on disabled back button', async () => {
+  it('should click on disabled back button', () => {
     const { container } = render(
       <Provider store={store}>
         <EcogestureFormEquipment
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
index 01a1093e44da5603cbeb41e4b3d401b219801e5a..c494a3d6a6232813d3a0565477a6193cb32eff6a 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.tsx
@@ -1,7 +1,7 @@
 import { IconButton } from '@material-ui/core'
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import 'components/ProfileType/profileTypeForm.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { EcogestureStepForm, EquipmentType } from 'enums'
 import { ProfileEcogesture, ProfileType } from 'models'
 import React, { useCallback, useState } from 'react'
@@ -86,14 +86,21 @@ const EcogestureFormEquipment = ({
               ].toLowerCase()}.hint`
             )}
           </div>
-          <div className="icons-container">
+          <div
+            role="list"
+            aria-label={t('ecogesture_profile.equipments.accessible_label')}
+            className="icons-container"
+          >
             {Object.values(EquipmentType).map(equipment => (
               <IconButton
                 key={equipment}
                 style={{ borderRadius: '5px' }}
                 onClick={() => handleChange(equipment)}
                 className="checkbox-equipment"
-                aria-label={t('ecogesture_profile.equipments.accessible_label')}
+                role="listitem"
+                aria-label={`${t(
+                  `ecogesture_profile.equipments.${equipment.toLocaleLowerCase()}`
+                )}`}
               >
                 <EquipmentIcon
                   equipment={equipment}
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index 69febe91b1c98633b4b08d40e9cecfc9c52df63f..dec8909eb736b2c2810de3dc59dcccb8a9afefe7 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -19,11 +19,14 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
         ecogesture_profile.equipments.hint
       </div>
       <div
+        aria-label="ecogesture_profile.equipments.accessible_label"
         class="icons-container"
+        role="list"
       >
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.air_conditioning"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -41,8 +44,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.computer"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -60,8 +64,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.microwave"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -79,8 +84,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.washing_machine"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -98,8 +104,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.dishwasher"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -117,8 +124,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.cooking_plates"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -136,8 +144,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.dryer"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -155,8 +164,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.refregirator"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -174,8 +184,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.fan"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -193,8 +204,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.curtain"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -212,8 +224,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.internet_box"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -231,8 +244,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.ventilation"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -250,8 +264,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.freezer"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -269,8 +284,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.boiler"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -288,8 +304,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.hydraulic_heating"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
@@ -307,8 +324,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
           />
         </button>
         <button
-          aria-label="ecogesture_profile.equipments.accessible_label"
+          aria-label="ecogesture_profile.equipments.outside"
           class="MuiButtonBase-root MuiIconButton-root checkbox-equipment"
+          role="listitem"
           style="border-radius: 5px;"
           tabindex="0"
           type="button"
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
index ae223e032303b4dcde387af005696795ed5240cd..a60db8c120a72cd988cd862249a154a3137b604d 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
@@ -10,8 +10,8 @@ import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
 
 jest.mock(
-  'components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal',
-  () => 'mock-ecogesturelaunchmodal'
+  'components/Ecogesture/EcogestureInitModal/EcogestureInitModal',
+  () => 'mock-ecogestureinitmodal'
 )
 
 const mockHandleNextStep = jest.fn()
@@ -19,7 +19,7 @@ const mockHandlePreviousStep = jest.fn()
 describe('EcogestureFormSingleChoice component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <EcogestureFormSingleChoice
@@ -76,7 +76,7 @@ describe('EcogestureFormSingleChoice component', () => {
     })
     expect(mockHandlePreviousStep).toHaveBeenCalledTimes(1)
   })
-  it('should keep previous answer', async () => {
+  it('should keep previous answer', () => {
     render(
       <Provider store={store}>
         <EcogestureFormSingleChoice
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
index 5bafacadc17325471e9b481f95332591da58a019..b1db42feb0ea402b60d3b8eb5f319d385464fb32 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import 'components/ProfileType/profileTypeForm.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { EcogestureStepForm } from 'enums'
 import {
   ProfileEcogesture,
@@ -50,10 +50,11 @@ const EcogestureFormSingleChoice = ({
             `ecogesture_form.${EcogestureStepForm[step].toLowerCase()}.question`
           )}
         </div>
-        {answerType.choices.map(value => {
+        {answerType.choices.map((value, index) => {
           if (value === null) return null
           return (
             <label
+              htmlFor={`answer-${index}`}
               key={value.toString()}
               className={classNames({
                 ['radio_short']: answerType.choices.length < 5,
@@ -62,9 +63,9 @@ const EcogestureFormSingleChoice = ({
               })}
             >
               <input
+                id={`answer-${index}`}
                 type="radio"
                 value={value}
-                name={value.toString()}
                 onChange={() => setAnswer(value)}
                 checked={answer === value}
                 className={answer === value ? 'checked-input' : ''}
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index cc1a100279b74d343909aae9111fc9fb8203cc6b..ec3bc7d2a14a67a8cf17ce3f3d48449d466b2b6d 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -15,11 +15,12 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
       </div>
       <label
         class="radio_short answer-checked"
+        for="answer-0"
       >
         <input
           checked=""
           class="checked-input"
-          name="individual"
+          id="answer-0"
           type="radio"
           value="individual"
         />
@@ -27,10 +28,11 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
       </label>
       <label
         class="radio_short"
+        for="answer-1"
       >
         <input
           class=""
-          name="collective"
+          id="answer-1"
           type="radio"
           value="collective"
         />
diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
index d3aac9ddd9e08290b52c0a27f5dc03d1ec67bb5f..82ec1fe642adf423f7ab5b75fac72f5635dbd77e 100644
--- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
@@ -4,15 +4,15 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import * as storeHooks from 'store/hooks'
 import { mockProfileEcogesture } from 'tests/__mocks__/profileEcogesture.mock'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockProfileState } from 'tests/__mocks__/store'
 import EcogestureFormView from './EcogestureFormView'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
 jest.mock('components/Header/Header', () => 'mock-header')
 jest.mock('components/Content/Content', () => 'mock-content')
 jest.mock(
-  'components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal',
-  () => 'mock-ecogesturelaunchmodal'
+  'components/Ecogesture/EcogestureInitModal/EcogestureInitModal',
+  () => 'mock-ecogestureinitmodal'
 )
 
 const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
@@ -31,7 +31,7 @@ describe('EcogestureFormView component', () => {
     jest.clearAllMocks()
   })
 
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <EcogestureFormView />
@@ -39,7 +39,7 @@ describe('EcogestureFormView component', () => {
     )
     expect(container).toMatchSnapshot()
   })
-  it('should render singleChoice', async () => {
+  it('should render singleChoice', () => {
     const { container } = render(
       <Provider store={store}>
         <EcogestureFormView />
@@ -49,9 +49,9 @@ describe('EcogestureFormView component', () => {
       container.getElementsByClassName('ecogesture-form-single').length
     ).toBeTruthy()
   })
-  it('should render profiletype form step because profiletype is completed', async () => {
+  it('should render profiletype form step because profiletype is completed', () => {
     const store = createMockEcolyoStore({
-      profile: { isProfileTypeCompleted: true },
+      profile: { ...mockProfileState, isProfileTypeCompleted: true },
       profileEcogesture: mockProfileEcogesture,
     })
     const { container } = render(
@@ -80,7 +80,7 @@ describe('EcogestureFormView component', () => {
     ).toBeTruthy()
   })
 
-  it('should handle form end', async () => {
+  it('should handle form end', () => {
     mockAppDispatch.mockReturnValue(jest.fn())
     jest
       .spyOn(React, 'useState')
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index 337592ae8141bb394a64e3f577b6c5ee1c384244..8f7a8303c242ae1b3c943bd219367f8f77ad4135 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -11,10 +11,13 @@ import ProfileEcogestureFormService from 'services/profileEcogestureForm.service
 import { useAppDispatch, useAppSelector } from 'store/hooks'
 import { updateProfile } from 'store/profile/profile.slice'
 import { newProfileEcogestureEntry } from 'store/profileEcogesture/profileEcogesture.slice'
+import EcogestureInitModal from '../Ecogesture/EcogestureInitModal/EcogestureInitModal'
 import EcogestureFormEquipment from './EcogestureFormEquipment/EcogestureFormEquipment'
 import EcogestureFormSingleChoice from './EcogestureFormSingleChoice/EcogestureFormSingleChoice'
-import EcogestureLaunchFormModal from './EcogestureLaunchFormModal/EcogestureLaunchFormModal'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/ecogesture-form
+ */
 const EcogestureFormView = () => {
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
@@ -92,6 +95,14 @@ const EcogestureFormView = () => {
     return <ProfileTypeView />
   }
 
+  const handleCloseInitModal = (redirect: boolean) => {
+    setOpenLaunchModal(false)
+    dispatch(updateProfile({ haveSeenEcogestureModal: true }))
+    if (redirect) {
+      navigate('/ecogestures')
+    }
+  }
+
   return (
     <>
       <CozyBar titleKey="common.title_ecogestures" />
@@ -124,9 +135,10 @@ const EcogestureFormView = () => {
           </>
         )}
       </Content>
-      <EcogestureLaunchFormModal
+      <EcogestureInitModal
         open={openLaunchModal}
-        handleCloseClick={() => setOpenLaunchModal(false)}
+        onClose={() => handleCloseInitModal(true)}
+        onAccept={() => handleCloseInitModal(false)}
       />
     </>
   )
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
deleted file mode 100644
index 23c3651722ed024a9587a7de8950a35c3174c697..0000000000000000000000000000000000000000
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { act, render, screen } from '@testing-library/react'
-import { userEvent } from '@testing-library/user-event'
-import React from 'react'
-import EcogestureLaunchFormModal from './EcogestureLaunchFormModal'
-
-const mockHandleClose = jest.fn()
-describe('EcogestureLaunchFormModal component', () => {
-  it('should be rendered correctly', () => {
-    const { baseElement } = render(
-      <EcogestureLaunchFormModal
-        open={true}
-        handleCloseClick={mockHandleClose}
-      />
-    )
-    expect(baseElement).toMatchSnapshot()
-  })
-  it('should close modal', async () => {
-    render(
-      <EcogestureLaunchFormModal
-        open={true}
-        handleCloseClick={mockHandleClose}
-      />
-    )
-    await act(async () => {
-      await userEvent.click(screen.getByText('ecogesture.initModal.btn2'))
-    })
-    expect(mockHandleClose).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
deleted file mode 100644
index d9ddbbe6d223a910b9acf6d08a890948ec4131c2..0000000000000000000000000000000000000000
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Button, IconButton } from '@material-ui/core'
-import Dialog from '@material-ui/core/Dialog'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import React from 'react'
-import './ecogestureLaunchFormModal.scss'
-
-interface EcogestureLaunchFormModalProps {
-  open: boolean
-  handleCloseClick: () => void
-}
-const EcogestureLaunchFormModal = ({
-  open,
-  handleCloseClick,
-}: EcogestureLaunchFormModalProps) => {
-  const { t } = useI18n()
-  return (
-    <Dialog
-      open={open}
-      onClose={handleCloseClick}
-      aria-labelledby="accessibility-title"
-      classes={{
-        root: 'modal-root',
-        paper: 'modal-paper',
-      }}
-    >
-      <div id="accessibility-title">
-        {t('feedback.accessibility.window_title')}
-      </div>
-      <IconButton
-        aria-label={t('feedback.accessibility.button_close')}
-        className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
-      <div className="eg-init-modal">
-        <div className="title text-20-bold">
-          {t('ecogesture.initModal.title')}
-        </div>
-        <div className="text-16-normal">
-          {t('ecogesture.initModal.launchForm')}
-        </div>
-        <Button
-          aria-label={t('ecogesture.initModal.btn2')}
-          onClick={handleCloseClick}
-          className="btnPrimary"
-        >
-          {t('ecogesture.initModal.btn2')}
-        </Button>
-      </div>
-    </Dialog>
-  )
-}
-
-export default EcogestureLaunchFormModal
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
deleted file mode 100644
index 61719c7d1d9696ac0aaa3919968d039320d3cace..0000000000000000000000000000000000000000
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
+++ /dev/null
@@ -1,100 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] = `
-<body
-  style="padding-right: 0px; overflow: hidden;"
->
-  <div
-    aria-hidden="true"
-  />
-  <div
-    class="MuiDialog-root modal-root"
-    role="presentation"
-    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-  >
-    <div
-      aria-hidden="true"
-      class="MuiBackdrop-root"
-      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-    />
-    <div
-      data-test="sentinelStart"
-      tabindex="0"
-    />
-    <div
-      class="MuiDialog-container MuiDialog-scrollPaper"
-      role="none presentation"
-      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-      tabindex="-1"
-    >
-      <div
-        aria-labelledby="accessibility-title"
-        class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-        role="dialog"
-      >
-        <div
-          id="accessibility-title"
-        >
-          feedback.accessibility.window_title
-        </div>
-        <button
-          aria-label="feedback.accessibility.button_close"
-          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="MuiIconButton-label"
-          >
-            <svg
-              class="styles__icon___23x3R"
-              height="16"
-              width="16"
-            >
-              <use
-                xlink:href="#test-file-stub"
-              />
-            </svg>
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
-        <div
-          class="eg-init-modal"
-        >
-          <div
-            class="title text-20-bold"
-          >
-            ecogesture.initModal.title
-          </div>
-          <div
-            class="text-16-normal"
-          >
-            ecogesture.initModal.launchForm
-          </div>
-          <button
-            aria-label="ecogesture.initModal.btn2"
-            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-            tabindex="0"
-            type="button"
-          >
-            <span
-              class="MuiButton-label"
-            >
-              ecogesture.initModal.btn2
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      data-test="sentinelEnd"
-      tabindex="0"
-    />
-  </div>
-</body>
-`;
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss b/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss
deleted file mode 100644
index cbbceeafb01e65e85a602d82ab98b821e1589047..0000000000000000000000000000000000000000
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'src/styles/base/color';
-
-.eg-init-modal {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  .title {
-    text-align: center;
-    color: $gold-shadow;
-  }
-}
diff --git a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
index 56dc1a35b33e229c35992cc3bb8ea8f627265a9e..722454c44b281f8ce36f9de575199d22fe31ff59 100644
--- a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.tsx
@@ -1,6 +1,6 @@
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import 'components/ProfileType/profileTypeForm.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useEffect, useState } from 'react'
 import { importIconById } from 'utils/utils'
 
@@ -16,11 +16,11 @@ const EquipmentIcon = ({ equipment, isChecked }: EquipmentIconProps) => {
     let subscribed = true
     async function getIcon() {
       const svg = await importIconById(equipment, 'equipments')
-      if (subscribed && svg) {
+      if (svg) {
         setIcon(svg)
       }
     }
-    getIcon()
+    subscribed && getIcon()
     return () => {
       subscribed = false
     }
@@ -29,7 +29,7 @@ const EquipmentIcon = ({ equipment, isChecked }: EquipmentIconProps) => {
   return (
     <>
       <div className={`equipment-icon-container ${isChecked ? 'checked' : ''}`}>
-        <Icon icon={icon} size={40} className="equipmentIcon " />
+        <StyledIcon icon={icon} size={40} className="equipmentIcon " />
       </div>
       <div className="text text-14-normal">
         {t(`ecogesture_profile.equipments.${equipment.toLocaleLowerCase()}`)}
diff --git a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
index 342bc0c025ce91c3e8d85b98639d66b4aea0bde0..e38e50f3629f8aaa3a02280600add623fefc133a 100644
--- a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
+++ b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
     class="equipment-icon-container "
   >
     <svg
+      aria-hidden="true"
       class="equipmentIcon  styles__icon___23x3R"
       height="40"
       width="40"
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index 843e5be16fa4073f91f44198153361d2f5bec129..6cdf7d888e238978521d8866bff70a2f6883e4bf 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -22,10 +22,11 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
         </div>
         <label
           class="radio_short"
+          for="answer-0"
         >
           <input
             class=""
-            name="individual"
+            id="answer-0"
             type="radio"
             value="individual"
           />
@@ -33,10 +34,11 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
         </label>
         <label
           class="radio_short"
+          for="answer-1"
         >
           <input
             class=""
-            name="collective"
+            id="answer-1"
             type="radio"
             value="collective"
           />
@@ -75,7 +77,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
       </div>
     </div>
   </mock-content>
-  <mock-ecogesturelaunchmodal
+  <mock-ecogestureinitmodal
     open="true"
   />
 </div>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
index 6d53bb111c2198f3055ae2e954179ac2bae1ab6e..345d29eb709137a771d1e5b8d5054cd8d37f7d15 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
@@ -3,8 +3,9 @@ import doingIcon from 'assets/icons/ico/doing-enabled.svg'
 import objectiveIcon from 'assets/icons/ico/objective-enabled.svg'
 import skipIcon from 'assets/icons/ico/skip-enabled.svg'
 import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
+import classNames from 'classnames'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { Ecogesture } from 'models'
 import React, { useEffect, useState } from 'react'
 import { importIconById } from 'utils/utils'
@@ -29,11 +30,9 @@ const EcogestureSelectionDetail = ({
     let subscribed = true
     async function getIcon() {
       const icon = await importIconById(ecogesture.id, 'ecogesture')
-      if (subscribed) {
-        setEcogestureIcon(icon || defaultIcon)
-      }
+      setEcogestureIcon(icon || defaultIcon)
     }
-    getIcon()
+    subscribed && getIcon()
     setShowDetails(false)
     return () => {
       subscribed = false
@@ -59,15 +58,18 @@ const EcogestureSelectionDetail = ({
           {t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
         </Button>
 
-        <Collapse in={showDetails} exit={false}>
-          <div className="longDescription text-16-normal-150">
+        <Collapse in={showDetails} exit={false} timeout={300}>
+          <div
+            className={classNames('longDescription text-16-normal-150', {
+              expanded: showDetails,
+            })}
+          >
             {ecogesture.longDescription}
           </div>
         </Collapse>
       </div>
       <div className="buttons">
         <Button
-          aria-label={t('ecogesture_selection.button_objective')}
           classes={{
             root: 'btnSecondary',
             label: 'text-14-bold',
@@ -78,7 +80,6 @@ const EcogestureSelectionDetail = ({
           {t('ecogesture_selection.button_objective')}
         </Button>
         <Button
-          aria-label={t('ecogesture_selection.button_doing')}
           classes={{
             root: 'btnSecondary',
             label: 'text-14-bold',
@@ -89,7 +90,6 @@ const EcogestureSelectionDetail = ({
           {t('ecogesture_selection.button_doing')}
         </Button>
         <Button
-          aria-label={t('ecogesture_selection.button_skip')}
           classes={{
             root: 'btnSecondary',
             label: 'text-14-bold',
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index bbd6adbd92d72288c227dec29d4990211f4e943e..8cf01231bcc3e1356f09dfd7252a97ad5d3fe0ab 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
@@ -69,7 +69,6 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
       class="buttons"
     >
       <button
-        aria-label="ecogesture_selection.button_objective"
         class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
         tabindex="0"
         type="button"
@@ -94,7 +93,6 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
         />
       </button>
       <button
-        aria-label="ecogesture_selection.button_doing"
         class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
         tabindex="0"
         type="button"
@@ -119,7 +117,6 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
         />
       </button>
       <button
-        aria-label="ecogesture_selection.button_skip"
         class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text"
         tabindex="0"
         type="button"
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
index 62a291ea844fbf09393241af8d7bb196163a8f39..3f01eb6b2a5d8e56f896fe40db0c594eadaea908 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
@@ -4,20 +4,25 @@
 .eg-selection-detail-container {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   text-align: center;
   color: $grey-bright;
-  padding: 0 1.5rem;
-  flex: 1;
-  max-height: calc(100vh - 60px - 72px - 0px);
+  padding: 0 1rem;
+  height: 100vh;
+  max-height: calc(100vh - 0px - 72px - 72px - 14px);
+  overflow-y: auto;
+
+  @media #{$tablet} {
+    max-height: calc(100vh - 60px - 72px - 72px - 14px);
+  }
+  @media #{$large-phone} {
+    max-height: calc(100vh - 60px - 72px - 0px - 14px);
+  }
 
   .content {
     display: flex;
-    gap: 0.5rem;
     flex-direction: column;
-    flex: 1;
-    justify-content: flex-start;
-    align-items: center;
-    overflow-y: auto;
+    gap: 0.5rem;
 
     .title {
       color: $soft-grey;
@@ -33,20 +38,28 @@
       text-decoration: underline;
       margin-top: 1rem;
       cursor: pointer;
+      flex-shrink: 0;
     }
 
     .longDescription {
       margin: 1rem 0.5rem;
       text-align: left;
+      display: none;
+      transition: height 0.3s ease-in-out;
+      &.expanded {
+        display: block;
+      }
     }
   }
+
   .buttons {
-    margin: 1rem 0;
+    padding: 1rem 0;
     display: flex;
     gap: 0.5rem;
-    flex-direction: row;
     justify-content: center;
     width: 100%;
+    background-color: $default-background;
+
     button.btnSecondary {
       padding: 0.75rem 0.25rem;
       height: 7.375rem;
@@ -56,5 +69,10 @@
         flex-direction: column;
       }
     }
+
+    @media (min-height: $height-small-phone) {
+      position: sticky;
+      bottom: 0;
+    }
   }
 }
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
index 4c34e154dc4436f60394c156f4f71b1d8396fbb6..fb563b48597e377a92c8228325dadcffec9b8a80 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@material-ui/core'
 import icon from 'assets/icons/visu/profileType/finish.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import './ecogestureSelectionEnd.scss'
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
index b33c75ebb9b84f275d896bf0fd5cdaa407a47c08..8f647210a3e6255d94e970dd05f9521de05545a7 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
@@ -1,8 +1,8 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './ecogestureSelectionModal.scss'
 
@@ -30,13 +30,12 @@ const EcogestureSelectionModal = ({
       <div id="accessibility-title">
         {t('ecogesture_selection.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('ecogesture_selection.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="eg-selection-modal">
         <div className="title text-20-bold">
           {t('ecogesture_selection.selectionModal.title')}
@@ -44,11 +43,7 @@ const EcogestureSelectionModal = ({
         <div className="text text-16-normal">
           {t('ecogesture_selection.selectionModal.text')}
         </div>
-        <Button
-          aria-label={t('ecogesture_selection.selectionModal.button_close')}
-          onClick={handleCloseClick}
-          className="btnPrimary"
-        >
+        <Button onClick={handleCloseClick} className="btnPrimary">
           {t('ecogesture_selection.selectionModal.button_close')}
         </Button>
       </div>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
index e51d81a0ecf1718cd6adf3bb6b96b7305fde85aa..d73e5d4fceded904e3ef5f6070dd589f7a199a51 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -74,7 +75,6 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
             ecogesture_selection.selectionModal.text
           </div>
           <button
-            aria-label="ecogesture_selection.selectionModal.button_close"
             class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
             tabindex="0"
             type="button"
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
index 45dbe9188676dce804ff0975923172fa9f159390..dce735deb7beb4037fd971f0ff31148973fa6210 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@material-ui/core'
 import icon from 'assets/icons/visu/ecogesture/ECOGESTURE0001.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import './ecogestureSelectionRestart.scss'
diff --git a/src/components/EcogestureSelection/EcogestureSelectionView.tsx b/src/components/EcogestureSelection/EcogestureSelectionView.tsx
index df6806976153c93b8bfd98da3c1eda7d5ec3b3d4..ed0ac295609916e361235b770bff6a781f8cd334 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionView.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionView.tsx
@@ -3,7 +3,7 @@ import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { Ecogesture } from 'models'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -15,6 +15,9 @@ import EcogestureSelectionModal from './EcogestureSelectionModal/EcogestureSelec
 import EcogestureSelectionRestart from './EcogestureSelectionRestart/EcogestureSelectionRestart'
 import './ecogestureSelectionView.scss'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/ecogesture-selection
+ */
 const EcogestureSelectionView = () => {
   const { t } = useI18n()
   const client = useClient()
@@ -94,22 +97,21 @@ const EcogestureSelectionView = () => {
         ecogesture => ecogesture.viewedInSelection === false
       )
       const slicedFilteredList = filteredList.slice(0, 10)
-      if (subscribed) {
-        if (
-          availableList.length === slicedFilteredList.length &&
-          slicedFilteredList.length > 0
-        ) {
-          setOpenEcSelectionModal(true)
-        }
-        setTotalAvailable(availableList.length)
-        setTotalViewed(availableList.length - filteredList.length)
-        setEcogestureList(slicedFilteredList)
-        setIndexEcogesture(0)
-        setIsLoading(false)
+
+      if (
+        availableList.length === slicedFilteredList.length &&
+        slicedFilteredList.length > 0
+      ) {
+        setOpenEcSelectionModal(true)
       }
+      setTotalAvailable(availableList.length)
+      setTotalViewed(availableList.length - filteredList.length)
+      setEcogestureList(slicedFilteredList)
+      setIndexEcogesture(0)
+      setIsLoading(false)
     }
 
-    getFilteredList()
+    subscribed && getFilteredList()
     return () => {
       subscribed = false
     }
diff --git a/src/components/Exploration/ExplorationError.tsx b/src/components/Exploration/ExplorationError.tsx
index 4c75d0da78d8f1ffc524c2032fa7e6062e9b4607..04fb85ea6354871c9ee2938c2d1296ea42a8fa74 100644
--- a/src/components/Exploration/ExplorationError.tsx
+++ b/src/components/Exploration/ExplorationError.tsx
@@ -1,5 +1,5 @@
 import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import './explorationError.scss'
diff --git a/src/components/Exploration/ExplorationFinished.tsx b/src/components/Exploration/ExplorationFinished.tsx
index 3bcce5d7650c1262d28dfa7a5f41277588c4c2e3..146e99d16bcb52180f77dfe86e788c73c25d5161 100644
--- a/src/components/Exploration/ExplorationFinished.tsx
+++ b/src/components/Exploration/ExplorationFinished.tsx
@@ -2,7 +2,7 @@ import Button from '@material-ui/core/Button'
 import starResult from 'assets/icons/visu/quiz/starResult.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeUpdateFlag, UserExplorationState } from 'enums'
 import { UserChallenge } from 'models'
 import React, { useCallback } from 'react'
diff --git a/src/components/Exploration/ExplorationOngoing.tsx b/src/components/Exploration/ExplorationOngoing.tsx
index 347081ae2935b8ac21e527414341c2829c2d3059..b07b34a2bf577f436b41f9d242110cdcb72cd22d 100644
--- a/src/components/Exploration/ExplorationOngoing.tsx
+++ b/src/components/Exploration/ExplorationOngoing.tsx
@@ -3,7 +3,7 @@ import explorationIcon from 'assets/icons/visu/exploration/shield.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import {
   UserChallengeUpdateFlag,
   UserExplorationState,
@@ -61,7 +61,7 @@ const ExplorationOngoing = ({ userChallenge }: ExplorationOngoingProps) => {
               {t('exploration.button_already_done')}
             </Button>
             <Button
-              aria-label={t('exploration.accessibility.button_already_done')}
+              aria-label={t('exploration.accessibility.button_come_back')}
               onClick={() => navigate(-1)}
               className="btnSecondary"
             >
diff --git a/src/components/Exploration/ExplorationView.tsx b/src/components/Exploration/ExplorationView.tsx
index ccde8fdb71798e3b0d362c581504a822cdfee278..73e74e0c88baf985d9358ce3d122f0d235bd00cc 100644
--- a/src/components/Exploration/ExplorationView.tsx
+++ b/src/components/Exploration/ExplorationView.tsx
@@ -9,6 +9,9 @@ import ExplorationError from './ExplorationError'
 import ExplorationFinished from './ExplorationFinished'
 import ExplorationOngoing from './ExplorationOngoing'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/challenges/exploration
+ */
 const ExplorationView = () => {
   const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
 
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index d4b8e53a77fbdfcd0a68e8f904621914dbaef3c8..2444ef63d92c6c1c0a76635f7474c207172fc39e 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 import FeedbackModal from 'components/Feedback/FeedbackModal'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockModalState } from 'tests/__mocks__/store'
 
 // Value coming from jest.config
 declare let __SAU_LINK__: string
@@ -17,7 +17,9 @@ jest.mock('services/environment.service', () => {
 jest.mock('components/Hooks/useExploration', () => () => ['', jest.fn()])
 
 describe('FeedbackModal component', () => {
-  const store = createMockEcolyoStore({ modal: { isFeedbacksOpen: true } })
+  const store = createMockEcolyoStore({
+    modal: { ...mockModalState, isFeedbacksOpen: true },
+  })
   beforeEach(() => {
     jest.clearAllMocks()
   })
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index c849c35f03e5894b5b33276b2374a18b97b603a9..5f2cf3d0292689daf354d2d7758ffeadcd7de6a7 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -1,13 +1,12 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import ecolyoIcon from 'assets/icons/ico/ecolyo.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import useExploration from 'components/Hooks/useExploration'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserExplorationID } from 'enums'
 import React from 'react'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
@@ -35,7 +34,7 @@ const FeedbackModal = () => {
   return (
     <Dialog
       open={isFeedbacksOpen}
-      onClose={() => closeModal()}
+      onClose={closeModal}
       aria-labelledby="accessibility-title"
       classes={{
         root: 'modal-root',
@@ -45,31 +44,22 @@ const FeedbackModal = () => {
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={closeModal}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={closeModal}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="fb-root">
         <StyledIcon icon={ecolyoIcon} size={80} />
         <p className="title">{t('feedback.title')}</p>
         <p className="text">{t('feedback.text1')}</p>
         <p className="text">{t('feedback.text2')}</p>
         <div className="actions">
-          <Button
-            aria-label={t('feedback.later')}
-            onClick={closeModal}
-            className="btnSecondary"
-          >
+          <Button onClick={closeModal} className="btnSecondary">
             {t('feedback.later')}
           </Button>
-          <Button
-            aria-label={t('feedback.lets_go')}
-            onClick={goToSAU}
-            className="btnPrimary"
-          >
+          <Button onClick={goToSAU} className="btnPrimary">
             {t('feedback.lets_go')}
           </Button>
         </div>
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index 9a26cb883362f15852a5aa683b0a4dab56d83bb9..905bfadd3e8f5df8cac1745a9f6b23aa10b459e3 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`FeedbackModal component should render the component 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -92,7 +93,6 @@ exports[`FeedbackModal component should render the component 1`] = `
             class="actions"
           >
             <button
-              aria-label="feedback.later"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
               tabindex="0"
               type="button"
@@ -107,7 +107,6 @@ exports[`FeedbackModal component should render the component 1`] = `
               />
             </button>
             <button
-              aria-label="feedback.lets_go"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
               tabindex="0"
               type="button"
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index c03ea3ad25e1174fc717a7193223ccb7a4289fc5..1f80029664e3e6c673aa235ed04c58c0fe716fdb 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -5,7 +5,7 @@ import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
 import useExploration from 'components/Hooks/useExploration'
 import { useMoveToLatestDate } from 'components/Hooks/useMoveToDate'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, TimeStep, UserExplorationID } from 'enums'
 import { DateTime } from 'luxon'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -42,7 +42,7 @@ const FluidChart = ({ fluidType }: { fluidType: FluidType }) => {
   const lowercaseTimeStep = TimeStep[currentTimeStep].toLowerCase()
   const lowercaseFluidType = getFluidName(fluidType)
 
-  const handleChangeSwitch = async () => {
+  const handleChangeSwitch = () => {
     dispatch(setShowCompare(!showCompare))
   }
 
diff --git a/src/components/FluidChart/FluidChartSlide.tsx b/src/components/FluidChart/FluidChartSlide.tsx
index 9a66f31ed68559e22efadc6a80a795e3a7ef0fc0..3a20b9dc600c7176077f1e12eaf9c606dd8c8bc3 100644
--- a/src/components/FluidChart/FluidChartSlide.tsx
+++ b/src/components/FluidChart/FluidChartSlide.tsx
@@ -34,6 +34,9 @@ const FluidChartSlide = ({
     global: { fluidStatus, fluidTypes },
   } = useAppSelector(state => state.ecolyo)
 
+  /** Determines if child elements should be focusable */
+  const focusable = currentIndex === index
+
   const [chartData, setChartData] = useState<Datachart>({
     actualData: [],
     comparisonData: null,
@@ -44,7 +47,7 @@ const FluidChartSlide = ({
   useEffect(() => {
     let subscribed = true
     async function loadData() {
-      if (currentTimeStep != timeStep && subscribed) {
+      if (currentTimeStep != timeStep) {
         setIsDataLoaded(false)
         setTimeStep(currentTimeStep)
       }
@@ -71,22 +74,22 @@ const FluidChartSlide = ({
         ])
         const consumptionService = new ConsumptionService(client)
         const isMulti = fluidType === FluidType.MULTIFLUID
-        const fluidTypeArray: FluidType[] = isMulti ? fluidTypes : [fluidType]
-        const graphData = await consumptionService.getGraphData(
+        const fluidTypeArray = isMulti ? fluidTypes : [fluidType]
+        const graphData = await consumptionService.getGraphData({
           timePeriod,
-          currentTimeStep,
-          fluidTypeArray,
+          timeStep: currentTimeStep,
+          fluidTypes: fluidTypeArray,
           fluidStatus,
           compareTimePeriod,
-          isMulti
-        )
-        if (subscribed && graphData && graphData?.actualData.length > 0) {
+          isHome: isMulti,
+        })
+        if (graphData && graphData?.actualData.length > 0) {
           setChartData(graphData)
           setIsDataLoaded(true)
         }
       }
     }
-    loadData()
+    subscribed && loadData()
     return () => {
       subscribed = false
     }
@@ -117,7 +120,7 @@ const FluidChartSlide = ({
         </div>
       ) : (
         <>
-          <ConsumptionVisualizer fluidType={fluidType} />
+          <ConsumptionVisualizer fluidType={fluidType} focusable={focusable} />
           <BarChart
             chartData={chartData}
             fluidType={fluidType}
@@ -126,6 +129,7 @@ const FluidChartSlide = ({
             height={height}
             width={width}
             isSwitching={isSwitching}
+            focusable={focusable}
           />
         </>
       )}
diff --git a/src/components/FluidChart/FluidChartSwipe.tsx b/src/components/FluidChart/FluidChartSwipe.tsx
index 846e0225eaeb34347e08c1439d64d14ccac4bcb0..ecd686e22e8bd8352c6c3235601ded2626ee1a55 100644
--- a/src/components/FluidChart/FluidChartSwipe.tsx
+++ b/src/components/FluidChart/FluidChartSwipe.tsx
@@ -1,7 +1,6 @@
 import FluidChartSlide from 'components/FluidChart/FluidChartSlide'
 import { useChartResize } from 'components/Hooks/useChartResize'
 import { FluidType } from 'enums'
-import { DateTime } from 'luxon'
 import React, { useEffect, useRef, useState } from 'react'
 import SwipeableViews from 'react-swipeable-views'
 import { virtualize } from 'react-swipeable-views-utils'
@@ -36,12 +35,12 @@ const FluidChartSwipe = ({ fluidType }: { fluidType: FluidType }) => {
         currentIndex
       )
     }
-    const updatedDate: DateTime = dateChartService.incrementDate(
+    const updatedDate = dateChartService.incrementDate(
       currentTimeStep,
       selectedDate,
       increment
     )
-    const updatedIndex: number = dateChartService.defineDateIndex(
+    const updatedIndex = dateChartService.defineDateIndex(
       currentTimeStep,
       updatedDate
     )
@@ -84,9 +83,7 @@ const FluidChartSwipe = ({ fluidType }: { fluidType: FluidType }) => {
         slideRenderer={({ key, index }) => slideRenderer(key, index)}
         enableMouseEvents
         onSwitching={!isSwitching ? () => setIsSwitching(true) : null}
-        onTransitionEnd={() => {
-          setIsSwitching(false)
-        }}
+        onTransitionEnd={() => setIsSwitching(false)}
         axis="x-reverse"
       />
     </div>
diff --git a/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx b/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx
index 116c1929971e8942dd38f039343bd255218df7fd..25c1724abac3eff88ae3c0b2f49efd46935314b7 100644
--- a/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx
+++ b/src/components/FluidChart/HalfHourNoDataFailure/HalfHourNoDataFailure.tsx
@@ -1,6 +1,6 @@
 import failureIcon from 'assets/icons/visu/duelResult/CHALLENGE0001-0.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import '../HalfHourUpcoming/HalfHourUpcoming.scss'
 
@@ -9,7 +9,7 @@ const HalfHourNoDataFailure = () => {
 
   return (
     <div className="halfHour">
-      <Icon className="imgResult" icon={failureIcon} size={180} />
+      <StyledIcon className="imgResult" icon={failureIcon} size={180} />
       <h2 className="text-20-bold halfHourFailure">
         {t('timestep.half_an_hour.gather_data_failure')}
       </h2>
diff --git a/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap b/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap
index aeeb024a2da8612aa4ee029c46c778c387c4e867..255aa924dc177a4b338b5bc95a320b7e7882dbf7 100644
--- a/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap
+++ b/src/components/FluidChart/HalfHourNoDataFailure/__snapshots__/HalfHourNoDataFailure.spec.tsx.snap
@@ -6,6 +6,7 @@ exports[`HalfHourNoDataFailure component should render correctly HalfHourNoDataF
     class="halfHour"
   >
     <svg
+      aria-hidden="true"
       class="imgResult styles__icon___23x3R"
       height="180"
       width="180"
diff --git a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.tsx b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.tsx
index e0e8b853ee5a34c3c3ec134670daddba92c05b10..6673b2aefbbe4da14ea2f1f2a70d31c10b4ef21a 100644
--- a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.tsx
+++ b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './HalfHourUpcoming.scss'
 
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
index 91673e4f66235d9212d9dced10cabb021fbb674f..ab25fa0ef054088f668adbf8f7ec414cc5e77381 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -6,7 +6,7 @@ import { DateTime } from 'luxon'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as chartActions from 'store/chart/chart.slice'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
 
 const setCurrentTimeStepSpy = jest.spyOn(chartActions, 'setCurrentTimeStep')
 const setCurrentIndexSpy = jest.spyOn(chartActions, 'setCurrentIndex')
@@ -17,9 +17,10 @@ describe('TimeStepSelector component', () => {
     jest.clearAllMocks()
   })
 
-  it('should render component properly with 4 timesteps', async () => {
+  it('should render component properly with 4 timesteps', () => {
     const store = createMockEcolyoStore({
       chart: {
+        ...mockChartState,
         currentTimeStep: TimeStep.DAY,
         selectedDate: DateTime.local().setZone('utc', {
           keepLocalTime: true,
@@ -38,6 +39,7 @@ describe('TimeStepSelector component', () => {
   it('should render component properly with 5 timesteps', () => {
     const store = createMockEcolyoStore({
       chart: {
+        ...mockChartState,
         currentTimeStep: TimeStep.DAY,
         selectedDate: DateTime.local().setZone('utc', {
           keepLocalTime: true,
@@ -55,6 +57,7 @@ describe('TimeStepSelector component', () => {
   it('should define next TimeStep and dispatch it', async () => {
     const store = createMockEcolyoStore({
       chart: {
+        ...mockChartState,
         currentTimeStep: TimeStep.YEAR,
         selectedDate: DateTime.local().setZone('utc', {
           keepLocalTime: true,
@@ -76,6 +79,7 @@ describe('TimeStepSelector component', () => {
   it('should go to todays day with timestep week', async () => {
     const store = createMockEcolyoStore({
       chart: {
+        ...mockChartState,
         currentTimeStep: TimeStep.YEAR,
         selectedDate: DateTime.local().setZone('utc', {
           keepLocalTime: true,
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
index d05db4af3cd184efe03f575eb577e96ecbe7a532..4508ebfe2e8de9a61319c5e1397c526206f3104d 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@material-ui/core'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import React from 'react'
@@ -41,10 +41,7 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
     dispatch(setCurrentTimeStep(TimeStep.WEEK))
   }
   const handleChangeTimeStep = (targetTimestep: TimeStep) => {
-    const index: number = dateChartService.defineDateIndex(
-      targetTimestep,
-      selectedDate
-    )
+    const index = dateChartService.defineDateIndex(targetTimestep, selectedDate)
     dispatch(setCurrentTimeStep(targetTimestep))
     dispatch(setCurrentIndex(index))
   }
diff --git a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
index e08a8da858902eaeb82b81b194d8580d8c73820e..d41cb3344de86a7ee77a8a2f924ef34bc70ecffb 100644
--- a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
@@ -48,6 +48,10 @@
         left: -14px;
         top: -15px;
       }
+      &:focus-visible {
+        outline: 2px solid $blue-accessibility;
+        outline-offset: 2px;
+      }
     }
     .text {
       position: relative;
diff --git a/src/components/Header/CozyBar.spec.tsx b/src/components/Header/CozyBar.spec.tsx
index 960d681051bc836eac1b1681b6c5615d73a58b05..f8ecdef730022fd348c818dd48754893f69c73cc 100644
--- a/src/components/Header/CozyBar.spec.tsx
+++ b/src/components/Header/CozyBar.spec.tsx
@@ -5,7 +5,7 @@ import { ScreenType } from 'enums'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as ModalAction from 'store/modal/modal.slice'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
 
 interface BarProps {
   children: React.ReactNode
@@ -86,7 +86,7 @@ describe('CozyBar component', () => {
 
   it('should not be rendered with screen type different from mobile', () => {
     const store = createMockEcolyoStore({
-      global: { screenType: ScreenType.DESKTOP },
+      global: { ...mockGlobalState, screenType: ScreenType.DESKTOP },
     })
     const { container } = render(
       <Provider store={store}>
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index d0cccb6005d43438fc1fc1541e68236440318cb5..355d295ff57681cfa466458077e4776f9755a266 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -1,7 +1,7 @@
 import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
 import FeedbackIcon from 'assets/icons/ico/feedback.svg'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ScreenType } from 'enums'
 import React, { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -68,9 +68,8 @@ const CozyBar = ({
         </BarRight>
       </>
     )
-  } else {
-    return null
   }
+  return null
 }
 
 export default CozyBar
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index 0e527784ddfeb7dc0be86ec364b97319f86e6830..5d50f14bff0361e403092469c586778eaa1489b0 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -1,10 +1,11 @@
 import { act, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import Header from 'components/Header/Header'
+import { ScreenType } from 'enums'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as ModalAction from 'store/modal/modal.slice'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
 
 const mockedNavigate = jest.fn()
 jest.mock('react-router-dom', () => ({
@@ -13,10 +14,28 @@ jest.mock('react-router-dom', () => ({
 }))
 
 describe('Header component', () => {
-  const store = createMockEcolyoStore()
-  it('should be rendered correctly', () => {
+  const mobileStore = createMockEcolyoStore()
+  const desktopStore = createMockEcolyoStore({
+    global: { ...mockGlobalState, screenType: ScreenType.DESKTOP },
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should be rendered correctly on mobile', () => {
+    const { container } = render(
+      <Provider store={mobileStore}>
+        <Header desktopTitleKey="mockKey" />
+      </Provider>
+    )
+    expect(container).toMatchSnapshot()
+    expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
+  })
+
+  it('should be rendered correctly on desktop', () => {
     const { container } = render(
-      <Provider store={store}>
+      <Provider store={desktopStore}>
         <Header desktopTitleKey="mockKey" />
       </Provider>
     )
@@ -24,10 +43,29 @@ describe('Header component', () => {
     expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
   })
 
+  it('should display desktop title text when desktopTitleKey provided', () => {
+    const titleKey = 'Test Title'
+    render(
+      <Provider store={desktopStore}>
+        <Header desktopTitleKey={titleKey} />
+      </Provider>
+    )
+    expect(screen.getByText(titleKey)).toBeInTheDocument()
+  })
+
+  it('should not display desktop title text when desktopTitleKey not provided', () => {
+    const { queryByText } = render(
+      <Provider store={desktopStore}>
+        <Header desktopTitleKey="" />
+      </Provider>
+    )
+    expect(queryByText(/.+/)).not.toBeInTheDocument()
+  })
+
   it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
     const key = 'titleKey'
     render(
-      <Provider store={store}>
+      <Provider store={desktopStore}>
         <Header desktopTitleKey={key} displayBackArrow={true} />
       </Provider>
     )
@@ -36,9 +74,10 @@ describe('Header component', () => {
       screen.getByLabelText('header.accessibility.button_back')
     ).toBeInTheDocument()
   })
-  it('should NOT display back button when displayBackArrow is false', async () => {
+
+  it('should NOT display back button when displayBackArrow is false', () => {
     render(
-      <Provider store={store}>
+      <Provider store={mobileStore}>
         <Header desktopTitleKey="test" displayBackArrow={false} />
       </Provider>
     )
@@ -52,7 +91,7 @@ describe('Header component', () => {
   describe('back functions', () => {
     it('should call navigate -1 when back button is clicked with NO back fn', async () => {
       render(
-        <Provider store={store}>
+        <Provider store={desktopStore}>
           <Header desktopTitleKey="KEY" displayBackArrow={true} />
         </Provider>
       )
@@ -63,10 +102,11 @@ describe('Header component', () => {
       })
       expect(mockedNavigate).toHaveBeenCalled()
     })
+
     it('should call custom back fn when back button is clicked', async () => {
       const mockBack = jest.fn()
       render(
-        <Provider store={store}>
+        <Provider store={desktopStore}>
           <Header
             desktopTitleKey="KEY"
             displayBackArrow={true}
@@ -85,7 +125,7 @@ describe('Header component', () => {
 
   it('should call handleClickFeedbacks when feedback button is clicked', async () => {
     render(
-      <Provider store={store}>
+      <Provider store={mobileStore}>
         <Header desktopTitleKey="mockKey" />
       </Provider>
     )
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index b200f36a72621b30f136f0bc0c38706c9eb30129..83585f85c1fe55dff6a262230ca2e8801055e821 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,8 +1,7 @@
-import IconButton from '@material-ui/core/IconButton'
 import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
 import FeedbackIcon from 'assets/icons/ico/feedback.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ScreenType } from 'enums'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -20,7 +19,6 @@ interface HeaderProps {
   backFunction?: () => void
 }
 
-/** Header for desktop view */
 const Header = ({
   desktopTitleKey,
   displayBackArrow,
@@ -31,7 +29,9 @@ const Header = ({
   const navigate = useNavigate()
   const header = useRef<HTMLDivElement>(null)
   const dispatch = useAppDispatch()
-  const { screenType } = useAppSelector(state => state.ecolyo.global)
+  const { screenType, headerHeight } = useAppSelector(
+    state => state.ecolyo.global
+  )
   const cozyBarHeight = 48
 
   const handleClickBack = useCallback(() => {
@@ -47,53 +47,49 @@ const Header = ({
   }
 
   useEffect(() => {
-    const headerHeight = header.current?.clientHeight || 0
+    const refHeight = header.current?.clientHeight || 0
     const adjustment = screenType === ScreenType.MOBILE ? cozyBarHeight : 0
-    dispatch(setHeaderHeight(headerHeight - adjustment))
-  }, [screenType, children, dispatch])
+    const targetHeight = refHeight - adjustment
+    if (targetHeight !== headerHeight) {
+      dispatch(setHeaderHeight(targetHeight))
+    }
+  }, [screenType, children, dispatch, headerHeight])
 
   return (
     <header ref={header}>
       <div className="header-top">
         <div className="header-content">
-          <div
-            className={
-              !desktopTitleKey
-                ? 'header-content-top header-content-top-right'
-                : 'header-content-top'
-            }
-          >
+          <div className="header-content-top">
+            {screenType !== ScreenType.MOBILE && displayBackArrow && (
+              <StyledIconButton
+                icon={BackArrowIcon}
+                onClick={handleClickBack}
+                aria-label={t('header.accessibility.button_back')}
+                className="header-back-button"
+              />
+            )}
             {desktopTitleKey && (
               <div
-                className={`header-text-desktop ${
+                className={`${
+                  displayBackArrow && desktopTitleKey
+                    ? 'header-text-selection'
+                    : 'header-text-desktop'
+                } ${
                   screenType === ScreenType.MOBILE
                     ? 'text-14-normal-uppercase'
                     : 'text-22-bold'
                 }`}
               >
-                {displayBackArrow && (
-                  <IconButton
-                    aria-label={t('header.accessibility.button_back')}
-                    className="header-back-button"
-                    onClick={handleClickBack}
-                  >
-                    <Icon icon={BackArrowIcon} size={16} />
-                  </IconButton>
-                )}
                 <span>{t(desktopTitleKey)}</span>
               </div>
             )}
-            <IconButton
-              aria-label={t('header.accessibility.button_open_feedbacks')}
-              className={
-                !desktopTitleKey
-                  ? 'header-feedbacks-button right'
-                  : 'header-feedbacks-button'
-              }
+            <StyledIconButton
+              icon={FeedbackIcon}
+              sized={40}
               onClick={handleClickFeedbacks}
-            >
-              <Icon icon={FeedbackIcon} size={40} />
-            </IconButton>
+              aria-label={t('header.accessibility.button_open_feedbacks')}
+              className="header-feedbacks-button"
+            />
           </div>
           {children}
         </div>
diff --git a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
index 62521bfb18e6bd75e9438a5e7a5c2d1dce331a96..f793b20f4f782c61c5e36f580d7238526fdbed1c 100644
--- a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`CozyBar component should be rendered correctly without without left arr
   </div>
   <button
     aria-label="header.accessibility.button_open_feedbacks"
-    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+    class="MuiButtonBase-root MuiIconButton-root cv-button"
     tabindex="0"
     type="button"
   >
@@ -42,7 +42,7 @@ exports[`CozyBar component should test displayBackArrow should call backFunction
 <div>
   <button
     aria-label="header.accessibility.button_back"
-    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+    class="MuiButtonBase-root MuiIconButton-root cv-button"
     tabindex="0"
     type="button"
   >
@@ -75,7 +75,7 @@ exports[`CozyBar component should test displayBackArrow should call backFunction
   </div>
   <button
     aria-label="header.accessibility.button_open_feedbacks"
-    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+    class="MuiButtonBase-root MuiIconButton-root cv-button"
     tabindex="0"
     type="button"
   >
@@ -104,7 +104,7 @@ exports[`CozyBar component should test displayBackArrow should call navigate(-1)
 <div>
   <button
     aria-label="header.accessibility.button_back"
-    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+    class="MuiButtonBase-root MuiIconButton-root cv-button"
     tabindex="0"
     type="button"
   >
@@ -137,7 +137,7 @@ exports[`CozyBar component should test displayBackArrow should call navigate(-1)
   </div>
   <button
     aria-label="header.accessibility.button_open_feedbacks"
-    class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+    class="MuiButtonBase-root MuiIconButton-root cv-button"
     tabindex="0"
     type="button"
   >
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
index 3bd7905849ab67ceeb3159018c8bfc69fbecec99..2b060bac40e27596a9dae81d405bc37b8b3cf350 100644
--- a/src/components/Header/__snapshots__/Header.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -1,6 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header component should be rendered correctly 1`] = `
+exports[`Header component should be rendered correctly on desktop 1`] = `
+<div>
+  <header>
+    <div
+      class="header-top"
+    >
+      <div
+        class="header-content"
+      >
+        <div
+          class="header-content-top"
+        >
+          <div
+            class="header-text-desktop text-22-bold"
+          >
+            <span>
+              mockKey
+            </span>
+          </div>
+          <button
+            aria-label="header.accessibility.button_open_feedbacks"
+            class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="styles__icon___23x3R"
+                height="40"
+                width="40"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="header-bar"
+    />
+  </header>
+</div>
+`;
+
+exports[`Header component should be rendered correctly on mobile 1`] = `
 <div>
   <header>
     <div
@@ -29,6 +82,7 @@ exports[`Header component should be rendered correctly 1`] = `
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="40"
                 width="40"
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 2817543e8f42e3858b513f7c97993c650d0304b1..5f794557b9db2b73101de6d789e45c004c7840dc 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -43,27 +43,40 @@ header {
     .header-content-top {
       display: flex;
       flex-direction: row;
-      &.header-content-top-right {
-        justify-content: flex-end;
-      }
+      justify-content: space-between;
+      align-items: center;
       .header-text {
-        padding: 2rem 1rem;
         flex: 1;
+        padding: 0 1rem 1rem 1rem;
+        color: $grey-bright;
+        text-align: center;
       }
       .header-text-desktop {
         display: flex;
         flex: 1;
         padding: 2rem 1.25rem;
         color: $grey-bright;
+        justify-content: center;
+        text-align: center;
+        margin-left: 64px;
+      }
+      .header-text-selection {
+        display: flex;
+        flex: 1;
+        padding: 2rem 1.25rem;
+        color: $grey-bright;
+        justify-content: center;
+        text-align: center;
+        margin-left: 24px;
+        @media #{$large-phone} {
+          display: none;
+        }
       }
-      .header-back-button {
+      .header-back-button,
+      .header-feedbacks-button {
         padding: 0 0.75rem;
       }
       @media #{$large-phone} {
-        .header-text {
-          padding: 0 1rem 1rem 1rem;
-          color: $grey-bright;
-        }
         .header-text-desktop {
           display: none;
         }
diff --git a/src/components/Hooks/useExploration.spec.tsx b/src/components/Hooks/useExploration.spec.tsx
index 7b3184ff05f90ab1c147809c4d2f4970683bd762..f1fe70cfd4628161b9efed68e2546866ee40bf8d 100644
--- a/src/components/Hooks/useExploration.spec.tsx
+++ b/src/components/Hooks/useExploration.spec.tsx
@@ -2,14 +2,20 @@ import { act, renderHook } from '@testing-library/react'
 import { UserExplorationID } from 'enums'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import {
+  createMockEcolyoStore,
+  mockChallengeState,
+} from 'tests/__mocks__/store'
 import { userChallengeExplo1OnGoing } from 'tests/__mocks__/userChallengeData.mock'
 import useExploration from './useExploration'
 
 describe('useExploration Hooks', () => {
   it('should return "EXPLORATION001"', () => {
     const store = createMockEcolyoStore({
-      challenge: { currentChallenge: userChallengeExplo1OnGoing },
+      challenge: {
+        ...mockChallengeState,
+        currentChallenge: userChallengeExplo1OnGoing,
+      },
     })
 
     const wrapper = ({ children }: { children: JSX.Element }) => (
diff --git a/src/components/Hooks/useExploration.tsx b/src/components/Hooks/useExploration.tsx
index 36e9be442f8063e69ed96c2197606b11e3d87ad4..73eef4e582a5c55bfa35ddc126c0ad730fc1b095 100644
--- a/src/components/Hooks/useExploration.tsx
+++ b/src/components/Hooks/useExploration.tsx
@@ -1,6 +1,5 @@
 import { useClient } from 'cozy-client'
 import { UserExplorationState } from 'enums'
-import { UserExploration } from 'models'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import ExplorationService from 'services/exploration.service'
 import { updateUserChallengeList } from 'store/challenge/challenge.slice'
@@ -11,11 +10,9 @@ const useExploration = (): [string, Dispatch<SetStateAction<string>>] => {
   const client = useClient()
   const dispatch = useAppDispatch()
   const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
-  const exploration: UserExploration | null = currentChallenge
-    ? currentChallenge.exploration
-    : null
+  const exploration = currentChallenge ? currentChallenge.exploration : null
 
-  const ecogestureId: string = exploration ? exploration.ecogesture_id : ''
+  const ecogestureId = exploration ? exploration.ecogesture_id : ''
 
   const [explorationID, setExplorationID] = useState<string>('')
 
@@ -26,7 +23,7 @@ const useExploration = (): [string, Dispatch<SetStateAction<string>>] => {
       currentChallenge?.exploration.id === explorationID &&
       currentChallenge?.exploration.state === UserExplorationState.ONGOING
     ) {
-      const checkExplo = async () => {
+      const checkExplo = () => {
         const explorationService = new ExplorationService(client)
         explorationService
           .checkExploration(currentChallenge, explorationID)
diff --git a/src/components/Hooks/useKonnectorAuth.tsx b/src/components/Hooks/useKonnectorAuth.tsx
index 9f1dcd0909c26853a619e1a628dc7d50e22c9a41..6755f9ed4dcffe90ac611bfbe61df92ba11bbe7c 100644
--- a/src/components/Hooks/useKonnectorAuth.tsx
+++ b/src/components/Hooks/useKonnectorAuth.tsx
@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/react'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import {
   AccountEGLData,
diff --git a/src/components/Hooks/usePageTitle.spec.tsx b/src/components/Hooks/usePageTitle.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b184016e3f1ba43e381e57e3b67542c5b18c16c7
--- /dev/null
+++ b/src/components/Hooks/usePageTitle.spec.tsx
@@ -0,0 +1,59 @@
+import { act, render } from '@testing-library/react'
+import React from 'react'
+import { BrowserRouter as Router } from 'react-router-dom'
+import usePageTitle from './usePageTitle'
+
+const TestComponent = () => {
+  usePageTitle()
+  return null
+}
+
+const setLocation = (pathname: string) => {
+  render(
+    <Router>
+      <TestComponent />
+    </Router>
+  )
+  window.history.pushState({}, '', pathname)
+}
+
+describe('usePageTitle hook', () => {
+  beforeEach(() => {
+    document.title = ''
+  })
+
+  const cases = [
+    { pathname: '/consumption', expected: 'Conso | Ecolyo' },
+    {
+      pathname: '/ecogesture-selection',
+      expected: 'Sélection des astuces | Ecolyo',
+    },
+    { pathname: '/ecogesture-form', expected: 'Astuces | Ecolyo' },
+    { pathname: '/ecogestures', expected: 'Astuces | Ecolyo' },
+    { pathname: '/options', expected: 'Options | Ecolyo' },
+    { pathname: '/options/legalnotice', expected: 'Mentions Légales | Ecolyo' },
+    {
+      pathname: '/options/gcu',
+      expected: "Conditions Générales d'Utilisation | Ecolyo",
+    },
+    { pathname: '/analysis', expected: 'Analyse | Ecolyo' },
+    { pathname: '/profileType', expected: 'Ajuster mon profil | Ecolyo' },
+    { pathname: '/challenges', expected: 'Défis | Ecolyo' },
+    { pathname: '/challenges/duel', expected: 'Défis | Ecolyo' },
+    {
+      pathname: '/consumption/electricity',
+      expected: 'Conso électrique | Ecolyo',
+    },
+    { pathname: '/connect/electricity', expected: 'Conso électrique | Ecolyo' },
+    { pathname: '/consumption/water', expected: "Conso d'eau | Ecolyo" },
+    { pathname: '/consumption/gas', expected: 'Conso de gaz | Ecolyo' },
+    { pathname: '/connect/gas', expected: 'Conso de gaz | Ecolyo' },
+  ]
+
+  test.each(cases)('sets the title for $pathname', ({ pathname, expected }) => {
+    act(() => {
+      setLocation(pathname)
+    })
+    expect(document.title).toBe(expected)
+  })
+})
diff --git a/src/components/Hooks/usePageTitle.tsx b/src/components/Hooks/usePageTitle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6fd87d8a6d3dd51e2818035f6ebe48d92f404e57
--- /dev/null
+++ b/src/components/Hooks/usePageTitle.tsx
@@ -0,0 +1,45 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+/**
+ * Update the page title based on the current location
+ */
+const usePageTitle = () => {
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    const baseTitle = 'Ecolyo'
+
+    const titleMap: { [route: string]: string } = {
+      '/electricity': 'Conso électrique',
+      '/water': "Conso d'eau",
+      '/gas': 'Conso de gaz',
+      '/consumption': 'Conso',
+      '/ecogesture-selection': 'Sélection des astuces',
+      '/options/legalnotice': 'Mentions Légales',
+      '/options/gcu': "Conditions Générales d'Utilisation",
+      '/options': 'Options',
+      '/analysis': 'Analyse',
+      '/profileType': 'Ajuster mon profil',
+      '/challenges': 'Défis',
+      '/ecogesture': 'Astuces',
+    }
+
+    let title = ''
+
+    for (const [key, value] of Object.entries(titleMap)) {
+      if (pathname.includes(key)) {
+        title = value
+        break
+      }
+    }
+
+    if (title) {
+      document.title = `${title} | ${baseTitle}`
+    } else {
+      document.title = baseTitle
+    }
+  }, [pathname])
+}
+
+export default usePageTitle
diff --git a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
index 705650d96257952fbe9bdc17083621fc2bd41aed..8325e445f66f993bd800ca3ccf35e2b7d5b13565 100644
--- a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
+++ b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
@@ -1,5 +1,5 @@
 import Button from '@material-ui/core/Button'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './connectionNotFound.scss'
 
diff --git a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
index 232a418355a9ac57925d69043d25d7e8d4358818..9665182bca271f7e9b8075da3cb4ff39b336854a 100644
--- a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
+++ b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
@@ -3,7 +3,7 @@ import warningDark from 'assets/icons/ico/warning-dark.svg'
 import warningWhite from 'assets/icons/ico/warning-white.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, KonnectorUpdate } from 'enums'
 import { DateTime } from 'luxon'
 import { AccountSgeData, FluidConnection, FluidStatus } from 'models'
@@ -44,7 +44,7 @@ const ConnectionResult = ({
   const [status, setStatus] = useState<string>('')
   const [outDatedDataDays, setOutDatedDataDays] = useState<number | null>(null)
 
-  const updateKonnector = async () => {
+  const updateKonnector = () => {
     setStatus('')
     setLastExecutionDate('-')
     setKonnectorError('')
diff --git a/src/components/Konnector/KonnectorModal.spec.tsx b/src/components/Konnector/KonnectorModal.spec.tsx
index bd2f5cacac53519318ffdbdbc6cc4952b35729b3..32d0a9b8bad35cfaba93c98984b7e483e1d38bbc 100644
--- a/src/components/Konnector/KonnectorModal.spec.tsx
+++ b/src/components/Konnector/KonnectorModal.spec.tsx
@@ -69,7 +69,7 @@ describe('KonnectorModal component', () => {
     })
     expect(mockHandleCloseClick).toHaveBeenCalled()
   })
-  it('should render login error', async () => {
+  it('should render login error', () => {
     const { baseElement } = render(
       <Provider store={store}>
         <KonnectorModal
@@ -88,7 +88,7 @@ describe('KonnectorModal component', () => {
       baseElement.getElementsByClassName('headerError')[0]
     ).toBeInTheDocument()
   })
-  it('should render unknown error', async () => {
+  it('should render unknown error', () => {
     render(
       <Provider store={store}>
         <KonnectorModal
@@ -105,7 +105,7 @@ describe('KonnectorModal component', () => {
     )
     expect(screen.getByText('konnector_modal.error_data_2')).toBeInTheDocument()
   })
-  it('should render update error', async () => {
+  it('should render update error', () => {
     const { baseElement } = render(
       <Provider store={store}>
         <KonnectorModal
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index df53e6c64396724c7d187e5ee6500f9280165246..862fe6a1b71a2d30c854763479f96a888f348d10 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -4,6 +4,7 @@ import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
 import errorIcon from 'assets/icons/visu/data-nok.svg'
 import successIcon from 'assets/icons/visu/data-ok.svg'
 import classNames from 'classnames'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import Loader from 'components/Loader/Loader'
 import connectionWaitingText from 'constants/connectionWaitingText.json'
 import firstConnectionWaitingText from 'constants/firstConnectionWaitingText.json'
@@ -11,8 +12,7 @@ import {
   ERROR_EVENT,
   SUCCESS_EVENT,
 } from 'cozy-harvest-lib/dist/models/flowEvents'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, KonnectorError } from 'enums'
 import { shuffle } from 'lodash'
 import { Account } from 'models'
@@ -106,7 +106,7 @@ const KonnectorModal = ({
   /** Returns connection success contents, depending on the fluid and update status */
   const connectionSuccessContent = () => (
     <div className="konnector-config">
-      <Icon icon={successIcon} size={48} />
+      <StyledIcon icon={successIcon} size={48} />
       <div className="headerSuccess text-20-bold">
         {t(`konnector_modal.success_${isUpdating ? 'update_' : ''}txt`)}
       </div>
@@ -189,7 +189,7 @@ const KonnectorModal = ({
                   {error === KonnectorError.LOGIN_FAILED && (
                     // LOGIN FAILED FOR ENEDIS AND EGL
                     <div className="konnector-config">
-                      <Icon icon={errorIcon} size={48} />
+                      <StyledIcon icon={errorIcon} size={48} />
                       <div className="headerError text-20-bold">
                         {t('konnector_modal.error_txt')}
                       </div>
@@ -236,7 +236,7 @@ const KonnectorModal = ({
                     fluidType === FluidType.ELECTRICITY && (
                       // MISMATCH UPDATE ERROR ENEDIS
                       <div className="headerError konnector-config mismatch">
-                        <Icon icon={EnedisIcon} width={120} height={80} />
+                        <StyledIcon icon={EnedisIcon} width={120} height={80} />
                         <div className="title text-20-bold">
                           {t('konnector_modal.mismatch.title')}
                         </div>
@@ -255,7 +255,7 @@ const KonnectorModal = ({
                     KonnectorError.USER_ACTION_NEEDED_ACCOUNT_REMOVED &&
                     fluidType === FluidType.GAS && (
                       <div className="konnector-config">
-                        <Icon icon={errorIcon} size={48} />
+                        <StyledIcon icon={errorIcon} size={48} />
                         <div className="headerError text-20-bold">
                           {t('konnector_modal.error_txt')}
                         </div>
@@ -274,7 +274,7 @@ const KonnectorModal = ({
                       KonnectorError.USER_ACTION_NEEDED_ACCOUNT_REMOVED && (
                       // DEFAULT CASE
                       <div className="konnector-config">
-                        <Icon icon={errorIcon} size={48} />
+                        <StyledIcon icon={errorIcon} size={48} />
                         <div className="headerError text-20-bold">
                           {t('konnector_modal.error_txt')}
                         </div>
diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx
index 30d505fac0627dcde4fa12bfdcaeeb33c04625ab..8bc1b3be0050e4456009648007053d6670a0536d 100644
--- a/src/components/Konnector/KonnectorModalFooter.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.tsx
@@ -1,7 +1,7 @@
 import Button from '@material-ui/core/Button'
 import { useClient } from 'cozy-client'
 import { SUCCESS_EVENT } from 'cozy-harvest-lib/dist/models/flowEvents'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { KonnectorError } from 'enums'
 import { Account } from 'models'
 import React, { useCallback } from 'react'
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index fb011aed8836b721a8e74ece7acdafc14839543a..24b0578d9cf4bb622e2b6949c51147243ae83c76 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -22,8 +22,7 @@ import {
   LOGIN_SUCCESS_EVENT,
   SUCCESS_EVENT,
 } from 'cozy-harvest-lib/dist/models/flowEvents'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import {
   FluidSlugType,
   FluidState,
@@ -140,7 +139,7 @@ const KonnectorViewerCard = ({
         })
       )
       // Check is duel is done and display notification
-      const { isDone } = await challengeService.isChallengeDone(
+      const { isDone } = challengeService.isChallengeDone(
         updatedUserChallenge,
         dataloads
       )
@@ -348,7 +347,7 @@ const KonnectorViewerCard = ({
 
     return (
       <div className="konnector-icon">
-        <Icon
+        <StyledIcon
           icon={currentFluidStatus.connection.account ? iconType : OfflinePicto}
           size={49}
         />
@@ -487,7 +486,7 @@ const KonnectorViewerCard = ({
               `konnector_options.accessibility.button_toggle_detail_${currentFluidName}`
             )}
             expandIcon={
-              <Icon icon={chevronDown} size={16} className="accordion-icon" />
+              <StyledIcon icon={chevronDown} className="accordion-icon" />
             }
             classes={{
               root: 'expansion-panel-summary',
diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx
index d1b3e7928c956e147b4925c503bd2f3710306cce..ec1693348682457abc3d37507be0785984157e98 100644
--- a/src/components/Konnector/KonnectorViewerList.spec.tsx
+++ b/src/components/Konnector/KonnectorViewerList.spec.tsx
@@ -14,7 +14,7 @@ jest.mock('react-router-dom', () => ({
 describe('KonnectorViewerList component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <KonnectorViewerList />
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 152481df0a1011c53ff7b0a76440d155a106fb02..5b5f1ec0cfe855b4e7fcca86cc00a0b8eff1ab09 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -1,6 +1,6 @@
 import StyledCard from 'components/CommonKit/Card/StyledCard'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -20,15 +20,19 @@ const KonnectorViewerList = () => {
 
   return (
     <div className="konnector-section-root">
-      <div className="konnectorsList">
+      <div role="list" className="konnectorsList">
         {fluidStatus.map(fluidStatusItem => (
           <StyledCard
+            role="listitem"
             key={fluidStatusItem.fluidType}
             className="connection-card"
             onClick={() => goToFluid(fluidStatusItem.fluidType)}
             fluidType={fluidStatusItem.fluidType}
           >
-            <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
+            <StyledIcon
+              icon={getAddPicto(fluidStatusItem.fluidType)}
+              size={36}
+            />
             <div
               className={`konnector-title text-18-bold ${getFluidName(
                 fluidStatusItem.fluidType
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index 102a761bc6b23ce140012667112e749b927d0bd5..f8732ace78b8109259f46a185eaaed3394d62730 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -7,9 +7,11 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
   >
     <div
       class="konnectorsList"
+      role="list"
     >
       <button
         class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+        role="listitem"
         tabindex="0"
         type="button"
       >
@@ -17,6 +19,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
           class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="36"
             width="36"
@@ -40,6 +43,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
       </button>
       <button
         class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+        role="listitem"
         tabindex="0"
         type="button"
       >
@@ -47,6 +51,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
           class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="36"
             width="36"
@@ -70,6 +75,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
       </button>
       <button
         class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+        role="listitem"
         tabindex="0"
         type="button"
       >
@@ -77,6 +83,7 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
           class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
         >
           <svg
+            aria-hidden="true"
             class="styles__icon___23x3R"
             height="36"
             width="36"
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
index 2567549f2907564269e56c5070d7eb8b843f4f1f..2b9a41a680d94b53c83d4e60acfbeda66abd24aa 100644
--- a/src/components/Loader/Loader.tsx
+++ b/src/components/Loader/Loader.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
 import './Loader.scss'
diff --git a/src/components/Navbar/Navbar.spec.tsx b/src/components/Navbar/Navbar.spec.tsx
index d4d426391e22f6d6d75e9790458e9434831546e5..c41d4d1fad4ed060aa52baa7adc048a9ebab774e 100644
--- a/src/components/Navbar/Navbar.spec.tsx
+++ b/src/components/Navbar/Navbar.spec.tsx
@@ -3,7 +3,7 @@ import Navbar from 'components/Navbar/Navbar'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
 
 describe('Navbar component', () => {
   it('should be rendered correctly with 5 navlink', () => {
@@ -21,6 +21,7 @@ describe('Navbar component', () => {
   it('should be rendered correctly with notifications', () => {
     const store = createMockEcolyoStore({
       global: {
+        ...mockGlobalState,
         challengeExplorationNotification: true,
         challengeActionNotification: false,
         challengeDuelNotification: false,
@@ -41,6 +42,7 @@ describe('Navbar component', () => {
   it('should be rendered correctly without notifications', () => {
     const store = createMockEcolyoStore({
       global: {
+        ...mockGlobalState,
         challengeExplorationNotification: false,
         challengeActionNotification: false,
         challengeDuelNotification: false,
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index c343f110be6bf27f3ee8438118aca383f01ece31..ec88250afa73c81b6f9c0e6ccc543031e8e9a8c0 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -11,7 +11,7 @@ import ParameterIconOff from 'assets/icons/tabbar/parametre/parametre-off.svg'
 import ParameterIconOn from 'assets/icons/tabbar/parametre/parametre-on.svg'
 import logos from 'assets/png/logos_partenaires.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import { useAppSelector } from 'store/hooks'
diff --git a/src/components/Navbar/navBar.scss b/src/components/Navbar/navBar.scss
index c65e38f0b3b078de768942f2148aa9ff90a78013..e5343a7902d1f20a21d2c8379a836067ca183180 100644
--- a/src/components/Navbar/navBar.scss
+++ b/src/components/Navbar/navBar.scss
@@ -5,7 +5,9 @@
 .o-sidebar {
   width: 15%;
   background-color: $bottom-bar-grey;
-  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12),
+  box-shadow:
+    0px 5px 5px rgba(0, 0, 0, 0.2),
+    0px 3px 14px rgba(0, 0, 0, 0.12),
     0px 8px 10px rgba(0, 0, 0, 0.14);
   border-top: unset;
   border-right: unset;
@@ -53,7 +55,9 @@
 }
 
 .c-nav-item {
+  color: $white-light;
   &:hover {
+    background: rgba(0, 0, 0, 0.1);
     a,
     svg {
       color: $white !important;
@@ -72,7 +76,8 @@
     .c-nav-icon {
       width: 60px;
       height: 36px;
-      fill: none;
+      fill: $soft-grey;
+      color: $soft-grey;
     }
     .on {
       display: none;
@@ -90,7 +95,9 @@
         color: $gold !important;
       }
       &:focus-visible {
-        box-shadow: inset 0 0 0 1px $grey-bright, inset 0.25rem 0 0 0 $gold;
+        box-shadow:
+          inset 0 0 0 1px $grey-bright,
+          inset 0.25rem 0 0 0 $gold;
       }
       .on {
         display: block;
@@ -107,6 +114,11 @@
     height: 56px;
   }
 
+  .c-nav {
+    margin-top: 4px;
+    margin-bottom: 0;
+  }
+
   .c-nav-item {
     height: 54px;
     margin: -0.3rem 0 0 0;
diff --git a/src/components/Options/Accessibility/Accessibility.tsx b/src/components/Options/Accessibility/Accessibility.tsx
deleted file mode 100644
index 383cef8c7284986b2bfd8c61c37da2c0ee69257e..0000000000000000000000000000000000000000
--- a/src/components/Options/Accessibility/Accessibility.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Link from '@material-ui/core/Link'
-import AccessibilityIcon from 'assets/icons/ico/accessibility.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import '../GCU/gcuLink.scss'
-
-const Accessibility = () => {
-  const { t } = useI18n()
-  return (
-    <div className="gcu-link-root">
-      <div className="gcu-link-content">
-        <Link
-          className="gcu-link-card-link"
-          href="https://ecolyo.com/accessibilite.html"
-          target="_blank"
-        >
-          <div className="card">
-            <div className="gcu-link-card">
-              <div className="gcu-link-card-content">
-                <StyledIcon
-                  className="gcu-link-card-content-icon"
-                  icon={AccessibilityIcon}
-                  size={42}
-                />
-                <div className="gcu-link-card-content-title">
-                  {t('common.title_accessibility')}
-                </div>
-              </div>
-            </div>
-          </div>
-        </Link>
-      </div>
-    </div>
-  )
-}
-
-export default Accessibility
diff --git a/src/components/Options/AccessibilityLink/AccessibilityLink.tsx b/src/components/Options/AccessibilityLink/AccessibilityLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa81fc3926c016f34c5b6ea7f80603fa8110a848
--- /dev/null
+++ b/src/components/Options/AccessibilityLink/AccessibilityLink.tsx
@@ -0,0 +1,27 @@
+import AccessibilityIcon from 'assets/icons/ico/accessibility.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import React from 'react'
+import '../OptionsView.scss'
+
+const AccessibilityLink = () => {
+  const { t } = useI18n()
+
+  const goToAccessibility = () => {
+    window.open('https://ecolyo.com/accessibilite.html')
+  }
+
+  return (
+    <div className="styled-card-root">
+      <div className="styled-card-content">
+        <StyledCard onClick={goToAccessibility}>
+          <StyledIcon icon={AccessibilityIcon} size={38} />
+          {t('common.title_accessibility')}
+        </StyledCard>
+      </div>
+    </div>
+  )
+}
+
+export default AccessibilityLink
diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx
index 94365745aab31c7f23204de092724fca3367fb8a..fb33e386b6c39ccc12a2476a2d976a2bbd5785c8 100644
--- a/src/components/Options/ExportData/ExportData.tsx
+++ b/src/components/Options/ExportData/ExportData.tsx
@@ -6,9 +6,9 @@ import {
 } from '@material-ui/core'
 import chevronDown from 'assets/icons/ico/chevron-down.svg'
 import exportIcon from 'assets/icons/ico/export.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType, TimeStep } from 'enums'
 import { remove } from 'lodash'
 import React, { useEffect, useMemo, useState } from 'react'
@@ -56,9 +56,8 @@ const ExportData = () => {
       subscribed = false
     }
 
-    if (subscribed) {
-      getExportableFluids()
-    }
+    subscribed && getExportableFluids()
+
     return () => {
       subscribed = false
     }
@@ -66,12 +65,12 @@ const ExportData = () => {
 
   const fluidCheckbox = () =>
     exportableFluids.map(fluidType => (
-      <label key={fluidType}>
+      <label htmlFor={`export-${fluidType}`} key={fluidType}>
         <input
+          id={`export-${fluidType}`}
           type="checkbox"
           className="inputCheckbox"
           value={fluidType}
-          name={t(`FLUID.${FluidType[fluidType]}.LABEL`)}
           onChange={() => handleChange(fluidType)}
           checked={answer.includes(fluidType)}
         />
@@ -100,14 +99,14 @@ const ExportData = () => {
             <AccordionSummary
               aria-label={t('profile_type.accessibility.button_toggle_export')}
               expandIcon={
-                <Icon icon={chevronDown} size={16} className="accordion-icon" />
+                <StyledIcon icon={chevronDown} className="accordion-icon" />
               }
               classes={{
                 root: 'expansion-panel-summary',
                 content: 'expansion-panel-content',
               }}
             >
-              <Icon className="export-icon" icon={exportIcon} size={42} />
+              <StyledIcon className="export-icon" icon={exportIcon} size={42} />
               <div className="text-16-normal accordion-title">
                 {t('export.title_export')}
               </div>
@@ -126,7 +125,9 @@ const ExportData = () => {
                 <>
                   {fluidCheckbox()}
                   <Button
-                    aria-label={t('unsubscribe.button_accessibility')}
+                    aria-label={t(
+                      'profile_type.accessibility.button_export_data'
+                    )}
                     onClick={() => setShowExportModal('start')}
                     className="btnSecondary"
                     disabled={answer.length === 0}
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
index 565c7d0f4a4835d135788e7179a1b10afe7fb157..a057c53700ae6c9688e271366dff865bc41a1c19 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -50,6 +50,7 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="18"
                 width="18"
@@ -70,6 +71,7 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
               class="icon-main"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="44"
                 width="44"
@@ -164,6 +166,7 @@ exports[`exportDoneModal component should display error message 1`] = `
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="18"
                 width="18"
@@ -184,6 +187,7 @@ exports[`exportDoneModal component should display error message 1`] = `
               class="icon-main"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="44"
                 width="44"
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
index 523b4daa57c80aebfcdcdcc360170ee7023689a5..2f9b5cf5f52b622b1d3d4146ad32e41db92d629d 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -50,6 +50,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="18"
                 width="18"
@@ -100,7 +101,6 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
               export.modal_loading.text2
             </div>
             <button
-              aria-label="export.modal_loading.button_cancel"
               class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
               tabindex="0"
               type="button"
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
index dcd482806bf0e6bf6615d974fcdbbef16d16b656..8d325403f6d63a376930aec11d62eff44078efae 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -50,6 +50,7 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="18"
                 width="18"
@@ -70,6 +71,7 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
               class="icon-main"
             >
               <svg
+                aria-hidden="true"
                 class="styles__icon___23x3R"
                 height="48"
                 width="48"
@@ -93,7 +95,6 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
               class="buttons"
             >
               <button
-                aria-label="export.modal_start.button_cancel"
                 class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
                 tabindex="0"
                 type="button"
@@ -108,7 +109,6 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
                 />
               </button>
               <button
-                aria-label="export.button_download"
                 class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
                 tabindex="0"
                 type="button"
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
index 79d7a24dbe5881b54bc0fe3c14e7bc7a375fb9dc..602241786edd399e174531e1db68c0182d661a8b 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
@@ -1,10 +1,11 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import exportDone from 'assets/icons/ico/exportDone.svg'
 import warnCross from 'assets/icons/ico/warn-cross.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './exportDoneModal.scss'
 
@@ -36,17 +37,17 @@ const ExportDoneModal = ({
       </div>
 
       <div className="modal-done-root">
-        <IconButton
+        <StyledIconButton
+          icon={CloseIcon}
+          sized={18}
+          onClick={handleCloseClick}
           aria-label={t('export.button_close')}
           className="modal-paper-close-button"
-          onClick={handleCloseClick}
-        >
-          <Icon icon={CloseIcon} size={18} />
-        </IconButton>
+        />
 
         <div className="content">
           <div className="icon-main">
-            <Icon icon={error ? warnCross : exportDone} size={44} />
+            <StyledIcon icon={error ? warnCross : exportDone} size={44} />
           </div>
           {!error && (
             <>
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
index f25b2e28cd389aa8e53eca6aa830f70f4979bf73..3daa53c4a523cd26888830a95702506b1327607b 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
@@ -1,222 +1,215 @@
-import { Button, IconButton } from '@material-ui/core'
-import Dialog from '@material-ui/core/Dialog'
-import * as Sentry from '@sentry/react'
-import CloseIcon from 'assets/icons/ico/close.svg'
-import Loader from 'components/Loader/Loader'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import { FluidType, TimeStep } from 'enums'
-import FileSaver from 'file-saver'
-import { Datachart, Dataload, TimePeriod } from 'models'
-import React, { useCallback, useEffect } from 'react'
-import ConsumptionDataManager from 'services/consumption.service'
-import EnedisMonthlyAnalysisDataService from 'services/enedisMonthlyAnalysisData.service'
-import { formatTwoDigits, getFluidName } from 'utils/utils'
-import * as XLSX from 'xlsx'
-import './exportLoadingModal.scss'
-
-interface ExportDataRow {
-  [key: string]: string | number
-}
-
-interface ExportDataSheet {
-  fluidName: string
-  data: ExportDataRow[]
-}
-
-interface ExportLoadingModalProps {
-  open: boolean
-  handleCloseClick: () => void
-  handleDone: (e?: unknown) => void
-  selectedFluids: FluidType[]
-}
-
-const ExportLoadingModal = ({
-  open,
-  handleCloseClick,
-  handleDone,
-  selectedFluids,
-}: ExportLoadingModalProps) => {
-  const { t } = useI18n()
-  const client = useClient()
-
-  const fileType =
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
-  const fileExtension = '.xlsx'
-
-  const exportToXlsx = (
-    exportDataSheets: ExportDataSheet[],
-    fileName: string
-  ) => {
-    const wb = XLSX.utils.book_new()
-    for (const dataSheet of exportDataSheets) {
-      const ws = XLSX.utils.json_to_sheet(dataSheet.data)
-      XLSX.utils.book_append_sheet(wb, ws, dataSheet.fluidName)
-    }
-    const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
-    const data = new Blob([excelBuffer], { type: fileType })
-    FileSaver.saveAs(data, fileName + fileExtension)
-  }
-
-  const buildDataRow = useCallback(
-    async (
-      dataload: Dataload,
-      fluidType: FluidType
-    ): Promise<ExportDataRow> => {
-      const dataRow: ExportDataRow = {}
-      const fluidName = getFluidName(fluidType)
-      dataRow[t('export.month')] = formatTwoDigits(dataload.date.month)
-      dataRow[t('export.year')] = dataload.date.year
-      dataRow[
-        `${t('export.consumption')} (${t('FLUID.' + fluidName + '.UNIT')})`
-      ] = dataload.value
-      if (fluidType === FluidType.ELECTRICITY) {
-        const emas = new EnedisMonthlyAnalysisDataService(client)
-        const maxPowerEntities = await emas.getMaxPowerByDate(
-          dataload.date.year,
-          dataload.date.month
-        )
-        if (maxPowerEntities) {
-          const maxLoad = maxPowerEntities.reduce((max, entity) => {
-            if (entity.load > max) {
-              return entity.load
-            }
-            return max
-          }, 0)
-          dataRow[t('export.maxpower')] = maxLoad
-        }
-      }
-      return dataRow
-    },
-    [client, t]
-  )
-
-  const getExportDataSheet = useCallback(
-    async (fluidType: FluidType): Promise<ExportDataSheet | null> => {
-      const consumptionService = new ConsumptionDataManager(client)
-      const firstDataDate = await consumptionService.fetchAllFirstDateData(
-        [fluidType],
-        TimeStep.MONTH
-      )
-      const lastDataDate = await consumptionService.fetchAllLastDateData(
-        [fluidType],
-        TimeStep.MONTH
-      )
-      if (!firstDataDate[0] || !lastDataDate[0]) return null
-
-      const timePeriod: TimePeriod = {
-        startDate: firstDataDate[0],
-        endDate: lastDataDate[0],
-      }
-
-      const dataLoad: Datachart | null = await consumptionService.getGraphData(
-        timePeriod,
-        TimeStep.MONTH,
-        [fluidType],
-        undefined,
-        undefined,
-        false,
-        true
-      )
-
-      if (!dataLoad?.actualData) return null
-
-      const exportDataSheet: ExportDataSheet = {
-        fluidName: t(`FLUID.${FluidType[fluidType]}.LABEL`),
-        data: [],
-      }
-
-      for (const data of dataLoad.actualData) {
-        if (data.value === -1) continue
-        const dataRow = await buildDataRow(data, fluidType)
-        exportDataSheet.data.push(dataRow)
-      }
-      return exportDataSheet
-    },
-    [buildDataRow, client, t]
-  )
-
-  useEffect(() => {
-    let subscribed = true
-    const date = new Date()
-
-    const exportData = async (): Promise<void> => {
-      try {
-        const exportDataSheets: ExportDataSheet[] = []
-        for (const fluidType of selectedFluids) {
-          const exportDataFluid = await getExportDataSheet(fluidType)
-          if (exportDataFluid) {
-            exportDataSheets.push(exportDataFluid)
-          }
-        }
-        await new Promise(r => setTimeout(r, 2000))
-        if (subscribed) {
-          exportToXlsx(
-            exportDataSheets,
-            'ecolyo_data_' + date.toLocaleDateString()
-          )
-          handleDone()
-        }
-      } catch (e) {
-        Sentry.captureException(e)
-        handleDone(e)
-      }
-    }
-
-    if (subscribed && open) {
-      exportData()
-    }
-    return () => {
-      subscribed = false
-    }
-  }, [getExportDataSheet, handleDone, open, selectedFluids])
-
-  return (
-    <Dialog
-      open={open}
-      onClose={(_event, reason) => {
-        if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
-          handleCloseClick()
-        }
-      }}
-      aria-labelledby="accessibility-title"
-      classes={{
-        root: 'modal-root',
-        paper: 'modal-paper',
-      }}
-    >
-      <div id="accessibility-title">
-        {t('export.modal_loading.accessibility_title')}
-      </div>
-
-      <div className="modal-loading-root">
-        <IconButton
-          aria-label={t('export.button_close')}
-          className="modal-paper-close-button"
-          onClick={handleCloseClick}
-        >
-          <Icon icon={CloseIcon} size={18} />
-        </IconButton>
-        <div className="content">
-          <div className="icon-main">
-            <Loader color="gold" />
-          </div>
-          <div className="text-16-bold subtitle">
-            {t('export.modal_loading.text1')}
-          </div>
-          <div>{t('export.modal_loading.text2')}</div>
-          <Button
-            aria-label={t('export.modal_loading.button_cancel')}
-            onClick={handleCloseClick}
-            className="btnSecondary"
-          >
-            {t('export.modal_loading.button_cancel')}
-          </Button>
-        </div>
-      </div>
-    </Dialog>
-  )
-}
-
-export default ExportLoadingModal
+import { Button } from '@material-ui/core'
+import Dialog from '@material-ui/core/Dialog'
+import * as Sentry from '@sentry/react'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import Loader from 'components/Loader/Loader'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import { FluidType, TimeStep } from 'enums'
+import FileSaver from 'file-saver'
+import { Dataload, TimePeriod } from 'models'
+import React, { useCallback, useEffect } from 'react'
+import ConsumptionDataManager from 'services/consumption.service'
+import EnedisMonthlyAnalysisDataService from 'services/enedisMonthlyAnalysisData.service'
+import { formatTwoDigits, getFluidName } from 'utils/utils'
+import * as XLSX from 'xlsx'
+import './exportLoadingModal.scss'
+
+interface ExportDataRow {
+  [key: string]: string | number
+}
+
+interface ExportDataSheet {
+  fluidName: string
+  data: ExportDataRow[]
+}
+
+interface ExportLoadingModalProps {
+  open: boolean
+  handleCloseClick: () => void
+  handleDone: (e?: unknown) => void
+  selectedFluids: FluidType[]
+}
+
+const ExportLoadingModal = ({
+  open,
+  handleCloseClick,
+  handleDone,
+  selectedFluids,
+}: ExportLoadingModalProps) => {
+  const { t } = useI18n()
+  const client = useClient()
+
+  const fileType =
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
+  const fileExtension = '.xlsx'
+
+  const exportToXlsx = (
+    exportDataSheets: ExportDataSheet[],
+    fileName: string
+  ) => {
+    const wb = XLSX.utils.book_new()
+    for (const dataSheet of exportDataSheets) {
+      const ws = XLSX.utils.json_to_sheet(dataSheet.data)
+      XLSX.utils.book_append_sheet(wb, ws, dataSheet.fluidName)
+    }
+    const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
+    const data = new Blob([excelBuffer], { type: fileType })
+    FileSaver.saveAs(data, fileName + fileExtension)
+  }
+
+  const buildDataRow = useCallback(
+    async (
+      dataload: Dataload,
+      fluidType: FluidType
+    ): Promise<ExportDataRow> => {
+      const dataRow: ExportDataRow = {}
+      const fluidName = getFluidName(fluidType)
+      dataRow[t('export.month')] = formatTwoDigits(dataload.date.month)
+      dataRow[t('export.year')] = dataload.date.year
+      dataRow[
+        `${t('export.consumption')} (${t('FLUID.' + fluidName + '.UNIT')})`
+      ] = dataload.value
+      if (fluidType === FluidType.ELECTRICITY) {
+        const emas = new EnedisMonthlyAnalysisDataService(client)
+        const maxPowerEntities = await emas.getMaxPowerByDate(
+          dataload.date.year,
+          dataload.date.month
+        )
+        if (maxPowerEntities) {
+          const maxLoad = maxPowerEntities.reduce((max, entity) => {
+            if (entity.load > max) {
+              return entity.load
+            }
+            return max
+          }, 0)
+          dataRow[t('export.maxpower')] = maxLoad
+        }
+      }
+      return dataRow
+    },
+    [client, t]
+  )
+
+  const getExportDataSheet = useCallback(
+    async (fluidType: FluidType): Promise<ExportDataSheet | null> => {
+      const consumptionService = new ConsumptionDataManager(client)
+      const [firstDataDates, lastDataDates] = await Promise.all([
+        consumptionService.fetchAllFirstDateData([fluidType], TimeStep.MONTH),
+        consumptionService.fetchAllLastDateData([fluidType], TimeStep.MONTH),
+      ])
+      const firstDataDate = firstDataDates[0]
+      const lastDataDate = lastDataDates[0]
+
+      if (!firstDataDate || !lastDataDate) return null
+
+      const timePeriod: TimePeriod = {
+        startDate: firstDataDate,
+        endDate: lastDataDate,
+      }
+
+      const dataLoad = await consumptionService.getGraphData({
+        timePeriod,
+        timeStep: TimeStep.MONTH,
+        fluidTypes: [fluidType],
+        isHome: false,
+        isExport: true,
+      })
+
+      if (!dataLoad?.actualData) return null
+
+      const exportDataSheet: ExportDataSheet = {
+        fluidName: t(`FLUID.${FluidType[fluidType]}.LABEL`),
+        data: [],
+      }
+
+      for (const data of dataLoad.actualData) {
+        if (data.value === -1) continue
+        const dataRow = await buildDataRow(data, fluidType)
+        exportDataSheet.data.push(dataRow)
+      }
+      return exportDataSheet
+    },
+    [buildDataRow, client, t]
+  )
+
+  useEffect(() => {
+    let subscribed = true
+    const date = new Date()
+
+    const exportData = async (): Promise<void> => {
+      try {
+        const exportDataSheets: ExportDataSheet[] = []
+        for (const fluidType of selectedFluids) {
+          const exportDataFluid = await getExportDataSheet(fluidType)
+          if (exportDataFluid) {
+            exportDataSheets.push(exportDataFluid)
+          }
+        }
+        await new Promise(r => setTimeout(r, 2000))
+        if (subscribed) {
+          exportToXlsx(
+            exportDataSheets,
+            'ecolyo_data_' + date.toLocaleDateString()
+          )
+          handleDone()
+        }
+      } catch (e) {
+        Sentry.captureException(e)
+        handleDone(e)
+      }
+    }
+
+    if (subscribed && open) {
+      exportData()
+    }
+    return () => {
+      subscribed = false
+    }
+  }, [getExportDataSheet, handleDone, open, selectedFluids])
+
+  return (
+    <Dialog
+      open={open}
+      onClose={(_event, reason) => {
+        if (reason !== 'backdropClick' && reason !== 'escapeKeyDown') {
+          handleCloseClick()
+        }
+      }}
+      aria-labelledby="accessibility-title"
+      classes={{
+        root: 'modal-root',
+        paper: 'modal-paper',
+      }}
+    >
+      <div id="accessibility-title">
+        {t('export.modal_loading.accessibility_title')}
+      </div>
+
+      <div className="modal-loading-root">
+        <StyledIconButton
+          icon={CloseIcon}
+          sized={18}
+          onClick={handleCloseClick}
+          aria-label={t('export.button_close')}
+          className="modal-paper-close-button"
+        />
+        <div className="content">
+          <div className="icon-main">
+            <Loader color="gold" />
+          </div>
+          <div className="text-16-bold subtitle">
+            {t('export.modal_loading.text1')}
+          </div>
+          <div>{t('export.modal_loading.text2')}</div>
+          <Button onClick={handleCloseClick} className="btnSecondary">
+            {t('export.modal_loading.button_cancel')}
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+export default ExportLoadingModal
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.tsx b/src/components/Options/ExportData/Modals/exportStartModal.tsx
index 42c9e48666cd4c446aaded19923adb9ee63b50af..f06f8fdfc68761b37d16b75fc1c95cb4ae85edac 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.tsx
@@ -1,9 +1,10 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import download from 'assets/icons/ico/download.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './exportStartModal.scss'
 
@@ -34,16 +35,16 @@ const ExportStartModal = ({
         {t('export.modal_start.accessibility_title')}
       </div>
       <div className="modal-start-root">
-        <IconButton
+        <StyledIconButton
+          icon={CloseIcon}
+          sized={18}
+          onClick={handleCloseClick}
           aria-label={t('export.button_close')}
           className="modal-paper-close-button"
-          onClick={handleCloseClick}
-        >
-          <Icon icon={CloseIcon} size={18} />
-        </IconButton>
+        />
         <div className="content">
           <div className="icon-main">
-            <Icon icon={download} size={48} />
+            <StyledIcon icon={download} size={48} />
           </div>
           <div className="text-16-bold subtitle">
             {t('export.modal_start.text1')}
@@ -54,18 +55,10 @@ const ExportStartModal = ({
             {t('export.modal_start.text3')}
           </div>
           <div className="buttons">
-            <Button
-              aria-label={t('export.modal_start.button_cancel')}
-              onClick={handleCloseClick}
-              className="btnSecondary"
-            >
+            <Button onClick={handleCloseClick} className="btnSecondary">
               {t('export.modal_start.button_cancel')}
             </Button>
-            <Button
-              aria-label={t('export.button_download')}
-              onClick={handleDownloadClick}
-              className="btnPrimary"
-            >
+            <Button onClick={handleDownloadClick} className="btnPrimary">
               {t('export.button_download')}
             </Button>
           </div>
diff --git a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
index 7bfb4b7882eb8397b07bade0bbd7b63505a5b3ec..186567d961030f0246af7dfe06dd4119c165b1bb 100644
--- a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
+++ b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
@@ -23,6 +23,7 @@ exports[`exportOptions component should be rendered correctly 1`] = `
             class="MuiAccordionSummary-content expansion-panel-content"
           >
             <svg
+              aria-hidden="true"
               class="export-icon styles__icon___23x3R"
               height="42"
               width="42"
@@ -46,6 +47,7 @@ exports[`exportOptions component should be rendered correctly 1`] = `
               class="MuiIconButton-label"
             >
               <svg
+                aria-hidden="true"
                 class="accordion-icon styles__icon___23x3R"
                 height="16"
                 width="16"
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index 38965f5bda1dfdb3df48e6da1c58ed4bc7f6c841..416f123b3caa3f5cd74e5e426f6f30e46629fa50 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -10,7 +10,6 @@ div.expansion-panel-root.Mui-expanded:last-child {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 0.5rem;
   padding: 0 1.5rem;
 
   .export-option-content {
diff --git a/src/components/Options/GCU/GCUContent.tsx b/src/components/Options/GCU/GCUContent.tsx
index e15457d091369bf4469a944c6b44d819f04422e1..d28c1813b5b6330e9bf58379bda337d192c878f6 100644
--- a/src/components/Options/GCU/GCUContent.tsx
+++ b/src/components/Options/GCU/GCUContent.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './gcuContent.scss'
 
@@ -33,7 +33,6 @@ const GCUContent = (): JSX.Element => {
         <p className="text-14-normal">{t('gcu.content.part3_1')}</p>
         <p className="text-14-normal">{t('gcu.content.part3_2')}</p>
         <p className="text-14-normal">{t('gcu.content.part3_3')}</p>
-        <p className="text-14-normal">{t('gcu.content.part3_4')}</p>
         <div className="gcu-content-part-title text-15-normal">
           {t('gcu.content.title4')}
         </div>
diff --git a/src/components/Options/GCU/GCULink.tsx b/src/components/Options/GCU/GCULink.tsx
index bb43da2363560215ab6f66536e1f85d1f51394bf..3f7018685b8d0ddc8b0beba0d31984c710dc299e 100644
--- a/src/components/Options/GCU/GCULink.tsx
+++ b/src/components/Options/GCU/GCULink.tsx
@@ -1,36 +1,26 @@
-import Link from '@material-ui/core/Link'
 import GCUIcon from 'assets/icons/ico/gcu.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import './gcuLink.scss'
+import { useNavigate } from 'react-router-dom'
+import '../OptionsView.scss'
 
 const GCULink = () => {
   const { t } = useI18n()
+  const navigate = useNavigate()
+
+  const goToGCU = () => {
+    navigate(`/options/gcu`)
+  }
+
   return (
-    <div className="gcu-link-root">
-      <div className="gcu-link-content">
-        <Link
-          className="gcu-link-card-link"
-          component={RouterLink}
-          to="/options/gcu"
-        >
-          <div className="card">
-            <div className="gcu-link-card">
-              <div className="gcu-link-card-content">
-                <StyledIcon
-                  className="gcu-link-card-content-icon"
-                  icon={GCUIcon}
-                  size={42}
-                />
-                <div className="gcu-link-card-content-title">
-                  {t('common.title_gcu')}
-                </div>
-              </div>
-            </div>
-          </div>
-        </Link>
+    <div className="styled-card-root">
+      <div className="styled-card-content">
+        <StyledCard onClick={goToGCU}>
+          <StyledIcon icon={GCUIcon} size={38} />
+          {t('common.title_gcu')}
+        </StyledCard>
       </div>
     </div>
   )
diff --git a/src/components/Options/GCU/GCUView.tsx b/src/components/Options/GCU/GCUView.tsx
index 9f4e06c97017ace8a703e8db29d4229e106b950a..9dd174eba76e8d3e33f3277c6270838135515e5f 100644
--- a/src/components/Options/GCU/GCUView.tsx
+++ b/src/components/Options/GCU/GCUView.tsx
@@ -4,6 +4,9 @@ import Header from 'components/Header/Header'
 import GCUContent from 'components/Options/GCU/GCUContent'
 import React from 'react'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/options/gcu
+ */
 const GCUView = () => {
   return (
     <>
diff --git a/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
index dfdcf4910c46f89db3fa3bebeeada71b8e3fc2e6..aae53698025d3288e876649d6e5c290f9511ecfa 100644
--- a/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap
@@ -91,11 +91,6 @@ exports[`GCUContent component should be rendered correctly 1`] = `
       >
         gcu.content.part3_3
       </p>
-      <p
-        class="text-14-normal"
-      >
-        gcu.content.part3_4
-      </p>
       <div
         class="gcu-content-part-title text-15-normal"
       >
diff --git a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
index 915df297b184ee301fcd67fe248cc8bafd0441bd..a2e75eca8fe83baac4e4c7a6b7f7d25d4c0e4cde 100644
--- a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -3,48 +3,43 @@
 exports[`LegalNoticeLink component should be rendered correctly 1`] = `
 <div>
   <div
-    class="legal-notice-root"
+    class="styled-card-root"
   >
     <div
-      class="legal-notice-content"
+      class="styled-card-content"
     >
       <div
-        class="legal-notice-header text-16-normal-uppercase"
+        class="styled-card-header text-16-normal-uppercase"
       >
         legal.title_legal
       </div>
-      <a
-        class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
-        href="/options/legalnotice"
+      <button
+        class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+        tabindex="0"
+        type="button"
       >
         <div
-          class="card"
+          class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
         >
-          <div
-            class="legal-notice-card"
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="38"
+            width="38"
           >
-            <div
-              class="legal-notice-card-content"
-            >
-              <svg
-                aria-hidden="true"
-                class="legal-notice-card-content-icon styles__icon___23x3R"
-                height="42"
-                width="42"
-              >
-                <use
-                  xlink:href="#test-file-stub"
-                />
-              </svg>
-              <div
-                class="legal-notice-card-content-title"
-              >
-                legal.read_legal
-              </div>
-            </div>
-          </div>
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          legal.read_legal
         </div>
-      </a>
+        <span
+          class="MuiCardActionArea-focusHighlight"
+        />
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
index 918984408f738a1e931094280581679954ed37ce..ccef8cdf4a8f02fc4a960aa2982fd905e54f8ece 100644
--- a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap
@@ -100,11 +100,6 @@ exports[`GCUView component should be rendered correctly 1`] = `
         >
           gcu.content.part3_3
         </p>
-        <p
-          class="text-14-normal"
-        >
-          gcu.content.part3_4
-        </p>
         <div
           class="gcu-content-part-title text-15-normal"
         >
diff --git a/src/components/Options/GCU/gcuLink.scss b/src/components/Options/GCU/gcuLink.scss
deleted file mode 100644
index 3a88a80d9508fa3a7c92a992ae35bcae66fdb6da..0000000000000000000000000000000000000000
--- a/src/components/Options/GCU/gcuLink.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import 'src/styles/base/color';
-
-.gcu-link-root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: $white;
-  padding: 0 1.5rem 0;
-  margin-top: 0.5rem;
-  .gcu-link-header {
-    margin-bottom: 1.25rem;
-  }
-  .gcu-link-content {
-    p {
-      color: $white;
-    }
-    a {
-      color: $white;
-      text-decoration: none;
-    }
-    li {
-      margin: 1rem 0;
-    }
-    h2 {
-      color: $white;
-    }
-    h3 {
-      color: $white;
-      margin: 2.5rem 0 1rem;
-    }
-    .ln-contact {
-      color: $multi-color;
-    }
-    max-width: 45.75rem;
-    width: 100%;
-  }
-}
-
-.gcu-link-card-link {
-  color: black;
-}
-.gcu-link-card {
-  display: flex;
-  flex-direction: row;
-  margin: -0.75rem 0;
-  width: 100%;
-  .gcu-link-card-content {
-    display: flex;
-    flex-direction: row;
-    .gcu-link-card-content-icon {
-      margin: 0.5rem 0;
-    }
-    .gcu-link-card-content-title {
-      margin: 0 1rem;
-      align-self: center;
-    }
-  }
-}
diff --git a/src/components/Options/HelpLink/HelpLink.scss b/src/components/Options/HelpLink/HelpLink.scss
deleted file mode 100644
index 453d742a2340d847f201ad000603aa2bc2ec0c34..0000000000000000000000000000000000000000
--- a/src/components/Options/HelpLink/HelpLink.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import 'src/styles/base/color';
-
-.help-root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem;
-  margin-top: 2rem;
-  .help-content {
-    max-width: 45.75rem;
-    width: 100%;
-    a {
-      color: $white;
-      text-decoration: none;
-    }
-
-    .help-header {
-      color: $grey-bright;
-      margin-bottom: 1rem;
-    }
-  }
-}
-
-.help-card-link {
-  color: $white;
-  cursor: pointer;
-}
-.help-card {
-  display: flex;
-  flex-direction: row;
-  margin: -0.75rem 0;
-  width: 100%;
-  .help-card-content {
-    display: flex;
-    flex-direction: row;
-    .help-card-content-icon {
-      margin: 0.5rem 0;
-      min-width: 42px;
-    }
-    .help-card-content-title {
-      margin: 0 1rem;
-      align-self: center;
-      text-decoration: none;
-    }
-  }
-}
diff --git a/src/components/Options/HelpLink/HelpLink.tsx b/src/components/Options/HelpLink/HelpLink.tsx
index 4702a64fac00f1f6c8d99aa4daac80313101200c..c8ab0a8756a5bb5b3a07d427f199ae72d416aa26 100644
--- a/src/components/Options/HelpLink/HelpLink.tsx
+++ b/src/components/Options/HelpLink/HelpLink.tsx
@@ -1,41 +1,26 @@
-import Link from '@material-ui/core/Link'
 import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useAppDispatch } from 'store/hooks'
 import { openFeedbackModal } from 'store/modal/modal.slice'
-import './HelpLink.scss'
+import '../OptionsView.scss'
 
 const HelpLink = () => {
   const { t } = useI18n()
   const dispatch = useAppDispatch()
 
   return (
-    <div className="help-root">
-      <div className="help-content">
-        <div className="help-header text-16-normal-uppercase">
+    <div className="styled-card-root">
+      <div className="styled-card-content">
+        <div className="styled-card-header text-16-normal-uppercase">
           {t('help.title_help')}
         </div>
-        <Link
-          className="help-card-link"
-          onClick={() => dispatch(openFeedbackModal(true))}
-        >
-          <div className="card">
-            <div className="help-card">
-              <div className="help-card-content">
-                <StyledIcon
-                  className="help-card-content-icon"
-                  icon={QuestionMarkIcon}
-                  size={42}
-                />
-                <div className="help-card-content-title">
-                  {t('help.read_help')}
-                </div>
-              </div>
-            </div>
-          </div>
-        </Link>
+        <StyledCard onClick={() => dispatch(openFeedbackModal(true))}>
+          <StyledIcon icon={QuestionMarkIcon} size={38} />
+          {t('help.read_help')}
+        </StyledCard>
       </div>
     </div>
   )
diff --git a/src/components/Options/LegalNotice/LegalNoticeContent.tsx b/src/components/Options/LegalNotice/LegalNoticeContent.tsx
index 86b3c385fd6a79d691ba9f302801f2fcb8237514..8239f216706e9e733c4fe262860c9f3c8b94aead 100644
--- a/src/components/Options/LegalNotice/LegalNoticeContent.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeContent.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './legalNoticeView.scss'
 
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
index e158282f8124c1fa85b8f6c266666369297426fc..26d6dac220ff23c9676e31b3505118a509262dcf 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
@@ -1,40 +1,29 @@
-import Link from '@material-ui/core/Link'
 import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import './legalNoticeLink.scss'
+import { useNavigate } from 'react-router-dom'
+import '../OptionsView.scss'
 
 const LegalNoticeLink = () => {
   const { t } = useI18n()
+  const navigate = useNavigate()
+
+  const goToLegalNotice = () => {
+    navigate(`/options/legalnotice`)
+  }
 
   return (
-    <div className="legal-notice-root">
-      <div className="legal-notice-content">
-        <div className="legal-notice-header text-16-normal-uppercase">
+    <div className="styled-card-root">
+      <div className="styled-card-content">
+        <div className="styled-card-header text-16-normal-uppercase">
           {t('legal.title_legal')}
         </div>
-        <Link
-          className="legal-notice-card-link"
-          component={RouterLink}
-          to="/options/legalnotice"
-        >
-          <div className="card">
-            <div className="legal-notice-card">
-              <div className="legal-notice-card-content">
-                <StyledIcon
-                  className="legal-notice-card-content-icon"
-                  icon={LegalNoticeIcon}
-                  size={42}
-                />
-                <div className="legal-notice-card-content-title">
-                  {t('legal.read_legal')}
-                </div>
-              </div>
-            </div>
-          </div>
-        </Link>
+        <StyledCard onClick={goToLegalNotice}>
+          <StyledIcon icon={LegalNoticeIcon} size={38} />
+          {t('legal.read_legal')}
+        </StyledCard>
       </div>
     </div>
   )
diff --git a/src/components/Options/LegalNotice/LegalNoticeView.tsx b/src/components/Options/LegalNotice/LegalNoticeView.tsx
index 660a1f14806934a8e5db9378dc5aed686b227709..4a2683fbc9f24823b591a77353b02aa57cd216a1 100644
--- a/src/components/Options/LegalNotice/LegalNoticeView.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeView.tsx
@@ -5,6 +5,9 @@ import React from 'react'
 import LegalNoticeContent from './LegalNoticeContent'
 import './legalNoticeView.scss'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/options/legalnotice
+ */
 const LegalNoticeView = () => {
   return (
     <>
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index f75c9392adbd35e4372187d1a121b5a9603f2216..026de87e117e51acdb9f2185eea03baf1a925bdb 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -3,43 +3,38 @@
 exports[`GCULink component should be rendered correctly 1`] = `
 <div>
   <div
-    class="gcu-link-root"
+    class="styled-card-root"
   >
     <div
-      class="gcu-link-content"
+      class="styled-card-content"
     >
-      <a
-        class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
-        href="/options/gcu"
+      <button
+        class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+        tabindex="0"
+        type="button"
       >
         <div
-          class="card"
+          class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
         >
-          <div
-            class="gcu-link-card"
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="38"
+            width="38"
           >
-            <div
-              class="gcu-link-card-content"
-            >
-              <svg
-                aria-hidden="true"
-                class="gcu-link-card-content-icon styles__icon___23x3R"
-                height="42"
-                width="42"
-              >
-                <use
-                  xlink:href="#test-file-stub"
-                />
-              </svg>
-              <div
-                class="gcu-link-card-content-title"
-              >
-                common.title_gcu
-              </div>
-            </div>
-          </div>
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          common.title_gcu
         </div>
-      </a>
+        <span
+          class="MuiCardActionArea-focusHighlight"
+        />
+        <span
+          class="MuiTouchRipple-root"
+        />
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/components/Options/LegalNotice/legalNoticeLink.scss b/src/components/Options/LegalNotice/legalNoticeLink.scss
deleted file mode 100644
index c6eb9a42feb3c3b3f235ebbbc247001e65395bf0..0000000000000000000000000000000000000000
--- a/src/components/Options/LegalNotice/legalNoticeLink.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@import 'src/styles/base/breakpoint';
-@import 'src/styles/base/color';
-
-// LegalContainer
-.legal-notice-root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: $white;
-  padding: 0 1.5rem;
-  margin-top: 2rem;
-  .legal-notice-header {
-    color: $grey-bright;
-    margin-bottom: 1rem;
-  }
-  .legal-notice-content {
-    max-width: 45.75rem;
-    width: 100%;
-    @media #{$large-phone} {
-      width: 100%;
-    }
-  }
-}
-.legal-notice-card-link {
-  color: black;
-}
-.legal-notice-card {
-  display: flex;
-  flex-direction: row;
-  margin: -0.75rem 0;
-  width: 100%;
-  @media #{$large-phone} {
-    width: 100%;
-  }
-  .legal-notice-card-content {
-    display: flex;
-    flex-direction: row;
-    .legal-notice-card-content-icon {
-      margin: 0.5rem 0;
-    }
-    .legal-notice-card-content-title {
-      margin: 0 1rem;
-      align-self: center;
-      color: white;
-    }
-  }
-}
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index 3589de6222a5a385bedd1af0332222aed9a5308b..e1a6ab75cc19abb47fc44331caaf141b080b2b6c 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -1,6 +1,6 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
-import './matomoOptOut.scss'
+import '../OptionsView.scss'
 
 declare let __PIWIK_TRACKER_URL__: string
 
@@ -9,14 +9,15 @@ const MatomoOptOut = () => {
   const baseUrl = __PIWIK_TRACKER_URL__
 
   return (
-    <div className="matomo-opt-out-container">
-      <div className="matomo-opt-out">
-        <div className="opt-out-header text-16-normal-uppercase">
+    <div className="styled-card-root">
+      <div className="styled-card-content">
+        <div className="styled-card-header text-16-normal-uppercase">
           {t('matomo.matomo_title')}
         </div>
         <iframe
           title="opt-out"
           style={{ height: '250px' }}
+          className="matomo-content"
           src={`${baseUrl}index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif`}
         />
       </div>
diff --git a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
index 4e821bbf7d2a9b766176578195e820bb88cf36a7..f9b02a664fa3d91d7e805b657ecf85d19f39ec3e 100644
--- a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
+++ b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
@@ -3,17 +3,18 @@
 exports[`MatomoOptOut component should be rendered correctly 1`] = `
 <div>
   <div
-    class="matomo-opt-out-container"
+    class="styled-card-root"
   >
     <div
-      class="matomo-opt-out"
+      class="styled-card-content"
     >
       <div
-        class="opt-out-header text-16-normal-uppercase"
+        class="styled-card-header text-16-normal-uppercase"
       >
         matomo.matomo_title
       </div>
       <iframe
+        class="matomo-content"
         src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
         style="height: 250px;"
         title="opt-out"
diff --git a/src/components/Options/MatomoOptOut/matomoOptOut.scss b/src/components/Options/MatomoOptOut/matomoOptOut.scss
deleted file mode 100644
index 0c4754fbe8456e6802f8c6232b27c586ee52ef17..0000000000000000000000000000000000000000
--- a/src/components/Options/MatomoOptOut/matomoOptOut.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/typo-variables';
-
-.matomo-opt-out-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem;
-  margin: 2rem 0;
-
-  .matomo-opt-out {
-    margin: 0 auto;
-    max-width: 45.75rem;
-    width: 100%;
-    .opt-out-header {
-      color: $grey-bright;
-    }
-
-    * {
-      font-family: $text-font;
-    }
-  }
-}
diff --git a/src/components/Options/OptionsView.scss b/src/components/Options/OptionsView.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9cfe87eccb6cdfecd95fe126a3c45c8e9c6f3dc9
--- /dev/null
+++ b/src/components/Options/OptionsView.scss
@@ -0,0 +1,38 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/typo-variables';
+
+.options-root {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.info-links {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.styled-card-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5rem;
+
+  .styled-card-content {
+    max-width: 45.75rem;
+    width: 100%;
+
+    .styled-card-header {
+      color: $grey-bright;
+      margin-bottom: 1rem;
+    }
+
+    .matomo-content {
+      * {
+        font-family: $text-font;
+      }
+    }
+  }
+}
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 54e5e694ea399046539b9ed80c440aec418ae30d..0ea9e09848895ae99e634ab643a37eb090a8e718 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -2,18 +2,22 @@ import logos from 'assets/png/logos_partenaires.svg'
 import Content from 'components/Content/Content'
 import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
-import Accessibility from './Accessibility/Accessibility'
+import AccessibilityLink from './AccessibilityLink/AccessibilityLink'
 import ExportData from './ExportData/ExportData'
 import GCULink from './GCU/GCULink'
 import HelpLink from './HelpLink/HelpLink'
 import LegalNoticeLink from './LegalNotice/LegalNoticeLink'
 import MatomoOptOut from './MatomoOptOut/MatomoOptOut'
+import './OptionsView.scss'
 import ProfileTypeOptions from './ProfileTypeOptions/ProfileTypeOptions'
 import ReportOptions from './ReportOptions/ReportOptions'
 import Version from './Version/Version'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/options
+ */
 const OptionsView = () => {
   const { t } = useI18n()
 
@@ -22,14 +26,20 @@ const OptionsView = () => {
       <CozyBar titleKey="common.title_options" />
       <Header desktopTitleKey="common.title_options" />
       <Content>
-        <ProfileTypeOptions />
-        <ExportData />
-        <ReportOptions />
-        <HelpLink />
-        <LegalNoticeLink />
-        <GCULink />
-        <Accessibility />
-        <MatomoOptOut />
+        <div className="options-root">
+          <div>
+            <ProfileTypeOptions />
+            <ExportData />
+          </div>
+          <ReportOptions />
+          <HelpLink />
+          <div className="info-links">
+            <LegalNoticeLink />
+            <GCULink />
+            <AccessibilityLink />
+          </div>
+          <MatomoOptOut />
+        </div>
         <div className="parameters-logos">
           <img src={logos} alt={t(`common.funders_logo`)} />
         </div>
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index d9ed1c828754438af9be7f61094272af105ecb4f..604c357352c13268cf64a2ea564676f2575d9886 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -9,8 +9,7 @@ import profileIcon from 'assets/icons/ico/profile.svg'
 import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import useExploration from 'components/Hooks/useExploration'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import {
   FluidType,
   HousingType,
@@ -69,14 +68,18 @@ const ProfileTypeOptions = () => {
                 'profile_type.accessibility.button_toggle_detail_profile'
               )}
               expandIcon={
-                <Icon icon={chevronDown} size={16} className="accordion-icon" />
+                <StyledIcon icon={chevronDown} className="accordion-icon" />
               }
               classes={{
                 root: 'expansion-panel-summary',
                 content: 'expansion-panel-content',
               }}
             >
-              <Icon className="profile-icon" icon={profileIcon} size={42} />
+              <StyledIcon
+                className="profile-icon"
+                icon={profileIcon}
+                size={42}
+              />
               <div className="text-16-normal profile-title">
                 {t('profile_type.your_profile')}
               </div>
diff --git a/src/components/Options/ReportOptions/ReportOptions.spec.tsx b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
index 14752d0b242c4ba2333d151dca4fb41c539eaeac..ff979961be610940b17fc79bc0c10b065714caaa 100644
--- a/src/components/Options/ReportOptions/ReportOptions.spec.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
@@ -71,7 +71,7 @@ describe('ReportOptions component', () => {
   describe('should test water alert', () => {
     const storeWaterDone = createMockEcolyoStore({
       global: { ...mockGlobalState, fluidStatus: fluidStatusConnectedData },
-      profile: { sendAnalysisNotification: false },
+      profile: { ...mockProfileState, sendAnalysisNotification: false },
     })
     it('should be rendered with sendConsumptionAlert to false and enable it', async () => {
       render(
@@ -89,10 +89,11 @@ describe('ReportOptions component', () => {
       })
     })
 
-    it('should render waterLimit to 100', async () => {
+    it('should render waterLimit to 100', () => {
       const storeWaterAlert = createMockEcolyoStore({
         global: { ...mockGlobalState, fluidStatus: fluidStatusConnectedData },
         profile: {
+          ...mockProfileState,
           sendConsumptionAlert: true,
           waterDailyConsumptionLimit: 100,
         },
diff --git a/src/components/Options/ReportOptions/ReportOptions.tsx b/src/components/Options/ReportOptions/ReportOptions.tsx
index ab9bf280a489403943a040a97096087dce19943e..fb7750f05670885281acb68f70ea1cb3a28e431f 100644
--- a/src/components/Options/ReportOptions/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.tsx
@@ -1,7 +1,7 @@
 import { OutlinedInput } from '@material-ui/core'
 import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidState, FluidType, TimeStep } from 'enums'
 import { DateTime } from 'luxon'
 import { Dataload, TimePeriod } from 'models'
@@ -69,21 +69,18 @@ const ReportOptions = () => {
         endDate: DateTime.now(),
       }
       const consumptionService = new ConsumptionDataManager(client)
-      const lastSemesterMax = await consumptionService.getMaxLoad(
-        timePeriod,
-        TimeStep.DAY,
-        [FluidType.WATER],
-        undefined,
-        false,
-        true
-      )
+      const lastSemesterMax = await consumptionService.getMaxLoad({
+        maxTimePeriod: timePeriod,
+        timeStep: TimeStep.DAY,
+        fluidTypes: [FluidType.WATER],
+        withDate: true,
+      })
       if (lastSemesterMax) {
         setLastSemesterMaxDay(lastSemesterMax as Dataload)
       }
     }
-    if (subscribed) {
-      getMaxLoadData()
-    }
+    subscribed && getMaxLoadData()
+
     return () => {
       subscribed = false
     }
diff --git a/src/components/Options/ReportOptions/reportOptions.scss b/src/components/Options/ReportOptions/reportOptions.scss
index 58ab12b6b0aaa790e6c71101041272ca86361267..aa8cd00d10027bffb40b33e6732bc73486101dcd 100644
--- a/src/components/Options/ReportOptions/reportOptions.scss
+++ b/src/components/Options/ReportOptions/reportOptions.scss
@@ -7,7 +7,6 @@
   align-items: center;
   justify-content: center;
   padding: 0 1.5rem;
-  margin-top: 2rem;
   .report-option-content {
     max-width: 45.75rem;
     width: 100%;
diff --git a/src/components/Options/Unsubscribe/Unsubscribe.tsx b/src/components/Options/Unsubscribe/Unsubscribe.tsx
index 07efaeaf987b1428dcdbccb14ca1502f6bc382f6..43a024dbb98439ad96a6d264405515d71268289f 100644
--- a/src/components/Options/Unsubscribe/Unsubscribe.tsx
+++ b/src/components/Options/Unsubscribe/Unsubscribe.tsx
@@ -4,7 +4,7 @@ import EcolyoGlowIcon from 'assets/icons/ico/ecolyo-glow.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import ProfileService from 'services/profile.service'
 import './unsubscribe.scss'
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 6f2c8cedd1c0f04a3be025a71ea7c25d16c3cbf7..135c90533a5d6542b27fd3bc6861a129656661a8 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -10,137 +10,145 @@ exports[`OptionsView component should be rendered correctly 1`] = `
   />
   <mock-content>
     <div
-      class="profile-type-root"
+      class="options-root"
     >
-      <div
-        class="profile-type-content"
-      >
-        <div
-          class="head text-16-normal-uppercase"
-        >
-          profile_type.title_profile
-        </div>
-        <button
-          class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link"
-          tabindex="0"
-          type="button"
-        >
-          <div
-            class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
-          >
-            <svg
-              aria-hidden="true"
-              class="profile-icon styles__icon___23x3R"
-              height="42"
-              width="42"
-            >
-              <use
-                xlink:href="#test-file-stub"
-              />
-            </svg>
-            <span
-              class="link-label text-16-normal"
-            >
-              profile_type.read_profile
-            </span>
-          </div>
-          <span
-            class="MuiCardActionArea-focusHighlight"
-          />
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
-      </div>
-    </div>
-    <div
-      class="export-option-root"
-    >
-      <div
-        class="export-option-content"
-      >
+      <div>
         <div
-          class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+          class="profile-type-root"
         >
           <div
-            aria-disabled="false"
-            aria-expanded="false"
-            aria-label="profile_type.accessibility.button_toggle_export"
-            class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
-            role="button"
-            tabindex="0"
+            class="profile-type-content"
           >
             <div
-              class="MuiAccordionSummary-content expansion-panel-content"
+              class="head text-16-normal-uppercase"
             >
-              <svg
-                class="export-icon styles__icon___23x3R"
-                height="42"
-                width="42"
-              >
-                <use
-                  xlink:href="#test-file-stub"
-                />
-              </svg>
-              <div
-                class="text-16-normal accordion-title"
-              >
-                export.title_export
-              </div>
+              profile_type.title_profile
             </div>
-            <div
-              aria-disabled="false"
-              aria-hidden="true"
-              class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+            <button
+              class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link"
+              tabindex="0"
+              type="button"
             >
-              <span
-                class="MuiIconButton-label"
+              <div
+                class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
               >
                 <svg
-                  class="accordion-icon styles__icon___23x3R"
-                  height="16"
-                  width="16"
+                  aria-hidden="true"
+                  class="profile-icon styles__icon___23x3R"
+                  height="42"
+                  width="42"
                 >
                   <use
                     xlink:href="#test-file-stub"
                   />
                 </svg>
-              </span>
+                <span
+                  class="link-label text-16-normal"
+                >
+                  profile_type.read_profile
+                </span>
+              </div>
+              <span
+                class="MuiCardActionArea-focusHighlight"
+              />
               <span
                 class="MuiTouchRipple-root"
               />
-            </div>
+            </button>
           </div>
+        </div>
+        <div
+          class="export-option-root"
+        >
           <div
-            class="MuiCollapse-root MuiCollapse-hidden"
-            style="min-height: 0px;"
+            class="export-option-content"
           >
             <div
-              class="MuiCollapse-wrapper"
+              class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
             >
               <div
-                class="MuiCollapse-wrapperInner"
+                aria-disabled="false"
+                aria-expanded="false"
+                aria-label="profile_type.accessibility.button_toggle_export"
+                class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+                role="button"
+                tabindex="0"
               >
                 <div
-                  role="region"
+                  class="MuiAccordionSummary-content expansion-panel-content"
                 >
+                  <svg
+                    aria-hidden="true"
+                    class="export-icon styles__icon___23x3R"
+                    height="42"
+                    width="42"
+                  >
+                    <use
+                      xlink:href="#test-file-stub"
+                    />
+                  </svg>
                   <div
-                    class="MuiAccordionDetails-root expansion-panel-details"
+                    class="text-16-normal accordion-title"
                   >
-                    <div
-                      class="text-15-normal grey"
-                    >
-                      export.text1
-                    </div>
-                    <div
-                      class="text-16-bold"
+                    export.title_export
+                  </div>
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-hidden="true"
+                  class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+                >
+                  <span
+                    class="MuiIconButton-label"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="accordion-icon styles__icon___23x3R"
+                      height="16"
+                      width="16"
                     >
-                      export.fluid_select
-                    </div>
+                      <use
+                        xlink:href="#test-file-stub"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </div>
+              </div>
+              <div
+                class="MuiCollapse-root MuiCollapse-hidden"
+                style="min-height: 0px;"
+              >
+                <div
+                  class="MuiCollapse-wrapper"
+                >
+                  <div
+                    class="MuiCollapse-wrapperInner"
+                  >
                     <div
-                      class="text-15-normal grey"
+                      role="region"
                     >
-                      export.no_data
+                      <div
+                        class="MuiAccordionDetails-root expansion-panel-details"
+                      >
+                        <div
+                          class="text-15-normal grey"
+                        >
+                          export.text1
+                        </div>
+                        <div
+                          class="text-16-bold"
+                        >
+                          export.fluid_select
+                        </div>
+                        <div
+                          class="text-15-normal grey"
+                        >
+                          export.no_data
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -149,247 +157,232 @@ exports[`OptionsView component should be rendered correctly 1`] = `
           </div>
         </div>
       </div>
-    </div>
-    <div
-      class="report-option-root"
-    >
       <div
-        class="report-option-content"
+        class="report-option-root"
       >
         <div
-          class="reportCard"
+          class="report-option-content"
         >
           <div
-            class="row"
+            class="reportCard"
           >
-            <span
-              class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-3"
+            <div
+              class="row"
             >
               <span
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-7 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-4 MuiSwitch-colorSecondary PrivateSwitchBase-checked-8 Mui-checked WithStyles(ForwardRef(Switch))-checked-5"
+                class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-3"
               >
                 <span
-                  class="MuiIconButton-label"
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-7 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-4 MuiSwitch-colorSecondary PrivateSwitchBase-checked-8 Mui-checked WithStyles(ForwardRef(Switch))-checked-5"
                 >
-                  <input
-                    checked=""
-                    class="PrivateSwitchBase-input-10 MuiSwitch-input"
-                    type="checkbox"
-                    value=""
-                  />
                   <span
-                    class="MuiSwitch-thumb"
+                    class="MuiIconButton-label"
+                  >
+                    <input
+                      checked=""
+                      class="PrivateSwitchBase-input-10 MuiSwitch-input"
+                      type="checkbox"
+                      value=""
+                    />
+                    <span
+                      class="MuiSwitch-thumb"
+                    />
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
                   />
                 </span>
                 <span
-                  class="MuiTouchRipple-root"
+                  class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-6"
                 />
               </span>
               <span
-                class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-6"
-              />
-            </span>
+                class="text-16-normal-uppercase"
+              >
+                profile.report.title_bilan
+              </span>
+            </div>
             <span
-              class="text-16-normal-uppercase"
+              class="text-16-normal"
             >
-              profile.report.title_bilan
+              profile.report.switch_label_bilan
             </span>
           </div>
-          <span
-            class="text-16-normal"
-          >
-            profile.report.switch_label_bilan
-          </span>
         </div>
       </div>
-    </div>
-    <div
-      class="help-root"
-    >
       <div
-        class="help-content"
+        class="styled-card-root"
       >
         <div
-          class="help-header text-16-normal-uppercase"
-        >
-          help.title_help
-        </div>
-        <a
-          class="MuiTypography-root MuiLink-root MuiLink-underlineHover help-card-link MuiTypography-colorPrimary"
+          class="styled-card-content"
         >
           <div
-            class="card"
+            class="styled-card-header text-16-normal-uppercase"
+          >
+            help.title_help
+          </div>
+          <button
+            class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+            tabindex="0"
+            type="button"
           >
             <div
-              class="help-card"
+              class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
             >
-              <div
-                class="help-card-content"
+              <svg
+                aria-hidden="true"
+                class="styles__icon___23x3R"
+                height="38"
+                width="38"
               >
-                <svg
-                  aria-hidden="true"
-                  class="help-card-content-icon styles__icon___23x3R"
-                  height="42"
-                  width="42"
-                >
-                  <use
-                    xlink:href="#test-file-stub"
-                  />
-                </svg>
-                <div
-                  class="help-card-content-title"
-                >
-                  help.read_help
-                </div>
-              </div>
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+              help.read_help
             </div>
-          </div>
-        </a>
+            <span
+              class="MuiCardActionArea-focusHighlight"
+            />
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
       </div>
-    </div>
-    <div
-      class="legal-notice-root"
-    >
       <div
-        class="legal-notice-content"
+        class="info-links"
       >
         <div
-          class="legal-notice-header text-16-normal-uppercase"
-        >
-          legal.title_legal
-        </div>
-        <a
-          class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
-          href="/options/legalnotice"
+          class="styled-card-root"
         >
           <div
-            class="card"
+            class="styled-card-content"
           >
             <div
-              class="legal-notice-card"
+              class="styled-card-header text-16-normal-uppercase"
+            >
+              legal.title_legal
+            </div>
+            <button
+              class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+              tabindex="0"
+              type="button"
             >
               <div
-                class="legal-notice-card-content"
+                class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
               >
                 <svg
                   aria-hidden="true"
-                  class="legal-notice-card-content-icon styles__icon___23x3R"
-                  height="42"
-                  width="42"
+                  class="styles__icon___23x3R"
+                  height="38"
+                  width="38"
                 >
                   <use
                     xlink:href="#test-file-stub"
                   />
                 </svg>
-                <div
-                  class="legal-notice-card-content-title"
-                >
-                  legal.read_legal
-                </div>
+                legal.read_legal
               </div>
-            </div>
+              <span
+                class="MuiCardActionArea-focusHighlight"
+              />
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
           </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="gcu-link-root"
-    >
-      <div
-        class="gcu-link-content"
-      >
-        <a
-          class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
-          href="/options/gcu"
+        </div>
+        <div
+          class="styled-card-root"
         >
           <div
-            class="card"
+            class="styled-card-content"
           >
-            <div
-              class="gcu-link-card"
+            <button
+              class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+              tabindex="0"
+              type="button"
             >
               <div
-                class="gcu-link-card-content"
+                class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
               >
                 <svg
                   aria-hidden="true"
-                  class="gcu-link-card-content-icon styles__icon___23x3R"
-                  height="42"
-                  width="42"
+                  class="styles__icon___23x3R"
+                  height="38"
+                  width="38"
                 >
                   <use
                     xlink:href="#test-file-stub"
                   />
                 </svg>
-                <div
-                  class="gcu-link-card-content-title"
-                >
-                  common.title_gcu
-                </div>
+                common.title_gcu
               </div>
-            </div>
+              <span
+                class="MuiCardActionArea-focusHighlight"
+              />
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
           </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="gcu-link-root"
-    >
-      <div
-        class="gcu-link-content"
-      >
-        <a
-          class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
-          href="https://ecolyo.com/accessibilite.html"
-          target="_blank"
+        </div>
+        <div
+          class="styled-card-root"
         >
           <div
-            class="card"
+            class="styled-card-content"
           >
-            <div
-              class="gcu-link-card"
+            <button
+              class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+              tabindex="0"
+              type="button"
             >
               <div
-                class="gcu-link-card-content"
+                class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
               >
                 <svg
                   aria-hidden="true"
-                  class="gcu-link-card-content-icon styles__icon___23x3R"
-                  height="42"
-                  width="42"
+                  class="styles__icon___23x3R"
+                  height="38"
+                  width="38"
                 >
                   <use
                     xlink:href="#test-file-stub"
                   />
                 </svg>
-                <div
-                  class="gcu-link-card-content-title"
-                >
-                  common.title_accessibility
-                </div>
+                common.title_accessibility
               </div>
-            </div>
+              <span
+                class="MuiCardActionArea-focusHighlight"
+              />
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
           </div>
-        </a>
+        </div>
       </div>
-    </div>
-    <div
-      class="matomo-opt-out-container"
-    >
       <div
-        class="matomo-opt-out"
+        class="styled-card-root"
       >
         <div
-          class="opt-out-header text-16-normal-uppercase"
+          class="styled-card-content"
         >
-          matomo.matomo_title
+          <div
+            class="styled-card-header text-16-normal-uppercase"
+          >
+            matomo.matomo_title
+          </div>
+          <iframe
+            class="matomo-content"
+            src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
+            style="height: 250px;"
+            title="opt-out"
+          />
         </div>
-        <iframe
-          src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
-          style="height: 250px;"
-          title="opt-out"
-        />
       </div>
     </div>
     <div
diff --git a/src/components/PartnerIssue/PartnerIssueModal.tsx b/src/components/PartnerIssue/PartnerIssueModal.tsx
index d6158bd696ecd68900096f8994e68a8d3f8532e3..3d8540225226727f34f872c2ea8829b4931d9781 100644
--- a/src/components/PartnerIssue/PartnerIssueModal.tsx
+++ b/src/components/PartnerIssue/PartnerIssueModal.tsx
@@ -1,11 +1,10 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import IconButton from '@material-ui/core/IconButton'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import OrangeWarn from 'assets/icons/ico/warn-orange.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { FluidType } from 'enums'
 import React from 'react'
 import './partnerIssueModal.scss'
@@ -51,13 +50,12 @@ const PartnerIssueModal = ({
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={() => handleCloseClick(issuedFluid)}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={() => handleCloseClick(issuedFluid)}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
 
       <div className="partnerIssueModal">
         <StyledIcon icon={OrangeWarn} size={40} className="warn-icon" />
diff --git a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
index a0196786c26b18a6c58302c49e56c65b3c1a024b..2da3a371021ada8c3ae39dce5ca2d9d014b5daf3 100644
--- a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
+++ b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
diff --git a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx
index 129114f86fac29eaba1d227ef002015e062b966e..7c697496455ff16cdba2c8e3a05572b776a743a8 100644
--- a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx
@@ -29,7 +29,7 @@ jest.mock('services/profileTypeEntity.service', () => {
 describe('ProfileTypeFinished component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <ProfileTypeFinished profileType={mockProfileType} />
diff --git a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
index f32dd2d9d4b37c8253ddd97169bc1aafa6d39a3a..34cd7b29d36fbb35a2b6d38bf14fa8a63c9bfebd 100644
--- a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
@@ -4,7 +4,7 @@ import finishIcon from 'assets/icons/visu/profileType/finish.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import useExploration from 'components/Hooks/useExploration'
 import { Client, useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { PROFILETYPE_DOCTYPE } from 'doctypes'
 import { UsageEventType, UserExplorationID } from 'enums'
 import { DateTime } from 'luxon'
diff --git a/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx b/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
index a3d7d056eb58991da159476a840d5e40b1edcecb..51a7ccf531283f2b4d618b353162fadc81ee7868 100644
--- a/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
@@ -1,7 +1,7 @@
 import { MenuItem, Select } from '@material-ui/core'
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import 'components/ProfileType/profileTypeForm.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ProfileTypeStepForm } from 'enums'
 import { DateTime } from 'luxon'
 import { ProfileType, ProfileTypeAnswer, ProfileTypeValues } from 'models'
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
index 07f1895e9dc293df45da3d0b99395d4207457680..b57b25091f5074867e54023b5a0881aaed028fdc 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import 'components/ProfileType/profileTypeForm.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ProfileTypeStepForm } from 'enums'
 import { remove } from 'lodash'
 import { ProfileType, ProfileTypeAnswer } from 'models'
@@ -82,15 +82,16 @@ const ProfileTypeFormMultiChoice = ({
           const stringValue = value.toString()
           return (
             <label
+              htmlFor={`answer${index}`}
               key={index}
               className={classNames('checkbox', {
                 ['answer-checked']: answer.includes(stringValue),
               })}
             >
               <input
+                id={`answer${index}`}
                 type="checkbox"
                 value={stringValue}
-                name={stringValue}
                 onChange={() => handleChange(stringValue)}
                 checked={isChecked(stringValue)}
               />
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
index 321f73ee9dad17adcd437e17239d3ce06ff173cb..41078fc40a4f17722caee3993d2c60f24ba4a345 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
@@ -2,7 +2,7 @@
 import { InputAdornment, OutlinedInput } from '@material-ui/core'
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import 'components/ProfileType/profileTypeForm.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ProfileTypeStepForm } from 'enums'
 import { ProfileType, ProfileTypeAnswer, ProfileTypeValues } from 'models'
 import React, { useCallback, useEffect, useState } from 'react'
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx
index 0b4d386c5eb7da75cddb76107b5d482f6cbd7844..b3f119d22801b8db2a6b0ffb2e42588239d01f7c 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx
@@ -12,7 +12,7 @@ import ProfileTypeFormNumberSelection from './ProfileTypeFormNumberSelection'
 describe('ProfileTypeFormNumberSelection component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <ProfileTypeFormNumberSelection
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
index 06b84201e2e01bb60d1abaf69b3b1d89726861e9..f28e9c563bd0cd1ce9acfa0184fad2d7d092eeb3 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
@@ -1,7 +1,7 @@
 import { Button, TextField } from '@material-ui/core'
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import 'components/ProfileType/profileTypeForm.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ProfileTypeStepForm } from 'enums'
 import { ProfileType, ProfileTypeAnswer, ProfileTypeValues } from 'models'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -83,8 +83,8 @@ const ProfileTypeFormNumberSelection = ({
               type="tel"
               className="inputNumberIncrements"
               value={answer.toString()}
-              name={answerType.attribute}
               size="small"
+              disabled
             />
             <Button
               onClick={() => increment()}
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
index 0f5216e8f7f333c02c64627bb3c0046e710f016d..8f67be5c254206c4239a190f956d0d423f33c65c 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
 import 'components/ProfileType/profileTypeForm.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { ProfileTypeStepForm } from 'enums'
 import {
   ProfileEcogesture,
@@ -76,6 +76,7 @@ const ProfileTypeFormSingleChoice = ({
 
           return (
             <label
+              htmlFor={`answer-${index}`}
               key={index}
               className={classNames({
                 ['radio_short']: answerType.choices.length < 5,
@@ -84,9 +85,9 @@ const ProfileTypeFormSingleChoice = ({
               })}
             >
               <input
+                id={`answer-${index}`}
                 type="radio"
                 value={value.toString()}
-                name={value.toString()}
                 onChange={() => setAnswer(value)}
                 checked={answer === value ? true : false}
               />
diff --git a/src/components/ProfileType/ProfileTypeView.tsx b/src/components/ProfileType/ProfileTypeView.tsx
index 0e3369a047fba8d9cfe4a8108920b9730cf3885a..e7ce6980a5672cb544a43187022a587bde708abc 100644
--- a/src/components/ProfileType/ProfileTypeView.tsx
+++ b/src/components/ProfileType/ProfileTypeView.tsx
@@ -32,6 +32,9 @@ import ProfileTypeFormNumber from './ProfileTypeFormNumber/ProfileTypeFormNumber
 import ProfileTypeFormNumberSelection from './ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection'
 import ProfileTypeFormSingleChoice from './ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/profileType
+ */
 const ProfileTypeView = () => {
   const { profile, profileType, profileEcogesture } = useAppSelector(
     state => state.ecolyo
diff --git a/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx b/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx
index ccaf243e83620d21cffe47d48d5bc75187afdb2a..11d1e2a39aea132089405f564acdd26a7a19ba40 100644
--- a/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx
+++ b/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx
@@ -15,7 +15,8 @@ jest.mock('services/challenge.service', () => {
 })
 
 describe('QuizBegin component', () => {
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly and launch quiz', async () => {
+    mockUserChallengeUpdateFlag.mockResolvedValueOnce(userChallengeData[0])
     const store = createMockEcolyoStore()
     const { container } = render(
       <Provider store={store}>
diff --git a/src/components/Quiz/QuizBegin/QuizBegin.tsx b/src/components/Quiz/QuizBegin/QuizBegin.tsx
index a6698e7879213511fb233f48970d71abfd6b9f32..952f47d5cb51d83f635b6e9abc570e226c09b7a5 100644
--- a/src/components/Quiz/QuizBegin/QuizBegin.tsx
+++ b/src/components/Quiz/QuizBegin/QuizBegin.tsx
@@ -3,7 +3,7 @@ import quizIcon from 'assets/icons/visu/quiz/questionMark.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import StarsContainer from 'components/CommonKit/StarsContainer/StarsContainer'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeUpdateFlag } from 'enums'
 import { UserChallenge } from 'models'
 import React from 'react'
@@ -17,12 +17,11 @@ const QuizBegin = ({ userChallenge }: { userChallenge: UserChallenge }) => {
   const client = useClient()
   const dispatch = useAppDispatch()
   const launchQuiz = async () => {
-    const challengeService: ChallengeService = new ChallengeService(client)
-    const userChallengeUpdated: UserChallenge =
-      await challengeService.updateUserChallenge(
-        userChallenge,
-        UserChallengeUpdateFlag.QUIZ_START
-      )
+    const challengeService = new ChallengeService(client)
+    const userChallengeUpdated = await challengeService.updateUserChallenge(
+      userChallenge,
+      UserChallengeUpdateFlag.QUIZ_START
+    )
     dispatch(updateUserChallengeList(userChallengeUpdated))
   }
 
diff --git a/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
index 2d84331434722f315a25f5fe8489f12bb180e19f..b00190ae45972c25d1b4afd39892147824983cc2 100644
--- a/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
@@ -2,8 +2,8 @@ import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import correctAnswer from 'assets/icons/ico/correctAnswer.svg'
 import wrongAnswer from 'assets/icons/ico/wrongAnswer.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { QuestionEntity } from 'models'
 import React from 'react'
 import './quizExplanationModal.scss'
@@ -43,12 +43,12 @@ const QuizExplanationModal = ({
           <>
             {question.answers[answerIndex].isTrue ? (
               <div>
-                <Icon icon={correctAnswer} size={100} />
+                <StyledIcon icon={correctAnswer} size={100} />
                 <p className="quiz-modal-answer correct">{t('quiz.correct')}</p>
               </div>
             ) : (
               <div>
-                <Icon icon={wrongAnswer} size={100} />
+                <StyledIcon icon={wrongAnswer} size={100} />
                 <p className="quiz-modal-answer wrong">{t('quiz.wrong')}</p>
               </div>
             )}
diff --git a/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx b/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx
index 9bac2567e4a78b44b8dcf3cf0ee6234b2e75df6e..64c31a9f68eaeba845876e8e4e4a7cc58ff0da9c 100644
--- a/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx
+++ b/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx
@@ -20,7 +20,8 @@ jest.mock('react-router-dom', () => ({
 }))
 
 describe('QuizFinish', () => {
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly and go back to challenges page', async () => {
+    mockUserChallengeUpdateFlag.mockResolvedValueOnce(userChallengeData[0])
     const store = createMockEcolyoStore()
     const { container } = render(
       <Provider store={store}>
diff --git a/src/components/Quiz/QuizFinish/QuizFinish.tsx b/src/components/Quiz/QuizFinish/QuizFinish.tsx
index c2c1d8ebec6a7fa203fd2208fc38db4e75a389fa..0bbbee5f01168b58d9ff2fd8082a8e2b9772417d 100644
--- a/src/components/Quiz/QuizFinish/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish/QuizFinish.tsx
@@ -2,7 +2,7 @@ import Button from '@material-ui/core/Button'
 import starResult from 'assets/icons/visu/quiz/starResult.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeUpdateFlag } from 'enums'
 import { UserChallenge } from 'models'
 import React, { useCallback, useMemo } from 'react'
@@ -36,6 +36,7 @@ const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
     dispatch(updateUserChallengeList(userChallengeUpdated))
     navigate('/challenges')
   }
+
   return (
     <div className="quiz-container">
       <div className="quiz-finish-container">
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
index 311ec78e7b1f38a7711fd3a7df48b1bd8650c568..93bf18196d0beb418f7972788b0070d55df3b93c 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx
@@ -27,7 +27,7 @@ jest.mock(
 describe('QuizQuestion component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly with question', async () => {
+  it('should be rendered correctly with question', () => {
     const { container } = render(
       <Provider store={store}>
         <QuizQuestion userChallenge={userChallengeData[0]} />
@@ -39,6 +39,24 @@ describe('QuizQuestion component', () => {
     ).toBeFalsy()
   })
 
+  it('should be rendered correctly with loader', async () => {
+    const updateUserChallengeData = {
+      ...userChallengeData[0],
+    }
+    updateUserChallengeData.quiz.questions.forEach(
+      answer => (answer.result = UserQuestionState.CORRECT)
+    )
+    const { container } = render(
+      <Provider store={store}>
+        <QuizQuestion userChallenge={updateUserChallengeData} />
+      </Provider>
+    )
+    await waitFor(() => null, { container })
+    expect(
+      container.getElementsByClassName('question-loading')[0]
+    ).toBeInTheDocument()
+  })
+
   it('should be rendered correctly with customQuestion', async () => {
     const updateUserChallengeData = {
       ...userChallengeData[0],
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
index 4838694dc56013f3fbaba7af56b402b2bae8cfc9..c75a4404fd1d2a967d13d37159ac0e76729b821d 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestion.tsx
@@ -1,12 +1,13 @@
+import Loader from 'components/Loader/Loader'
 import { useClient } from 'cozy-client'
 import { QuestionEntity, UserChallenge } from 'models'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import QuizService from 'services/quiz.service'
 import { useAppSelector } from 'store/hooks'
+import './quizQuestion.scss'
 import QuizQuestionContent from './QuizQuestionContent'
 import QuizQuestionContentCustom from './QuizQuestionContentCustom'
-import './quizQuestion.scss'
 
 const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
   const client = useClient()
@@ -18,7 +19,11 @@ const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
   )
   const [customQuestion, setCustomQuestion] = useState<QuestionEntity>()
   const [isCustomQuest, setIsCustomQuest] = useState(!questionsIsLocked)
-  const [customQuestionLoading, setCustomQuestionLoading] = useState(false)
+
+  const mainContentRef = useRef<HTMLDivElement>(null)
+  const focusMainContent = () => {
+    setTimeout(() => mainContentRef.current?.focus(), 0)
+  }
 
   const goBack = () => {
     navigate('/challenges')
@@ -32,13 +37,9 @@ const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
         userChallenge.quiz.customQuestion,
         fluidTypes
       )
-      if (subscribed) {
-        setCustomQuestion(customQuestion)
-        setCustomQuestionLoading(false)
-      }
+      setCustomQuestion(customQuestion)
     }
-    if (isCustomQuest) {
-      setCustomQuestionLoading(true)
+    if (isCustomQuest && subscribed) {
       loadCustomQuestion()
     }
     return () => {
@@ -47,22 +48,30 @@ const QuizQuestion = ({ userChallenge }: { userChallenge: UserChallenge }) => {
   }, [client, fluidTypes, isCustomQuest, userChallenge.quiz.customQuestion])
 
   return (
-    <>
-      {isCustomQuest && customQuestion ? (
-        <QuizQuestionContentCustom
-          userChallenge={userChallenge}
-          goBack={goBack}
-          customQuestion={customQuestion}
-          isLoading={customQuestionLoading}
-        />
+    <div ref={mainContentRef} className="quiz-content" tabIndex={-1}>
+      {isCustomQuest ? (
+        <>
+          {!customQuestion ? (
+            <div className="question-loading">
+              <Loader />
+            </div>
+          ) : (
+            <QuizQuestionContentCustom
+              userChallenge={userChallenge}
+              goBack={goBack}
+              customQuestion={customQuestion}
+            />
+          )}
+        </>
       ) : (
         <QuizQuestionContent
           userChallenge={userChallenge}
           setIsCustomQuest={setIsCustomQuest}
           goBack={goBack}
+          focusCallback={focusMainContent}
         />
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx
index 707db20c957bf13a88e956b40872912e4343738a..24613141899dab79b74d474a8f10ddae3f4a677a 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx
@@ -33,6 +33,7 @@ describe('QuizQuestionContent component', () => {
           userChallenge={userChallengeData[0]}
           setIsCustomQuest={() => false}
           goBack={mockedNavigate('/challenges')}
+          focusCallback={jest.fn()}
         />
       </Provider>
     )
@@ -48,6 +49,7 @@ describe('QuizQuestionContent component', () => {
           userChallenge={userChallengeData[0]}
           setIsCustomQuest={() => false}
           goBack={mockedNavigate('/challenges')}
+          focusCallback={jest.fn()}
         />
       </Provider>
     )
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
index eb59925814374d01f1b630783c21b082cbb32db6..aa0bef5463cd8eee94d54b8fcaf05d2f1d6b2b27 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
@@ -3,7 +3,7 @@ import CloseIcon from 'assets/icons/ico/close.svg'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeUpdateFlag } from 'enums'
 import { UserChallenge } from 'models'
 import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'
@@ -17,12 +17,14 @@ interface QuizQuestionContent {
   userChallenge: UserChallenge
   setIsCustomQuest: Dispatch<SetStateAction<boolean>>
   goBack: () => void
+  focusCallback: () => void
 }
 
 const QuizQuestionContent = ({
   userChallenge,
   setIsCustomQuest,
   goBack,
+  focusCallback,
 }: QuizQuestionContent) => {
   const { t } = useI18n()
   const client = useClient()
@@ -48,7 +50,7 @@ const QuizQuestionContent = ({
     )
     setAnswerIndex(resultIndex)
     setOpenModal(true)
-    const quizUpdated = await quizService.updateUserQuiz(
+    const quizUpdated = quizService.updateUserQuiz(
       userChallenge.quiz,
       result[0].isTrue,
       questionIndex
@@ -73,22 +75,25 @@ const QuizQuestionContent = ({
     if (questionIndex !== userChallenge.quiz.questions.length - 1) {
       setQuestionIndex(questionIndex + 1)
     }
+    focusCallback()
   }, [
     questionIndex,
+    userChallenge.quiz.questions.length,
+    focusCallback,
     setIsCustomQuest,
     setQuestionIndex,
     setUserChoice,
     setOpenModal,
-    userChallenge.quiz.questions.length,
   ])
 
   return (
     <div className="quiz-container">
       <div className="question-container">
         <StyledIconButton
-          className="btn-back"
           icon={CloseIcon}
           onClick={goBack}
+          aria-label={t('quiz.accessibility.window_quit')}
+          className="btn-back"
         />
         <p className="index-question">{questionIndex + 1}/5</p>
         <p className="question text-18-bold">
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
index f467eb0beb84762b48d9741ae55403f663e06c60..9271ef602efce1995073d6e7612b0bebf283979a 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
@@ -23,9 +23,10 @@ jest.mock('services/quiz.service', () => {
   }))
 })
 
+const mockUpdateUserChallenge = jest.fn()
 jest.mock('services/challenge.service', () => {
   return jest.fn(() => ({
-    updateUserChallenge: jest.fn(),
+    updateUserChallenge: mockUpdateUserChallenge,
   }))
 })
 
@@ -38,7 +39,6 @@ describe('QuizCustomQuestionContent component', () => {
           userChallenge={userChallengeData[0]}
           customQuestion={questionEntity}
           goBack={mockHistoryPush('/challenges')}
-          isLoading={false}
         />
       </Provider>
     )
@@ -49,29 +49,14 @@ describe('QuizCustomQuestionContent component', () => {
     expect(screen.getByText(questionEntity.questionLabel)).toBeInTheDocument()
     expect(screen.getAllByRole('radio').length).toBe(3)
   })
-  it('should be rendered correctly with loader', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <QuizQuestionContentCustom
-          userChallenge={userChallengeData[0]}
-          customQuestion={questionEntity}
-          goBack={mockHistoryPush('/challenges')}
-          isLoading={true}
-        />
-      </Provider>
-    )
-    expect(
-      container.getElementsByClassName('question-loading')[0]
-    ).toBeInTheDocument()
-  })
   it('should display QuizExplanationModal when click on Button', async () => {
+    mockUpdateUserChallenge.mockResolvedValue(userChallengeData[0])
     render(
       <Provider store={store}>
         <QuizQuestionContentCustom
           userChallenge={userChallengeData[0]}
           customQuestion={questionEntity}
           goBack={mockHistoryPush('/challenges')}
-          isLoading={false}
         />
       </Provider>
     )
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
index 8e08ef5adf4be828e82f3b7c35296e20dbc76f91..e690af2d35d2fa31acc81c7933ae67b8f45e2752 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
@@ -1,10 +1,9 @@
 import Button from '@material-ui/core/Button'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
-import Loader from 'components/Loader/Loader'
 import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { UserChallengeUpdateFlag } from 'enums'
 import { QuestionEntity, UserChallenge } from 'models'
 import React, { useState } from 'react'
@@ -18,14 +17,12 @@ interface QuizQuestionContentCustomProps {
   userChallenge: UserChallenge
   goBack: () => void
   customQuestion: QuestionEntity
-  isLoading: boolean
 }
 
 const QuizQuestionContentCustom = ({
   userChallenge,
   goBack,
   customQuestion,
-  isLoading,
 }: QuizQuestionContentCustomProps) => {
   const { t } = useI18n()
   const client = useClient()
@@ -47,7 +44,7 @@ const QuizQuestionContentCustom = ({
     const result = customQuestion.answers.filter(
       answer => answer.answerLabel === userChoice
     )
-    const quizUpdated = await quizService.updateUserQuiz(
+    const quizUpdated = quizService.updateUserQuiz(
       userChallenge.quiz,
       result[0].isTrue
     )
@@ -85,31 +82,21 @@ const QuizQuestionContentCustom = ({
           {t('quiz.consumption_question')}
         </p>
 
-        {isLoading ? (
-          <div className="question-loading">
-            <Loader />
+        <p className="question text-18-bold">{customQuestion.questionLabel}</p>
+        {customQuestion.answers.map((answer, index) => (
+          <div className="answer" key={index}>
+            <input
+              type="radio"
+              id={`answer${index}`}
+              value={answer.answerLabel}
+              onChange={handleChange}
+              checked={userChoice === answer.answerLabel}
+            />
+            <label htmlFor={`answer${index}`} className="text-16-bold">
+              {answer.answerLabel}
+            </label>
           </div>
-        ) : (
-          <>
-            <p className="question text-18-bold">
-              {customQuestion.questionLabel}
-            </p>
-            {customQuestion.answers.map((answer, index) => (
-              <div className="answer" key={index}>
-                <input
-                  type="radio"
-                  id={`answer${index}`}
-                  value={answer.answerLabel}
-                  onChange={handleChange}
-                  checked={userChoice === answer.answerLabel}
-                />
-                <label htmlFor={`answer${index}`} className="text-16-bold">
-                  {answer.answerLabel}
-                </label>
-              </div>
-            ))}
-          </>
-        )}
+        ))}
       </div>
       <Button
         aria-label={t('quiz.accessibility.button_validate')}
diff --git a/src/components/Quiz/QuizQuestion/quizQuestion.scss b/src/components/Quiz/QuizQuestion/quizQuestion.scss
index cbab0ba2fc91fcab6fc0c6f47d570947dfd17849..035243a5a713a7a569c904715585d27805d1458f 100644
--- a/src/components/Quiz/QuizQuestion/quizQuestion.scss
+++ b/src/components/Quiz/QuizQuestion/quizQuestion.scss
@@ -1,89 +1,93 @@
 @import 'src/styles/base/color';
 @import 'src/styles/base/breakpoint';
 
-.quiz-container {
-  .question-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 1.5rem;
-    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
-    border-radius: 4px;
-    transition: all 300ms ease;
-    color: $white;
-    background: $grey-linear-gradient-background;
-    position: relative;
-    @media (min-width: $width-large-phone) {
-      height: 45vh;
-    }
-
-    .question-loading {
-      min-height: 13.875rem;
+.quiz-content {
+  outline: none;
+  margin: auto;
+  .quiz-container {
+    .question-container {
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
+      padding: 1.5rem;
+      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+      border-radius: 4px;
+      transition: all 300ms ease;
+      color: $white;
+      background: $grey-linear-gradient-background;
+      position: relative;
+      @media (min-width: $width-large-phone) {
+        height: 45vh;
+      }
+
+      .question-loading {
+        min-height: 13.875rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .question {
+        color: $grey-bright;
+        text-align: center;
+        margin-bottom: 2rem;
+        @media (min-width: $width-large-phone) {
+          padding: 0 1rem;
+        }
+      }
+      .question-title {
+        color: $blue-light;
+        margin-bottom: 0.5rem;
+      }
+      .btn-back {
+        color: $white;
+        background: none;
+        border: none;
+        padding: 0;
+        font-size: 1.3rem;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+      }
     }
-    .question {
-      color: $grey-bright;
+    .answer {
       text-align: center;
-      margin-bottom: 2rem;
+      width: 100%;
       @media (min-width: $width-large-phone) {
-        padding: 0 1rem;
+        max-width: 80%;
+      }
+      input[type='radio'] {
+        position: fixed;
+        opacity: 0;
+        pointer-events: none;
+      }
+      input[type='radio']:focus + label {
+        background: $blue-light;
+        color: $dark-light-2;
+        border-color: $blue-light;
+      }
+      label {
+        display: block;
+        border: 1px solid $grey-bright;
+        padding: 0.5rem;
+        margin-bottom: 1rem;
+        cursor: pointer;
+      }
+      input[type='radio']:checked + label,
+      label:hover {
+        background: $blue-radial-gradient;
+        color: $dark-light-2;
+        border-color: $blue-light;
       }
     }
-    .question-title {
-      color: $blue-light;
-      margin-bottom: 0.5rem;
-    }
-    .btn-back {
-      color: $white;
-      background: none;
-      border: none;
-      padding: 0;
-      font-size: 1.3rem;
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
-    }
-  }
-  .answer {
-    text-align: center;
-    width: 100%;
-    @media (min-width: $width-large-phone) {
-      max-width: 80%;
-    }
-    input[type='radio'] {
-      position: fixed;
-      opacity: 0;
-      pointer-events: none;
-    }
-    input[type='radio']:focus + label {
-      background: $blue-light;
-      color: $dark-light-2;
-      border-color: $blue-light;
-    }
-    label {
-      display: block;
-      border: 1px solid $grey-bright;
-      padding: 0.5rem;
-      margin-bottom: 1rem;
-      cursor: pointer;
-    }
-    input[type='radio']:checked + label,
-    label:hover {
-      background: $blue-radial-gradient;
-      color: $dark-light-2;
-      border-color: $blue-light;
+    button.validate {
+      margin-top: 1rem;
+      width: auto;
+      padding: 0.5rem 3rem;
     }
-  }
-  button.validate {
-    margin-top: 1rem;
-    width: auto;
-    padding: 0.5rem 3rem;
-  }
 
-  .index-question {
-    margin: 2rem 0 1rem;
+    .index-question {
+      margin: 2rem 0 1rem;
+    }
   }
 }
diff --git a/src/components/Quiz/QuizView.tsx b/src/components/Quiz/QuizView.tsx
index fc45df655cf53bcc4fc6851edb1b6ecb2d87a4b0..33abffc0471b1bf2679b542390fb24ecf2f769bc 100644
--- a/src/components/Quiz/QuizView.tsx
+++ b/src/components/Quiz/QuizView.tsx
@@ -9,6 +9,9 @@ import QuizBegin from './QuizBegin/QuizBegin'
 import QuizFinish from './QuizFinish/QuizFinish'
 import QuizQuestion from './QuizQuestion/QuizQuestion'
 
+/**
+ * http://ecolyo.cozy.tools:8080/#/challenges/quiz
+ */
 const QuizView = () => {
   const { currentChallenge } = useAppSelector(state => state.ecolyo.challenge)
 
diff --git a/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx b/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
index d6c0ac583c54beb4f24437b35bce4ab8f9a8e3e2..ec22b2ffc21da51aa72a09d5187cb058356da279 100644
--- a/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
+++ b/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
@@ -1,22 +1,31 @@
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
-import { useAppSelector } from 'store/hooks'
+import { useNavigate } from 'react-router-dom'
+import { showReleaseNotes } from 'store/global/global.slice'
+import { useAppDispatch, useAppSelector } from 'store/hooks'
 import './ReleaseNotesModal.scss'
 
-interface ReleaseNotesModalProps {
-  open: boolean
-  handleCloseClick: () => void
-}
-
-const ReleaseNotesModal = ({
-  open,
-  handleCloseClick,
-}: ReleaseNotesModalProps) => {
+const ReleaseNotesModal = ({ open }: { open: boolean }) => {
   const { t } = useI18n()
+  const navigate = useNavigate()
+  const dispatch = useAppDispatch()
   const { releaseNotes } = useAppSelector(state => state.ecolyo.global)
 
+  const handleCloseClick = () => {
+    dispatch(
+      showReleaseNotes({
+        show: false,
+        notes: releaseNotes.notes,
+        redirectLink: releaseNotes.redirectLink,
+      })
+    )
+    if (releaseNotes.redirectLink) {
+      navigate(releaseNotes.redirectLink)
+    }
+  }
+
   return (
     <Dialog
       open={open}
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index a6cdf99bbd9d30ea9d8342544d664a61d6b70e0f..a1a55f5ce7708c662e9da033e65de53b044f09fe 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -89,7 +89,6 @@ const AppRoutes = ({ termsStatus }: { termsStatus: TermsStatus }) => {
             <Route path="/ecogestures" element={<EcogestureTabsView />} />
             <Route path="/options/legalnotice" element={<LegalNoticeView />} />
             <Route path="/options/gcu" element={<GCUView />} />
-            <Route path="/options/:connectParam" element={<OptionsView />} />
             <Route path="/options" element={<OptionsView />} />
             <Route path="/analysis" element={<AnalysisView />} />
             <Route path="/profiletype" element={<ProfileTypeView />} />
diff --git a/src/components/SkipLink/SkipLink.scss b/src/components/SkipLink/SkipLink.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c893a4a3ac29691269d6784ca0bdd345db135036
--- /dev/null
+++ b/src/components/SkipLink/SkipLink.scss
@@ -0,0 +1,18 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/z-index';
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: $dark;
+  color: $white;
+  border: $white;
+  padding: 8px;
+  z-index: $skip-link;
+  text-decoration: 'none';
+  transition: top 0.3s;
+  &:focus {
+    top: 0;
+  }
+}
diff --git a/src/components/SkipLink/SkipLink.tsx b/src/components/SkipLink/SkipLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1f1942d343563da5b5700a1923ed40ea9c63c4aa
--- /dev/null
+++ b/src/components/SkipLink/SkipLink.tsx
@@ -0,0 +1,23 @@
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+import React from 'react'
+import './SkipLink.scss'
+
+const SkipLink = () => {
+  const { t } = useI18n()
+
+  const handleSkip = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    const mainContent = document.getElementById('app-content')
+    if (mainContent) {
+      mainContent.focus()
+    }
+  }
+
+  return (
+    <button className="skip-link" onClick={handleSkip}>
+      {t('common.accessibility.skip_link')}
+    </button>
+  )
+}
+
+export default SkipLink
diff --git a/src/components/Splash/SplashRoot.spec.tsx b/src/components/Splash/SplashRoot.spec.tsx
index 3f57b513afae955128380a203e95c612e23b5b07..710e35610f799a1c78a8450de3e00b4812446428 100644
--- a/src/components/Splash/SplashRoot.spec.tsx
+++ b/src/components/Splash/SplashRoot.spec.tsx
@@ -12,7 +12,7 @@ jest.mock('@sentry/react', () => ({
 
 describe('SplashRoot component', () => {
   const store = createMockEcolyoStore()
-  it('should be rendered correctly', async () => {
+  it('should be rendered correctly', () => {
     const { container } = render(
       <Provider store={store}>
         <SplashRoot>children</SplashRoot>
diff --git a/src/components/Splash/SplashRoot.tsx b/src/components/Splash/SplashRoot.tsx
index 068f256c176eb0af7d04ddf2f29bcedbb352df2f..e6aa2b0f90bca5441c7bdfc73494d0e182cbb2e4 100644
--- a/src/components/Splash/SplashRoot.tsx
+++ b/src/components/Splash/SplashRoot.tsx
@@ -19,7 +19,6 @@ import {
   PartnersInfo,
   Profile,
   ProfileType,
-  UserChallenge,
 } from 'models'
 import React, { ReactNode, useCallback, useEffect, useState } from 'react'
 import ActionService from 'services/action.service'
@@ -105,7 +104,7 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
 
   /** Process customPopup and enable it if activated */
   const processCustomPopup = useCallback(
-    async (profile: Profile, customPopup: CustomPopup) => {
+    (profile: Profile, customPopup: CustomPopup) => {
       try {
         if (
           today !== profile?.customPopupDate.toISO() &&
@@ -124,7 +123,7 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
    * For each fluid, set partnersIssue to true if notification is activated and seenDate < today
    */
   const processPartnersStatus = useCallback(
-    async (profile: Profile, partnersInfo: PartnersInfo) => {
+    (profile: Profile, partnersInfo: PartnersInfo) => {
       try {
         if (
           partnersInfo.notification_activated &&
@@ -182,180 +181,192 @@ const SplashRoot = ({ fadeTimer = 1000, children }: SplashRootProps) => {
 
   useEffect(() => {
     let subscribed = true
-    async function loadData() {
-      const initializationService = new InitializationService(
-        client,
-        setInitStep,
-        setInitStepErrors
-      )
-      const customPopupService = new CustomPopupService(client)
-      const partnersInfoService = new PartnersInfoService(client)
-      const ms = new MigrationService(client, setInitStepErrors)
+    function loadData() {
       const startTime = performance.now()
-      const transaction = Sentry.startTransaction({ name: 'Initialize app' })
-      try {
-        // init Terms
-        const termsStatus = await initializationService.initConsent()
-        if (subscribed) dispatch(updateTermsStatus(termsStatus))
-
-        // Init fluidPrices
-        await initializationService.initFluidPrices()
-
-        // Init profile and update ecogestures, challenges, analysis
-        const profile = await initializationService.initProfile()
-        const profileType = await initializationService.initProfileType()
-        const profileEcogesture =
-          await initializationService.initProfileEcogesture()
-
-        const migrationsResult = await ms.runMigrations(migrations)
-        // Init last release notes when they exist
-        dispatch(
-          showReleaseNotes({
-            notes: migrationsResult.notes,
-            redirectLink: migrationsResult.redirectLink,
-            show: migrationsResult.show,
-          })
+      Sentry.startSpan({ name: 'Initialize app' }, async () => {
+        const initializationService = new InitializationService(
+          client,
+          setInitStepErrors
         )
-        if (subscribed && profile) {
-          setValidExploration(UserExplorationID.EXPLORATION007)
+        const customPopupService = new CustomPopupService(client)
+        const partnersInfoService = new PartnersInfoService(client)
+        const ms = new MigrationService(client, setInitStepErrors)
+        try {
+          console.group('Initialization logs')
+          // Run init steps in parallel
+          setInitStep(InitSteps.PROFILE)
           const [
-            duelHash,
-            quizHash,
-            challengeHash,
-            explorationHash,
-            analysisResult,
+            termsStatus,
+            ,
+            profile,
+            profileType,
+            profileEcogesture,
+            fluidStatus,
           ] = await Promise.all([
-            initializationService.initDuelEntity(profile.duelHash),
-            initializationService.initQuizEntity(profile.quizHash),
-            initializationService.initExplorationEntity(profile.challengeHash),
-            initializationService.initChallengeEntity(profile.explorationHash),
-            initializationService.initAnalysis(profile),
+            initializationService.initConsent(),
+            initializationService.initFluidPrices(),
+            initializationService.initProfile(),
+            initializationService.initProfileType(),
+            initializationService.initProfileEcogesture(),
+            initializationService.initFluidStatus(),
           ])
-          const updatedProfile: Partial<Profile> = {
-            duelHash,
-            quizHash,
-            challengeHash,
-            explorationHash,
-            monthlyAnalysisDate: analysisResult.monthlyAnalysisDate,
-            haveSeenLastAnalysis: analysisResult.haveSeenLastAnalysis,
-          }
-          dispatch(updateProfile(updatedProfile))
-          dispatch(setAnalysisMonth(analysisResult.monthlyAnalysisDate))
-          if (profileType) {
-            await loadProfileType(profileType)
-          }
-          if (profileEcogesture) {
-            dispatch(setProfileEcogesture(profileEcogesture))
-          }
-          dispatch(toggleAnalysisNotification(!profile.haveSeenLastAnalysis))
-        }
-        // Init Fluid status && lastDate for the chart
-        const fluidStatus = await initializationService.initFluidStatus()
-        if (subscribed) {
-          dispatch(setFluidStatus(fluidStatus))
-          let lastDataDate: DateTime | null = DateTime.fromISO('0001-01-01')
-          for (const fluid of fluidStatus) {
-            if (fluid.lastDataDate && fluid.lastDataDate > lastDataDate) {
-              lastDataDate = fluid.lastDataDate
+          if (subscribed) dispatch(updateTermsStatus(termsStatus))
+
+          setInitStep(InitSteps.MIGRATION)
+          const migrationsResult = await ms.runMigrations(migrations)
+          // Init last release notes when they exist
+          dispatch(
+            showReleaseNotes({
+              notes: migrationsResult.notes,
+              redirectLink: migrationsResult.redirectLink,
+              show: migrationsResult.show,
+            })
+          )
+          if (subscribed && profile) {
+            setValidExploration(UserExplorationID.EXPLORATION007)
+            setInitStep(InitSteps.CHALLENGES)
+            const [
+              duelHash,
+              quizHash,
+              challengeHash,
+              explorationHash,
+              analysisResult,
+            ] = await Promise.all([
+              initializationService.initDuelEntity(profile.duelHash),
+              initializationService.initQuizEntity(profile.quizHash),
+              initializationService.initExplorationEntity(
+                profile.challengeHash
+              ),
+              initializationService.initChallengeEntity(
+                profile.explorationHash
+              ),
+              initializationService.initAnalysis(profile),
+            ])
+            const updatedProfile: Partial<Profile> = {
+              duelHash,
+              quizHash,
+              challengeHash,
+              explorationHash,
+              monthlyAnalysisDate: analysisResult.monthlyAnalysisDate,
+              haveSeenLastAnalysis: analysisResult.haveSeenLastAnalysis,
+            }
+            dispatch(updateProfile(updatedProfile))
+            dispatch(setAnalysisMonth(analysisResult.monthlyAnalysisDate))
+            if (profileType) {
+              await loadProfileType(profileType)
+            }
+            if (profileEcogesture) {
+              dispatch(setProfileEcogesture(profileEcogesture))
             }
+            dispatch(toggleAnalysisNotification(!profile.haveSeenLastAnalysis))
           }
-        }
-        // Init Challenge
-        const userChallengeList =
-          await initializationService.initUserChallenges(fluidStatus)
-        if (subscribed) {
-          dispatch(setUserChallengeList(userChallengeList))
-          const filteredCurrentOngoingChallenge = userChallengeList.filter(
-            challenge => challenge.state === UserChallengeState.ONGOING
-          )
-          // Set Notification if exploration state is notification
-          if (
-            filteredCurrentOngoingChallenge[0]?.exploration.state ===
-            UserExplorationState.NOTIFICATION
-          ) {
-            dispatch(toggleChallengeExplorationNotification(true))
+
+          // Process fluids status
+          if (subscribed) {
+            dispatch(setFluidStatus(fluidStatus))
+            let lastDataDate = DateTime.fromISO('0001-01-01')
+            for (const fluid of fluidStatus) {
+              if (fluid.lastDataDate && fluid.lastDataDate > lastDataDate) {
+                lastDataDate = fluid.lastDataDate
+              }
+            }
           }
-          // Set action to notification if action is accomplished
-          if (
-            filteredCurrentOngoingChallenge[0]?.action.state ===
-            UserActionState.ONGOING
-          ) {
-            const actionService = new ActionService(client)
-            const updatedUserChallenge: UserChallenge | null =
-              await actionService.isActionDone(
+          // Init Challenge
+          const userChallengeList =
+            await initializationService.initUserChallenges(fluidStatus)
+          if (subscribed) {
+            dispatch(setUserChallengeList(userChallengeList))
+            const filteredCurrentOngoingChallenge = userChallengeList.filter(
+              challenge => challenge.state === UserChallengeState.ONGOING
+            )
+            // Set Notification if exploration state is notification
+            if (
+              filteredCurrentOngoingChallenge[0]?.exploration.state ===
+              UserExplorationState.NOTIFICATION
+            ) {
+              dispatch(toggleChallengeExplorationNotification(true))
+            }
+            // Set action to notification if action is accomplished
+            if (
+              filteredCurrentOngoingChallenge[0]?.action.state ===
+              UserActionState.ONGOING
+            ) {
+              const actionService = new ActionService(client)
+              const updatedUserChallenge = await actionService.isActionDone(
                 filteredCurrentOngoingChallenge[0]
               )
-            if (updatedUserChallenge) {
-              dispatch(updateUserChallengeList(updatedUserChallenge))
+              if (updatedUserChallenge) {
+                dispatch(updateUserChallengeList(updatedUserChallenge))
+              }
             }
-          }
-          // Set Notification if action state is notification
-          if (
-            filteredCurrentOngoingChallenge[0]?.action.state ===
-            UserActionState.NOTIFICATION
-          ) {
-            dispatch(toggleChallengeActionNotification(true))
-          }
-          const filteredCurrentDuelChallenge = userChallengeList.filter(
-            challenge => challenge.state === UserChallengeState.DUEL
-          )
-          if (
-            filteredCurrentDuelChallenge[0]?.duel.state ===
-            UserDuelState.ONGOING
-          ) {
-            const { updatedUserChallenge, dataloads } =
-              await initializationService.initDuelProgress(
-                filteredCurrentDuelChallenge[0]
-              )
-            if (subscribed) {
-              dispatch(
-                setChallengeConsumption({
-                  userChallenge: updatedUserChallenge,
-                  currentDataload: dataloads,
-                })
-              )
-              // Check is duel is done and display notification
-              const challengeService = new ChallengeService(client)
-              const { isDone } = await challengeService.isChallengeDone(
-                updatedUserChallenge,
-                dataloads
-              )
-              dispatch(toggleChallengeDuelNotification(isDone))
+            // Set Notification if action state is notification
+            if (
+              filteredCurrentOngoingChallenge[0]?.action.state ===
+              UserActionState.NOTIFICATION
+            ) {
+              dispatch(toggleChallengeActionNotification(true))
+            }
+            const filteredCurrentDuelChallenge = userChallengeList.filter(
+              challenge => challenge.state === UserChallengeState.DUEL
+            )
+            if (
+              filteredCurrentDuelChallenge[0]?.duel.state ===
+              UserDuelState.ONGOING
+            ) {
+              const { updatedUserChallenge, dataloads } =
+                await initializationService.initDuelProgress(
+                  filteredCurrentDuelChallenge[0]
+                )
+              if (subscribed) {
+                dispatch(
+                  setChallengeConsumption({
+                    userChallenge: updatedUserChallenge,
+                    currentDataload: dataloads,
+                  })
+                )
+                // Check is duel is done and display notification
+                const challengeService = new ChallengeService(client)
+                const { isDone } = challengeService.isChallengeDone(
+                  updatedUserChallenge,
+                  dataloads
+                )
+                dispatch(toggleChallengeDuelNotification(isDone))
+              }
             }
           }
-        }
 
-        /**
-         * Load custom popup and partners info synchronously so these treatments don't block the loading
-         */
-        customPopupService.getCustomPopup().then(async customPopup => {
-          if (profile && customPopup) {
-            await processCustomPopup(profile, customPopup)
+          /**
+           * Load custom popup and partners info synchronously so these treatments don't block the loading
+           */
+          customPopupService.getCustomPopup().then(customPopup => {
+            if (profile && customPopup) {
+              processCustomPopup(profile, customPopup)
+            }
+          })
+          partnersInfoService.getPartnersInfo().then(async partnersInfo => {
+            if (profile && partnersInfo) {
+              await processFluidsStatus(profile, partnersInfo)
+              processPartnersStatus(profile, partnersInfo)
+            }
+          })
+
+          if (subscribed) {
+            logDuration('[Initialization] Finished successfully !', startTime)
+            setState(prev => ({
+              ...prev,
+              splashStart: true,
+            }))
           }
-        })
-        partnersInfoService.getPartnersInfo().then(async partnersInfo => {
-          if (profile && partnersInfo) {
-            await processFluidsStatus(profile, partnersInfo)
-            await processPartnersStatus(profile, partnersInfo)
+        } catch (error: any) {
+          if (error.message === 'Failed to fetch' && !initStepErrors) {
+            setInitStepErrors(InitStepsErrors.UNKNOWN_ERROR)
           }
-        })
-
-        if (subscribed) {
-          logDuration('[Initialization] Finished successfully !', startTime)
-          setState(prev => ({
-            ...prev,
-            splashStart: true,
-          }))
+          logApp.error(`[Initialization] Error : ${error}`)
+          Sentry.captureException(error)
+        } finally {
+          console.groupEnd()
         }
-      } catch (error: any) {
-        if (error.message === 'Failed to fetch' && !initStepErrors) {
-          setInitStepErrors(InitStepsErrors.UNKNOWN_ERROR)
-        }
-        logApp.error(`[Initialization] Error : ${error}`)
-        Sentry.captureException(error)
-      } finally {
-        transaction.finish()
-      }
+      })
     }
     if (!initStepErrors) loadData()
     return () => {
diff --git a/src/components/Splash/SplashScreen.spec.tsx b/src/components/Splash/SplashScreen.spec.tsx
index a8c692fbc40679130cd74dfd6eb681e79e4f67ed..44ec12deeb16a415bf71a390bd5743de3d2ff3d6 100644
--- a/src/components/Splash/SplashScreen.spec.tsx
+++ b/src/components/Splash/SplashScreen.spec.tsx
@@ -5,7 +5,7 @@ import SplashScreen from './SplashScreen'
 
 describe('SplashScreen component', () => {
   it('should be rendered correctly', () => {
-    const { container } = render(<SplashScreen initStep={InitSteps.CONSENT} />)
+    const { container } = render(<SplashScreen initStep={InitSteps.PROFILE} />)
     expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index e33ca2b88c1d6fb64870a10df5c959da7239ed4b..c286acabee740cc9513a4d83d10e364204e50cad 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -1,6 +1,6 @@
 import logoLoading from 'assets/anims/logoLoading.gif'
 import logos from 'assets/png/logos_partenaires.svg'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { InitSteps } from 'models'
 import React from 'react'
 import './splashScreen.scss'
@@ -8,8 +8,10 @@ import './splashScreen.scss'
 const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
   const { t } = useI18n()
   const getProgress = () => {
-    const total = Object.values(InitSteps).length / 2
-    const progress = initStep === 0 ? 10 : Math.round((initStep / total) * 100)
+    const currentIndex = Object.values(InitSteps).indexOf(initStep)
+    const progress = Math.round(
+      (currentIndex / Object.values(InitSteps).length) * 100
+    )
     return progress - 90 /* hack to make the progress bar start way left */
   }
   return (
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
index eaec77ac5e95732a1ab252a0ec5bd05ae03130fa..d7d1984b287293c15f49f5c7477af1bf7d94053b 100644
--- a/src/components/Splash/SplashScreenError.tsx
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -1,7 +1,7 @@
 import Button from '@material-ui/core/Button'
 import ecolyoIcon from 'assets/icons/ico/ecolyo.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { InitStepsErrors } from 'models'
 import React from 'react'
 import './splashScreen.scss'
diff --git a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
index 1cc016b6bf9ee4e84abc6eba83474d49907a400e..429a52a266923551930f2a5a2f744c0491f7f904 100644
--- a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`SplashRoot component should be rendered correctly 1`] = `
           >
             <div
               class="splash-progress-bar-content"
-              style="left: -73%;"
+              style="left: -90%;"
             />
           </div>
         </div>
@@ -35,7 +35,7 @@ exports[`SplashRoot component should be rendered correctly 1`] = `
       <div
         class="step-label text-18-normal"
       >
-        splashscreen.step.1
+        splashscreen.step.profile
       </div>
       <div
         class="splash-logos-container"
@@ -83,7 +83,7 @@ exports[`SplashRoot component should render the error screen 1`] = `
         <div
           class="splash-error-text text-18-normal"
         >
-          splashscreen.consent_error
+          splashscreen.consos_error
         </div>
       </div>
     </div>
diff --git a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
index fee381e60a027c591bb21d19cc7a20a4f0d565cf..9d42bdb596f1565cc9c83da65fd4605e9b8786ad 100644
--- a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
@@ -23,7 +23,7 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
         >
           <div
             class="splash-progress-bar-content"
-            style="left: -73%;"
+            style="left: -90%;"
           />
         </div>
       </div>
@@ -31,7 +31,7 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
     <div
       class="step-label text-18-normal"
     >
-      splashscreen.step.1
+      splashscreen.step.profile
     </div>
     <div
       class="splash-logos-container"
diff --git a/src/components/Terms/CGUModal.tsx b/src/components/Terms/CGUModal.tsx
index a5ae234d15802ee66227cec1f37ce71bed6d6084..e7c0d595384cce2e6b480df3ee1281ff4dff0230 100644
--- a/src/components/Terms/CGUModal.tsx
+++ b/src/components/Terms/CGUModal.tsx
@@ -1,9 +1,9 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import GCUContent from 'components/Options/GCU/GCUContent'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './termsView.scss'
 
@@ -26,13 +26,12 @@ const CGUModal = ({ open, handleCloseClick }: CGUModalProps) => {
       <div id="accessibility-title">
         {t('feedback.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <GCUContent />
       <Button
         aria-label={t('gcu_modal.accessibility.button_accept')}
diff --git a/src/components/Terms/DataShareConsentContent.spec.tsx b/src/components/Terms/DataShareConsentContent.spec.tsx
index d2e1baab73a768707a7f3ebd2a12facf01663965..5b0a587b239f2da4ea389dba8bd620edc68cda4c 100644
--- a/src/components/Terms/DataShareConsentContent.spec.tsx
+++ b/src/components/Terms/DataShareConsentContent.spec.tsx
@@ -1,13 +1,13 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import { createMockEcolyoStore, mockProfileState } from 'tests/__mocks__/store'
 import DataShareConsentContent from './DataShareConsentContent'
 
 describe('DataShareConsentContent component', () => {
   it('should be rendered correctly with first connexion text', () => {
     const store = createMockEcolyoStore({
-      profile: { isFirstConnection: true },
+      profile: { ...mockProfileState, isFirstConnection: true },
     })
     const { container } = render(
       <Provider store={store}>
@@ -18,7 +18,7 @@ describe('DataShareConsentContent component', () => {
   })
   it('should be rendered correctly without first connexion text', () => {
     const store = createMockEcolyoStore({
-      profile: { isFirstConnection: false },
+      profile: { ...mockProfileState, isFirstConnection: false },
     })
     const { container } = render(
       <Provider store={store}>
diff --git a/src/components/Terms/DataShareConsentContent.tsx b/src/components/Terms/DataShareConsentContent.tsx
index 97e17a7abb99a7e0e5fc8b9bef177412afe13654..4f93b0955b8abecd581cdfc11ade2d8cb344f32c 100644
--- a/src/components/Terms/DataShareConsentContent.tsx
+++ b/src/components/Terms/DataShareConsentContent.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import { useAppSelector } from 'store/hooks'
 import './termsView.scss'
@@ -15,9 +15,12 @@ const DataShareConsentContent = () => {
             ? t('dataShare.title1')
             : t('dataShare.title1Update')}
         </h1>
-        {!isFirstConnection && (
-          <p className="text-14-normal">{t('dataShare.title2Update')}</p>
-        )}
+        <p className="text-14-normal">
+          {isFirstConnection
+            ? t('dataShare.title2')
+            : t('dataShare.title2Update')}
+        </p>
+
         <p className="text-14-normal">{t('dataShare.part1')}</p>
         <p className="text-14-normal">{t('dataShare.part2')}</p>
         <p className="text-14-normal">{t('dataShare.part3')}</p>
diff --git a/src/components/Terms/LegalNoticeModal.tsx b/src/components/Terms/LegalNoticeModal.tsx
index 1dce2e13d0b262d18aacfd5b4e31e2f6a9044425..b06ebc982203c8639154192d35ca655ff5071a1f 100644
--- a/src/components/Terms/LegalNoticeModal.tsx
+++ b/src/components/Terms/LegalNoticeModal.tsx
@@ -1,9 +1,9 @@
-import { Button, IconButton } from '@material-ui/core'
+import { Button } from '@material-ui/core'
 import Dialog from '@material-ui/core/Dialog'
 import CloseIcon from 'assets/icons/ico/close.svg'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import LegalNoticeContent from 'components/Options/LegalNotice/LegalNoticeContent'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './termsView.scss'
 
@@ -28,13 +28,12 @@ const LegalNoticeModal = ({
       }}
     >
       <div id="accessibility-title">{t('legal.title_legal')}</div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={handleCloseClick}
         aria-label={t('feedback.accessibility.button_close')}
         className="modal-paper-close-button"
-        onClick={handleCloseClick}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <LegalNoticeContent />
       <Button
         aria-label={t('gcu_modal.accessibility.button_accept')}
diff --git a/src/components/Terms/MinorUpdateContent.tsx b/src/components/Terms/MinorUpdateContent.tsx
index 1633b98d3c150676afdcd9626411b1e24557c4d4..bc1114f3cab83d7178c69c569cfe3d29ec4addb0 100644
--- a/src/components/Terms/MinorUpdateContent.tsx
+++ b/src/components/Terms/MinorUpdateContent.tsx
@@ -1,4 +1,4 @@
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React from 'react'
 import './termsView.scss'
 
diff --git a/src/components/Terms/TermsView.spec.tsx b/src/components/Terms/TermsView.spec.tsx
index 98d0aae76563e2cabe38caf2240088104e408396..0c9e0a9c5e324ea38e73d2918bd4f424bfc2aab5 100644
--- a/src/components/Terms/TermsView.spec.tsx
+++ b/src/components/Terms/TermsView.spec.tsx
@@ -3,7 +3,11 @@ import { userEvent } from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as storeHooks from 'store/hooks'
-import { createMockEcolyoStore } from 'tests/__mocks__/store'
+import {
+  createMockEcolyoStore,
+  mockGlobalState,
+  mockProfileState,
+} from 'tests/__mocks__/store'
 import { mockUpToDateTerm } from 'tests/__mocks__/termsData.mock'
 import TermsView from './TermsView'
 
@@ -40,6 +44,36 @@ describe('TermsView component', () => {
     await waitFor(() => null, { container })
     expect(container).toMatchSnapshot()
   })
+
+  it('should open CGU modal', async () => {
+    render(
+      <Provider store={store}>
+        <TermsView />
+      </Provider>
+    )
+    await act(async () => {
+      await userEvent.click(
+        screen.getByRole('button', {
+          name: 'dataShare.validCGU_button',
+        })
+      )
+    })
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('should open legal notice modal', async () => {
+    render(
+      <Provider store={store}>
+        <TermsView />
+      </Provider>
+    )
+    await act(async () => {
+      await userEvent.click(
+        screen.getByRole('button', { name: 'dataShare.validLegal_button' })
+      )
+    })
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
   it('should be unable to click "validate" button first then enable checkboxes and valid consent', async () => {
     mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm)
     const { container } = render(
@@ -62,34 +96,45 @@ describe('TermsView component', () => {
       await userEvent.click(acceptButton)
     })
 
-    expect(mockAppDispatch).toHaveBeenCalledTimes(3)
+    expect(mockAppDispatch).toHaveBeenCalledTimes(4)
   })
 
-  it('should open CGU modal', async () => {
-    render(
-      <Provider store={store}>
+  it('should not display the newsletter checkbox if already subscribed', async () => {
+    const storeSubscribed = createMockEcolyoStore({
+      global: {
+        ...mockGlobalState,
+        termsStatus: { accepted: false, versionType: 'init' },
+      },
+      profile: { ...mockProfileState, sendAnalysisNotification: true },
+    })
+
+    const { container } = render(
+      <Provider store={storeSubscribed}>
         <TermsView />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole('button', { name: 'dataShare.validCGU_button' })
-      )
-    })
-    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    await waitFor(() => null, { container })
+
+    const [, , boxNewsletter] = screen.getAllByRole('checkbox')
+    expect(boxNewsletter).toBeUndefined()
   })
 
-  it('should open legal notice modal', async () => {
-    render(
-      <Provider store={store}>
+  it('should display the newsletter checkbox if not subscribed', async () => {
+    const storeNotSubscribed = createMockEcolyoStore({
+      global: {
+        ...mockGlobalState,
+        termsStatus: { accepted: false, versionType: 'init' },
+      },
+      profile: { ...mockProfileState, sendAnalysisNotification: false },
+    })
+    const { container } = render(
+      <Provider store={storeNotSubscribed}>
         <TermsView />
       </Provider>
     )
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole('button', { name: 'dataShare.validLegal_button' })
-      )
-    })
-    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    await waitFor(() => null, { container })
+
+    const [, , boxNewsletter] = screen.getAllByRole('checkbox')
+    expect(boxNewsletter).toBeInTheDocument()
   })
 })
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index d7262d8fc8f6677f3b65914683fed9701ce294e0..2fe23fa17f37b8dd1f728184ef9850f3a4540526 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -1,11 +1,12 @@
 import { Button } from '@material-ui/core'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useCallback, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import TermsService from 'services/terms.service'
 import { updateTermsStatus } from 'store/global/global.slice'
 import { useAppDispatch, useAppSelector } from 'store/hooks'
+import { updateProfile } from 'store/profile/profile.slice'
 import CGUModal from './CGUModal'
 import DataShareConsentContent from './DataShareConsentContent'
 import LegalNoticeModal from './LegalNoticeModal'
@@ -17,7 +18,11 @@ const TermsView = () => {
   const client = useClient()
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
-  const { termsStatus } = useAppSelector(state => state.ecolyo.global)
+  const {
+    global: { termsStatus },
+    profile: { sendAnalysisNotification },
+  } = useAppSelector(state => state.ecolyo)
+  const [acceptNewsletter, setAcceptNewsletter] = useState(false)
   const [GCUValidation, setGCUValidation] = useState(false)
   const [dataConsentValidation, setDataConsentValidation] = useState(false)
   const [openCGUModal, setOpenCGUModal] = useState(false)
@@ -34,8 +39,12 @@ const TermsView = () => {
         })
       )
     }
+
+    if (acceptNewsletter) {
+      dispatch(updateProfile({ sendAnalysisNotification: true }))
+    }
     navigate('/consumption')
-  }, [dispatch, client, navigate])
+  }, [client, acceptNewsletter, navigate, dispatch])
 
   return (
     <div className="terms-wrapper">
@@ -44,24 +53,25 @@ const TermsView = () => {
         <>
           <div className="terms-content">
             <DataShareConsentContent />
-            <label className="inline">
+            <label htmlFor="dataConsent" className="inline">
               <input
+                id="dataConsent"
                 type="checkbox"
-                name="Data-consent-validation"
                 className="inputCheckbox"
                 onChange={e => setDataConsentValidation(e.target.checked)}
                 checked={dataConsentValidation}
+                required
               />
               {t('dataShare.validDataConsent')}
             </label>
-            <label className="inline">
+            <label htmlFor="gcu" className="inline">
               <input
                 id="gcu"
                 type="checkbox"
-                name="GCU-validation"
                 className="inputCheckbox"
                 onChange={e => setGCUValidation(e.target.checked)}
                 checked={GCUValidation}
+                required
               />
               <div>
                 <span>{t('dataShare.validCGU')}</span>
@@ -84,6 +94,20 @@ const TermsView = () => {
                 <span>{t('dataShare.validLegal2')}</span>
               </div>
             </label>
+            {!sendAnalysisNotification && (
+              <label htmlFor="newsletter" className="inline">
+                <input
+                  id="newsletter"
+                  type="checkbox"
+                  className="inputCheckbox"
+                  onChange={e => setAcceptNewsletter(e.target.checked)}
+                  checked={acceptNewsletter}
+                />
+                <div>
+                  <span>{t('dataShare.acceptNewsletter')}</span>
+                </div>
+              </label>
+            )}
           </div>
           <div className="terms-footer">
             <Button
@@ -102,11 +126,7 @@ const TermsView = () => {
             <MinorUpdateContent />
           </div>
           <div className="terms-footer">
-            <Button
-              aria-label={t('minorUpdate.button')}
-              onClick={handleTermValidate}
-              className="btnPrimary"
-            >
+            <Button onClick={handleTermValidate} className="btnPrimary">
               {t('minorUpdate.button')}
             </Button>
           </div>
diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
index a2fff83b060e8eb574459d9e44ff77973dadaa83..fba795cb09444cde38151b2c62da860d749f20c1 100644
--- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -149,11 +150,6 @@ exports[`CGUModal component should be rendered correctly 1`] = `
             >
               gcu.content.part3_3
             </p>
-            <p
-              class="text-14-normal"
-            >
-              gcu.content.part3_4
-            </p>
             <div
               class="gcu-content-part-title text-15-normal"
             >
diff --git a/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap b/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
index 69141d0536a316b3162f78c838aab7612e51e4a4..1a3d6f325acb6475bb6df19011318675a2c9a2f8 100644
--- a/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap
@@ -13,6 +13,11 @@ exports[`DataShareConsentContent component should be rendered correctly with fir
       >
         dataShare.title1
       </h1>
+      <p
+        class="text-14-normal"
+      >
+        dataShare.title2
+      </p>
       <p
         class="text-14-normal"
       >
diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
index 2f134b674a199fe9c243f1a07083daad1b0f2310..12f39a089ab591baf0fda9b7c671d1807d647f13 100644
--- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
index 0783bbe8bd4baac1ffc15c47ee7fddf4c20c265d..7652987e460702ec4bd09dd8ecc41dc71c248a0b 100644
--- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
@@ -102,21 +102,24 @@ exports[`TermsView component should be rendered correctly 1`] = `
       </div>
       <label
         class="inline"
+        for="dataConsent"
       >
         <input
           class="inputCheckbox"
-          name="Data-consent-validation"
+          id="dataConsent"
+          required=""
           type="checkbox"
         />
         dataShare.validDataConsent
       </label>
       <label
         class="inline"
+        for="gcu"
       >
         <input
           class="inputCheckbox"
           id="gcu"
-          name="GCU-validation"
+          required=""
           type="checkbox"
         />
         <div>
diff --git a/src/components/TotalConsumption/TotalConsumption.tsx b/src/components/TotalConsumption/TotalConsumption.tsx
index eec9e9ab7730e222d0f969a3339c9e75f4d3548a..75959c1e99cef1fc63ed720fc6678189e8de628f 100644
--- a/src/components/TotalConsumption/TotalConsumption.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.tsx
@@ -72,7 +72,7 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
   )
 
   useEffect(() => {
-    let isMounted = true
+    let subscribed = true
     const fetchTotal = async () => {
       await computeTotal(currentDatachart.actualData, setTotalValue)
       if (currentDatachart.comparisonData) {
@@ -82,9 +82,9 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
         )
       }
     }
-    isMounted && fetchTotal()
+    subscribed && fetchTotal()
     return () => {
-      isMounted = false
+      subscribed = false
     }
   }, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])
 
diff --git a/src/components/WelcomeModal/WelcomeModal.tsx b/src/components/WelcomeModal/WelcomeModal.tsx
index c61135791fcd1117de71f4923c99973b5ab691dd..b1fdea23c244792b15525c0951ef1675d336ac79 100644
--- a/src/components/WelcomeModal/WelcomeModal.tsx
+++ b/src/components/WelcomeModal/WelcomeModal.tsx
@@ -1,10 +1,11 @@
-import { Button, Dialog, IconButton } from '@material-ui/core'
+import { Button, Dialog } from '@material-ui/core'
 import CloseIcon from 'assets/icons/ico/close.svg'
 import PartnersConsentIcon from 'assets/icons/visu/onboarding/partners_consent.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
 import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
 import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import React, { useCallback } from 'react'
 import EnvironmentService from 'services/environment.service'
 import MailService from 'services/mail.service'
@@ -21,7 +22,7 @@ const WelcomeModal = ({ open }: { open: boolean }) => {
   const dispatch = useAppDispatch()
   const { instanceSettings } = useUserInstanceSettings()
 
-  const setWelcomeModalViewed = useCallback(async () => {
+  const setWelcomeModalViewed = useCallback(() => {
     const mailService = new MailService()
     let username = ''
 
@@ -79,13 +80,12 @@ const WelcomeModal = ({ open }: { open: boolean }) => {
       <div id="accessibility-title">
         {t('onboarding.welcomeModal.accessibility.window_title')}
       </div>
-      <IconButton
+      <StyledIconButton
+        icon={CloseIcon}
+        onClick={setWelcomeModalViewed}
         aria-label={t('onboarding.welcomeModal.accessibility.button_valid')}
         className="modal-paper-close-button"
-        onClick={setWelcomeModalViewed}
-      >
-        <Icon icon={CloseIcon} size={16} />
-      </IconButton>
+      />
       <div className="info">
         <h1 className="info-header text-24-bold">
           {t('onboarding.welcomeModal.title')}
@@ -95,7 +95,7 @@ const WelcomeModal = ({ open }: { open: boolean }) => {
           <p>{t('onboarding.welcomeModal.part2')}</p>
         </div>
         <div className="info-footer">
-          <Icon icon={PartnersConsentIcon} size={191} />
+          <StyledIcon icon={PartnersConsentIcon} size={191} />
           <Button
             aria-label={t('onboarding.welcomeModal.accessibility.button_valid')}
             onClick={setWelcomeModalViewed}
diff --git a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
index 602c18b25b32ece87df10ab23d9192551e040e3f..7f96a2ea50d0f1b608eef4e5d093391c97902a71 100644
--- a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
+++ b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
@@ -47,6 +47,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
             class="MuiIconButton-label"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="16"
               width="16"
@@ -84,6 +85,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
             class="info-footer"
           >
             <svg
+              aria-hidden="true"
               class="styles__icon___23x3R"
               height="191"
               width="191"
diff --git a/src/db/explorationEntity.json b/src/db/explorationEntity.json
index 3a596b8da0b693d4b9912c0e17ad4dc4128dfd53..41e1ad408a6b89152be2c60b603401084e68023e 100644
--- a/src/db/explorationEntity.json
+++ b/src/db/explorationEntity.json
@@ -26,7 +26,7 @@
   {
     "_id": "EXPLORATION003",
     "state": 0,
-    "description": "Consultez vos données sur une période de 5 ans.",
+    "description": "Découvrez le pas de temps de \"5 ans\" dans la page Consos et consultez ainsi vos données dans leur historique le plus profond.",
     "complementary_description": "",
     "target": 1,
     "type": 2,
diff --git a/src/db/profileData.ts b/src/db/profileData.ts
index e6b02f585913c10d51b800de352c1a0bc86018ea..e045626a4857bb80e5da8c779f4c60c79d82ec6e 100644
--- a/src/db/profileData.ts
+++ b/src/db/profileData.ts
@@ -9,22 +9,23 @@ const profileData: Omit<ProfileEntity, 'id'> = {
   explorationHash: '',
   haveSeenEcogestureModal: false,
   haveSeenLastAnalysis: true,
+  isAnalysisReminderEnabled: true,
   isFirstConnection: true,
   isProfileEcogestureCompleted: false,
   isProfileTypeCompleted: false,
   lastConnectionDate: '0000-01-01T00:00:00.000Z',
   mailToken: '',
   monthlyAnalysisDate: '0000-01-01T00:00:00.000Z',
+  onboarding: {
+    isWelcomeSeen: false,
+  },
   partnersIssueSeenDate: {
     enedis: '0000-01-01T00:00:00.000Z',
     egl: '0000-01-01T00:00:00.000Z',
     grdf: '0000-01-01T00:00:00.000Z',
   },
   quizHash: '',
-  onboarding: {
-    isWelcomeSeen: false,
-  },
-  sendAnalysisNotification: true,
+  sendAnalysisNotification: false,
   sendConsumptionAlert: false,
   waterDailyConsumptionLimit: 0,
 }
diff --git a/src/enums/userQuiz.enum.ts b/src/enums/userQuiz.enum.ts
index d681613d5c3f5d7fb7557b3f73fd8a8a115bdbbb..f2c9e9d519e7d6c92e50256ecd2b9dff8ea97fc7 100644
--- a/src/enums/userQuiz.enum.ts
+++ b/src/enums/userQuiz.enum.ts
@@ -12,5 +12,5 @@ export enum CustomQuestionType {
 export enum UserQuestionState {
   UNLOCKED = 0,
   CORRECT = 1,
-  UNCORRECT = 2,
+  INCORRECT = 2,
 }
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 1461baf42e08e0f77dca3a5a0c9435931248d802..3339a628e95b9c2a03bdbe88b0a55b8caadc2965 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -2,6 +2,9 @@
   "common": {
     "title_app": "Ecolyo",
     "title_consumption": "Conso",
+    "title_consumption_electricity": "Conso électrique",
+    "title_consumption_gas": "Conso de gaz",
+    "title_consumption_water": "Conso d'eau",
     "title_challenge": "Défis",
     "title_quiz": "Quiz",
     "title_exploration": "Exploration",
@@ -19,7 +22,8 @@
     "title_sge_connect": "Connexion à l'électricité",
     "title_gas_connect": "Connexion au gaz",
     "accessibility": {
-      "loading": "Chargement"
+      "loading": "Chargement",
+      "skip_link": "Aller au contenu"
     },
     "funders_logo": "Logo des financeurs : Métropole de Lyon, Etat via la Banque des Territoires et son programme France 2030, Union Européenne"
   },
@@ -99,7 +103,11 @@
     "approximative_description": "Pour comparer votre consommation avec un foyer similaire ou avec une conso idéale, veuillez détailler votre profil",
     "no_data": "Pas de données",
     "accessibility": {
-      "button_go_to_profil": "Détailler mon profil"
+      "button_go_to_profil": "Détailler mon profil",
+      "comparison_multifluid": "Vos dépenses (tous fluides confondus) vs Dépenses moyennes",
+      "comparison_electricity": "Votre consommation d'électricité vs Consommation moyenne",
+      "comparison_water": "Votre consommation d'eau vs Consommation moyenne",
+      "comparison_gas": "Votre consommation de gaz vs Consommation moyenne"
     },
     "max_day": "Jour où vous avez le plus consommé",
     "compare": {
@@ -118,6 +126,13 @@
         "data_info": "Données Météo France issues de la station météo Lyon Bron.",
         "close": "Fermer la fenêtre"
       }
+    },
+    "newsletter_reminder": {
+      "title": "Envie d'être averti de votre dernier bilan\u00a0?",
+      "text": "Recevez chaque mois votre bilan ainsi que des conseils saisonniers par mail.",
+      "button": "Je m'inscris",
+      "stop_showing": "Ne plus afficher",
+      "close": "Fermer la fenêtre"
     }
   },
   "analysis_error_modal": {
@@ -133,6 +148,7 @@
   },
   "analysis_pie": {
     "total": "Conso totale",
+    "details": "Détail par fluide",
     "month": "Au mois\u00a0",
     "estimation": "Comment sont estimés<br>les prix\u00a0?"
   },
@@ -151,8 +167,8 @@
   },
   "elec_info_modal": {
     "accessibility": {
-      "window_title": "electricity-info-modal",
-      "button_close": "close-modal"
+      "window_title": "Information sur les statistiques Enedis",
+      "button_close": "Fermer la fenêtre d'information"
     },
     "maxPowerTitle": "Qu’est-ce que la puissance maximum\u00a0?",
     "maxPowerDetails-1": "C’est la puissance maximum délivrée par tous les appareils fonctionnant au même moment dans votre logement.",
@@ -198,8 +214,8 @@
       "consentLi2": "L'historique et le relevé de vos consommations au pas de temps 30 minutes",
       "consentLi3": "Les puissances maximales atteintes quotidiennement",
       "consentLi4": "Les données contractuelles (début de contrat et puissance souscrite)",
-      "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span>",
-      "consentCheck2": "J’atteste être le titulaire du point de livraison (PDL) renseigné à l’étape précédente"
+      "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span> *",
+      "consentCheck2": "J’atteste être le titulaire du point de livraison (PDL) renseigné à l’étape précédente *"
     },
     "grdfgrandlyon": {
       "title": "Ecolyo doit se connecter au gaz",
@@ -227,11 +243,11 @@
       "textConsent": "Afin de vous offrir des fonctionnalités de visualisation et d'analyse, Ecolyo a besoin des données suivantes\u00a0:",
       "consentLi1": "L'historique de vos consommations (jusqu’à 36 mois) et le relevé quotidien de vos consommations",
       "consentLi2": "Les données contractuelles (type de compteur, date de début de contrat)",
-      "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span>",
-      "consentCheck2": "J’atteste être le titulaire du point de livraison (PCE) renseigné à l’étape précédente",
+      "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span> *",
+      "consentCheck2": "J’atteste être le titulaire du point de livraison (PCE) renseigné à l’étape précédente *",
       "waiting": {
         "mailSent": "Un mail vous a été envoyé...",
-        "mailDelay": "La réception du mail peut prendre 15min, l'envoi des mails se faisant tous les 1/4 d'heure",
+        "mailDelay": "cela peut prendre jusqu'à 3 minutes",
         "validate": "Merci de valider l'autorisation d'accès à vos données",
         "comeback": "Une fois ce clic effectué, revenez ici pour accéder à vos données",
         "button_done": "C’est fait !"
@@ -269,6 +285,7 @@
     },
     "accessibility": {
       "button_reveal_password": "Afficher le mot de passe",
+      "button_hide_password": "Masquer le mot de passe",
       "button_connect": "Se connecter",
       "button_create_account": "Se créer un compte",
       "window_title": "Fenêtre d'information sur la création de compte.",
@@ -294,7 +311,8 @@
       },
       "locked": {
         "desc": "À débloquer en terminant le défi précédent"
-      }
+      },
+      "goto": "Aller vers le challenge"
     },
     "card_done": {
       "saving": "Économie de",
@@ -332,11 +350,14 @@
   "consumption": {
     "display_last_data": "Voir mes dernières consos",
     "accessibility": {
+      "navigation_group": "Choix de la période",
+      "fluid_menu": "Choix du fluide",
       "button_previous_period": "Afficher la période précédente",
       "button_next_period": "Afficher la période suivante",
       "button_previous_value": "Sélectionner la valeur précédente",
       "button_next_value": "Sélectionner la valeur suivante",
-      "checkbox_compare": "Afficher ou cacher la comparaison"
+      "checkbox_compare": "Afficher ou cacher la comparaison",
+      "bar": "Consommation du %{date} : %{value} %{unit}"
     },
     "partner_issue_modal": {
       "title": "Attention\u00a0!",
@@ -365,6 +386,11 @@
     "aie": "Aïe !",
     "data_empty": "Vide",
     "estimated": "estimés",
+    "cost_per_fluid": {
+      "electricity": "Part de l'électricité",
+      "water": "Part de l'eau",
+      "gas": "Part du gaz"
+    },
     "dataModal": {
       "list_title": "3 raisons possibles :",
       "item1": "le lien entre Ecolyo et le fournisseur de données est rompu\u00a0: une mise à jour de ce lien (en bas de la page) peut résoudre ce problème.",
@@ -436,7 +462,8 @@
     "title": "Félicitations !",
     "subtitle": "Vous avez terminé tous les défis !",
     "message1": "Nous travaillons actuellement à vous proposer de nouveaux défis.",
-    "message2": "Vous pouvez donner votre avis sur ce que vous aimeriez en cliquant sur la bulle d'aide."
+    "message2": "Vous pouvez donner votre avis sur ce que vous aimeriez en cliquant sur la bulle d'aide.",
+    "close": "Fermer la fenêtre"
   },
   "duel_empty_value_modal": {
     "title": "Oups !",
@@ -492,9 +519,8 @@
     },
     "initModal": {
       "title": "Sélectionner mes astuces",
-      "text1": "Les astuces présentées sont des actions qui vous permettent de réduire vos consommations et donc vos factures. On parle parfois d’écogestes ",
-      "text2": "Vous pouvez sélectionner celles à mettre en objectifs et celles que vous appliquez déjà.",
-      "launchForm": "Afin de pré-sélectionner les astuces correspondant à votre consommation, merci de répondre à quelques rapides questions.",
+      "text1": "Les astuces présentées dans cette page sont des actions qui vous permettent de réduire vos consommations. Elles sont appelées parfois aussi écogestes.",
+      "text2": "Répondez à un court questionnaire pour générer une liste d'astuces adaptée à votre profil puis sélectionnez celles que vous suivez déjà et celles que vous voulez vous mettre en objectif !",
       "btn1": "Plus tard",
       "btn2": "C'est parti !"
     },
@@ -587,7 +613,7 @@
       "freezer": "Congélateur",
       "boiler": "Chaudière",
       "hydraulic_heating": "Chauffage hydraulique",
-      "accessible_label": "Sélection d'équipement"
+      "accessible_label": "Liste des équipements"
     }
   },
   "ecogesture_selection": {
@@ -654,34 +680,36 @@
     "later": "Plus tard",
     "lets_go": "J'y vais",
     "accessibility": {
-      "window_title": "Fenêtre de partage de retours",
-      "button_close": "Fermer la fenêtre de partage de retours"
+      "window_title": "Fenêtre de service assistance aux utilisateurs",
+      "button_close": "Fermer la fenêtre de service assistance aux utilisateurs"
     }
   },
   "dataShare": {
     "title1": "Bienvenue !",
     "title1Update": "Ecolyo évolue !",
+    "title2": "Vous accédez pour la première fois à Ecolyo. Pour cela, nul besoin de vous créer un compte. ",
     "title2Update": "Pour continuer à utiliser Ecolyo, merci d’accepter les modalités de traitement des données ci-dessous.",
-    "part1": "Nous avons besoin de l’adresse email utilisée lors de la création de votre Cozy Métropole de Lyon, ci-après nommé cloud personnel.",
+    "part1": "Pour le bon fonctionnement du service, nous avons besoin de l’adresse email utilisée lors de la création de votre Cozy Métropole de Lyon.",
     "part2": "Cette donnée de compte est conservée dans Ecolyo le temps de l’utilisation de ce service.",
     "part3": "La Métropole de Lyon utilisera cet email afin de vous tenir informé·e\u00a0:",
     "item1": "En réponse à vos demandes, si vous avez pris l’initiative de nous contacter.",
     "item2": "En cas de problème majeur avec la gestion de votre compte.",
-    "item3": "De l’évolution de vos consommations, des nouveautés et  de la qualité du service via une lettre mensuelle. Vous pouvez à tout moment vous désinscrire de cette lettre via la page Options du service.",
+    "item3": "De l’évolution de vos consommations, des nouveautés et  de la qualité du service via une lettre mensuelle. Vous pouvez à tout moment vous inscrire ou désinscrire de cette lettre via la page Options du service.",
     "part4": "Vos données privées de consommation d’énergie et d’eau sont récupérées, sauvegardées et stockées dans votre cloud personnel à votre initiative sans visibilité de la Métropole  de Lyon sur leur contenu.",
-    "part5": "Il en est de même pour les données privées de composition du logement et du foyer, fournies par vos soins. Elles restent également sans visibilité de la Métropole de Lyon sur leur contenu.\nLes données d’identification entrées lors de la connexion aux données de consommations d’électricité sont quant à elles conservées dans un espace sécurisé de la Métropole de Lyon et sont utilisées uniquement à des fins de contrôle du consentement par des organismes extérieurs.",
-    "part6": "Dans le cadre de l’évaluation et de l’amélioration du service, des données d’utilisation anonymisées et pseudonymisées seront remontées à des fins d’exploitation statistiques. La récupération de ces statistiques nous permettra de s’assurer du bon fonctionnement technique de la connexion à vos données de consommation, d’évaluer globalement l’usage de l’application via des mesures d’audience ainsi que d’évaluer à terme l’impact global en termes de baisse des consommations énergétiques de notre service.",
+    "part5": "Il en est de même pour les données privées de composition du logement et du foyer, fournies par vos soins. Elles restent également sans visibilité de la Métropole de Lyon sur leur contenu.\nLes données d’identification entrées lors de la connexion aux données de consommations d’électricité et de gaz sont quant à elles conservées dans un espace sécurisé de la Métropole de Lyon et sont utilisées uniquement à des fins de contrôle du consentement par des organismes extérieurs.",
+    "part6": "Dans le cadre de l’évaluation et de l’amélioration du service, des données d’utilisation anonymisées et pseudonymisées seront remontées à des fins d’exploitation statistiques. La récupération de ces statistiques nous permettra de garantir le bon fonctionnement technique de la connexion à vos données de consommation, d’évaluer globalement l’usage de l’application via des mesures d’audience ainsi que d’évaluer à terme l’impact global en termes de baisse des consommations énergétiques de notre service.",
     "part7": "Au sein de votre cloud personnel, vous pouvez à tout moment exercer vos droits d’accès, de rectification, de portabilité, de limitation et d’opposition en consultant notamment la page Options.",
     "part8": "Vous pouvez également exercer vos droits d’accès, de rectification, de limitation, d’opposition et d’effacement de vos données personnelles en contactant directement le Délégué à la Protection des Données par courrier en écrivant à l’adresse :",
     "part9": "Métropole de Lyon – Délégué à la Protection des Données - Direction des Assemblées, des Affaires Juridiques et des Assurances - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex 03 ",
     "part10": "ou en ligne, au moyen du formulaire disponible à l'adresse suivante\u00a0: ",
     "link1": "<a href=\"https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/\">https://demarches.toodego.com/sve/proteger-mes-donnees-personnelles/</a>",
-    "validDataConsent": "Je consens au traitement de mes données tel que décrit ci-dessus.",
+    "validDataConsent": "Je consens au traitement de mes données tel que décrit ci-dessus. *",
     "validCGU": "Je valide les ",
     "validCGU_button": "Conditions Générales d’Utilisation",
     "validLegal": " du service et ai pris connaissance des ",
     "validLegal_button": "Mentions Légales",
-    "validLegal2": "de celui-ci.",
+    "validLegal2": "de celui-ci. *",
+    "acceptNewsletter": "Je souhaite recevoir tous les mois un bilan de mes consommations ainsi que des conseils spécifiques.",
     "button_accept": "C'est parti !",
     "accessibility": {
       "button_accept": "Accepter les conditions générales d'utilisation"
@@ -693,48 +721,47 @@
   },
   "gcu": {
     "title": "Conditions générales d’utilisation du service",
-    "version": "Version du 12.12.2022",
+    "version": "Version du 20.09.2024",
     "content": {
       "title1": "Ecolyo, késako\u00a0?",
       "part1_1": "Ecolyo est un service proposé par la Métropole de Lyon vous permettant de suivre au même endroit vos consommations d’électricité, de gaz et d’eau, en kWh, en litres, en euros et à différentes échelles de temps. Ce service vous permet également de participer à des défis individuels et vous offre une analyse de vos consommations. Des astuces vous sont aussi proposées afin de vous permettre de réduire vos consommations.",
-      "part1_2": "C’est un service gratuit qui prend la forme d’un site web dit « responsive », c’est-à-dire qu’il peut être consulté sur ordinateur ou sur mobile. Sur mobile, c’est une application que l’on a souhaitée ergonomique, réactive et esthétique pour votre plaisir de navigation et d’utilisation au quotidien.",
+      "part1_2": "C’est un service gratuit qui prend la forme d’un site web dit « responsive », c’est-à-dire qu’il peut être consulté sur ordinateur ou sur mobile. Sur mobile, c’est une application que la Métropole a souhaitée ergonomique, réactive et esthétique pour votre plaisir de navigation et d’utilisation au quotidien.",
       "part1_3": "Tous les termes « techniques » sont définis en bas de page.",
       "title2": "Quelles fonctionnalités le service propose-t-il\u00a0?",
       "part2_1": "La fonctionnalité principale d’Ecolyo est la visualisation, au même endroit, de vos consommations d’électricité, de gaz et d’eau et ce, à différents pas de temps (de la demi-heure – uniquement pour l’électricité, à plusieurs années, en passant par les pas de temps journaliers et mensuels). La visualisation des consommations se fait en kWh pour l’énergie et en L pour l’eau ainsi qu’en euros (euros résultant d’un prix moyenné).",
-      "part2_2": "Au-delà de la visualisation de vos consommations et parce que nous souhaitons vous aider à diminuer ces consommations vous retrouverez plusieurs autres pages\u00a0: ",
-      "part2_2_list1": "Défis : Des quiz, et actions à mettre en place vous seront proposés pour vous pousser à réduire vos consommations.",
-      "part2_2_list2": "Astuces : Une liste d’astuces pour maîtriser ses consommations d’énergie et d’eau à trier par usage, et avec une possibilité de les adapter plus précisément à votre profil.",
-      "part2_2_list3": "Analyse : Une analyse de vos consommations réelles en comparaison à celle d’un foyer étant proche d’une vôtre.",
+      "part2_2": "Au-delà de la visualisation de vos consommations et parce que la Métropole souhaite vous aider à diminuer ces consommations, vous retrouverez plusieurs autres pages\u00a0: ",
+      "part2_2_list1": "Défis : Des quiz, et actions à mettre en place vous seront proposés pour vous encourager à réduire vos consommations.",
+      "part2_2_list2": "Astuces : Une liste d’astuces pour maîtriser ses consommations d’énergie et d’eau à trier par usage, et avec la possibilité de les adapter plus précisément à votre profil.",
+      "part2_2_list3": "Analyse : Une analyse de vos consommations réelles comparées à celle d’un foyer étant proche du vôtre.",
       "part2_3": "Pour la page Analyse ainsi que pour la partie personnalisation des astuces, des éléments supplémentaires sur votre profil vous seront demandés. L’ensemble de ces informations récoltées à l’aide du formulaire peuvent être modifiées par la suite.",
-      "part2_4": "Dernière page : la page Options dans laquelle vous pourrez vous abonner à un service d’alerte sur vos consommations d’eau, de quoi ajuster votre profil ou encore vous désabonner de la lettre mensuelle.",
+      "part2_4": "La dernière page est la page Options dans laquelle vous pourrez vous abonner à un service d’alerte sur vos consommations d’eau, ajuster votre profil ou encore vous abonner ou désabonner à la lettre mensuelle.",
       "title3": "Comment ai-je accès à mes données d’électricité, de gaz et d’eau\u00a0?",
       "part3_1": "Pour visualiser vos consommations réelles et profiter pleinement du potentiel de notre service, il vous faut au minimum un des trois compteurs communicants suivants : Linky (pour l’électricité), Gazpar (pour le gaz), Téléo (pour l’eau).",
-      "part3_2": "Ces compteurs sont opérés par les gestionnaires de réseaux. Pour Linky, c’est Enedis, le gestionnaire de réseau de distribution d’électricité. Pour Gazpar, GRDF est responsable de cette gestion. Et pour Téléo, c’est Eau Publique du Grand Lyon.",
-      "part3_3": "Ces acteurs sont responsables de la relève de vos données. Ces données servent notamment à votre fournisseur d’électricité, de gaz ou d’eau pour permettre la facturation de vos consommations d’énergie. Des fournisseurs d’électricité ou de gaz il y en a des dizaines. Les gestionnaires de réseaux (… et de votre compteur) ne sont qu’au nombre de trois. Nous avons donc décidé de travailler avec eux, au plus près de la donnée brute issue de vos compteurs.",
-      "part3_4": "Il vous faudra donc avoir un compte chez GRDF et Eau Publique du Grand Lyon pour accéder à vos données. Si vous n’en avez pas, il suffira de vous en créer un. Ceci ne sera à faire qu’une fois, au début.",
+      "part3_2": "Ces compteurs sont opérés par les gestionnaires de réseaux. Pour Linky, c’est Enedis, le gestionnaire de réseau de distribution d’électricité. Pour Gazpar, GRDF est responsable de cette gestion. Quant à Téléo, c’est Eau Publique du Grand Lyon.",
+      "part3_3": "Ces acteurs sont responsables de la relève de vos données. Ces données servent notamment à votre fournisseur d’électricité, de gaz ou d’eau pour permettre la facturation de vos consommations. Il existe des dizaines de fournisseurs d’électricité ou de gaz, mais seulement trois gestionnaires de réseaux. La Métropole a donc décidé de travailler avec ces derniers, au plus près de la donnée brute issue de vos compteurs.",
       "title4": "Ecolyo se trouve dans un cloud personnel Métropole de Lyon, qu’est-ce que cela signifie\u00a0?",
-      "part4_1": "Comme vous avez dû le remarquer, lors de votre première connexion à Ecolyo vous avez dû vous créer un compte Cozy Métropole de Lyon. Ce cloud personnel est un espace sécurisé porté par l’ambition de vous apporter visibilité, transparence et maîtrise sur l’usage de vos données personnelles, et dont les fonctionnalités vous permettant de récupérer, synchroniser, stocker et partager vos données avec les destinataires de votre choix.  Le service Ecolyo se déploie  à l’intérieur de cet espace protégé. Dans ce cloud personnel, vous pourrez accéder également à d’autres services. Toutes les données traitées par Ecolyo, mais aussi les autres services que vous seriez amenés à utiliser dans ce cloud personnel restent dans ce Cloud Personnel Grand Lyon et n’en sortent pas, sauf si vous décidez vous-même de partager vos données avec des tiers.",
+      "part4_1": "Comme vous avez dû le remarquer, lors de votre première connexion à Ecolyo vous avez dû vous créer un Cozy Métropole de Lyon. Ce cloud personnel est un espace sécurisé conçu pour vous apporter visibilité, transparence et maîtrise sur l’usage de vos données personnelles, et dont les fonctionnalités vous permettent de récupérer, synchroniser, stocker et partager vos données avec les destinataires de votre choix.  Le service Ecolyo se déploie  à l’intérieur de cet espace protégé. Dans ce cloud personnel, vous pourrez accéder également à d’autres services. Toutes les données traitées par Ecolyo, ainsi que celles des autres services que vous pourriez utiliser dans ce cloud personnel restent dans ce Cloud Personnel Grand Lyon et n’en sortent pas, sauf si vous décidez vous-même de partager vos données avec des tiers.",
       "part4_2": "Pour en savoir plus sur ce cloud et son utilisation, ainsi que la durée de conservation de vos données, vous pouvez lire les conditions générales d’utilisation du service <a href=\"https://manager.cozygrandlyon.cloud/tos/266b4226-8417-42fb-b911-41e86dae8581.pdf?locale=fr\">ici</a>.",
       "title5": "Et donc concrètement pour Ecolyo, quelles données sont collectées et qui y a accès\u00a0?",
-      "part5_1": "Pour qu’Ecolyo ait accès à vos données de consommations, vous devrez activer vos différents connecteurs. À ce moment-là, pour la connexion aux données de gaz et d’eau à travers un parcours qui vous conduira de manière intuitive sur le site de chacun des gestionnaires de réseaux concerné, vous pourrez donner votre consentement à partager ces données avec le Service Ecolyo, et ce pour une durée limitée dans le temps. Pour l’électricité, le don du consentement et la connexion aux données se fait directement dans notre service. Quid de la durée de ce consentement\u00a0? Pour les données électriques, elle est par défaut d'un an. Pour les données gaz, cela sera à vous de la définir (nous vous recommandons 1 an pour une expérience optimale). Les données utilisées pour vérifier la bonne connexion de vos données d’électricité sont stockées du côté de la Métropole de Lyon sur des serveurs sécurisés.",
+      "part5_1": "Pour qu’Ecolyo ait accès à vos données de consommations, vous devrez activer vos différents connecteurs. Via les parcours proposés par l’application, vous pourrez progressivement donner votre consentement et ainsi accéder à vos données de consommations. Une facture sera nécessaire afin de préciser vos numéros de compteurs. Le consentement est donné pour une durée limitée précisée dans les écrans. Les données utilisées pour vérifier la bonne connexion de vos données d’électricité sont stockées du côté de la Métropole de Lyon sur des serveurs sécurisés pendant 5 ans, ce qui relève de la prérogative des gestionnaires de réseau.",
       "part5_2": "Vos connecteurs, une fois configurés, permettent le transfert de vos données de consommations au service Ecolyo. Le transfert de ces données de consommation se fait sans que personne n’accède à leur contenu, pas même la Métropole de Lyon. En effet, ces données sont stockées et traitées directement dans votre cloud personnel qui en assure la protection. Tous les calculs, analyses et traitements sur ces données sont faites DANS votre espace personnel sans visibilité sur le contenu des données par la Métropole de Lyon.",
       "part5_3": "Vous pouvez bien sûr mettre fin à la récupération/ au transfert de vos données de consommation sur votre espace cloud personnel à tout moment et  à plusieurs niveaux : ",
       "part5_3_list1": "Vous pouvez supprimer le transfert quotidien de vos données en supprimant tout simplement le connecteur dans la page Consos (en bas).",
-      "part5_3_list2": "Pour supprimer l’ensemble de vos données ainsi que votre cloud personnel Métropole de Lyon, vous devez demander la suppression de votre cloud. Pour faire cela, rendez-vous dans les paramètres de votre cloud personnel via la barre blanche en haut d’Ecolyo et appuyez sur le bouton « Supprimer mon compte » dans la partie paramètres.",
-      "part5_4": "Des données sur le profil de votre foyer peuvent être également remplies au sein de l’application. Ces données s’enrichiront au fur et à mesure de votre utilisation du service avec d’autres informations : défis réalisés, étoiles gagnées, etc. L’ensemble de ces données restent à l’intérieur de votre cloud personnel, sans que personne n’y ait accès.",
-      "part5_5": "Enfin, afin de permettre une mise à jour quotidienne de vos données de consommations, vos identifiants Eau Publique du Grand Lyon, un jeton d’identification GRDF ainsi que vos numéros de compteurs sont stockés.",
+      "part5_3_list2": "Pour supprimer l’ensemble de vos données ainsi que votre cloud personnel Métropole de Lyon, vous devez demander la suppression de votre cloud. Pour faire cela, rendez-vous dans les paramètres de votre cloud personnel via la barre blanche en haut d’Ecolyo et appuyez sur le bouton « Supprimer mon compte » dans la page Paramètres.",
+      "part5_4": "Des données sur le profil de votre foyer peuvent être également remplies au sein de l’application. Ces données s’enrichiront au fur et à mesure de votre utilisation du service avec d’autres informations : défis réalisés, étoiles gagnées, etc. L’ensemble de ces données restent à l’intérieur de votre cloud personnel, sans droit de regard de la Métropole de Lyon.",
+      "part5_5": "Enfin, afin de permettre une mise à jour quotidienne de vos données de consommations, vos identifiants Eau Publique du Grand Lyon, dans le cas de l’eau, ainsi que vos informations d’identification entrées lors de votre première connexion sont stockées et utilisées dans le service.",
       "title6": "Personne n’a donc accès à mes données, pas même la Métropole de Lyon, vraiment\u00a0?",
-      "part6_1": "Conformément aux indications du paragraphe précédent, la Métropole de Lyon n’accède ni à vos données de consommations ni aux données utilisées via certaines fonctionnalités du service comme le formulaire (celui-là même qui permet l’analyse de vos consommations personnalisée ainsi qu’une sélection d’éco-gestes personnalisés). Toutes ces informations sont bien gardées au chaud dans votre cloud personnel Métropole de Lyon",
+      "part6_1": "Conformément aux indications du paragraphe précédent, la Métropole de Lyon n’accède ni à vos données de consommations ni aux données utilisées via certaines fonctionnalités du service comme le formulaire (celui-là même qui permet l’analyse de vos consommations personnalisée ainsi qu’une sélection d’astuces personnalisées). Toutes ces informations sont bien gardées au chaud dans votre cloud personnel Métropole de Lyon",
       "part6_2": "Seul vous pouvez accepter de partager vos données, documents ou fichiers privés avec la Métropole de Lyon, ses partenaires ou d’autres utilisateurs ou acteurs (publics ou privés) après recueil de votre consentement éclairé et par une action expresse de votre part.",
       "part6_3": "La Métropole de Lyon n'a cependant accès qu’à l’adresse email utilisée lors la création de votre cloud personnel Métropole de Lyon. Elle utilise cet email afin de vous tenir informé·e :",
-      "part6_3_list1": "En réponse à vos demandes, si vous avez pris l’initiative de nous contacter. ",
+      "part6_3_list1": "En réponse à vos demandes, si vous avez pris l’initiative de contacter la Métropole de Lyon. ",
       "part6_3_list2": "En cas de problème majeur avec la gestion de votre compte.",
-      "part6_3_list3": "De l’évolution de vos consommations, des nouveautés et  de la qualité du service via une lettre mensuelle. Vous pouvez à tout moment vous désinscrire de cette lettre via la page Options du service.",
-      "part6_4": "Elle stocke également les informations transmises lors de la connexion à l’électricité (nom, adresse postale). Ces informations doivent être stockées car la Métropole de Lyon est régulièrement contrôlée par Enedis et doit prouver détenir le consentement des personnes pour lesquelles elle va chercher la donnée.",
-      "part6_5": "Par ailleurs, et dans le cadre de l’évaluation et de l’amélioration du service, des données d’utilisation anonymisées seront remontées à des fins d’exploitation statistiques. La récupération de ces statistiques anonymisées nous permettra de s’assurer du bon fonctionnement technique de la connexion à vos données de consommation ainsi que d’évaluer l’impact global en termes de baisse des consommations énergétiques de notre service. Parmi ces statistiques, des mesures d’audience de la fréquentation des différentes pages du service sont réalisées. Vous pouvez, via la page Options, à tout instant, décider de vous opposer à la récupération de ces données d’utilisation.",
+      "part6_3_list3": "De l’évolution de vos consommations, des nouveautés et  de la qualité du service via une lettre mensuelle si vous y êtes inscrit. Vous pouvez à tout moment vous inscrire ou désinscrire de cette lettre via la page Options du service.",
+      "part6_4": "Elle stocke également les informations transmises lors de la connexion à l’électricité (nom, adresse postale) et au gaz (nom, code postal). Ces informations doivent être stockées car la Métropole de Lyon est régulièrement contrôlée par Enedis et GRDF et doit prouver détenir le consentement des personnes pour lesquelles elle va chercher la donnée.",
+      "part6_5": "Par ailleurs, et dans le cadre de l’évaluation et de l’amélioration du service, des données d’utilisation anonymisées seront remontées à des fins d’exploitation statistiques. La récupération de ces statistiques anonymisées permettra à la Métropole de LYon de s’assurer du bon fonctionnement technique de la connexion à vos données de consommation ainsi que d’évaluer l’impact global en termes de baisse des consommations énergétiques de notre service. Parmi ces statistiques, des mesures d’audience de la fréquentation des différentes pages du service sont réalisées. Vous pouvez, via la page Options, à tout instant, décider de vous opposer à la récupération de ces données d’utilisation.",
       "title8": "Encore des questions\u00a0?",
-      "part8_1": "N’hésitez pas à consulter la FAQ ou à nous contacter via le formulaire de contact présente sur l’ensemble des pages.",
-      "part8_2": "Dernière option, contactez-nous directement à <a href=\"mailto:ecolyo@grandlyon.com\">ecolyo(at)grandlyon.com</a>.",
+      "part8_1": "Il est possible de consulter la FAQ ou de contacter l’équipe via le formulaire de contact présent sur l’ensemble des pages.",
+      "part8_2": "Sinon, il est également possible de joindre directement à <a href=\"mailto:ecolyo@grandlyon.com\">ecolyo(at)grandlyon.com</a>.",
       "title9": "LEXIQUE",
       "part9_1_title": "Cloud personnel Métropole de Lyon : ",
       "part9_1_content": "Cloud personnel : appelé aussi le « domicile numérique », le cloud personnel est souvent réduit à un simple espace de stockage de documents mais il est bien plus que ça. C'est un espace individuel et sécurisé où vous pouvez accéder à des services sans exposer aucune donnée à l’extérieur. Vous seul pouvez y accéder, personne d'autre.",
@@ -761,7 +788,7 @@
   "header": {
     "accessibility": {
       "button_back": "Retour à la page précédente",
-      "button_open_feedbacks": "Ouvrir le partage de retours"
+      "button_open_feedbacks": "Ouvrir le service assistance aux utilisateurs"
     }
   },
   "konnector_form": {
@@ -879,12 +906,16 @@
     "later": "Plus tard",
     "go": "J'y vais",
     "no": "Non",
-    "yes": "Oui"
+    "yes": "Oui",
+    "accessibility": {
+      "window_title": "Fenêtre d'erreur, consentement expiré",
+      "button_close": "Fermer la fenêtre"
+    }
   },
   "legal": {
     "read_legal": "Lire les mentions légales",
     "title_legal": "Mentions légales & CGU",
-    "version": "Version du 12.12.2022",
+    "version": "Version du 20.09.2024",
     "site": "Site du service Ecolyo : <a href=\"https://ecolyo.com/\"> https://ecolyo.com/</a>",
     "adress": "Métropole de Lyon - 20, rue du Lac – CS 33569 - 69505 Lyon cedex 03",
     "phone": "Tél : (33) 4 78 63 40 40",
@@ -896,29 +927,29 @@
     "p3b": "Photographies : ",
     "p3": "sauf mention contraire, les photos sont la propriété de la Métropole de Lyon",
     "p4b": "Conception et Charte graphique : ",
-    "p4": "Florent Dufier",
+    "p4": "Métropole de Lyon, Sopra Steria",
     "p5b": "Réalisation technique : ",
     "p5": "Métropole de Lyon, Sopra Steria",
     "p6b": "Maintenance technique : ",
     "p6": "Délégation Développement économique, emploi & savoirs - Innovation numérique & systèmes d’information - Usages et services numériques - Développement des services numériques",
     "title1": "Crédits",
-    "part1": "Ce site est le résultat de développements spécifiques réalisés dans les langages Go, TypeScript, HTML et Sass. Les développements s’appuient sur plusieurs bibliothèques et frameworks libres : axios, cozy-bar, cozy-client, cozy-harvest-lib, cozy-scripts, cozy-ui, d3, detect-browser, global, lodash, luxon, moment, moment-timezone, node-sass, object-hash, react, react-dom, react-redux, react-router-dom, react-swipeable-views, redux-devtools-extension, sass-loader. Les tests de l’application s’appuient sur les bibliothèques et frameworks libres suivants: jest-junit, react-test-renderer, redux-mock-store. La pile technique intègre également les applications Cozy stack, Yarn, Docker, ACH. Les déploiements sont réalisés sur le registre hébergé chez Cozy. L’équipe de réalisation utilise au quotidien les applications GitLab, IceScrum, RocketChat, SonarQube.",
+    "part1": "Ce site est le résultat de développements spécifiques réalisés dans les langages Go, TypeScript, HTML et Sass. Les développements s’appuient sur plusieurs bibliothèques et frameworks libres : axios, cozy-bar, cozy-client, cozy-harvest-lib, cozy-scripts, cozy-ui, d3, global, lodash, luxon, node-sass, object-hash, react, react-dom, react-redux, react-router-dom, react-swipeable-views, redux-devtools-extension, sass-loader. Les tests de l’application s’appuient sur les bibliothèques et frameworks libres suivants: jest-junit, redux-mock-store. La pile technique intègre également les applications Cozy stack, Yarn, Docker, ACH. Les déploiements sont réalisés sur le registre hébergé chez Cozy. L’équipe de réalisation utilise au quotidien les applications GitLab, RocketChat, SonarQube.",
     "title2": "Traitement des données personnelles et droit d’accès, de modification et de suppression",
-    "part2": "Conformément à la réglementation en vigueur en matière de protection des données personnelles, le service Ecolyo a fait l’objet d’une inscription au registre des traitements de la Métropole de Lyon. Ecolyo fait partie de l’écosystème de services orientés « self data » déployés par la Métropole de Lyon avec l’ambition d’offrir aux usagers métropolitains les outils et les services leur permettant d’exercer directement leur droit à la portabilité, dans un cadre apte à garantir aussi bien la transparence et le contrôle sur l’usage de leurs données personnelles que l’exploitation directe du contenu de ces données selon leurs libres choix. Le self data est en effet selon la Fondation Internet Nouvelle Génération (FING) « la production, l’exploitation et le partage de données personnelles par les individus, sous leur contrôle et à leurs propres fins ». Au sein de cet environnement self data, la gestion des données s’appuie sur l’organisation suivante des rôles et responsabilités associées : ",
-    "part2-1": "Les partenaires du service GRDF et Eau Publique du Grand Lyon sont responsables exclusivement des seuls traitements de Données Personnelles relatifs à la collecte des données de consommation de gaz et d’eau de l’utilisateur et à leur transmission sur la plateforme de cloud personnel, après consentement de l’utilisateur.",
-    "part2-2": "Enedis est responsable de la collecte des données de consommation d’électricité et de leur mise à disposition à la Métropole de Lyon qui, elle en gère la transmission sur la plateforme du cloud personnel de l’utilisateur, après avoir récupéré le consentement de l’utilisateur.",
+    "part2": "Conformément à la réglementation en vigueur en matière de protection des données personnelles, le service Ecolyo a fait l’objet d’une inscription au registre des traitements de la Métropole de Lyon. Ecolyo fait partie de l’écosystème de services orientés « self data » déployés par la Métropole de Lyon avec l’ambition d’offrir aux usagers métropolitains les outils et les services leur permettant d’exercer directement leur droit à la portabilité, dans un cadre apte à garantir aussi bien la transparence et le contrôle sur l’usage de leurs données personnelles que l’exploitation directe du contenu de ces données selon leurs libres choix. Le self data était défini selon la Fondation Internet Nouvelle Génération (FING) « la production, l’exploitation et le partage de données personnelles par les individus, sous leur contrôle et à leurs propres fins ». Au sein de cet environnement self data, la gestion des données s’appuie sur l’organisation suivante des rôles et responsabilités associées : ",
+    "part2-1": "Eau Publique du Grand Lyon est responsable exclusivement des seuls traitements de Données Personnelles relatifs à la collecte des données de consommation de gaz et d’eau de l’utilisateur et à leur transmission sur la plateforme de cloud personnel, après consentement de l’utilisateur.",
+    "part2-2": "Enedis et GRDF sont responsables de la collecte des données de consommation d’électricité et de gaz et de leur mise à disposition à la Métropole de Lyon qui, elle en gère la transmission sur la plateforme du cloud personnel de l’utilisateur, après avoir récupéré le consentement de l’utilisateur.",
     "part2-3": "La Métropole de Lyon est responsable de traitement sur le périmètre du service Ecolyo qu’elle propose à l’usager, ainsi que des traitements nécessaires à la fourniture de la plateforme de cloud personnel qu’elle met à disposition de l’usager pour accéder au service Ecolyo. En sa qualité de responsable de ces traitements, elle collecte et traite : ",
     "part2-3-1": "Les données de compte de l’usager renseignées par l’usager au sein de son espace de cloud personnel Grand Lyon à des fins de gestion du compte et de communication avec l’usager ;",
     "part2-3-2": "Les données de compte de l’utilisateur lui permettant de connecter ses données d’électricité à Ecolyo ;",
     "part2-3-3": "Les données privées de consommation d’énergie et d’eau dont la récupération, la sauvegarde, le stockage, la synchronisation et le partage sur la plateforme de cloud personnel sont initiés par l’usager sans visibilité de la Métropole de Lyon sur leur contenu.",
     "part2-3-4": "Les données privées sur la composition du logement et du foyer de l’utilisateur, fournies par l’utilisateur lui-même au sein du service, sont traitées par le service sans visibilité de la Métropole de Lyon sur leur contenu.",
     "part2-3-5": "Des métriques d’usage du service anonymisées et remontées périodiquement afin d’améliorer la qualité du service et d’évaluer son impact (Plus d’informations sur la manière dont votre anonymat est bien préservé dans ce processus <a href=\"https://ecolyo.com/cloud_statistiques.html\">ici</a>).",
-    "part2-4": "La Métropole réalise également des mesures d’audience à l’aide de la solution Matomo. Afin de vous fournir un meilleur service et d’améliorer votre expérience d'utilisateur, nous utilisons des solutions de mesure d’audience qui utilisent la technologie des « cookies », des fichiers texte qui sont enregistrés sur votre ordinateur et qui permettent de générer des informations envoyées aux serveurs de mesure d’audience. Sur ces serveurs, l’adresse IP est anonymisée. Les données recueillies ont uniquement pour finalité de permettre d'analyser la fréquentation de nos pages afin d'en améliorer le contenu. Il s'agit de statistiques agrégées permettant de connaître le nombre de visites et de visiteurs différents, les pages les plus populaires, les chemins préférés, les niveaux d'activité par jour de la semaine et par heure de la journée, les principales erreurs etc. Vous avez cependant le droit de vous opposer à l’utilisation de ces cookies, et donc au traitement de vos données personnelles de navigation, en vous rendant dans la page Options de notre service.",
-    "part2-5": "L’usager est seul décisionnaire des finalités d’utilisation qu’il souhaite définir pour le traitement de ses données personnelles de consommation, à la suite de leur transmission par les partenaires du service Ecolyo sur son cloud personnel. Ainsi, dans le cadre de l’utilisation d’Ecolyo, l’usager ne recevra les données des partenaires du service : Enedis, GRDF et Eau Publique du Grand Lyon seulement qu’à sa demande expresse après la saisie de ses identifiants.",
+    "part2-4": "La Métropole réalise également des mesures d’audience à l’aide de la solution Matomo. Afin de vous fournir un meilleur service et d’améliorer votre expérience d'utilisateur, elle utilise des solutions de mesure d’audience qui utilisent la technologie des « cookies », des fichiers texte qui sont enregistrés sur votre ordinateur et qui permettent de générer des informations envoyées aux serveurs de mesure d’audience. Sur ces serveurs, l’adresse IP est anonymisée. Les données recueillies ont uniquement pour finalité de permettre d'analyser la fréquentation de nos pages afin d'en améliorer le contenu. Il s'agit de statistiques agrégées permettant de connaître le nombre de visites et de visiteurs différents, les pages les plus populaires, les chemins préférés, les niveaux d'activité par jour de la semaine et par heure de la journée, les principales erreurs etc. Vous avez cependant le droit de vous opposer à l’utilisation de ces cookies, et donc au traitement de vos données personnelles de navigation, en vous rendant dans la page Options de notre service.",
+    "part2-5": "L’usager est seul décisionnaire des finalités d’utilisation qu’il souhaite définir pour le traitement de ses données personnelles de consommation, à la suite de leur transmission par les partenaires du service Ecolyo sur son cloud personnel. Ainsi, dans le cadre de l’utilisation d’Ecolyo, l’usager ne recevra les données des partenaires du service : Enedis, GRDF et Eau Publique du Grand Lyon qu’à sa demande expresse après la saisie de ses identifiants.",
     "part2-6": "L’utilisateur est donc le seul à accéder :",
     "part2-6-1": "À ses données de consommation d’électricité horaires, journalières, hebdomadaires, mensuelles et annuelles.",
     "part2-6-2": "À ses données de consommation de gaz journalières, hebdomadaires, mensuelles et annuelles.",
-    "part2-6-3": "À ses données de consommation eau journalières, hebdomadaires, mensuelles et annuelles.",
+    "part2-6-3": "À ses données de consommation d'eau journalières, hebdomadaires, mensuelles et annuelles.",
     "part2-7": "Les engagements et responsabilités de la Métropole de Lyon concernant la protection des données et la confidentialité des données Ecolyo sont précisés dans les Mentions légales et les conditions d’utilisation du cloud personnel Grand Lyon qui accueille aujourd’hui le service Ecolyo et sans lequel le service ne peut pas fonctionner. Pour plus d’informations sur les engagements et responsabilités de la Métropole de Lyon concernant la protection et la confidentialité dans le cloud personnel, nous vous invitons à vous référer <a href=\"https://manager.cozygrandlyon.cloud/tos/266b4226-8417-42fb-b911-41e86dae8581.pdf?locale=fr\">aux mentions légales et CGU du cloud personnel métropolitain.</a> ",
     "part2-8": "Conformément à la loi 78-17 du 6 janvier 1978 modifiée relative à l’information, aux fichiers et aux libertés, vous disposez d’un droit d’accès, de rectification et d’opposition au traitement de vos données à caractère personnel. Votre cloud personnel vous permet d’exercer ces droits directement dans cet espace sur vos données de compte. S’agissant des données de consommations d’électricité et de gaz, l’utilisateur peut supprimer son consentement à partager ses données en supprimant son connecteur dans la page Consos.",
     "part2-9": "Vous pouvez également exercer vos droits d’accès, de rectification, de limitation, d’opposition et d’effacement de vos données personnelles en contactant directement le Délégué à la Protection des Données par courrier en écrivant à l’adresse :",
@@ -1173,7 +1204,8 @@
       "button_toggle_detail_profile": "Afficher ou masquer le détail du profil",
       "button_toggle_export": "Afficher ou masquer l'export des données'",
       "button_toggle_average_home": "Afficher ou masquer les informations sur le comparatif'",
-      "button_validate": "Valider"
+      "button_validate": "Valider",
+      "button_export_data": "Télécharger les données"
     }
   },
   "export": {
@@ -1224,6 +1256,7 @@
     "next": "Suivant",
     "consumption_question": "Question sur votre consommation",
     "accessibility": {
+      "window_quit": "Quitter la fenêtre",
       "window_title": "Fenêtre de résultat",
       "button_end_quiz": "Terminer le quiz",
       "button_go_back": "Retour",
@@ -1251,12 +1284,9 @@
     "unknown_error": "Veuillez vérifier votre connexion internet",
     "network_error": "Erreur de réseau",
     "step": {
-      "0": "Mise à jour de l'application",
-      "1": "Vérification de vos consentements pour partager vos données avec Ecolyo",
-      "2": "Chargement de votre profil",
-      "3": "Actualisation de votre progression dans les défis",
-      "4": "Mise à jour des prix",
-      "5": "Connexion à vos données de consommation"
+      "migration": "Mise à jour de l'application",
+      "profile": "Chargement de votre profil",
+      "challenges": "Actualisation de votre progression dans les défis"
     }
   },
   "timestep": {
diff --git a/src/migrations/migration.data.ts b/src/migrations/migration.data.ts
index 650fce8de0a109e7405dd8dbf12e19fa152e8b0a..3fcd8c6a72a1e622a8a56708e2eac84f47674444 100644
--- a/src/migrations/migration.data.ts
+++ b/src/migrations/migration.data.ts
@@ -43,7 +43,7 @@ export const migrations: Migration[] = [
       'Removes old profileType artifacts from users database : \n - Oldest profileType is deleted \n - Removes insulation work form fields that were prone to errors \n - Changes area and outsideFacingWalls form field to strings \n - Changes updateDate values of all existing profileType to match "created_at" entry (former updateDate values got corrupted and hold no meanings).',
     releaseNotes: null,
     docTypes: PROFILETYPE_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<ProfileType[]> => {
+    run: (_client: Client, docs: any[]): ProfileType[] => {
       docs.sort(function (a, b) {
         const c = DateTime.fromISO(a.cozyMetadata.createdAt, {
           zone: 'utc',
@@ -103,7 +103,7 @@ export const migrations: Migration[] = [
     description: 'Removes old profileType and GCUApprovalDate from profile.',
     docTypes: PROFILE_DOCTYPE,
     releaseNotes: null,
-    run: async (_client: Client, docs: any[]): Promise<Profile[]> => {
+    run: (_client: Client, docs: any[]): Profile[] => {
       return docs.map(doc => {
         if (doc.GCUApprovalDate) {
           delete doc.GCUApprovalDate
@@ -123,7 +123,7 @@ export const migrations: Migration[] = [
       'Updates userChallenges to make sure no quiz results are overflowing.',
     releaseNotes: null,
     docTypes: USERCHALLENGE_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<UserChallenge[]> => {
+    run: (_client: Client, docs: any[]): UserChallenge[] => {
       return docs.map(doc => {
         if (doc.quiz.result > 5) {
           doc.quiz.result = 5
@@ -155,7 +155,7 @@ export const migrations: Migration[] = [
       tag: 'day',
       limit: 120,
     },
-    run: async (_client: Client, docs: any[]): Promise<any[]> => {
+    run: (_client: Client, docs: any[]): any[] => {
       return docs.map(doc => {
         doc.deleteAction = true
         return doc
@@ -174,7 +174,7 @@ export const migrations: Migration[] = [
       tag: 'month',
       limit: 4,
     },
-    run: async (_client: Client, docs: any[]): Promise<any[]> => {
+    run: (_client: Client, docs: any[]): any[] => {
       return docs.map(doc => {
         doc.deleteAction = true
         return doc
@@ -193,7 +193,7 @@ export const migrations: Migration[] = [
       tag: 'year',
       limit: 1,
     },
-    run: async (_client: Client, docs: any[]): Promise<any[]> => {
+    run: (_client: Client, docs: any[]): any[] => {
       return docs.map(doc => {
         doc.deleteAction = true
         return doc
@@ -207,7 +207,7 @@ export const migrations: Migration[] = [
     description: 'Corrects individual insulation work field on profileType.',
     releaseNotes: null,
     docTypes: PROFILETYPE_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<ProfileType[]> => {
+    run: (_client: Client, docs: any[]): ProfileType[] => {
       return docs.map(doc => {
         if (!Array.isArray(doc.individualInsulationWork)) {
           doc.individualInsulationWork = [doc.individualInsulationWork]
@@ -256,15 +256,15 @@ export const migrations: Migration[] = [
       'ProfileTypes start now at the begining of the month, no duplications can exist over the same month.',
     releaseNotes: null,
     docTypes: PROFILETYPE_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<any[]> => {
+    run: (_client: Client, docs: any[]): any[] => {
       function checkDate(d1: string, d2: string) {
-        const dtd1: DateTime = DateTime.fromISO(d1)
-        const dtd2: DateTime = DateTime.fromISO(d2)
+        const dtd1 = DateTime.fromISO(d1)
+        const dtd2 = DateTime.fromISO(d2)
         return dtd1.year === dtd2.year && dtd1.month === dtd2.month
       }
 
       for (let i = 0; i < docs.length; i++) {
-        const dtStartOfMonth: DateTime = DateTime.fromISO(docs[i].updateDate)
+        const dtStartOfMonth = DateTime.fromISO(docs[i].updateDate)
         docs[i].updateDate = dtStartOfMonth
           .setZone('utc', {
             keepLocalTime: true,
@@ -289,7 +289,7 @@ export const migrations: Migration[] = [
     docTypes: FLUIDSPRICES_DOCTYPE,
     isCreate: true,
     isDeprecated: true,
-    run: async (): Promise<any> => {
+    run: (): any => {
       return []
     },
   },
@@ -301,7 +301,7 @@ export const migrations: Migration[] = [
       "Profil now contains partnersIssueDate in order to handle partners' issue display",
     releaseNotes: null,
     docTypes: PROFILE_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<Profile[]> => {
+    run: (_client: Client, docs: any[]): Profile[] => {
       return docs.map(doc => {
         doc.partnersIssueDate = DateTime.local()
           .minus({ day: 1 })
@@ -318,7 +318,7 @@ export const migrations: Migration[] = [
       'Rename tutorial to onboaring in ecolyo profile, remove isLastTermAccepted',
     releaseNotes: null,
     docTypes: PROFILE_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<ProfileType[]> => {
+    run: (_client: Client, docs: any[]): ProfileType[] => {
       return docs.map(doc => {
         if (doc.tutorial) {
           doc.onboarding = { ...doc.tutorial }
@@ -343,7 +343,7 @@ export const migrations: Migration[] = [
       tag: 'day',
       limit: 1000,
     },
-    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+    run: (_client: Client, docs: any[]): DataloadEntity[] => {
       let prevData: DataloadEntity = {
         id: '',
         day: 0,
@@ -381,7 +381,7 @@ export const migrations: Migration[] = [
       tag: 'day',
       limit: 1000,
     },
-    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+    run: (_client: Client, docs: any[]): DataloadEntity[] => {
       let prevData: DataloadEntity = {
         id: '',
         day: 0,
@@ -419,7 +419,7 @@ export const migrations: Migration[] = [
       tag: 'month',
       limit: 17,
     },
-    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+    run: (_client: Client, docs: any[]): DataloadEntity[] => {
       return docs.map(doc => {
         if (doc.price) {
           delete doc.price
@@ -440,7 +440,7 @@ export const migrations: Migration[] = [
       tag: 'year',
       limit: 3,
     },
-    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+    run: (_client: Client, docs: any[]): DataloadEntity[] => {
       return docs.map(doc => {
         if (doc.price) {
           delete doc.price
@@ -461,7 +461,7 @@ export const migrations: Migration[] = [
       tag: 'month',
       limit: 17,
     },
-    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+    run: (_client: Client, docs: any[]): DataloadEntity[] => {
       return docs.map(doc => {
         if (doc.price) {
           delete doc.price
@@ -482,7 +482,7 @@ export const migrations: Migration[] = [
       tag: 'year',
       limit: 3,
     },
-    run: async (_client: Client, docs: any[]): Promise<DataloadEntity[]> => {
+    run: (_client: Client, docs: any[]): DataloadEntity[] => {
       return docs.map(doc => {
         if (doc.price) {
           delete doc.price
@@ -499,7 +499,7 @@ export const migrations: Migration[] = [
     releaseNotes: null,
     docTypes: FLUIDSPRICES_DOCTYPE,
     isDeprecated: true,
-    run: async (): Promise<any> => {
+    run: (): any => {
       return []
     },
   },
@@ -510,7 +510,7 @@ export const migrations: Migration[] = [
     description: 'Replace old minCons with the new calculation',
     releaseNotes: null,
     docTypes: ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<any> => {
+    run: (_client: Client, docs: any[]): any => {
       return docs.map(doc => {
         if (doc.minLoad) {
           const numberofDaysInMonth = DateTime.fromObject({
@@ -532,7 +532,7 @@ export const migrations: Migration[] = [
       'Empty fluidPrices db so it can be fetched with right format from remote doctype',
     releaseNotes: null,
     docTypes: FLUIDSPRICES_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<any> => {
+    run: (_client: Client, docs: any[]): any => {
       return docs.map(doc => {
         doc.deleteAction = true
         return doc
@@ -552,7 +552,7 @@ export const migrations: Migration[] = [
     },
     redirectLink: '/consumption/electricity',
     docTypes: '',
-    run: async (): Promise<any> => undefined,
+    run: (): any => undefined,
     isEmpty: true,
   },
   {
@@ -563,7 +563,7 @@ export const migrations: Migration[] = [
       'Profil now contains partnersIssueSeenDates in order to handle each partners issue date. Also removes previous partnersIssueDate',
     releaseNotes: null,
     docTypes: PROFILE_DOCTYPE,
-    run: async (_client: Client, docs: any[]): Promise<Profile[]> => {
+    run: (_client: Client, docs: any[]): Profile[] => {
       return docs.map(doc => {
         doc.partnersIssueSeenDate = {
           enedis: DateTime.local().minus({ day: 1 }).startOf('day'),
@@ -584,7 +584,7 @@ export const migrations: Migration[] = [
     description: 'Fix apartment typo',
     releaseNotes: null,
     docTypes: PROFILETYPE_DOCTYPE,
-    run: async (_client: Client, docs: any[]) => {
+    run: (_client: Client, docs: any[]) => {
       return docs.map(doc => {
         if (doc.housingType === 'appartment') {
           doc.housingType = 'apartment'
@@ -600,7 +600,7 @@ export const migrations: Migration[] = [
     description: 'Add garden room & equipment type',
     releaseNotes: null,
     docTypes: ECOGESTURE_DOCTYPE,
-    run: async (_client: Client, ecogestures: Ecogesture[]) => {
+    run: (_client: Client, ecogestures: Ecogesture[]) => {
       return ecogestures.map(ecogesture => {
         const ecData = ecogestureData.find(
           ec => ec._id === ecogesture.id
@@ -615,4 +615,18 @@ export const migrations: Migration[] = [
       })
     },
   },
+  {
+    baseSchemaVersion: 24,
+    targetSchemaVersion: 25,
+    appVersion: '3.1.0',
+    description: 'Initialize isAnalysisReminderEnabled in profile',
+    releaseNotes: null,
+    docTypes: PROFILE_DOCTYPE,
+    run: (_client: Client, docs: Profile[]) => {
+      return docs.map(doc => {
+        doc.isAnalysisReminderEnabled = true
+        return doc
+      })
+    },
+  },
 ]
diff --git a/src/migrations/migration.service.spec.ts b/src/migrations/migration.service.spec.ts
index c865c5d7adff26fcd6ee1131e4f6f751a3ac0a6c..ade8d9556fd312b63756b8ee55d1dcce3fb255bb 100644
--- a/src/migrations/migration.service.spec.ts
+++ b/src/migrations/migration.service.spec.ts
@@ -36,7 +36,7 @@ describe('Migration service', () => {
         description: 'Removing mailToken from profil',
         docTypes: PROFILE_DOCTYPE,
         releaseNotes: releaseNotes,
-        run: async (client: Client, docs: any[]): Promise<Profile[]> => {
+        run: (client: Client, docs: any[]): Profile[] => {
           return docs.map(doc => {
             if (doc.mailToken) {
               delete doc.mailToken
@@ -67,7 +67,7 @@ describe('Migration service', () => {
         description: 'Removing mailToken from profil',
         docTypes: PROFILE_DOCTYPE,
         releaseNotes: releaseNotes,
-        run: async (client: Client, docs: any[]): Promise<Profile[]> => {
+        run: (client: Client, docs: any[]): Profile[] => {
           return []
         },
       },
@@ -99,7 +99,7 @@ describe('Migration service', () => {
         description: 'Removing mailToken from profil',
         docTypes: PROFILE_DOCTYPE,
         releaseNotes: releaseNotes,
-        run: async (client: Client, docs: any[]): Promise<Profile[]> => {
+        run: (client: Client, docs: any[]): Profile[] => {
           return []
         },
       },
@@ -135,7 +135,7 @@ describe('Migration service', () => {
         description: 'Removing mailToken from profil',
         docTypes: PROFILE_DOCTYPE,
         releaseNotes: releaseNotes,
-        run: async (client: Client, docs: any[]): Promise<Profile[]> => {
+        run: (client: Client, docs: any[]): Profile[] => {
           return []
         },
       },
@@ -161,7 +161,7 @@ describe('Migration service', () => {
         description: 'Removing mailToken from profil',
         docTypes: PROFILE_DOCTYPE,
         releaseNotes: releaseNotes,
-        run: async (client: Client, docs: any[]): Promise<Profile[]> => {
+        run: (client: Client, docs: any[]): Profile[] => {
           return []
         },
       },
@@ -172,7 +172,7 @@ describe('Migration service', () => {
         description: 'Removing mailToken from profil',
         docTypes: PROFILE_DOCTYPE,
         releaseNotes: releaseNotes,
-        run: async (client: Client, docs: any[]): Promise<Profile[]> => {
+        run: (client: Client, docs: any[]): Profile[] => {
           return []
         },
       },
diff --git a/src/migrations/migration.service.ts b/src/migrations/migration.service.ts
index 757f9644727b3f045dcfa578f784c4c61432445b..0e7f051b019832ff0d8847e47bba311d58bd82cb 100644
--- a/src/migrations/migration.service.ts
+++ b/src/migrations/migration.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import { SCHEMAS_DOCTYPE } from 'doctypes'
 import { InitStepsErrors, ReleaseNotes, Schema } from 'models'
 import { logDuration } from 'utils/duration'
@@ -9,7 +9,7 @@ import {
   MIGRATION_RESULT_COMPLETE,
   MIGRATION_RESULT_FAILED,
 } from './migration.data'
-import { Migration, MigrationResult } from './migration.type'
+import { Migration } from './migration.type'
 
 export class MigrationService {
   private readonly _client: Client
@@ -31,7 +31,7 @@ export class MigrationService {
    * @returns Promise<number> Version number of schema
    */
   public async currentSchemaVersion(_client: Client): Promise<number> {
-    const query: QueryDefinition = Q(SCHEMAS_DOCTYPE)
+    const query = Q(SCHEMAS_DOCTYPE)
     const data: QueryResult<Schema[]> = await _client.query(query.limitBy(1))
     return data?.data[0]?.version || 0
   }
@@ -61,10 +61,7 @@ export class MigrationService {
 
       for (const migration of migrationsToRun) {
         // First attempt
-        const migrationResult: MigrationResult = await migrate(
-          migration,
-          this._client
-        )
+        const migrationResult = await migrate(migration, this._client)
         logApp.info(migrationLog(migration, migrationResult))
 
         if (migrationResult.type === MIGRATION_RESULT_FAILED) {
diff --git a/src/migrations/migration.spec.ts b/src/migrations/migration.spec.ts
index 03ae98d6611370f73800a205c7c26fea9b5aae44..a7535b3301b7fb48831633adf5f2e18d9fada632 100644
--- a/src/migrations/migration.spec.ts
+++ b/src/migrations/migration.spec.ts
@@ -20,7 +20,7 @@ describe('migration logger', () => {
     description: 'Removing mailToken from profil',
     docTypes: PROFILE_DOCTYPE,
     releaseNotes: null,
-    run: async (mockClient, docs: any[]): Promise<Profile[]> => {
+    run: (mockClient, docs: any[]): Profile[] => {
       return docs.map(doc => {
         if (doc.mailToken) {
           delete doc.mailToken
@@ -63,7 +63,7 @@ describe('migration', () => {
     description: 'Removing mailToken from profil',
     docTypes: PROFILE_DOCTYPE,
     releaseNotes: null,
-    run: async (mockClient, docs: any[]): Promise<Profile[]> => {
+    run: (mockClient, docs: any[]): Profile[] => {
       return docs.map(doc => {
         if (doc.GCUApprovalDate) {
           delete doc.GCUApprovalDate
@@ -160,7 +160,7 @@ describe('migration', () => {
       description: 'Removing mailToken from profil',
       docTypes: PROFILE_DOCTYPE,
       releaseNotes: null,
-      run: async (mockClient, docs: any[]): Promise<Profile[]> => {
+      run: (mockClient, docs: any[]): Profile[] => {
         return []
       },
     }
@@ -206,7 +206,7 @@ describe('migration create', () => {
       docTypes: FLUIDSPRICES_DOCTYPE,
       releaseNotes: null,
       isCreate: true,
-      run: async (): Promise<FluidPrice[]> => {
+      run: (): FluidPrice[] => {
         return []
       },
     }
diff --git a/src/migrations/migration.ts b/src/migrations/migration.ts
index 2129af07325c78f34319913811a8a5ea7afd928c..e79d15e3084d57328d0c3a83012b4e384a3c3d9e 100644
--- a/src/migrations/migration.ts
+++ b/src/migrations/migration.ts
@@ -25,7 +25,7 @@ function migrationNoop(): MigrationResult {
  * @returns Promise<number> Version number of schema
  */
 async function currentSchemaVersion(_client: Client): Promise<number> {
-  const query: QueryDefinition = Q(SCHEMAS_DOCTYPE)
+  const query = Q(SCHEMAS_DOCTYPE)
   const data: QueryResult<Schema[]> = await _client.query(query.limitBy(1))
   return data.data[0].version
 }
@@ -63,7 +63,7 @@ async function updateSchemaVersion(
   targetSchemaVersion: number
 ): Promise<void> {
   logApp.info('[Migration] Update schema version')
-  const query: QueryDefinition = Q(SCHEMAS_DOCTYPE)
+  const query = Q(SCHEMAS_DOCTYPE)
   const data: QueryResult<Schema[]> = await _client.query(query.limitBy(1))
   const doc = data.data[0]
   doc.version = targetSchemaVersion
@@ -74,9 +74,10 @@ async function updateSchemaVersion(
  * Save updated docs
  * @returns Promise<MigrationResult>
  */
+// eslint-disable-next-line @typescript-eslint/require-await
 async function save(_client: Client, docs: any[]): Promise<MigrationResult> {
   logApp.info('[Migration] Saving docs...')
-  const migrationResult: MigrationResult = migrationNoop()
+  const migrationResult = migrationNoop()
 
   if (docs.length) {
     logApp.info('[Migration] Saving docs...')
@@ -104,7 +105,7 @@ async function save(_client: Client, docs: any[]): Promise<MigrationResult> {
  * @returns Promise<number> Version number of schema
  */
 const schemaExist = async (_client: Client): Promise<boolean> => {
-  const query: QueryDefinition = Q(SCHEMAS_DOCTYPE)
+  const query = Q(SCHEMAS_DOCTYPE)
   const data: QueryResult<Schema[]> = await _client.query(query.limitBy(1))
   return data.data.length > 0 ? true : false
 }
@@ -141,7 +142,7 @@ export async function migrate(
   } else {
     let result: MigrationResult
     try {
-      const docToUpdate: any[] = await getDocs(
+      const docToUpdate = await getDocs(
         _client,
         migration.docTypes,
         migration.queryOptions
@@ -149,7 +150,7 @@ export async function migrate(
       if (migration.isDeprecated) {
         result = migrationNoop()
       } else if (docToUpdate.length && !migration.isCreate) {
-        const migratedDocs = await migration.run(_client, docToUpdate)
+        const migratedDocs = migration.run(_client, docToUpdate)
         if (migratedDocs.length) {
           result = await save(_client, migratedDocs)
         } else {
@@ -161,7 +162,7 @@ export async function migrate(
 
       // Handle new doctype creation
       if (migration.isCreate && !migration.isDeprecated) {
-        await migration.run(_client, docToUpdate)
+        migration.run(_client, docToUpdate)
         result = { type: MIGRATION_RESULT_COMPLETE, errors: [] }
       }
 
diff --git a/src/migrations/migration.type.ts b/src/migrations/migration.type.ts
index e4b7a93c41f4cc840d720efd63179e1c8abace36..dca5840cc02c01d7360d652ee1ecbc3e9972d0c8 100644
--- a/src/migrations/migration.type.ts
+++ b/src/migrations/migration.type.ts
@@ -3,7 +3,7 @@ import { Notes } from 'models'
 
 type SchemaVersion = number
 
-export type MigrationData = {
+export interface MigrationData {
   errors: any[]
 }
 export interface MigrationNoop extends MigrationData {
@@ -21,7 +21,7 @@ export type MigrationResult =
   | MigrationComplete
   | MigrationFailed
 
-export type Migration = {
+export interface Migration {
   baseSchemaVersion: SchemaVersion
   targetSchemaVersion: SchemaVersion
   description: string
@@ -33,10 +33,10 @@ export type Migration = {
   queryOptions?: MigrationQueryOptions
   isEmpty?: boolean
   appVersion: string
-  run: (_client: Client, docs: any[]) => Promise<any[]>
+  run: (_client: Client, docs: any[]) => any[]
 }
 
-export type MigrationQueryOptions = {
+export interface MigrationQueryOptions {
   scope: string
   tag: string
   limit: number
diff --git a/src/models/analysis.model.ts b/src/models/analysis.model.ts
index 62a9391f40499daef1d5aa106ff40703e5a6f729..5eb6c6cb7945998d550ee2f4e7ff3d7ae2c35485 100644
--- a/src/models/analysis.model.ts
+++ b/src/models/analysis.model.ts
@@ -3,4 +3,5 @@ import { DateTime } from 'luxon'
 export interface AnalysisState {
   period: 'month' | 'year'
   analysisMonth: DateTime
+  haveSeenNewsletterReminder: boolean
 }
diff --git a/src/models/initialisationSteps.model.ts b/src/models/initialisationSteps.model.ts
index fd9cb97b414f2aab8c18118ad913e2d31de9783e..3635dd515418cabfae4b938f50591602d2ecd89d 100644
--- a/src/models/initialisationSteps.model.ts
+++ b/src/models/initialisationSteps.model.ts
@@ -1,10 +1,7 @@
 export enum InitSteps {
-  MIGRATION,
-  CONSENT,
-  PROFILE,
-  CHALLENGES,
-  PRICES, // never used
-  CONSOS,
+  PROFILE = 'profile',
+  MIGRATION = 'migration',
+  CHALLENGES = 'challenges',
 }
 export enum InitStepsErrors {
   MIGRATION_ERROR = 'migration_error',
diff --git a/src/models/profile.model.ts b/src/models/profile.model.ts
index c041fb23a5f8acd5a20d4cf83dc48a518374bad1..0b0abd58b8f62f998260e44b19df0ebbc18a70df 100644
--- a/src/models/profile.model.ts
+++ b/src/models/profile.model.ts
@@ -15,6 +15,7 @@ export interface ProfileEntity {
   lastConnectionDate: string
   haveSeenLastAnalysis: boolean
   sendAnalysisNotification: boolean
+  isAnalysisReminderEnabled: boolean
   monthlyAnalysisDate: string
   sendConsumptionAlert: boolean
   waterDailyConsumptionLimit: number
diff --git a/src/notifications/monthlyReport.hbs b/src/notifications/monthlyReport.hbs
index bce1313b6182d34ed9da8b18b1962314be2458ec..e2030c55f045c7ba13c1ae869792f1d385df669f 100644
--- a/src/notifications/monthlyReport.hbs
+++ b/src/notifications/monthlyReport.hbs
@@ -24,6 +24,9 @@
     <mj-section background-color="#121212">
       <mj-column padding="0 32px" vertical-align="middle">
         <mj-image src={{consoImageUrl}} width="132px" align="center" alt="consommation"></mj-image>
+        {{#unless comparisonExist }}
+          <mj-text color="#E3B82A" font-weight="900" font-size="20px" align="center">Oups !</mj-text>
+        {{/unless}}
         <mj-text color="white" font-weight="900" font-size="24px">
           Bonjour {{username}},
         </mj-text>
@@ -42,12 +45,22 @@
             </mj-text>
           {{/if}}
         {{/if}}
-        <mj-text color="#A0A0A0" font-weight="400" font-size="18px" align="center">Retrouvez le détail de vos consommations et plus d’informations dans votre bilan Ecolyo.</mj-text>
-        <mj-social css-class="button-with-icon" icon-size="32px" mode="horizontal" font-size="20px" font-weight="700">
-          <mj-social-element src="{{baseUrl}}/assets/ecolyo-icon.png" name="ecolyo" padding="0 10px 0 0" href="{{clientUrl}}">
-            J’ouvre mon Ecolyo
-          </mj-social-element>
-        </mj-social>
+        {{#if comparisonExist }}
+          <mj-text color="#A0A0A0" font-weight="400" font-size="18px" align="center">Retrouvez le détail de vos consommations et plus d’informations dans votre bilan Ecolyo.</mj-text>
+          <mj-social css-class="button-with-icon" icon-size="32px" mode="horizontal" font-size="20px" font-weight="700">
+            <mj-social-element src="{{baseUrl}}/assets/ecolyo-icon.png" name="ecolyo" padding="0 10px 0 0" href="{{clientUrl}}">
+              J’ouvre mon Ecolyo
+            </mj-social-element>
+          </mj-social>
+        {{/if}}
+        {{#unless comparisonExist }}
+          <mj-text color="white" font-weight="400" font-size="18px">Nous avons constaté que vous n'avez aucun compteur connecté. Sans accès à vos données de consommation, Ecolyo ne peut pas établir de bilan individuel de celles-ci.</mj-text>
+          <mj-social css-class="button-with-icon" icon-size="32px" mode="horizontal" font-size="20px" font-weight="700">
+            <mj-social-element src="{{baseUrl}}/assets/ecolyo-icon.png" name="ecolyo" padding="0 10px 0 0" href="{{clientUrl}}">
+              Je connecte un compteur
+            </mj-social-element>
+          </mj-social>
+        {{/unless}}
       </mj-column>
     </mj-section>
     {{#if isContent}}
diff --git a/src/notifications/style.hbs b/src/notifications/style.hbs
index b1b78eb982639ca0ea1dcfda5871e2063e0c14be..542bdaceb0a1b503862cde676b64799520aa1ef3 100644
--- a/src/notifications/style.hbs
+++ b/src/notifications/style.hbs
@@ -17,10 +17,10 @@
   .button table { background-color: #F1C017 !important; margin: 10px !important;
   } .button-with-icon td { padding-right: 1px !important; } .button-with-icon
   table { background-color: #F1C017 !important; margin-left: 10px !important;
-  margin-right: 10px !important; } .button-with-icon span { vertical-align:
-  middle !important; } .button-with-icon a { vertical-align: middle !important;
-  padding-right: 10px !important;} .button-with-icon a img { padding-top: 20px
-  !important;}
+  margin-right: 10px !important; border-radius: 2px !important; }
+  .button-with-icon span { vertical-align: middle !important; }
+  .button-with-icon a { vertical-align: middle !important; padding-right: 10px
+  !important;} .button-with-icon a img { padding-top: 20px !important;}
 </mj-style>
 <mj-style>
   .custom-link a { color: #F1C017 !important; text-decoration: none !important;
diff --git a/src/services/account.service.ts b/src/services/account.service.ts
index 3f3c782df013c3a84d670bb751526369e09dd119..7fa566503377b5e606400e56d7b1c64ed32ee754 100644
--- a/src/services/account.service.ts
+++ b/src/services/account.service.ts
@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import {
   createAccount,
   deleteAccount,
@@ -36,7 +36,10 @@ export default class AccountService {
     konnector: Konnector,
     authData: AccountEGLData | AccountSgeData | AccountGRDFData
   ): Promise<Account> {
-    const accountAttributes: AccountAttributes = build(konnector, authData)
+    const accountAttributes: AccountAttributes = await build(
+      konnector,
+      authData
+    )
     return createAccount(this._client, konnector, accountAttributes)
   }
 
@@ -55,7 +58,7 @@ export default class AccountService {
 
   public async getAccountByType(type: string): Promise<Account | null> {
     try {
-      const query: QueryDefinition = Q(ACCOUNTS_DOCTYPE).where({
+      const query = Q(ACCOUNTS_DOCTYPE).where({
         account_type: type,
       })
       // .indexFields(['account_type'])
@@ -70,7 +73,7 @@ export default class AccountService {
           )
         )
         // Keep the accountId which have the older trigger
-        let olderDate: DateTime = DateTime.now()
+        let olderDate = DateTime.now()
         let olderAccountId: string | null = null
         for (const _trigger of triggers) {
           if (
@@ -86,7 +89,7 @@ export default class AccountService {
           }
         }
         // Retrieve the accountId and return it
-        const filteredAccounts: Account[] = accounts.filter(
+        const filteredAccounts = accounts.filter(
           _account => _account._id === olderAccountId
         )
         return filteredAccounts[0] ? filteredAccounts[0] : null
@@ -104,7 +107,7 @@ export default class AccountService {
 
   public async getAccountsByType(type: string): Promise<Account[]> {
     try {
-      const query: QueryDefinition = Q(ACCOUNTS_DOCTYPE).where({
+      const query = Q(ACCOUNTS_DOCTYPE).where({
         account_type: type,
       })
       // .indexFields(['account_type'])
@@ -147,7 +150,7 @@ export default class AccountService {
   }
 
   public async createIndexAccount(): Promise<[]> {
-    const query: QueryDefinition = Q(ACCOUNTS_DOCTYPE)
+    const query = Q(ACCOUNTS_DOCTYPE)
       .where({ account_type: 'index' })
       // .indexFields(['account_type'])
       .limitBy(1)
diff --git a/src/services/action.service.ts b/src/services/action.service.ts
index 644197d670f148d9f95189f18b40fdf3e03d2ec6..7e42a3e37a152a2cc000c478d99bd01e6d007136 100644
--- a/src/services/action.service.ts
+++ b/src/services/action.service.ts
@@ -27,10 +27,10 @@ export default class ActionService {
    * Get the list of available actions
    */
   public async getAvailableActionList(): Promise<Ecogesture[]> {
-    const userChallenges: UserChallenge[] =
+    const userChallenges =
       await this._challengeService.getAllUserChallengeEntities()
     const ecogestures = await this._ecogestureService.getAllEcogestures()
-    const actionsListIds: string[] = ecogestures
+    const actionsListIds = ecogestures
       .filter(ecogesture => ecogesture.action === true)
       .map(action => action._id)
 
@@ -165,10 +165,10 @@ export default class ActionService {
     return userAction
   }
   /**
-   * awaitNotificationAction
+   * Return userAction with updated state to UserActionState.NOTIFICATION
    * @returns {UserAction} updated user action
    */
-  public awaitNotificationAction(userAction: UserAction): UserAction {
+  public setNotificationAction(userAction: UserAction): UserAction {
     const updatedUserAction: UserAction = {
       ...userAction,
       state: UserActionState.NOTIFICATION,
@@ -196,16 +196,15 @@ export default class ActionService {
       currentChallenge.action.startDate &&
       currentChallenge.action.ecogesture
     ) {
-      const startDate: DateTime = currentChallenge.action.startDate
+      const startDate = currentChallenge.action.startDate
       const duration = currentChallenge.action.ecogesture.actionDuration
       const progress = -startDate.startOf('day').diffNow('days').days
       if (progress >= duration) {
         const challengeService = new ChallengeService(this._client)
-        const userChallenge: UserChallenge =
-          await challengeService.updateUserChallenge(
-            currentChallenge,
-            UserChallengeUpdateFlag.ACTION_NOTIFICATION
-          )
+        const userChallenge = await challengeService.updateUserChallenge(
+          currentChallenge,
+          UserChallengeUpdateFlag.ACTION_NOTIFICATION
+        )
         return userChallenge
       } else return null
     } else return null
diff --git a/src/services/challenge.service.spec.ts b/src/services/challenge.service.spec.ts
index 146d9121abe367e994c7e466661b2d5221eddd7b..68964b9d7545d9d1e87b41c2cddc69edbc920643 100644
--- a/src/services/challenge.service.spec.ts
+++ b/src/services/challenge.service.spec.ts
@@ -60,7 +60,7 @@ jest.mock('./exploration.service', () => {
     getExplorationEntityById: mockGetExplorationEntityById,
     parseExplorationEntityToUserExploration:
       mockParseExplorationEntityToUserExploration,
-    getUserExplorationfromExplorationEntities:
+    getUserExplorationFromExplorationEntities:
       mockGetUserExplorationFromExplorationEntities,
   }))
 })
@@ -474,14 +474,14 @@ describe('Challenge service', () => {
           ],
         },
       ]
-      it('should return isDone = true, isWin = true and isEmpty=false when userConsumption < threshold', async () => {
-        const result = await challengeService.isChallengeDone(
+      it('should return isDone = true, isWin = true and isEmpty=false when userConsumption < threshold', () => {
+        const result = challengeService.isChallengeDone(
           userChallenge,
           dataloads
         )
         expect(result).toEqual({ isDone: true, isWin: true })
       })
-      it('should return isDone = true, isWin = false when userConsumption >= threshold', async () => {
+      it('should return isDone = true, isWin = false when userConsumption >= threshold', () => {
         const updatedUserChallenge = {
           ...userChallenge,
           duel: {
@@ -490,7 +490,7 @@ describe('Challenge service', () => {
             userConsumption: 200,
           },
         }
-        const result = await challengeService.isChallengeDone(
+        const result = challengeService.isChallengeDone(
           updatedUserChallenge,
           dataloads
         )
@@ -559,15 +559,15 @@ describe('Challenge service', () => {
           ],
         },
       ]
-      it('should return isDone = true, isWin = true when all data are available and userConsumption < threshold', async () => {
-        const result = await challengeService.isChallengeDone(
+      it('should return isDone = true, isWin = true when all data are available and userConsumption < threshold', () => {
+        const result = challengeService.isChallengeDone(
           userChallenge,
           dataloads
         )
         expect(result).toEqual({ isDone: true, isWin: true })
       })
 
-      it('should return isDone = true and isWin = false when all data are available and userConsumption >= threshold', async () => {
+      it('should return isDone = true and isWin = false when all data are available and userConsumption >= threshold', () => {
         const updatedUserChallenge = {
           ...userChallenge,
           duel: {
@@ -576,30 +576,30 @@ describe('Challenge service', () => {
             userConsumption: 200,
           },
         }
-        const result = await challengeService.isChallengeDone(
+        const result = challengeService.isChallengeDone(
           updatedUserChallenge,
           dataloads
         )
         expect(result).toEqual({ isDone: true, isWin: false })
       })
-      it('should return isDone = false and isWin = false when last data is not available', async () => {
+      it('should return isDone = false and isWin = false when last data is not available', () => {
         const updatedDataloads = cloneDeep(dataloads)
         updatedDataloads[2].value = -1
         updatedDataloads[2].valueDetail = null
-        const result = await challengeService.isChallengeDone(
+        const result = challengeService.isChallengeDone(
           userChallenge,
           updatedDataloads
         )
         expect(result).toEqual({ isDone: false, isWin: false })
       })
-      it('should return isDone = false and isWin = false when data in the middle is not available', async () => {
+      it('should return isDone = false and isWin = false when data in the middle is not available', () => {
         const updatedDataloads = cloneDeep(dataloads)
         updatedDataloads[1].valueDetail = [
           { value: 20.0, state: DataloadState.VALID },
           { value: -1, state: DataloadState.MISSING },
           { value: 10.0, state: DataloadState.VALID },
         ]
-        const result = await challengeService.isChallengeDone(
+        const result = challengeService.isChallengeDone(
           userChallenge,
           updatedDataloads
         )
diff --git a/src/services/challenge.service.ts b/src/services/challenge.service.ts
index 516c73913b2e54bea6e268f8df0a5c7f5678c349..b15f55d06e6057b81b3ba12a99bad8493367a4dd 100644
--- a/src/services/challenge.service.ts
+++ b/src/services/challenge.service.ts
@@ -1,10 +1,9 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import { CHALLENGE_DOCTYPE, USERCHALLENGE_DOCTYPE } from 'doctypes'
 import {
   FluidState,
-  FluidType,
   TimeStep,
   UserActionState,
   UserChallengeState,
@@ -16,7 +15,6 @@ import {
 import { DateTime } from 'luxon'
 import {
   ChallengeEntity,
-  Datachart,
   Dataload,
   DuelEntity,
   Ecogesture,
@@ -153,12 +151,12 @@ export default class ChallengeService {
    * @param {UserExploration | ExplorationEntity} exploration - Exploration to be tested
    * @returns {boolean} isValid
    */
-  public async isExplorationConditionVerified(
+  public isExplorationConditionVerified(
     exploration: UserExploration | ExplorationEntity,
     fluidStatus: FluidStatus[]
-  ): Promise<boolean> {
+  ): boolean {
     let isValid = false
-    const fluidCondition: FluidType[] = exploration.fluid_condition
+    const fluidCondition = exploration.fluid_condition
     // check if the fluid is connected
     if (
       fluidStatus[fluidCondition[0]].status !==
@@ -171,15 +169,14 @@ export default class ChallengeService {
   }
 
   /**
-   *
    * @param {ChallengeEntity} challenge - get all relations entities of a challenge
    */
-  public async getRelationEntities(
+  public getRelationEntities(
     challenge: ChallengeEntity
-  ): Promise<RelationEntitiesObject> {
-    const duelEntityRelation: Relation = getRelationship(challenge, 'duel')
-    const quizEntityRelation: Relation = getRelationship(challenge, 'quiz')
-    const explorationEntityRelation: Relation[] = getRelationshipHasMany(
+  ): RelationEntitiesObject {
+    const duelEntityRelation = getRelationship(challenge, 'duel')
+    const quizEntityRelation = getRelationship(challenge, 'quiz')
+    const explorationEntityRelation = getRelationshipHasMany(
       challenge,
       'exploration'
     )
@@ -194,17 +191,17 @@ export default class ChallengeService {
   /**
    * Get a UserChallenge from its Entity and verify the exploration if there is a condition and if it's verified
    */
-  public async getUpdatedUserChallengeIfExplorationConditionIsValid(
+  public getUpdatedUserChallengeIfExplorationConditionIsValid(
     exploration: UserExploration,
     challenge: ChallengeEntity,
     duel: UserDuel,
     quiz: UserQuiz,
     fluidStatus: FluidStatus[]
-  ): Promise<UserChallenge | undefined> {
+  ): UserChallenge | undefined {
     let userChallenge: UserChallenge | null = null
     // Check if it's a conditional exploration
     if (exploration.fluid_condition.length > 0) {
-      const isConditionVerified = await this.isExplorationConditionVerified(
+      const isConditionVerified = this.isExplorationConditionVerified(
         exploration,
         fluidStatus
       )
@@ -234,7 +231,7 @@ export default class ChallengeService {
    * Exploration related to given challenge
    * @returns {UserChallenge[]} - buildList
    */
-  public async processExploration(
+  public processExploration(
     explorationEntities: ExplorationEntity[] | undefined,
     explorationEntityRelation: Relation[],
     challenge: ChallengeEntity,
@@ -242,16 +239,16 @@ export default class ChallengeService {
     quiz: UserQuiz,
     buildList: UserChallenge[],
     fluidStatus: FluidStatus[]
-  ): Promise<UserChallenge[]> {
+  ): UserChallenge[] {
     const explorationService = new ExplorationService(this._client)
     for (const explorationRelation of explorationEntityRelation) {
-      const exploration: UserExploration =
-        explorationService.getUserExplorationfromExplorationEntities(
+      const exploration =
+        explorationService.getUserExplorationFromExplorationEntities(
           explorationEntities || [],
           explorationRelation._id
         )
       const userChallenge =
-        await this.getUpdatedUserChallengeIfExplorationConditionIsValid(
+        this.getUpdatedUserChallengeIfExplorationConditionIsValid(
           exploration,
           challenge,
           duel,
@@ -283,12 +280,12 @@ export default class ChallengeService {
       for (const relation of relationsArray.data) {
         const newExploEntity =
           await explorationService.getExplorationEntityById(relation._id)
-        const newUserExplo: UserExploration =
+        const newUserExplo =
           explorationService.parseExplorationEntityToUserExploration(
             newExploEntity
           )
         if (newExploEntity.fluid_condition.length > 0) {
-          const isConditionValid = await this.isExplorationConditionVerified(
+          const isConditionValid = this.isExplorationConditionVerified(
             newExploEntity,
             fluidStatus
           )
@@ -318,15 +315,11 @@ export default class ChallengeService {
   public async buildUserChallengeList(
     fluidStatus: FluidStatus[]
   ): Promise<UserChallenge[]> {
-    const queryChallengeEntity: QueryDefinition = Q(CHALLENGE_DOCTYPE).include([
-      'duel',
+    const queryChallengeEntity = Q(CHALLENGE_DOCTYPE).include(['duel'])
+    const querySeasonEntityIncludeQuiz = Q(CHALLENGE_DOCTYPE).include(['quiz'])
+    const querySeasonEntityIncludeExploration = Q(CHALLENGE_DOCTYPE).include([
+      'exploration',
     ])
-    const querySeasonEntityIncludeQuiz: QueryDefinition = Q(
-      CHALLENGE_DOCTYPE
-    ).include(['quiz'])
-    const querySeasonEntityIncludeExploration: QueryDefinition = Q(
-      CHALLENGE_DOCTYPE
-    ).include(['exploration'])
     const {
       data: challengeEntityList,
       included: duelEntities,
@@ -341,8 +334,7 @@ export default class ChallengeService {
     }: QueryResult<ChallengeEntity[], QuizEntity[]> = await this._client.query(
       querySeasonEntityIncludeQuiz
     )
-    const userChallengeList: UserChallenge[] =
-      await this.getAllUserChallengeEntities()
+    const userChallengeList = await this.getAllUserChallengeEntities()
     const duelService = new DuelService(this._client)
     const quizService = new QuizService(this._client)
     const explorationService = new ExplorationService(this._client)
@@ -350,19 +342,19 @@ export default class ChallengeService {
     // Case UserChallengeList is empty
     if (challengeEntityList.length > 0 && userChallengeList.length === 0) {
       for (const challenge of challengeEntityList) {
-        const relationEntities = await this.getRelationEntities(challenge)
-        const duel: UserDuel = duelService.getDuelfromDuelEntities(
+        const relationEntities = this.getRelationEntities(challenge)
+        const duel = duelService.getDuelFromDuelEntities(
           duelEntities || [],
           relationEntities.duelEntityRelation._id
         )
-        const quiz: UserQuiz = quizService.getUserQuizfromQuizEntities(
+        const quiz = quizService.getUserQuizFromQuizEntities(
           quizEntities || [],
           relationEntities.quizEntityRelation._id
         )
         // Only one exploration relation
         if (relationEntities.explorationEntityRelation.length === 1) {
-          const exploration: UserExploration =
-            explorationService.getUserExplorationfromExplorationEntities(
+          const exploration =
+            explorationService.getUserExplorationFromExplorationEntities(
               explorationEntities || [],
               relationEntities.explorationEntityRelation[0]._id
             )
@@ -376,7 +368,7 @@ export default class ChallengeService {
         }
         // Several explorations with fluid condition
         else {
-          await this.processExploration(
+          this.processExploration(
             explorationEntities,
             relationEntities.explorationEntityRelation,
             challenge,
@@ -396,8 +388,7 @@ export default class ChallengeService {
           entity => entity.id === challenge.id
         )
         if (userChallengeIndex >= 0) {
-          let userChallenge: UserChallenge =
-            userChallengeList[userChallengeIndex]
+          let userChallenge = userChallengeList[userChallengeIndex]
           userChallenge = await this.loopVerificationExplorationCondition(
             userChallenge,
             challengeEntityList,
@@ -405,16 +396,16 @@ export default class ChallengeService {
           )
           buildList.push(userChallenge)
         } else {
-          const relationEntities = await this.getRelationEntities(challenge)
-          const duel: UserDuel = duelService.getDuelfromDuelEntities(
+          const relationEntities = this.getRelationEntities(challenge)
+          const duel = duelService.getDuelFromDuelEntities(
             duelEntities || [],
             relationEntities.duelEntityRelation._id
           )
-          const quiz: UserQuiz = quizService.getUserQuizfromQuizEntities(
+          const quiz = quizService.getUserQuizFromQuizEntities(
             quizEntities || [],
             relationEntities.quizEntityRelation._id
           )
-          await this.processExploration(
+          this.processExploration(
             explorationEntities,
             relationEntities.explorationEntityRelation,
             challenge,
@@ -434,7 +425,7 @@ export default class ChallengeService {
    * Retrieve all ChallengeEntities
    */
   public async getAllChallengeEntities(): Promise<ChallengeEntity[]> {
-    const query: QueryDefinition = Q(CHALLENGE_DOCTYPE)
+    const query = Q(CHALLENGE_DOCTYPE)
     const { data: challenges }: QueryResult<ChallengeEntity[]> =
       await this._client.query(query)
     return challenges
@@ -467,12 +458,11 @@ export default class ChallengeService {
    * Retrieve all UserChallengeEntities
    */
   public async getAllUserChallengeEntities(): Promise<UserChallenge[]> {
-    const query: QueryDefinition = Q(USERCHALLENGE_DOCTYPE)
+    const query = Q(USERCHALLENGE_DOCTYPE)
     const { data: userChallengeEntities }: QueryResult<UserChallengeEntity[]> =
       await this._client.query(query)
-    const userChallenges: UserChallenge[] = userChallengeEntities.map(
-      userChallengeEntity =>
-        this.parseUserChallengeEntityToUserChallenge(userChallengeEntity)
+    const userChallenges = userChallengeEntities.map(userChallengeEntity =>
+      this.parseUserChallengeEntityToUserChallenge(userChallengeEntity)
     )
     return userChallenges
   }
@@ -545,8 +535,9 @@ export default class ChallengeService {
         USERCHALLENGE_DOCTYPE,
         newChallenge
       )
-      const updatedUserChallenge: UserChallenge =
-        this.parseUserChallengeEntityToUserChallenge(updatedUserChallengeEntity)
+      const updatedUserChallenge = this.parseUserChallengeEntityToUserChallenge(
+        updatedUserChallengeEntity
+      )
       return updatedUserChallenge
     } catch (error) {
       const errorMessage = `Challenge service error on startUserChallenge: ${JSON.stringify(
@@ -570,7 +561,7 @@ export default class ChallengeService {
     userChallenge: UserChallenge,
     flag: UserChallengeUpdateFlag,
     quizWithUpdatedQuestions?: UserQuiz,
-    fluidStatus?: Array<FluidStatus>,
+    fluidStatus?: FluidStatus[],
     action?: Ecogesture
   ): Promise<UserChallenge> {
     let updatedUserChallenge: UserChallenge
@@ -588,7 +579,7 @@ export default class ChallengeService {
         updatedUserChallenge = userChallenge
         break
       case UserChallengeUpdateFlag.DUEL_UNLOCK:
-        updatedDuel = await duelService.unlockUserDuel(userChallenge.duel)
+        updatedDuel = duelService.unlockUserDuel(userChallenge.duel)
         updatedUserChallenge = {
           ...userChallenge,
           state: UserChallengeState.DUEL,
@@ -607,7 +598,7 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.DUEL_START:
-        updatedDuel = await duelService.startUserDuel(userChallenge.duel)
+        updatedDuel = duelService.startUserDuel(userChallenge.duel)
         updatedUserChallenge = {
           ...userChallenge,
           state: UserChallengeState.DUEL,
@@ -615,7 +606,7 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.DUEL_WIN:
-        updatedDuel = await duelService.endUserDuel(userChallenge.duel)
+        updatedDuel = duelService.endUserDuel(userChallenge.duel)
         updatedUserChallenge = {
           ...userChallenge,
           state: UserChallengeState.DONE,
@@ -629,7 +620,7 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.DUEL_LOSS:
-        updatedDuel = await duelService.endUserDuel(userChallenge.duel)
+        updatedDuel = duelService.endUserDuel(userChallenge.duel)
         updatedUserChallenge = {
           ...userChallenge,
           state: UserChallengeState.DONE,
@@ -643,7 +634,7 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.DUEL_RESET:
-        updatedDuel = await duelService.resetUserDuel(userChallenge.duel)
+        updatedDuel = duelService.resetUserDuel(userChallenge.duel)
         updatedUserChallenge = {
           ...userChallenge,
           state: UserChallengeState.DUEL,
@@ -652,7 +643,7 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.QUIZ_START:
-        updatedQuiz = await quizService.startUserQuiz(userChallenge.quiz)
+        updatedQuiz = quizService.startUserQuiz(userChallenge.quiz)
         updatedUserChallenge = {
           ...userChallenge,
           quiz: updatedQuiz,
@@ -660,7 +651,7 @@ export default class ChallengeService {
         break
       case UserChallengeUpdateFlag.QUIZ_DONE: {
         const updateQuizProgress = Math.min(userChallenge.quiz.result, 5)
-        updatedQuiz = await quizService.endUserQuiz(userChallenge.quiz)
+        updatedQuiz = quizService.endUserQuiz(userChallenge.quiz)
         updatedUserChallenge = {
           ...userChallenge,
           quiz: updatedQuiz,
@@ -680,14 +671,14 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.QUIZ_RESET:
-        updatedQuiz = await quizService.resetUserQuiz(userChallenge.quiz)
+        updatedQuiz = quizService.resetUserQuiz(userChallenge.quiz)
         updatedUserChallenge = {
           ...userChallenge,
           quiz: updatedQuiz,
         }
         break
       case UserChallengeUpdateFlag.EXPLORATION_START:
-        updatedExploration = await explorationService.startUserExploration(
+        updatedExploration = explorationService.startUserExploration(
           userChallenge.exploration
         )
         updatedUserChallenge = {
@@ -696,7 +687,7 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.EXPLORATION_UPDATE:
-        updatedExploration = await explorationService.updateUserExploration(
+        updatedExploration = explorationService.updateUserExploration(
           userChallenge.exploration
         )
         updatedUserChallenge = {
@@ -705,10 +696,9 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.EXPLORATION_NOTIFICATION:
-        updatedExploration =
-          await explorationService.awaitNotificationUserExploration(
-            userChallenge.exploration
-          )
+        updatedExploration = explorationService.setNotificationUserExploration(
+          userChallenge.exploration
+        )
         updatedUserChallenge = {
           ...userChallenge,
           exploration: updatedExploration,
@@ -738,7 +728,7 @@ export default class ChallengeService {
         }
         break
       case UserChallengeUpdateFlag.ACTION_NOTIFICATION:
-        updatedAction = actionService.awaitNotificationAction(
+        updatedAction = actionService.setNotificationAction(
           userChallenge.action
         )
         updatedUserChallenge = {
@@ -765,7 +755,7 @@ export default class ChallengeService {
     try {
       const { data: userChallengeEntity }: QueryResult<UserChallengeEntity> =
         await this._client.save(updatedUserChallenge)
-      const result: UserChallenge =
+      const result =
         this.parseUserChallengeEntityToUserChallenge(userChallengeEntity)
       return result
     } catch (error) {
@@ -782,7 +772,6 @@ export default class ChallengeService {
   /**
    * Retrieve the dataload for a UserChallenge with duel ongoing
    * @param {UserChallenge} userChallenge - userChallenge to update
-   * @param {UserChallengeUpdateFlag} flag - update flag
    */
   public async getUserChallengeDataload(
     userChallenge: UserChallenge
@@ -795,14 +784,12 @@ export default class ChallengeService {
           day: userChallenge.duel.duration.days - 1,
         }),
       }
-      const dataChart: Datachart | null = await consumptionService.getGraphData(
+      const dataChart = await consumptionService.getGraphData({
         timePeriod,
-        TimeStep.DAY,
-        userChallenge.duel.fluidTypes,
-        undefined,
-        undefined,
-        true
-      )
+        timeStep: TimeStep.DAY,
+        fluidTypes: userChallenge.duel.fluidTypes,
+        isHome: true,
+      })
       if (dataChart) {
         return dataChart.actualData
       }
@@ -815,13 +802,13 @@ export default class ChallengeService {
    * @param {UserChallenge} userChallenge - current userChallenge
    * @param {Dataload[]} dataloads - dataloads of current challenge
    */
-  public async isChallengeDone(
+  public isChallengeDone(
     userChallenge: UserChallenge,
     dataloads: Dataload[]
-  ): Promise<{
+  ): {
     isDone: boolean
     isWin: boolean
-  }> {
+  } {
     let isDone = false
     let isWin = false
     if (
@@ -861,7 +848,7 @@ export default class ChallengeService {
           dataloads[duration - 1].value !== -1
         ) {
           isDone = true
-          dataloads.forEach((d: Dataload) => {
+          dataloads.forEach(d => {
             if (
               d.value === -1 ||
               (d.valueDetail &&
diff --git a/src/services/consumption.service.spec.ts b/src/services/consumption.service.spec.ts
index ca2d8e95b09bbf47ca5c6ba09717109840ad0865..149ae17033714183500eca4af8991f82b783df1a 100644
--- a/src/services/consumption.service.spec.ts
+++ b/src/services/consumption.service.spec.ts
@@ -10,6 +10,7 @@ import {
   FluidStatus,
   TimePeriod,
 } from 'models'
+import { mockAvgTemperature } from 'tests/__mocks__/avgTemperature.mock'
 import mockClient from 'tests/__mocks__/client.mock'
 import {
   fetchDayDataComplete,
@@ -20,6 +21,7 @@ import { fluidStatusConnectedData } from 'tests/__mocks__/fluidStatusData.mock'
 import { loadDayData } from 'tests/__mocks__/loadDayData.mock'
 import { allFluids } from 'utils/utils'
 import ConsumptionDataManager from './consumption.service'
+import ConsumptionValidatorService from './consumptionValidator.service'
 
 const mockFetchFluidData = jest.fn()
 const mockFetchFluidMaxData = jest.fn()
@@ -77,15 +79,15 @@ describe('Consumption service', () => {
   ]
 
   describe('getGraphData method', () => {
-    it('should return null', async () => {
-      const result = await consumptionDataManager.getGraphData(
-        mockTimePeriod,
-        TimeStep.DAY,
-        [],
-        [],
-        mockTimePeriodComparison,
-        false
-      )
+    it('should return null because input is invalid', async () => {
+      const result = await consumptionDataManager.getGraphData({
+        timePeriod: mockTimePeriod,
+        timeStep: TimeStep.DAY,
+        fluidTypes: [],
+        fluidStatus: [],
+        compareTimePeriod: mockTimePeriodComparison,
+        isHome: false,
+      })
       expect(result).toBeNull()
     })
     it('should return a mapped data for one fluid', async () => {
@@ -134,14 +136,14 @@ describe('Consumption service', () => {
           },
         ],
       }
-      const result = await consumptionDataManager.getGraphData(
-        mockTimePeriod,
-        TimeStep.DAY,
+      const result = await consumptionDataManager.getGraphData({
+        timePeriod: mockTimePeriod,
+        timeStep: TimeStep.DAY,
         fluidTypes,
         fluidStatus,
-        mockTimePeriodComparison,
-        false
-      )
+        compareTimePeriod: mockTimePeriodComparison,
+        isHome: false,
+      })
       expect(result).toEqual(mockResult)
     })
 
@@ -210,14 +212,14 @@ describe('Consumption service', () => {
           },
         ],
       }
-      const result = await consumptionDataManager.getGraphData(
-        mockTimePeriod,
-        TimeStep.DAY,
-        allFluids,
+      const result = await consumptionDataManager.getGraphData({
+        timePeriod: mockTimePeriod,
+        timeStep: TimeStep.DAY,
+        fluidTypes: allFluids,
         fluidStatus,
-        mockTimePeriodComparison,
-        true
-      )
+        compareTimePeriod: mockTimePeriodComparison,
+        isHome: true,
+      })
       expect(result).toEqual(mockResult)
     })
     it('should return a mapped data for multi fluid without comparison date', async () => {
@@ -252,41 +254,46 @@ describe('Consumption service', () => {
         ],
         comparisonData: [],
       }
-      mockFetchFluidData.mockResolvedValue(mockFetchDataActual)
-      const result = await consumptionDataManager.getGraphData(
-        mockTimePeriod,
-        TimeStep.DAY,
-        allFluids,
-        fluidStatus
-      )
+      mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
+      mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
+      mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
+      const result = await consumptionDataManager.getGraphData({
+        timePeriod: mockTimePeriod,
+        timeStep: TimeStep.DAY,
+        fluidTypes: allFluids,
+        fluidStatus,
+      })
       expect(result).toEqual(mockResult)
     })
     it('should return null because of wrong parameters', async () => {
       const fluidTypes = [FluidType.WATER]
-      const result = await consumptionDataManager.getGraphData(
-        mockTimePeriod,
-        TimeStep.HALF_AN_HOUR,
+      const result = await consumptionDataManager.getGraphData({
+        timePeriod: mockTimePeriod,
+        timeStep: TimeStep.HALF_AN_HOUR,
         fluidTypes,
         fluidStatus,
-        mockTimePeriodComparison,
-        true
-      )
+        compareTimePeriod: mockTimePeriodComparison,
+        isHome: true,
+      })
       expect(result).toBeNull()
     })
-    it('should return null because of timePeriod and comparaison', async () => {
-      const fluidTypes: FluidType[] = [FluidType.ELECTRICITY]
+    it('should return null when not matching both cases', async () => {
+      const fluidTypes: FluidType[] = []
       const wrongTimePeriod = {
         startDate: DateTime.fromISO('2020-08-03T23:59:59.999Z'),
         endDate: DateTime.fromISO('2020-08-01T00:00:00.000Z'),
       }
-      const result = await consumptionDataManager.getGraphData(
-        wrongTimePeriod,
-        TimeStep.DAY,
+      jest
+        .spyOn(ConsumptionValidatorService.prototype, 'ValidateGetGraphData')
+        .mockReturnValueOnce(true)
+      const result = await consumptionDataManager.getGraphData({
+        timePeriod: wrongTimePeriod,
+        timeStep: TimeStep.DAY,
         fluidTypes,
         fluidStatus,
-        mockTimePeriodComparison,
-        true
-      )
+        compareTimePeriod: mockTimePeriodComparison,
+        isHome: false,
+      })
       expect(result).toBeNull()
     })
   })
@@ -299,30 +306,37 @@ describe('Consumption service', () => {
         mockFetchFluidData.mockResolvedValueOnce(mockFetchDataComparison)
       }
       const expectedResult = 84.44375099999999
-      const result = await consumptionDataManager.getMaxLoad(
-        mockTimePeriod,
-        TimeStep.DAY,
-        allFluids,
-        mockTimePeriodComparison,
-        true
-      )
+      const result = await consumptionDataManager.getMaxLoad({
+        maxTimePeriod: mockTimePeriod,
+        timeStep: TimeStep.DAY,
+        fluidTypes: allFluids,
+        compareMaxTimePeriod: mockTimePeriodComparison,
+        isHome: true,
+      })
       expect(result).toEqual(expectedResult)
     })
     it('should return the maxed value for a time period', async () => {
       const fluidTypes: FluidType[] = [FluidType.ELECTRICITY]
       const expectedResult = 63.1254
       mockFetchFluidMaxData.mockResolvedValueOnce(expectedResult)
-      const result = await consumptionDataManager.getMaxLoad(
-        mockTimePeriod,
-        TimeStep.DAY,
+      const result = await consumptionDataManager.getMaxLoad({
+        maxTimePeriod: mockTimePeriod,
+        timeStep: TimeStep.DAY,
         fluidTypes,
-        mockTimePeriodComparison,
-        false
-      )
+        compareMaxTimePeriod: mockTimePeriodComparison,
+      })
       expect(result).toEqual(expectedResult)
     })
   })
 
+  describe('getLastDataload method', () => {
+    it('should return the last dataload', async () => {
+      mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
+      const result = await consumptionDataManager.getLastDataload(0)
+      expect(result).toEqual(mockFetchDataActual)
+    })
+  })
+
   describe('getPerformanceIndicators method', () => {
     it('should return the performance indicator', async () => {
       mockFetchFluidData.mockResolvedValueOnce(mockFetchDataActual)
@@ -513,6 +527,23 @@ describe('Consumption service', () => {
     })
   })
 
+  describe('fetchAvgTemperature', () => {
+    it('should return the average temperature when data is available', async () => {
+      mockClient
+        .getStackClient()
+        .fetchJSON.mockResolvedValueOnce(mockAvgTemperature)
+      const result = await consumptionDataManager.fetchAvgTemperature(2023, 5)
+      expect(result).toBe(mockAvgTemperature.values[0].average_measurement)
+    })
+    it('should throw an error when no data is available', async () => {
+      mockClient
+        .getStackClient()
+        .fetchJSON.mockResolvedValueOnce({ nb_results: 0 })
+      const result = await consumptionDataManager.fetchAvgTemperature(2023, 5)
+      expect(result).toBe(null)
+    })
+  })
+
   describe('saveDoc & saveDocs', () => {
     it('should saveDoc', async () => {
       const mockQueryResult: QueryResult<DataloadEntity> = {
diff --git a/src/services/consumption.service.ts b/src/services/consumption.service.ts
index 57ccc0eb33b970a7634eee1983bcdeb40d89907a..b9203bbb34d28a2f30ced50892a315bf0c789fb4 100644
--- a/src/services/consumption.service.ts
+++ b/src/services/consumption.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import { Doctype } from 'cozy-client/types/types'
 import logger from 'cozy-logger'
 import { ENEDIS_MINUTE_DOCTYPE } from 'doctypes'
@@ -45,25 +45,34 @@ export default class ConsumptionDataManager {
   }
 
   /** Get graph data according on timeStep and fluidType */
-  public async getGraphData(
-    timePeriod: TimePeriod,
-    timeStep: TimeStep,
-    fluidTypes: FluidType[],
-    fluidStatus?: FluidStatus[],
-    compareTimePeriod?: TimePeriod,
-    isHome?: boolean,
+  public async getGraphData({
+    timePeriod,
+    timeStep,
+    fluidTypes,
+    fluidStatus,
+    compareTimePeriod,
+    isHome,
+    isExport,
+  }: {
+    timePeriod: TimePeriod
+    timeStep: TimeStep
+    fluidTypes: FluidType[]
+    fluidStatus?: FluidStatus[]
+    compareTimePeriod?: TimePeriod
+    isHome?: boolean
+    /** bypass TimePeriodLength validation to be able to export more than 12 months of data */
     isExport?: boolean
-  ): Promise<Datachart | null> {
-    const InputIsValid = this._consumptionValidatorService.ValidateGetGraphData(
+  }): Promise<Datachart | null> {
+    const isInputValid = this._consumptionValidatorService.ValidateGetGraphData(
       timePeriod,
       timeStep,
       fluidTypes,
       compareTimePeriod,
       isExport
     )
-    if (!InputIsValid) return null
+    if (!isInputValid) return null
     if (fluidTypes.length === 1 && !isHome) {
-      const fluidType: FluidType = fluidTypes[0]
+      const fluidType = fluidTypes[0]
       const fetchedData = await this.fetchSingleFluidGraphData(
         timePeriod,
         timeStep,
@@ -89,7 +98,6 @@ export default class ConsumptionDataManager {
           fluidType,
           compareTimePeriod
         )
-        // formatting data
         const formattedData = this.formatGraphDataManager(
           fetchedData,
           timeStep,
@@ -106,27 +114,33 @@ export default class ConsumptionDataManager {
       }
       const aggregatedData = this.aggregateGraphData(toBeAggregatedData)
       return aggregatedData
-    } else return null
+    }
+    return null
   }
 
-  public async getMaxLoad(
-    maxTimePeriod: TimePeriod,
-    timeStep: TimeStep,
-    fluidTypes: FluidType[],
-    compareMaxTimePeriod?: TimePeriod,
-    isHome?: boolean,
+  public async getMaxLoad({
+    maxTimePeriod,
+    timeStep,
+    fluidTypes,
+    compareMaxTimePeriod,
+    isHome,
+    withDate,
+  }: {
+    maxTimePeriod: TimePeriod
+    timeStep: TimeStep
+    fluidTypes: FluidType[]
+    compareMaxTimePeriod?: TimePeriod
+    isHome?: boolean
     withDate?: boolean
-  ): Promise<number | null | Dataload> {
-    let allData
+  }): Promise<number | null | Dataload> {
     if (isHome) {
-      allData = await this.getGraphData(
-        maxTimePeriod,
+      const allData = await this.getGraphData({
+        timePeriod: maxTimePeriod,
         timeStep,
         fluidTypes,
-        undefined,
-        compareMaxTimePeriod,
-        isHome
-      )
+        compareTimePeriod: compareMaxTimePeriod,
+        isHome,
+      })
       return allData?.actualData
         ? Math.max(...allData.actualData.map(d => d.value))
         : 0
@@ -143,7 +157,7 @@ export default class ConsumptionDataManager {
 
   /** get last dataload available for a given fluid - return the daily data  */
   public async getLastDataload(
-    fluidTypes: FluidType
+    fluidType: FluidType
   ): Promise<Dataload[] | null> {
     const timePeriod = {
       startDate: DateTime.now().plus({ days: -3 }).startOf('day'),
@@ -153,7 +167,7 @@ export default class ConsumptionDataManager {
     const data = await this._queryRunnerService.fetchFluidData(
       timePeriod,
       TimeStep.DAY,
-      fluidTypes
+      fluidType
     )
     return data
   }
@@ -166,13 +180,12 @@ export default class ConsumptionDataManager {
   ): Promise<PerformanceIndicator[]> {
     const performanceIndicators: PerformanceIndicator[] = []
     for (const fluidType of fluidTypes) {
-      const graphData: Datachart | null = await this.getGraphData(
+      const graphData = await this.getGraphData({
         timePeriod,
         timeStep,
-        [fluidType],
-        undefined,
-        compareTimePeriod
-      )
+        fluidTypes: [fluidType],
+        compareTimePeriod,
+      })
 
       if (graphData) {
         const performanceIndicator: PerformanceIndicator = {
@@ -294,7 +307,7 @@ export default class ConsumptionDataManager {
   ): Datachart | null {
     if (!data) return null
 
-    const formattedActualData: Dataload[] =
+    const formattedActualData =
       this._consumptionFormatterService.formatGraphData(
         data.actualData,
         timePeriod,
@@ -393,11 +406,10 @@ export default class ConsumptionDataManager {
     let firstDay = null
     const firstDays = []
     for (const fluidType of fluidTypes) {
-      firstDay =
-        (await this._queryRunnerService.getFirstDateData(
-          fluidType,
-          timeStep
-        )) || null
+      firstDay = await this._queryRunnerService.getFirstDateData(
+        fluidType,
+        timeStep
+      )
       firstDays.push(firstDay)
     }
     return firstDays
@@ -410,19 +422,17 @@ export default class ConsumptionDataManager {
     let lastDay = null
     const lastDays = []
     if (fluidTypes.length === 1) {
-      lastDay =
-        (await this._queryRunnerService.getLastDateData(
-          fluidTypes[0],
-          timeStep
-        )) || null
+      lastDay = await this._queryRunnerService.getLastDateData(
+        fluidTypes[0],
+        timeStep
+      )
       lastDays.push(lastDay)
     } else if (fluidTypes.length > 1) {
       for (const fluidType of fluidTypes) {
-        lastDay =
-          (await this._queryRunnerService.getLastDateData(
-            fluidType,
-            timeStep
-          )) || null
+        lastDay = await this._queryRunnerService.getLastDateData(
+          fluidType,
+          timeStep
+        )
         lastDays.push(lastDay)
       }
     }
@@ -530,7 +540,7 @@ export default class ConsumptionDataManager {
 
         if (singleFluidCharts[0].chartData.actualData[i]) {
           // Define the aggregated state
-          const aggregatedDataloadState: DataloadState =
+          const aggregatedDataloadState =
             this._consumptionFormatterService.defineAggregatedDataloadState(
               tempAggregatedState
             )
@@ -550,7 +560,7 @@ export default class ConsumptionDataManager {
           singleFluidCharts[0].chartData.comparisonData[i]
         ) {
           // Define the aggregated state
-          const aggregatedComparisonDataloadState: DataloadState =
+          const aggregatedComparisonDataloadState =
             this._consumptionFormatterService.defineAggregatedDataloadState(
               tempComparisonAggregatedState
             )
@@ -576,7 +586,7 @@ export default class ConsumptionDataManager {
     client: Client,
     month: number
   ): Promise<DataloadEntity[]> {
-    const query: QueryDefinition = Q(ENEDIS_MINUTE_DOCTYPE)
+    const query = Q(ENEDIS_MINUTE_DOCTYPE)
       .where({
         month: {
           $eq: month,
@@ -592,10 +602,10 @@ export default class ConsumptionDataManager {
   /**
    * Get the first entry of a given data doctype (enedis, grdf, egl)
    */
-  public async getFirsDataDateFromDoctype(
+  public async getFirstDataDateFromDoctype(
     doctype: Doctype
   ): Promise<DataloadEntity[] | EnedisMonthlyAnalysisData[] | null> {
-    const query: QueryDefinition = Q(doctype)
+    const query = Q(doctype)
       .where({})
       .indexFields(['year', 'month'])
       .sortBy([{ year: 'asc' }, { month: 'asc' }])
@@ -607,7 +617,7 @@ export default class ConsumptionDataManager {
   public async getFirstDataDateFromDoctypeWithPrice(
     doctype: Doctype
   ): Promise<DataloadEntity | null> {
-    const query: QueryDefinition = Q(doctype)
+    const query = Q(doctype)
       .where({
         year: {
           $gt: null,
@@ -636,22 +646,19 @@ export default class ConsumptionDataManager {
     year: number,
     month: number
   ): Promise<number | null> => {
-    const bronStationId = '69123002'
+    const BronStationId = '69123002'
     const avgTemperatureDate = `${year}-${formatTwoDigits(month)}`
     try {
       const result: AvgTemperatureResult = await this._client
         .getStackClient()
         .fetchJSON(
           'GET',
-          `${REMOTE_ORG_ECOLYO_AVG_TEMPERATURE}?identifiant=${bronStationId}&month=${avgTemperatureDate}`
+          `${REMOTE_ORG_ECOLYO_AVG_TEMPERATURE}?identifiant=${BronStationId}&month=${avgTemperatureDate}`
         )
       if (result && result.nb_results !== 0) {
         return result.values[0].average_measurement
-      } else {
-        throw new Error(
-          `No average temperature found for ${avgTemperatureDate}`
-        )
       }
+      throw new Error(`No average temperature found for ${avgTemperatureDate}`)
     } catch (error) {
       const errorMessage = `fetchAvgTemperature error : ${error}`
       logStack('error', errorMessage)
@@ -684,7 +691,6 @@ export default class ConsumptionDataManager {
   ): Promise<DataloadEntity[]> {
     const { data: savedDocs }: QueryResult<DataloadEntity[]> =
       await this._client.saveAll(consumptionDocs)
-
     return savedDocs
   }
 }
diff --git a/src/services/consumptionFormatter.service.spec.ts b/src/services/consumptionFormatter.service.spec.ts
index 2c07788f299d6ea224d3b7d0bb93a5f43c52a2c5..f73ee0939489837f11662a6e7089bd09d0e9fd84 100644
--- a/src/services/consumptionFormatter.service.spec.ts
+++ b/src/services/consumptionFormatter.service.spec.ts
@@ -251,7 +251,7 @@ describe('ConsumptionFormatter service', () => {
       expect(result).toEqual(mockResult)
     })
     it('should return an error because of unknown TimeStep', async () => {
-      const error = await getError(async () =>
+      const error = await getError(() =>
         consumptionFormatterService.formatGraphData(
           mockDataLoad,
           mockTimePeriod,
diff --git a/src/services/consumptionFormatter.service.ts b/src/services/consumptionFormatter.service.ts
index cc05206889191b517bd1936f52ad0cffb046420e..92a7b44ebea7f21eca1de59c69d1d6b4f41532fd 100644
--- a/src/services/consumptionFormatter.service.ts
+++ b/src/services/consumptionFormatter.service.ts
@@ -25,12 +25,12 @@ export default class ConsumptionFormatterService {
     }
     const dateChartService = new DateChartService()
     while (parsingDate <= endDate) {
-      const filtereddata = data.filter(dt =>
+      const filteredData = data.filter(dt =>
         dateChartService.compareStepDate(timeStep, dt.date, parsingDate)
       )
-      const newElement: Dataload = this.defineDataloadState(
-        filtereddata[0]
-          ? filtereddata[0]
+      const newElement = this.defineDataloadState(
+        filteredData[0]
+          ? filteredData[0]
           : {
               date: parsingDate,
               value: -1,
@@ -92,7 +92,7 @@ export default class ConsumptionFormatterService {
       return { ...data, state: DataloadState.EMPTY }
     }
     if (fluidStatus.lastDataDate && data.date > fluidStatus.lastDataDate) {
-      const isDataToCome: boolean = this.isDataToCome(data, fluidType)
+      const isDataToCome = this.isDataToCome(data, fluidType)
       return {
         ...data,
         state: isDataToCome ? DataloadState.COMING : DataloadState.MISSING,
diff --git a/src/services/consumptionValidator.service.spec.ts b/src/services/consumptionValidator.service.spec.ts
index 819a9724a39ae7e4890842d11e10a988f28eb9c0..5f0558d47a67c008f871548c509925e074f5a7fa 100644
--- a/src/services/consumptionValidator.service.spec.ts
+++ b/src/services/consumptionValidator.service.spec.ts
@@ -11,7 +11,13 @@ const mockTimePeriodComparison: TimePeriod = {
   startDate: DateTime.fromISO('2020-09-01T00:00:00.000Z', { zone: 'utc' }),
   endDate: DateTime.fromISO('2020-09-03T23:59:59.999Z', { zone: 'utc' }),
 }
-let allFluids: FluidType[] = [0, 1, 2]
+const wrongTimePeriodComparison: TimePeriod = {
+  startDate: DateTime.fromISO('2020-09-05T00:00:00.000Z', {
+    zone: 'utc',
+  }),
+  endDate: DateTime.fromISO('2020-09-03T23:59:59.999Z', { zone: 'utc' }),
+}
+const allFluids: FluidType[] = [0, 1, 2]
 describe('ConsumptionFormatter service', () => {
   const consumptionValidatorService = new ConsumptionValidatorService()
   describe('ValidateGetGraphData method', () => {
@@ -33,12 +39,6 @@ describe('ConsumptionFormatter service', () => {
       expect(result).toBeTruthy()
     })
     it('should return false with comparison Date', () => {
-      const wrongTimePeriodComparison: TimePeriod = {
-        startDate: DateTime.fromISO('2020-09-05T00:00:00.000Z', {
-          zone: 'utc',
-        }),
-        endDate: DateTime.fromISO('2020-09-03T23:59:59.999Z', { zone: 'utc' }),
-      }
       const result = consumptionValidatorService.ValidateGetGraphData(
         mockTimePeriod,
         TimeStep.DAY,
@@ -47,13 +47,16 @@ describe('ConsumptionFormatter service', () => {
       )
       expect(result).toBeFalsy()
     })
+    it('should return false with comparison Date and incompatible timeStep', () => {
+      const result = consumptionValidatorService.ValidateGetGraphData(
+        mockTimePeriod,
+        TimeStep.YEAR,
+        allFluids,
+        wrongTimePeriodComparison
+      )
+      expect(result).toBeFalsy()
+    })
     it('should return false with comparison Date for elec', () => {
-      const wrongTimePeriodComparison: TimePeriod = {
-        startDate: DateTime.fromISO('2020-09-05T00:00:00.000Z', {
-          zone: 'utc',
-        }),
-        endDate: DateTime.fromISO('2020-09-07T23:59:59.999Z', { zone: 'utc' }),
-      }
       const result = consumptionValidatorService.ValidateGetGraphData(
         mockTimePeriod,
         TimeStep.HALF_AN_HOUR,
@@ -94,7 +97,7 @@ describe('ConsumptionFormatter service', () => {
       expect(result).toBeFalsy()
     })
     it('should return false because of HALF_AN_HOUR and ValidateTimePeriodLength', () => {
-      allFluids = [0] // Only fluid without TimeStep incompatibilty
+      const fluids = [0] // Only fluid without TimeStep incompatibility
       const mockTimePeriodTooLong: TimePeriod = {
         startDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', {
           zone: 'utc',
@@ -104,7 +107,7 @@ describe('ConsumptionFormatter service', () => {
       const result = consumptionValidatorService.ValidateGetGraphData(
         mockTimePeriodTooLong,
         TimeStep.HALF_AN_HOUR,
-        allFluids
+        fluids
       )
       expect(result).toBeFalsy()
     })
diff --git a/src/services/converter.service.spec.ts b/src/services/converter.service.spec.ts
index 85868150ad91496b08e9f260e0e915abd2e52b6b..133988768f9b9dff8288c9caab381ce930b0ed22 100644
--- a/src/services/converter.service.spec.ts
+++ b/src/services/converter.service.spec.ts
@@ -39,7 +39,7 @@ describe('Converter service', () => {
       expect(result).toEqual(expectedConversion)
     })
 
-    it('should return 1.2 beacause there is a price of 1.2 set for doctype', () => {
+    it('should return 1.2 because there is a price of 1.2 set for doctype', () => {
       const expectedConversion = 1.2
       const result = converterService.LoadToEuro(0.002, FluidType.WATER, 1.2)
       expect(result).toEqual(expectedConversion)
diff --git a/src/services/converter.service.ts b/src/services/converter.service.ts
index d283508b42a1d209dc5e51885365c43f10975d97..aeee1ea2dc4b8b96a4ab97a10ac477366028b438 100644
--- a/src/services/converter.service.ts
+++ b/src/services/converter.service.ts
@@ -19,7 +19,11 @@ export default class ConverterService {
     if (fluidType === FluidType.MULTIFLUID) {
       convertedLoad = load
     } else {
-      convertedLoad = this.applyPrice(this._fluidConfig[fluidType], load, price)
+      convertedLoad = this.computePrice(
+        this._fluidConfig[fluidType],
+        load,
+        price
+      )
     }
 
     // Prevent round 0 case when the actual value is not 0
@@ -30,20 +34,18 @@ export default class ConverterService {
   }
 
   /**
-   * Return calculated price
+   * Compute calculated price
+   * If a price is provided, return the price
    * @param {FluidConfig} fluidConfig - Fluid configuration
    * @param {number} load - Load value
    * @param {number} [price] - Price if exist
    */
-  private applyPrice(
+  private computePrice(
     fluidConfig: FluidConfig,
     load: number,
     price?: number | null
   ): number {
-    if (price) {
-      return price
-    } else {
-      return load * fluidConfig.coefficient
-    }
+    if (price) return price
+    return load * fluidConfig.coefficient
   }
 }
diff --git a/src/services/dateChart.service.spec.ts b/src/services/dateChart.service.spec.ts
index 59c9d2d5b8cad3a3e4f8b7e347809c057cc24a2c..d799abd280316dafccc2756fe95cc660db705535 100644
--- a/src/services/dateChart.service.spec.ts
+++ b/src/services/dateChart.service.spec.ts
@@ -296,7 +296,7 @@ describe('dateChart service', () => {
     })
 
     it('should throw error for unknown TimeStep', async () => {
-      const error = await getError(async () =>
+      const error = await getError(() =>
         dateChartService.defineTimePeriod(refDate, unknownTimeStep, -1)
       )
       expect(error).toEqual(new Error('TimeStep unknown'))
@@ -693,7 +693,7 @@ describe('dateChart service', () => {
       const secondDate = DateTime.fromISO('2020-10-31T00:30:00.000Z', {
         zone: 'utc',
       })
-      const error = await getError(async () =>
+      const error = await getError(() =>
         dateChartService.compareStepDate(unknownTimeStep, firstDate, secondDate)
       )
       expect(error).toEqual(new Error('TimeStep unknown'))
diff --git a/src/services/dateChart.service.ts b/src/services/dateChart.service.ts
index 1a5ac296b4322b29a324126e36d9f6a043a68256..47d5266cbc0ad09bc1d126738db037018322add9 100644
--- a/src/services/dateChart.service.ts
+++ b/src/services/dateChart.service.ts
@@ -1,6 +1,6 @@
 import { FluidType, TimeStep } from 'enums'
 import { DateTime, Interval } from 'luxon'
-import { FluidConfig, TimePeriod } from 'models'
+import { TimePeriod } from 'models'
 import ConfigService from './fluidConfig.service'
 
 export default class DateChartService {
@@ -294,8 +294,7 @@ export default class DateChartService {
     fluidType: FluidType
   ): number | null {
     if (date && fluidType !== FluidType.MULTIFLUID) {
-      const fluidConfig: Array<FluidConfig> =
-        new ConfigService().getFluidConfig()
+      const fluidConfig = new ConfigService().getFluidConfig()
       const today = DateTime.local().setZone('utc', {
         keepLocalTime: true,
       })
diff --git a/src/services/duel.service.spec.ts b/src/services/duel.service.spec.ts
index 93cd9552abc03d91449dc2814d1bbb00aade13ac..bb67cbeab4b2bdf8ba5859952a5a9ef62124ad7b 100644
--- a/src/services/duel.service.spec.ts
+++ b/src/services/duel.service.spec.ts
@@ -96,13 +96,13 @@ describe('Duel service', () => {
   })
 
   describe('startUserDuel method', () => {
-    it('should return the userDuel with onGoing state', async () => {
+    it('should return the userDuel with onGoing state', () => {
       jest
         .spyOn(DateTime, 'local')
         .mockReturnValue(
           DateTime.fromISO('2020-10-01T00:00:00.000Z', { zone: 'utc' })
         )
-      const result = await duelService.startUserDuel(duelData)
+      const result = duelService.startUserDuel(duelData)
 
       const mockUpdatedDuel: UserDuel = {
         ...duelData,
@@ -116,8 +116,8 @@ describe('Duel service', () => {
   })
 
   describe('resetUserDuel method', () => {
-    it('should return the userDuel with unlocked state', async () => {
-      const result = await duelService.resetUserDuel(duelData)
+    it('should return the userDuel with unlocked state', () => {
+      const result = duelService.resetUserDuel(duelData)
       const mockUpdatedDuel: UserDuel = {
         ...duelData,
         startDate: null,
@@ -197,11 +197,11 @@ describe('Duel service', () => {
     })
   })
 
-  describe('getDuelfromDuelEntities method', () => {
+  describe('getDuelFromDuelEntities method', () => {
     it('should return the userDuel from a duelEntity', () => {
       const searchId = 'DUEL001'
 
-      const result = duelService.getDuelfromDuelEntities(allDuelData, searchId)
+      const result = duelService.getDuelFromDuelEntities(allDuelData, searchId)
       expect(result).toEqual(duelData)
     })
   })
diff --git a/src/services/duel.service.ts b/src/services/duel.service.ts
index f721543a6fe7ca02e60cf59567fc99eca63c69a9..747f588f629f203f9d7971316c2b933ad7d96adb 100644
--- a/src/services/duel.service.ts
+++ b/src/services/duel.service.ts
@@ -1,18 +1,10 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import { DUEL_DOCTYPE } from 'doctypes'
 import { FluidState, FluidType, TimeStep, UserDuelState } from 'enums'
 import { DateTime, Duration } from 'luxon'
-import {
-  Datachart,
-  Dataload,
-  DuelEntity,
-  FluidStatus,
-  PerformanceIndicator,
-  TimePeriod,
-  UserDuel,
-} from 'models'
+import { DuelEntity, FluidStatus, TimePeriod, UserDuel } from 'models'
 import logApp from 'utils/logger'
 import { getRoundFloat } from 'utils/math'
 import ConsumptionService from './consumption.service'
@@ -37,7 +29,7 @@ export default class DuelService {
     fluidTypes: FluidType[],
     userDuel: UserDuel
   ): Promise<TimePeriod | false> {
-    let lastDate: DateTime = DateTime.local().setZone('utc', {
+    let lastDate = DateTime.local().setZone('utc', {
       keepLocalTime: true,
     })
     fluidStatus.forEach(fluid => {
@@ -69,31 +61,28 @@ export default class DuelService {
    */
   private async isPeriodComplete(
     period: TimePeriod,
-    fluidType: FluidType[],
+    fluidTypes: FluidType[],
     duration: Duration
   ): Promise<false | TimePeriod> {
-    const maxDiffperiod: Duration = Duration.fromObject({
-      months: 6,
-    })
-    const maxDiffperiodMilli: number = maxDiffperiod.as('milliseconds')
+    const maxDiffPeriod = Duration.fromObject({ months: 6 })
+    const maxDiffPeriodMilli = maxDiffPeriod.as('milliseconds')
     let isComplete = true
     const newPeriod: TimePeriod = {
       startDate: period.startDate.minus(duration),
       endDate: period.endDate.minus(duration),
     }
-    let diffFromNow = newPeriod.endDate.diffNow().toObject().milliseconds
-    diffFromNow = diffFromNow ? Math.abs(diffFromNow) : 0
-    const consumptionService = new ConsumptionService(this._client)
-    const dataLoad: Datachart | null = await consumptionService.getGraphData(
-      period,
-      TimeStep.DAY,
-      fluidType,
-      undefined,
-      undefined,
-      true
+    const diffFromNow = Math.abs(
+      newPeriod.endDate.diffNow().toObject().milliseconds || 0
     )
+    const consumptionService = new ConsumptionService(this._client)
+    const dataLoad = await consumptionService.getGraphData({
+      timePeriod: period,
+      timeStep: TimeStep.DAY,
+      fluidTypes,
+      isHome: true,
+    })
     if (dataLoad?.actualData) {
-      dataLoad.actualData.forEach((d: Dataload) => {
+      dataLoad.actualData.forEach(d => {
         if (
           d.value === -1 ||
           (d.valueDetail &&
@@ -102,21 +91,21 @@ export default class DuelService {
           isComplete = false
       })
     }
-    if (diffFromNow && !isComplete && diffFromNow > maxDiffperiodMilli)
+    if (diffFromNow && !isComplete && diffFromNow > maxDiffPeriodMilli)
       return false
 
     return isComplete
       ? period
-      : await this.isPeriodComplete(newPeriod, fluidType, duration)
+      : await this.isPeriodComplete(newPeriod, fluidTypes, duration)
   }
   /**
    * Retrieve all duel entities from db
    */
   public async getAllDuelEntities(): Promise<DuelEntity[]> {
-    const query: QueryDefinition = Q(DUEL_DOCTYPE)
-    const { data: dueles }: QueryResult<DuelEntity[]> =
+    const query = Q(DUEL_DOCTYPE)
+    const { data: duels }: QueryResult<DuelEntity[]> =
       await this._client.query(query)
-    return dueles
+    return duels
   }
 
   /**
@@ -124,9 +113,7 @@ export default class DuelService {
    * @param {string} duelId - ID of the searched duel
    */
   public async getDuelEntityById(duelId: string): Promise<DuelEntity> {
-    const query: QueryDefinition = Q(DUEL_DOCTYPE)
-      .where({ _id: duelId })
-      .limitBy(1)
+    const query = Q(DUEL_DOCTYPE).where({ _id: duelId }).limitBy(1)
     const { data }: QueryResult<DuelEntity[]> = await this._client.query(query)
     return data?.[0]
   }
@@ -157,13 +144,13 @@ export default class DuelService {
    * Return duel with updated state to UserDuelState.UNLOCKED
    * @param {UserDuel} userDuel - userDuel to unlock
    */
-  public async unlockUserDuel(userDuel: UserDuel): Promise<UserDuel> {
-    const updatedUserDuel: UserDuel = {
+  public unlockUserDuel(userDuel: UserDuel): UserDuel {
+    return {
       ...userDuel,
       state: UserDuelState.UNLOCKED,
     }
-    return updatedUserDuel
   }
+
   private getFluidTypesFromStatus(fluidStatus: FluidStatus[]): FluidType[] {
     const fluidTypes: FluidType[] = []
     fluidStatus.forEach(fluid => {
@@ -183,27 +170,22 @@ export default class DuelService {
    */
   public async updateUserDuelThreshold(
     userDuel: UserDuel,
-    fluidStatus: Array<FluidStatus> = []
+    fluidStatus: FluidStatus[] = []
   ): Promise<UserDuel> {
     const consumptionService = new ConsumptionService(this._client)
     const performanceService = new PerformanceService()
-    const fluidTypes: Array<FluidType> =
-      this.getFluidTypesFromStatus(fluidStatus)
+    const fluidTypes = this.getFluidTypesFromStatus(fluidStatus)
     // Get last period with all days known
-    const period: TimePeriod | false = await this.getValidPeriod(
-      fluidStatus,
-      fluidTypes,
-      userDuel
-    )
+    const period = await this.getValidPeriod(fluidStatus, fluidTypes, userDuel)
     if (period !== false) {
       // Fetch performance data
-      const fetchLastValidData: Array<PerformanceIndicator> =
+      const fetchLastValidData =
         await consumptionService.getPerformanceIndicators(
           period,
           TimeStep.DAY,
           fluidTypes
         )
-      const maxData: PerformanceIndicator =
+      const maxData =
         performanceService.aggregatePerformanceIndicators(fetchLastValidData)
       // Set the threshold
       let updatedThreshold: number
@@ -232,34 +214,32 @@ export default class DuelService {
    * Return duel with updated state to UserDuelState.ONGOING and startDate
    * @param {UserDuel} userDuel - userDuel to update
    */
-  public async startUserDuel(userDuel: UserDuel): Promise<UserDuel> {
-    const updatedUserDuel: UserDuel = {
+  public startUserDuel(userDuel: UserDuel): UserDuel {
+    return {
       ...userDuel,
       state: UserDuelState.ONGOING,
       startDate: DateTime.local()
         .setZone('utc', { keepLocalTime: true })
         .startOf('day'),
     }
-    return updatedUserDuel
   }
 
   /**
    * Return duel with updated state to UserDuelState.DONE
    * @param {UserDuel} userDuel - userDuel to update
    */
-  public async endUserDuel(userDuel: UserDuel): Promise<UserDuel> {
-    const updatedUserDuel: UserDuel = {
+  public endUserDuel(userDuel: UserDuel): UserDuel {
+    return {
       ...userDuel,
       state: UserDuelState.DONE,
     }
-    return updatedUserDuel
   }
 
   /**
    * Return duel with updated state to UserDuelState.UNLOCKED
    * @param {UserDuel} userDuel - userDuel to reset
    */
-  public async resetUserDuel(userDuel: UserDuel): Promise<UserDuel> {
+  public resetUserDuel(userDuel: UserDuel): UserDuel {
     return {
       ...userDuel,
       startDate: null,
@@ -274,7 +254,7 @@ export default class DuelService {
    * @param {DuelEntity} duel - userDuel to update
    */
   public parseDuelEntityToDuel(duel: DuelEntity): UserDuel {
-    const userDuel: UserDuel = {
+    return {
       id: duel.id,
       title: duel.title,
       description: duel.description,
@@ -285,7 +265,6 @@ export default class DuelService {
       fluidTypes: [],
       userConsumption: 0,
     }
-    return userDuel
   }
 
   /**
@@ -293,7 +272,7 @@ export default class DuelService {
    * @param {DuelEntity[]} duelEntityList - userDuel to update
    * @param {string} searchId - userDuel to update
    */
-  public getDuelfromDuelEntities(
+  public getDuelFromDuelEntities(
     duelEntityList: DuelEntity[],
     searchId: string
   ): UserDuel {
diff --git a/src/services/ecogesture.service.spec.ts b/src/services/ecogesture.service.spec.ts
index d04e0116ba03cc6c37e8374d7974f7a9cda2d8c6..8511c0c081d43b60f88a85aa840923031a7f6fa0 100644
--- a/src/services/ecogesture.service.spec.ts
+++ b/src/services/ecogesture.service.spec.ts
@@ -113,7 +113,7 @@ describe('Ecogesture service', () => {
   })
 
   describe('filterByUsage', () => {
-    it('should return ecogesture list including ECS ecogestures', async () => {
+    it('should return ecogesture list including ECS ecogestures', () => {
       const mockEcogestureList: Ecogesture[] = ecogesturesECSData
       const mockProfileEcogesture1: ProfileEcogesture = {
         ...mockProfileEcogesture,
@@ -125,7 +125,7 @@ describe('Ecogesture service', () => {
       )
       expect(result.includes(ecogesturesECSData[0])).toBeTruthy()
     })
-    it('should return ecogesture list excluding ECS ecogestures', async () => {
+    it('should return ecogesture list excluding ECS ecogestures', () => {
       const mockEcogestureList: Ecogesture[] = ecogesturesECSData
       const mockProfileEcogesture1: ProfileEcogesture = {
         ...mockProfileEcogesture,
@@ -137,7 +137,7 @@ describe('Ecogesture service', () => {
       )
       expect(result.includes(ecogesturesECSData[1])).toBeFalsy()
     })
-    it('should return ecogesture list including HEATING ecogestures', async () => {
+    it('should return ecogesture list including HEATING ecogestures', () => {
       const mockEcogestureList: Ecogesture[] = ecogesturesHeatingData
       const mockProfileEcogesture2: ProfileEcogesture = {
         ...mockProfileEcogesture,
@@ -150,7 +150,7 @@ describe('Ecogesture service', () => {
       )
       expect(result.includes(ecogesturesHeatingData[0])).toBeTruthy()
     })
-    it('should return ecogesture list excluding HEATING ecogestures', async () => {
+    it('should return ecogesture list excluding HEATING ecogestures', () => {
       const mockEcogestureList: Ecogesture[] = ecogesturesHeatingData
       const mockProfileEcogesture2: ProfileEcogesture = {
         ...mockProfileEcogesture,
@@ -164,7 +164,7 @@ describe('Ecogesture service', () => {
     })
   })
   describe('filterByEquipment', () => {
-    it('should return ecogesture list including BOILER equipment and equipment verification to true', async () => {
+    it('should return ecogesture list including BOILER equipment and equipment verification to true', () => {
       const mockProfileEcogestureBOILER: ProfileEcogesture = {
         ...mockProfileEcogesture,
         equipments: [EquipmentType.BOILER],
@@ -175,7 +175,7 @@ describe('Ecogesture service', () => {
       )
       expect(result.includes(BoilerEcogesture[0])).toBeTruthy()
     })
-    it('should return ecogesture list excluding BOILER equipment and equipment verification to true', async () => {
+    it('should return ecogesture list excluding BOILER equipment and equipment verification to true', () => {
       const mockProfileEcogestureBOILER: ProfileEcogesture = {
         ...mockProfileEcogesture,
       }
@@ -185,7 +185,7 @@ describe('Ecogesture service', () => {
       )
       expect(result.includes(BoilerEcogesture[0])).toBeFalsy()
     })
-    it('should return ecogesture list including BOILER equipment with equipment verification to false but equipment to BOILER', async () => {
+    it('should return ecogesture list including BOILER equipment with equipment verification to false but equipment to BOILER', () => {
       const mockProfileEcogestureBOILER: ProfileEcogesture = {
         ...mockProfileEcogesture,
         equipments: [EquipmentType.BOILER],
diff --git a/src/services/ecogesture.service.ts b/src/services/ecogesture.service.ts
index ce07f6f1d934b81f63bd4de27142850714ce78cb..f6ad90a8aeb44676a840a6c4c736b1dcded923cc 100644
--- a/src/services/ecogesture.service.ts
+++ b/src/services/ecogesture.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import ecogestureData from 'db/ecogestureData.json'
 import { ECOGESTURE_DOCTYPE } from 'doctypes'
@@ -143,7 +143,7 @@ export default class EcogestureService {
   }
 
   public async getAllEcogestures(orderByID?: boolean): Promise<Ecogesture[]> {
-    let query: QueryDefinition = Q(ECOGESTURE_DOCTYPE)
+    let query = Q(ECOGESTURE_DOCTYPE)
 
     if (orderByID) {
       query = query
@@ -173,7 +173,7 @@ export default class EcogestureService {
    * @param {string} ids - ecogestures ids
    */
   public async getEcogesturesByIds(ids: string[]): Promise<Ecogesture[]> {
-    const query: QueryDefinition = Q(ECOGESTURE_DOCTYPE).getByIds(ids)
+    const query = Q(ECOGESTURE_DOCTYPE).getByIds(ids)
     const { data: ecogestures }: QueryResult<Ecogesture[]> =
       await this._client.query(query)
     return ecogestures
diff --git a/src/services/enedisMonthlyAnalysisData.service.ts b/src/services/enedisMonthlyAnalysisData.service.ts
index ef34a3e33c3aba8fdebc6a301bd6104864f6b34b..136d298dd6e685505947d142ebf526419c4e1387 100644
--- a/src/services/enedisMonthlyAnalysisData.service.ts
+++ b/src/services/enedisMonthlyAnalysisData.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import {
   ENEDIS_MAXPOWER_DOCTYPE,
@@ -39,7 +39,7 @@ export default class EnedisMonthlyAnalysisDataService {
   public async getLastEnedisMonthlyAnalysis(): Promise<
     EnedisMonthlyAnalysisData[]
   > {
-    const query: QueryDefinition = Q(ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE)
+    const query = Q(ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE)
       .where({})
       .indexFields(['year', 'month'])
       .sortBy([{ year: 'desc' }, { month: 'desc' }])
@@ -101,7 +101,7 @@ export default class EnedisMonthlyAnalysisDataService {
     year: number,
     month: number
   ): Promise<EnedisMonthlyAnalysisData[]> {
-    const query: QueryDefinition = Q(ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE)
+    const query = Q(ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE)
       .where({ year: year, month: month })
       .indexFields(['year', 'month'])
       .sortBy([{ year: 'desc' }, { month: 'desc' }])
@@ -143,7 +143,7 @@ export default class EnedisMonthlyAnalysisDataService {
     year: number,
     month: number
   ): Promise<MaxPowerEntity[]> {
-    const query: QueryDefinition = Q(ENEDIS_MAXPOWER_DOCTYPE)
+    const query = Q(ENEDIS_MAXPOWER_DOCTYPE)
       .where({ year: year, month: month })
       .indexFields(['year', 'month'])
       .sortBy([{ year: 'desc' }, { month: 'desc' }])
@@ -183,7 +183,7 @@ export default class EnedisMonthlyAnalysisDataService {
       month
     )
 
-    const monthQuery: QueryDefinition = Q(ENEDIS_MONTH_DOCTYPE)
+    const monthQuery = Q(ENEDIS_MONTH_DOCTYPE)
       .where({ year: year, month: month })
       .indexFields(['year', 'month'])
       .limitBy(1)
@@ -200,7 +200,7 @@ export default class EnedisMonthlyAnalysisDataService {
 
     for (const range of offPeakHours) {
       const { start, end } = range
-      const minuteQuery: QueryDefinition = Q(ENEDIS_MINUTE_DOCTYPE)
+      const minuteQuery = Q(ENEDIS_MINUTE_DOCTYPE)
         .where({
           year: year,
           month: month,
@@ -234,9 +234,7 @@ export default class EnedisMonthlyAnalysisDataService {
 
       // if the half-hour 23H30-0H00 is required, add the 0H00-0H30 consumption because the data is shifted in DB
       if (end.hour === 23 && end.minute === 59) {
-        const firstHalfHourQuery: QueryDefinition = Q(
-          ENEDIS_MINUTE_DOCTYPE
-        ).where({
+        const firstHalfHourQuery = Q(ENEDIS_MINUTE_DOCTYPE).where({
           year: year,
           month: month,
           hour: 0,
@@ -249,7 +247,7 @@ export default class EnedisMonthlyAnalysisDataService {
       }
     }
     logStack('debug', `Found ${minuteDocs.length} documents`)
-    const offPeakHoursConsumption = minuteDocs.reduce((sum: number, doc) => {
+    const offPeakHoursConsumption = minuteDocs.reduce((sum, doc) => {
       return sum + doc.load
     }, 0)
     return offPeakHoursConsumption
diff --git a/src/services/environement.service.spec.ts b/src/services/environement.service.spec.ts
index 4b747400619f7c59534ccfaf0cb749a3a3610ea8..7dc4afb27efb7c1570dd7823f5e8f1ca668b2779 100644
--- a/src/services/environement.service.spec.ts
+++ b/src/services/environement.service.spec.ts
@@ -5,11 +5,11 @@ declare const global: {
   __DEVELOPMENT__: boolean
 }
 
-describe('Environement service', () => {
+describe('Environment service', () => {
   const environmentService = new EnvironmentService()
 
   describe('isProduction()', () => {
-    it('should return true and prod url', async () => {
+    it('should return true and prod url', () => {
       global.__IS_ALPHA__ = false
       const result = environmentService.isProduction()
       expect(result).toEqual(true)
@@ -17,7 +17,7 @@ describe('Environement service', () => {
       expect(url).toEqual('https://ecolyo-agent.apps.grandlyon.com')
     })
 
-    it('should return false and rec url, alpha case', async () => {
+    it('should return false and rec url, alpha case', () => {
       global.__IS_ALPHA__ = true
       const result = environmentService.isProduction()
       expect(result).toEqual(false)
diff --git a/src/services/exploration.service.spec.ts b/src/services/exploration.service.spec.ts
index cb9ed9de840f7052200cf950decdbb4614b4a420..1a4fe2acb0a5e4035e2c4270cafce140efc2a69b 100644
--- a/src/services/exploration.service.spec.ts
+++ b/src/services/exploration.service.spec.ts
@@ -94,11 +94,11 @@ describe('Exploration service', () => {
     })
   })
 
-  describe('getUserExplorationfromExplorationEntities method', () => {
+  describe('getUserExplorationFromExplorationEntities method', () => {
     it('should return the userExploration from a explorationEntity', () => {
       const searchId = 'EXPLORATION001'
       const result =
-        explorationService.getUserExplorationfromExplorationEntities(
+        explorationService.getUserExplorationFromExplorationEntities(
           allExplorationEntities,
           searchId
         )
@@ -110,15 +110,15 @@ describe('Exploration service', () => {
     })
   })
   describe('startUserExploration Method', () => {
-    it('should return the started userExploration', async () => {
-      const result = await explorationService.startUserExploration(
+    it('should return the started userExploration', () => {
+      const result = explorationService.startUserExploration(
         userExplorationUnlocked
       )
       expect(result).toEqual(userExplorationStarted)
     })
   })
   describe('endUserExploration Method', () => {
-    it('should return the finished userExploration', async () => {
+    it('should return the finished userExploration', () => {
       const result = explorationService.endUserExploration(
         userExplorationStarted
       )
diff --git a/src/services/exploration.service.ts b/src/services/exploration.service.ts
index 605b9f54cb09d1db617559d8650d09b55321274d..446f58adf11b6ecd49f4475dc7ce7f3cb1ccefeb 100644
--- a/src/services/exploration.service.ts
+++ b/src/services/exploration.service.ts
@@ -1,4 +1,4 @@
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import { EXPLORATION_DOCTYPE } from 'doctypes'
 import {
   UserChallengeUpdateFlag,
@@ -21,7 +21,7 @@ export default class ExplorationService {
    * Retrieve all exploration entities from db
    */
   public async getAllExplorationEntities(): Promise<ExplorationEntity[]> {
-    const query: QueryDefinition = Q(EXPLORATION_DOCTYPE)
+    const query = Q(EXPLORATION_DOCTYPE)
     const { data: explorations }: QueryResult<ExplorationEntity[]> =
       await this._client.query(query)
     return explorations
@@ -34,7 +34,7 @@ export default class ExplorationService {
   public async getExplorationEntityById(
     explorationId: string
   ): Promise<ExplorationEntity> {
-    const query: QueryDefinition = Q(EXPLORATION_DOCTYPE)
+    const query = Q(EXPLORATION_DOCTYPE)
       .where({ _id: explorationId })
       .limitBy(1)
     const {
@@ -63,7 +63,7 @@ export default class ExplorationService {
    * @param {ExplorationEntity[]} explorationEntityList - userExploration to update
    * @param {string} searchId - userExploration to update
    */
-  public getUserExplorationfromExplorationEntities(
+  public getUserExplorationFromExplorationEntities(
     explorationEntityList: ExplorationEntity[],
     searchId: string
   ): UserExploration {
@@ -87,8 +87,7 @@ export default class ExplorationService {
         entity => entity.id === searchId
       )
       if (explorationEntityIndex >= 0) {
-        const explorationEntity: ExplorationEntity =
-          explorationEntityList[explorationEntityIndex]
+        const explorationEntity = explorationEntityList[explorationEntityIndex]
         exploration =
           this.parseExplorationEntityToUserExploration(explorationEntity)
       }
@@ -116,57 +115,51 @@ export default class ExplorationService {
    * Return exploration with updated state to UserExplorationState.ONGOING
    * @param {UserExploration} userExploration - userExploration to update
    */
-  public async startUserExploration(
+  public startUserExploration(
     userExploration: UserExploration
-  ): Promise<UserExploration> {
-    const updatedUserExploration: UserExploration = {
+  ): UserExploration {
+    return {
       ...userExploration,
       state: UserExplorationState.ONGOING,
     }
-    return updatedUserExploration
   }
 
   /**
    * Return exploration with updated state to UserExplorationState.NOTIFICATION
    * @param {UserExploration} userExploration - userExploration to update
    */
-  public async awaitNotificationUserExploration(
+  public setNotificationUserExploration(
     userExploration: UserExploration
-  ): Promise<UserExploration> {
-    const updatedUserExploration: UserExploration = {
+  ): UserExploration {
+    return {
       ...userExploration,
       state: UserExplorationState.NOTIFICATION,
       progress: 5, // userExploration.type === UserExplorationType.ACTION ? 3 : 1,
     }
-    return updatedUserExploration
   }
   /**
    * Return exploration with updated state to UserExplorationState.DONE
    * @param {UserExploration} userExploration - userExploration to update
    */
   public endUserExploration(userExploration: UserExploration): UserExploration {
-    const updatedUserExploration: UserExploration = {
+    return {
       ...userExploration,
       state: UserExplorationState.DONE,
       progress: 5, // userExploration.type === UserExplorationType.ACTION ? 3 : 1,
     }
-    return updatedUserExploration
   }
 
   /**
    * Return updated exploration
    * @param {UserExploration} userExploration - userExploration to update
    */
-  public async updateUserExploration(
+  public updateUserExploration(
     userExploration: UserExploration
-  ): Promise<UserExploration> {
-    const updatedProgress = userExploration.progress + 1
-
-    const updatedUserExploration: UserExploration = {
+  ): UserExploration {
+    return {
       ...userExploration,
-      progress: updatedProgress,
+      progress: userExploration.progress + 1,
     }
-    return updatedUserExploration
   }
 
   /**
diff --git a/src/services/fluid.service.spec.ts b/src/services/fluid.service.spec.ts
index 8de4bf3ba466ab01c64883ba3becd9418b7ff858..5428343428c42cb7c021d6d33874de4ffb9330e4 100644
--- a/src/services/fluid.service.spec.ts
+++ b/src/services/fluid.service.spec.ts
@@ -529,145 +529,4 @@ describe('Fluid service', () => {
       expect(fluidStatus[2].maintenance).toBeTruthy()
     })
   })
-
-  describe('getOldFluidData method', () => {
-    it('should return Electricity as old fluid', async () => {
-      const mockFluidStatus: FluidStatus[] = [
-        {
-          fluidType: FluidType.ELECTRICITY,
-          status: FluidState.DONE,
-          maintenance: false,
-          firstDataDate: DateTime.fromISO('2019-01-01').setZone('utc', {
-            keepLocalTime: true,
-          }),
-          lastDataDate: DateTime.fromISO('2020-01-01').setZone('utc', {
-            keepLocalTime: true,
-          }),
-          connection: {
-            konnector: konnectorsData[0],
-            account: accountsData[0],
-            trigger: triggersData[0],
-            triggerState: triggerStateData,
-            shouldLaunchKonnector: false,
-            isUpdating: false,
-            konnectorConfig: {
-              name: 'Enedis',
-              oauth: false,
-              slug: FluidSlugType.ELECTRICITY,
-              siteLink: 'https://mon-compte-client.enedis.fr/',
-              activation: 'https://mon-compte-particulier.enedis.fr/donnees/',
-            },
-          },
-        },
-      ]
-      const result = await FluidService.getOldFluidData(mockFluidStatus)
-      expect(result).toEqual([FluidType.ELECTRICITY])
-    })
-
-    it('should return empty array as lastdatadate < 5 days', async () => {
-      const mockFluidStatus: FluidStatus[] = [
-        {
-          fluidType: FluidType.ELECTRICITY,
-          status: FluidState.DONE,
-          maintenance: false,
-          firstDataDate: DateTime.local().minus({ day: 31 }).setZone('utc', {
-            keepLocalTime: true,
-          }),
-          lastDataDate: DateTime.local().minus({ day: 1 }).setZone('utc', {
-            keepLocalTime: true,
-          }),
-          connection: {
-            konnector: konnectorsData[0],
-            account: accountsData[0],
-            trigger: triggersData[0],
-            triggerState: triggerStateData,
-            shouldLaunchKonnector: false,
-            isUpdating: false,
-            konnectorConfig: {
-              name: 'Enedis',
-              oauth: false,
-              slug: FluidSlugType.ELECTRICITY,
-              siteLink: 'https://mon-compte-client.enedis.fr/',
-              activation: 'https://mon-compte-particulier.enedis.fr/donnees/',
-            },
-          },
-        },
-      ]
-      const result = await FluidService.getOldFluidData(mockFluidStatus)
-      expect(result).toEqual([])
-    })
-
-    it('should return empty array as status is NOT_CONNECTED', async () => {
-      const mockFluidStatus: FluidStatus[] = [
-        {
-          fluidType: FluidType.ELECTRICITY,
-          status: FluidState.NOT_CONNECTED,
-          maintenance: false,
-          firstDataDate: DateTime.fromISO('2019-01-01').setZone('utc', {
-            keepLocalTime: true,
-          }),
-          lastDataDate: DateTime.fromISO('2020-01-01').setZone('utc', {
-            keepLocalTime: true,
-          }),
-          connection: {
-            konnector: konnectorsData[0],
-            account: accountsData[0],
-            trigger: triggersData[0],
-            triggerState: triggerStateData,
-            shouldLaunchKonnector: false,
-            isUpdating: false,
-            konnectorConfig: {
-              name: 'Enedis',
-              oauth: false,
-              slug: FluidSlugType.ELECTRICITY,
-              siteLink: 'https://mon-compte-client.enedis.fr/',
-              activation: 'https://mon-compte-particulier.enedis.fr/donnees/',
-            },
-          },
-        },
-      ]
-      const result: FluidType[] =
-        await FluidService.getOldFluidData(mockFluidStatus)
-      expect(result).toEqual([])
-    })
-
-    it('should return empty array as status is KONNECTOR_NOT_FOUND', async () => {
-      const mockFluidStatus: FluidStatus[] = [
-        {
-          fluidType: FluidType.ELECTRICITY,
-          status: FluidState.KONNECTOR_NOT_FOUND,
-          maintenance: false,
-          firstDataDate: DateTime.fromISO('2019-01-01').setZone('utc', {
-            keepLocalTime: true,
-          }),
-          lastDataDate: DateTime.fromISO('2020-01-01').setZone('utc', {
-            keepLocalTime: true,
-          }),
-          connection: {
-            konnector: konnectorsData[0],
-            account: accountsData[0],
-            trigger: triggersData[0],
-            triggerState: triggerStateData,
-            shouldLaunchKonnector: false,
-            isUpdating: false,
-            konnectorConfig: {
-              name: 'Enedis',
-              oauth: false,
-              slug: FluidSlugType.ELECTRICITY,
-              siteLink: 'https://mon-compte-client.enedis.fr/',
-              activation: 'https://mon-compte-particulier.enedis.fr/donnees/',
-            },
-          },
-        },
-      ]
-      const result: FluidType[] =
-        await FluidService.getOldFluidData(mockFluidStatus)
-      expect(result).toEqual([])
-    })
-
-    it('should return empty array', async () => {
-      const result: FluidType[] = await FluidService.getOldFluidData([])
-      expect(result).toEqual([])
-    })
-  })
 })
diff --git a/src/services/fluid.service.ts b/src/services/fluid.service.ts
index f22c17dc550c959396a9838018e09139865a5837..4cf603519df382e60d464e71951e6b7689b00a34 100644
--- a/src/services/fluid.service.ts
+++ b/src/services/fluid.service.ts
@@ -157,31 +157,4 @@ export default class FluidService {
     ]
     return result
   }
-
-  /**
-   * Return fluids with data older than 5 days
-   */
-  static getOldFluidData = async (
-    fluidStatus: FluidStatus[]
-  ): Promise<FluidType[]> => {
-    const fluidOldData: FluidType[] = []
-    if (fluidStatus.length > 0) {
-      for (const fluid of fluidStatus) {
-        let diffInDays = 0
-        if (fluid?.lastDataDate) {
-          const dateToCompare = fluid.lastDataDate
-          diffInDays = dateToCompare.diffNow('days').toObject().days || 0
-          if (
-            diffInDays < -5 &&
-            fluid.status !== FluidState.KONNECTOR_NOT_FOUND &&
-            fluid.status !== FluidState.NOT_CONNECTED
-          ) {
-            !fluidOldData.includes(fluid.fluidType) &&
-              fluidOldData.push(fluid.fluidType)
-          }
-        }
-      }
-    }
-    return fluidOldData
-  }
 }
diff --git a/src/services/fluidsPrices.service.spec.ts b/src/services/fluidsPrices.service.spec.ts
index bd7361028194e3421771feb24cb87867daaa8849..183f485b690fe2918ece4034f15f8c9a8c5bbbb5 100644
--- a/src/services/fluidsPrices.service.spec.ts
+++ b/src/services/fluidsPrices.service.spec.ts
@@ -13,21 +13,6 @@ import FluidPricesService from './fluidsPrices.service'
 describe('FluidPrices service', () => {
   const fluidPricesService = new FluidPricesService(mockClient)
 
-  describe('Fluid Prices - getAllPrices', () => {
-    it('should getAllPrices', async () => {
-      const mockQueryResult: QueryResult<FluidPrice[]> = {
-        data: fluidPrices,
-        bookmark: '',
-        next: false,
-        skip: 0,
-      }
-      mockClient.query.mockResolvedValueOnce(mockQueryResult)
-      const prices = await fluidPricesService.getAllPrices()
-      expect(prices).toBe(fluidPrices)
-      expect(mockClient.query).toHaveBeenCalled()
-    })
-  })
-
   describe('Fluid Prices - getPrices', () => {
     it('should getPrices for elec', async () => {
       const mockQueryResult: QueryResult<FluidPrice[]> = {
@@ -80,43 +65,6 @@ describe('FluidPrices service', () => {
     })
   })
 
-  describe('Fluid Prices - deleteAllFluidsPrices', () => {
-    it('should return true when fluidsPrices stored', async () => {
-      const mockQueryResult: QueryResult<FluidPrice[]> = {
-        data: fluidPrices,
-        bookmark: '',
-        next: false,
-        skip: 0,
-      }
-      mockClient.query.mockResolvedValueOnce(mockQueryResult)
-      const result = await fluidPricesService.deleteAllFluidsPrices()
-      expect(mockClient.destroy).toHaveBeenCalledTimes(6)
-      expect(result).toBe(true)
-    })
-    it('should return true when no fluidsPrices stored', async () => {
-      const mockQueryResult: QueryResult<FluidPrice[]> = {
-        data: [],
-        bookmark: '',
-        next: false,
-        skip: 0,
-      }
-      mockClient.query.mockResolvedValueOnce(mockQueryResult)
-      const result = await fluidPricesService.deleteAllFluidsPrices()
-      expect(result).toBe(true)
-    })
-    it('should return false when error happened on deletion', async () => {
-      const mockQueryResult: QueryResult<FluidPrice[]> = {
-        data: fluidPrices,
-        bookmark: '',
-        next: false,
-        skip: 0,
-      }
-      mockClient.destroy.mockRejectedValue(new Error())
-      mockClient.query.mockResolvedValueOnce(mockQueryResult)
-      const result = await fluidPricesService.deleteAllFluidsPrices()
-      expect(result).toBe(false)
-    })
-  })
   it('should checkIfPriceExists and return it', async () => {
     const mockQueryResult: QueryResult<FluidPrice[]> = {
       data: [fluidPrices[0]],
diff --git a/src/services/fluidsPrices.service.ts b/src/services/fluidsPrices.service.ts
index 5a16cf3ae4ac94748ffb5130c05ba5a73f5a531f..3309a9a795f5e9ca523057a2ff8c5b0b74420570 100644
--- a/src/services/fluidsPrices.service.ts
+++ b/src/services/fluidsPrices.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import { FLUIDSPRICES_DOCTYPE } from 'doctypes'
 import { FluidType } from 'enums'
@@ -17,17 +17,6 @@ export default class FluidPricesService {
     this._client = _client
   }
 
-  /**
-   * Get all prices available in database
-   */
-  public async getAllPrices(): Promise<FluidPrice[]> {
-    const query: QueryDefinition = Q(FLUIDSPRICES_DOCTYPE).limitBy(900)
-    // TODO : handle case of 1000+ entries in doctype
-    const { data: fluidsPrices }: QueryResult<FluidPrice[]> =
-      await this._client.query(query)
-    return fluidsPrices
-  }
-
   /**
    * Get a price according to a fluidType and a data. This method return the nearest and valid price for the given date.
    */
@@ -35,7 +24,7 @@ export default class FluidPricesService {
     fluidType: FluidType,
     date: DateTime
   ): Promise<FluidPrice> {
-    const query: QueryDefinition = Q(FLUIDSPRICES_DOCTYPE)
+    const query = Q(FLUIDSPRICES_DOCTYPE)
       .where({
         startDate: {
           $lte: date.toISO({ suppressMilliseconds: true }).toString(),
@@ -55,7 +44,7 @@ export default class FluidPricesService {
    * Get current prices for all fluidTypes.
    */
   public async getAllLastPrices(): Promise<FluidPrice[]> {
-    const query: QueryDefinition = Q(FLUIDSPRICES_DOCTYPE)
+    const query = Q(FLUIDSPRICES_DOCTYPE)
       .where({ endDate: { $eq: '' } })
       .indexFields(['fluidType'])
       .sortBy([{ fluidType: 'asc' }])
@@ -94,34 +83,13 @@ export default class FluidPricesService {
   }
 
   /**
-   * Delete all fluidPrices entities from the db
-   * @returns {boolean} - true when deleted with success
-   * @throws {Error}
-   */
-  public async deleteAllFluidsPrices(): Promise<boolean> {
-    const fluidsPrices = await this.getAllPrices()
-    try {
-      for (const price of fluidsPrices) {
-        await this._client.destroy(price)
-      }
-      return true
-    } catch (error) {
-      const errorMessage = `deleteAllFluidsPrices: ${JSON.stringify(error)}`
-      logStack('error', errorMessage)
-      logApp.error(errorMessage)
-      Sentry.captureException(error)
-      return false
-    }
-  }
-
-  /**
-   * Check if a fluidprice exists in db
+   * Check if a fluidPrice exists in db
    * @returns {Promise<FluidPrice | null>} price or null
    */
   public async checkIfPriceExists(
     fluidPrice: FluidPrice
   ): Promise<FluidPrice | null> {
-    const query: QueryDefinition = Q(FLUIDSPRICES_DOCTYPE).where({
+    const query = Q(FLUIDSPRICES_DOCTYPE).where({
       startDate: { $eq: fluidPrice.startDate },
       fluidType: { $eq: fluidPrice.fluidType },
     })
@@ -129,7 +97,7 @@ export default class FluidPricesService {
       data: [price],
     }: QueryResult<FluidPrice[]> = await this._client.query(query)
     if (price) return price
-    else return null
+    return null
   }
 
   /**
@@ -164,9 +132,7 @@ export default class FluidPricesService {
         ...doc,
         ...attributes,
       })
-    if (fluidPrice) {
-      return fluidPrice
-    }
+    if (fluidPrice) return fluidPrice
     return null
   }
 }
diff --git a/src/services/initialization.service.spec.ts b/src/services/initialization.service.spec.ts
index db73da151c8d89785cd6f1ce3b942864e3c76c6a..197d51023cacef93cc648702912fc9da00883446 100644
--- a/src/services/initialization.service.spec.ts
+++ b/src/services/initialization.service.spec.ts
@@ -63,15 +63,6 @@ jest.mock('./challenge.service', () => {
   }))
 })
 
-const mockGetAllPrices = jest.fn()
-const mockDeleteAllFluidsPrices = jest.fn()
-jest.mock('./fluidsPrices.service', () => {
-  return jest.fn(() => ({
-    getAllPrices: mockGetAllPrices,
-    deleteAllFluidsPrices: mockDeleteAllFluidsPrices,
-  }))
-})
-
 const mockGetAllDuelEntities = jest.fn()
 const mockDeleteAllDuelEntities = jest.fn()
 jest.mock('./duel.service', () => {
@@ -127,11 +118,7 @@ jest.mock('./terms.service', () => {
 })
 
 describe('Initialization service', () => {
-  const initializationService = new InitializationService(
-    mockClient,
-    jest.fn(),
-    jest.fn()
-  )
+  const initializationService = new InitializationService(mockClient, jest.fn())
   beforeEach(() => {
     jest.clearAllMocks()
   })
@@ -603,19 +590,18 @@ describe('Initialization service', () => {
   })
 
   describe('initAnalysis method', () => {
-    it('should return monthlyAnalysisDate and haveSeenLastAnalysis when analysis is up to date', async () => {
+    it('should return monthlyAnalysisDate and haveSeenLastAnalysis when analysis is up to date', () => {
       const profile: Profile = {
         ...mockProfileState,
         monthlyAnalysisDate: getActualAnalysisDate(),
       }
-      await expect(
-        initializationService.initAnalysis(profile)
-      ).resolves.toEqual({
+      const result = initializationService.initAnalysis(profile)
+      expect(result).toEqual({
         monthlyAnalysisDate: getActualAnalysisDate(),
         haveSeenLastAnalysis: profile.haveSeenLastAnalysis,
       })
     })
-    it('should return updated monthlyAnalysisDate and haveSeenLastAnalysis=true when analysis is not up to date and isFirstConnection', async () => {
+    it('should return updated monthlyAnalysisDate and haveSeenLastAnalysis=true when analysis is not up to date and isFirstConnection', () => {
       const profile: Profile = {
         ...mockProfileState,
         monthlyAnalysisDate: DateTime.fromISO('2000-10-02T00:00:00.000Z', {
@@ -624,14 +610,13 @@ describe('Initialization service', () => {
         haveSeenLastAnalysis: true,
         isFirstConnection: true,
       }
-      await expect(
-        initializationService.initAnalysis(profile)
-      ).resolves.toEqual({
+      const result = initializationService.initAnalysis(profile)
+      expect(result).toEqual({
         monthlyAnalysisDate: getActualAnalysisDate(),
         haveSeenLastAnalysis: true,
       })
     })
-    it('should return updated monthlyAnalysisDate and haveSeenLastAnalysis=false when analysis is not up to date and isFirstConnection is false', async () => {
+    it('should return updated monthlyAnalysisDate and haveSeenLastAnalysis=false when analysis is not up to date and isFirstConnection is false', () => {
       const profile: Profile = {
         ...mockProfileState,
         isFirstConnection: false,
@@ -640,9 +625,8 @@ describe('Initialization service', () => {
         }),
         haveSeenLastAnalysis: true,
       }
-      await expect(
-        initializationService.initAnalysis(profile)
-      ).resolves.toEqual({
+      const result = initializationService.initAnalysis(profile)
+      expect(result).toEqual({
         monthlyAnalysisDate: getActualAnalysisDate(),
         haveSeenLastAnalysis: false,
       })
diff --git a/src/services/initialization.service.ts b/src/services/initialization.service.ts
index b30bb683aa36206da0c133acd1404a47d2c643d6..09ee0f4a2baf2c9a6ffb919f39ffa809f9710255 100644
--- a/src/services/initialization.service.ts
+++ b/src/services/initialization.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import challengeEntityData from 'db/challengeEntity.json'
 import duelEntityData from 'db/duelEntity.json'
@@ -21,7 +21,6 @@ import { migrations } from 'migrations/migration.data'
 import {
   Dataload,
   FluidStatus,
-  InitSteps,
   InitStepsErrors,
   Profile,
   ProfileEcogesture,
@@ -50,20 +49,17 @@ const logStack = logger.namespace('initializationService')
 
 export default class InitializationService {
   private readonly _client: Client
-  private readonly _setInitStep: React.Dispatch<React.SetStateAction<InitSteps>>
   private readonly _setInitStepError: React.Dispatch<
     React.SetStateAction<InitStepsErrors | null>
   >
 
   constructor(
     _client: Client,
-    _setInitStep: React.Dispatch<React.SetStateAction<InitSteps>>,
     _setInitStepError: React.Dispatch<
       React.SetStateAction<InitStepsErrors | null>
     >
   ) {
     this._client = _client
-    this._setInitStep = _setInitStep
     this._setInitStepError = _setInitStepError
   }
 
@@ -77,7 +73,6 @@ export default class InitializationService {
     const startTime = performance.now()
     const profileService = new ProfileService(this._client)
     try {
-      this._setInitStep(InitSteps.PROFILE)
       const loadedProfile = await profileService.getProfile()
       if (!loadedProfile) {
         // Population with the data
@@ -161,12 +156,12 @@ export default class InitializationService {
   public async initFluidPrices(): Promise<void> {
     const startTime = performance.now()
     logDuration('[Initialization] Launching fluidPrices service', startTime)
-    const triggerQuery: QueryDefinition = Q(TRIGGERS_DOCTYPE).where({
+    const triggerQuery = Q(TRIGGERS_DOCTYPE).where({
       'message.name': 'fluidsPrices',
     })
     const {
       data: [trigger],
-    }: QueryResult<Array<Trigger>> = await this._client.query(triggerQuery)
+    }: QueryResult<Trigger[]> = await this._client.query(triggerQuery)
     if (trigger?._id) {
       this._client
         .getStackClient()
@@ -185,7 +180,6 @@ export default class InitializationService {
 
   public async initChallengeEntity(hash: string): Promise<string> {
     const startTime = performance.now()
-    this._setInitStep(InitSteps.CHALLENGES)
     const challengeHash = hashFile(challengeEntityData)
     const challengeService = new ChallengeService(this._client)
     // Populate data if none challengeEntity exists
@@ -473,10 +467,10 @@ export default class InitializationService {
     }
   }
 
-  public async initAnalysis(profile: Profile): Promise<{
+  public initAnalysis(profile: Profile): {
     monthlyAnalysisDate: DateTime
     haveSeenLastAnalysis: boolean
-  }> {
+  } {
     const startTime = performance.now()
     try {
       const actualAnalysisDate = getActualAnalysisDate()
@@ -516,8 +510,8 @@ export default class InitializationService {
 
   /**
    * Check if FluidTypes exist
-   * success return: FluidType[]
-   * failure throw error
+   * - success return: FluidType[]
+   * - failure throw error
    */
   public async initFluidTypes(): Promise<FluidType[]> {
     const startTime = performance.now()
@@ -546,14 +540,13 @@ export default class InitializationService {
 
   /**
    * For each fluid get the trigger status and the last data date
-   * success return: FluidStatus[]
-   * failure throw error
+   * - success return: FluidStatus[]
+   * - failure throw error
    */
   public async initFluidStatus(): Promise<FluidStatus[]> {
     const startTime = performance.now()
     const fs = new FluidService(this._client)
     try {
-      this._setInitStep(InitSteps.CONSOS)
       const fluidStatus = await fs.getFluidStatus()
       if (fluidStatus) {
         logDuration('[Initialization] Fluid Status loaded', startTime)
@@ -635,7 +628,6 @@ export default class InitializationService {
   public async initConsent(): Promise<TermsStatus> {
     const startTime = performance.now()
     try {
-      this._setInitStep(InitSteps.CONSENT)
       const termService = new TermsService(this._client)
       const isUpToDate = await termService.isConsentVersionUpToDate()
       const lastTerm = await termService.getLastTerm()
diff --git a/src/services/konnector.service.ts b/src/services/konnector.service.ts
index 5b16ad5391d0031d9f1e0744bebb472e6461dd73..00887b6bc13641d001d6a5a027526cc64f0ee908 100644
--- a/src/services/konnector.service.ts
+++ b/src/services/konnector.service.ts
@@ -1,4 +1,4 @@
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import { KONNECTORS_DOCTYPE } from 'doctypes'
 import { Account, Konnector, TriggerState } from 'models'
 import TriggerService from 'services/triggers.service'
@@ -11,7 +11,7 @@ export default class KonnectorService {
   }
 
   public async getKonnector(id: string): Promise<Konnector | null> {
-    const query: QueryDefinition = Q(KONNECTORS_DOCTYPE).where({
+    const query = Q(KONNECTORS_DOCTYPE).where({
       _id: KONNECTORS_DOCTYPE + '/' + id,
     })
     const { data: konnector }: QueryResult<Konnector[]> =
@@ -33,9 +33,7 @@ export default class KonnectorService {
   }
 
   public async createIndexKonnector() {
-    const query: QueryDefinition = Q(KONNECTORS_DOCTYPE)
-      .where({ _id: 'index' })
-      .limitBy(1)
+    const query = Q(KONNECTORS_DOCTYPE).where({ _id: 'index' }).limitBy(1)
     const { data: result }: QueryResult<[]> = await this._client.query(query)
     return result
   }
diff --git a/src/services/mail.service.ts b/src/services/mail.service.ts
index 1e425524b7d7e39e1eb68e9ba873d4f726bbe7dc..534cfa4365b824709743b32b0a733e9b16daf7c7 100644
--- a/src/services/mail.service.ts
+++ b/src/services/mail.service.ts
@@ -11,7 +11,7 @@ export default class MailService {
   ): Promise<void> {
     try {
       const jobCollection = client.collection('io.cozy.jobs')
-      jobCollection.create('sendmail', mailInfo)
+      await jobCollection.create('sendmail', mailInfo)
     } catch (error) {
       const errorMessage = `Failed to send mail`
       logStack('error', errorMessage)
diff --git a/src/services/permissions.service.ts b/src/services/permissions.service.ts
index a16f3f371e597a7a496c27ae0cc7adf1b863662c..3702f7a74f700013bdbd4c0c3e7c1e74e9fe9458 100644
--- a/src/services/permissions.service.ts
+++ b/src/services/permissions.service.ts
@@ -3,9 +3,9 @@ import { Client, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import { PERMISSIONS_DOCTYPE } from 'doctypes/io-cozy-permissions'
 
-const logStack = logger.namespace('challengeService')
+const logStack = logger.namespace('permissionService')
 
-type PermissionsResponse = {
+interface PermissionsResponse {
   attributes: {
     type: string
     source_id: string
diff --git a/src/services/profile.service.ts b/src/services/profile.service.ts
index 48a31b7224ff4bfef964f420d4623323dfb17eb5..33a7a32df794fce34eeb468842cf1daf683ecf35 100644
--- a/src/services/profile.service.ts
+++ b/src/services/profile.service.ts
@@ -1,4 +1,4 @@
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import { PROFILE_DOCTYPE } from 'doctypes'
 import { DateTime } from 'luxon'
 import { Profile, ProfileEntity } from 'models'
@@ -42,11 +42,11 @@ export default class ProfileService {
   }
 
   public async getProfile(): Promise<Profile | null> {
-    const query: QueryDefinition = Q(PROFILE_DOCTYPE)
+    const query = Q(PROFILE_DOCTYPE)
     const {
       data: [profile],
     }: QueryResult<ProfileEntity[]> = await this._client.query(query.limitBy(1))
-    const profileEntity: ProfileEntity | null = profile ? profile : null
+    const profileEntity = profile ? profile : null
     if (profileEntity) {
       return this.parseProfileEntityToProfile(profileEntity)
     }
@@ -56,7 +56,7 @@ export default class ProfileService {
   public async updateProfile(
     attributes: Partial<Profile>
   ): Promise<Profile | null> {
-    const query: QueryDefinition = Q(PROFILE_DOCTYPE)
+    const query = Q(PROFILE_DOCTYPE)
     const {
       data: [doc],
     }: QueryResult<ProfileEntity[]> = await this._client.query(query.limitBy(1))
diff --git a/src/services/profileEcogesture.service.ts b/src/services/profileEcogesture.service.ts
index e9cfce1e125ebd6e3162c3a626adccd7054dfb00..ff44764751853ee4aaa19dd81c0de4cdecffd2f6 100644
--- a/src/services/profileEcogesture.service.ts
+++ b/src/services/profileEcogesture.service.ts
@@ -1,4 +1,4 @@
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import { PROFILEECOGESTURE_DOCTYPE } from 'doctypes'
 import { ProfileEcogesture } from 'models'
 
@@ -12,7 +12,7 @@ export default class ProfileEcogestureService {
    * Retrieve the ProfileEcogesture from db
    */
   public async getProfileEcogesture(): Promise<ProfileEcogesture | null> {
-    const query: QueryDefinition = Q(PROFILEECOGESTURE_DOCTYPE)
+    const query = Q(PROFILEECOGESTURE_DOCTYPE)
     const {
       data: [profileEcogesture],
     }: QueryResult<ProfileEcogesture[]> = await this._client.query(
@@ -28,7 +28,7 @@ export default class ProfileEcogestureService {
   public async updateProfileEcogesture(
     attributes: Partial<ProfileEcogesture>
   ): Promise<ProfileEcogesture | null> {
-    const query: QueryDefinition = Q(PROFILEECOGESTURE_DOCTYPE)
+    const query = Q(PROFILEECOGESTURE_DOCTYPE)
     const {
       data: [doc],
     }: QueryResult<ProfileEcogesture[]> = await this._client.query(
diff --git a/src/services/profileType.service.spec.ts b/src/services/profileType.service.spec.ts
index d7d7fa389282e6be3d99dbe9575fb04a9106c3ea..5625bad4a5744e58d9eb047b497908954deb866a 100644
--- a/src/services/profileType.service.spec.ts
+++ b/src/services/profileType.service.spec.ts
@@ -14,6 +14,7 @@ import { DateTime } from 'luxon'
 import { DjuResult } from 'models'
 import { ProfileType } from 'models/profileType.model'
 import mockClient from 'tests/__mocks__/client.mock'
+import { mockFluidPrice } from 'tests/__mocks__/fluidPrice.mock'
 import {
   mockCorrectedConsumption,
   mockEstimatedConsumption,
@@ -40,9 +41,12 @@ import {
   mockWaterRawNeeds,
   mockWaterSpreadNeeds,
 } from 'tests/__mocks__/profileType.mock'
+import FluidPricesService from './fluidsPrices.service'
 import ProfileTypeService from './profileType.service'
 import ProfileTypeFormService from './profileTypeForm.service'
 
+const mockGetPrices = jest.spyOn(FluidPricesService.prototype, 'getPrices')
+
 const unknownStep = 99999 as ProfileTypeStepForm
 describe('ProfileType service', () => {
   const profileTypeService = new ProfileTypeService(
@@ -189,6 +193,7 @@ describe('ProfileType service', () => {
   })
 
   describe('getMonthlyForecast for January', () => {
+    mockGetPrices.mockResolvedValue(mockFluidPrice)
     it('should get the monthly forecast for test profile 1', async () => {
       const profileTypeService1 = new ProfileTypeService(
         mockTestProfile1,
diff --git a/src/services/profileType.service.ts b/src/services/profileType.service.ts
index 91d05dd9f578793ea94fd35b7b687962266110be..99f7d57c64bd0149b1fb785352a913dd0d89013e 100644
--- a/src/services/profileType.service.ts
+++ b/src/services/profileType.service.ts
@@ -28,6 +28,7 @@ import {
 import logApp from 'utils/logger'
 import { formatTwoDigits } from 'utils/utils'
 import ConverterService from './converter.service'
+import FluidPricesService from './fluidsPrices.service'
 
 const logStack = logger.namespace('profileTypeService')
 
@@ -83,7 +84,7 @@ export default class ProfileTypeService {
     let correctionFacilities: number
     const correctionsNbWalls =
       heatingData.adjustment_outside_facing_walls[housingType]
-    const correctionWalls: number = correctionsNbWalls[outsideFacingWalls]
+    const correctionWalls = correctionsNbWalls[outsideFacingWalls]
     const correctionFloor =
       housingType === HousingType.APARTMENT
         ? heatingData.adjustment_floor.apartment[floor]
@@ -151,13 +152,12 @@ export default class ProfileTypeService {
       heating !== IndividualOrCollective.COLLECTIVE
     ) {
       correctionFacilities =
-        heatingData.adjustment_facilities['individual_heater_and_ventilation']
+        heatingData.adjustment_facilities.individual_heater_and_ventilation
     } else if (hasReplacedHeater === ThreeChoicesAnswer.YES) {
-      correctionFacilities =
-        heatingData.adjustment_facilities['individual_heater']
+      correctionFacilities = heatingData.adjustment_facilities.individual_heater
     } else if (hasInstalledVentilation === ThreeChoicesAnswer.YES) {
       correctionFacilities =
-        heatingData.adjustment_facilities['individual_ventilation']
+        heatingData.adjustment_facilities.individual_ventilation
     } else {
       correctionFacilities = 0
     }
@@ -233,7 +233,7 @@ export default class ProfileTypeService {
       accumulator: number,
       currentValue: number
     ): number => accumulator + currentValue
-    const totalRawNeeds: number = rawNeeds.reduce(calculateTotalNeeds)
+    const totalRawNeeds = rawNeeds.reduce(calculateTotalNeeds)
     const spreadConsumption: number =
       (totalRawNeeds / (12 * 100)) * EcsData.mensual_repartition[month - 1]
     return Math.round(spreadConsumption)
@@ -282,7 +282,7 @@ export default class ProfileTypeService {
    * @returns {number} monthCookingConsumption
    */
   public getMonthCookingConsumption(month: number): number {
-    const annualCookingConsumption: number =
+    const annualCookingConsumption =
       this.profileType.occupantsNumber *
       cookingData.ratio_kw_per_person_per_year
     const nbDaysInMonth = DateTime.fromObject({
@@ -299,7 +299,7 @@ export default class ProfileTypeService {
    * @returns {number} monthElectricSpecificConsumption
    */
   public getMonthElectricSpecificConsumption(month: number): number {
-    const annualElectricSpecificConsumption: number =
+    const annualElectricSpecificConsumption =
       elecSpeData[this.profileType.housingType][
         this.profileType.constructionYear
       ]
@@ -317,11 +317,11 @@ export default class ProfileTypeService {
    * @returns {number} monthColdWaterConsumption
    */
   public getMonthColdWaterConsumption(month: number): number {
-    const occupantsNumberIndex: number = coldWaterData.findIndex(
+    const occupantsNumberIndex = coldWaterData.findIndex(
       waterNeeds =>
         waterNeeds.occupants_number === this.profileType.occupantsNumber
     )
-    const coldWaterNeeds: number =
+    const coldWaterNeeds =
       coldWaterData[occupantsNumberIndex].consumption_in_liter_per_day
     const nbDaysInMonth = DateTime.fromObject({
       month: month,
@@ -383,11 +383,17 @@ export default class ProfileTypeService {
     return detailsMonthlyForecast
   }
 
+  /**
+   * Get fluid forecast with adjusted price
+   */
   public async getFluidForecast(
     fluidType: FluidType,
     year: number,
     month: number
   ): Promise<FluidForecast> {
+    const converterService = new ConverterService()
+    const fluidsPricesService = new FluidPricesService(this._client)
+
     const detailsMonthlyForecast = await this.getDetailsMonthlyForecast(
       fluidType,
       year,
@@ -399,15 +405,23 @@ export default class ProfileTypeService {
       if (load !== null) fluidLoad += load
     })
 
-    const converterService = new ConverterService()
-    const fluidValue = parseFloat(
-      converterService.LoadToEuro(fluidLoad, fluidType).toPrecision(5)
+    const date = DateTime.fromObject({
+      year: year,
+      month: month,
+    })
+    const priceData = await fluidsPricesService.getPrices(fluidType, date)
+    const priceForecast = fluidLoad * priceData.price
+
+    const fluidPrice = parseFloat(
+      converterService
+        .LoadToEuro(fluidLoad, fluidType, priceForecast)
+        .toPrecision(5)
     )
 
     const fluidForecast: FluidForecast = {
       fluidType: fluidType,
       load: fluidLoad,
-      value: fluidValue,
+      value: fluidPrice,
       detailsMonthlyForecast: detailsMonthlyForecast,
     }
     return fluidForecast
diff --git a/src/services/profileTypeEntity.service.ts b/src/services/profileTypeEntity.service.ts
index 59d6b80dada9c3b9ec30dbb5f525933fd9368496..b54335ba3214caa5d8c6574aceb238bbf11d4490 100644
--- a/src/services/profileTypeEntity.service.ts
+++ b/src/services/profileTypeEntity.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import profileTypeData from 'db/profileTypeData.json'
 import { PROFILETYPE_DOCTYPE } from 'doctypes'
@@ -21,7 +21,7 @@ export default class ProfileTypeEntityService {
    * When called without parameters, fetches last profileType in doctype
    */
   public async getProfileType(date?: DateTime): Promise<ProfileType | null> {
-    const query: QueryDefinition = Q(PROFILETYPE_DOCTYPE)
+    const query = Q(PROFILETYPE_DOCTYPE)
     if (date) {
       const {
         data: [profileType],
@@ -32,7 +32,7 @@ export default class ProfileTypeEntityService {
           .sortBy([{ updateDate: 'desc' }])
           .limitBy(1)
       )
-      const result: ProfileType | null = profileType ? profileType : null
+      const result = profileType ? profileType : null
       if (result) {
         return this.parseProfileTypeEntityToProfileType(profileType)
       } else {
@@ -40,7 +40,7 @@ export default class ProfileTypeEntityService {
         logApp.debug(
           'Checking if user has already filled a profileType and uses it as default'
         )
-        const query: QueryDefinition = Q(PROFILETYPE_DOCTYPE)
+        const query = Q(PROFILETYPE_DOCTYPE)
         const data: QueryResult<ProfileType[]> = await this._client.query(query)
         if (data.data.length) {
           const loadedProfileType: ProfileType = data.data[0]
@@ -69,7 +69,7 @@ export default class ProfileTypeEntityService {
           .sortBy([{ updateDate: 'desc' }])
           .limitBy(1)
       )
-      const result: ProfileType | null = profileType ? profileType : null
+      const result = profileType ? profileType : null
       if (result) {
         return this.parseProfileTypeEntityToProfileType(profileType)
       }
@@ -85,7 +85,7 @@ export default class ProfileTypeEntityService {
   public async getAllProfileTypes(
     timePeriod?: TimePeriod
   ): Promise<ProfileType[] | null> {
-    const query: QueryDefinition = Q(PROFILETYPE_DOCTYPE)
+    const query = Q(PROFILETYPE_DOCTYPE)
     if (timePeriod) {
       const data: QueryResult<ProfileType[]> = await this._client.query(
         query
@@ -100,7 +100,7 @@ export default class ProfileTypeEntityService {
       )
       if (data.data.length) {
         const profileTypesToReturn: ProfileType[] = []
-        data.data.forEach((ele: ProfileType) => {
+        data.data.forEach(ele => {
           profileTypesToReturn.push(
             this.parseProfileTypeEntityToProfileType(ele)
           )
@@ -115,7 +115,7 @@ export default class ProfileTypeEntityService {
       )
       if (data.data.length) {
         const profileTypesToReturn: ProfileType[] = []
-        data.data.forEach((ele: ProfileType) => {
+        data.data.forEach(ele => {
           profileTypesToReturn.push(
             this.parseProfileTypeEntityToProfileType(ele)
           )
@@ -132,7 +132,7 @@ export default class ProfileTypeEntityService {
   public async saveProfileType(
     attributes: Partial<ProfileType>
   ): Promise<ProfileType | null> {
-    const query: QueryDefinition = Q(PROFILETYPE_DOCTYPE)
+    const query = Q(PROFILETYPE_DOCTYPE)
     const {
       data: [doc],
     }: QueryResult<ProfileType[]> = await this._client.query(query.limitBy(1))
diff --git a/src/services/queryRunner.service.ts b/src/services/queryRunner.service.ts
index 30dcbdf0c1e0b0e01efeb83740ccb15bb897f0f0..441f4a27a6dbc261c6312ffaca3078597bcfe3b1 100644
--- a/src/services/queryRunner.service.ts
+++ b/src/services/queryRunner.service.ts
@@ -287,7 +287,7 @@ export default class QueryRunner {
     }
     return (
       doctypeMappings[fluidType]?.[timeStep] ||
-      doctypeMappings[fluidType]?.['default'] ||
+      doctypeMappings[fluidType]?.default ||
       'default'
     )
   }
@@ -297,7 +297,7 @@ export default class QueryRunner {
     timeStep: TimeStep,
     fluidType: FluidType
   ): Promise<Dataload[] | null> {
-    const query: QueryDefinition = this.buildListQuery(
+    const query = this.buildListQuery(
       timeStep,
       timePeriod,
       fluidType,
@@ -307,10 +307,7 @@ export default class QueryRunner {
 
     if (result?.data) {
       const filteredResult = this.filterDataList(result, timePeriod, timeStep)
-      const mappedResult: Dataload[] = this.mapDataList(
-        filteredResult,
-        timeStep
-      )
+      const mappedResult = this.mapDataList(filteredResult, timeStep)
       return mappedResult
     }
     return null
@@ -321,7 +318,7 @@ export default class QueryRunner {
     timeStep: TimeStep,
     fluidType: FluidType
   ) {
-    const query: QueryDefinition = this.buildListQuery(
+    const query = this.buildListQuery(
       timeStep,
       timePeriod,
       fluidType,
@@ -336,7 +333,7 @@ export default class QueryRunner {
     fluidType: FluidType,
     withDate?: boolean
   ): Promise<number | Dataload | null> {
-    const query: QueryDefinition = this.buildMaxQuery(
+    const query = this.buildMaxQuery(
       timeStep,
       maxTimePeriod,
       fluidType,
@@ -348,7 +345,7 @@ export default class QueryRunner {
         startDate: maxTimePeriod.startDate.plus({ day: -1 }),
         endDate: maxTimePeriod.startDate.plus({ day: -1 }).endOf('day'),
       }
-      const lastDayOfPreviousMonthQuery: QueryDefinition = this.buildMaxQuery(
+      const lastDayOfPreviousMonthQuery = this.buildMaxQuery(
         timeStep,
         lastDayOfPreviousMonth,
         fluidType,
@@ -383,11 +380,7 @@ export default class QueryRunner {
     fluidType: FluidType,
     timeStep?: TimeStep
   ): Promise<DateTime | null> {
-    const query: QueryDefinition = this.buildFirstDateQuery(
-      fluidType,
-      1,
-      timeStep
-    )
+    const query = this.buildFirstDateQuery(fluidType, 1, timeStep)
     const result = await this.fetchData(query)
     if (
       result?.data[0]?.year &&
@@ -411,11 +404,7 @@ export default class QueryRunner {
     fluidType: FluidType,
     timeStep?: TimeStep
   ): Promise<DateTime | null> {
-    const query: QueryDefinition = this.buildLastDateQuery(
-      fluidType,
-      1,
-      timeStep
-    )
+    const query = this.buildLastDateQuery(fluidType, 1, timeStep)
     const result = await this.fetchData(query)
     if (
       result?.data[0]?.year &&
diff --git a/src/services/quiz.service.spec.ts b/src/services/quiz.service.spec.ts
index 7b891b8419ff4ca068327a52d776f8a3ed7000d0..355120bcdfb0f6554ed3d3c84c12b2494a20af03 100644
--- a/src/services/quiz.service.spec.ts
+++ b/src/services/quiz.service.spec.ts
@@ -138,11 +138,11 @@ describe('Quiz service', () => {
     })
   })
 
-  describe('getUserQuizfromQuizEntities method', () => {
+  describe('getUserQuizFromQuizEntities method', () => {
     it('should return the userQuiz from a quizEntity', () => {
       const searchId = 'QUIZ001'
 
-      const result = quizService.getUserQuizfromQuizEntities(
+      const result = quizService.getUserQuizFromQuizEntities(
         allQuizEntities,
         searchId
       )
@@ -150,31 +150,31 @@ describe('Quiz service', () => {
     })
   })
   describe('endUserQuiz Method', () => {
-    it('should return the finished userQuiz', async () => {
-      const result = await quizService.endUserQuiz(quizDefault)
+    it('should return the finished userQuiz', () => {
+      const result = quizService.endUserQuiz(quizDefault)
       expect(result).toEqual(UserQuizDone)
     })
   })
   describe('startUserQuiz Method', () => {
-    it('should return the started userQuiz', async () => {
+    it('should return the started userQuiz', () => {
       jest
         .spyOn(DateTime, 'local')
         .mockReturnValueOnce(
           DateTime.fromISO('2021-01-01T00:00:00.000Z', { zone: 'utc' })
         )
-      const result = await quizService.startUserQuiz(quizDefault)
+      const result = quizService.startUserQuiz(quizDefault)
       expect(result).toEqual(UserQuizStarted)
     })
   })
   describe('resetUserQuiz Method', () => {
-    it('should return the reseted userQuiz', async () => {
-      const result = await quizService.resetUserQuiz(UserQuizDone)
+    it('should return the reseted userQuiz', () => {
+      const result = quizService.resetUserQuiz(UserQuizDone)
       expect(result).toEqual(UserQuizReseted)
     })
   })
   describe('updateUserQuiz Method', () => {
-    it('should return the userQuiz with updated result and correct answer to question', async () => {
-      const result = await quizService.updateUserQuiz(userQuiz, true, 0)
+    it('should return the userQuiz with updated result and correct answer to question', () => {
+      const result = quizService.updateUserQuiz(userQuiz, true, 0)
       const mockUpdatedQuestion: UserQuestion = {
         ...userQuiz.questions[0],
         result: UserQuestionState.CORRECT,
@@ -187,11 +187,11 @@ describe('Quiz service', () => {
       }
       expect(result).toEqual(mockUpdatedQuiz)
     })
-    it('should return the userQuiz with updated result and wrong answer to question', async () => {
-      const result = await quizService.updateUserQuiz(userQuiz, false, 2)
+    it('should return the userQuiz with updated result and wrong answer to question', () => {
+      const result = quizService.updateUserQuiz(userQuiz, false, 2)
       const mockUpdatedQuestion: UserQuestion = {
         ...userQuiz.questions[2],
-        result: UserQuestionState.UNCORRECT,
+        result: UserQuestionState.INCORRECT,
       }
       userQuiz.questions[2] = mockUpdatedQuestion
 
@@ -201,8 +201,8 @@ describe('Quiz service', () => {
       }
       expect(result).toEqual(mockUpdatedQuiz)
     })
-    it('should return the userQuiz with updated result and right answer to customQuestion', async () => {
-      const result = await quizService.updateUserQuiz(userQuiz, true)
+    it('should return the userQuiz with updated result and right answer to customQuestion', () => {
+      const result = quizService.updateUserQuiz(userQuiz, true)
       const mockUpdatedCustomQuestion: UserCustomQuestion = {
         ...userQuiz.customQuestion,
         result: UserQuestionState.CORRECT,
@@ -217,7 +217,7 @@ describe('Quiz service', () => {
     })
   })
   describe('getCustomQuestion Method', () => {
-    it('should return the customQuestion for date type without period - What day did I consumme the most on the last week ?', async () => {
+    it('should return the customQuestion for date type without period - What day did I consume the most on the last week ?', async () => {
       localSpy.mockReturnValue(
         DateTime.fromISO('2020-10-03T00:00:00.000Z', { zone: 'utc' })
       )
@@ -245,7 +245,7 @@ describe('Quiz service', () => {
       ])
       expect(result).toEqual(expected)
     })
-    it('should return the customQuestion for date type with period - What month did I consumme the most on year 2020 ?', async () => {
+    it('should return the customQuestion for date type with period - What month did I consume the most on year 2020 ?', async () => {
       localSpy.mockReturnValue(
         DateTime.fromISO('2020-10-03T00:00:00.000Z', { zone: 'utc' })
       )
@@ -272,7 +272,7 @@ describe('Quiz service', () => {
       ])
       expect(result).toEqual(expected)
     })
-    it('should return the customQuestion for maxload type without period - Which is your daily max consumption on the last week ?', async () => {
+    it('should return the customQuestion for max load type without period - Which is your daily max consumption on the last week ?', async () => {
       localSpy.mockReturnValue(
         DateTime.fromISO('2020-10-03T00:00:00.000Z', { zone: 'utc' })
       )
@@ -304,7 +304,7 @@ describe('Quiz service', () => {
       ])
       expect(result).toEqual(expected)
     })
-    it('should return the customQuestion for maxload type with period - Which is your daily max consumption on january 2020 ?', async () => {
+    it('should return the customQuestion for max load type with period - Which is your daily max consumption on January 2020 ?', async () => {
       localSpy.mockReturnValue(
         DateTime.fromISO('2020-10-03T00:00:00.000Z', { zone: 'utc' })
       )
@@ -335,18 +335,6 @@ describe('Quiz service', () => {
       const result = await quizService.getCustomQuestion(mockCustomQuestion, [
         FluidType.ELECTRICITY,
       ])
-      expect(mockGetMaxLoad).toHaveBeenCalledWith(
-        {
-          startDate: DateTime.fromObject({ month: 1, year: 2020 }).startOf(
-            'month'
-          ),
-          endDate: DateTime.fromObject({ month: 1, year: 2020 }).endOf('month'),
-        },
-        TimeStep.DAY,
-        [FluidType.ELECTRICITY],
-        undefined,
-        true
-      )
       expect(result).toEqual(expected)
     })
     it('should return the customQuestion for average type without period - Which is your daily average consumption on the last week ?', async () => {
@@ -413,20 +401,9 @@ describe('Quiz service', () => {
       const result = await quizService.getCustomQuestion(mockCustomQuestion, [
         FluidType.ELECTRICITY,
       ])
-      expect(mockGetGraphData).toHaveBeenCalledWith(
-        {
-          startDate: DateTime.fromObject({ year: 2020 }).startOf('year'),
-          endDate: DateTime.fromObject({ year: 2020 }).endOf('year'),
-        },
-        TimeStep.MONTH,
-        [FluidType.ELECTRICITY],
-        undefined,
-        undefined,
-        true
-      )
       expect(result).toEqual(expected)
     })
-    it('should return the customQuestion for average type with weekday period - Which is your monthly average consumption on wednesday ?', async () => {
+    it('should return the customQuestion for average type with weekday period - Which is your monthly average consumption on Wednesday ?', async () => {
       localSpy.mockReturnValue(
         DateTime.fromISO('2020-10-03T00:00:00.000Z', { zone: 'utc' })
       )
@@ -460,7 +437,7 @@ describe('Quiz service', () => {
       ])
       expect(result).toEqual(expected)
     })
-    it('should return the customQuestion for average type with weekday period and singleFluid - Which is your monthly average consumption of #fluid in #unit on wednesday ?', async () => {
+    it('should return the customQuestion for average type with weekday period and singleFluid - Which is your monthly average consumption of #fluid in #unit on Wednesday ?', async () => {
       localSpy.mockReturnValue(
         DateTime.fromISO('2020-10-03T00:00:00.000Z', { zone: 'utc' })
       )
diff --git a/src/services/quiz.service.ts b/src/services/quiz.service.ts
index 26271500527efae3b6cb4a890b3983a3673a7db7..6dac376e5b60fed7502cb3afa8b1003505b52916 100644
--- a/src/services/quiz.service.ts
+++ b/src/services/quiz.service.ts
@@ -1,4 +1,4 @@
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import { QUIZ_DOCTYPE } from 'doctypes'
 import {
   CustomQuestionType,
@@ -36,10 +36,10 @@ export default class QuizService {
    * Retrieve all quiz entities from db
    */
   public async getAllQuizEntities(): Promise<QuizEntity[]> {
-    const query: QueryDefinition = Q(QUIZ_DOCTYPE)
-    const { data: quizs }: QueryResult<QuizEntity[]> =
+    const query = Q(QUIZ_DOCTYPE)
+    const { data: quizzes }: QueryResult<QuizEntity[]> =
       await this._client.query(query)
-    return quizs
+    return quizzes
   }
 
   /**
@@ -47,9 +47,7 @@ export default class QuizService {
    * @param {string} quizId - ID of the searched quiz
    */
   public async getQuizEntityById(quizId: string): Promise<QuizEntity> {
-    const query: QueryDefinition = Q(QUIZ_DOCTYPE)
-      .where({ _id: quizId })
-      .limitBy(1)
+    const query = Q(QUIZ_DOCTYPE).where({ _id: quizId }).limitBy(1)
     const { data }: QueryResult<QuizEntity[]> = await this._client.query(query)
     return data?.[0]
   }
@@ -74,7 +72,7 @@ export default class QuizService {
    * @param {QuizEntity[]} quizEntityList - userQuiz to update
    * @param {string} searchId - userQuiz to update
    */
-  public getUserQuizfromQuizEntities(
+  public getUserQuizFromQuizEntities(
     quizEntityList: QuizEntity[],
     searchId: string
   ): UserQuiz {
@@ -99,7 +97,7 @@ export default class QuizService {
         entity => entity.id === searchId
       )
       if (quizEntityIndex >= 0) {
-        const quizEntity: QuizEntity = quizEntityList[quizEntityIndex]
+        const quizEntity = quizEntityList[quizEntityIndex]
         quiz = this.parseQuizEntityToUserQuiz(quizEntity)
       }
     }
@@ -137,12 +135,12 @@ export default class QuizService {
     const userQuestions: UserQuestion[] = []
 
     quiz.questions.forEach(question => {
-      const userQuestion: UserQuestion =
-        this.parseQuestionEntityToQuestion(question)
+      const userQuestion = this.parseQuestionEntityToQuestion(question)
       userQuestions.push(userQuestion)
     })
-    const userCustomQuestion: UserCustomQuestion =
-      this.parseCustomQuestionEntityToCustomQuestion(quiz.customQuestion)
+    const userCustomQuestion = this.parseCustomQuestionEntityToCustomQuestion(
+      quiz.customQuestion
+    )
 
     const userQuiz: UserQuiz = {
       id: quiz.id,
@@ -163,7 +161,7 @@ export default class QuizService {
    * Return quiz with updated state to UserQuizState.ONGOING and randomize question and answers
    * @param {UserQuiz} userQuiz - userQuiz to update
    */
-  public async startUserQuiz(userQuiz: UserQuiz): Promise<UserQuiz> {
+  public startUserQuiz(userQuiz: UserQuiz): UserQuiz {
     const questions = userQuiz.questions.map(question => ({
       ...question,
       answers: shuffle(question.answers),
@@ -182,13 +180,11 @@ export default class QuizService {
    * Return quiz with updated state to UserQuizState.UNLOCKED and updated questions with false result
    * @param {UserQuiz} userQuiz - userQuiz to update
    */
-  public async resetUserQuiz(userQuiz: UserQuiz): Promise<UserQuiz> {
-    const updatedQuestions: UserQuestion[] = userQuiz.questions.map(
-      question => ({
-        ...question,
-        result: UserQuestionState.UNLOCKED,
-      })
-    )
+  public resetUserQuiz(userQuiz: UserQuiz): UserQuiz {
+    const updatedQuestions = userQuiz.questions.map(question => ({
+      ...question,
+      result: UserQuestionState.UNLOCKED,
+    }))
     const updatedCustomQuestion = {
       ...userQuiz.customQuestion,
       result: UserQuestionState.UNLOCKED,
@@ -206,26 +202,25 @@ export default class QuizService {
    * Return quiz with updated state to UserQuizState.DONE
    * @param {UserQuiz} userQuiz - userQuiz to update
    */
-  public async endUserQuiz(userQuiz: UserQuiz): Promise<UserQuiz> {
-    const updatedUserQuiz: UserQuiz = {
+  public endUserQuiz(userQuiz: UserQuiz): UserQuiz {
+    return {
       ...userQuiz,
       state: UserQuizState.DONE,
     }
-    return updatedUserQuiz
   }
 
   /**
    * Return quiz with result and updated question or customQuestion if no index is passed
    * @param {UserQuiz} userQuiz - userQuiz to update
    */
-  public async updateUserQuiz(
+  public updateUserQuiz(
     userQuiz: UserQuiz,
     questionResult: boolean,
     questionIndex?: number
-  ): Promise<UserQuiz> {
+  ): UserQuiz {
     const result = questionResult
       ? UserQuestionState.CORRECT
-      : UserQuestionState.UNCORRECT
+      : UserQuestionState.INCORRECT
 
     const updatedQuestions = userQuiz.questions.map((question, index) => {
       if (index === questionIndex) {
@@ -265,12 +260,12 @@ export default class QuizService {
     let answers: Answer[]
     const explanation =
       'Vous pouvez vérifier cette information sur l’écran Conso.'
-    const finalInterval: TimePeriod = this.getTimePeriodFromInterval(
+    const finalInterval = this.getTimePeriodFromInterval(
       customQuestionEntity.interval,
       customQuestionEntity.period.weekday ? {} : customQuestionEntity.period
     )
-    let useFluidTypes: FluidType[] = fluidTypes
-    let questionLabel: string = customQuestionEntity.questionLabel
+    let useFluidTypes = fluidTypes
+    let questionLabel = customQuestionEntity.questionLabel
     let unit = '€'
     if (customQuestionEntity.singleFluid === true) {
       let unitLabel = 'kWh'
@@ -295,27 +290,26 @@ export default class QuizService {
     }
     if (customQuestionEntity.type === CustomQuestionType.DATE) {
       // Interval
-      const intervalAsnwer = await this.getMaxLoadOnLastInterval(
+      const intervalAnswer = await this.getMaxLoadOnLastInterval(
         customQuestionEntity.timeStep,
         finalInterval,
         useFluidTypes
       )
       answers = this.getAnswersForInterval(
-        intervalAsnwer.date,
+        intervalAnswer.date,
         customQuestionEntity.timeStep,
         finalInterval
       )
     } else if (customQuestionEntity.type === CustomQuestionType.MAXDATA) {
       // Max data
       const consumptionService = new ConsumptionDataManager(this._client)
-      let maxLoad = await consumptionService.getMaxLoad(
-        finalInterval,
-        customQuestionEntity.timeStep,
-        useFluidTypes,
-        undefined,
-        !customQuestionEntity.singleFluid
-      )
-      maxLoad = maxLoad === null ? 0 : maxLoad
+      let maxLoad = await consumptionService.getMaxLoad({
+        maxTimePeriod: finalInterval,
+        timeStep: customQuestionEntity.timeStep,
+        fluidTypes: useFluidTypes,
+        isHome: !customQuestionEntity.singleFluid,
+      })
+      maxLoad = maxLoad ?? 0
       answers = this.getAnswersForNumberValue(maxLoad as number, unit)
     } else {
       // average
@@ -393,19 +387,19 @@ export default class QuizService {
   private async getMaxLoadOnLastInterval(
     timeStep: TimeStep,
     interval: TimePeriod,
-    fluidType: FluidType[]
+    fluidTypes: FluidType[]
   ): Promise<IntervalAnswer> {
-    let dateMax: DateTime = DateTime.local().setZone('utc', {
+    let dateMax = DateTime.local().setZone('utc', {
       keepLocalTime: true,
     })
     let max = 0
     const consumptionService = new ConsumptionDataManager(this._client)
     const limit = { date: interval.startDate, reached: false }
-    let graphData = await consumptionService.getGraphData(
-      interval,
+    let graphData = await consumptionService.getGraphData({
+      timePeriod: interval,
       timeStep,
-      fluidType
-    )
+      fluidTypes,
+    })
     if (graphData?.actualData) {
       max = Math.max(...graphData.actualData.map(d => d.value))
 
@@ -426,11 +420,11 @@ export default class QuizService {
           newInterval.startDate = newInterval.startDate.minus(objectTimeStep)
           newInterval.endDate = newInterval.endDate.minus(objectTimeStep)
           limit.date = newInterval.startDate
-          graphData = await consumptionService.getGraphData(
-            newInterval,
+          graphData = await consumptionService.getGraphData({
+            timePeriod: newInterval,
             timeStep,
-            fluidType
-          )
+            fluidTypes: fluidTypes,
+          })
 
           if (limit.date < DateTime.now().minus({ year: 5 })) {
             limit.reached = true
@@ -454,11 +448,11 @@ export default class QuizService {
             })
             .startOf('month'),
         }
-        graphData = await consumptionService.getGraphData(
-          newInterval,
+        graphData = await consumptionService.getGraphData({
+          timePeriod: newInterval,
           timeStep,
-          fluidType
-        )
+          fluidTypes: fluidTypes,
+        })
       }
       if (graphData?.actualData) {
         max = Math.max(...graphData.actualData.map(d => d.value))
@@ -477,20 +471,18 @@ export default class QuizService {
   private async getAverageOnGivenPeriod(
     timeStep: TimeStep,
     interval: TimePeriod,
-    fluidType: FluidType[],
+    fluidTypes: FluidType[],
     weekday: number | undefined,
     singleFluid: boolean
   ): Promise<number> {
     const consumptionService = new ConsumptionDataManager(this._client)
-    logApp.info('GetAverageOnGivenPeriod is about to call getgraphdata')
-    const graphData = await consumptionService.getGraphData(
-      interval,
+    logApp.info('GetAverageOnGivenPeriod is about to call getGraphData')
+    const graphData = await consumptionService.getGraphData({
+      timePeriod: interval,
       timeStep,
-      fluidType,
-      undefined,
-      undefined,
-      !singleFluid
-    )
+      fluidTypes,
+      isHome: !singleFluid,
+    })
     let average = 0
     if (graphData?.actualData) {
       let total = 0
diff --git a/src/services/terms.service.ts b/src/services/terms.service.ts
index 778405b3f809f071e167f7106df99d6f35649c8d..2e33732d5e035c07d1c0b91176217bcafdbaa9c5 100644
--- a/src/services/terms.service.ts
+++ b/src/services/terms.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import { TERMS_DOCTYPE } from 'doctypes'
 import { DateTime } from 'luxon'
@@ -18,7 +18,7 @@ export default class TermsService {
    * Gets the last term doctype
    */
   public async getLastTerm(): Promise<Term> {
-    const query: QueryDefinition = Q(TERMS_DOCTYPE)
+    const query = Q(TERMS_DOCTYPE)
       .where({})
       .indexFields(['acceptedAt'])
       .sortBy([{ acceptedAt: 'desc' }])
@@ -31,7 +31,7 @@ export default class TermsService {
 
   /** Checks if the last term has been accepted by user */
   public async isLastTermValidated(): Promise<boolean> {
-    const query: QueryDefinition = Q(TERMS_DOCTYPE)
+    const query = Q(TERMS_DOCTYPE)
       .where({})
       .indexFields(['acceptedAt'])
       .sortBy([{ acceptedAt: 'desc' }])
@@ -52,8 +52,8 @@ export default class TermsService {
   public async getTermsVersionType(): Promise<VersionType> {
     const lastTerm = await this.getLastTerm()
     if (lastTerm) {
-      const splittedLastVersion: string[] = lastTerm.version.split('.')
-      const splittedConfVersion: string[] = config.termsVersion.split('.')
+      const splittedLastVersion = lastTerm.version.split('.')
+      const splittedConfVersion = config.termsVersion.split('.')
       if (
         splittedLastVersion[0] === splittedConfVersion[0] &&
         (splittedLastVersion[1] !== splittedConfVersion[1] ||
diff --git a/src/services/timePeriod.service.spec.ts b/src/services/timePeriod.service.spec.ts
index abc6455fb1c27f99e61c5091ffd234a929f2193e..674c75a36f5084a0e8f95df6014af39915a25f83 100644
--- a/src/services/timePeriod.service.spec.ts
+++ b/src/services/timePeriod.service.spec.ts
@@ -263,7 +263,7 @@ describe('timePeriod service', () => {
           zone: 'utc',
         }),
       }
-      const error = await getError(async () =>
+      const error = await getError(() =>
         timePeriodService.getComparisonTimePeriod(timePeriod, unknownTimeStep)
       )
       expect(error).toEqual(new Error('TimeStep unknown'))
@@ -322,7 +322,7 @@ describe('timePeriod service', () => {
       expect(result).toEqual(expectedDate)
     })
     it('should return an error because of unknown TimeStep', async () => {
-      const error = await getError(async () =>
+      const error = await getError(() =>
         timePeriodService.getLastDayOfCompletePeriod(
           randomDate,
           unknownTimeStep
@@ -384,7 +384,7 @@ describe('timePeriod service', () => {
       expect(result).toEqual(expectedDate)
     })
     it('should return unknown timestep', async () => {
-      const error = await getError(async () =>
+      const error = await getError(() =>
         timePeriodService.getLastDayOfTimePeriod(randomDate, unknownTimeStep)
       )
       expect(error).toEqual(new Error('TimeStep unknown'))
@@ -443,7 +443,7 @@ describe('timePeriod service', () => {
       expect(result).toEqual(expectedDate)
     })
     it('should return the date of the last day of current period', async () => {
-      const error = await getError(async () =>
+      const error = await getError(() =>
         timePeriodService.getStartDateFromEndDateByTimeStep(
           randomDate,
           unknownTimeStep
diff --git a/src/services/timePeriod.service.ts b/src/services/timePeriod.service.ts
index 46804b2e55b687df5c0352d75c20e87dc7655979..263b793784686d92e266e29b34c58186c01c57df 100644
--- a/src/services/timePeriod.service.ts
+++ b/src/services/timePeriod.service.ts
@@ -27,11 +27,11 @@ export default class TimePeriodService {
         timeStep
       ).endOf('day')
 
-    const timePeriod: TimePeriod = this.getLastCompletePeriod(
+    const timePeriod = this.getLastCompletePeriod(
       lastDayOfCompletePeriod,
       timeStep
     )
-    const comparisonTimePeriod: TimePeriod = this.getComparisonTimePeriod(
+    const comparisonTimePeriod = this.getComparisonTimePeriod(
       timePeriod,
       timeStep
     )
@@ -194,7 +194,7 @@ export default class TimePeriodService {
     lastDay: DateTime,
     timeStep: TimeStep
   ): TimePeriod {
-    // calculate last day of the tobe coimpleted period
+    // calculate last day of the to be completed period
     const lastCompleteTimePeriod = {
       startDate: this.getStartDateFromEndDateByTimeStep(lastDay, timeStep),
       endDate: lastDay,
diff --git a/src/services/triggers.service.ts b/src/services/triggers.service.ts
index 5e363dbe5a34b8324a398a3532f8de596ab8e877..39fd600215bdcbb9dbb019fd77c2c1246dca33d6 100644
--- a/src/services/triggers.service.ts
+++ b/src/services/triggers.service.ts
@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react'
-import { Client, Q, QueryDefinition, QueryResult } from 'cozy-client'
+import { Client, Q, QueryResult } from 'cozy-client'
 import triggersMutations from 'cozy-harvest-lib/dist/connections/triggers'
 import { buildAttributes } from 'cozy-harvest-lib/dist/helpers/triggers'
 import logger from 'cozy-logger'
@@ -50,7 +50,7 @@ export default class TriggerService {
     account: Account,
     konnector: Konnector
   ): Promise<Trigger | null> {
-    const query: QueryDefinition = Q(TRIGGERS_DOCTYPE)
+    const query = Q(TRIGGERS_DOCTYPE)
       .where({
         'message.account': account._id,
         'message.konnector': konnector.slug,
@@ -64,7 +64,7 @@ export default class TriggerService {
   }
 
   public async getTriggerForAccount(account: Account): Promise<Trigger | null> {
-    const query: QueryDefinition = Q(TRIGGERS_DOCTYPE)
+    const query = Q(TRIGGERS_DOCTYPE)
       .where({
         'message.account': account._id,
         'message.konnector': account.account_type,
diff --git a/src/services/usageEvent.service.ts b/src/services/usageEvent.service.ts
index 5f971c83c9f93048118d01adc3ce1370fdd084a6..390d4c654141d48e41263e4336d17605b245fadb 100644
--- a/src/services/usageEvent.service.ts
+++ b/src/services/usageEvent.service.ts
@@ -1,11 +1,5 @@
 import * as Sentry from '@sentry/react'
-import {
-  Client,
-  MongoSelector,
-  Q,
-  QueryDefinition,
-  QueryResult,
-} from 'cozy-client'
+import { Client, MongoSelector, Q, QueryResult } from 'cozy-client'
 import logger from 'cozy-logger'
 import { USAGEEVENT_DOCTYPE } from 'doctypes'
 import { DateTime } from 'luxon'
@@ -93,16 +87,14 @@ export default class UsageEventService {
     filterParams: MongoSelector,
     desc = false
   ): Promise<UsageEvent[]> {
-    const query: QueryDefinition = Q(USAGEEVENT_DOCTYPE)
+    const query = Q(USAGEEVENT_DOCTYPE)
       .where(filterParams)
       .sortBy([{ eventDate: desc ? 'desc' : 'asc' }])
     const { data: usageEventEntities }: QueryResult<UsageEventEntity[]> =
       await client.query(query)
-    const usageEvents: UsageEvent[] = usageEventEntities.map(
-      (usageEventEntity: UsageEventEntity) => {
-        return this.parseUsageEventEntityToUsageEvent(usageEventEntity)
-      }
-    )
+    const usageEvents = usageEventEntities.map(usageEventEntity => {
+      return this.parseUsageEventEntityToUsageEvent(usageEventEntity)
+    })
     return usageEvents
   }
 
diff --git a/src/store/analysis/analysis.slice.spec.ts b/src/store/analysis/analysis.slice.spec.ts
index 8e8ac488ee08b829a2b2493d8b5ccc9fb20bb851..cfa64383ba5aea45ec3a75e69385264a731dc6a6 100644
--- a/src/store/analysis/analysis.slice.spec.ts
+++ b/src/store/analysis/analysis.slice.spec.ts
@@ -1,12 +1,15 @@
 import { DateTime } from 'luxon'
 import { mockAnalysisState } from 'tests/__mocks__/store'
-import { analysisSlice, setAnalysisMonth, setPeriod } from './analysis.slice'
+import {
+  analysisSlice,
+  setAnalysisMonth,
+  setHaveSeenNewsletterReminder,
+  setPeriod,
+} from './analysis.slice'
 
 describe('analysis reducer', () => {
   it('should return the initial state', () => {
-    const initialState = analysisSlice.reducer(undefined, {
-      type: undefined,
-    })
+    const initialState = analysisSlice.getInitialState()
     expect(initialState).toEqual({
       ...mockAnalysisState,
       analysisMonth: DateTime.local().minus({ months: 1 }).startOf('day'),
@@ -35,4 +38,17 @@ describe('analysis reducer', () => {
       })
     })
   })
+
+  describe('setHaveSeenNewsletterReminder', () => {
+    it('should handle setHaveSeenNewsletterReminder', () => {
+      const state = analysisSlice.reducer(
+        mockAnalysisState,
+        setHaveSeenNewsletterReminder(true)
+      )
+      expect(state).toEqual({
+        ...mockAnalysisState,
+        haveSeenNewsletterReminder: true,
+      })
+    })
+  })
 })
diff --git a/src/store/analysis/analysis.slice.ts b/src/store/analysis/analysis.slice.ts
index 11eabac17c89f295762c5bf02b5ecdc10c45a866..bc2b12deaa4e8a66d411e52983409fcafd9c3d81 100644
--- a/src/store/analysis/analysis.slice.ts
+++ b/src/store/analysis/analysis.slice.ts
@@ -5,6 +5,7 @@ import { AnalysisState } from 'models'
 const initialState: AnalysisState = {
   period: 'month',
   analysisMonth: DateTime.local().minus({ months: 1 }).startOf('day'),
+  haveSeenNewsletterReminder: false,
 }
 
 export const analysisSlice = createSlice({
@@ -17,7 +18,11 @@ export const analysisSlice = createSlice({
     setAnalysisMonth: (state, action: PayloadAction<DateTime>) => {
       state.analysisMonth = action.payload
     },
+    setHaveSeenNewsletterReminder: (state, action: PayloadAction<boolean>) => {
+      state.haveSeenNewsletterReminder = action.payload
+    },
   },
 })
 
-export const { setPeriod, setAnalysisMonth } = analysisSlice.actions
+export const { setPeriod, setAnalysisMonth, setHaveSeenNewsletterReminder } =
+  analysisSlice.actions
diff --git a/src/store/challenge/challenge.slice.spec.ts b/src/store/challenge/challenge.slice.spec.ts
index f4a265cdf615264845e93d98099247311b8e174f..600a19afaaa9d4e2626032eed5b09dbb52450eb8 100644
--- a/src/store/challenge/challenge.slice.spec.ts
+++ b/src/store/challenge/challenge.slice.spec.ts
@@ -16,7 +16,7 @@ import {
 
 describe('challenge reducer', () => {
   it('should return the initial state', () => {
-    const state = challengeSlice.reducer(undefined, { type: undefined })
+    const state = challengeSlice.getInitialState()
     expect(state).toEqual(mockChallengeState)
   })
 
diff --git a/src/store/chart/chart.slice.spec.ts b/src/store/chart/chart.slice.spec.ts
index 02f68b6399afa66dbb82ff070c10dc8d082dbdb1..c585209bde367a574c33fc32d2f28a181a912160 100644
--- a/src/store/chart/chart.slice.spec.ts
+++ b/src/store/chart/chart.slice.spec.ts
@@ -15,12 +15,12 @@ import {
 
 describe('chart reducer', () => {
   it('should return the initial state', () => {
-    const initialState = chartSlice.reducer(undefined, { type: undefined })
+    const initialState = chartSlice.getInitialState()
     expect(initialState).toEqual(mockChartState)
   })
 
   it('should return same state if no action', () => {
-    const state = chartSlice.reducer(mockChartState, { type: undefined })
+    const state = chartSlice.getInitialState()
     expect(state).toEqual(mockChartState)
   })
 
diff --git a/src/store/global/global.slice.spec.ts b/src/store/global/global.slice.spec.ts
index 3df92c909f3204595518c0ae66e6a7d913b0e440..ea411452922f0b48fcbb4f2d05818103c50fb451 100644
--- a/src/store/global/global.slice.spec.ts
+++ b/src/store/global/global.slice.spec.ts
@@ -100,7 +100,7 @@ const fluidStatus: FluidStatus[] = [
 
 describe('globalSlice', () => {
   it('should return the initial state', () => {
-    const initialState = globalSlice.reducer(undefined, { type: undefined })
+    const initialState = globalSlice.getInitialState()
     expect(initialState).toEqual(mockGlobalState)
   })
 
diff --git a/src/store/hooks.ts b/src/store/hooks.ts
index 21a319209c0bc26aa1d502d3593373536345c336..66ed0295e1ad4153f9da32070c9b220fd381c8d5 100644
--- a/src/store/hooks.ts
+++ b/src/store/hooks.ts
@@ -1,9 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { AppDispatch, AppState } from './store'
 
 // Typed hooks
 // https://redux.js.org/tutorials/typescript-quick-start#define-typed-hooks
 
-export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<AppState>()
diff --git a/src/store/modal/modal.slice.spec.ts b/src/store/modal/modal.slice.spec.ts
index 3ff8dd684ed589fb048e37ba1bbecc078be2f3e4..83ba110aaa2edb55dc195239edbf03503764a1c9 100644
--- a/src/store/modal/modal.slice.spec.ts
+++ b/src/store/modal/modal.slice.spec.ts
@@ -10,7 +10,7 @@ import {
 
 describe('modal reducer', () => {
   it('should return the initial state', () => {
-    const initialState = modalSlice.reducer(undefined, { type: undefined })
+    const initialState = modalSlice.getInitialState()
     expect(initialState).toEqual(mockModalState)
   })
 
@@ -31,9 +31,7 @@ describe('modal reducer', () => {
       grdf: true,
     }
     it('should have all partners to false by default', () => {
-      const state = modalSlice.reducer(mockModalState, {
-        type: undefined,
-      })
+      const state = modalSlice.getInitialState()
       const expectedResult: ModalState = {
         ...mockModalState,
         partnersIssueModal: {
diff --git a/src/store/profile/profile.slice.spec.ts b/src/store/profile/profile.slice.spec.ts
index aca5f4bbd7aec52404cfa22fcbd3c0cf01e80732..eb1e2b65c9ff4be2cf6e1e56763675da6fe67eb6 100644
--- a/src/store/profile/profile.slice.spec.ts
+++ b/src/store/profile/profile.slice.spec.ts
@@ -3,9 +3,7 @@ import { profileSlice } from './profile.slice'
 
 describe('profile slice', () => {
   it('should return the initial state', () => {
-    const initialState = profileSlice.reducer(undefined, {
-      type: undefined,
-    })
+    const initialState = profileSlice.getInitialState()
     expect(initialState).toEqual(mockProfileState)
   })
 })
diff --git a/src/store/profileEcogesture/profileEcogesture.slice.spec.ts b/src/store/profileEcogesture/profileEcogesture.slice.spec.ts
index 290c69278fd2419c3f13b74c406c84e742c92115..6eedc284fa1c3c9fceeb07af1bf0b502dba82744 100644
--- a/src/store/profileEcogesture/profileEcogesture.slice.spec.ts
+++ b/src/store/profileEcogesture/profileEcogesture.slice.spec.ts
@@ -6,9 +6,7 @@ import { profileEcogestureSlice } from './profileEcogesture.slice'
 
 describe('profileEcogesture slice', () => {
   it('should return the initial state', () => {
-    const initialState = profileEcogestureSlice.reducer(undefined, {
-      type: undefined,
-    })
+    const initialState = profileEcogestureSlice.getInitialState()
     expect(initialState).toEqual(mockProfileEcogesture)
   })
 
diff --git a/src/store/profileType/profileType.slice.spec.ts b/src/store/profileType/profileType.slice.spec.ts
index d359df254235ff64b45bfb2e7ea14daf509740ea..1b0f2500a20c294283d7b4c958d20a81e69de70f 100644
--- a/src/store/profileType/profileType.slice.spec.ts
+++ b/src/store/profileType/profileType.slice.spec.ts
@@ -18,9 +18,7 @@ import { profileTypeSlice, setProfileType } from './profileType.slice'
 
 describe('profileType reducer', () => {
   it('should return the initial state', () => {
-    const initialState = profileTypeSlice.reducer(undefined, {
-      type: undefined,
-    })
+    const initialState = profileTypeSlice.getInitialState()
     expect(initialState).toEqual(mockProfileTypeState)
   })
 
diff --git a/src/store/store.ts b/src/store/store.ts
index 3348dcf8f15bd1514dbc12ae164d0c4355077756..a9a184c31ed787e2a75937f9f703f8d0e8ad6b7f 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -61,19 +61,26 @@ const ecolyo = combineReducers({
 })
 
 /** setupStore function to configure redux store taking an extra argument 'client' */
-export const setupStore = (client: Client) => {
+export const setupStore = (
+  client: Client,
+  preloadedState?: Partial<AppState>
+) => {
   const store = configureStore({
     reducer: {
       cozy: client.reducer(),
       ecolyo,
     },
+    preloadedState,
     middleware: getDefaultMiddleware =>
       getDefaultMiddleware({
-        serializableCheck: false,
         thunk: { extraArgument: { client } },
+        serializableCheck: false,
       }),
     devTools: true,
-    enhancers: [sentryReduxEnhancer],
+    enhancers: getDefaultEnhancers =>
+      getDefaultEnhancers({
+        autoBatch: { type: 'tick' },
+      }).concat(sentryReduxEnhancer),
   })
 
   return store
diff --git a/src/styles/base/_breakpoint.scss b/src/styles/base/_breakpoint.scss
index 8cb5481971e6fc83c49d89160890c19a7a36eefd..b4e493995f710e64e8ce03ad01c14c027ab1f885 100644
--- a/src/styles/base/_breakpoint.scss
+++ b/src/styles/base/_breakpoint.scss
@@ -5,6 +5,8 @@ $width-tablet: 1023px;
 $width-desktop: 1200px;
 $width-large-desktop: 1201px;
 
+$height-small-phone: 667px;
+
 $small-phone: 'only screen and (max-width : #{$width-small-phone})';
 $phone: 'only screen and (max-width : #{$width-phone})';
 $large-phone: 'only screen and (max-width : #{$width-large-phone})';
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index b27f6f4409913063e2a68024e365ce5e0a8a950f..eb1e924e65d8dc58dc725ae5a2c9f8a39346a0d8 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -43,6 +43,7 @@ $blue-radial-gradient-transparent: radial-gradient(
   rgba(255, 255, 255, 0) 100%
 );
 $blue-grey: #bfcce4;
+$blue-accessibility: #1b8bff;
 
 /** GREEN **/
 $green: #7fd771;
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index a0a743fb893995f6081059ed136c91c9bd35de1f..18a7a9be78df766853ffe9bfdad93522961ca7a8 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -36,7 +36,9 @@ p {
   text-align: center;
   letter-spacing: 0.15px;
   color: $grey-bright;
-  text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07);
+  text-shadow:
+    0px -1px 0px #060609,
+    0px 1px 0px rgba(255, 255, 255, 0.07);
 }
 
 @each $name, $size in $text-size {
@@ -131,13 +133,3 @@ p {
     font-size: 0.75rem;
   }
 }
-
-/* Cozy bar */
-.cozybar {
-  font-family: $text-font;
-  font-style: normal;
-  font-weight: bold;
-  font-size: 1.3125rem;
-  line-height: 120%;
-  color: $grey-bright;
-}
diff --git a/src/styles/base/_z-index.scss b/src/styles/base/_z-index.scss
index 17a5dea8e7482596a2e437d272f293d7242f99c8..4fe88ba947f1a029c8575b439f51614140cc465f 100644
--- a/src/styles/base/_z-index.scss
+++ b/src/styles/base/_z-index.scss
@@ -3,3 +3,4 @@ $z-pieChart: 5;
 $z-dialog: 10;
 $z-header: 18;
 $z-splash: 1500;
+$skip-link: 1000001;
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 16fdf31cd70c22b952979b857ebfb9a3cb0b342d..3ce54187b6ba08978c2553a292b8c5f1f9ddd7e3 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -165,6 +165,15 @@
     filter: drop-shadow(0 -0.1rem 0.2rem $multi-color);
   }
 }
+
+.barValue {
+  outline: none;
+  &:focus-visible {
+    outline: 2px solid $blue-accessibility;
+    outline-offset: 2px;
+  }
+}
+
 /** Animation **/
 .bounce-1 {
   animation-name: bounce-1;
@@ -222,27 +231,6 @@
   }
 }
 
-.bounce-3 {
-  animation-name: bounce-3;
-  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);
-  animation-iteration-count: 1;
-  transform-origin: bottom center;
-}
-@keyframes bounce-3 {
-  0% {
-    opacity: 0.6;
-    transform: scaleY(1);
-  }
-  50% {
-    transform: scaleY(1.1);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-
 /** Animation delay **/
 .delay {
   animation-duration: 0.4s;
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 3a8f0feb4ef0b737d97fb2f0daf824056364274b..c3cfc4fff498721495f1ecf7b1334eb8e518cfe3 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -6,6 +6,10 @@ button {
     font-size: 1rem;
     font-weight: 700;
   }
+  &:focus-visible {
+    outline: 2px solid $blue-accessibility;
+    outline-offset: 2px;
+  }
 
   &.btnPrimary {
     @include button($dark-light-2, transparent, $multi-color-radial-gradient) {
@@ -18,8 +22,8 @@ button {
   }
 
   &.btnText {
-    text-decoration: underline;
     span {
+      text-decoration: underline;
       text-transform: none;
       font-weight: 400;
     }
diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
index b7a3fd566b52189d24f81ab8b24ebe03cdaadb56..5fa2f1df183a45ca61f5e9416630db0b325ae68e 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -26,6 +26,10 @@ div.expansion-panel-summary {
     background-color: unset;
     box-shadow: 0 0 0 1px $grey-bright;
   }
+  &:focus-visible {
+    outline: 2px solid $blue-accessibility;
+    outline-offset: 2px;
+  }
   &.Mui-expanded {
     min-height: 4rem;
     &.small {
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
index 66759a556b309fc6956a2b95c0b855c390379449..a9817361e3d26f447bdebe332e567183e4d96f76 100644
--- a/src/styles/components/_input.scss
+++ b/src/styles/components/_input.scss
@@ -9,11 +9,6 @@ input.inputNumber {
   background: transparent;
   transition: all 300ms ease;
   color: $grey-bright;
-  &:focus,
-  &:focus-visible {
-    border-color: $gold-shadow;
-    outline: none;
-  }
 }
 
 input.inputText {
@@ -36,3 +31,8 @@ input.inputNumber {
 input.inputCheckbox {
   @include checkBox($gold-shadow, $dark-light-2);
 }
+
+input:focus-visible {
+  outline: 2px solid $blue-accessibility;
+  outline-offset: 2px;
+}
diff --git a/src/styles/components/_link.scss b/src/styles/components/_link.scss
index c3331e239bc9a2bace876c6fc809ad76e3f6a68a..077d3c00763e25795f573f513b6fc3517f7c2886 100644
--- a/src/styles/components/_link.scss
+++ b/src/styles/components/_link.scss
@@ -13,6 +13,10 @@ a:focus {
     box-shadow: 0 0 0 1px $grey-bright;
   }
 }
+a:focus-visible {
+  outline: 2px solid $blue-accessibility;
+  outline-offset: 2px;
+}
 a.MuiLink-underlineHover:hover {
   text-decoration: none;
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b0eaaab45d4fe6daf09d9c927721c53c023d98da..d1f1147728ad6c04df17e831508b26766b8176fa 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -52,6 +52,10 @@
   --elecColorRadialGradient: #{$elec-color-radial-gradient};
   --gasColorRadialGradient: #{$gas-color-radial-gradient};
   --waterColorRadialGradient: #{$water-color-radial-gradient};
+
+  // Override Cozy UI colors
+  --paperBackgroundColor: $dark-2;
+  --primaryTextColor: $grey-bright;
 }
 
 .application {
@@ -75,6 +79,7 @@
   justify-content: center;
   // useful when text is rendered with loader
   align-items: center;
+  background-color: transparent;
 }
 
 // devtools button
diff --git a/src/targets/browser/index.ejs b/src/targets/browser/index.ejs
index ee85e8ba084bdce2227a5426926788879554db44..b2711492a810f395bfa216dd018dea595b8a998f 100644
--- a/src/targets/browser/index.ejs
+++ b/src/targets/browser/index.ejs
@@ -21,6 +21,7 @@
     <!-- PWA Colors -->
     <meta name="theme-color" content="#343641" />
     <meta name="background-color" content="#121212" />
+    <meta name="color-scheme" content="only dark" />
 
     <% _.forEach(htmlWebpackPlugin.files.css, function(file) { %>
         <link rel="stylesheet" href="<%- file %>">
diff --git a/src/targets/browser/index.tsx b/src/targets/browser/index.tsx
index 9e9cde5363be93509e43daa58fc5576d2d344c6a..bd485a74445e679f0c9728b0b2bb3c8376f6d102 100644
--- a/src/targets/browser/index.tsx
+++ b/src/targets/browser/index.tsx
@@ -5,13 +5,14 @@ declare let __PIWIK_SITEID__: number
 declare let __SENTRY_DSN__: string
 declare let Piwik: any
 
+import { ThemeProvider } from '@material-ui/core'
 import * as Sentry from '@sentry/react'
-import { BrowserTracing } from '@sentry/tracing'
+import { theme } from 'components/theme'
 import CozyClient, { Client, CozyProvider } from 'cozy-client'
 import { isFlagshipApp } from 'cozy-device-helper'
 import { handleOAuthResponse } from 'cozy-harvest-lib/dist/helpers/oauth'
 import { WebviewIntentProvider } from 'cozy-intent'
-import { I18n, initTranslation } from 'cozy-ui/transpiled/react/I18n'
+import { I18n, initTranslation } from 'cozy-ui/transpiled/react/providers/I18n'
 import schema from 'doctypes'
 import { createHashHistory } from 'history'
 import { memoize } from 'lodash'
@@ -79,7 +80,7 @@ const setupApp = memoize(() => {
   !isLocal &&
     Sentry.init({
       dsn: __SENTRY_DSN__,
-      integrations: [new BrowserTracing()],
+      integrations: [Sentry.browserTracingIntegration()],
       // Set tracesSampleRate to 1.0 to capture 100%
       // of transactions for performance monitoring.
       // We recommend adjusting this value in production
@@ -109,7 +110,9 @@ const init = () => {
         <CozyProvider client={client}>
           <I18n lang={locale} polyglot={polyglot}>
             <HashRouter {...history}>
-              <App tracker={tracker} />
+              <ThemeProvider theme={theme}>
+                <App tracker={tracker} />
+              </ThemeProvider>
             </HashRouter>
           </I18n>
         </CozyProvider>
diff --git a/src/targets/public/index.ejs b/src/targets/public/index.ejs
index 6a02d8eded146705720414f370c649dc892cb194..359ee7568dd51f01a7faf607cd516c9fd51a5c50 100644
--- a/src/targets/public/index.ejs
+++ b/src/targets/public/index.ejs
@@ -17,6 +17,7 @@
     <!-- PWA Colors -->
     <meta name="theme-color" content="#343641" />
     <meta name="background-color" content="#121212" />
+    <meta name="color-scheme" content="only dark" />
 
     <% _.forEach(htmlWebpackPlugin.files.css, function(file) { %>
         <link rel="stylesheet" href="<%- file %>">
diff --git a/src/targets/public/index.tsx b/src/targets/public/index.tsx
index 294a37fb174f66b2c2747e92b9ef5c22ec51a1f2..8478e85e16b2d179dcea305e470af9f5218dbf83 100644
--- a/src/targets/public/index.tsx
+++ b/src/targets/public/index.tsx
@@ -3,12 +3,11 @@
 declare let __SENTRY_DSN__: string
 
 import * as Sentry from '@sentry/react'
-import { BrowserTracing } from '@sentry/tracing'
 import Unsubscribe from 'components/Options/Unsubscribe/Unsubscribe'
 import CozyClient, { Client, CozyProvider } from 'cozy-client'
 import { isFlagshipApp } from 'cozy-device-helper'
 import { WebviewIntentProvider } from 'cozy-intent'
-import { I18n, initTranslation } from 'cozy-ui/transpiled/react/I18n'
+import { I18n, initTranslation } from 'cozy-ui/transpiled/react/providers/I18n'
 import schema from 'doctypes'
 import { memoize } from 'lodash'
 import React from 'react'
@@ -63,7 +62,7 @@ const setupApp = memoize(() => {
   !isLocal &&
     Sentry.init({
       dsn: __SENTRY_DSN__,
-      integrations: [new BrowserTracing()],
+      integrations: [Sentry.browserTracingIntegration()],
       // Set tracesSampleRate to 1.0 to capture 100%
       // of transactions for performance monitoring.
       // We recommend adjusting this value in production
diff --git a/src/targets/services/aggregatorUsageEvents.ts b/src/targets/services/aggregatorUsageEvents.ts
index 36beffe25a1f122a126fba16ff2bdab6f2dd8120..1ae6a70fe449ab7404249e68bd44b4e80770a35f 100644
--- a/src/targets/services/aggregatorUsageEvents.ts
+++ b/src/targets/services/aggregatorUsageEvents.ts
@@ -231,7 +231,7 @@ const buildProfileWithFluidType = async (
 
 const getConsumptionValue = async (
   client: Client,
-  fluidType: FluidType[]
+  fluidTypes: FluidType[]
 ): Promise<PerformanceIndicator[]> => {
   const consumptionService = new ConsumptionService(client)
   const analysisDate = DateTime.local().setZone('utc', { keepLocalTime: true })
@@ -249,7 +249,7 @@ const getConsumptionValue = async (
     await consumptionService.getPerformanceIndicators(
       periods.timePeriod,
       TimeStep.MONTH,
-      fluidType,
+      fluidTypes,
       periods.comparisonTimePeriod
     )
   return fetchedPerformanceIndicators
diff --git a/src/targets/services/consumptionAlert.ts b/src/targets/services/consumptionAlert.ts
index 496b83c3596b712b97f7d5449464086b69401478..1dc6b33128e4c9dcebfaece7a8e9a1387fcc3ab0 100644
--- a/src/targets/services/consumptionAlert.ts
+++ b/src/targets/services/consumptionAlert.ts
@@ -55,7 +55,7 @@ const consumptionAlert = async ({ client }: ConsumptionAlertProps) => {
 
   const fetchedData = await consumptionService.getLastDataload(FluidType.WATER)
   let lastDayValue = 0
-  let alertDay: DateTime = DateTime.local().setZone('utc', {
+  let alertDay = DateTime.local().setZone('utc', {
     keepLocalTime: true,
   })
 
diff --git a/src/targets/services/enedisHalfHourMonthlyAnalysis.ts b/src/targets/services/enedisHalfHourMonthlyAnalysis.ts
index 84b034a1e87c1b557436d2f4195e8e1a6aeb39a8..b356f516c539ad34c3f5cb6a2d51a20e1ae6fb4d 100644
--- a/src/targets/services/enedisHalfHourMonthlyAnalysis.ts
+++ b/src/targets/services/enedisHalfHourMonthlyAnalysis.ts
@@ -136,9 +136,11 @@ const getEnedisMonthAnalysisData = async (
     endDate: DateTime.fromObject({ month: month, year: year }).endOf('month'),
   }
   const cs = new ConsumptionService(client)
-  const data = await cs.getGraphData(timePeriod, TimeStep.DAY, [
-    FluidType.ELECTRICITY,
-  ])
+  const data = await cs.getGraphData({
+    timePeriod,
+    timeStep: TimeStep.DAY,
+    fluidTypes: [FluidType.ELECTRICITY],
+  })
   const monthlyAveragesLoads: EnedisMonthlyAnalysisData = {
     weekDaysHalfHourAverageValues: [],
     weekEndDaysHalfHourAverageValues: [],
@@ -160,11 +162,11 @@ const getEnedisMonthAnalysisData = async (
       }
       // for each day, we get its halfHour DataChart
       // so we get 48 entries per day
-      const halfHourDayData = await cs.getGraphData(
+      const halfHourDayData = await cs.getGraphData({
         timePeriod,
-        TimeStep.HALF_AN_HOUR,
-        [FluidType.ELECTRICITY]
-      )
+        timeStep: TimeStep.HALF_AN_HOUR,
+        fluidTypes: [FluidType.ELECTRICITY],
+      })
       if (halfHourDayData) {
         populateArrayWithTotalData(weekEndValuesArray, halfHourDayData, true)
         populateArrayWithTotalData(weekValuesArray, halfHourDayData, false)
@@ -183,21 +185,21 @@ const getEnedisMonthAnalysisData = async (
       arr.reduce((a, b) => a + b, 0) / arr.length
     // at this point we have an array of sums for each 48 half hour timestep
     // so we calculate the average
-    const weekEndAverages: number[] = weekEndValuesArray.map(halfHourArray =>
+    const weekEndAverages = weekEndValuesArray.map(halfHourArray =>
       arrAvg(halfHourArray)
     )
     // so we calculate the average
     const weekAverages = weekValuesArray.map(halfHourArray =>
       arrAvg(halfHourArray)
     )
+    const [maxPower, offPeakHoursRatio] = await Promise.all([
+      getMonthMaxPower(month, year, client),
+      getOffPeakHoursRatio(month, year, client),
+    ])
     monthlyAveragesLoads.weekDaysHalfHourAverageValues = weekAverages
     monthlyAveragesLoads.weekEndDaysHalfHourAverageValues = weekEndAverages
-    monthlyAveragesLoads.maxPower = await getMonthMaxPower(month, year, client)
-    monthlyAveragesLoads.offPeakHoursRatio = await getOffPeakHoursRatio(
-      month,
-      year,
-      client
-    )
+    monthlyAveragesLoads.maxPower = maxPower
+    monthlyAveragesLoads.offPeakHoursRatio = offPeakHoursRatio
     return monthlyAveragesLoads
   }
 }
@@ -213,7 +215,7 @@ const syncEnedisMonthlyAnalysisDataDoctype = async ({
     client
   )
   const consumptionService = new ConsumptionService(client)
-  const firstMinuteData = (await consumptionService.getFirsDataDateFromDoctype(
+  const firstMinuteData = (await consumptionService.getFirstDataDateFromDoctype(
     ENEDIS_MINUTE_DOCTYPE
   )) as DataloadEntity[]
 
@@ -236,9 +238,7 @@ const syncEnedisMonthlyAnalysisDataDoctype = async ({
   const today = DateTime.local().setZone('utc', {
     keepLocalTime: true,
   })
-  const analysisDate: DateTime = today.minus({
-    month: 1,
-  })
+  const analysisDate = today.minus({ month: 1 })
 
   const data = await getEnedisMonthAnalysisData(
     client,
@@ -266,7 +266,7 @@ const syncEnedisMonthlyAnalysisDataDoctype = async ({
   if (lastEnedisMonthlyAnalysis.length > 0) {
     // If user has more than one entry (already synced), fetch the full history
     const firstEnedisMonthlyAnalysis =
-      (await consumptionService.getFirsDataDateFromDoctype(
+      (await consumptionService.getFirstDataDateFromDoctype(
         ENEDIS_MONTHLY_ANALYSIS_DATA_DOCTYPE
       )) as EnedisMonthlyAnalysisData[]
     if (
diff --git a/src/targets/services/fluidsPrices.ts b/src/targets/services/fluidsPrices.ts
index 32ad62df05c206c88c1ad0bb145b207b451dae1c..bdb2d51dba1c89d1f305007642977a952941ddda 100644
--- a/src/targets/services/fluidsPrices.ts
+++ b/src/targets/services/fluidsPrices.ts
@@ -1,20 +1,13 @@
-import * as Sentry from '@sentry/react'
 import { Client } from 'cozy-client'
 import logger from 'cozy-logger'
 import {
-  EGL_DAY_DOCTYPE,
-  ENEDIS_DAY_DOCTYPE,
-  GRDF_DAY_DOCTYPE,
   REMOTE_ORG_ECOLYO_AGENT_PRICES,
   REMOTE_ORG_ECOLYO_AGENT_PRICES_REC,
 } from 'doctypes'
-import { FluidType, TimeStep } from 'enums'
-import { DateTime } from 'luxon'
-import { DataloadEntity, FluidPrice, TimePeriod } from 'models'
-import ConsumptionDataManager from 'services/consumption.service'
+import { FluidType } from 'enums'
+import { FluidPrice } from 'models'
 import EnvironmentService from 'services/environment.service'
 import FluidPricesService from 'services/fluidsPrices.service'
-import QueryRunner from 'services/queryRunner.service'
 import { runService } from './service'
 
 const logStack = logger.namespace('fluidPrices')
@@ -33,35 +26,19 @@ const getRemotePricesByFluid = async (
   return prices
 }
 
-/**
- * If a price has been updated, set the oldest startDate of the edited price so we can redo aggregation
- */
-function updateFirstEditedPrice(
-  firstEditedPrice: string | null,
-  remotePrice: FluidPrice
-): string {
-  return firstEditedPrice === null || firstEditedPrice >= remotePrice.startDate
-    ? remotePrice.startDate
-    : firstEditedPrice
-}
-
-/**
- * Synchro the remote prices with database and returns a date where we have to relaunch aggregation if a price has been edited in backoffice
- * @returns {string | null} the oldest startDate
- */
-const synchroPricesToUpdate = async (
-  client: Client,
-  fluidType: FluidType
-): Promise<string | null> => {
-  const fps = new FluidPricesService(client)
-  try {
+const updatePrices = async ({ client }: { client: Client }) => {
+  for (const fluidType of [
+    FluidType.ELECTRICITY,
+    FluidType.WATER,
+    FluidType.GAS,
+  ]) {
+    logStack('info', `Updating fluid prices for ${fluidType}...`)
+    const fps = new FluidPricesService(client)
     const remotePrices = await getRemotePricesByFluid(client, fluidType)
-    let firstEditedPrice: string | null = null
     for (const remotePrice of remotePrices) {
       const existingPrice = await fps.checkIfPriceExists(remotePrice)
       if (!existingPrice) {
         logStack('debug', `Price doesn't exist in db, creating a new price`)
-        firstEditedPrice = updateFirstEditedPrice(firstEditedPrice, remotePrice)
         await fps.createPrice(remotePrice)
         continue
       }
@@ -72,7 +49,6 @@ const synchroPricesToUpdate = async (
       }
       logStack('debug', `Price exists in db but not up to date, updating it`)
       // If a price has been updated, set the oldest startDate of the edited price so we can redo aggregation
-      firstEditedPrice = updateFirstEditedPrice(firstEditedPrice, remotePrice)
 
       await fps.updatePrice(existingPrice, {
         price: remotePrice.price,
@@ -80,255 +56,9 @@ const synchroPricesToUpdate = async (
         startDate: remotePrice.startDate,
         endDate: remotePrice.endDate,
       })
-    }
-    return firstEditedPrice
-  } catch (error) {
-    logStack('error', `Error: ${error}`)
-    Sentry.captureException(error)
-    return null
-  }
-}
-
-const price = (item: DataloadEntity): number => {
-  return item.price ? item.price : 0
-}
-
-const sum = (prev: number, next: number): number => {
-  return prev + next
-}
-
-const getTimePeriod = async (
-  timeStep: TimeStep,
-  date: DateTime
-): Promise<TimePeriod> => {
-  switch (timeStep) {
-    case TimeStep.HALF_AN_HOUR:
-      return {
-        startDate: date,
-        endDate: date.plus({ day: 1 }).startOf('day'),
-      }
-    case TimeStep.DAY:
-    case TimeStep.MONTH:
-      return {
-        startDate: date.startOf('month'),
-        endDate: date.endOf('month'),
-      }
-    case TimeStep.YEAR:
-      return {
-        startDate: date.startOf('year'),
-        endDate: date.endOf('year'),
-      }
-    default:
-      logStack('error', 'Unhandled time period')
-      Sentry.captureException(
-        JSON.stringify({ error: 'Unhandled time period' })
-      )
-      throw Error('Unhandled time period')
-  }
-}
-
-const aggregatePrices = async (
-  qr: QueryRunner,
-  cdm: ConsumptionDataManager,
-  firstDate: DateTime,
-  today: DateTime,
-  fluidType: FluidType
-) => {
-  const timeSteps = [TimeStep.MONTH, TimeStep.YEAR]
-  logStack(
-    'debug',
-    `Aggregation started for fluid: ${fluidType}, from ${firstDate}  `
-  )
-  for (const timeStep of timeSteps) {
-    let aggregationDate = DateTime.fromObject({
-      year: firstDate.year,
-      month: firstDate.month,
-      day: firstDate.day,
-    })
-    try {
-      do {
-        const timePeriod = await getTimePeriod(timeStep, aggregationDate)
-        // Get doc for aggregation
-        const dayDocuments = await qr.fetchFluidRawDoctype(
-          timePeriod,
-          TimeStep.DAY,
-          fluidType
-        )
-        const docToUpdate = await qr.fetchFluidRawDoctype(
-          timePeriod,
-          timeStep,
-          fluidType
-        )
-
-        if (docToUpdate?.data && dayDocuments?.data) {
-          docToUpdate.data[0].price = dayDocuments.data.map(price).reduce(sum)
-        }
-        await cdm.saveDocs(docToUpdate?.data)
-        // Update date according to timestep
-        if (timeStep === TimeStep.YEAR) {
-          aggregationDate = aggregationDate.plus({ year: 1 }).startOf('month')
-        } else {
-          aggregationDate = aggregationDate.plus({ month: 1 }).startOf('month')
-        }
-      } while (aggregationDate < today)
-    } catch (error) {
-      logStack('info', `Error : ${error}`)
-      Sentry.captureException(error)
-    }
-  }
-
-  logStack('debug', `Aggregation done`)
-}
-
-const getDoctypeTypeByFluid = (fluidType: FluidType): string => {
-  if (fluidType === FluidType.ELECTRICITY) {
-    return ENEDIS_DAY_DOCTYPE
-  }
-  if (fluidType === FluidType.GAS) {
-    return GRDF_DAY_DOCTYPE
-  }
-  if (fluidType === FluidType.WATER) {
-    return EGL_DAY_DOCTYPE
-  }
-  logStack('error', 'Unknown FluidType')
-  Sentry.captureException({ error: 'Unknown FluidType Doctype' })
-  throw new Error()
-}
-
-const getTimeStepsByFluid = (fluidType: FluidType): TimeStep[] => {
-  if (fluidType === FluidType.ELECTRICITY) {
-    return [TimeStep.DAY, TimeStep.HALF_AN_HOUR]
-  }
-  if (fluidType === FluidType.GAS || fluidType === FluidType.WATER) {
-    return [TimeStep.DAY]
-  }
-  logStack('error', 'Unknown FluidType')
-  Sentry.captureException({ error: 'Unknown FluidType' })
-  throw new Error()
-}
-
-const applyPrices = async (client: Client, fluidType: FluidType) => {
-  // If no doctypes exists, do nothing
-  const fluidsPricesService = new FluidPricesService(client)
-  const cdm = new ConsumptionDataManager(client)
-  const qr = new QueryRunner(client)
-
-  // Synchro db prices with remote prices
-  const firstEditedPriceDate = await synchroPricesToUpdate(client, fluidType)
-  const firstDataDate = await cdm.fetchAllFirstDateData([fluidType])
-  const prices = await fluidsPricesService.getAllPrices()
-
-  if (prices.length === 0) {
-    logStack('info', 'No fluidesPrices data')
-    return
-  }
-  logStack('debug', 'fluidPrices data found')
-  const firstMinuteData = await cdm.getFirstDataDateFromDoctypeWithPrice(
-    getDoctypeTypeByFluid(fluidType)
-  )
-
-  // If there is data, update hourly data and daily data
-  if (
-    !firstDataDate?.[0] ||
-    (!firstMinuteData && firstEditedPriceDate === null)
-  ) {
-    logStack('info', `No data found for fluid ${fluidType}`)
-    return
-  }
-  const today = DateTime.now()
-  const timeSteps = getTimeStepsByFluid(fluidType)
-  let firstDate: DateTime
-
-  if (firstMinuteData && firstEditedPriceDate) {
-    // If there is first data without price and a price edited, set the smallest date
-    const firstMinuteDataDate = DateTime.fromObject({
-      year: firstMinuteData.year,
-      month: firstMinuteData.month,
-      day: firstMinuteData.day,
-    }).setZone('utc', {
-      keepLocalTime: true,
-    })
-    const formattedFirstEditedPrice = DateTime.fromISO(
-      firstEditedPriceDate
-    ).setZone('utc', {
-      keepLocalTime: true,
-    })
-    // we want to exclude the period with no data if the edited date is smaller than the first data date
-    firstDate = DateTime.min(
-      DateTime.max(formattedFirstEditedPrice, firstDataDate[0]),
-      firstMinuteDataDate
-    )
-  } else if (firstMinuteData) {
-    firstDate = DateTime.fromObject({
-      year: firstMinuteData.year,
-      month: firstMinuteData.month,
-      day: firstMinuteData.day,
-    }).setZone('utc', {
-      keepLocalTime: true,
-    })
-  } else if (firstEditedPriceDate) {
-    firstDate = DateTime.max(
-      DateTime.fromISO(firstEditedPriceDate).setZone('utc', {
-        keepLocalTime: true,
-      }),
-      firstDataDate[0]
-    )
-  } else {
-    firstDate = today
-  }
-
-  // Hourly and daily prices
-  for (const timeStep of timeSteps) {
-    let date: DateTime = DateTime.local().setZone('utc', {
-      keepLocalTime: true,
-    })
-    Object.assign(date, firstDate)
-    try {
-      do {
-        const priceData = await fluidsPricesService.getPrices(fluidType, date)
-        const timePeriod = await getTimePeriod(timeStep, date)
-        const data = await qr.fetchFluidRawDoctype(
-          timePeriod,
-          timeStep,
-          fluidType
-        )
-
-        // If lastItem has a price, skip this day (in order to save perf)
-        const lastItem = data?.data && data.data[data.data.length - 1]
-        if (lastItem && priceData) {
-          // if a price has been updated in backoffice re-calculates all price from the firstEditedPriceDate
-          data?.data.forEach((element: DataloadEntity) => {
-            element.price = element.load * priceData.price
-          })
-          await cdm.saveDocs(data.data)
-        }
-        // Update date
-        if (timeStep === TimeStep.HALF_AN_HOUR) {
-          date = date.plus({ days: 1 })
-        } else {
-          date = date.plus({ month: 1 }).startOf('month')
-        }
-      } while (date < today)
-    } catch (error) {
-      logStack('error', `ERROR : ${error} `)
-      Sentry.captureException(error)
+      logStack('info', `Price updated`)
     }
   }
-
-  await aggregatePrices(qr, cdm, firstDate, today, fluidType)
-}
-
-const processPrices = async ({ client }: { client: Client }) => {
-  logStack('info', `Processing electricity data...`)
-  await applyPrices(client, FluidType.ELECTRICITY)
-  logStack('info', `Electricity data done`)
-  logStack('info', `Processing gas data...`)
-  await applyPrices(client, FluidType.GAS)
-  logStack('info', `Gas data done`)
-  logStack('info', `Processing water data...`)
-  await applyPrices(client, FluidType.WATER)
-  logStack('info', `Water data done`)
-  logStack('info', `processPrices done`)
 }
 
-runService(processPrices)
+runService(updatePrices)
diff --git a/src/targets/services/monthlyReportNotification.ts b/src/targets/services/monthlyReportNotification.ts
index 7cb75e4a4ff03ac4b9924b6f562f91e57069fd7b..672132e5726827f24949540b330877f5fb06bfc0 100644
--- a/src/targets/services/monthlyReportNotification.ts
+++ b/src/targets/services/monthlyReportNotification.ts
@@ -24,11 +24,11 @@ interface MonthlyReportNotificationProps {
 
 /**
  * Get consumption value for all fluid if exist
- * @param fluidType - FluidType
+ * @param fluidTypes - FluidType
  */
 const getConsumptionValue = async (
   client: Client,
-  fluidType: FluidType[],
+  fluidTypes: FluidType[],
   period: 'month' | 'year'
 ): Promise<PerformanceIndicator[]> => {
   const consumptionService = new ConsumptionService(client)
@@ -48,7 +48,7 @@ const getConsumptionValue = async (
   return consumptionService.getPerformanceIndicators(
     timePeriod,
     TimeStep.MONTH,
-    fluidType,
+    fluidTypes,
     comparisonTimePeriod
   )
 }
@@ -246,14 +246,16 @@ const monthlyReportNotification = async ({
   const environmentService = new EnvironmentService()
   const baseUrl = environmentService.getPublicURL()
 
+  const comparisonExist =
+    monthComparisonText.length > 0 || yearComparisonText.length > 0
+
   const template = monthlyReportTemplate({
     title: 'Infos & bilan consos',
     baseUrl: baseUrl,
     username: username,
     clientUrl: analysisLink,
     unsubscribeUrl: unsubscribeUrl,
-    comparisonExist:
-      monthComparisonText.length > 0 || yearComparisonText.length > 0,
+    comparisonExist: comparisonExist,
     monthComparisonExist: monthComparisonText.length > 0,
     monthComparisonText: monthComparisonText,
     yearComparisonExist: yearComparisonText.length > 0,
@@ -281,7 +283,9 @@ const monthlyReportNotification = async ({
     previousYear: date.year - 1,
     currentYear: date.year,
     previousMonthYear: date.month === 1 ? date.year - 1 : date.year,
-    consoImageUrl: baseUrl + '/assets/multifluidConsumption.png',
+    consoImageUrl: comparisonExist
+      ? baseUrl + '/assets/multifluidConsumption.png'
+      : baseUrl + '/assets/multifluidNoConsumption.png',
     feedbackImageUrl: baseUrl + '/assets/feedback.png',
   })
 
diff --git a/src/types/cozy-bar.d.ts b/src/types/cozy-bar.d.ts
index 3eb901e7289677953ae19ac5c6e46180084e538c..d618f5a985178ebda998fe44e9d9636b50274e2d 100644
--- a/src/types/cozy-bar.d.ts
+++ b/src/types/cozy-bar.d.ts
@@ -2,7 +2,7 @@ import { ReactComponentElement } from 'react'
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 declare module 'cozy-bar' {
-  type TcozyBarInitOpts = {
+  interface TcozyBarInitOpts {
     appName: string
     appNamePrefix: string
     appSlug?: string
diff --git a/src/types/cozy-client.d.ts b/src/types/cozy-client.d.ts
index 8a7d20f28601fcd335b7b332c50fbed2fe9c0795..0e1f45fd6353a22c4e192bcb112dd9be4ad45707 100644
--- a/src/types/cozy-client.d.ts
+++ b/src/types/cozy-client.d.ts
@@ -15,28 +15,30 @@ declare module 'cozy-client' {
   export function useClient(): Client
   export function Q(doctype: TDoctype): QueryDefinition
 
-  export type SortOptions = { [field: string]: 'asc' | 'desc' }
-  export type QueryDefinition = {
+  export interface SortOptions {
+    [field: string]: 'asc' | 'desc'
+  }
+  export interface QueryDefinition {
     checkSortOrder(opts: {
       sort: SortOptions
       selector: unknown
       indexedFields: unknown
     }): QueryDefinition
     getById(id: string): QueryDefinition
-    getByIds(ids: Array<string>): QueryDefinition
-    include(relations: Array<string>): QueryDefinition
-    indexFields(indexedFields: Array<string>): QueryDefinition
+    getByIds(ids: string[]): QueryDefinition
+    include(relations: string[]): QueryDefinition
+    indexFields(indexedFields: string[]): QueryDefinition
     partialIndex(partialFilter: object): QueryDefinition
     limitBy(limit: number): QueryDefinition
     offset(skip: number): QueryDefinition
     offsetBookmark(bookmark: string): QueryDefinition
     offsetCursor(cursor): QueryDefinition
     referencedBy(document: unknown): QueryDefinition
-    select(field: Array<string> | undefined): QueryDefinition
-    sortBy(sort: Array<SortOptions>): QueryDefinition
+    select(field: string[] | undefined): QueryDefinition
+    sortBy(sort: SortOptions[]): QueryDefinition
     where(selector: MongoSelector): QueryDefinition
   }
-  export type QueryResult<T, I = undefined> = {
+  export interface QueryResult<T, I = undefined> {
     bookmark: string
     next: boolean
     meta?: { count: number }
@@ -56,7 +58,7 @@ declare module 'cozy-client' {
   }
   export interface FindQueryOptions {
     bookmark?: string
-    fields?: Array<string>
+    fields?: string[]
     indexId?: string
     limit?: number
     skip?: number
@@ -297,10 +299,7 @@ declare module 'cozy-client' {
      * @param  {Array<Document>} documents - Documents to be hydrated
      * @returns {Array<HydratedDocument>}
      */
-    hydrateDocuments<D>(
-      doctype: TDoctype,
-      documents: Array<D>
-    ): Array<HydratedDocument>
+    hydrateDocuments<D>(doctype: TDoctype, documents: D[]): HydratedDocument[]
 
     /**
      * Resolves relationships on a document.
@@ -317,9 +316,7 @@ declare module 'cozy-client' {
   class CCozyClient {
     constructor(n: unknown): Client
   }
-  const CozyClient: {
-    new (n: unknown): Client
-  } = CCozyClient
+  const CozyClient: new (n: unknown) => Client = CCozyClient
   export default CozyClient
 
   export type HydratedDoc = any
diff --git a/src/types/cozy-ui.d.ts b/src/types/cozy-ui.d.ts
index e45466e6769d12c9dcce14662af7d6754bd4e218..220288b1e8a2cdccfc9c75120872370e09f43f30 100644
--- a/src/types/cozy-ui.d.ts
+++ b/src/types/cozy-ui.d.ts
@@ -3,7 +3,7 @@ declare module 'cozy-ui/transpiled/react/Spinner'
 declare module 'cozy-ui/transpiled/react/Layout'
 declare module 'cozy-ui/transpiled/react/helpers/appDataset'
 
-declare module 'cozy-ui/transpiled/react/I18n' {
+declare module 'cozy-ui/transpiled/react/providers/I18n' {
   interface IPropsIcon {
     icon?: string
     width?: string | number
diff --git a/src/utils/date.spec.ts b/src/utils/date.spec.ts
index 1211870ea45c7af7833c5de84cffd1c79f7aac43..362a95ddd3f19e77f2df83078570cb94b80a1a55 100644
--- a/src/utils/date.spec.ts
+++ b/src/utils/date.spec.ts
@@ -6,6 +6,7 @@ import {
   compareDates,
   convertDateToMonthYearString,
   convertDateToShortDateString,
+  formatDate,
   getActualAnalysisDate,
   getCurrentSeason,
   getLagDays,
@@ -483,4 +484,33 @@ describe('date utils', () => {
       expect(currentSeason).toBeNull()
     })
   })
+
+  describe('formatDate', () => {
+    const date = DateTime.local(2024, 3, 13, 9).setZone('utc', {
+      keepLocalTime: true,
+    })
+    it('should return the correct date format for YEAR', () => {
+      const formattedDate = formatDate(TimeStep.YEAR, date)
+      expect(formattedDate).toEqual(['2024', ''])
+    })
+    it('should return the correct date format for MONTH', () => {
+      const formattedDate = formatDate(TimeStep.MONTH, date)
+      expect(formattedDate).toEqual(['March', '2024'])
+    })
+    it('should return the correct date format for DAY', () => {
+      const formattedDate = formatDate(TimeStep.DAY, date)
+      expect(formattedDate).toEqual(['13 Wednesday', 'March'])
+    })
+    it('should return the correct date format for WEEK', () => {
+      const formattedDate = formatDate(TimeStep.WEEK, date)
+      expect(formattedDate).toEqual(['13 Wednesday', 'March'])
+    })
+    it('should return the correct date format for HALF_AN_HOUR', () => {
+      const formattedDate = formatDate(TimeStep.HALF_AN_HOUR, date)
+      expect(formattedDate).toEqual([
+        '9:00 AM - 9:30 AM',
+        'Wednesday, March 13',
+      ])
+    })
+  })
 })
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 434975bc19903b67813df3b1867bcd20dcfc8940..9468ee8f43ebba8267546b22958443b2f3b43807 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -189,3 +189,60 @@ export function getOppositeSeason(currentSeason: Season): Season {
     throw new Error('Invalid current season.')
   }
 }
+
+/**
+ * Returns an array of the formatted date. It returns an array for display purposes.
+ */
+export const formatDate = (timeStep: TimeStep, date: DateTime) => {
+  switch (timeStep) {
+    case TimeStep.YEAR:
+      return [
+        date.toLocaleString({
+          year: 'numeric',
+        }),
+        '',
+      ]
+    case TimeStep.MONTH:
+      return [
+        date.toLocaleString({
+          month: 'long',
+        }),
+        date.toLocaleString({
+          year: 'numeric',
+        }),
+      ]
+    case TimeStep.DAY:
+    case TimeStep.WEEK:
+      return [
+        date.toLocaleString({
+          weekday: 'long',
+          day: '2-digit',
+        }),
+        date.toLocaleString({
+          month: 'long',
+        }),
+      ]
+    case TimeStep.HALF_AN_HOUR:
+      /**
+       * Format date to range:
+       * 9:00 - 9:30
+       * Day 0X Month
+       */
+      return [
+        `${date.toLocaleString({
+          hour: 'numeric',
+          minute: 'numeric',
+        })} - ${date.plus({ minutes: 30 }).toLocaleString({
+          hour: 'numeric',
+          minute: 'numeric',
+        })}`,
+        date.toLocaleString({
+          weekday: 'long',
+          day: '2-digit',
+          month: 'long',
+        }),
+      ]
+    default:
+      return [date.toLocaleString(DateTime.DATETIME_SHORT), '']
+  }
+}
diff --git a/src/utils/math.spec.ts b/src/utils/math.spec.ts
index 49e6737cb9eb01790689d293d682c8e45624f8af..e761efc03780ecebc762edbc2c474db3618d06cd 100644
--- a/src/utils/math.spec.ts
+++ b/src/utils/math.spec.ts
@@ -3,8 +3,8 @@ import { getPercentage, sum } from './math'
 describe('math utilis test', () => {
   describe('getPercentage test', () => {
     it('should return the correct percent', () => {
-      const dataA: Array<number> = [1, 2, 3, 4, 5]
-      const dataB: Array<number> = [5, 4, 3]
+      const dataA: number[] = [1, 2, 3, 4, 5]
+      const dataB: number[] = [5, 4, 3]
       const result = getPercentage(dataA, dataB)
       expect(result).toBe(25)
     })
@@ -12,7 +12,7 @@ describe('math utilis test', () => {
 
   describe('sum test', () => {
     it('should return the correct sum', () => {
-      const dataA: Array<number> = [1, 2, 3, 4, 5]
+      const dataA: number[] = [1, 2, 3, 4, 5]
       const result = sum(dataA)
       expect(result).toBe(15)
     })
diff --git a/src/utils/math.ts b/src/utils/math.ts
index ddb43df2a3ee7d52f7723dc1538bc2e744142098..d0664a64f256ac94abe0193e49c75f28edd5bb32 100644
--- a/src/utils/math.ts
+++ b/src/utils/math.ts
@@ -4,12 +4,12 @@ export function getRoundFloat(data: number) {
   return Math.round((data + Number.EPSILON) * 100) / 100
 }
 
-export function getPercentage(dataA: Array<number>, dataB: Array<number>) {
+export function getPercentage(dataA: number[], dataB: number[]) {
   return Math.round(
     Number.parseFloat(((1 - _.mean(dataA) / _.mean(dataB)) * 100).toFixed(2))
   )
 }
 
-export function sum(dataA: Array<number>) {
+export function sum(dataA: number[]) {
   return Number.parseInt(_.sum(dataA))
 }
diff --git a/src/utils/utils.spec.ts b/src/utils/utils.spec.ts
index e36db9b7ba1b1f7afa0529b9a1bca3f8fb6e3a65..64a349dda2822c6df7a4267da875e6e07b63e964 100644
--- a/src/utils/utils.spec.ts
+++ b/src/utils/utils.spec.ts
@@ -15,6 +15,7 @@ import {
   getChallengeTitleWithLineReturn,
   getFluidName,
   getFluidTypeTranslation,
+  getFluidUnit,
   getKonnectorSlug,
   getKonnectorUpdateError,
   getMonthFullName,
@@ -385,4 +386,21 @@ describe('utils test', () => {
       ])
     })
   })
+
+  describe('getFluidUnit', () => {
+    it('should return kWh for ELECTRICITY', () => {
+      expect(getFluidUnit(FluidType.ELECTRICITY)).toBe('kWh')
+    })
+    it('should return L for WATER', () => {
+      expect(getFluidUnit(FluidType.WATER)).toBe('L')
+    })
+    it('should return € for MULTIFLUID', () => {
+      expect(getFluidUnit(FluidType.MULTIFLUID)).toBe('€')
+    })
+    it('should throw error for invalid fluid type', () => {
+      expect(() => getFluidUnit(99 as FluidType.GAS)).toThrow(
+        'unknown fluidtype'
+      )
+    })
+  })
 })
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index fc5bf7edee928e76d7a0bfbb1fb64decbdda30a3..10ce560cae3060bf92779a22a43b95abe905a9a8 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -232,40 +232,25 @@ export const getMonthNameWithPrep = (date: DateTime) => {
  * @returns Season
  */
 export const getSeason = (): Season => {
-  const currentDate: DateTime = DateTime.local().setZone('utc', {
+  const currentDate = DateTime.local().setZone('utc', {
+    keepLocalTime: true,
+  })
+  const currentYear = currentDate.year
+  const winterStart = DateTime.local(currentYear, 11, 1).setZone('utc', {
+    keepLocalTime: true,
+  })
+  const winterEnd = DateTime.local(currentYear + 1, 3, 1).setZone('utc', {
     keepLocalTime: true,
   })
-  const currentYear: number = currentDate.year
-  const winterStart: DateTime = DateTime.local(currentYear, 11, 1).setZone(
-    'utc',
-    {
-      keepLocalTime: true,
-    }
-  )
-  const winterEnd: DateTime = DateTime.local(currentYear + 1, 3, 1).setZone(
-    'utc',
-    {
-      keepLocalTime: true,
-    }
-  )
 
-  const summerStart: DateTime = DateTime.local(currentYear, 6, 1).setZone(
-    'utc',
-    {
-      keepLocalTime: true,
-    }
-  )
-  const summerEnd: DateTime = DateTime.local(currentYear, 9, 1).setZone('utc', {
+  const summerStart = DateTime.local(currentYear, 6, 1).setZone('utc', {
     keepLocalTime: true,
   })
-  const summerInterval: Interval = Interval.fromDateTimes(
-    summerStart,
-    summerEnd
-  )
-  const winterInterval: Interval = Interval.fromDateTimes(
-    winterStart,
-    winterEnd
-  )
+  const summerEnd = DateTime.local(currentYear, 9, 1).setZone('utc', {
+    keepLocalTime: true,
+  })
+  const summerInterval = Interval.fromDateTimes(summerStart, summerEnd)
+  const winterInterval = Interval.fromDateTimes(winterStart, winterEnd)
 
   if (summerInterval.contains(currentDate)) {
     return Season.SUMMER
@@ -327,7 +312,7 @@ export const formatListWithAnd = (array: string[]) => {
   }
 }
 
-export type OffPeakHours = {
+export interface OffPeakHours {
   start: { hour: number; minute: number }
   end: { hour: number; minute: number }
 }
@@ -472,3 +457,17 @@ export const roundOffPeakHours = (
     end: roundToNearestHalfHour(end.hour, end.minute, true),
   }))
 }
+
+export const getFluidUnit = (fluidType: FluidType) => {
+  switch (fluidType) {
+    case FluidType.ELECTRICITY:
+    case FluidType.GAS:
+      return 'kWh'
+    case FluidType.WATER:
+      return 'L'
+    case FluidType.MULTIFLUID:
+      return '€'
+    default:
+      throw new Error('unknown fluidtype')
+  }
+}
diff --git a/tests/__mocks__/avgTemperature.mock.ts b/tests/__mocks__/avgTemperature.mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d50cee3d44528f1648043aa66f05490b3c3c899c
--- /dev/null
+++ b/tests/__mocks__/avgTemperature.mock.ts
@@ -0,0 +1,16 @@
+/* eslint-disable camelcase */
+import { AvgTemperatureResult } from 'models'
+
+export const mockAvgTemperature: AvgTemperatureResult = {
+  fields: ['identifiant', 'average_measurement', 'month'],
+  layer_name: '',
+  nb_results: 1,
+  table_href: '',
+  values: [
+    {
+      average_measurement: 17.6,
+      identifiant: '69123002',
+      month: '2023-05',
+    },
+  ],
+}
diff --git a/tests/__mocks__/client.mock.ts b/tests/__mocks__/client.mock.ts
index f2b7101ee47a8d7a424ac76549ec3a75e3f2b27c..3038b50b81f7106379f92c07f608ba6bd1cd64c4 100644
--- a/tests/__mocks__/client.mock.ts
+++ b/tests/__mocks__/client.mock.ts
@@ -20,6 +20,7 @@ const mockClient = {
   options: {
     uri: 'http://cozy.tools:8080', // NOSONAR
   },
+  reducer: () => ({}),
 } as unknown as jest.Mocked<Client>
 
 export default mockClient
diff --git a/tests/__mocks__/fluidPrice.mock.ts b/tests/__mocks__/fluidPrice.mock.ts
index b93fac787143fc494cb5e6f1b53dcf392aee787b..19ab4a3a379a1a37465860e82b40f84d8b2cc69b 100644
--- a/tests/__mocks__/fluidPrice.mock.ts
+++ b/tests/__mocks__/fluidPrice.mock.ts
@@ -1,5 +1,14 @@
 import { FluidPrice } from 'models'
 
+export const mockFluidPrice: FluidPrice = {
+  _id: 'e8510c85cd44734b58fd2f587200975c',
+  UpdatedAt: '2024-06-26T07:55:06.093Z',
+  endDate: '',
+  fluidType: 0,
+  price: 0.2516,
+  startDate: '2024-02-01T00:00:00Z',
+}
+
 export const fluidPrices: FluidPrice[] = [
   {
     _id: '03045ea1afecc7a86e5443a52e00b07d',
diff --git a/tests/__mocks__/profileType.mock.ts b/tests/__mocks__/profileType.mock.ts
index 0ae825f44fc43e4ef3d6596526f180ced47e19ee..5a0c69dc5379ace77c0935f65c821072e9831102 100644
--- a/tests/__mocks__/profileType.mock.ts
+++ b/tests/__mocks__/profileType.mock.ts
@@ -15,8 +15,6 @@ import {
 import { DateTime } from 'luxon'
 import { MonthlyForecast, ProfileType, ProfileTypeAnswer } from 'models'
 
-const IS_LEAP_YEAR = DateTime.now().isInLeapYear
-
 export const profileTypeData: ProfileType = {
   area: '64',
   coldWater: IndividualOrCollective.INDIVIDUAL,
@@ -73,9 +71,9 @@ export const mockMonthElectricSpecificConsumption = 175
 
 export const mockMonthColdWaterConsumption = 4247
 export const mockWaterRawNeeds = 2480
-export const mockWaterSpreadNeeds = IS_LEAP_YEAR ? 2708 : 2701
+export const mockWaterSpreadNeeds = 2708
 export const mockMonthEcsConsumptionOther = 166
-export const mockMonthEcsConsumptionThermo = IS_LEAP_YEAR ? 111 : 110
+export const mockMonthEcsConsumptionThermo = 111
 
 export const mockProfileType1: ProfileType = {
   housingType: HousingType.APARTMENT,
@@ -102,7 +100,7 @@ export const mockProfileType1: ProfileType = {
 // For the month of February
 export const mockMonthConsumption1 = 1174
 
-export const mockMonthEcsConsumption1Solar = IS_LEAP_YEAR ? 135 : 134
+export const mockMonthEcsConsumption1Solar = 135
 
 export const mockProfileType2: ProfileType = {
   housingType: HousingType.INDIVIDUAL_HOUSE,
@@ -164,7 +162,7 @@ export const mockMonthlyForecastJanuaryTestProfile1: MonthlyForecast = {
       },
       fluidType: 0,
       load: 4340,
-      value: 755.16,
+      value: 1091.9,
     },
     {
       detailsMonthlyForecast: {
@@ -176,23 +174,23 @@ export const mockMonthlyForecastJanuaryTestProfile1: MonthlyForecast = {
       },
       fluidType: 1,
       load: 14911,
-      value: 47.566,
+      value: 3751.6,
     },
     {
       detailsMonthlyForecast: {
         coldWaterConsumption: null,
         cookingConsumption: 85,
-        ecsConsumption: IS_LEAP_YEAR ? 291 : 290,
+        ecsConsumption: 291,
         electricSpecificConsumption: null,
         heatingConsumption: null,
       },
       fluidType: 2,
-      load: IS_LEAP_YEAR ? 376 : 375,
-      value: IS_LEAP_YEAR ? 42.15 : 42.038,
+      load: 376,
+      value: 94.602,
     },
   ],
   month: 1,
-  totalValue: IS_LEAP_YEAR ? 844.876 : 844.764,
+  totalValue: 4938.102,
 }
 
 export const mockTestProfile2: ProfileType = {
@@ -224,13 +222,13 @@ export const mockMonthlyForecastJanuaryTestProfile2: MonthlyForecast = {
       detailsMonthlyForecast: {
         coldWaterConsumption: null,
         cookingConsumption: 34,
-        ecsConsumption: IS_LEAP_YEAR ? 249 : 248,
+        ecsConsumption: 249,
         electricSpecificConsumption: 151,
         heatingConsumption: 1237,
       },
       fluidType: 0,
-      load: IS_LEAP_YEAR ? 1671 : 1670,
-      value: IS_LEAP_YEAR ? 290.75 : 290.58,
+      load: 1671,
+      value: 420.42,
     },
     {
       detailsMonthlyForecast: {
@@ -242,7 +240,7 @@ export const mockMonthlyForecastJanuaryTestProfile2: MonthlyForecast = {
       },
       fluidType: 1,
       load: 8494,
-      value: 27.096,
+      value: 2137.1,
     },
     {
       detailsMonthlyForecast: {
@@ -258,7 +256,7 @@ export const mockMonthlyForecastJanuaryTestProfile2: MonthlyForecast = {
     },
   ],
   month: 1,
-  totalValue: IS_LEAP_YEAR ? 317.846 : 317.676,
+  totalValue: 2557.52,
 }
 
 export const mockTestProfile3: ProfileType = {
@@ -296,7 +294,7 @@ export const mockMonthlyForecastJanuaryTestProfile3: MonthlyForecast = {
       },
       fluidType: 0,
       load: 194,
-      value: 33.756,
+      value: 48.81,
     },
     {
       detailsMonthlyForecast: {
@@ -308,7 +306,7 @@ export const mockMonthlyForecastJanuaryTestProfile3: MonthlyForecast = {
       },
       fluidType: 1,
       load: 8494,
-      value: 27.096,
+      value: 2137.1,
     },
     {
       detailsMonthlyForecast: {
@@ -324,7 +322,7 @@ export const mockMonthlyForecastJanuaryTestProfile3: MonthlyForecast = {
     },
   ],
   month: 1,
-  totalValue: 60.852000000000004,
+  totalValue: 2185.91,
 }
 
 export const mockProfileTypeAnswers: ProfileTypeAnswer[] = [
@@ -437,7 +435,7 @@ export const mockMonthlyForecastJanuaryTest1WithFullArrays: MonthlyForecast = {
       },
       fluidType: 0,
       load: 2745,
-      value: 477.63,
+      value: 690.64,
     },
     {
       detailsMonthlyForecast: {
@@ -449,21 +447,21 @@ export const mockMonthlyForecastJanuaryTest1WithFullArrays: MonthlyForecast = {
       },
       fluidType: 1,
       load: 14911,
-      value: 47.566,
+      value: 3751.6,
     },
     {
       detailsMonthlyForecast: {
         coldWaterConsumption: null,
         cookingConsumption: 85,
-        ecsConsumption: IS_LEAP_YEAR ? 291 : 290,
+        ecsConsumption: 291,
         electricSpecificConsumption: null,
         heatingConsumption: null,
       },
       fluidType: 2,
-      load: IS_LEAP_YEAR ? 376 : 375,
-      value: IS_LEAP_YEAR ? 42.15 : 42.038,
+      load: 376,
+      value: 94.602,
     },
   ],
   month: 1,
-  totalValue: IS_LEAP_YEAR ? 567.346 : 567.234,
+  totalValue: 4536.842,
 }
diff --git a/tests/__mocks__/store/analysis.state.mock.ts b/tests/__mocks__/store/analysis.state.mock.ts
index 9c19d8e1d63b54d0f29d04a84ce2e3004a88ea47..8934561222754098eae6e9f7ff5efab3c62928d2 100644
--- a/tests/__mocks__/store/analysis.state.mock.ts
+++ b/tests/__mocks__/store/analysis.state.mock.ts
@@ -4,4 +4,5 @@ import { AnalysisState } from 'models'
 export const mockAnalysisState: AnalysisState = {
   period: 'month',
   analysisMonth: DateTime.local(2023, 1, 1).startOf('day'),
+  haveSeenNewsletterReminder: false,
 }
diff --git a/tests/__mocks__/store/store.mock.ts b/tests/__mocks__/store/store.mock.ts
index cc4be7aa4f975f89994702509d0c7fa4095769d7..368816a11bac4e6ebd283be7b8ea29a04a8bfdec 100644
--- a/tests/__mocks__/store/store.mock.ts
+++ b/tests/__mocks__/store/store.mock.ts
@@ -1,7 +1,4 @@
-import { AnyAction } from '@reduxjs/toolkit'
-import configureStore from 'redux-mock-store'
-import thunkMiddleware from 'redux-thunk'
-import { AppState, MockEcolyoState } from 'store/store'
+import { AppState, setupStore } from 'store/store'
 import mockClient from '../client.mock'
 import { mockProfileEcogesture } from '../profileEcogesture.mock'
 import { mockAnalysisState } from './analysis.state.mock'
@@ -23,21 +20,14 @@ export const mockInitialEcolyoState: AppState['ecolyo'] = {
   profileEcogesture: mockProfileEcogesture,
 }
 
-const middlewares = [thunkMiddleware.withExtraArgument({ mockClient })]
-const mockStore = configureStore<
-  { ecolyo: Partial<MockEcolyoState>; cozy: unknown },
-  AnyAction
->(middlewares)
-
 /**
  * Create a mocked Ecolyo store with the default mockInitialEcolyoState
- * @argument state - optional, a partial desired state
+ * @param state - optional, a partial desired state
  */
 export const createMockEcolyoStore = (
-  initialState: Partial<MockEcolyoState> = mockInitialEcolyoState
+  initialState: Partial<AppState['ecolyo']> = mockInitialEcolyoState
 ) => {
-  return mockStore({
-    ecolyo: initialState,
-    cozy: {},
+  return setupStore(mockClient, {
+    ecolyo: { ...mockInitialEcolyoState, ...initialState },
   })
 }
diff --git a/tests/__mocks__/userChallengeData.mock.ts b/tests/__mocks__/userChallengeData.mock.ts
index 3966c3f0b4a98577899f9bcd8f46a4f85dc7f5af..497daa2f0b48e9d65cb4b720cfc0ef430f174883 100644
--- a/tests/__mocks__/userChallengeData.mock.ts
+++ b/tests/__mocks__/userChallengeData.mock.ts
@@ -359,7 +359,7 @@ export const userChallengeExplo4: UserChallenge = {
     fluid_condition: [0],
     progress: 0,
     message_success:
-      'Vous avez dévérrouillé les données électricité à la demi-heure',
+      'Vous avez déverrouillé les données électricité à la demi-heure',
   },
   action: {
     ecogesture: null,
diff --git a/tests/jestLib/setupTests.ts b/tests/jestLib/setupTests.ts
index b321c6bd3e5d68b5fe55ebb9c891e2ea1c32f83a..1efaf4215654cdb0b8516a3f7fafd1fc99944233 100644
--- a/tests/jestLib/setupTests.ts
+++ b/tests/jestLib/setupTests.ts
@@ -4,7 +4,7 @@ require('jest-canvas-mock')
 import '@testing-library/jest-dom'
 import mockClient from 'tests/__mocks__/client.mock'
 
-jest.mock('cozy-ui/transpiled/react/I18n', () => ({
+jest.mock('cozy-ui/transpiled/react/providers/I18n', () => ({
   useI18n: jest.fn(() => ({
     t: (key: string) => key,
   })),
diff --git a/tests/lib/I18n.js b/tests/lib/I18n.js
index 1e6e9d09810c76df4792717f09e17f53d3e1fc12..47eaeeb69747d40b573b1f3d016b133719759f04 100644
--- a/tests/lib/I18n.js
+++ b/tests/lib/I18n.js
@@ -1,6 +1,6 @@
 'use strict'
 
-import { I18n } from 'cozy-ui/react/I18n'
+import { I18n } from 'cozy-ui/react/providers/I18n'
 
 const I18nComponent = new I18n({
   lang: 'en',
diff --git a/yarn.lock b/yarn.lock
index e326bfeaff94289bdd793d14851f8c491942d637..916f9cddce1c711df8687771fc67aa228b5b8f2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1570,13 +1570,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.12.1":
-  version "7.22.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
-  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
-  dependencies:
-    regenerator-runtime "^0.13.11"
-
 "@babel/runtime@^7.12.5":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
@@ -1830,10 +1823,17 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.4.0":
+"@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.4.0.tgz#3e61c564fcd6b921cb789838631c5ee44df09403"
-  integrity sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.5.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.9.1.tgz#449dfa81a57a1d755b09aa58d826c1262e4283b4"
+  integrity sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==
 
 "@eslint-community/regexpp@^4.6.1":
   version "4.8.0"
@@ -2371,17 +2371,24 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@pkgr/utils@^2.3.1":
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.4.2.tgz#9e638bbe9a6a6f165580dc943f138fd3309a2cbc"
-  integrity sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==
+"@pdf-lib/standard-fonts@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz#8ba691c4421f71662ed07c9a0294b44528af2d7f"
+  integrity sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==
   dependencies:
-    cross-spawn "^7.0.3"
-    fast-glob "^3.3.0"
-    is-glob "^4.0.3"
-    open "^9.1.0"
-    picocolors "^1.0.0"
-    tslib "^2.6.0"
+    pako "^1.0.6"
+
+"@pdf-lib/upng@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@pdf-lib/upng/-/upng-1.0.1.tgz#7dc9c636271aca007a9df4deaf2dd7e7960280cb"
+  integrity sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==
+  dependencies:
+    pako "^1.0.10"
+
+"@pkgr/core@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
+  integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
 "@pollyjs/adapter-node-http@5.1.1":
   version "5.1.1"
@@ -2541,30 +2548,71 @@
     "@react-spring/core" "9.0.0-rc.3"
     "@react-spring/shared" "9.0.0-rc.3"
 
-"@reduxjs/toolkit@^1.9.5":
-  version "1.9.5"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4"
-  integrity sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==
+"@reduxjs/toolkit@^2.2.7":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.2.7.tgz#199e3d10ccb39267cb5aee92c0262fd9da7fdfb2"
+  integrity sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==
   dependencies:
-    immer "^9.0.21"
-    redux "^4.2.1"
-    redux-thunk "^2.4.2"
-    reselect "^4.1.8"
+    immer "^10.0.3"
+    redux "^5.0.1"
+    redux-thunk "^3.1.0"
+    reselect "^5.1.0"
 
 "@remix-run/router@1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
   integrity sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==
 
-"@sentry/browser@7.21.1":
-  version "7.21.1"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.21.1.tgz#bffa3ea19050c06400107d2297b9802f9719f98b"
-  integrity sha512-cS2Jz2+fs9+4pJqLJPtYqGyY97ywJDWAWIR1Yla3hs1QQuH6m0Nz3ojZD1gE2eKH9mHwkGbnNAh+hHcrYrfGzw==
-  dependencies:
-    "@sentry/core" "7.21.1"
-    "@sentry/types" "7.21.1"
-    "@sentry/utils" "7.21.1"
-    tslib "^1.9.3"
+"@sentry-internal/browser-utils@8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.26.0.tgz#3c76015e1bddde6775e6a7e115fbb494f247fed1"
+  integrity sha512-O2Tj+WK33/ZVp5STnz6ZL0OO+/Idk2KqsH0ITQkQmyZ2z0kdzWOeqK7s7q3/My6rB1GfPcyqPcBBv4dVv92FYQ==
+  dependencies:
+    "@sentry/core" "8.26.0"
+    "@sentry/types" "8.26.0"
+    "@sentry/utils" "8.26.0"
+
+"@sentry-internal/feedback@8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.26.0.tgz#c29a2a4d97d9a9b56344521f3dbb16e2c40d799e"
+  integrity sha512-hQtw1gg8n6ERK1UH47F7ZI1zOsbhu0J2VX+TrnkpaQR2FgxDW1oe9Ja6oCV4CQKuR4w+1ZI/Kj4imSt0K33kEw==
+  dependencies:
+    "@sentry/core" "8.26.0"
+    "@sentry/types" "8.26.0"
+    "@sentry/utils" "8.26.0"
+
+"@sentry-internal/replay-canvas@8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.26.0.tgz#005e4ebed631d0e505e117d42ae8bc64748628d1"
+  integrity sha512-2CFQW6f9aJHIo/DqmqYa9PaYoLn1o36ywc0h8oyGrD4oPCbrnE5F++PmTdc71GBODu41HBn/yoCTLmxOD+UjpA==
+  dependencies:
+    "@sentry-internal/replay" "8.26.0"
+    "@sentry/core" "8.26.0"
+    "@sentry/types" "8.26.0"
+    "@sentry/utils" "8.26.0"
+
+"@sentry-internal/replay@8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.26.0.tgz#7d01b1915343bf8ca3d9ef7500994d4a45f3785e"
+  integrity sha512-JDY7W2bswlp5c3483lKP4kcb75fHNwGNfwD8x8FsY9xMjv7nxeXjLpR5cCEk1XqPq2+n6w4j7mJOXhEXGiUIKg==
+  dependencies:
+    "@sentry-internal/browser-utils" "8.26.0"
+    "@sentry/core" "8.26.0"
+    "@sentry/types" "8.26.0"
+    "@sentry/utils" "8.26.0"
+
+"@sentry/browser@8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.26.0.tgz#749508ca8d1da857930f41430eb3a77102712f46"
+  integrity sha512-e5s6eKlwLZWzTwQcBwqyAGZMMuQROW9Z677VzwkSyREWAIkKjfH2VBxHATnNGc0IVkNHjD7iH3ixo3C0rLKM3w==
+  dependencies:
+    "@sentry-internal/browser-utils" "8.26.0"
+    "@sentry-internal/feedback" "8.26.0"
+    "@sentry-internal/replay" "8.26.0"
+    "@sentry-internal/replay-canvas" "8.26.0"
+    "@sentry/core" "8.26.0"
+    "@sentry/types" "8.26.0"
+    "@sentry/utils" "8.26.0"
 
 "@sentry/browser@^6.0.1":
   version "6.19.7"
@@ -2587,14 +2635,13 @@
     "@sentry/utils" "6.19.7"
     tslib "^1.9.3"
 
-"@sentry/core@7.21.1":
-  version "7.21.1"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.21.1.tgz#d0423282d90875625802dfe380f9657e9242b72b"
-  integrity sha512-Og5wEEsy24fNvT/T7IKjcV4EvVK5ryY2kxbJzKY6GU2eX+i+aBl+n/vp7U0Es351C/AlTkS+0NOUsp2TQQFxZA==
+"@sentry/core@8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.26.0.tgz#0673a9e2c5b699cf1bde1ed073a345cc393577da"
+  integrity sha512-g/tVmTZD4GNbLFf++hKJfBpcCAtduFEMLnbfa9iT/QEZjlmP+EzY+GsH9bafM5VsNe8DiOUp+kJKWtShzlVdBA==
   dependencies:
-    "@sentry/types" "7.21.1"
-    "@sentry/utils" "7.21.1"
-    tslib "^1.9.3"
+    "@sentry/types" "8.26.0"
+    "@sentry/utils" "8.26.0"
 
 "@sentry/hub@6.19.7":
   version "6.19.7"
@@ -2614,36 +2661,26 @@
     "@sentry/types" "6.19.7"
     tslib "^1.9.3"
 
-"@sentry/react@^7.21.1":
-  version "7.21.1"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.21.1.tgz#275e6fd46212f608f382c7dde46d21e748f93491"
-  integrity sha512-w91PIUyX07mErKgrBQA+7ID8zFKrYDUYSOrFSHufg5DdPq4EpHiNDe/Yngg3e9ELhtr1AbCnEvx9wlvqLi3nZQ==
+"@sentry/react@^8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-8.26.0.tgz#b4e72b9759fbf7d3c5ed37bb5ceb2e94b0d10fd1"
+  integrity sha512-dYoC0xzcqq8zmNMFoTWidhA7mVd3RDz/nAUn6C8yK/hkKA7bUknYCkhpESGLZfHaGwSKzeXRXKd/o/cgUVM9eA==
   dependencies:
-    "@sentry/browser" "7.21.1"
-    "@sentry/types" "7.21.1"
-    "@sentry/utils" "7.21.1"
+    "@sentry/browser" "8.26.0"
+    "@sentry/core" "8.26.0"
+    "@sentry/types" "8.26.0"
+    "@sentry/utils" "8.26.0"
     hoist-non-react-statics "^3.3.2"
-    tslib "^1.9.3"
-
-"@sentry/tracing@^7.21.1":
-  version "7.21.1"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.21.1.tgz#db02643e84960f1ea14b35fe75a93fc0bbca1fcb"
-  integrity sha512-b1BTPsRaNQpohzegoz59KGuBl+To651vEq0vMS4tCzSyIdxkYso3JCrjDdEqW/2MliQYANNVrUai2bmwmU9h1g==
-  dependencies:
-    "@sentry/core" "7.21.1"
-    "@sentry/types" "7.21.1"
-    "@sentry/utils" "7.21.1"
-    tslib "^1.9.3"
 
 "@sentry/types@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.19.7.tgz#c6b337912e588083fc2896eb012526cf7cfec7c7"
   integrity sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg==
 
-"@sentry/types@7.21.1":
-  version "7.21.1"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.21.1.tgz#408a7b95a66ddc30c4359979594e03bee8f9fbdc"
-  integrity sha512-3/IKnd52Ol21amQvI+kz+WB76s8/LR5YvFJzMgIoI2S8d82smIr253zGijRXxHPEif8kMLX4Yt+36VzrLxg6+A==
+"@sentry/types@8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.26.0.tgz#c999fdd9e52587570f723d2370244bad8f79b571"
+  integrity sha512-zKmh6SWsJh630rpt7a9vP4Cm4m1C2gDTUqUiH565CajCL/4cePpNWYrNwalSqsOSL7B9OrczA1+n6a6XvND+ng==
 
 "@sentry/utils@6.19.7":
   version "6.19.7"
@@ -2653,18 +2690,12 @@
     "@sentry/types" "6.19.7"
     tslib "^1.9.3"
 
-"@sentry/utils@7.21.1":
-  version "7.21.1"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.21.1.tgz#96582345178015fd32fe9159c25c44ccf2f99d2a"
-  integrity sha512-F0W0AAi8tgtTx6ApZRI2S9HbXEA9ENX1phTZgdNNWcMFm1BNbc21XEwLqwXBNjub5nlA6CE8xnjXRgdZKx4kzQ==
+"@sentry/utils@8.26.0":
+  version "8.26.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-8.26.0.tgz#c6629f0f2bc8cbc4fddd124770e9063b4e2d1c65"
+  integrity sha512-xvlPU9Hd2BlyT+FhWHGNwnxWqdVRk2AHnDtVcW4Ma0Ri5EwS+uy4Jeik5UkSv8C5RVb9VlxFmS8LN3I1MPJsLw==
   dependencies:
-    "@sentry/types" "7.21.1"
-    tslib "^1.9.3"
-
-"@simbathesailor/use-what-changed@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@simbathesailor/use-what-changed/-/use-what-changed-2.0.0.tgz#7f82d78f92c8588b5fadd702065dde93bd781403"
-  integrity sha512-ulBNrPSvfho9UN6zS2fii3AsdEcp2fMaKeqUZZeCNPaZbB6aXyTUhpEN9atjMAbu/eyK3AY8L4SYJUG62Ekocw==
+    "@sentry/types" "8.26.0"
 
 "@sinclair/typebox@^0.24.1":
   version "0.24.43"
@@ -2799,215 +2830,215 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/d3-array@^2":
-  version "2.12.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.12.3.tgz#8d16d51fb04ad5a5a8ebe14eb8263a579f1efdd1"
-  integrity sha512-hN879HLPTVqZV3FQEXy7ptt083UXwguNbnxdTGzVW4y4KjX5uyNKljrQixZcSJfLyFirbpUokxpXtvR+N5+KIg==
+"@types/d3-array@*":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
+  integrity sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==
 
-"@types/d3-axis@^2":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-2.1.3.tgz#348cca877f6643030aa8c866d08ccae06821a0e2"
-  integrity sha512-QjXjwZ0xzyrW2ndkmkb09ErgWDEYtbLBKGui73QLMFm3woqWpxptfD5Y7vqQdybMcu7WEbjZ5q+w2w5+uh2IjA==
+"@types/d3-axis@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.6.tgz#e760e5765b8188b1defa32bc8bb6062f81e4c795"
+  integrity sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==
   dependencies:
-    "@types/d3-selection" "^2"
+    "@types/d3-selection" "*"
 
-"@types/d3-brush@^2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-2.1.2.tgz#c75890d1ccaef24fba1811daae3f896c1806418b"
-  integrity sha512-DnZmjdK1ycX1CMiW9r5E3xSf1tL+bp3yob1ON8bf0xB0/odfmGXeYOTafU+2SmU1F0/dvcqaO4SMjw62onOu6A==
+"@types/d3-brush@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-3.0.6.tgz#c2f4362b045d472e1b186cdbec329ba52bdaee6c"
+  integrity sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==
   dependencies:
-    "@types/d3-selection" "^2"
+    "@types/d3-selection" "*"
 
-"@types/d3-chord@^2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-2.0.3.tgz#3009b792b754da964d893b4269d1fe7757f21370"
-  integrity sha512-koIqSNQLPRQPXt7c55hgRF6Lr9Ps72r1+Biv55jdYR+SHJ463MsB2lp4ktzttFNmrQw/9yWthf/OmSUj5dNXKw==
+"@types/d3-chord@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-3.0.6.tgz#1706ca40cf7ea59a0add8f4456efff8f8775793d"
+  integrity sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==
 
-"@types/d3-color@^2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-2.0.3.tgz#8bc4589073c80e33d126345542f588056511fe82"
-  integrity sha512-+0EtEjBfKEDtH9Rk3u3kLOUXM5F+iZK+WvASPb0MhIZl8J8NUvGeZRwKCXl+P3HkYx5TdU4YtcibpqHkSR9n7w==
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
 
-"@types/d3-contour@^2":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-2.0.4.tgz#2fc5aa8949c1a1d12d183633603923025e3d14fd"
-  integrity sha512-WMac1xV/mXAgkgr5dUvzsBV5OrgNZDBDpJk9s3v2SadTqGgDRirKABb2Ek2H1pFlYVH4Oly9XJGnuzxKDduqWA==
+"@types/d3-contour@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-3.0.6.tgz#9ada3fa9c4d00e3a5093fed0356c7ab929604231"
+  integrity sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==
   dependencies:
-    "@types/d3-array" "^2"
+    "@types/d3-array" "*"
     "@types/geojson" "*"
 
-"@types/d3-delaunay@^5":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-5.3.1.tgz#47ae03af6b78cb3aa39d3d3c42ca71daca488aef"
-  integrity sha512-F6itHi2DxdatHil1rJ2yEFUNhejj8+0Acd55LZ6Ggwbdoks0+DxVY2cawNj16sjCBiWvubVlh6eBMVsYRNGLew==
+"@types/d3-delaunay@*":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz#185c1a80cc807fdda2a3fe960f7c11c4a27952e1"
+  integrity sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==
 
-"@types/d3-dispatch@^2":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-2.0.1.tgz#d7dc50f9b679996ccf70f3c79dbbf99505a93107"
-  integrity sha512-eT2K8uG3rXkmRiCpPn0rNrekuSLdBfV83vbTvfZliA5K7dbeaqWS/CBHtJ9SQoF8aDTsWSY4A0RU67U/HcKdJQ==
+"@types/d3-dispatch@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz#096efdf55eb97480e3f5621ff9a8da552f0961e7"
+  integrity sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==
 
-"@types/d3-drag@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-2.0.2.tgz#ed538d24456c839967a9ac7aab5e1b63b28bac7f"
-  integrity sha512-m9USoFaTgVw2mmE7vLjWTApT9dMxMlql/dl3Gj503x+1a2n6K455iDWydqy2dfCpkUBCoF82yRGDgcSk9FUEyQ==
+"@types/d3-drag@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.7.tgz#b13aba8b2442b4068c9a9e6d1d82f8bcea77fc02"
+  integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
   dependencies:
-    "@types/d3-selection" "^2"
+    "@types/d3-selection" "*"
 
-"@types/d3-dsv@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-2.0.2.tgz#e10fa57576b50ded27e261db9984b9a92efec2f3"
-  integrity sha512-T4aL2ZzaILkLGKbxssipYVRs8334PSR9FQzTGftZbc3jIPGkiXXS7qUCh8/q8UWFzxBZQ92dvR0v7+AM9wL2PA==
+"@types/d3-dsv@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.7.tgz#0a351f996dc99b37f4fa58b492c2d1c04e3dac17"
+  integrity sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==
 
-"@types/d3-ease@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-2.0.2.tgz#e6fadfffcf5e93bca1629699ad8ee0f61d2129fb"
-  integrity sha512-29Y73Tg6o6aL+3/S/kEun84m5BO4bjRNau6pMWv9N9rZHcJv/O/07mW6EjqxrePZZS64fj0wiB5LMHr4Jzf3eQ==
+"@types/d3-ease@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
+  integrity sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==
 
-"@types/d3-fetch@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-2.0.2.tgz#628c65d14b3a0d02fe1b9c2f3098b81a47e370bc"
-  integrity sha512-sllsCSWrNdSvzOJWN5RnxkmtvW9pCttONGajSxHX9FUQ9kOkGE391xlz6VDBdZxLnpwjp3I+mipbwsaCjq4m5A==
+"@types/d3-fetch@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.7.tgz#c04a2b4f23181aa376f30af0283dbc7b3b569980"
+  integrity sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==
   dependencies:
-    "@types/d3-dsv" "^2"
+    "@types/d3-dsv" "*"
 
-"@types/d3-force@^2":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-2.1.4.tgz#98919b87db8a0ca5011d189c598d69251d20344d"
-  integrity sha512-1XVRc2QbeUSL1FRVE53Irdz7jY+drTwESHIMVirCwkAAMB/yVC8ezAfx/1Alq0t0uOnphoyhRle1ht5CuPgSJQ==
+"@types/d3-force@*":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.10.tgz#6dc8fc6e1f35704f3b057090beeeb7ac674bff1a"
+  integrity sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==
 
-"@types/d3-format@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-2.0.2.tgz#97b2ac314430ae9f7768cc9efba8b23b63af82ef"
-  integrity sha512-OhQPuTeeMhD9A0Ksqo4q1S9Z1Q57O/t4tTPBxBQxRB4IERnxeoEYLPe72fA/GYpPSUrfKZVOgLHidkxwbzLdJA==
+"@types/d3-format@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.4.tgz#b1e4465644ddb3fdf3a263febb240a6cd616de90"
+  integrity sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==
 
-"@types/d3-geo@^2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-2.0.3.tgz#4af0f33c9e796aad6c3fc0dd8cadda9886d1fea9"
-  integrity sha512-kFwLEMXq1mGJ2Eho7KrOUYvLcc2YTDeKj+kTFt87JlEbRQ0rgo8ZENNb5vTYmZrJ2xL/vVM5M7yqVZGOPH2JFg==
+"@types/d3-geo@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.1.0.tgz#b9e56a079449174f0a2c8684a9a4df3f60522440"
+  integrity sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==
   dependencies:
     "@types/geojson" "*"
 
-"@types/d3-hierarchy@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-2.0.2.tgz#afd09d509c36e8cd4907333556f8b591f23589e9"
-  integrity sha512-6PlBRwbjUPPt0ZFq/HTUyOAdOF3p73EUYots74lHMUyAVtdFSOS/hAeNXtEIM9i7qRDntuIblXxHGUMb9MuNRA==
+"@types/d3-hierarchy@*":
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz#6023fb3b2d463229f2d680f9ac4b47466f71f17b"
+  integrity sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==
 
-"@types/d3-interpolate@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-2.0.2.tgz#78eddf7278b19e48e8652603045528d46897aba0"
-  integrity sha512-lElyqlUfIPyWG/cD475vl6msPL4aMU7eJvx1//Q177L8mdXoVPFl1djIESF2FKnc0NyaHvQlJpWwKJYwAhUoCw==
+"@types/d3-interpolate@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
   dependencies:
-    "@types/d3-color" "^2"
+    "@types/d3-color" "*"
 
-"@types/d3-path@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-2.0.2.tgz#6052f38f6186319769dfabab61b5514b0e02c75c"
-  integrity sha512-3YHpvDw9LzONaJzejXLOwZ3LqwwkoXb9LI2YN7Hbd6pkGo5nIlJ09ul4bQhBN4hQZJKmUpX8HkVqbzgUKY48cg==
+"@types/d3-path@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.0.tgz#2b907adce762a78e98828f0b438eaca339ae410a"
+  integrity sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==
 
-"@types/d3-polygon@^2":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-2.0.1.tgz#c2056594f85b512bc2b4f741caddd4b5448bc115"
-  integrity sha512-X3XTIwBxlzRIWe4yaD1KsmcfItjSPLTGL04QDyP08jyHDVsnz3+NZJMwtD4vCaTAVpGSjbqS+jrBo8cO2V/xMA==
+"@types/d3-polygon@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-3.0.2.tgz#dfae54a6d35d19e76ac9565bcb32a8e54693189c"
+  integrity sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==
 
-"@types/d3-quadtree@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-2.0.2.tgz#e3cd92b4e05318f98b0a16e780ba99ce7b13eb77"
-  integrity sha512-KgWL4jlz8QJJZX01E4HKXJ9FLU94RTuObsAYqsPp8YOAcYDmEgJIQJ+ojZcnKUAnrUb78ik8JBKWas5XZPqJnQ==
+"@types/d3-quadtree@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz#d4740b0fe35b1c58b66e1488f4e7ed02952f570f"
+  integrity sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==
 
-"@types/d3-random@^2":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-2.2.1.tgz#551edbb71cb317dea2cf9c76ebe059d311eefacb"
-  integrity sha512-5vvxn6//poNeOxt1ZwC7QU//dG9QqABjy1T7fP/xmFHY95GnaOw3yABf29hiu5SR1Oo34XcpyHFbzod+vemQjA==
+"@types/d3-random@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-3.0.3.tgz#ed995c71ecb15e0cd31e22d9d5d23942e3300cfb"
+  integrity sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==
 
-"@types/d3-scale-chromatic@^2":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-2.0.1.tgz#495cbbae7273e0d0ff564cdc19aa6d2b9928da83"
-  integrity sha512-3EuZlbPu+pvclZcb1DhlymTWT2W+lYsRKBjvkH2ojDbCWDYavifqu1vYX9WGzlPgCgcS4Alhk1+zapXbGEGylQ==
+"@types/d3-scale-chromatic@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz#fc0db9c10e789c351f4c42d96f31f2e4df8f5644"
+  integrity sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==
 
-"@types/d3-scale@^3":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-3.3.2.tgz#18c94e90f4f1c6b1ee14a70f14bfca2bd1c61d06"
-  integrity sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==
+"@types/d3-scale@*":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
+  integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
   dependencies:
-    "@types/d3-time" "^2"
+    "@types/d3-time" "*"
 
-"@types/d3-selection@^2":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-2.0.1.tgz#bc2816c96faff285d204dda72b79734d4f37d583"
-  integrity sha512-3mhtPnGE+c71rl/T5HMy+ykg7migAZ4T6gzU0HxpgBFKcasBrSnwRbYV1/UZR6o5fkpySxhWxAhd7yhjj8jL7g==
+"@types/d3-selection@*":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.10.tgz#98cdcf986d0986de6912b5892e7c015a95ca27fe"
+  integrity sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==
 
-"@types/d3-shape@^2":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-2.1.3.tgz#35d397b9e687abaa0de82343b250b9897b8cacf3"
-  integrity sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ==
+"@types/d3-shape@*":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.6.tgz#65d40d5a548f0a023821773e39012805e6e31a72"
+  integrity sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==
   dependencies:
-    "@types/d3-path" "^2"
+    "@types/d3-path" "*"
 
-"@types/d3-time-format@^3":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-3.0.1.tgz#1680fb6c41ab3a85db261ede296626668592246a"
-  integrity sha512-5GIimz5IqaRsdnxs4YlyTZPwAMfALu/wA4jqSiuqgdbCxUZ2WjrnwANqOtoBJQgeaUTdYNfALJO0Yb0YrDqduA==
+"@types/d3-time-format@*":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.3.tgz#d6bc1e6b6a7db69cccfbbdd4c34b70632d9e9db2"
+  integrity sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==
 
-"@types/d3-time@^2":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-2.1.1.tgz#743fdc821c81f86537cbfece07093ac39b4bc342"
-  integrity sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==
+"@types/d3-time@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.3.tgz#3c186bbd9d12b9d84253b6be6487ca56b54f88be"
+  integrity sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==
 
-"@types/d3-timer@^2":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-2.0.1.tgz#ffb6620d290624f3726aa362c0c8a4b44c8d7200"
-  integrity sha512-TF8aoF5cHcLO7W7403blM7L1T+6NF3XMyN3fxyUolq2uOcFeicG/khQg/dGxiCJWoAcmYulYN7LYSRKO54IXaA==
+"@types/d3-timer@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
+  integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
 
-"@types/d3-transition@^2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-2.0.2.tgz#d5ba1c26a3daeb0c5527d573d44b4c5ca9fae027"
-  integrity sha512-376TICEykdXOEA9uUIYpjshEkxfGwCPnkHUl8+6gphzKbf5NMnUhKT7wR59Yxrd9wtJ/rmE3SVLx6/8w4eY6Zg==
+"@types/d3-transition@*":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.8.tgz#677707f5eed5b24c66a1918cde05963021351a8f"
+  integrity sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==
   dependencies:
-    "@types/d3-selection" "^2"
+    "@types/d3-selection" "*"
 
-"@types/d3-zoom@^2":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-2.0.3.tgz#9eef8763600fa8be11b8cb0ed9144a395df6dffb"
-  integrity sha512-9X9uDYKk2U8w775OHj36s9Q7GkNAnJKGw6+sbkP5DpHSjELwKvTGzEK6+IISYfLpJRL/V3mRXMhgDnnJ5LkwJg==
-  dependencies:
-    "@types/d3-interpolate" "^2"
-    "@types/d3-selection" "^2"
-
-"@types/d3@^6.0.0":
-  version "6.7.5"
-  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-6.7.5.tgz#6ae8034ea21db10fa3e31db1f670c5887d91d8a3"
-  integrity sha512-TUZ6zuT/KIvbHSv81kwAiO5gG5aTuoiLGnWR/KxHJ15Idy/xmGUXaaF5zMG+UMIsndcGlSHTmrvwRgdvZlNKaA==
-  dependencies:
-    "@types/d3-array" "^2"
-    "@types/d3-axis" "^2"
-    "@types/d3-brush" "^2"
-    "@types/d3-chord" "^2"
-    "@types/d3-color" "^2"
-    "@types/d3-contour" "^2"
-    "@types/d3-delaunay" "^5"
-    "@types/d3-dispatch" "^2"
-    "@types/d3-drag" "^2"
-    "@types/d3-dsv" "^2"
-    "@types/d3-ease" "^2"
-    "@types/d3-fetch" "^2"
-    "@types/d3-force" "^2"
-    "@types/d3-format" "^2"
-    "@types/d3-geo" "^2"
-    "@types/d3-hierarchy" "^2"
-    "@types/d3-interpolate" "^2"
-    "@types/d3-path" "^2"
-    "@types/d3-polygon" "^2"
-    "@types/d3-quadtree" "^2"
-    "@types/d3-random" "^2"
-    "@types/d3-scale" "^3"
-    "@types/d3-scale-chromatic" "^2"
-    "@types/d3-selection" "^2"
-    "@types/d3-shape" "^2"
-    "@types/d3-time" "^2"
-    "@types/d3-time-format" "^3"
-    "@types/d3-timer" "^2"
-    "@types/d3-transition" "^2"
-    "@types/d3-zoom" "^2"
+"@types/d3-zoom@*":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
+  integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
+"@types/d3@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-7.4.3.tgz#d4550a85d08f4978faf0a4c36b848c61eaac07e2"
+  integrity sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/d3-axis" "*"
+    "@types/d3-brush" "*"
+    "@types/d3-chord" "*"
+    "@types/d3-color" "*"
+    "@types/d3-contour" "*"
+    "@types/d3-delaunay" "*"
+    "@types/d3-dispatch" "*"
+    "@types/d3-drag" "*"
+    "@types/d3-dsv" "*"
+    "@types/d3-ease" "*"
+    "@types/d3-fetch" "*"
+    "@types/d3-force" "*"
+    "@types/d3-format" "*"
+    "@types/d3-geo" "*"
+    "@types/d3-hierarchy" "*"
+    "@types/d3-interpolate" "*"
+    "@types/d3-path" "*"
+    "@types/d3-polygon" "*"
+    "@types/d3-quadtree" "*"
+    "@types/d3-random" "*"
+    "@types/d3-scale" "*"
+    "@types/d3-scale-chromatic" "*"
+    "@types/d3-selection" "*"
+    "@types/d3-shape" "*"
+    "@types/d3-time" "*"
+    "@types/d3-time-format" "*"
+    "@types/d3-timer" "*"
+    "@types/d3-transition" "*"
+    "@types/d3-zoom" "*"
 
 "@types/file-saver@^2.0.5":
   version "2.0.5"
@@ -3041,7 +3072,7 @@
   dependencies:
     history "*"
 
-"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -3092,6 +3123,11 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
+"@types/json-schema@^7.0.12":
+  version "7.0.13"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85"
+  integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==
+
 "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -3215,10 +3251,10 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/redux-mock-store@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.3.tgz#895de4a364bc4836661570aec82f2eef5989d1fb"
-  integrity sha512-Wqe3tJa6x9MxMN4DJnMfZoBRBRak1XTPklqj4qkVm5VBpZnC8PSADf4kLuFQ9NAdHaowfWoEeUMz7NWc2GMtnA==
+"@types/redux-mock-store@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.6.tgz#0a03b2655028b7cf62670d41ac1de5ca1b1f5958"
+  integrity sha512-eg5RDfhJTXuoJjOMyXiJbaDb1B8tfTaJixscmu+jOusj6adGC0Krntz09Tf4gJgXeCqCrM5bBMd+B7ez0izcAQ==
   dependencies:
     redux "^4.0.5"
 
@@ -3232,6 +3268,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
   integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
 
+"@types/semver@^7.5.0":
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.3.tgz#9a726e116beb26c24f1ccd6850201e1246122e04"
+  integrity sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -3266,30 +3307,32 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.56.0.tgz#e4fbb4d6dd8dab3e733485c1a44a02189ae75364"
-  integrity sha512-ZNW37Ccl3oMZkzxrYDUX4o7cnuPgU+YrcaYXzsRtLB16I1FR5SHMqga3zGsaSliZADCWo2v8qHWqAYIj8nWCCg==
+"@typescript-eslint/eslint-plugin@^6.0.0":
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.4.tgz#057338df21b6062c2f2fc5999fbea8af9973ac6d"
+  integrity sha512-DAbgDXwtX+pDkAHwiGhqP3zWUGpW49B7eqmgpPtg+BKJXwdct79ut9+ifqOFPJGClGKSHXn2PTBatCnldJRUoA==
   dependencies:
-    "@eslint-community/regexpp" "^4.4.0"
-    "@typescript-eslint/scope-manager" "5.56.0"
-    "@typescript-eslint/type-utils" "5.56.0"
-    "@typescript-eslint/utils" "5.56.0"
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "6.7.4"
+    "@typescript-eslint/type-utils" "6.7.4"
+    "@typescript-eslint/utils" "6.7.4"
+    "@typescript-eslint/visitor-keys" "6.7.4"
     debug "^4.3.4"
-    grapheme-splitter "^1.0.4"
-    ignore "^5.2.0"
-    natural-compare-lite "^1.4.0"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.56.0.tgz#42eafb44b639ef1dbd54a3dbe628c446ca753ea6"
-  integrity sha512-sn1OZmBxUsgxMmR8a8U5QM/Wl+tyqlH//jTqCg8daTAmhAk26L2PFhcqPLlYBhYUJMZJK276qLXlHN3a83o2cg==
+"@typescript-eslint/parser@^6.0.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
+  integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.56.0"
-    "@typescript-eslint/types" "5.56.0"
-    "@typescript-eslint/typescript-estree" "5.56.0"
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
     debug "^4.3.4"
 
 "@typescript-eslint/parser@^6.7.5":
@@ -3303,14 +3346,6 @@
     "@typescript-eslint/visitor-keys" "6.19.1"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.56.0.tgz#62b4055088903b5254fa20403010e1c16d6ab725"
-  integrity sha512-jGYKyt+iBakD0SA5Ww8vFqGpoV2asSjwt60Gl6YcO8ksQ8s2HlUEyHBMSa38bdLopYqGf7EYQMUIGdT/Luw+sw==
-  dependencies:
-    "@typescript-eslint/types" "5.56.0"
-    "@typescript-eslint/visitor-keys" "5.56.0"
-
 "@typescript-eslint/scope-manager@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
@@ -3327,20 +3362,31 @@
     "@typescript-eslint/types" "6.19.1"
     "@typescript-eslint/visitor-keys" "6.19.1"
 
-"@typescript-eslint/type-utils@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.56.0.tgz#e6f004a072f09c42e263dc50e98c70b41a509685"
-  integrity sha512-8WxgOgJjWRy6m4xg9KoSHPzBNZeQbGlQOH7l2QEhQID/+YseaFxg5J/DLwWSsi9Axj4e/cCiKx7PVzOq38tY4A==
+"@typescript-eslint/scope-manager@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.56.0"
-    "@typescript-eslint/utils" "5.56.0"
-    debug "^4.3.4"
-    tsutils "^3.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
 
-"@typescript-eslint/types@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.56.0.tgz#b03f0bfd6fa2afff4e67c5795930aff398cbd834"
-  integrity sha512-JyAzbTJcIyhuUhogmiu+t79AkdnqgPUEsxMTMc/dCZczGMJQh1MK2wgrju++yMN6AWroVAy2jxyPcPr3SWCq5w==
+"@typescript-eslint/scope-manager@6.7.4":
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.7.4.tgz#a484a17aa219e96044db40813429eb7214d7b386"
+  integrity sha512-SdGqSLUPTXAXi7c3Ob7peAGVnmMoGzZ361VswK2Mqf8UOYcODiYvs8rs5ILqEdfvX1lE7wEZbLyELCW+Yrql1A==
+  dependencies:
+    "@typescript-eslint/types" "6.7.4"
+    "@typescript-eslint/visitor-keys" "6.7.4"
+
+"@typescript-eslint/type-utils@6.7.4":
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.7.4.tgz#847cd3b59baf948984499be3e0a12ff07373e321"
+  integrity sha512-n+g3zi1QzpcAdHFP9KQF+rEFxMb2KxtnJGID3teA/nxKHOVi3ylKovaqEzGBbVY2pBttU6z85gp0D00ufLzViQ==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "6.7.4"
+    "@typescript-eslint/utils" "6.7.4"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
 
 "@typescript-eslint/types@5.62.0":
   version "5.62.0"
@@ -3352,18 +3398,15 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.19.1.tgz#2d4c9d492a63ede15e7ba7d129bdf7714b77f771"
   integrity sha512-6+bk6FEtBhvfYvpHsDgAL3uo4BfvnTnoge5LrrCj2eJN8g3IJdLTD4B/jK3Q6vo4Ql/Hoip9I8aB6fF+6RfDqg==
 
-"@typescript-eslint/typescript-estree@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.56.0.tgz#48342aa2344649a03321e74cab9ccecb9af086c3"
-  integrity sha512-41CH/GncsLXOJi0jb74SnC7jVPWeVJ0pxQj8bOjH1h2O26jXN3YHKDT1ejkVz5YeTEQPeLCCRY0U2r68tfNOcg==
-  dependencies:
-    "@typescript-eslint/types" "5.56.0"
-    "@typescript-eslint/visitor-keys" "5.56.0"
-    debug "^4.3.4"
-    globby "^11.1.0"
-    is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
+"@typescript-eslint/types@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
+"@typescript-eslint/types@6.7.4":
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.7.4.tgz#5d358484d2be986980c039de68e9f1eb62ea7897"
+  integrity sha512-o9XWK2FLW6eSS/0r/tgjAGsYasLAnOWg7hvZ/dGYSSNjCh+49k5ocPN8OmG5aZcSJ8pclSOyVKP2x03Sj+RrCA==
 
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
@@ -3392,19 +3435,45 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/utils@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.56.0.tgz#db64705409b9a15546053fb4deb2888b37df1f41"
-  integrity sha512-XhZDVdLnUJNtbzaJeDSCIYaM+Tgr59gZGbFuELgF7m0IY03PlciidS7UQNKLE0+WpUTn1GlycEr6Ivb/afjbhA==
+"@typescript-eslint/typescript-estree@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
   dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.56.0"
-    "@typescript-eslint/types" "5.56.0"
-    "@typescript-eslint/typescript-estree" "5.56.0"
-    eslint-scope "^5.1.1"
-    semver "^7.3.7"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/typescript-estree@6.7.4":
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.7.4.tgz#f2baece09f7bb1df9296e32638b2e1130014ef1a"
+  integrity sha512-ty8b5qHKatlNYd9vmpHooQz3Vki3gG+3PchmtsA4TgrZBKWHNjWfkQid7K7xQogBqqc7/BhGazxMD5vr6Ha+iQ==
+  dependencies:
+    "@typescript-eslint/types" "6.7.4"
+    "@typescript-eslint/visitor-keys" "6.7.4"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/utils@6.7.4":
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.7.4.tgz#2236f72b10e38277ee05ef06142522e1de470ff2"
+  integrity sha512-PRQAs+HUn85Qdk+khAxsVV+oULy3VkbH3hQ8hxLRJXWBEd7iI+GbQxH5SEUSH7kbEoTp6oT1bOwyga24ELALTA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "6.7.4"
+    "@typescript-eslint/types" "6.7.4"
+    "@typescript-eslint/typescript-estree" "6.7.4"
+    semver "^7.5.4"
 
 "@typescript-eslint/utils@^5.10.0":
   version "5.62.0"
@@ -3420,14 +3489,6 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/visitor-keys@5.56.0":
-  version "5.56.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.56.0.tgz#f19eb297d972417eb13cb69b35b3213e13cc214f"
-  integrity sha512-1mFdED7u5bZpX6Xxf5N9U2c18sb+8EvU3tyOIj6LQZ5OOvnmj8BVeNNP603OFPm5KkS1a7IvCIcwrdHXaEMG/Q==
-  dependencies:
-    "@typescript-eslint/types" "5.56.0"
-    eslint-visitor-keys "^3.3.0"
-
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
@@ -3444,6 +3505,22 @@
     "@typescript-eslint/types" "6.19.1"
     eslint-visitor-keys "^3.4.1"
 
+"@typescript-eslint/visitor-keys@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    eslint-visitor-keys "^3.4.1"
+
+"@typescript-eslint/visitor-keys@6.7.4":
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.7.4.tgz#80dfecf820fc67574012375859085f91a4dff043"
+  integrity sha512-pOW37DUhlTZbvph50x5zZCkFn3xzwkGtNoJHzIM3svpiSkJzwOYr/kVBaXmf+RAQiUDs1AHEZVNPg6UJCJpwRA==
+  dependencies:
+    "@typescript-eslint/types" "6.7.4"
+    eslint-visitor-keys "^3.4.1"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -4594,13 +4671,6 @@ bowser@^2.4.0:
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"
   integrity sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==
 
-bplist-parser@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
-  integrity sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==
-  dependencies:
-    big-integer "^1.6.44"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -4801,13 +4871,6 @@ builtins@^1.0.3:
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
   integrity sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==
 
-bundle-name@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bundle-name/-/bundle-name-3.0.0.tgz#ba59bcc9ac785fb67ccdbf104a2bf60c099f0e1a"
-  integrity sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==
-  dependencies:
-    run-applescript "^5.0.0"
-
 bundlemon-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/bundlemon-utils/-/bundlemon-utils-1.0.0.tgz#9c3e10f09107568913db2e69a3d3317a82b00633"
@@ -4997,9 +5060,9 @@ camelcase@^6.0.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001359:
-  version "1.0.30001538"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz"
-  integrity sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==
+  version "1.0.30001651"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz"
+  integrity sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -5255,10 +5318,10 @@ classnames@^2.2.5, classnames@^2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
-classnames@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
-  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+classnames@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
 clean-css@4.2.x, clean-css@^4.2.1:
   version "4.2.4"
@@ -5457,11 +5520,6 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0:
-  version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
-  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -5472,11 +5530,16 @@ commander@2.19.0, commander@~2.19.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@7.2.0:
+commander@7, commander@7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+commander@^2.18.0, commander@^2.19.0, commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -5806,6 +5869,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
+copy-text-to-clipboard@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz#0202b2d9bdae30a49a53f898626dcc3b49ad960b"
+  integrity sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==
+
 copy-webpack-plugin@4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.6.0.tgz#e7f40dd8a68477d405dd1b7a854aae324b158bae"
@@ -5941,10 +6009,10 @@ cozy-app-publish@^0.33.0:
     tar "^6.1.11"
     verror "^1.10.1"
 
-cozy-bar@8.15.0:
-  version "8.15.0"
-  resolved "https://registry.yarnpkg.com/cozy-bar/-/cozy-bar-8.15.0.tgz#10e811f3d6abc976cfa0da79c550131b26c2e8d7"
-  integrity sha512-D1Oo2I65/wgqUbqQY3nVLF9R2krGvkS0STTdRbtcVTjg/usvJZ/bhOohepZDuO/zVPcbp8Oo7j6ZUQDgHk2qbw==
+cozy-bar@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/cozy-bar/-/cozy-bar-10.0.0.tgz#74f7b18225f9d7c569bf51442db957a6b3db444c"
+  integrity sha512-eZ5NDACEaiVxFBfxb1cRBsqwMl8+BNF0uyVow75qXzyVWLK/nnB1iPZ3I0SOCPHcTorzdH3L0iy52FAadF0jQg==
   dependencies:
     hammerjs "2.0.8"
     lodash.debounce "4.0.8"
@@ -6000,16 +6068,16 @@ cozy-client@29.2.0:
     sift "^6.0.0"
     url-search-params-polyfill "^8.0.0"
 
-cozy-client@40.6.0:
-  version "40.6.0"
-  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-40.6.0.tgz#69fb48acd23fc34c5b50e1e22533090cde7a42fa"
-  integrity sha512-iNpEzbU93EVW/0KybtzqIPTz3f+JbnlaT0mLmdoBBLPM+NUQFNx2FeV1q8l8qzVjVG/yvFtcE7kBDRswpocc2A==
+cozy-client@48.21.0:
+  version "48.21.0"
+  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-48.21.0.tgz#cb51d4765ad5cc42644bdc00afff8db300a9de31"
+  integrity sha512-kec/fcvZ8aOEa4jbbOpaDauOOHRFGw1PihowJTCcbm8P7gOVvKFoQEcLJi/QwchngWPgNt4vcPevmokhYvRCYQ==
   dependencies:
     "@cozy/minilog" "1.0.0"
     "@types/jest" "^26.0.20"
     "@types/lodash" "^4.14.170"
     btoa "^1.2.1"
-    cozy-stack-client "^40.2.1"
+    cozy-stack-client "^48.16.0"
     date-fns "2.29.3"
     json-stable-stringify "^1.0.1"
     lodash "^4.17.13"
@@ -6049,24 +6117,24 @@ cozy-client@^33.2.0:
     sift "^6.0.0"
     url-search-params-polyfill "^8.0.0"
 
-cozy-device-helper@>=2.1.0, cozy-device-helper@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/cozy-device-helper/-/cozy-device-helper-2.2.1.tgz#d5822afd818919fa871527e6f78b0265fc1e009b"
-  integrity sha512-1zVQag2OI+6sEGEC70w77urnk4GpWa/ncvCYuyrOOgib4bH6v2YbBrymOD9T3MH0yVF/LVMnXnugSHQfhNLVhA==
+cozy-device-helper@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cozy-device-helper/-/cozy-device-helper-3.1.0.tgz#140079bf4a6844b21d6ac0a3a2d75741dba15faa"
+  integrity sha512-KorbuWN+oZ+v7okbXQTbLuW6nt7IyVnIIsDXB3Ay6zdtl5nV13+fOGKeRsjaecgBDLSXWJ07j0ooT7l6orZpDg==
   dependencies:
     lodash "^4.17.19"
 
-cozy-device-helper@^1.7.5:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/cozy-device-helper/-/cozy-device-helper-1.18.0.tgz#45b37e68c30ec1104c8c40180b472d3662bc2534"
-  integrity sha512-/s9X5oUH/Fpu3NKx1RS5T/iYzpfOlBD3tRGGsjth4VDYhqATlApUZLghmzvFvskEeC4eCAvNYfEkyo9UPrZbFQ==
+cozy-device-helper@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cozy-device-helper/-/cozy-device-helper-2.2.1.tgz#d5822afd818919fa871527e6f78b0265fc1e009b"
+  integrity sha512-1zVQag2OI+6sEGEC70w77urnk4GpWa/ncvCYuyrOOgib4bH6v2YbBrymOD9T3MH0yVF/LVMnXnugSHQfhNLVhA==
   dependencies:
     lodash "^4.17.19"
 
-cozy-device-helper@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/cozy-device-helper/-/cozy-device-helper-2.5.0.tgz#4a5b18ad07a2c66c468988ae9daee014ba876e5b"
-  integrity sha512-+KKX6obYg8UmdmPvBuZDFMfzdSMOSKbnCf6ZIJTkW3Xs95aDZYhh/6x61Ok5+oTusHBL/khd6A+P1Qx5tL7mrw==
+cozy-device-helper@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cozy-device-helper/-/cozy-device-helper-3.0.0.tgz#c6316b7877c48ba9b343f80b13275b42027717bc"
+  integrity sha512-dkwQ8I0B2TiGs6MDdvSWOJKHMUwTHJegr67E3hpsupy5G9Z52dyjYtbK6bfoj0ykhit15fVI7bi8ivDyoM1oRg==
   dependencies:
     lodash "^4.17.19"
 
@@ -6092,7 +6160,14 @@ cozy-doctypes@^1.85.3:
     lodash "^4.17.19"
     prop-types "^15.7.2"
 
-cozy-flags@>2.8.6, cozy-flags@^2.8.7:
+cozy-flags@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cozy-flags/-/cozy-flags-4.0.0.tgz#047f9a93f826808bfd23ab206d0bf8235c162237"
+  integrity sha512-us+XDoqPCnDflu7gJrZAmE5SDmkIx2QEhs+fItQOf2JjnGpfBvmIhLMv51/P5INPL4bAQSUHE6ddwNFwOruqBw==
+  dependencies:
+    microee "^0.0.6"
+
+cozy-flags@^2.8.7:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/cozy-flags/-/cozy-flags-2.9.0.tgz#9f458c0eb71f549a2ae12198d55de89434bff96b"
   integrity sha512-2iezzIS3WtnZ+b8Kupsa7aN5KINebdISS9L5OpGc320wcdmHrHShpZaqkwCQWLxLqhaXalxxe6OIeFLS84pIrQ==
@@ -6118,11 +6193,12 @@ cozy-harvest-lib@9.26.14:
     react-markdown "^4.2.2"
     uuid "^3.3.2"
 
-cozy-intent@^2.13.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/cozy-intent/-/cozy-intent-2.13.0.tgz#662fd3b5155bed0ca8494b5773fe3c4ea55ef077"
-  integrity sha512-AW+62w4oGxiOGYNK8OEZ22c4/hNK88fBoIS2187qFvsnirsFhPEbbamoS0SJOjqiBdQQqoDfKgOFbXxWwrSNhg==
+cozy-intent@^2.22.0:
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/cozy-intent/-/cozy-intent-2.22.0.tgz#a4333463ca934d2a5cfe34a23b0d6f0e50d27934"
+  integrity sha512-aCIlwLuia5llX36eubgbkah3vR3709V7VFDWl2hndvdmyjZBHh1siJUlJxpA5nYayqJkLy7aC4bdfGpTetgoCQ==
   dependencies:
+    cozy-minilog "^3.3.1"
     post-me "0.4.5"
 
 cozy-interapp@^0.5.4:
@@ -6153,17 +6229,18 @@ cozy-jobs-cli@^2.0.0:
     pretty "2.0.0"
     strip-json-comments "3.1.1"
 
-cozy-keys-lib@>=4.1.9:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/cozy-keys-lib/-/cozy-keys-lib-4.2.1.tgz#98bc71eb08d830ca9d5d9876c4851c68a91557ce"
-  integrity sha512-Zg4hcC5NfoD7ZjlqZhyOLydLbX3GOA+cawr/s+PmQH2eeL5wV+9vpnpkv9SleEUspJ/HwV5J9bgEPBPhwNvbRw==
+cozy-keys-lib@>=6.0.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/cozy-keys-lib/-/cozy-keys-lib-6.1.1.tgz#a9674ef2977e6bc26110d101bb47e78bab3ae670"
+  integrity sha512-C98kCQjyYiWz/ElUMjUqIoYIhc5eWrF8r8WfFCVQCAvt9j1tRmwsTvWC70rA/5/i/QfuFOln7U9hXpn3rdDnow==
   dependencies:
     "@aspnet/signalr" "^1.1.4"
     "@aspnet/signalr-protocol-msgpack" "^1.1.0"
     "@cozy/minilog" "^1.0.0"
     big-integer "^1.6.44"
     classnames "^2.2.6"
-    cozy-device-helper "^1.7.5"
+    cozy-device-helper "^2.1.0"
+    cozy-logger "^1.10.1"
     lodash "^4.17.15"
     lunr "^2.3.6"
     microee "^0.0.6"
@@ -6213,6 +6290,14 @@ cozy-logger@1.9.0, cozy-logger@>1.7.0, cozy-logger@^1.3.0, cozy-logger@^1.8.0, c
     chalk "^2.4.2"
     json-stringify-safe "5.0.1"
 
+cozy-logger@^1.10.1:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/cozy-logger/-/cozy-logger-1.10.4.tgz#8a55a0b1fc23db9cf90524043d959c274d376c24"
+  integrity sha512-zDpG+edSqghx6HAIh6wIWmqQ49IX85anv+Y4P5pjHs4w697n5yI13UzhW7NczhFlflVF9ibxeKXqBNYvb4DW+Q==
+  dependencies:
+    chalk "^2.4.2"
+    json-stringify-safe "5.0.1"
+
 cozy-logger@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/cozy-logger/-/cozy-logger-1.9.1.tgz#d5eb5a007eae6b4612fc6cc5a82fd70fe8c435bb"
@@ -6221,13 +6306,20 @@ cozy-logger@^1.9.1:
     chalk "^2.4.2"
     json-stringify-safe "5.0.1"
 
-cozy-realtime@4.2.8:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/cozy-realtime/-/cozy-realtime-4.2.8.tgz#25954c6a9038019c742757617f75e82a33e7de13"
-  integrity sha512-HMZLTO/A8jqjvsBDlCrwzug+DdwoNIbkw5IvSSE0VPobdIiOo5q3W8WyLbCu9fwC7GijE/Nyfsk1PCfh10a16Q==
+cozy-minilog@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/cozy-minilog/-/cozy-minilog-3.3.1.tgz#472dccf4a9391c479120a83d26b435cf9d609c72"
+  integrity sha512-NLQNQ1Q/bvJrqNv9w5bLjfAxYKv+pESobJgUKXondxP616kx7k0mpiRrCZBaJRbEbpKryT/eJ0JJwLdVaIP5NA==
+  dependencies:
+    microee "0.0.6"
+
+cozy-realtime@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/cozy-realtime/-/cozy-realtime-5.0.1.tgz#402d15a79e1b83b1e5e6a468e1cc95508fe2ebec"
+  integrity sha512-3mtZwTnqpVOvauQDUOYa8F5qKnOXBQbs4syBqGrNbMehowPLXJEy6B4xGcT/HGUZwpXRr7p5NFPV7zD8D6el1Q==
   dependencies:
     "@cozy/minilog" "^1.0.0"
-    cozy-device-helper "^2.5.0"
+    cozy-device-helper "^3.0.0"
 
 cozy-release@1.10.0:
   version "1.10.0"
@@ -6236,10 +6328,10 @@ cozy-release@1.10.0:
   dependencies:
     exec-sh "0.3.2"
 
-cozy-scripts@8.1:
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/cozy-scripts/-/cozy-scripts-8.1.2.tgz#5ff1ef11328215f2955d8d7620992326fa86dcad"
-  integrity sha512-4MvcWim6nAAzSllnkQUsgXTkzKTvYnePk38kWS/14W5w7Ip0VZql0BtewWMc1Sm07yAcyik9Of/i1yX3CxcOQA==
+cozy-scripts@8.3:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/cozy-scripts/-/cozy-scripts-8.3.0.tgz#dec3a5c9568a5e44e1baf6cd9983a7c55418ba95"
+  integrity sha512-UrzifMUyIleTs7M+H449uOm/3OA/7vqUVlpA6IYi+BftUG4WbOEmU3oG9dmxRK5kVK+VhJURBk+9LJ+C+84syg==
   dependencies:
     "@babel/core" "7.10.0"
     "@babel/polyfill" "^7.10.4"
@@ -6314,19 +6406,19 @@ cozy-stack-client@^33.4.0:
     mime "^2.4.0"
     qs "^6.7.0"
 
-cozy-stack-client@^40.2.1:
-  version "40.2.1"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-40.2.1.tgz#ce67d260226d7cd9f4314c15428880fd87016812"
-  integrity sha512-BMhIn1/3y2zzEYx4WmIlMcGUrzfKj7fRZdtrIjYimNapW0Xsy6nJlDCInA3cH1tNKqKBMIC5F4UQn3vTo/9hGg==
+cozy-stack-client@^48.16.0:
+  version "48.16.0"
+  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-48.16.0.tgz#e8820197a0eb640e2d9061e21fad430ca5e56065"
+  integrity sha512-JgXAsmXESCfbC+T2EiXzUoPiDNFf2ePzNFQK98ZbWorAj8G6DcggdcG83/eD4QCwmv/1jXTaUWI1euTQdYEDQg==
   dependencies:
     detect-node "^2.0.4"
     mime "^2.4.0"
     qs "^6.7.0"
 
-cozy-ui@^86.0.0:
-  version "86.3.0"
-  resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-86.3.0.tgz#02df54285e043c03489a53c9c83f7a49f47d5328"
-  integrity sha512-eUnkIWY4hszVYB5qMQ5U7wxagFPzpvIlpA+7ke52fjcs2Z8uJ5vsbNfHjIgwxDn+hzOm09nUkwjDmQXIbO33bA==
+cozy-ui@^111.9.0:
+  version "111.9.0"
+  resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-111.9.0.tgz#45903a91cb8cf7394f590ae544ab60e3997feb04"
+  integrity sha512-BDzmiUHLe1vUTGZwQApta9omiTTA17NfgpbYHhKvHDHaya+9K1i6caNLtwXzttFBliLgPe3wUFa+edsCkKKQuw==
   dependencies:
     "@babel/runtime" "^7.3.4"
     "@material-ui/core" "4.12.3"
@@ -6342,8 +6434,9 @@ cozy-ui@^86.0.0:
     intersection-observer "0.11.0"
     mime-types "2.1.35"
     mui-bottom-sheet "https://github.com/cozy/mui-bottom-sheet.git#v1.0.9"
-    node-polyglot "^2.2.2"
+    node-polyglot "^2.5.0"
     normalize.css "^8.0.0"
+    pdf-lib "1.17.1"
     piwik-react-router "0.12.1"
     react-chartjs-2 "4.1.0"
     react-markdown "^4.0.8"
@@ -6408,7 +6501,7 @@ cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -6619,249 +6712,249 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==
 
-d3-array@2, d3-array@^2.3.0, d3-array@^2.5.0:
-  version "2.12.1"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
-  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
   dependencies:
-    internmap "^1.0.0"
+    internmap "1 - 2"
 
-d3-axis@2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-2.1.0.tgz#978db534092711117d032fad5d733d206307f6a0"
-  integrity sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw==
+d3-axis@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322"
+  integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==
 
-d3-brush@2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-2.1.0.tgz#adadfbb104e8937af142e9a6e2028326f0471065"
-  integrity sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==
+d3-brush@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-3.0.0.tgz#6f767c4ed8dcb79de7ede3e1c0f89e63ef64d31c"
+  integrity sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==
   dependencies:
-    d3-dispatch "1 - 2"
-    d3-drag "2"
-    d3-interpolate "1 - 2"
-    d3-selection "2"
-    d3-transition "2"
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "3"
+    d3-transition "3"
 
-d3-chord@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-2.0.0.tgz#32491b5665391180560f738e5c1ccd1e3c47ebae"
-  integrity sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==
+d3-chord@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-3.0.1.tgz#d156d61f485fce8327e6abf339cb41d8cbba6966"
+  integrity sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==
   dependencies:
-    d3-path "1 - 2"
+    d3-path "1 - 3"
 
-"d3-color@1 - 2", d3-color@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
-  integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
+"d3-color@1 - 3", d3-color@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
-d3-contour@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-2.0.0.tgz#80ee834988563e3bea9d99ddde72c0f8c089ea40"
-  integrity sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==
+d3-contour@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-4.0.2.tgz#bb92063bc8c5663acb2422f99c73cbb6c6ae3bcc"
+  integrity sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==
   dependencies:
-    d3-array "2"
+    d3-array "^3.2.0"
 
-d3-delaunay@5:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-5.3.0.tgz#b47f05c38f854a4e7b3cea80e0bb12e57398772d"
-  integrity sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==
+d3-delaunay@6:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
+  integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
   dependencies:
-    delaunator "4"
+    delaunator "5"
 
-"d3-dispatch@1 - 2", d3-dispatch@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-2.0.0.tgz#8a18e16f76dd3fcaef42163c97b926aa9b55e7cf"
-  integrity sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==
+"d3-dispatch@1 - 3", d3-dispatch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
 
-d3-drag@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-2.0.0.tgz#9eaf046ce9ed1c25c88661911c1d5a4d8eb7ea6d"
-  integrity sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==
+"d3-drag@2 - 3", d3-drag@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
   dependencies:
-    d3-dispatch "1 - 2"
-    d3-selection "2"
+    d3-dispatch "1 - 3"
+    d3-selection "3"
 
-"d3-dsv@1 - 2", d3-dsv@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-2.0.0.tgz#b37b194b6df42da513a120d913ad1be22b5fe7c5"
-  integrity sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==
+"d3-dsv@1 - 3", d3-dsv@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73"
+  integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
   dependencies:
-    commander "2"
-    iconv-lite "0.4"
+    commander "7"
+    iconv-lite "0.6"
     rw "1"
 
-"d3-ease@1 - 2", d3-ease@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-2.0.0.tgz#fd1762bfca00dae4bacea504b1d628ff290ac563"
-  integrity sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==
+"d3-ease@1 - 3", d3-ease@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
 
-d3-fetch@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-2.0.0.tgz#ecd7ef2128d9847a3b41b548fec80918d645c064"
-  integrity sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==
+d3-fetch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22"
+  integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==
   dependencies:
-    d3-dsv "1 - 2"
+    d3-dsv "1 - 3"
 
-d3-force@2:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-2.1.1.tgz#f20ccbf1e6c9e80add1926f09b51f686a8bc0937"
-  integrity sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==
+d3-force@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-3.0.0.tgz#3e2ba1a61e70888fe3d9194e30d6d14eece155c4"
+  integrity sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==
   dependencies:
-    d3-dispatch "1 - 2"
-    d3-quadtree "1 - 2"
-    d3-timer "1 - 2"
+    d3-dispatch "1 - 3"
+    d3-quadtree "1 - 3"
+    d3-timer "1 - 3"
 
-"d3-format@1 - 2", d3-format@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767"
-  integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==
+"d3-format@1 - 3", d3-format@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
 
-d3-geo@2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-2.0.2.tgz#c065c1b71fe8c5f1be657e5f43d9bdd010383c40"
-  integrity sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==
+d3-geo@3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.1.tgz#6027cf51246f9b2ebd64f99e01dc7c3364033a4d"
+  integrity sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==
   dependencies:
-    d3-array "^2.5.0"
+    d3-array "2.5.0 - 3"
 
-d3-hierarchy@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz#dab88a58ca3e7a1bc6cab390e89667fcc6d20218"
-  integrity sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw==
+d3-hierarchy@3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
+  integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
 
-"d3-interpolate@1 - 2", "d3-interpolate@1.2.0 - 2", d3-interpolate@2:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
-  integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
   dependencies:
-    d3-color "1 - 2"
+    d3-color "1 - 3"
 
-"d3-path@1 - 2", d3-path@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8"
-  integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==
+"d3-path@1 - 3", d3-path@3, d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
 
-d3-polygon@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-2.0.0.tgz#13608ef042fbec625ba1598327564f03c0396d8e"
-  integrity sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ==
+d3-polygon@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-3.0.1.tgz#0b45d3dd1c48a29c8e057e6135693ec80bf16398"
+  integrity sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==
 
-"d3-quadtree@1 - 2", d3-quadtree@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-2.0.0.tgz#edbad045cef88701f6fee3aee8e93fb332d30f9d"
-  integrity sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==
+"d3-quadtree@1 - 3", d3-quadtree@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz#6dca3e8be2b393c9a9d514dabbd80a92deef1a4f"
+  integrity sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==
 
-d3-random@2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-2.2.2.tgz#5eebd209ef4e45a2b362b019c1fb21c2c98cbb6e"
-  integrity sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==
+d3-random@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
+  integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
 
-d3-scale-chromatic@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz#c13f3af86685ff91323dc2f0ebd2dabbd72d8bab"
-  integrity sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==
+d3-scale-chromatic@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#34c39da298b23c20e02f1a4b239bd0f22e7f1314"
+  integrity sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==
   dependencies:
-    d3-color "1 - 2"
-    d3-interpolate "1 - 2"
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
 
-d3-scale@3:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3"
-  integrity sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==
+d3-scale@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
   dependencies:
-    d3-array "^2.3.0"
-    d3-format "1 - 2"
-    d3-interpolate "1.2.0 - 2"
-    d3-time "^2.1.1"
-    d3-time-format "2 - 3"
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
 
-d3-selection@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-2.0.0.tgz#94a11638ea2141b7565f883780dabc7ef6a61066"
-  integrity sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==
+"d3-selection@2 - 3", d3-selection@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
 
-d3-shape@2:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f"
-  integrity sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==
+d3-shape@3:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
   dependencies:
-    d3-path "1 - 2"
+    d3-path "^3.1.0"
 
-"d3-time-format@2 - 3", d3-time-format@3:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
-  integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
+"d3-time-format@2 - 4", d3-time-format@4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
   dependencies:
-    d3-time "1 - 2"
+    d3-time "1 - 3"
 
-"d3-time@1 - 2", d3-time@2, d3-time@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
-  integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
   dependencies:
-    d3-array "2"
+    d3-array "2 - 3"
 
-"d3-timer@1 - 2", d3-timer@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-2.0.0.tgz#055edb1d170cfe31ab2da8968deee940b56623e6"
-  integrity sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==
+"d3-timer@1 - 3", d3-timer@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
 
-d3-transition@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-2.0.0.tgz#366ef70c22ef88d1e34105f507516991a291c94c"
-  integrity sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==
+"d3-transition@2 - 3", d3-transition@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
   dependencies:
-    d3-color "1 - 2"
-    d3-dispatch "1 - 2"
-    d3-ease "1 - 2"
-    d3-interpolate "1 - 2"
-    d3-timer "1 - 2"
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
 
-d3-zoom@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-2.0.0.tgz#f04d0afd05518becce879d04709c47ecd93fba54"
-  integrity sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==
-  dependencies:
-    d3-dispatch "1 - 2"
-    d3-drag "2"
-    d3-interpolate "1 - 2"
-    d3-selection "2"
-    d3-transition "2"
-
-d3@^6.0.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-6.7.0.tgz#adac458597b4a2cafe8e08cf30948af0c95cd61f"
-  integrity sha512-hNHRhe+yCDLUG6Q2LwvR/WdNFPOJQ5VWqsJcwIYVeI401+d2/rrCjxSXkiAdIlpx7/73eApFB4Olsmh3YN7a6g==
-  dependencies:
-    d3-array "2"
-    d3-axis "2"
-    d3-brush "2"
-    d3-chord "2"
-    d3-color "2"
-    d3-contour "2"
-    d3-delaunay "5"
-    d3-dispatch "2"
-    d3-drag "2"
-    d3-dsv "2"
-    d3-ease "2"
-    d3-fetch "2"
-    d3-force "2"
-    d3-format "2"
-    d3-geo "2"
-    d3-hierarchy "2"
-    d3-interpolate "2"
-    d3-path "2"
-    d3-polygon "2"
-    d3-quadtree "2"
-    d3-random "2"
-    d3-scale "3"
-    d3-scale-chromatic "2"
-    d3-selection "2"
-    d3-shape "2"
-    d3-time "2"
-    d3-time-format "3"
-    d3-timer "2"
-    d3-transition "2"
-    d3-zoom "2"
+d3-zoom@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
+d3@^7.9.0:
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-7.9.0.tgz#579e7acb3d749caf8860bd1741ae8d371070cd5d"
+  integrity sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==
+  dependencies:
+    d3-array "3"
+    d3-axis "3"
+    d3-brush "3"
+    d3-chord "3"
+    d3-color "3"
+    d3-contour "4"
+    d3-delaunay "6"
+    d3-dispatch "3"
+    d3-drag "3"
+    d3-dsv "3"
+    d3-ease "3"
+    d3-fetch "3"
+    d3-force "3"
+    d3-format "3"
+    d3-geo "3"
+    d3-hierarchy "3"
+    d3-interpolate "3"
+    d3-path "3"
+    d3-polygon "3"
+    d3-quadtree "3"
+    d3-random "3"
+    d3-scale "4"
+    d3-scale-chromatic "3"
+    d3-selection "3"
+    d3-shape "3"
+    d3-time "3"
+    d3-time-format "4"
+    d3-timer "3"
+    d3-transition "3"
+    d3-zoom "3"
 
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
@@ -7026,24 +7119,6 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-default-browser-id@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c"
-  integrity sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==
-  dependencies:
-    bplist-parser "^0.2.0"
-    untildify "^4.0.0"
-
-default-browser@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/default-browser/-/default-browser-4.0.0.tgz#53c9894f8810bf86696de117a6ce9085a3cbc7da"
-  integrity sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==
-  dependencies:
-    bundle-name "^3.0.0"
-    default-browser-id "^3.0.0"
-    execa "^7.1.1"
-    titleize "^3.0.0"
-
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -7082,11 +7157,6 @@ define-lazy-prop@^2.0.0:
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
-define-lazy-prop@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
-  integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
-
 define-properties@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
@@ -7139,10 +7209,12 @@ del@^4.1.1:
     pify "^4.0.1"
     rimraf "^2.6.3"
 
-delaunator@4:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-4.0.1.tgz#3d779687f57919a7a418f8ab947d3bddb6846957"
-  integrity sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==
+delaunator@5:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
+  integrity sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==
+  dependencies:
+    robust-predicates "^3.0.2"
 
 delayed-stream@~1.0.0:
   version "1.0.0"
@@ -7177,11 +7249,6 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-browser@^5.1.1:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
-  integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==
-
 detect-indent@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
@@ -7765,6 +7832,13 @@ es-iterator-helpers@^1.0.12, es-iterator-helpers@^1.0.15:
     iterator.prototype "^1.1.2"
     safe-array-concat "^1.0.1"
 
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -7941,12 +8015,12 @@ eslint-plugin-prettier@3.1.2:
     prettier-linter-helpers "^1.0.0"
 
 eslint-plugin-prettier@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz#6887780ed95f7708340ec79acfdf60c35b9be57a"
-  integrity sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz#d1c8f972d8f60e414c25465c163d16f209411f95"
+  integrity sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==
   dependencies:
     prettier-linter-helpers "^1.0.0"
-    synckit "^0.8.5"
+    synckit "^0.9.1"
 
 eslint-plugin-react-hooks@2.3.0:
   version "2.3.0"
@@ -8430,36 +8504,6 @@ execa@^4.0.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
-execa@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
-  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.0"
-    human-signals "^2.1.0"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.1"
-    onetime "^5.1.2"
-    signal-exit "^3.0.3"
-    strip-final-newline "^2.0.0"
-
-execa@^7.1.1:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-7.2.0.tgz#657e75ba984f42a70f38928cedc87d6f2d4fe4e9"
-  integrity sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.1"
-    human-signals "^4.3.0"
-    is-stream "^3.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^5.1.0"
-    onetime "^6.0.0"
-    signal-exit "^3.0.7"
-    strip-final-newline "^3.0.0"
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -8643,17 +8687,6 @@ fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-glob@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
-  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.2"
-    merge2 "^1.3.0"
-    micromatch "^4.0.4"
-
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -9199,11 +9232,6 @@ get-stream@^5.0.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0, get-stream@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
-  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
-
 get-symbol-description@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
@@ -9400,11 +9428,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
-grapheme-splitter@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
-  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
-
 graphemer@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
@@ -9440,14 +9463,14 @@ handle-thing@^2.0.0:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
-handlebars-loader@^1.7.1:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/handlebars-loader/-/handlebars-loader-1.7.2.tgz#1694cc7cb3de1d16bec718af257eed853e4af84d"
-  integrity sha512-rEzru8REzqeJlbotJD+gPQ8AHyxcAjeXbGqGmrz3+sbjecI0ungieONwMR27Htr+AoKI5W36oPLwcwGrPzO8gw==
+handlebars-loader@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/handlebars-loader/-/handlebars-loader-1.7.3.tgz#579b855770e51c325fbdf4075cca8d76fe10f59f"
+  integrity sha512-dDb+8D51vE3OTSE2wuGPWRAegtsEuw8Mk8hCjtRu/pNcBfN5q+M8ZG3kVJxBuOeBrVElpFStipGmaxSBTRR1mQ==
   dependencies:
     async "^3.2.2"
     fastparse "^1.0.0"
-    loader-utils "1.0.x"
+    loader-utils "1.4.x"
     object-assign "^4.1.0"
 
 handlebars@^4.7.7:
@@ -9462,6 +9485,18 @@ handlebars@^4.7.7:
   optionalDependencies:
     uglify-js "^3.1.4"
 
+handlebars@^4.7.8:
+  version "4.7.8"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.8.tgz#41c42c18b1be2365439188c77c6afae71c0cd9e9"
+  integrity sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==
+  dependencies:
+    minimist "^1.2.5"
+    neo-async "^2.6.2"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
+  optionalDependencies:
+    uglify-js "^3.1.4"
+
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -9596,6 +9631,13 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 he@1.2.x, he@^1.1.1, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -9876,16 +9918,6 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-human-signals@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
-  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
-
-human-signals@^4.3.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-4.3.1.tgz#ab7f811e851fca97ffbd2c1fe9a958964de321b2"
-  integrity sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==
-
 human-size@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/human-size/-/human-size-1.1.0.tgz#052562be999841c037022c20259990c56ea996f9"
@@ -9901,13 +9933,20 @@ i@0.3.x:
   resolved "https://registry.yarnpkg.com/i/-/i-0.3.7.tgz#2a7437a923d59c14b17243dc63a549af24d85799"
   integrity sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q==
 
-iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@0.6:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -9952,6 +9991,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+ignore@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
+  integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
+
 image-size@^0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
@@ -9962,10 +10006,10 @@ immediate@3.0.6:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
-immer@^9.0.21:
-  version "9.0.21"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
-  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
+immer@^10.0.3:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.1.1.tgz#206f344ea372d8ea176891545ee53ccc062db7bc"
+  integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
 
 immutable@^4.0.0:
   version "4.1.0"
@@ -10123,10 +10167,10 @@ internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-internmap@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
-  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
 intersection-observer@0.11.0:
   version "0.11.0"
@@ -10344,11 +10388,6 @@ is-docker@^2.0.0, is-docker@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
-is-docker@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-3.0.0.tgz#90093aa3106277d8a77a5910dbae71747e15a200"
-  integrity sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
-
 is-dom@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.1.0.tgz#af1fced292742443bb59ca3f76ab5e80907b4e8a"
@@ -10434,13 +10473,6 @@ is-in-browser@^1.0.2, is-in-browser@^1.1.3:
   resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
   integrity sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==
 
-is-inside-container@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
-  integrity sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
-  dependencies:
-    is-docker "^3.0.0"
-
 is-map@^2.0.2, is-map@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
@@ -10556,11 +10588,6 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
-is-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
-  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
-
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -11667,14 +11694,14 @@ loader-runner@^2.4.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@1.0.x:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.0.4.tgz#13f56197f1523a305891248b4c7244540848426c"
-  integrity sha512-TMS4PQ0+m0xyRGBunvDQIdhWJY6JOYeEPpHZEW0EmDhqKrQUj04xiMT3jsdVS17pUg0JzX1mJI3QiV8lXjoEng==
+loader-utils@1.4.x:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
+  integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
   dependencies:
-    big.js "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
 
 loader-utils@^0.2.16:
   version "0.2.17"
@@ -12187,11 +12214,6 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mimic-fn@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
-  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
-
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -12365,10 +12387,10 @@ mjml-body@4.12.0:
     lodash "^4.17.21"
     mjml-core "4.12.0"
 
-mjml-browser@^4.10.2:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/mjml-browser/-/mjml-browser-4.12.0.tgz#61a0458bac77479032814ced5e2b63edf84200d6"
-  integrity sha512-dD2DJmR2a5o4+LjB2u2Xt9nhE5YWJYD5+iVKpk2/oc50LMmX5KL6HcIbGJjYltt4ehtQADZPZ8YVsl11BgS0Zg==
+mjml-browser@^4.15.3:
+  version "4.15.3"
+  resolved "https://registry.yarnpkg.com/mjml-browser/-/mjml-browser-4.15.3.tgz#16e129d65bb1fe911b096a300cd60b20d46ac407"
+  integrity sha512-HS3YFo6mfle+TLnaRzUbDa9COwkm860lAuHXD5e7qxi90AVhGdAnG1KAVrriEfQSuYcAZbhZjZtp6GhvXi6XcA==
 
 mjml-button@4.12.0:
   version "4.12.0"
@@ -12835,11 +12857,6 @@ nanomatch@^1.2.1, nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-natural-compare-lite@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
-  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -12855,7 +12872,7 @@ negotiator@0.6.3:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
-neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
+neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@@ -12971,7 +12988,7 @@ node-notifier@^8.0.0:
     uuid "^8.3.0"
     which "^2.0.2"
 
-node-polyglot@2.4.2, node-polyglot@^2.2.2, node-polyglot@^2.4.0:
+node-polyglot@2.4.2, node-polyglot@^2.4.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/node-polyglot/-/node-polyglot-2.4.2.tgz#e4876e6710b70dc00b1351a9a68de4af47a5d61d"
   integrity sha512-AgTVpQ32BQ5XPI+tFHJ9bCYxWwSLvtmEodX8ooftFhEuyCgBG6ijWulIVb7pH3THigtgvc9uLiPn0IO51KHpkg==
@@ -12982,6 +12999,15 @@ node-polyglot@2.4.2, node-polyglot@^2.2.2, node-polyglot@^2.4.0:
     string.prototype.trim "^1.2.4"
     warning "^4.0.3"
 
+node-polyglot@^2.5.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-polyglot/-/node-polyglot-2.6.0.tgz#3d5889664253d90babc0fcd3c12ae0ac7b98289f"
+  integrity sha512-ZZFkaYzIfGfBvSM6QhA9dM8EEaUJOVewzGSRcXWbJELXDj0lajAtKaENCYxvF5yE+TgHg6NQb0CmgYMsMdcNJQ==
+  dependencies:
+    hasown "^2.0.2"
+    object.entries "^1.1.8"
+    warning "^4.0.3"
+
 node-releases@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666"
@@ -13043,20 +13069,13 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run-path@^4.0.0, npm-run-path@^4.0.1:
+npm-run-path@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
     path-key "^3.0.0"
 
-npm-run-path@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
-  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
-  dependencies:
-    path-key "^4.0.0"
-
 nth-check@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -13213,6 +13232,15 @@ object.entries@^1.1.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+object.entries@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
 object.fromentries@^2.0.0, object.fromentries@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
@@ -13326,20 +13354,13 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
-onetime@^5.1.0, onetime@^5.1.2:
+onetime@^5.1.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
   integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
   dependencies:
     mimic-fn "^2.1.0"
 
-onetime@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
-  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
-  dependencies:
-    mimic-fn "^4.0.0"
-
 open@7.4.2:
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
@@ -13357,16 +13378,6 @@ open@8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
-open@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-9.1.0.tgz#684934359c90ad25742f5a26151970ff8c6c80b6"
-  integrity sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==
-  dependencies:
-    default-browser "^4.0.0"
-    define-lazy-prop "^3.0.0"
-    is-inside-container "^1.0.0"
-    is-wsl "^2.2.0"
-
 opener@^1.5.1:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@@ -13544,7 +13555,7 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pako@~1.0.5:
+pako@^1.0.10, pako@^1.0.11, pako@^1.0.6, pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
@@ -13719,11 +13730,6 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-key@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
-  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
-
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -13766,6 +13772,16 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pdf-lib@1.17.1:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/pdf-lib/-/pdf-lib-1.17.1.tgz#9e7dd21261a0c1fb17992580885b39e7d08f451f"
+  integrity sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==
+  dependencies:
+    "@pdf-lib/standard-fonts" "^1.0.0"
+    "@pdf-lib/upng" "^1.0.1"
+    pako "^1.0.11"
+    tslib "^1.11.1"
+
 pdfjs-dist@2.12.313:
   version "2.12.313"
   resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz#62f2273737bb956267ae2e02cdfaddcb1099819c"
@@ -14708,16 +14724,12 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-react-redux@^8.1.2:
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188"
-  integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw==
+react-redux@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.1.2.tgz#deba38c64c3403e9abd0c3fbeab69ffd9d8a7e4b"
+  integrity sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==
   dependencies:
-    "@babel/runtime" "^7.12.1"
-    "@types/hoist-non-react-statics" "^3.3.1"
     "@types/use-sync-external-store" "^0.0.3"
-    hoist-non-react-statics "^3.3.2"
-    react-is "^18.0.0"
     use-sync-external-store "^1.0.0"
 
 react-remove-scroll-bar@^2.3.3:
@@ -15032,10 +15044,10 @@ redux-thunk@^2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
   integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
 
-redux-thunk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
-  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
 
 "redux@3 || 4", redux@^4.0.0, redux@^4.0.5:
   version "4.2.0"
@@ -15051,12 +15063,10 @@ redux@4.1.2:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
-redux@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
-  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
+redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.1.tgz#97fa26881ce5746500125585d5642c77b6e9447b"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
 
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
@@ -15311,10 +15321,10 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-reselect@^4.1.8:
-  version "4.1.8"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
-  integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
+reselect@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
+  integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
 
 resolve-cwd@^2.0.0:
   version "2.0.0"
@@ -15425,6 +15435,11 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+robust-predicates@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
+
 rooks@^5.11.2:
   version "5.11.6"
   resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.11.6.tgz#8ea93262f950f775bd131212b6167755e49162f4"
@@ -15443,13 +15458,6 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-run-applescript@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/run-applescript/-/run-applescript-5.0.0.tgz#e11e1c932e055d5c6b40d98374e0268d9b11899c"
-  integrity sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==
-  dependencies:
-    execa "^5.0.0"
-
 run-async@^2.2.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -15517,7 +15525,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -15877,7 +15885,7 @@ sigmund@^1.0.1:
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
   integrity sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==
 
-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
+signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -16521,11 +16529,6 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
-strip-final-newline@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
-  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
-
 strip-indent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
@@ -16729,13 +16732,13 @@ symbol@^0.2.1:
   resolved "https://registry.yarnpkg.com/symbol/-/symbol-0.2.3.tgz#3b9873b8a901e47c6efe21526a3ac372ef28bbc7"
   integrity sha512-IUW+ek7apEaW5bFhS6WpYoNtVpNTlNoqB/PH7YiMWQTxSPeXCzG4PILVakwXivJt3ZXWeO1fIJnUd/L9A/VeGA==
 
-synckit@^0.8.5:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.5.tgz#b7f4358f9bb559437f9f167eb6bc46b3c9818fa3"
-  integrity sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==
+synckit@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.1.tgz#febbfbb6649979450131f64735aa3f6c14575c88"
+  integrity sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==
   dependencies:
-    "@pkgr/utils" "^2.3.1"
-    tslib "^2.5.0"
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
 
 table@^5.2.3:
   version "5.4.6"
@@ -16910,11 +16913,6 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-titleize@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
-  integrity sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==
-
 tldjs@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tldjs/-/tldjs-2.3.1.tgz#cf09c3eb5d7403a9e214b7d65f3cf9651c0ab039"
@@ -17079,10 +17077,10 @@ tslib@^2.0.0, tslib@^2.1.0, tslib@^2.2.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tslib@^2.5.0, tslib@^2.6.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+tslib@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
 
 tsutils@^3.21.0:
   version "3.21.0"
@@ -17395,11 +17393,6 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-untildify@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
-  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
-
 upath@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"